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 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
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 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
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="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>

84
src/index.css
View file

@ -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;
}

5
src/pages/home.jsx
View file

@ -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>
)

148
src/styles/_variables.css
View file

@ -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);
}

80
src/templates/BlogTemplate.jsx
View file

@ -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

126
src/templates/MainTemplate.jsx
View file

@ -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

10
src/utils/convertDate.js
View file

@ -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 }