feat: add coding stats and improve styles
This commit is contained in:
parent
1b44e40e80
commit
31a081c379
15 changed files with 480 additions and 257 deletions
|
|
@ -2,27 +2,26 @@ import js from "@eslint/js"
|
|||
import globals from "globals"
|
||||
import reactHooks from "eslint-plugin-react-hooks"
|
||||
import reactRefresh from "eslint-plugin-react-refresh"
|
||||
import tseslint from "typescript-eslint"
|
||||
|
||||
export default tseslint.config(
|
||||
{ ignores: ["dist"] },
|
||||
{
|
||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
files: ["**/*.{ts,tsx}"],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
plugins: {
|
||||
"react-hooks": reactHooks,
|
||||
"react-refresh": reactRefresh,
|
||||
},
|
||||
rules: {
|
||||
...reactHooks.configs.recommended.rules,
|
||||
"react-refresh/only-export-components": [
|
||||
"warn",
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
)
|
||||
// export default eslint.config(
|
||||
// { ignores: ["dist"] },
|
||||
// {
|
||||
// extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||
// files: ["**/*.{ts,tsx}"],
|
||||
// languageOptions: {
|
||||
// ecmaVersion: 2020,
|
||||
// globals: globals.browser,
|
||||
// },
|
||||
// plugins: {
|
||||
// "react-hooks": reactHooks,
|
||||
// "react-refresh": reactRefresh,
|
||||
// },
|
||||
// rules: {
|
||||
// ...reactHooks.configs.recommended.rules,
|
||||
// "react-refresh/only-export-components": [
|
||||
// "warn",
|
||||
// { allowConstantExport: true },
|
||||
// ],
|
||||
// },
|
||||
// }
|
||||
// )
|
||||
|
|
|
|||
11
src/api/wakapi-api.js
Normal file
11
src/api/wakapi-api.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import axios from "axios"
|
||||
|
||||
const wakapiApi = axios.create({
|
||||
baseURL: import.meta.env.VITE_WAKAPI_URL,
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
Authorization: `Basic ${import.meta.env.VITE_WAKAPI_TOKEN}`,
|
||||
},
|
||||
})
|
||||
|
||||
export default wakapiApi
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { useQuery } from "@tanstack/react-query"
|
||||
import eolasApi from "@/api/eolas-api"
|
||||
import { convertDate } from "@/utils/convertDate"
|
||||
import { Link } from "react-router"
|
||||
|
||||
const EolasEntries = ({ entries }) => {
|
||||
return (
|
||||
|
|
@ -16,7 +15,7 @@ const EolasEntries = ({ entries }) => {
|
|||
<a
|
||||
href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
|
||||
key={i}
|
||||
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 font-medium"
|
||||
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
|
||||
>
|
||||
{entry.title.replace(/_/g, " ")}
|
||||
</a>
|
||||
|
|
@ -38,11 +37,11 @@ const EolasListing = () => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-medium mb-4 text-[#fabd2f]!">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! scanlined inline-block px-1">
|
||||
recent notes (external)
|
||||
</h2>
|
||||
|
||||
{isLoading && <span>Loading...</span>}
|
||||
{isLoading && <div>Loading...</div>}
|
||||
|
||||
{error ? (
|
||||
<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
|
||||
|
|
|
|||
29
src/components/LanguagesChart.jsx
Normal file
29
src/components/LanguagesChart.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import MetricBar from "./MetricBar"
|
||||
|
||||
const LanguagesChart = ({ chartData, error }) => {
|
||||
return (
|
||||
<div className="bg-sidebar p-3 my-4">
|
||||
<div className="text-muted-foreground text-sm pb-2">
|
||||
programming languages
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div>Data could not be found!</div>
|
||||
) : !chartData?.length ? (
|
||||
<div>No data for time period.</div>
|
||||
) : (
|
||||
chartData.map((x) => (
|
||||
<MetricBar
|
||||
key={x.language}
|
||||
metric={x.language}
|
||||
hours={x.hours}
|
||||
percentage={x.percentage}
|
||||
color="#458588"
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LanguagesChart
|
||||
37
src/components/MetricBar.jsx
Normal file
37
src/components/MetricBar.jsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
const MetricBar = ({ metric, hours, percentage, color }) => (
|
||||
<div style={{ marginBottom: "12px" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "4px",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<span style={{}}>{metric}</span>
|
||||
<span style={{ color: "#bdae93" }}>
|
||||
{hours}h ({percentage}%)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "8px",
|
||||
backgroundColor: "#32302f",
|
||||
borderRadius: "4px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: `${percentage}%`,
|
||||
height: "100%",
|
||||
backgroundColor: color,
|
||||
transition: "width 0.3s ease",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default MetricBar
|
||||
30
src/components/ProjectsChart.jsx
Normal file
30
src/components/ProjectsChart.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import MetricBar from "./MetricBar"
|
||||
|
||||
const ProjectsChart = ({ chartData, error }) => {
|
||||
return (
|
||||
<div className="bg-sidebar p-3 my-4">
|
||||
<div className="text-muted-foreground text-sm pb-2">projects</div>
|
||||
|
||||
{error ? (
|
||||
<div>Data could not be found!</div>
|
||||
) : !chartData?.length ? (
|
||||
<div>No data for time period.</div>
|
||||
) : (
|
||||
chartData.map((x) => (
|
||||
<MetricBar
|
||||
key={x.project}
|
||||
metric={x.project}
|
||||
hours={x.hours}
|
||||
percentage={x.percentage}
|
||||
color="#fe8019"
|
||||
/>
|
||||
))
|
||||
)}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Data excludes workplace repos.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectsChart
|
||||
10
src/components/Scorecard.jsx
Normal file
10
src/components/Scorecard.jsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
const Scorecard = ({ title, metric }) => {
|
||||
return (
|
||||
<div className="bg-sidebar p-3">
|
||||
<div className="text-muted-foreground text-sm">{title}</div>
|
||||
<div className="text-lg">{metric}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Scorecard
|
||||
109
src/containers/CodeStats.jsx
Normal file
109
src/containers/CodeStats.jsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { useQuery } from "@tanstack/react-query"
|
||||
import wakapiApi from "../api/wakapi-api"
|
||||
import { convertDateFriendly } from "../utils/convertDate"
|
||||
import Scorecard from "../components/Scorecard"
|
||||
import LanguagesChart from "../components/LanguagesChart"
|
||||
import ProjectsChart from "../components/ProjectsChart"
|
||||
|
||||
const convertSeconds = (secs) => {
|
||||
return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`
|
||||
}
|
||||
|
||||
const CodeStats = () => {
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["codestats"],
|
||||
queryFn: () =>
|
||||
wakapiApi.get(`summary?interval=week`).then((res) => res.data),
|
||||
})
|
||||
|
||||
const grandTotal = data?.projects.reduce((acc, curr) => acc + curr.total, 0)
|
||||
const grandTotalFormatted = `${Math.floor(grandTotal / 3600)}h ${Math.floor((grandTotal % 3600) / 60)}m`
|
||||
const os = data?.operating_systems
|
||||
const osMetric = os ? (
|
||||
<div className="text-sm">
|
||||
{os[0]?.key}: {convertSeconds(os[0].total)}, {os[1]?.key}:{" "}
|
||||
{convertSeconds(os[1].total)}
|
||||
</div>
|
||||
) : (
|
||||
"Error"
|
||||
)
|
||||
|
||||
const personalProjects =
|
||||
data && data?.projects.filter((project) => !project.key.includes("gp-"))
|
||||
|
||||
const mainProject = personalProjects?.sort((a, b) => a.total > b.total)[0].key
|
||||
|
||||
console.log(personalProjects)
|
||||
|
||||
const languagesChartData = data?.languages
|
||||
.map((lang) => ({
|
||||
metric: lang.key,
|
||||
language: lang.key,
|
||||
hours: (lang.total / 3600).toFixed(1),
|
||||
percentage: (
|
||||
(lang.total / data.languages.reduce((sum, i) => sum + i.total, 0)) *
|
||||
100
|
||||
).toFixed(1),
|
||||
}))
|
||||
.slice(0, 4)
|
||||
|
||||
const projectsChartData =
|
||||
personalProjects &&
|
||||
personalProjects.map((proj) => ({
|
||||
metric: proj.key,
|
||||
project: proj.key,
|
||||
hours: (proj.total / 3600).toFixed(1),
|
||||
percentage: (
|
||||
(proj.total / personalProjects.reduce((sum, i) => sum + i.total, 0)) *
|
||||
100
|
||||
).toFixed(1),
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#458588]! scanlined inline-block px-1">
|
||||
code stats
|
||||
</h2>
|
||||
<div className="mb-4 text-sm text-muted">
|
||||
{convertDateFriendly(data?.from)} -{" "}
|
||||
{convertDateFriendly(data?.to)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Score-cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<Scorecard
|
||||
title="time coding"
|
||||
metric={
|
||||
error ? "Error" : isLoading ? "Loading..." : grandTotalFormatted
|
||||
}
|
||||
/>
|
||||
|
||||
<Scorecard
|
||||
title="main project"
|
||||
metric={error ? "Error" : isLoading ? "Loading..." : mainProject}
|
||||
/>
|
||||
|
||||
<Scorecard
|
||||
title="OS"
|
||||
metric={error ? "Error" : isLoading ? "Loading..." : osMetric}
|
||||
/>
|
||||
</div>
|
||||
<LanguagesChart chartData={languagesChartData} error={error} />
|
||||
<ProjectsChart chartData={projectsChartData} error={error} />
|
||||
<div className="text-sm text-center text-muted-foreground">
|
||||
Data sourced from my self-hosted{" "}
|
||||
<a href="https://wakapi.dev/" target="__blank">
|
||||
Wakapi
|
||||
</a>{" "}
|
||||
instance.
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CodeStats
|
||||
|
|
@ -8,7 +8,9 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4">{title}</h2>
|
||||
<h2 className="text-2xl font-semibold mb-4 scanlined inline-block px-1">
|
||||
{title}
|
||||
</h2>
|
||||
{posts.map((post) => (
|
||||
<ul>
|
||||
<li className="mb-4">
|
||||
|
|
@ -19,7 +21,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
|||
<Link
|
||||
to={`/posts/${post.slug}`}
|
||||
key={post.slug}
|
||||
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 font-medium"
|
||||
className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -4,82 +4,86 @@
|
|||
@import "tw-animate-css";
|
||||
|
||||
* {
|
||||
outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
|
||||
outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-sansserif);
|
||||
font-family: var(--font-sansserif);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.condensed {
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-weight: 500;
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
font-weight: 500;
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-orange-light);
|
||||
color: var(--color-orange-light);
|
||||
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
color: var(--color-green-light);
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
color: var(--color-green-light);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
font-family: "IBM Plex Sans Condensed";
|
||||
}
|
||||
|
||||
.monospaced-font {
|
||||
font-family: "iA Writer Mono";
|
||||
font-family: "iA Writer Mono";
|
||||
}
|
||||
|
||||
.scanlined {
|
||||
position: relative; /* Add this */
|
||||
position: relative;
|
||||
/* Add this */
|
||||
}
|
||||
|
||||
.scanlined::after {
|
||||
content: "";
|
||||
position: absolute; /* Change from fixed */
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
background-repeat: repeat;
|
||||
pointer-events: none;
|
||||
z-index: 9999; /* Might want to lower this too */
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
background-repeat: repeat;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
/* Might want to lower this too */
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-monospaced);
|
||||
font-family: var(--font-monospaced);
|
||||
}
|
||||
|
||||
p code {
|
||||
color: var(--foreground);
|
||||
background: #504945;
|
||||
font-size: 14px;
|
||||
padding: 0.2rem 0.3rem;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
color: var(--foreground);
|
||||
background: #504945;
|
||||
font-size: 14px;
|
||||
padding: 0.2rem 0.3rem;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shiki {
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: 0;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.3;
|
||||
/* counter-reset: line; */
|
||||
font-family: var(--font-monospaced) !important;
|
||||
font-size: 14px !important;
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: 0;
|
||||
overflow-x: auto;
|
||||
margin: 1.5rem 0;
|
||||
line-height: 1.3;
|
||||
/* counter-reset: line; */
|
||||
font-family: var(--font-monospaced) !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import PostListing from "@/containers/PostListing"
|
|||
import { usePosts } from "@/hooks/usePosts"
|
||||
import gruvboxComputer from "../images/gruvbox-computer.svg"
|
||||
import EolasListing from "@/components/EolasListing"
|
||||
import CodeStats from "../containers/CodeStats"
|
||||
// import TodayILearned from "@/containers/TodayILearned"
|
||||
|
||||
const HomePage = () => {
|
||||
|
|
@ -42,7 +43,7 @@ const HomePage = () => {
|
|||
<div className="container mx-auto p-4 grow">
|
||||
<div className="space-my-8">
|
||||
<section className="container">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]!">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! scanlined inline-block px-1">
|
||||
projects
|
||||
</h2>
|
||||
<ul>
|
||||
|
|
@ -65,7 +66,7 @@ const HomePage = () => {
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CodeStats />
|
||||
<EolasListing />
|
||||
</MainTemplate>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,79 +1,79 @@
|
|||
:root {
|
||||
--radius: 0.3rem;
|
||||
--background: #282828;
|
||||
--foreground: #ebdbb2;
|
||||
--sidebar: #3c3836;
|
||||
--color-red-light: #fb4934;
|
||||
--color-orange-light: #fe8019;
|
||||
--color-green-light: #b8bb26;
|
||||
--color-aqua-muted: #689d6a;
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: #8ec07c;
|
||||
--primary-muted: #689d6a;
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: #bdae93;
|
||||
--muted-foreground: #928374;
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--font-monospaced: "IBM Plex Mono";
|
||||
--font-sansserif: "IBM Plex Sans", sans-serif;
|
||||
--radius: 0.3rem;
|
||||
--background: #282828;
|
||||
--foreground: #ebdbb2;
|
||||
--sidebar: #3c3836;
|
||||
--color-red-light: #fb4934;
|
||||
--color-orange-light: #fe8019;
|
||||
--color-green-light: #b8bb26;
|
||||
--color-aqua-muted: #689d6a;
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: #8ec07c;
|
||||
--primary-muted: #689d6a;
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: #bdae93;
|
||||
--muted-foreground: #928374;
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--font-monospaced: "IBM Plex Mono";
|
||||
--font-sansserif: "IBM Plex Sans", sans-serif;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius));
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius));
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,41 +5,41 @@ import { convertDate } from "@/utils/convertDate"
|
|||
import { usePosts } from "@/hooks/usePosts"
|
||||
|
||||
const BlogTemplate = () => {
|
||||
const { slug } = useParams()
|
||||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
const { slug } = useParams()
|
||||
const { posts } = usePosts()
|
||||
const post = posts?.find((x) => x.slug === slug)
|
||||
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="container mx-auto p-4 grow">
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<header className="mb-6 pb-4">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight">
|
||||
{post?.title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
||||
<time datetime={convertDate(post?.date)} className="text-sm">
|
||||
{convertDate(post?.date)}
|
||||
</time>
|
||||
<div className="flex flex-wrap gap-3 align-center">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Link
|
||||
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
|
||||
key={i}
|
||||
to={`/tags/${tag}`}
|
||||
>
|
||||
{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
return (
|
||||
<MainTemplate>
|
||||
<div className="container mx-auto p-4 grow">
|
||||
{!post ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<header className="mb-6 pb-4">
|
||||
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-1">
|
||||
{post?.title}
|
||||
</h1>
|
||||
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
||||
<time datetime={convertDate(post?.date)} className="text-sm">
|
||||
{convertDate(post?.date)}
|
||||
</time>
|
||||
<div className="flex flex-wrap gap-3 align-center">
|
||||
{post?.tags?.map((tag, i) => (
|
||||
<Link
|
||||
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
|
||||
key={i}
|
||||
to={`/tags/${tag}`}
|
||||
>
|
||||
{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className="
|
||||
<div
|
||||
className="
|
||||
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]!
|
||||
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#fabd2f]
|
||||
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fabd2f]
|
||||
|
|
@ -65,13 +65,13 @@ const BlogTemplate = () => {
|
|||
[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
|
||||
[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
|
||||
"
|
||||
dangerouslySetInnerHTML={{ __html: post?.html }}
|
||||
/>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</MainTemplate>
|
||||
)
|
||||
dangerouslySetInnerHTML={{ __html: post?.html }}
|
||||
/>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</MainTemplate>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogTemplate
|
||||
|
|
|
|||
|
|
@ -3,82 +3,66 @@
|
|||
import gruvboxComputer from "../images/gruvbox-computer.svg"
|
||||
import { Link } from "react-router"
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="py-6">
|
||||
<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
|
||||
<div className="scanlined">
|
||||
<img src={gruvboxComputer} className="w-10" />
|
||||
</div>
|
||||
<ul class="flex space-x-4 px-4 py-2">
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
to="/"
|
||||
>
|
||||
home
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
to="/posts"
|
||||
>
|
||||
posts
|
||||
</Link>
|
||||
</li>
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
to="/about"
|
||||
>
|
||||
about
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
return (
|
||||
<header className="py-6">
|
||||
<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
|
||||
<Link to="/">
|
||||
<div className="scanlined">
|
||||
<img src={gruvboxComputer} className="w-11" />
|
||||
</div>
|
||||
</Link>
|
||||
<ul class="flex space-x-4 px-4 py-2">
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
to="/posts"
|
||||
>
|
||||
posts
|
||||
</Link>
|
||||
</li>
|
||||
<li class="flex flex-col items-center justify-center">
|
||||
<Link
|
||||
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
|
||||
to="/about"
|
||||
>
|
||||
about
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
|
||||
<nav>
|
||||
<ul className="flex flex-row justify-start gap-4">
|
||||
<li className="flex flex-col items-center justify-center">
|
||||
<a
|
||||
className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
|
||||
href="https://forgejo.systemsobscure.net/thomasabishop"
|
||||
target="blank"
|
||||
>
|
||||
forgejo
|
||||
</a>
|
||||
</li>
|
||||
<li className="">
|
||||
<a
|
||||
className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
|
||||
href="https://fosstodon.org/@systemsobscure"
|
||||
target="blank"
|
||||
>
|
||||
fosstodon
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
)
|
||||
return (
|
||||
<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
|
||||
<nav>
|
||||
<ul className="flex flex-row justify-start gap-4">
|
||||
<li className="flex flex-col items-center justify-center">
|
||||
<a
|
||||
className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
|
||||
href="https://forgejo.systemsobscure.net/thomasabishop"
|
||||
target="blank"
|
||||
>
|
||||
forgejo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
const MainTemplate = ({ children }) => {
|
||||
return (
|
||||
<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
|
||||
<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
|
||||
<Header />
|
||||
<div>{children}</div>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
|
||||
<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
|
||||
<Header />
|
||||
<div>{children}</div>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default MainTemplate
|
||||
|
|
|
|||
|
|
@ -39,4 +39,12 @@ const convertDate = (isoStamp) => {
|
|||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
export { convertDate }
|
||||
const convertDateFriendly = (isoStamp) => {
|
||||
const unixSeconds = new Date(isoStamp)
|
||||
const day = unixSeconds.getDate()
|
||||
const month = months[unixSeconds.getMonth()]
|
||||
const year = unixSeconds.getFullYear()
|
||||
return `${day} ${month} ${year}`
|
||||
}
|
||||
|
||||
export { convertDate, convertDateFriendly }
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue