From 9a62f7bd1bf97359bc445558ab43ac0d2eefae7b Mon Sep 17 00:00:00 2001 From: thomasabishop Date: Sun, 13 Jul 2025 14:27:48 +0100 Subject: [PATCH] refactor: style tweaks --- src/containers/PostListing.tsx | 86 ++++++------ src/pages/about.tsx | 183 ++++++++++++++----------- src/pages/home.tsx | 43 ++++-- src/pages/posts.tsx | 210 ++++++++++++++--------------- src/styles/syntax-highlighting.css | 2 +- src/templates/BlogTemplate.tsx | 2 +- src/templates/MainTemplate.tsx | 2 +- 7 files changed, 288 insertions(+), 240 deletions(-) diff --git a/src/containers/PostListing.tsx b/src/containers/PostListing.tsx index 264a43f..f03aee2 100644 --- a/src/containers/PostListing.tsx +++ b/src/containers/PostListing.tsx @@ -1,9 +1,9 @@ // @ts-nocheck import { - Card, - CardDescription, - CardHeader, - CardTitle, + Card, + CardDescription, + CardHeader, + CardTitle, } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Link } from "react-router" @@ -11,45 +11,45 @@ import { Link } from "react-router" import { convertDate } from "@/utils/convertDate" const PostListing = ({ posts, title, showAllButton }) => { - return ( - <> -
-

- {title} -

-
-
- {posts.map((post) => ( - - - - - {post.title} - - -
- {convertDate(post.date)} -
- - - - - ))} -
- {showAllButton && ( - - )} - - ) + return ( + <> +
+

+ {title} +

+
+
+ {posts.map((post) => ( + + + + + {post.title} + + +
+ {convertDate(post.date)} +
+ + + + + ))} +
+ {showAllButton && ( + + )} + + ) } export default PostListing diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 1bd7371..91fafd4 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -2,89 +2,114 @@ import MainTemplate from "@/templates/MainTemplate" import portrait from "../images/portrait-compressed.jpg" const AboutPage = () => { - return ( - -
-

- About -

-
+ return ( + +
+

+ About +

+
-
- A portrait of the blog author -
- Pictured with the WITCH computer at the{" "} - - National Museum of Computing - - , Bletchley Park. -
-
-

- Another software engineer with a blog!{" "} -

+
+ A portrait of the blog author +
+ Pictured with the WITCH computer at the{" "} + + National Museum of Computing + + , Bletchley Park. +
+
+

+ Husband. Dad. Christian. +

-

- I am a self-taught engineer from London. This blog is a technical - 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 - take care with my writing and to be as clear as possible.{" "} -

-

- Currently I work for{" "} - - ITV - {" "} - {""} - as a backend software engineer. Before that, I worked as a full-stack - engineer at the{" "} - - BBC - {" "} - and as a frontend engineer at{" "} - - Arria NLG - {" "} - and in several web developer roles.{" "} -

+

+ 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 + record of progress when I look back.{" "} +

-

- Code -

+

+ I completed a degree in Philosophy at the University of Warwick and hold + a Postgraduate Certificate of Education. +

+

+ Currently I work for{" "} + + ITV + {" "} + {""} + as a backend software engineer. Before that, I worked as a full-stack + engineer at the{" "} + + BBC + {" "} + and as a frontend engineer at{" "} + + Arria NLG + {" "} + and in several web developer roles. Before software I was a + teacher.{" "} +

-

- I self-host my own Git forge at{" "} - - forgejo.systemsobscure.net - {" "} - rather than use Microsoft GitHub. You can view my personal projects - there. -

- - ) +

+ Some things I like: +

+

+ +

+ Some things I'm interested in: +

+

+ +

+ I self-host my own Git forge at{" "} + + forgejo.systemsobscure.net + {" "} + rather than use Microsoft GitHub. You can view my personal projects + there. +

+ + ) } export { AboutPage } diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 4069b47..4fe4dba 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,18 +1,41 @@ import MainTemplate from "@/templates/MainTemplate" import PostListing from "@/containers/PostListing" 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 { posts } = usePosts() - return ( - - - - ) + const { posts } = usePosts() + return ( + + + +

+ Another software engineer with a blog 🥱 +

+ + +

+ I'm a self-taught software engineer currently working at ITV, + previously at the BBC. This blog is a technical scrapbook and + digital garden. +

+ + + + + + + + + ) } export { HomePage } diff --git a/src/pages/posts.tsx b/src/pages/posts.tsx index 6e36bd3..a10d980 100644 --- a/src/pages/posts.tsx +++ b/src/pages/posts.tsx @@ -4,128 +4,128 @@ import MainTemplate from "@/templates/MainTemplate" import { useParams, useNavigate } from "react-router" import { convertDate } from "@/utils/convertDate" import { - Pagination, - PaginationContent, - PaginationItem, - PaginationNext, - PaginationPrevious, + Pagination, + PaginationContent, + PaginationItem, + PaginationNext, + PaginationPrevious, } from "@/components/ui/pagination" import { - Card, - CardDescription, - CardHeader, - CardTitle, + Card, + CardDescription, + CardHeader, + CardTitle, } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Link } from "react-router" import { usePosts } from "@/hooks/usePosts" const PostsPage = () => { - const { page } = useParams() + const { page } = useParams() - const navigate = useNavigate() + const navigate = useNavigate() - const { posts } = usePosts() - const postsPerPage = 10 + const { posts } = usePosts() + const postsPerPage = 10 - const currentPage = Number(page) || 1 - const totalPages = Math.ceil(posts.length / postsPerPage) + const currentPage = Number(page) || 1 + const totalPages = Math.ceil(posts.length / postsPerPage) - useEffect(() => { - if (currentPage < 1 || currentPage > totalPages) { - navigate(`/posts/page/1`, { replace: true }) - } - }, [currentPage, totalPages, navigate]) + useEffect(() => { + if (currentPage < 1 || currentPage > totalPages) { + navigate(`/posts/page/1`, { replace: true }) + } + }, [currentPage, totalPages, navigate]) - const currentPosts = useMemo(() => { - const startIndex = (currentPage - 1) * postsPerPage - const endIndex = startIndex + postsPerPage - return posts.slice(startIndex, endIndex) - }, [posts, currentPage, postsPerPage]) + const currentPosts = useMemo(() => { + const startIndex = (currentPage - 1) * postsPerPage + const endIndex = startIndex + postsPerPage + return posts.slice(startIndex, endIndex) + }, [posts, currentPage, postsPerPage]) - const hasNextPage = currentPage < totalPages - const hasPrevPage = currentPage > 1 + const hasNextPage = currentPage < totalPages + const hasPrevPage = currentPage > 1 - const goToNextPage = () => { - if (hasNextPage) { - navigate(`/posts/page/${currentPage + 1}`) - } - } + const goToNextPage = () => { + if (hasNextPage) { + navigate(`/posts/page/${currentPage + 1}`) + } + } - const goToPrevPage = () => { - if (hasPrevPage) { - navigate(`/posts/page/${currentPage - 1}`) - } - } + const goToPrevPage = () => { + if (hasPrevPage) { + navigate(`/posts/page/${currentPage - 1}`) + } + } - return ( - -
-

- All posts -

-
-
-
- {currentPosts.map((post) => ( - - - - - {post.title} - - -
- {convertDate(post.date)} -
- {post.tags.map((tag, i) => ( - { - e.preventDefault() - e.stopPropagation() - navigate(`/tags/${tag}`) - }} - > - {tag} - - ))} -
-
- - - - - ))} -
- - - - - - - - - - -
- - ) + return ( + +
+

+ All posts +

+
+
+
+ {currentPosts.map((post) => ( + + + + + {post.title} + + +
+ {convertDate(post.date)} +
+ {post.tags.map((tag, i) => ( + { + e.preventDefault() + e.stopPropagation() + navigate(`/tags/${tag}`) + }} + > + {tag} + + ))} +
+
+ + + + + ))} +
+ + + + + + + + + + +
+ + ) } export { PostsPage } diff --git a/src/styles/syntax-highlighting.css b/src/styles/syntax-highlighting.css index 80eeb8e..50574aa 100644 --- a/src/styles/syntax-highlighting.css +++ b/src/styles/syntax-highlighting.css @@ -15,7 +15,7 @@ p code { border-radius: var(--radius); overflow-x: auto; margin: 1.5rem 0; - /* line-height: 1.3; */ + line-height: 1.3; /* counter-reset: line; */ font-family: var(--font-monospaced) !important; font-size: 14px !important; diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx index 66dcf0e..00397ab 100644 --- a/src/templates/BlogTemplate.tsx +++ b/src/templates/BlogTemplate.tsx @@ -17,7 +17,7 @@ const BlogTemplate = () => { ) : ( <>
-

+

{post?.title}

diff --git a/src/templates/MainTemplate.tsx b/src/templates/MainTemplate.tsx index e861237..a7d88b9 100644 --- a/src/templates/MainTemplate.tsx +++ b/src/templates/MainTemplate.tsx @@ -22,7 +22,7 @@ const MainContent = ({ children }) => {
-
+
{children}