diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 1299c44..ad53b64 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,97 +1,98 @@ // @ts-nocheck import { Button } from "@/components/ui/button" import { useTheme } from "@/context/ThemeProvider" -import { MoonStar } from "lucide-react" +import { MoonStar, MenuIcon } from "lucide-react" import { Link } from "react-router" import { - NavigationMenu, - NavigationMenuContent, - NavigationMenuItem, - NavigationMenuLink, - NavigationMenuList, - NavigationMenuTrigger, - navigationMenuTriggerStyle, - NavigationMenuViewport, + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, + NavigationMenuViewport, } from "@/components/ui/navigation-menu" import { Toggle } from "@/components/ui/toggle" const Menu = () => { - return ( - - - {/* Desktop menu - hidden on mobile, visible on md+ */} -
- - - Posts - - - - - About - - -
+ return ( + + + {/* Desktop menu - hidden on mobile, visible on md+ */} +
+ + + Posts + + + + + About + + +
- {/* Mobile dropdown - visible only on small screens */} - - Menu + {/* Mobile dropdown - visible only on small screens */} + + + + - - - - Posts - - - - - About - - - - - - - - ) + + + + Posts + + + + + About + + + + + + + + ) } const Header = () => { - const { theme, setTheme } = useTheme() - return ( -
-
-
- -
-
- - setTheme(theme === "dark" ? "light" : "dark") - } - > - {/* - - - */} - Dark theme - - + const { theme, setTheme } = useTheme() + return ( +
+
+
+ +
+
+ + setTheme(theme === "dark" ? "light" : "dark") + } + > + + + - {/* + {/*
*/} -
-
-
- ) +
+
+
+ ) } export { Header } diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx index 1199945..7825877 100644 --- a/src/components/ui/navigation-menu.tsx +++ b/src/components/ui/navigation-menu.tsx @@ -6,163 +6,168 @@ import { ChevronDownIcon } from "lucide-react" import { cn } from "@/lib/utils" function NavigationMenu({ - className, - children, - viewport = true, - ...props + className, + children, + viewport = true, + ...props }: React.ComponentProps & { - viewport?: boolean + viewport?: boolean }) { - return ( - - {children} - {viewport && } - - ) + return ( + + {children} + {viewport && } + + ) } function NavigationMenuList({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( - - ) + return ( + + ) } function NavigationMenuItem({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( - - ) + return ( + + ) } const navigationMenuTriggerStyle = cva( - "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" + "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" ) function NavigationMenuTrigger({ - className, - children, - ...props + className, + children, + ...props }: React.ComponentProps) { - return ( - - {children}{" "} - + {children}{" "} + {/* + + - ) + + + */} + + ) } function NavigationMenuContent({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( - - ) + return ( + + ) } function NavigationMenuViewport({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( -
- -
- ) + return ( +
+ +
+ ) } function NavigationMenuLink({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( - - ) + return ( + + ) } function NavigationMenuIndicator({ - className, - ...props + className, + ...props }: React.ComponentProps) { - return ( - -
- - ) + return ( + +
+ + ) } export { - NavigationMenu, - NavigationMenuList, - NavigationMenuItem, - NavigationMenuContent, - NavigationMenuTrigger, - NavigationMenuLink, - NavigationMenuIndicator, - NavigationMenuViewport, - navigationMenuTriggerStyle, + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, + navigationMenuTriggerStyle, } diff --git a/src/containers/PostListing.tsx b/src/containers/PostListing.tsx index 2c0e0df..8e820c5 100644 --- a/src/containers/PostListing.tsx +++ b/src/containers/PostListing.tsx @@ -44,7 +44,11 @@ const PostListing = ({ posts, title, showAllButton }) => { ))}
{showAllButton && ( - )} diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 91d7a63..b6d7b11 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -2,109 +2,109 @@ 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. -
-
-

- I'm a self-taught software engineer based on the south coast of England. - 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.{" "} -

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

+ I'm a self-taught software engineer based on the south coast of England. + 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.{" "} +

-

- I completed a degree in Philosophy at the University of Warwick (2009) - and hold a Postgraduate Certificate of Education (2011). -

-

- 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 completed a degree in Philosophy at the University of Warwick (2009) + and hold a Postgraduate Certificate of Education (2011). +

+

+ 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.{" "} +

-

- Some things I like: -

    -
  • 🐶 Staffies and other bull-breeds
    • -
  • 🎼 Classical music (Haydn, Mozart, JSB)
    • -
  • 🛸 Science fiction
    • -
-

+

+ Some things I like: +

    +
  • 🐶 Staffies and other bull-breeds
    • +
  • 🎼 Classical music (Haydn, Mozart, JSB)
    • +
  • 🛸 Science fiction
    • +
+

-

- Some things I'm interested in: -

    -
  • 🧑‍💻 Self-hosting and digital resiliance
    • -
  • 🖳 The history of computing and networks
    • -
  • 🇮🇪 Irish history and culture
    • -
  • ☸️ Buddhism
    • - {/* +

    + Some things I'm interested in: +

      +
    • 🧑‍💻 Self-hosting and digital resiliance
      • +
    • 🖳 The history of computing and networks
      • +
    • 🇮🇪 Irish history and culture
      • +
    • ☸️ Buddhism
      • + {/*
    • 📡 Civil communications infrastructure
      • */} -
    -

    +
+

-

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

- - ) +

+ 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 a823da2..93aeec2 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -2,51 +2,40 @@ import MainTemplate from "@/templates/MainTemplate" import PostListing from "@/containers/PostListing" import { usePosts } from "@/hooks/usePosts" import roundedPortrait from "../images/round-portrait.png" -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 ( - -
-
- {/* Image - centers on mobile, left-aligned on desktop */} -
- Profile picture -
+ const { posts } = usePosts() + return ( + +
+
+
+ Profile picture +
- {/* Text content */} -
-

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

-
-
-
- {/* - +
+

+ Another software engineer with a blog +

+

+ I'm a self-taught software engineer from London. This blog is a + technical scrapbook and digital garden. +

+
+
+
- - */} - - - - ) + + + ) } export { HomePage } diff --git a/src/styles/syntax-highlighting.css b/src/styles/syntax-highlighting.css index 50574aa..b65dd25 100644 --- a/src/styles/syntax-highlighting.css +++ b/src/styles/syntax-highlighting.css @@ -12,7 +12,7 @@ p code { .shiki { padding: 1rem 1.2rem; - border-radius: var(--radius); + border-radius: 0; overflow-x: auto; margin: 1.5rem 0; line-height: 1.3; diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx index 8f6122b..b58c5d0 100644 --- a/src/templates/BlogTemplate.tsx +++ b/src/templates/BlogTemplate.tsx @@ -60,7 +60,7 @@ const BlogTemplate = () => { [&>li]:leading-[1.6] [&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal [&>p]:mt-6 [&>p]:leading-[1.6] - [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground [&_a]:font-medium + [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground [&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto [&>figure>img]:w-full [&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center