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

refactor: style tweaks
All checks were successful
Deploy Blog / deploy (push) Successful in 1m8s
Details

Browse source
This commit is contained in:
Thomas Bishop 2025-07-13 14:27:48 +01:00
parent 987dff1dce
commit 9a62f7bd1b
7 changed files with 288 additions and 240 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/containers/PostListing.tsx
View file

@ -1,9 +1,9 @@
// @ts-nocheck // @ts-nocheck
import { import {
Card, Card,
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card" } from "@/components/ui/card"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Link } from "react-router" import { Link } from "react-router"
@ -11,45 +11,45 @@ import { Link } from "react-router"
import { convertDate } from "@/utils/convertDate" import { convertDate } from "@/utils/convertDate"
const PostListing = ({ posts, title, showAllButton }) => { 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>
<div className="grid grid-cols-1 md:grid-cols-1 gap-3"> <div className="grid grid-cols-1 md:grid-cols-1 gap-3">
{posts.map((post) => ( {posts.map((post) => (
<Link <Link
to={`/posts/${post.slug}`} to={`/posts/${post.slug}`}
key={post.slug} key={post.slug}
className="block no-underline" className="block no-underline"
> >
<Card <Card
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>
<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>
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
</Card> </Card>
</Link> </Link>
))} ))}
</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>
)} )}
</> </>
) )
} }
export default PostListing export default PostListing

183
src/pages/about.tsx
View file

@ -2,89 +2,114 @@ import MainTemplate from "@/templates/MainTemplate"
import portrait from "../images/portrait-compressed.jpg" import portrait from "../images/portrait-compressed.jpg"
const AboutPage = () => { 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>
<figure className="w-full flex flex-col items-center mb-6"> <figure className="w-full flex flex-col items-center mb-6">
<img <img
alt="A portrait of the blog author" alt="A portrait of the blog author"
src={portrait} src={portrait}
className="w-0 flex" className="w-0 flex"
/> />
<figcaption className="text-sm text-muted-foreground mt-3 text-center"> <figcaption className="text-sm text-muted-foreground mt-3 text-center">
Pictured with the WITCH computer at the{" "} Pictured with the WITCH computer at the{" "}
<a <a
href="https://www.tnmoc.org/" href="https://www.tnmoc.org/"
target="_blank" target="_blank"
className="text-primary hover:text-primary/80" className="text-primary hover:text-primary/80"
> >
National Museum of Computing National Museum of Computing
</a> </a>
, Bletchley Park. , Bletchley Park.
</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
scrapbook. I document the details of my technical life so I can have a am a self-taught software engineer and this blog is my technical
record of progress when I look back. Doing this publicly motivates me to scrapbook. I document the details of my technical life so I can have a
take care with my writing and to be as clear as possible.{" "} record of progress when I look back.{" "}
</p> </p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
Currently I work for{" "}
<a
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
ITV
</a>{" "}
{""}
as a backend software engineer. Before that, I worked as a full-stack
engineer at the{" "}
<a
href="https://en.wikipedia.org/wiki/BBC"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
BBC
</a>{" "}
and as a frontend engineer at{" "}
<a
href="https://www.arria.com/"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
Arria NLG
</a>{" "}
and in several web developer roles.{" "}
</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 I completed a degree in Philosophy at the University of Warwick and hold
</h3> a Postgraduate Certificate of Education.
</p>
<p className="leading-[1.5] [&:not(:first-child)]:mt-6">
Currently I work for{" "}
<a
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
ITV
</a>{" "}
{""}
as a backend software engineer. Before that, I worked as a full-stack
engineer at the{" "}
<a
href="https://en.wikipedia.org/wiki/BBC"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
BBC
</a>{" "}
and as a frontend engineer at{" "}
<a
href="https://www.arria.com/"
target="_blank"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
Arria NLG
</a>{" "}
and in several web developer roles. Before software I was a
teacher.{" "}
</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{" "} Some things I like:
<a <ul className="pt-2">
href="https://forgejo.systemsobscure.net/thomasabishop" <li className="mb-1">🐶 Staffies and bull-breeds</li>
className="underline decoration-1 hover:text-primary/80 underline-offset-2" <li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
> <li className="mb-1">🛸 Science fiction </li>
forgejo.systemsobscure.net </ul>
</a>{" "} </p>
rather than use Microsoft GitHub. You can view my personal projects
there. <p className="leading-[1.5] [&:not(:first-child)]:mt-6">
</p> Some things I'm interested in:
</MainTemplate> <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">
I self-host my own Git forge at{" "}
<a
href="https://forgejo.systemsobscure.net/thomasabishop"
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
>
forgejo.systemsobscure.net
</a>{" "}
rather than use Microsoft GitHub. You can view my personal projects
there.
</p>
</MainTemplate>
)
} }
export { AboutPage } export { AboutPage }

43
src/pages/home.tsx
View file

@ -1,18 +1,41 @@
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>
<PostListing <Card className="mb-8">
title="Recent posts" <CardHeader>
posts={posts.slice(0, 5)} <h1 className="scroll-m-20 text-left text-3xl font-bold text-balance">
showAllButton Another software engineer with a blog 🥱
/> </h1>
</MainTemplate> </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
title="Recent posts"
posts={posts.slice(0, 5)}
showAllButton
/>
</MainTemplate>
)
} }
export { HomePage } export { HomePage }

210
src/pages/posts.tsx
View file

@ -4,128 +4,128 @@ import MainTemplate from "@/templates/MainTemplate"
import { useParams, useNavigate } from "react-router" import { useParams, useNavigate } from "react-router"
import { convertDate } from "@/utils/convertDate" import { convertDate } from "@/utils/convertDate"
import { import {
Pagination, Pagination,
PaginationContent, PaginationContent,
PaginationItem, PaginationItem,
PaginationNext, PaginationNext,
PaginationPrevious, PaginationPrevious,
} from "@/components/ui/pagination" } from "@/components/ui/pagination"
import { import {
Card, Card,
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card" } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Link } from "react-router" import { Link } from "react-router"
import { usePosts } from "@/hooks/usePosts" import { usePosts } from "@/hooks/usePosts"
const PostsPage = () => { const PostsPage = () => {
const { page } = useParams() const { page } = useParams()
const navigate = useNavigate() const navigate = useNavigate()
const { posts } = usePosts() const { posts } = usePosts()
const postsPerPage = 10 const postsPerPage = 10
const currentPage = Number(page) || 1 const currentPage = Number(page) || 1
const totalPages = Math.ceil(posts.length / postsPerPage) const totalPages = Math.ceil(posts.length / postsPerPage)
useEffect(() => { useEffect(() => {
if (currentPage < 1 || currentPage > totalPages) { if (currentPage < 1 || currentPage > totalPages) {
navigate(`/posts/page/1`, { replace: true }) navigate(`/posts/page/1`, { replace: true })
} }
}, [currentPage, totalPages, navigate]) }, [currentPage, totalPages, navigate])
const currentPosts = useMemo(() => { const currentPosts = useMemo(() => {
const startIndex = (currentPage - 1) * postsPerPage const startIndex = (currentPage - 1) * postsPerPage
const endIndex = startIndex + postsPerPage const endIndex = startIndex + postsPerPage
return posts.slice(startIndex, endIndex) return posts.slice(startIndex, endIndex)
}, [posts, currentPage, postsPerPage]) }, [posts, currentPage, postsPerPage])
const hasNextPage = currentPage < totalPages const hasNextPage = currentPage < totalPages
const hasPrevPage = currentPage > 1 const hasPrevPage = currentPage > 1
const goToNextPage = () => { const goToNextPage = () => {
if (hasNextPage) { if (hasNextPage) {
navigate(`/posts/page/${currentPage + 1}`) navigate(`/posts/page/${currentPage + 1}`)
} }
} }
const goToPrevPage = () => { const goToPrevPage = () => {
if (hasPrevPage) { if (hasPrevPage) {
navigate(`/posts/page/${currentPage - 1}`) navigate(`/posts/page/${currentPage - 1}`)
} }
} }
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>
<div className="min-h-[calc(100vh-200px)] flex flex-col"> <div className="min-h-[calc(100vh-200px)] flex flex-col">
<div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow"> <div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow">
{currentPosts.map((post) => ( {currentPosts.map((post) => (
<Link <Link
to={`/posts/${post.slug}`} to={`/posts/${post.slug}`}
key={post.slug} key={post.slug}
className="block no-underline" className="block no-underline"
> >
<Card <Card
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> <CardHeader>
<CardTitle className="leading-snug font-semibold"> <CardTitle className="leading-snug font-semibold">
{post.title} {post.title}
</CardTitle> </CardTitle>
<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"
key={i} key={i}
variant="secondary" variant="secondary"
onClick={(e) => { onClick={(e) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
navigate(`/tags/${tag}`) navigate(`/tags/${tag}`)
}} }}
> >
{tag} {tag}
</Badge> </Badge>
))} ))}
</div> </div>
</div> </div>
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
</Card> </Card>
</Link> </Link>
))} ))}
</div> </div>
<Pagination className="mt-4"> <Pagination className="mt-4">
<PaginationContent> <PaginationContent>
<PaginationItem> <PaginationItem>
<PaginationPrevious <PaginationPrevious
className={`select-none ${hasPrevPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`} className={`select-none ${hasPrevPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
onClick={goToPrevPage} onClick={goToPrevPage}
/> />
</PaginationItem> </PaginationItem>
<PaginationItem> <PaginationItem>
<PaginationNext <PaginationNext
className={`select-none ${hasNextPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`} className={`select-none ${hasNextPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
onClick={goToNextPage} onClick={goToNextPage}
/> />
</PaginationItem> </PaginationItem>
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
</div> </div>
</MainTemplate> </MainTemplate>
) )
} }
export { PostsPage } export { PostsPage }

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>

2
src/templates/MainTemplate.tsx
View file

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