From b2b7b004ced6df091a9cd48ff79b15cbcec94ba0 Mon Sep 17 00:00:00 2001 From: Reed von Redwitz Date: Fri, 2 Feb 2024 10:38:41 +0100 Subject: [PATCH 1/9] some stuff works, need to keep polishing --- src/components/Footer.tsx | 3 + src/components/Header.tsx | 9 ++- src/components/PostList.tsx | 20 +++--- src/components/PostSummary.tsx | 8 +-- src/islands/NavigationBar.tsx | 117 +++++++++++++++---------------- src/islands/ThemeToggle.tsx | 58 +++++++++++++++ src/plugin/blog.ts | 6 +- src/routes/_app.tsx | 27 +++++-- src/routes/archive/index.tsx | 2 +- src/routes/blog/[slug].tsx | 5 +- tests/fixture/deno.json | 14 ++-- tests/fixture/static/styles.css | 59 ++++++++++++++++ tests/fixture/tailwind.config.ts | 48 +++++++++++++ 13 files changed, 284 insertions(+), 92 deletions(-) create mode 100644 src/components/Footer.tsx create mode 100644 src/islands/ThemeToggle.tsx diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..cd7eee4 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,3 @@ +export default function Footer() { + return <>; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index ab63837..9dda26c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,8 +6,13 @@ export default function Header( ) { const isHome = props.active == "/"; return ( -
+
+

+ + {props.options.title} + +

-
+ ); } diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx index 8e50f6a..715040e 100644 --- a/src/components/PostList.tsx +++ b/src/components/PostList.tsx @@ -6,16 +6,14 @@ export default function PostList( props: { posts: Post[]; showExcerpt: boolean; localization: Localization }, ) { return ( -
-
- {props.posts.map((post) => ( - - ))} -
-
+
+ {props.posts.map((post) => ( + + ))} +
); } diff --git a/src/components/PostSummary.tsx b/src/components/PostSummary.tsx index 7fa0b38..e5daefb 100644 --- a/src/components/PostSummary.tsx +++ b/src/components/PostSummary.tsx @@ -8,20 +8,20 @@ export default function PostSummary( return (
-

+

{post.title}

{hasNonNullContent(post.author) && ( <> - + {props.localization.attribution} {reduceAuthors(post.author)} )} - + + +
); } diff --git a/src/islands/ThemeToggle.tsx b/src/islands/ThemeToggle.tsx new file mode 100644 index 0000000..fa19ef9 --- /dev/null +++ b/src/islands/ThemeToggle.tsx @@ -0,0 +1,58 @@ +import { useSignal, useSignalEffect } from "@preact/signals"; + +const sun = ( + +); + +const moon = ( + +); + +export default function ThemeToggle() { + const currentTheme = localStorage.getItem("theme") ?? "light"; + console.log({ currentTheme }); + + const isDarkMode = useSignal(currentTheme === "dark"); + console.log({ signalValue: isDarkMode.value }); + useSignalEffect(() => { + document.documentElement.classList.toggle("dark", isDarkMode.value); + }); + + const toggleTheme = () => { + isDarkMode.value = !isDarkMode.value; + document.documentElement.classList.toggle("dark", isDarkMode.value); + localStorage.setItem("theme", isDarkMode.value ? "dark" : "light"); + console.log("setting"); + console.log({ current: localStorage.getItem("theme") }); + }; + + return ( + + ); +} diff --git a/src/plugin/blog.ts b/src/plugin/blog.ts index 7fc3af0..84571ec 100644 --- a/src/plugin/blog.ts +++ b/src/plugin/blog.ts @@ -130,7 +130,11 @@ export function blogPlugin( }], islands: { baseLocation: import.meta.url, - paths: ["../islands/NavigationBar.tsx", "../islands/Disqus.tsx"], + paths: [ + "../islands/NavigationBar.tsx", + "../islands/Disqus.tsx", + "../islands/ThemeToggle.tsx", + ], }, }; } diff --git a/src/routes/_app.tsx b/src/routes/_app.tsx index aa0f678..e21e4af 100644 --- a/src/routes/_app.tsx +++ b/src/routes/_app.tsx @@ -1,7 +1,19 @@ import { PageProps } from "../../deps.ts"; +import Footer from "../components/Footer.tsx"; import Header from "../components/Header.tsx"; import { BlogOptions } from "../plugin/blog.ts"; +const setThemeClassScript = ` + (function() { + const theme = localStorage.getItem('theme') || 'light'; + if (theme === 'dark') { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + })(); + `; + export function AppBuilder(options: BlogOptions) { return (props: PageProps) => { const { Component, route } = props; @@ -10,15 +22,18 @@ export function AppBuilder(options: BlogOptions) { + - -
-
+ +
+
+