thomasabishop/systems-obscure
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add coding stats and improve styles

Browse source
This commit is contained in:
Thomas Bishop 2025-11-25 17:11:28 +00:00
parent 1b44e40e80
commit 31a081c379
15 changed files with 480 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
eslint.config.js
View file

@ -2,27 +2,26 @@ import js from "@eslint/js"
import globals from "globals" import globals from "globals"
import reactHooks from "eslint-plugin-react-hooks" import reactHooks from "eslint-plugin-react-hooks"
import reactRefresh from "eslint-plugin-react-refresh" import reactRefresh from "eslint-plugin-react-refresh"
import tseslint from "typescript-eslint"
export default tseslint.config( // export default eslint.config(
{ ignores: ["dist"] }, // { ignores: ["dist"] },
{ // {
extends: [js.configs.recommended, ...tseslint.configs.recommended], // extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ["**/*.{ts,tsx}"], // files: ["**/*.{ts,tsx}"],
languageOptions: { // languageOptions: {
ecmaVersion: 2020, // ecmaVersion: 2020,
globals: globals.browser, // globals: globals.browser,
}, // },
plugins: { // plugins: {
"react-hooks": reactHooks, // "react-hooks": reactHooks,
"react-refresh": reactRefresh, // "react-refresh": reactRefresh,
}, // },
rules: { // rules: {
...reactHooks.configs.recommended.rules, // ...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [ // "react-refresh/only-export-components": [
"warn", // "warn",
{ allowConstantExport: true }, // { allowConstantExport: true },
], // ],
}, // },
} // }
) // )

11
src/api/wakapi-api.js Normal file
View 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

7
src/components/EolasListing.jsx
View file

@ -1,7 +1,6 @@
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import eolasApi from "@/api/eolas-api" import eolasApi from "@/api/eolas-api"
import { convertDate } from "@/utils/convertDate" import { convertDate } from "@/utils/convertDate"
import { Link } from "react-router"
const EolasEntries = ({ entries }) => { const EolasEntries = ({ entries }) => {
return ( return (
@ -16,7 +15,7 @@ const EolasEntries = ({ entries }) => {
<a <a
href={`https://eolas.systemsobscure.net/entries/${entry.title}`} href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
key={i} 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, " ")} {entry.title.replace(/_/g, " ")}
</a> </a>
@ -38,11 +37,11 @@ const EolasListing = () => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <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) recent notes (external)
</h2> </h2>
{isLoading && <span>Loading...</span>} {isLoading && <div>Loading...</div>}
{error ? ( {error ? (
<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20"> <div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">

29
src/components/LanguagesChart.jsx Normal file
View 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
View 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
View 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
View 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
View 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

6
src/containers/PostListing.jsx
View file

@ -8,7 +8,9 @@ const PostListing = ({ posts, title, showAllButton }) => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <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) => ( {posts.map((post) => (
<ul> <ul>
<li className="mb-4"> <li className="mb-4">
@ -19,7 +21,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
<Link <Link
to={`/posts/${post.slug}`} to={`/posts/${post.slug}`}
key={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} {post.title}
</Link> </Link>

84
src/index.css
View file

@ -4,82 +4,86 @@
@import "tw-animate-css"; @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 { html {
font-family: var(--font-sansserif); font-family: var(--font-sansserif);
} }
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
} }
.condensed { .condensed {
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
} }
figcaption { figcaption {
font-weight: 500; font-weight: 500;
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
} }
h1 { h1 {
color: var(--color-orange-light); color: var(--color-orange-light);
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
} }
h2 { h2 {
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
color: var(--color-green-light); color: var(--color-green-light);
} }
h3 { h3 {
font-family: "IBM Plex Sans Condensed"; font-family: "IBM Plex Sans Condensed";
} }
.monospaced-font { .monospaced-font {
font-family: "iA Writer Mono"; font-family: "iA Writer Mono";
} }
.scanlined { .scanlined {
position: relative; /* Add this */ position: relative;
/* Add this */
} }
.scanlined::after { .scanlined::after {
content: ""; content: "";
position: absolute; /* Change from fixed */ position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px); background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
background-size: 2px 2px; background-size: 2px 2px;
background-repeat: repeat; background-repeat: repeat;
pointer-events: none; pointer-events: none;
z-index: 9999; /* Might want to lower this too */ z-index: 9999;
/* Might want to lower this too */
} }
code { code {
font-family: var(--font-monospaced); font-family: var(--font-monospaced);
} }
p code { p code {
color: var(--foreground); color: var(--foreground);
background: #504945; background: #504945;
font-size: 14px; font-size: 14px;
padding: 0.2rem 0.3rem; padding: 0.2rem 0.3rem;
border-radius: var(--radius); border-radius: var(--radius);
font-weight: 500; font-weight: 500;
} }
.shiki { .shiki {
padding: 1rem 1.2rem; padding: 1rem 1.2rem;
border-radius: 0; border-radius: 0;
overflow-x: auto; overflow-x: auto;
margin: 1.5rem 0; margin: 1.5rem 0;
line-height: 1.3; line-height: 1.3;
/* counter-reset: line; */ /* counter-reset: line; */
font-family: var(--font-monospaced) !important; font-family: var(--font-monospaced) !important;
font-size: 14px !important; font-size: 14px !important;
} }

5
src/pages/home.jsx
View file

@ -3,6 +3,7 @@ import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
import gruvboxComputer from "../images/gruvbox-computer.svg" import gruvboxComputer from "../images/gruvbox-computer.svg"
import EolasListing from "@/components/EolasListing" import EolasListing from "@/components/EolasListing"
import CodeStats from "../containers/CodeStats"
// import TodayILearned from "@/containers/TodayILearned" // import TodayILearned from "@/containers/TodayILearned"
const HomePage = () => { const HomePage = () => {
@ -42,7 +43,7 @@ const HomePage = () => {
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
<div className="space-my-8"> <div className="space-my-8">
<section className="container"> <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 projects
</h2> </h2>
<ul> <ul>
@ -65,7 +66,7 @@ const HomePage = () => {
</section> </section>
</div> </div>
</div> </div>
<CodeStats />
<EolasListing /> <EolasListing />
</MainTemplate> </MainTemplate>
) )

148
src/styles/_variables.css
View file

@ -1,79 +1,79 @@
:root { :root {
--radius: 0.3rem; --radius: 0.3rem;
--background: #282828; --background: #282828;
--foreground: #ebdbb2; --foreground: #ebdbb2;
--sidebar: #3c3836; --sidebar: #3c3836;
--color-red-light: #fb4934; --color-red-light: #fb4934;
--color-orange-light: #fe8019; --color-orange-light: #fe8019;
--color-green-light: #b8bb26; --color-green-light: #b8bb26;
--color-aqua-muted: #689d6a; --color-aqua-muted: #689d6a;
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.145 0 0);
--primary: #8ec07c; --primary: #8ec07c;
--primary-muted: #689d6a; --primary-muted: #689d6a;
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.205 0 0);
--muted: #bdae93; --muted: #bdae93;
--muted-foreground: #928374; --muted-foreground: #928374;
--accent: oklch(0.97 0 0); --accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0); --border: oklch(0.922 0 0);
--input: oklch(0.922 0 0); --input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0); --ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.769 0.188 70.08);
--sidebar-foreground: oklch(0.145 0 0); --sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0); --sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0); --sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0); --sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0); --sidebar-ring: oklch(0.708 0 0);
--font-monospaced: "IBM Plex Mono"; --font-monospaced: "IBM Plex Mono";
--font-sansserif: "IBM Plex Sans", sans-serif; --font-sansserif: "IBM Plex Sans", sans-serif;
} }
@theme inline { @theme inline {
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-xl: calc(var(--radius)); --radius-xl: calc(var(--radius));
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-card: var(--card); --color-card: var(--card);
--color-card-foreground: var(--card-foreground); --color-card-foreground: var(--card-foreground);
--color-popover: var(--popover); --color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground); --color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary); --color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground); --color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary); --color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground); --color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted); --color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground); --color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent); --color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground); --color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive); --color-destructive: var(--destructive);
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
--color-chart-1: var(--chart-1); --color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2); --color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3); --color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4); --color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5); --color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar); --color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
} }

80
src/templates/BlogTemplate.jsx
View file

@ -5,41 +5,41 @@ import { convertDate } from "@/utils/convertDate"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
const BlogTemplate = () => { const BlogTemplate = () => {
const { slug } = useParams() const { slug } = useParams()
const { posts } = usePosts() const { posts } = usePosts()
const post = posts?.find((x) => x.slug === slug) const post = posts?.find((x) => x.slug === slug)
return ( return (
<MainTemplate> <MainTemplate>
<div className="container mx-auto p-4 grow"> <div className="container mx-auto p-4 grow">
{!post ? ( {!post ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<article className="prose prose-lg max-w-none"> <article className="prose prose-lg max-w-none">
<header className="mb-6 pb-4"> <header className="mb-6 pb-4">
<h1 className="text-4xl font-bold mb-4 leading-tight"> <h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-1">
{post?.title} {post?.title}
</h1> </h1>
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium"> <div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
<time datetime={convertDate(post?.date)} className="text-sm"> <time datetime={convertDate(post?.date)} className="text-sm">
{convertDate(post?.date)} {convertDate(post?.date)}
</time> </time>
<div className="flex flex-wrap gap-3 align-center"> <div className="flex flex-wrap gap-3 align-center">
{post?.tags?.map((tag, i) => ( {post?.tags?.map((tag, i) => (
<Link <Link
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]" className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
key={i} key={i}
to={`/tags/${tag}`} to={`/tags/${tag}`}
> >
{tag} {tag}
</Link> </Link>
))} ))}
</div> </div>
</div> </div>
</header> </header>
<div <div
className=" className="
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]! [&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]!
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]: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] [&>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]: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 [&>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 }} dangerouslySetInnerHTML={{ __html: post?.html }}
/> />
</article> </article>
)} )}
</div> </div>
</MainTemplate> </MainTemplate>
) )
} }
export default BlogTemplate export default BlogTemplate

126
src/templates/MainTemplate.jsx
View file

@ -3,82 +3,66 @@
import gruvboxComputer from "../images/gruvbox-computer.svg" import gruvboxComputer from "../images/gruvbox-computer.svg"
import { Link } from "react-router" import { Link } from "react-router"
const Header = () => { const Header = () => {
return ( return (
<header className="py-6"> <header className="py-6">
<nav className="bg-sidebar container mx-auto justify-between flex gap-1"> <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
<div className="scanlined"> <Link to="/">
<img src={gruvboxComputer} className="w-10" /> <div className="scanlined">
</div> <img src={gruvboxComputer} className="w-11" />
<ul class="flex space-x-4 px-4 py-2"> </div>
<li class="flex flex-col items-center justify-center"> </Link>
<Link <ul class="flex space-x-4 px-4 py-2">
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg" <li class="flex flex-col items-center justify-center">
to="/" <Link
> class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
home to="/posts"
</Link> >
</li> posts
</Link>
<li class="flex flex-col items-center justify-center"> </li>
<Link <li class="flex flex-col items-center justify-center">
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg" <Link
to="/posts" class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
> to="/about"
posts >
</Link> about
</li> </Link>
<li class="flex flex-col items-center justify-center"> </li>
<Link </ul>
class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg" </nav>
to="/about" </header>
> )
about
</Link>
</li>
</ul>
</nav>
</header>
)
} }
const Footer = () => { const Footer = () => {
return ( return (
<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8"> <footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
<nav> <nav>
<ul className="flex flex-row justify-start gap-4"> <ul className="flex flex-row justify-start gap-4">
<li className="flex flex-col items-center justify-center"> <li className="flex flex-col items-center justify-center">
<a <a
className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold" className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
href="https://forgejo.systemsobscure.net/thomasabishop" href="https://forgejo.systemsobscure.net/thomasabishop"
target="blank" target="blank"
> >
forgejo forgejo
</a> </a>
</li> </li>
<li className=""> </ul>
<a </nav>
className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold" </footer>
href="https://fosstodon.org/@systemsobscure" )
target="blank"
>
fosstodon
</a>
</li>
</ul>
</nav>
</footer>
)
} }
const MainTemplate = ({ children }) => { const MainTemplate = ({ children }) => {
return ( return (
<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper"> <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"> <main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
<Header /> <Header />
<div>{children}</div> <div>{children}</div>
<Footer /> <Footer />
</main> </main>
</div> </div>
) )
} }
export default MainTemplate export default MainTemplate

10
src/utils/convertDate.js
View file

@ -39,4 +39,12 @@ const convertDate = (isoStamp) => {
return `${year}-${month}-${day}` 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 }