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

Compare commits

base: thomasabishop:8b06e2772a0724538d87b8ce6091dd1cc50efe8d
Branches Tags
thomasabishop:main
...
compare: thomasabishop:9a62f7bd1bf97359bc445558ab43ac0d2eefae7b
Branches Tags
thomasabishop:main

5 commits
8b06e2772a ... 9a62f7bd1b

Author SHA1 Message Date
thomasabishop
9a62f7bd1b refactor: style tweaks
All checks were successful
Deploy Blog / deploy (push) Successful in 1m8s
Details
2025-07-13 14:27:48 +01:00
thomasabishop
987dff1dce refactor: make default theme 'light' 2025-07-13 14:27:34 +01:00
thomasabishop
5e4649d03f feat: add site title 2025-07-13 14:26:58 +01:00
thomasabishop
73a5211f4e fix: mobile menu 2025-07-13 14:26:08 +01:00
thomasabishop
a5bccdf490 style: use Dark+ syntax theme 2025-07-13 14:25:43 +01:00
10 changed files with 301 additions and 249 deletions
Show stats Expand all files Collapse all files

2
index.html
View file

@ -5,7 +5,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Systems Obscure</title>
</head> </head>
<body> <body>

4
scripts/generate-post-index.js
View file

@ -13,7 +13,7 @@ const renderer = {
} }
const highlighter = await createHighlighter({ const highlighter = await createHighlighter({
themes: ["github-dark-dimmed"], themes: ["dark-plus"],
langs: [ langs: [
"javascript", "javascript",
"typescript", "typescript",
@ -47,7 +47,7 @@ const posts = files.map((file) => {
(match, lang, code) => { (match, lang, code) => {
return highlighter.codeToHtml(code.trim(), { return highlighter.codeToHtml(code.trim(), {
lang: lang || "text", lang: lang || "text",
theme: "github-dark-dimmed", theme: "dark-plus",
transformers: [transformerColorizedBrackets()], transformers: [transformerColorizedBrackets()],
}) })
} }

14
src/components/Header.tsx
View file

@ -42,14 +42,15 @@ const Menu = () => {
{/* Mobile dropdown - visible only on small screens */} {/* Mobile dropdown - visible only on small screens */}
<NavigationMenuItem className="md:hidden"> <NavigationMenuItem className="md:hidden">
<NavigationMenuTrigger>Menu</NavigationMenuTrigger> <NavigationMenuTrigger>Menu</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<Link href="/docs" className="block px-2 py-1.5"> <Link to="/posts/page/1" className="block px-2 py-1.5">
Posts Posts
</Link> </Link>
</NavigationMenuLink> </NavigationMenuLink>
<NavigationMenuLink asChild> <NavigationMenuLink asChild>
<Link href="/docs" className="block px-2 py-1.5"> <Link to="/about" className="block px-2 py-1.5">
About About
</Link> </Link>
</NavigationMenuLink> </NavigationMenuLink>
@ -65,7 +66,7 @@ const Header = () => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
return ( return (
<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-background"> <header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-background">
<div className="w-full px-2 md:px-4 flex items-center justify-between"> <div className="w-full px-0 md:px-4 flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="ghost" asChild> <Button variant="ghost" asChild>
<Link to="/"> <Link to="/">
@ -76,16 +77,19 @@ const Header = () => {
</Button> </Button>
</div> </div>
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<Menu />
<Toggle <Toggle
pressed={theme === "dark"} pressed={theme === "dark"}
onPressedChange={() => onPressedChange={() =>
setTheme(theme === "dark" ? "light" : "dark") setTheme(theme === "dark" ? "light" : "dark")
} }
> >
{/*
<MoonStar /> <MoonStar />
<span className="hidden sm:block">Dark theme</span> */}
<span className="">Dark theme</span>
</Toggle> </Toggle>
<Menu />
{/* {/*
<div className="hidden md:block"> <div className="hidden md:block">

6
src/containers/PostListing.tsx
View file

@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
return ( return (
<> <>
<div className="mb-5 "> <div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3"> <h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
{title} {title}
</h2> </h2>
</div> </div>
@ -29,7 +29,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
key={post.slug} key={post.slug}
className="flex flex-col h-full hover:bg-primary/5 py-4 px-0" className="flex flex-col h-full hover:bg-primary/5 py-4 px-0"
> >
<CardHeader className=""> <CardHeader className="px-4 md:px-6">
<CardTitle className="leading-snug font-semibold "> <CardTitle className="leading-snug font-semibold ">
{post.title} {post.title}
</CardTitle> </CardTitle>
@ -44,7 +44,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
))} ))}
</div> </div>
{showAllButton && ( {showAllButton && (
<Button asChild variant="secondary" className="w-full mt-4"> <Button asChild variant="" className="w-full mt-4">
<Link to="/posts/page/1">View all</Link> <Link to="/posts/page/1">View all</Link>
</Button> </Button>
)} )}

43
src/pages/about.tsx
View file

@ -5,7 +5,7 @@ const AboutPage = () => {
return ( return (
<MainTemplate> <MainTemplate>
<div className="mb-5 "> <div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3"> <h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
About About
</h2> </h2>
</div> </div>
@ -29,14 +29,19 @@ const AboutPage = () => {
</figcaption> </figcaption>
</figure> </figure>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6"> <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
Another software engineer with a blog!{" "} Husband. Dad. Christian.
</p> </p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6"> <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
I am a self-taught engineer from London. This blog is a technical No, not really. I am a Londoner living on the south coast of the UK. I
am a self-taught software engineer and this blog is my technical
scrapbook. I document the details of my technical life so I can have a scrapbook. I document the details of my technical life so I can have a
record of progress when I look back. Doing this publicly motivates me to record of progress when I look back.{" "}
take care with my writing and to be as clear as possible.{" "} </p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
I completed a degree in Philosophy at the University of Warwick and hold
a Postgraduate Certificate of Education.
</p> </p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6"> <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
Currently I work for{" "} Currently I work for{" "}
@ -65,12 +70,32 @@ const AboutPage = () => {
> >
Arria NLG Arria NLG
</a>{" "} </a>{" "}
and in several web developer roles.{" "} and in several web developer roles. Before software I was a
teacher.{" "}
</p> </p>
<h3 className="mt-5 mb-0 scroll-m-20 text-xl font-semibold tracking-tight"> <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
Code Some things I like:
</h3> <ul className="pt-2">
<li className="mb-1">🐶 Staffies and bull-breeds</li>
<li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
<li className="mb-1">🛸 Science fiction </li>
</ul>
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
Some things I'm interested in:
<ul className="pt-2">
<li className="mb-1">🧑‍💻 Self-hosting and digital resiliance</li>
<li className="mb-1">🖳 The history of computing and networks</li>
<li className="mb-1">🇮🇪 Irish history and culture</li>
<li className="mb-1">☸️ Buddhism</li>
{/*
<li className="mb-1">📡 Civil communications infrastructure</li>
*/}
</ul>
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6"> <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
I self-host my own Git forge at{" "} I self-host my own Git forge at{" "}

23
src/pages/home.tsx
View file

@ -1,11 +1,34 @@
import MainTemplate from "@/templates/MainTemplate" import MainTemplate from "@/templates/MainTemplate"
import PostListing from "@/containers/PostListing" import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Link } from "react-router"
const HomePage = () => { const HomePage = () => {
const { posts } = usePosts() const { posts } = usePosts()
return ( return (
<MainTemplate> <MainTemplate>
<Card className="mb-8">
<CardHeader>
<h1 className="scroll-m-20 text-left text-3xl font-bold text-balance">
Another software engineer with a blog 🥱
</h1>
</CardHeader>
<CardContent>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
I'm a self-taught software engineer currently working at ITV,
previously at the BBC. This blog is a technical scrapbook and
digital garden.
</p>
</CardContent>
<CardFooter>
<Button asChild>
<Link to="/about">About</Link>
</Button>
</CardFooter>
</Card>
<PostListing <PostListing
title="Recent posts" title="Recent posts"
posts={posts.slice(0, 5)} posts={posts.slice(0, 5)}

4
src/pages/posts.tsx
View file

@ -61,7 +61,7 @@ const PostsPage = () => {
return ( return (
<MainTemplate> <MainTemplate>
<div className="mb-5 "> <div className="mb-5 ">
<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3"> <h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
All posts All posts
</h2> </h2>
</div> </div>
@ -84,7 +84,7 @@ const PostsPage = () => {
<CardDescription className="text-sm text-muted-foreground"> <CardDescription className="text-sm text-muted-foreground">
<div className="flex justify-between gap-2"> <div className="flex justify-between gap-2">
<span className="text-sm">{convertDate(post.date)}</span> <span className="text-sm">{convertDate(post.date)}</span>
<div> <div className="hidden md:block">
{post.tags.map((tag, i) => ( {post.tags.map((tag, i) => (
<Badge <Badge
className="ml-2 cursor-pointer" className="ml-2 cursor-pointer"

2
src/styles/syntax-highlighting.css
View file

@ -15,7 +15,7 @@ p code {
border-radius: var(--radius); border-radius: var(--radius);
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;

2
src/templates/BlogTemplate.tsx
View file

@ -17,7 +17,7 @@ const BlogTemplate = () => {
) : ( ) : (
<> <>
<div className="mb-5"> <div className="mb-5">
<h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3"> <h2 className="text-2xl font-bold lg:text-2xl border-b pb-3">
{post?.title} {post?.title}
</h2> </h2>
</div> </div>

4
src/templates/MainTemplate.tsx
View file

@ -5,7 +5,7 @@ import { useTheme } from "@/context/ThemeProvider"
const MainTemplate = (props) => { const MainTemplate = (props) => {
return ( return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
<MainContent>{props.children}</MainContent> <MainContent>{props.children}</MainContent>
</ThemeProvider> </ThemeProvider>
) )
@ -22,7 +22,7 @@ const MainContent = ({ children }) => {
<div className={classes}> <div className={classes}>
<Header /> <Header />
<main className="flex-1 w-full px-2 md:px-4 flex justify-center pt-16"> <main className="flex-1 w-full px-2 md:px-4 flex justify-center pt-16">
<div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-4 py-3"> <div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-2 md:px-4 md:py-3 py-0">
{children} {children}
</div> </div>
</main> </main>