From 7e5a3e85af3f4fd5b412ea5546da5c1bd4198b06 Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 20:33:07 +0200 Subject: [PATCH 01/24] refactor: themetogglebutton --- .../navigation/ThemeToggleButton.css | 26 ------ .../navigation/ThemeToggleButton.tsx | 87 +++++++++---------- 2 files changed, 39 insertions(+), 74 deletions(-) delete mode 100644 www/src/components/navigation/ThemeToggleButton.css diff --git a/www/src/components/navigation/ThemeToggleButton.css b/www/src/components/navigation/ThemeToggleButton.css deleted file mode 100644 index bd5297dd23..0000000000 --- a/www/src/components/navigation/ThemeToggleButton.css +++ /dev/null @@ -1,26 +0,0 @@ -.theme-toggle { - display: inline-flex; - align-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border-radius: 99em; -} - -.theme-toggle > label:focus-within { - outline: 2px solid transparent; - box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; -} - -.theme-toggle > label { - color: var(--theme-code-inline-text); - position: relative; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; -} - -.theme-toggle .checked { - color: var(--theme-accent); - opacity: 1; -} diff --git a/www/src/components/navigation/ThemeToggleButton.tsx b/www/src/components/navigation/ThemeToggleButton.tsx index 7184ec08c5..b1aae2e01b 100644 --- a/www/src/components/navigation/ThemeToggleButton.tsx +++ b/www/src/components/navigation/ThemeToggleButton.tsx @@ -1,16 +1,15 @@ /** @jsxImportSource react */ import { useEffect, useState } from "react"; import clsx from "clsx"; -import "./ThemeToggleButton.css"; -const themes = ["light", "dark"]; +const themes = ["light", "dark"] as const; +type Theme = typeof themes[number]; +const LOCAL_STORAGE_KEY = "theme"; -const icons = [ +const SunIcon: React.FC = () => ( @@ -19,76 +18,68 @@ const icons = [ d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" /> - , + +); +const MoonIcon: React.FC = () => ( - , -]; + +); export default function ThemeToggleButton() { - const [theme, setTheme] = useState(undefined); - useEffect(() => { - const init = () => { - if (typeof theme !== "string" && !import.meta.env.SSR) { - const item = localStorage.getItem("theme"); - if (item) { - return setTheme(item); - } - if (window.matchMedia("(prefers-color-scheme: dark)").matches) { - return setTheme("dark"); - } - return setTheme("light"); - } - }; + const [theme, _setTheme] = useState(undefined); - init(); - }, [theme]); + const setTheme = (theme: Theme) => { + _setTheme(theme); + localStorage.setItem(LOCAL_STORAGE_KEY, theme); - const handleChange = (t: string) => { const root = document.documentElement; - setTheme(t); - localStorage.setItem("theme", t); - if (t === "light") { + if (theme === "light") { + root.classList.add("light"); root.classList.remove("dark"); } else { root.classList.add("dark"); + root.classList.remove("light"); } }; + useEffect(() => { + const item = localStorage.getItem(LOCAL_STORAGE_KEY); + const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)"); + + const theme = item ?? (mediaMatch.matches ? "dark" : "light"); + setTheme(theme as Theme); + }, [theme]); + return ( -
- {themes.map((t, i) => { - const icon = icons[i]; +
+ {themes.map((t) => { const checked = t === theme; return ( ); From 82fc79f35b8130bc3fa5568d52eba966f25757b2 Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 21:01:07 +0200 Subject: [PATCH 02/24] chore: prepare design system color scheme --- www/src/styles/global.css | 24 ++++++++++++++++++++++++ www/tailwind.config.cjs | 10 ++++++++++ 2 files changed, 34 insertions(+) diff --git a/www/src/styles/global.css b/www/src/styles/global.css index f17fcec372..52883cebb0 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -3,6 +3,30 @@ @tailwind utilities; @layer base { + html.light { + --color-base: 100 100 100; + --color-neutral: 0 0 0; + --color-primary: 255 155 179; + --color-secondary: 111 114 185; + --color-accent: 255 155 179; + --color-warning: 255 155 179; + --color-error: 255 155 179; + --color-success: 255 155 179; + --color-info: 255 155 179; + } + + html.dark { + --color-base: 100 100 100; + --color-neutral: 0 0 0; + --color-primary: 255 155 179; + --color-secondary: 111 114 185; + --color-accent: 255 155 179; + --color-warning: 255 155 179; + --color-error: 255 155 179; + --color-success: 255 155 179; + --color-info: 255 155 179; + } + .cursor::after { display: block; content: ""; diff --git a/www/tailwind.config.cjs b/www/tailwind.config.cjs index 4656163b7e..787f10416c 100644 --- a/www/tailwind.config.cjs +++ b/www/tailwind.config.cjs @@ -5,6 +5,16 @@ module.exports = { theme: { extend: { colors: { + base: "rgb(var(--color-base) / )", + neutral: "rgb(var(--color-neutral) / )", + primary: "rgb(var(--color-primary) / )", + secondary: "rgb(var(--color-secondary) / )", + accent: "rgb(var(--color-accent) / )", + warning: "rgb(var(--color-warning) / )", + error: "rgb(var(--color-error) / )", + success: "rgb(var(--color-success) / )", + info: "rgb(var(--color-info) / )", + "t3-purple-50": "#F3EEFF", "t3-purple-100": "#e8ddff", "t3-purple-200": "#c3b4fc", From c06e9736dcca06551db705d0bdb8dd7bf7bb765a Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 21:11:18 +0200 Subject: [PATCH 03/24] refactor: default theme and dont shadow --- www/src/components/navigation/ThemeToggleButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/src/components/navigation/ThemeToggleButton.tsx b/www/src/components/navigation/ThemeToggleButton.tsx index b1aae2e01b..0c0e2ee45c 100644 --- a/www/src/components/navigation/ThemeToggleButton.tsx +++ b/www/src/components/navigation/ThemeToggleButton.tsx @@ -31,7 +31,7 @@ const MoonIcon: React.FC = () => ( ); export default function ThemeToggleButton() { - const [theme, _setTheme] = useState(undefined); + const [theme, _setTheme] = useState("dark"); const setTheme = (theme: Theme) => { _setTheme(theme); @@ -51,8 +51,8 @@ export default function ThemeToggleButton() { const item = localStorage.getItem(LOCAL_STORAGE_KEY); const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)"); - const theme = item ?? (mediaMatch.matches ? "dark" : "light"); - setTheme(theme as Theme); + const newTheme = item ?? (mediaMatch.matches ? "dark" : "light"); + setTheme(newTheme as Theme); }, [theme]); return ( From 3154202ca497f405f988563d9e28fd7c348fcdf8 Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 21:32:58 +0200 Subject: [PATCH 04/24] chore: add some colors atleast --- www/src/pages/theme-test.astro | 21 ++++++++++++++++++++ www/src/styles/global.css | 36 +++++++++++++++++----------------- 2 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 www/src/pages/theme-test.astro diff --git a/www/src/pages/theme-test.astro b/www/src/pages/theme-test.astro new file mode 100644 index 0000000000..380a86fed6 --- /dev/null +++ b/www/src/pages/theme-test.astro @@ -0,0 +1,21 @@ +--- +import ThemeToggleButton from "../components/navigation/ThemeToggleButton"; +import "../styles/global.css"; +--- + +
+

+ Testing Color Schemes +

+ +
+
Neutral
+
Primary
+
Secondary
+
Accent
+
Warning
+
Error
+
Success
+
Info
+
+
diff --git a/www/src/styles/global.css b/www/src/styles/global.css index 52883cebb0..e26b7c87fd 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -4,27 +4,27 @@ @layer base { html.light { - --color-base: 100 100 100; - --color-neutral: 0 0 0; - --color-primary: 255 155 179; - --color-secondary: 111 114 185; - --color-accent: 255 155 179; - --color-warning: 255 155 179; - --color-error: 255 155 179; - --color-success: 255 155 179; - --color-info: 255 155 179; + --color-base: 15 23 41; + --color-neutral: 29 40 58; + --color-primary: 122 98 246; + --color-secondary: 58 191 248; + --color-accent: 244 113 181; + --color-warning: 244 193 82; + --color-error: 251 111 132; + --color-success: 43 212 189; + --color-info: 12 166 233; } html.dark { - --color-base: 100 100 100; - --color-neutral: 0 0 0; - --color-primary: 255 155 179; - --color-secondary: 111 114 185; - --color-accent: 255 155 179; - --color-warning: 255 155 179; - --color-error: 255 155 179; - --color-success: 255 155 179; - --color-info: 255 155 179; + --color-base: 236 228 236; + --color-neutral: 29 40 58; + --color-primary: 122 98 246; + --color-secondary: 58 191 248; + --color-accent: 244 113 181; + --color-warning: 244 193 82; + --color-error: 251 111 132; + --color-success: 43 212 189; + --color-info: 12 166 233; } .cursor::after { From ca826bc6c9dca95181c3f836e582b1eea5036f48 Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 21:34:32 +0200 Subject: [PATCH 05/24] fix: linter --- www/src/pages/{theme-test.astro => themeTest.astro} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename www/src/pages/{theme-test.astro => themeTest.astro} (100%) diff --git a/www/src/pages/theme-test.astro b/www/src/pages/themeTest.astro similarity index 100% rename from www/src/pages/theme-test.astro rename to www/src/pages/themeTest.astro From fe8dc8f180f21d04f118482dac9b56096cd31a3b Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 21:38:20 +0200 Subject: [PATCH 06/24] chore: swap base --- www/src/styles/global.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/www/src/styles/global.css b/www/src/styles/global.css index e26b7c87fd..1038e6ed39 100644 --- a/www/src/styles/global.css +++ b/www/src/styles/global.css @@ -4,7 +4,7 @@ @layer base { html.light { - --color-base: 15 23 41; + --color-base: 236 228 236; --color-neutral: 29 40 58; --color-primary: 122 98 246; --color-secondary: 58 191 248; @@ -14,9 +14,9 @@ --color-success: 43 212 189; --color-info: 12 166 233; } - + html.dark { - --color-base: 236 228 236; + --color-base: 15 23 41; --color-neutral: 29 40 58; --color-primary: 122 98 246; --color-secondary: 58 191 248; From 2156be782a890cb95a8a0a935b6fe8c6b27d453e Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 22:11:11 +0200 Subject: [PATCH 07/24] chore: delete index.css --- www/src/components/headCommon.astro | 2 +- www/src/styles/index.css | 382 ---------------------------- 2 files changed, 1 insertion(+), 383 deletions(-) delete mode 100644 www/src/styles/index.css diff --git a/www/src/components/headCommon.astro b/www/src/components/headCommon.astro index 3f6d326e8e..2626c8cd1f 100644 --- a/www/src/components/headCommon.astro +++ b/www/src/components/headCommon.astro @@ -1,5 +1,5 @@ --- -import "../styles/index.css"; +//import "../styles/index.css"; --- diff --git a/www/src/styles/index.css b/www/src/styles/index.css deleted file mode 100644 index 4a97c21885..0000000000 --- a/www/src/styles/index.css +++ /dev/null @@ -1,382 +0,0 @@ -* { - box-sizing: border-box; - margin: 0; -} - -/* Global focus outline reset */ -*:focus:not(:focus-visible) { - outline: none; -} - -:root { - --user-font-scale: 1rem - 16px; - --max-width: calc(100% - 1rem); -} - -@media (min-width: 50em) { - :root { - --max-width: 46em; - } -} - -body { - display: flex; - flex-direction: column; - min-height: 100vh; - font-family: var(--font-body); - font-size: 1rem; - font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem); - line-height: 1.5; - max-width: 100vw; -} - -nav ul { - list-style: none; - padding: 0; -} - -.content > section > * + * { - margin-top: 1.25rem; -} - -.content > section > :first-child { - margin-top: 0; -} - -/* Typography */ -h1, -h2, -h3, -h4, -h5, -h6 { - margin-bottom: 1rem; - font-weight: bold; - line-height: 1; -} - -h1, -h2 { - max-width: 40ch; -} - -:is(h2, h3):not(:first-child) { - margin-top: 3rem; -} - -:is(h4, h5, h6):not(:first-child) { - margin-top: 2rem; -} - -h1 { - font-size: 3.25rem; - font-weight: 800; -} - -h2 { - font-size: 2.5rem; -} - -h3 { - font-size: 1.75rem; -} - -h4 { - font-size: 1.3rem; -} - -h5 { - font-size: 1rem; -} - -p { - line-height: 1.65em; -} - -.content ul { - line-height: 1.1em; -} - -/* p, -.content ul { - color: var(--theme-text-light); -} */ - -small, -.text_small { - font-size: 0.833rem; -} - -a { - color: var(--theme-text-accent); - font-weight: 400; - text-underline-offset: 0.08em; - align-items: center; - gap: 0.5rem; -} - -article > section :is(ul, ol) > * + * { - margin-top: 0.75rem; -} - -article > section nav :is(ul, ol) > * + * { - margin-top: inherit; -} - -article > section li > :is(p, pre, blockquote):not(:first-child) { - margin-top: 1rem; -} - -article > section :is(ul, ol) { - padding-left: 1em; -} - -article > section nav :is(ul, ol) { - padding-left: inherit; -} - -article > section nav { - margin-top: 1rem; - margin-bottom: 2rem; -} - -/* article > section ::marker { - font-weight: bold; - color: var(--theme-text-light); -} */ - -article > section iframe { - width: 100%; - height: auto; - aspect-ratio: 16 / 9; -} - -a > code { - position: relative; - color: var(--theme-text-accent); - background: transparent; - text-underline-offset: var(--padding-block); -} - -a > code::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - background: var(--theme-accent); - opacity: var(--theme-accent-opacity); - border-radius: var(--border-radius); -} - -a:hover, -a:focus { - text-decoration: underline; -} - -a:focus { - outline: 2px solid currentColor; - outline-offset: 0.25em; -} - -strong { - font-weight: 600; - color: inherit; -} - -/* Supporting Content */ - -code { - --border-radius: 3px; - --padding-block: 0.2rem; - --padding-inline: 0.33rem; - - font-family: var(--font-mono); - font-size: 0.85em; - color: inherit; - background-color: var(--theme-code-inline-bg); - padding: var(--padding-block) var(--padding-inline); - margin: calc(var(--padding-block) * -1) -0.125em; - border-radius: var(--border-radius); - word-break: break-word; -} - -pre.astro-code > code { - all: unset; -} - -pre > code { - font-size: 1em; -} - -table, -pre { - position: relative; - --padding-block: 1rem; - --padding-inline: 2rem; - padding: var(--padding-block) var(--padding-inline); - padding-right: calc(var(--padding-inline) * 2); - margin-left: calc(var(--padding-inline) * -1); - margin-right: calc(var(--padding-inline) * -1); - font-family: var(--font-mono); - - line-height: 1.5; - font-size: 0.85em; - overflow-y: hidden; - overflow-x: auto; -} - -table { - width: 100%; - padding: var(--padding-block) 0; - margin: 0; - border-collapse: collapse; -} - -/* Zebra striping */ -/* tr:nth-of-type(odd) { - background: var(--theme-bg-hover); -} */ -th { - background: var(--color-black); - color: var(--theme-color); - font-weight: bold; -} -td, -th { - padding: 6px; - text-align: left; -} - -pre { - background-color: var(--theme-code-bg); - color: var(--theme-code-text); -} - -blockquote code { - background-color: var(--theme-bg); -} - -@media (min-width: 37.75em) { - pre { - --padding-inline: 1.25rem; - border-radius: 8px; - margin-left: 0; - margin-right: 0; - } -} - -blockquote { - margin: 2rem 0; - padding: 1.25em 1.5rem; - border-left: 3px solid var(--theme-text-light); - background-color: var(--theme-bg-offset); - border-radius: 0 0.25rem 0.25rem 0; - line-height: 1.7; -} - -img { - max-width: 100%; -} - -.flex { - display: flex; - align-items: center; -} - -button { - display: flex; - align-items: center; - justify-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border: 0; - background: var(--theme-bg); - display: flex; - font-size: 1rem; - align-items: center; - gap: 0.25em; - border-radius: 99em; - color: var(--theme-text); - background-color: var(--theme-bg); -} - -h2.heading { - font-size: 1rem; - font-weight: 700; - padding: 0.1rem 1rem; - text-transform: uppercase; - margin-bottom: 0.5rem; -} - -.heading-link { - font-size: 1rem; - padding: 0.1rem 0 0.1rem 1rem; - border-left: 4px solid var(--theme-divider); -} - -.heading-link:hover, -.heading-link:focus { - border-left-color: var(--theme-accent); - color: var(--theme-accent); -} -/* .heading-link:focus-within { - color: var(--theme-text-light); - border-left-color: hsla(var(--color-gray-40), 1); -} */ -.heading-link svg { - opacity: 0.6; -} -.heading-link:hover svg { - opacity: 0.8; -} -.heading-link a { - display: inline-flex; - gap: 0.5em; - width: 100%; - padding: 0.15em 0 0.15em 0; -} - -.heading-link.depth-3 { - padding-left: 2rem; -} -.heading-link.depth-4 { - padding-left: 3rem; -} - -.heading-link a { - font: inherit; - color: inherit; - text-decoration: none; -} - -/* Screenreader Only Text */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.focus\:not-sr-only:focus, -.focus\:not-sr-only:focus-visible { - position: static; - width: auto; - height: auto; - padding: 0; - margin: 0; - overflow: visible; - clip: auto; - white-space: normal; -} - -:target { - scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem; -} From 00bb929ddc15eca4e4b8cd379f339718393bd554 Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Thu, 15 Sep 2022 23:22:27 +0200 Subject: [PATCH 08/24] refactor: simplify --- www/src/components/headSeo.astro | 16 +-- www/src/components/navigation/MobileMenu.tsx | 65 ++++----- .../navigation/MobileMenuButton.tsx | 7 +- www/src/components/navigation/Search.tsx | 6 +- .../components/navigation/SidebarToggle.tsx | 28 ++-- .../components/navigation/leftSidebar.astro | 50 ++++--- www/src/components/navigation/moreMenu.astro | 124 ++++++++---------- www/src/components/navigation/navbar.astro | 34 +++-- www/src/layouts/blog.astro | 6 +- www/src/layouts/landingPage.astro | 2 +- 10 files changed, 154 insertions(+), 184 deletions(-) diff --git a/www/src/components/headSeo.astro b/www/src/components/headSeo.astro index 23b2562c71..0fa5d03780 100644 --- a/www/src/components/headSeo.astro +++ b/www/src/components/headSeo.astro @@ -20,27 +20,17 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt; - + - + - + diff --git a/www/src/components/navigation/MobileMenu.tsx b/www/src/components/navigation/MobileMenu.tsx index 4f5906d7fa..4b5d18359e 100644 --- a/www/src/components/navigation/MobileMenu.tsx +++ b/www/src/components/navigation/MobileMenu.tsx @@ -2,50 +2,51 @@ import Search from "./Search"; import { useStore } from "@nanostores/react"; import { atom } from "nanostores"; +import clsx from "clsx"; export const MobileMenuState = atom(false); -export default function MobileMenu() { +const NavLink: React.FC<{ + href: string; + title: string; + external?: boolean; +}> = ({ href, title, external = false }) => ( + + {title} + +); + +const MobileMenu = () => { const $isMobileMenuOpen = useStore(MobileMenuState); return ( <>
- - Docs - - - FAQ - - + + - Github - - - T3 Stack - + title="GitHub" + external + /> +
); -} +}; + +export default MobileMenu; diff --git a/www/src/components/navigation/MobileMenuButton.tsx b/www/src/components/navigation/MobileMenuButton.tsx index 0a6023c09d..b7f3e66b05 100644 --- a/www/src/components/navigation/MobileMenuButton.tsx +++ b/www/src/components/navigation/MobileMenuButton.tsx @@ -2,14 +2,13 @@ import { useStore } from "@nanostores/react"; import { MobileMenuState } from "./MobileMenu"; -export default function MobileMenuButton() { +const MobileMenuButton = () => { const $isMobileMenuOpen = useStore(MobileMenuState); return ( <> ); -} +}; + +export default MobileMenuButton; diff --git a/www/src/components/navigation/Search.tsx b/www/src/components/navigation/Search.tsx index 3248bf5791..64e5648d66 100644 --- a/www/src/components/navigation/Search.tsx +++ b/www/src/components/navigation/Search.tsx @@ -16,7 +16,7 @@ const useDocSearchKeyboardEvents = // eslint-disable-next-line @typescript-eslint/no-explicit-any (docSearchReact as any).default.useDocSearchKeyboardEvents; -export default function Search() { +const Search: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const searchButtonRef = useRef(null); const [initialQuery, setInitialQuery] = useState(""); @@ -103,4 +103,6 @@ export default function Search() { )} ); -} +}; + +export default Search; diff --git a/www/src/components/navigation/SidebarToggle.tsx b/www/src/components/navigation/SidebarToggle.tsx index e8784fc791..07f2c3c131 100644 --- a/www/src/components/navigation/SidebarToggle.tsx +++ b/www/src/components/navigation/SidebarToggle.tsx @@ -1,11 +1,8 @@ /** @jsxImportSource react */ +import clsx from "clsx"; import { useState, useEffect } from "react"; -export default function SidebarToggle({ - currentPage, -}: { - currentPage: string; -}) { +const SidebarToggle: React.FC<{ currentPage: string }> = ({ currentPage }) => { const [sidebarShown, setSidebarShown] = useState(false); useEffect(() => { @@ -18,25 +15,22 @@ export default function SidebarToggle({ } }, [sidebarShown]); + const isLanding = currentPage === "/"; + return ( ); -} +}; + +export default SidebarToggle; diff --git a/www/src/components/navigation/leftSidebar.astro b/www/src/components/navigation/leftSidebar.astro index 58a4e97339..0102a5c74e 100644 --- a/www/src/components/navigation/leftSidebar.astro +++ b/www/src/components/navigation/leftSidebar.astro @@ -1,4 +1,5 @@ --- +import clsx from "clsx"; import { SIDEBAR } from "../../config"; import Search from "./Search"; @@ -7,6 +8,7 @@ export interface Props { } const { currentPage } = Astro.props; +const isLanding = currentPage === "/"; const currentPageMatch = currentPage.slice(1); const langCode = "en"; const sidebar = SIDEBAR[langCode]; @@ -14,14 +16,17 @@ const sidebar = SIDEBAR[langCode]; diff --git a/www/src/components/navigation/moreMenu.astro b/www/src/components/navigation/moreMenu.astro index e556a5083e..7312df066e 100644 --- a/www/src/components/navigation/moreMenu.astro +++ b/www/src/components/navigation/moreMenu.astro @@ -1,85 +1,75 @@ --- import * as CONFIG from "../../config"; import ThemeToggleButton from "./ThemeToggleButton"; -//import ThemeToggleButton from "./ThemeToggleButton"; export interface Props { editHref: string; } const { editHref } = Astro.props; -const showMoreSection = CONFIG.COMMUNITY_INVITE_URL; ---
- { - showMoreSection && ( -

- More -

- ) - } +

+ More +

+
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro index f5dbdc842a..adcc807e34 100644 --- a/www/src/components/navigation/navbar.astro +++ b/www/src/components/navigation/navbar.astro @@ -1,15 +1,12 @@ --- +import clsx from "clsx"; import Search from "./Search"; import SidebarToggle from "./SidebarToggle"; -export interface Props { - mode?: "landing" | "default"; -} - const currentPage = Astro.url.pathname; -const { mode = "default" } = Astro.props; +const isLanding = currentPage === "/"; -const navbarLinks: Array<{ href: string; label: string; newTab?: boolean }> = [ +const navbarLinks: Array<{ href: string; label: string }> = [ { href: "/en/introduction", label: "Docs", @@ -21,20 +18,19 @@ const navbarLinks: Array<{ href: string; label: string; newTab?: boolean }> = [ { href: "https://github.com/t3-oss/create-t3-app", label: "Github", - newTab: true, }, { href: "https://init.tips", label: "T3 Stack", - newTab: true, }, ]; --- diff --git a/www/src/layouts/blog.astro b/www/src/layouts/blog.astro index 2802a35409..b7d5eb1975 100644 --- a/www/src/layouts/blog.astro +++ b/www/src/layouts/blog.astro @@ -38,11 +38,11 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;