- {/*
-
-
-
- */}
-
-
-
- Another software engineer with a blog
-
-
- I'm a self-taught software engineer from London. This blog is a
- technical scrapbook and digital garden.
-
-
+
+
+
+
+
+
+
+
+
+
+ systems obscure
+
+
+
+ software engineer at ITV, formerly BBC. this is my technical
+ scrapbook and digital garden.
+
+
+
+
-
+
)
}
diff --git a/src/pages/posts.tsx b/src/pages/posts.tsx
index ba659a6..a3a73b2 100644
--- a/src/pages/posts.tsx
+++ b/src/pages/posts.tsx
@@ -1,132 +1,17 @@
// @ts-nocheck
-import { useMemo, useEffect } from "react"
import MainTemplate from "@/templates/MainTemplate"
-import { useParams, useNavigate } from "react-router"
-import { convertDate } from "@/utils/convertDate"
-import {
- Pagination,
- PaginationContent,
- PaginationItem,
- PaginationNext,
- PaginationPrevious,
-} from "@/components/ui/pagination"
-import {
- Card,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Link } from "react-router"
import { usePosts } from "@/hooks/usePosts"
+import PostListing from "@/containers/PostListing"
+
const PostsPage = () => {
- const { page } = useParams()
+ const { posts } = usePosts()
- const navigate = useNavigate()
-
- const { posts } = usePosts()
- const postsPerPage = 8
-
- const currentPage = Number(page) || 1
- const totalPages = Math.ceil(posts.length / postsPerPage)
-
- useEffect(() => {
- // Only redirect if we have posts and the page is definitively invalid
- if (totalPages > 0 && (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 hasNextPage = currentPage < totalPages
- const hasPrevPage = currentPage > 1
-
- const goToNextPage = () => {
- if (hasNextPage) {
- 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 (
+
+
+
+ )
}
export { PostsPage }
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 81a52f6..2c065f7 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -1,114 +1,79 @@
:root {
- --radius: 0.3rem;
- --background: oklch(1 0 0);
- --foreground: oklch(0.145 0 0);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.145 0 0);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.145 0 0);
- --primary: oklch(0.205 0 0);
- --primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(0.97 0 0);
- --secondary-foreground: oklch(0.205 0 0);
- --muted: oklch(0.97 0 0);
- --muted-foreground: oklch(0.556 0 0);
- --accent: oklch(0.97 0 0);
- --accent-foreground: oklch(0.205 0 0);
- --destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.922 0 0);
- --input: oklch(0.922 0 0);
- --ring: oklch(0.708 0 0);
- --chart-1: oklch(0.646 0.222 41.116);
- --chart-2: oklch(0.6 0.118 184.704);
- --chart-3: oklch(0.398 0.07 227.392);
- --chart-4: oklch(0.828 0.189 84.429);
- --chart-5: oklch(0.769 0.188 70.08);
- --sidebar: oklch(0.985 0 0);
- --sidebar-foreground: oklch(0.145 0 0);
- --sidebar-primary: oklch(0.205 0 0);
- --sidebar-primary-foreground: oklch(0.985 0 0);
- --sidebar-accent: oklch(0.97 0 0);
- --sidebar-accent-foreground: oklch(0.205 0 0);
- --sidebar-border: oklch(0.922 0 0);
- --sidebar-ring: oklch(0.708 0 0);
- --font-monospaced: "Jetbrains Mono", monospace;
- --font-sansserif: "Inter", sans-serif;
+ --radius: 0.3rem;
+ --background: #282828;
+ --foreground: #ebdbb2;
+ --sidebar: #3c3836;
+ --color-red-light: #fb4934;
+ --color-orange-light: #fe8019;
+ --color-green-light: #b8bb26;
+ --color-aqua-muted: #689d6a;
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: #8ec07c;
+ --primary-muted: #689d6a;
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: #928374;
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+ --font-monospaced: "iA Writer Mono";
+ --font-sansserif: "iA Writer Quattro", sans-serif;
}
-/* .dark { */
-/* --background: oklch(0.145 0 0); */
-/* --foreground: oklch(0.985 0 0); */
-/* --card: oklch(0.205 0 0); */
-/* --card-foreground: oklch(0.985 0 0); */
-/* --popover: oklch(0.205 0 0); */
-/* --popover-foreground: oklch(0.985 0 0); */
-/* --primary: oklch(0.922 0 0); */
-/* --primary-foreground: oklch(0.205 0 0); */
-/* --secondary: oklch(0.269 0 0); */
-/* --secondary-foreground: oklch(0.985 0 0); */
-/* --muted: oklch(0.269 0 0); */
-/* --muted-foreground: oklch(0.708 0 0); */
-/* --accent: oklch(0.269 0 0); */
-/* --accent-foreground: oklch(0.985 0 0); */
-/* --destructive: oklch(0.704 0.191 22.216); */
-/* --border: oklch(1 0 0 / 10%); */
-/* --input: oklch(1 0 0 / 15%); */
-/* --ring: oklch(0.556 0 0); */
-/* --chart-1: oklch(0.488 0.243 264.376); */
-/* --chart-2: oklch(0.696 0.17 162.48); */
-/* --chart-3: oklch(0.769 0.188 70.08); */
-/* --chart-4: oklch(0.627 0.265 303.9); */
-/* --chart-5: oklch(0.645 0.246 16.439); */
-/* --sidebar: oklch(0.205 0 0); */
-/* --sidebar-foreground: oklch(0.985 0 0); */
-/* --sidebar-primary: oklch(0.488 0.243 264.376); */
-/* --sidebar-primary-foreground: oklch(0.985 0 0); */
-/* --sidebar-accent: oklch(0.269 0 0); */
-/* --sidebar-accent-foreground: oklch(0.985 0 0); */
-/* --sidebar-border: oklch(1 0 0 / 10%); */
-/* --sidebar-ring: oklch(0.556 0 0); */
-/* } */
-
-.dark {
- --background: oklch(0.2 0 0);
- /* Softer dark gray instead of 0.145 */
- --foreground: oklch(0.9 0 0);
- /* Softer off-white instead of 0.985 */
- --card: oklch(0.22 0 0);
- /* Slightly lighter card */
- --card-foreground: oklch(0.9 0 0);
- /* Match foreground */
- --popover: oklch(0.22 0 0);
- --popover-foreground: oklch(0.9 0 0);
- --primary: oklch(0.85 0 0);
- /* Less harsh white */
- --primary-foreground: oklch(0.22 0 0);
- --secondary: oklch(0.3 0 0);
- /* Lighter secondary */
- --secondary-foreground: oklch(0.9 0 0);
- --muted: oklch(0.3 0 0);
- --muted-foreground: oklch(0.65 0 0);
- /* Slightly softer */
- --accent: #a89984;
-
- --accent-foreground: oklch(0.9 0 0);
- --destructive: oklch(0.704 0.191 22.216);
- --border: oklch(1 0 0 / 15%);
- /* Slightly more visible borders */
- --input: oklch(1 0 0 / 18%);
- --ring: oklch(0.556 0 0);
- --chart-1: oklch(0.488 0.243 264.376);
- --chart-2: oklch(0.696 0.17 162.48);
- --chart-3: oklch(0.769 0.188 70.08);
- --chart-4: oklch(0.627 0.265 303.9);
- --chart-5: oklch(0.645 0.246 16.439);
- --sidebar: oklch(0.22 0 0);
- /* Match card */
- --sidebar-foreground: oklch(0.9 0 0);
- --sidebar-primary: oklch(0.488 0.243 264.376);
- --sidebar-primary-foreground: oklch(0.9 0 0);
- --sidebar-accent: oklch(0.3 0 0);
- --sidebar-accent-foreground: oklch(0.9 0 0);
- --sidebar-border: oklch(1 0 0 / 15%);
- --sidebar-ring: oklch(0.556 0 0);
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius));
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
}
diff --git a/src/styles/shadcn-overrides.css b/src/styles/shadcn-overrides.css
deleted file mode 100644
index c42bfd9..0000000
--- a/src/styles/shadcn-overrides.css
+++ /dev/null
@@ -1,51 +0,0 @@
-* {
- /* border-color: var(--border);*/
- outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
-}
-
-html {
- font-family: var(--font-sansserif);
-}
-
-body {
- background-color: var(--background);
- color: var(--foreground);
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"],
-.btn,
-a[href]:not([aria-disabled="true"]),
-[role="button"] {
- cursor: pointer;
-}
-
-.shadow,
-.shadow-sm,
-.shadow-md,
-.shadow-lg,
-.shadow-xl,
-.shadow-2xl,
-[class*="shadow"] {
- box-shadow: none !important;
-}
-
-.card,
-.dialog,
-.popover,
-.dropdown-menu {
- box-shadow: none !important;
-}
-
-figure > img {
- max-width: 600px;
- min-width: 300px;
-}
-
-img.rounded-image {
- max-width: auto;
- min-width: auto;
-}
-
diff --git a/src/styles/shadcn-theme.css b/src/styles/shadcn-theme.css
deleted file mode 100644
index 9329d37..0000000
--- a/src/styles/shadcn-theme.css
+++ /dev/null
@@ -1,40 +0,0 @@
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius));
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-ring: var(--ring);
- --color-chart-1: var(--chart-1);
- --color-chart-2: var(--chart-2);
- --color-chart-3: var(--chart-3);
- --color-chart-4: var(--chart-4);
- --color-chart-5: var(--chart-5);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
-}
-
diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx
index 031dc39..f5db358 100644
--- a/src/templates/BlogTemplate.tsx
+++ b/src/templates/BlogTemplate.tsx
@@ -10,64 +10,67 @@ const BlogTemplate = () => {
const { posts } = usePosts()
const post = posts?.find((x) => x.slug === slug)
- return (
-
- {!post ? (
- Loading...
- ) : (
- <>
-
-
{post?.title}
-
-
-
- {convertDate(post?.date)}
-
-
- {post?.tags?.map((tag, i) => (
-
-
- {tag}
-
-
- ))}
-
-
-
+ {!post ? (
+
Loading...
+ ) : (
+
+
+
+
- >
- )}
+ [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[#689d6a] [&_a]:text-primary
+ [&>table]:w-full [&>table]:my-4
+ [&>table>thead>tr]:m-0 [&>table>thead>tr]:border-t [&>table>thead>tr]:p-0 [&>table>thead>tr:even]:bg-muted
+ [&>table>thead>tr>th]:border [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-2 [&>table>thead>tr>th]:text-left [&>table>thead>tr>th]:font-bold [&>table>thead>tr>th[align=center]]:text-center [&>table>thead>tr>th[align=right]]:text-right
+ [&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
+ [&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
+ "
+ dangerouslySetInnerHTML={{ __html: post?.html }}
+ />
+
+ )}
+
)
}
diff --git a/src/templates/MainTemplate.tsx b/src/templates/MainTemplate.tsx
index 6a3e2e9..b54fdf8 100644
--- a/src/templates/MainTemplate.tsx
+++ b/src/templates/MainTemplate.tsx
@@ -1,32 +1,84 @@
// @ts-nocheck
-import { Header } from "@/components/Header"
-import { ThemeProvider } from "@/context/ThemeProvider"
-import { useTheme } from "@/context/ThemeProvider"
-const MainTemplate = (props) => {
- return (
-
- {props.children}
-
- )
+import gruvboxComputer from "../images/gruvbox-computer.svg"
+import { Link } from "react-router"
+const Header = () => {
+ return (
+
+
+
+
+
+
+
+
+ home
+
+
+
+
+
+ posts
+
+
+
+
+ about
+
+
+
+
+
+ )
}
-const MainContent = ({ children }) => {
- const { theme } = useTheme()
- const classes =
- theme === "light"
- ? "min-h-screen w-full flex flex-col overflow-x-hidden mb-15"
- : "min-h-screen w-full flex flex-col overflow-x-hidden mb-15"
+const Footer = () => {
+ return (
+
+ )
+}
- return (
-
- )
+const MainTemplate = ({ children }) => {
+ return (
+
+ )
}
export default MainTemplate
diff --git a/src/templates/TagTemplate.tsx b/src/templates/TagTemplate.tsx
index 8e82548..eaf0d32 100644
--- a/src/templates/TagTemplate.tsx
+++ b/src/templates/TagTemplate.tsx
@@ -5,16 +5,19 @@ import PostListing from "@/containers/PostListing"
import { usePosts } from "@/hooks/usePosts"
const TagTemplate = () => {
- const { tag } = useParams()
- const { posts } = usePosts()
+ const { tag } = useParams()
+ const { posts } = usePosts()
- const filteredPosts = posts.filter((post) => post.tags.includes(tag))
+ const filteredPosts = posts.filter((post) => post.tags.includes(tag))
- return (
-
-
-
- )
+ return (
+
+
+
{`Posts tagged: #${tag}`}
+
+
+
+ )
}
export default TagTemplate
diff --git a/src/utils/convertDate.ts b/src/utils/convertDate.ts
index 100f1fe..1c16154 100644
--- a/src/utils/convertDate.ts
+++ b/src/utils/convertDate.ts
@@ -24,12 +24,19 @@ const days = [
]
const convertDate = (isoStamp: string) => {
- const unixSeconds = new Date(isoStamp)
- // const weekday = days[unixSeconds.getDay()]
- const day = unixSeconds.getDate()
- const month = months[unixSeconds.getMonth()]
- const year = unixSeconds.getFullYear()
- return `${day} ${month} ${year}`
+ //const unixSeconds = new Date(isoStamp)
+ //// const weekday = days[unixSeconds.getDay()]
+ //const day = unixSeconds.getDate()
+ //const month = months[unixSeconds.getMonth()]
+ //const year = unixSeconds.getFullYear()
+ //return `${day} ${month} ${year}`
+
+ console.log(isoStamp)
+ const date = new Date(isoStamp)
+ const year = date.getFullYear()
+ const month = String(date.getMonth() + 1).padStart(2, "0")
+ const day = String(date.getDate()).padStart(2, "0")
+ return `${year}-${month}-${day}`
}
export { convertDate }
diff --git a/test.txt b/test.txt
deleted file mode 100644
index e69de29..0000000