style: tweak border radiis and mobile
All checks were successful
Deploy Blog / deploy (push) Successful in 2m21s
All checks were successful
Deploy Blog / deploy (push) Successful in 2m21s
This commit is contained in:
parent
1b0f918622
commit
b1f3cde3a6
7 changed files with 341 additions and 342 deletions
|
|
@ -1,97 +1,98 @@
|
||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { useTheme } from "@/context/ThemeProvider"
|
import { useTheme } from "@/context/ThemeProvider"
|
||||||
import { MoonStar } from "lucide-react"
|
import { MoonStar, MenuIcon } from "lucide-react"
|
||||||
import { Link } from "react-router"
|
import { Link } from "react-router"
|
||||||
import {
|
import {
|
||||||
NavigationMenu,
|
NavigationMenu,
|
||||||
NavigationMenuContent,
|
NavigationMenuContent,
|
||||||
NavigationMenuItem,
|
NavigationMenuItem,
|
||||||
NavigationMenuLink,
|
NavigationMenuLink,
|
||||||
NavigationMenuList,
|
NavigationMenuList,
|
||||||
NavigationMenuTrigger,
|
NavigationMenuTrigger,
|
||||||
navigationMenuTriggerStyle,
|
navigationMenuTriggerStyle,
|
||||||
NavigationMenuViewport,
|
NavigationMenuViewport,
|
||||||
} from "@/components/ui/navigation-menu"
|
} from "@/components/ui/navigation-menu"
|
||||||
|
|
||||||
import { Toggle } from "@/components/ui/toggle"
|
import { Toggle } from "@/components/ui/toggle"
|
||||||
const Menu = () => {
|
const Menu = () => {
|
||||||
return (
|
return (
|
||||||
<NavigationMenu>
|
<NavigationMenu>
|
||||||
<NavigationMenuList>
|
<NavigationMenuList>
|
||||||
{/* Desktop menu - hidden on mobile, visible on md+ */}
|
{/* Desktop menu - hidden on mobile, visible on md+ */}
|
||||||
<div className="hidden md:flex md:space-x-1">
|
<div className="hidden md:flex md:space-x-1">
|
||||||
<NavigationMenuItem>
|
<NavigationMenuItem className="border">
|
||||||
<NavigationMenuLink
|
<NavigationMenuLink
|
||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<Link to="/posts/page/1">Posts</Link>
|
<Link to="/posts/page/1">Posts</Link>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
<NavigationMenuItem>
|
<NavigationMenuItem className="border">
|
||||||
<NavigationMenuLink
|
<NavigationMenuLink
|
||||||
asChild
|
asChild
|
||||||
className={navigationMenuTriggerStyle()}
|
className={navigationMenuTriggerStyle()}
|
||||||
>
|
>
|
||||||
<Link to="/about">About</Link>
|
<Link to="/about">About</Link>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile dropdown - visible only on small screens */}
|
{/* Mobile dropdown - visible only on small screens */}
|
||||||
<NavigationMenuItem className="md:hidden">
|
<NavigationMenuItem className="md:hidden px-4">
|
||||||
<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
|
<NavigationMenuTrigger className="border rounded-none">
|
||||||
|
<MenuIcon />
|
||||||
|
</NavigationMenuTrigger>
|
||||||
|
|
||||||
<NavigationMenuContent>
|
<NavigationMenuContent>
|
||||||
<NavigationMenuLink asChild>
|
<NavigationMenuLink asChild>
|
||||||
<Link to="/posts/page/1" className="block px-2 py-1.5">
|
<Link to="/posts/page/1" className="block">
|
||||||
Posts
|
Posts
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
<NavigationMenuLink asChild>
|
<NavigationMenuLink asChild>
|
||||||
<Link to="/about" className="block px-2 py-1.5">
|
<Link to="/about" className="block">
|
||||||
About
|
About
|
||||||
</Link>
|
</Link>
|
||||||
</NavigationMenuLink>
|
</NavigationMenuLink>
|
||||||
</NavigationMenuContent>
|
</NavigationMenuContent>
|
||||||
</NavigationMenuItem>
|
</NavigationMenuItem>
|
||||||
</NavigationMenuList>
|
</NavigationMenuList>
|
||||||
<NavigationMenuViewport />
|
<NavigationMenuViewport />
|
||||||
</NavigationMenu>
|
</NavigationMenu>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Header = () => {
|
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-sidebar">
|
<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-sidebar">
|
||||||
<div className="w-full px-0 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 md:px-0 px-4">
|
||||||
<Button variant="ghost" asChild>
|
<Button
|
||||||
<Link to="/">
|
variant="ghost"
|
||||||
<span className="text-lg tracking-normal font-semibold">
|
asChild
|
||||||
Systems Obscure
|
className="border md:border-none rounded-none"
|
||||||
</span>
|
>
|
||||||
</Link>
|
<Link to="/">
|
||||||
</Button>
|
<span className="text-lg font-semibold">Systems Obscure</span>
|
||||||
</div>
|
</Link>
|
||||||
<div className="flex items-center justify-between gap-2">
|
</Button>
|
||||||
<Toggle
|
</div>
|
||||||
pressed={theme === "dark"}
|
<div className="flex itemr justify-between md:gap-4">
|
||||||
onPressedChange={() =>
|
<Toggle
|
||||||
setTheme(theme === "dark" ? "light" : "dark")
|
className="border bg-background rounded-none"
|
||||||
}
|
pressed={theme === "dark"}
|
||||||
>
|
onPressedChange={() =>
|
||||||
{/*
|
setTheme(theme === "dark" ? "light" : "dark")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MoonStar size={10} />
|
||||||
|
</Toggle>
|
||||||
|
<Menu />
|
||||||
|
|
||||||
<MoonStar />
|
{/*
|
||||||
*/}
|
|
||||||
<span className="">Dark theme</span>
|
|
||||||
</Toggle>
|
|
||||||
<Menu />
|
|
||||||
|
|
||||||
{/*
|
|
||||||
<div className="hidden md:block">
|
<div className="hidden md:block">
|
||||||
<Button variant="ghost">
|
<Button variant="ghost">
|
||||||
<GitMerge /> Forgejo
|
<GitMerge /> Forgejo
|
||||||
|
|
@ -100,10 +101,10 @@ const Header = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
*/}
|
*/}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Header }
|
export { Header }
|
||||||
|
|
|
||||||
|
|
@ -6,163 +6,168 @@ import { ChevronDownIcon } from "lucide-react"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
function NavigationMenu({
|
function NavigationMenu({
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
viewport = true,
|
viewport = true,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||||
viewport?: boolean
|
viewport?: boolean
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.Root
|
<NavigationMenuPrimitive.Root
|
||||||
data-slot="navigation-menu"
|
data-slot="navigation-menu"
|
||||||
data-viewport={viewport}
|
data-viewport={viewport}
|
||||||
className={cn(
|
className={cn(
|
||||||
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{viewport && <NavigationMenuViewport />}
|
{viewport && <NavigationMenuViewport />}
|
||||||
</NavigationMenuPrimitive.Root>
|
</NavigationMenuPrimitive.Root>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function NavigationMenuList({
|
function NavigationMenuList({
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.List
|
<NavigationMenuPrimitive.List
|
||||||
data-slot="navigation-menu-list"
|
data-slot="navigation-menu-list"
|
||||||
className={cn(
|
className={cn(
|
||||||
"group flex flex-1 list-none items-center justify-center gap-1",
|
"group flex flex-1 list-none items-center justify-center gap-1",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function NavigationMenuItem({
|
function NavigationMenuItem({
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.Item
|
<NavigationMenuPrimitive.Item
|
||||||
data-slot="navigation-menu-item"
|
data-slot="navigation-menu-item"
|
||||||
className={cn("relative", className)}
|
className={cn("relative", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const navigationMenuTriggerStyle = cva(
|
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({
|
function NavigationMenuTrigger({
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.Trigger
|
<NavigationMenuPrimitive.Trigger
|
||||||
data-slot="navigation-menu-trigger"
|
data-slot="navigation-menu-trigger"
|
||||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}{" "}
|
{children}{" "}
|
||||||
<ChevronDownIcon
|
{/*
|
||||||
|
|
||||||
|
<ChevronDownIcon
|
||||||
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</NavigationMenuPrimitive.Trigger>
|
|
||||||
)
|
|
||||||
|
*/}
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function NavigationMenuContent({
|
function NavigationMenuContent({
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.Content
|
<NavigationMenuPrimitive.Content
|
||||||
data-slot="navigation-menu-content"
|
data-slot="navigation-menu-content"
|
||||||
className={cn(
|
className={cn(
|
||||||
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||||
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function NavigationMenuViewport({
|
function NavigationMenuViewport({
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute top-full left-0 isolate z-50 flex justify-center"
|
"absolute top-full left-0 isolate z-50 flex justify-center"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<NavigationMenuPrimitive.Viewport
|
<NavigationMenuPrimitive.Viewport
|
||||||
data-slot="navigation-menu-viewport"
|
data-slot="navigation-menu-viewport"
|
||||||
className={cn(
|
className={cn(
|
||||||
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function NavigationMenuLink({
|
function NavigationMenuLink({
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.Link
|
<NavigationMenuPrimitive.Link
|
||||||
data-slot="navigation-menu-link"
|
data-slot="navigation-menu-link"
|
||||||
className={cn(
|
className={cn(
|
||||||
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function NavigationMenuIndicator({
|
function NavigationMenuIndicator({
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||||
return (
|
return (
|
||||||
<NavigationMenuPrimitive.Indicator
|
<NavigationMenuPrimitive.Indicator
|
||||||
data-slot="navigation-menu-indicator"
|
data-slot="navigation-menu-indicator"
|
||||||
className={cn(
|
className={cn(
|
||||||
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||||
</NavigationMenuPrimitive.Indicator>
|
</NavigationMenuPrimitive.Indicator>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
NavigationMenu,
|
NavigationMenu,
|
||||||
NavigationMenuList,
|
NavigationMenuList,
|
||||||
NavigationMenuItem,
|
NavigationMenuItem,
|
||||||
NavigationMenuContent,
|
NavigationMenuContent,
|
||||||
NavigationMenuTrigger,
|
NavigationMenuTrigger,
|
||||||
NavigationMenuLink,
|
NavigationMenuLink,
|
||||||
NavigationMenuIndicator,
|
NavigationMenuIndicator,
|
||||||
NavigationMenuViewport,
|
NavigationMenuViewport,
|
||||||
navigationMenuTriggerStyle,
|
navigationMenuTriggerStyle,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,11 @@ const PostListing = ({ posts, title, showAllButton }) => {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{showAllButton && (
|
{showAllButton && (
|
||||||
<Button asChild variant="secondary" className="w-full mt-4">
|
<Button
|
||||||
|
asChild
|
||||||
|
variant="secondary"
|
||||||
|
className="w-full mt-4 rounded-none border-1"
|
||||||
|
>
|
||||||
<Link to="/posts/page/1">View all</Link>
|
<Link to="/posts/page/1">View all</Link>
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -2,109 +2,109 @@ 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-semibold 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.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
I'm a self-taught software engineer based on the south coast of England.
|
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
|
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.{" "}
|
technical life so I can have a record of progress when I look back.{" "}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
I completed a degree in Philosophy at the University of Warwick (2009)
|
I completed a degree in Philosophy at the University of Warwick (2009)
|
||||||
and hold a Postgraduate Certificate of Education (2011).
|
and hold a Postgraduate Certificate of Education (2011).
|
||||||
</p>
|
</p>
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
Currently I work for{" "}
|
Currently I work for{" "}
|
||||||
<a
|
<a
|
||||||
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
|
href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
|
className="underline decoration-1 hover:text-primary/80 underline-offset-4"
|
||||||
>
|
>
|
||||||
ITV
|
ITV
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
{""}
|
{""}
|
||||||
as a backend software engineer. Before that, I worked as a full-stack
|
as a backend software engineer. Before that, I worked as a full-stack
|
||||||
engineer at the{" "}
|
engineer at the{" "}
|
||||||
<a
|
<a
|
||||||
href="https://en.wikipedia.org/wiki/BBC"
|
href="https://en.wikipedia.org/wiki/BBC"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="underline decoration-1 hover:text-primary/80 underline-offset-2 font-medium"
|
className="underline decoration-1 hover:text-primary/80 underline-offset-4"
|
||||||
>
|
>
|
||||||
BBC
|
BBC
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
and as a frontend engineer at{" "}
|
and as a frontend engineer at{" "}
|
||||||
<a
|
<a
|
||||||
href="https://www.arria.com/"
|
href="https://www.arria.com/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
|
className="underline decoration-1 hover:text-primary/80 underline-offset-4"
|
||||||
>
|
>
|
||||||
Arria NLG
|
Arria NLG
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
and in several web developer roles. Before software I was a
|
and in several web developer roles. Before software I was a
|
||||||
teacher.{" "}
|
teacher.{" "}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
Some things I like:
|
Some things I like:
|
||||||
<ul className="pt-2">
|
<ul className="pt-2">
|
||||||
<li className="mb-1">🐶 Staffies and other bull-breeds</li>
|
<li className="mb-1">🐶 Staffies and other bull-breeds</li>
|
||||||
<li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
|
<li className="mb-1">🎼 Classical music (Haydn, Mozart, JSB)</li>
|
||||||
<li className="mb-1">🛸 Science fiction </li>
|
<li className="mb-1">🛸 Science fiction </li>
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
Some things I'm interested in:
|
Some things I'm interested in:
|
||||||
<ul className="pt-2">
|
<ul className="pt-2">
|
||||||
<li className="mb-1">🧑💻 Self-hosting and digital resiliance</li>
|
<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">🖳 The history of computing and networks</li>
|
||||||
<li className="mb-1">🇮🇪 Irish history and culture</li>
|
<li className="mb-1">🇮🇪 Irish history and culture</li>
|
||||||
<li className="mb-1">☸️ Buddhism</li>
|
<li className="mb-1">☸️ Buddhism</li>
|
||||||
{/*
|
{/*
|
||||||
|
|
||||||
<li className="mb-1">📡 Civil communications infrastructure</li>
|
<li className="mb-1">📡 Civil communications infrastructure</li>
|
||||||
*/}
|
*/}
|
||||||
</ul>
|
</ul>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
<p className="leading-[1.6] [&:not(:first-child)]:mt-6">
|
||||||
I self-host my own Git forge at{" "}
|
I self-host my own Git forge at{" "}
|
||||||
<a
|
<a
|
||||||
href="https://forgejo.systemsobscure.net/thomasabishop"
|
href="https://forgejo.systemsobscure.net/thomasabishop"
|
||||||
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
|
className="underline decoration-1 hover:text-primary/80 underline-offset-2"
|
||||||
>
|
>
|
||||||
forgejo.systemsobscure.net
|
forgejo.systemsobscure.net
|
||||||
</a>{" "}
|
</a>{" "}
|
||||||
rather than use Microsoft GitHub. You can view my personal projects
|
rather than use Microsoft GitHub. You can view my personal projects
|
||||||
there.
|
there.
|
||||||
</p>
|
</p>
|
||||||
</MainTemplate>
|
</MainTemplate>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export { AboutPage }
|
export { AboutPage }
|
||||||
|
|
|
||||||
|
|
@ -2,51 +2,40 @@ 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 roundedPortrait from "../images/round-portrait.png"
|
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 HomePage = () => {
|
||||||
const { posts } = usePosts()
|
const { posts } = usePosts()
|
||||||
return (
|
return (
|
||||||
<MainTemplate>
|
<MainTemplate>
|
||||||
<div className="mb-7 border border-foreground py-6 px-6 md:py-8 md:px-8 dark:bg-sidebar">
|
<div className="mb-7 border border-foreground py-6 px-6 md:px-8 md:pt-9 dark:bg-sidebar">
|
||||||
<div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
|
<div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
|
||||||
{/* Image - centers on mobile, left-aligned on desktop */}
|
<div className="flex-shrink-0">
|
||||||
<div className="flex-shrink-0">
|
<img
|
||||||
<img
|
src={roundedPortrait}
|
||||||
src={roundedPortrait}
|
alt="Profile picture"
|
||||||
alt="Profile picture"
|
className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain border-2 rounded-full"
|
||||||
className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Text content */}
|
<div className="text-center md:text-left flex-1">
|
||||||
<div className="text-center md:text-left flex-1">
|
<h1 className="scroll-m-20 text-2xl font-semibold">
|
||||||
<h1 className="scroll-m-20 text-2xl font-semibold">
|
Another software engineer with a blog
|
||||||
Another software engineer with a blog
|
</h1>
|
||||||
</h1>
|
<p className="leading-[1.7] mt-5">
|
||||||
<p className="leading-[1.7] mt-5">
|
I'm a self-taught software engineer from London. This blog is a
|
||||||
I'm a self-taught software engineer currently working at ITV,
|
technical scrapbook and digital garden.
|
||||||
previously at the BBC. This blog is a technical scrapbook and
|
</p>
|
||||||
digital garden.
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/*
|
|
||||||
|
|
||||||
|
<PostListing
|
||||||
|
title="Recent posts"
|
||||||
*/}
|
posts={posts.slice(0, 5)}
|
||||||
|
showAllButton
|
||||||
<PostListing
|
/>
|
||||||
title="Recent posts"
|
</MainTemplate>
|
||||||
posts={posts.slice(0, 5)}
|
)
|
||||||
showAllButton
|
|
||||||
/>
|
|
||||||
</MainTemplate>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { HomePage }
|
export { HomePage }
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ p code {
|
||||||
|
|
||||||
.shiki {
|
.shiki {
|
||||||
padding: 1rem 1.2rem;
|
padding: 1rem 1.2rem;
|
||||||
border-radius: var(--radius);
|
border-radius: 0;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
margin: 1.5rem 0;
|
margin: 1.5rem 0;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,7 @@ const BlogTemplate = () => {
|
||||||
[&>li]:leading-[1.6]
|
[&>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
|
[&_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]
|
[&>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]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
|
||||||
[&>figure>img]:w-full
|
[&>figure>img]:w-full
|
||||||
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
|
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue