From 67155a82ddf8b360e3336deee2abc2b1c8691020 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 5 Jan 2026 08:39:00 +0000 Subject: [PATCH 01/10] Initial plan From 6546c5c687e67756cb04a033b95e397b7bb7de1e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 5 Jan 2026 08:47:33 +0000 Subject: [PATCH 02/10] Add roadmap link to header and footer navigation Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com> --- apps/www/app/(home)/layout.tsx | 5 +++++ apps/www/app/(home)/page.tsx | 10 ++++++++++ apps/www/app/docs/layout.tsx | 5 +++++ 3 files changed, 20 insertions(+) diff --git a/apps/www/app/(home)/layout.tsx b/apps/www/app/(home)/layout.tsx index f5d7b4ce5..2e4d99be4 100644 --- a/apps/www/app/(home)/layout.tsx +++ b/apps/www/app/(home)/layout.tsx @@ -13,6 +13,11 @@ export default function Layout({ children }: { children: ReactNode }) { url: "/docs/arkenv", active: "none", }, + { + text: "Roadmap", + url: "https://github.com/yamcodes/arkenv/issues/683", + active: "none", + }, { text: "GitHub", url: "https://github.com/yamcodes/arkenv", diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx index 0ee6745d9..89bd82527 100644 --- a/apps/www/app/(home)/page.tsx +++ b/apps/www/app/(home)/page.tsx @@ -99,6 +99,16 @@ export default function HomePage() { ArkType ecosystem +
+ + Roadmap + +
Released under the MIT License
Copyright © 2025-present Yam Borodetsky
diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx index 07840d78a..021718dfd 100644 --- a/apps/www/app/docs/layout.tsx +++ b/apps/www/app/docs/layout.tsx @@ -15,6 +15,11 @@ export default function Layout({ children }: { children: ReactNode }) { }} {...baseOptions} links={[ + { + text: "Roadmap", + url: "https://github.com/yamcodes/arkenv/issues/683", + active: "none", + }, { text: "GitHub", url: "https://github.com/yamcodes/arkenv", From 826c256c971c92e5a5adbb3c0ec5027309a6797d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 5 Jan 2026 17:35:38 +0000 Subject: [PATCH 03/10] Add external link icon to roadmap links Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com> --- apps/www/app/(home)/layout.tsx | 1 + apps/www/app/docs/layout.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/apps/www/app/(home)/layout.tsx b/apps/www/app/(home)/layout.tsx index 2e4d99be4..d65f3d154 100644 --- a/apps/www/app/(home)/layout.tsx +++ b/apps/www/app/(home)/layout.tsx @@ -17,6 +17,7 @@ export default function Layout({ children }: { children: ReactNode }) { text: "Roadmap", url: "https://github.com/yamcodes/arkenv/issues/683", active: "none", + external: true, }, { text: "GitHub", diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx index 021718dfd..a298dfd42 100644 --- a/apps/www/app/docs/layout.tsx +++ b/apps/www/app/docs/layout.tsx @@ -19,6 +19,7 @@ export default function Layout({ children }: { children: ReactNode }) { text: "Roadmap", url: "https://github.com/yamcodes/arkenv/issues/683", active: "none", + external: true, }, { text: "GitHub", From 980db948a4658ee3a07f6eec0130946b06086df4 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Mon, 5 Jan 2026 23:24:29 +0500 Subject: [PATCH 04/10] feat: add Roadmap link to layout configuration and remove from home page. --- apps/www/app/(home)/page.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/apps/www/app/(home)/page.tsx b/apps/www/app/(home)/page.tsx index 89bd82527..0ee6745d9 100644 --- a/apps/www/app/(home)/page.tsx +++ b/apps/www/app/(home)/page.tsx @@ -99,16 +99,6 @@ export default function HomePage() { ArkType ecosystem
-
- - Roadmap - -
Released under the MIT License
Copyright © 2025-present Yam Borodetsky
From 9d12dfa6672f68b222e9e127e21e77dfe7cfe930 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Mon, 5 Jan 2026 23:36:42 +0500 Subject: [PATCH 05/10] consolidate github icon --- apps/www/app/layout.config.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/apps/www/app/layout.config.tsx b/apps/www/app/layout.config.tsx index 12ae19a7e..e58c04654 100644 --- a/apps/www/app/layout.config.tsx +++ b/apps/www/app/layout.config.tsx @@ -1,3 +1,4 @@ +import { SiGithub } from "@icons-pack/react-simple-icons"; import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; import { Logo } from "~/components/page/logo"; import { ThemeToggle } from "~/components/ui/theme-toggle"; @@ -16,4 +17,19 @@ export const baseOptions: BaseLayoutProps = { themeSwitch: { component: , }, + links: [ + { + text: "GitHub", + url: "https://github.com/yamcodes/arkenv", + active: "none", + type: "icon", + icon: , + }, + { + text: "Roadmap", + url: "https://github.com/yamcodes/arkenv/issues/683", + active: "none", + external: true, + }, + ], }; From 4222337419c4ce3531471a2bf1df47fd47d13b07 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Mon, 5 Jan 2026 23:56:31 +0500 Subject: [PATCH 06/10] refactor(ui): streamline external links - Centralize GitHub link in base options - Refactor external link CSS selector - Update home page roadmap link display --- apps/www/app/(home)/layout.tsx | 18 ++++++++---------- apps/www/app/docs/layout.tsx | 16 ---------------- apps/www/app/globals.css | 8 ++++---- apps/www/app/layout.config.tsx | 6 ------ 4 files changed, 12 insertions(+), 36 deletions(-) diff --git a/apps/www/app/(home)/layout.tsx b/apps/www/app/(home)/layout.tsx index d65f3d154..74a9566b0 100644 --- a/apps/www/app/(home)/layout.tsx +++ b/apps/www/app/(home)/layout.tsx @@ -1,7 +1,8 @@ -import { SiGithub } from "@icons-pack/react-simple-icons"; import { HomeLayout } from "fumadocs-ui/layouts/home"; +import { ArrowUpRight } from "lucide-react"; import type { ReactNode } from "react"; import { baseOptions } from "~/app/layout.config"; +import { ExternalLink } from "~/components/ui/external-link"; export default function Layout({ children }: { children: ReactNode }) { return ( @@ -14,18 +15,15 @@ export default function Layout({ children }: { children: ReactNode }) { active: "none", }, { - text: "Roadmap", + text: ( + + Roadmap + + ), url: "https://github.com/yamcodes/arkenv/issues/683", - active: "none", external: true, }, - { - text: "GitHub", - url: "https://github.com/yamcodes/arkenv", - active: "none", - type: "icon", - icon: , - }, + ...(baseOptions.links ?? []), ]} > {children} diff --git a/apps/www/app/docs/layout.tsx b/apps/www/app/docs/layout.tsx index a298dfd42..ce6608ae3 100644 --- a/apps/www/app/docs/layout.tsx +++ b/apps/www/app/docs/layout.tsx @@ -1,4 +1,3 @@ -import { SiGithub } from "@icons-pack/react-simple-icons"; import { DocsLayout } from "fumadocs-ui/layouts/docs"; import type { ReactNode } from "react"; import { baseOptions } from "~/app/layout.config"; @@ -14,21 +13,6 @@ export default function Layout({ children }: { children: ReactNode }) { banner: , }} {...baseOptions} - links={[ - { - text: "Roadmap", - url: "https://github.com/yamcodes/arkenv/issues/683", - active: "none", - external: true, - }, - { - text: "GitHub", - url: "https://github.com/yamcodes/arkenv", - active: "none", - type: "icon", - icon: , - }, - ]} > {children} diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css index a8d887d6d..dee383459 100644 --- a/apps/www/app/globals.css +++ b/apps/www/app/globals.css @@ -22,7 +22,7 @@ article a:not(:has(img)):not(.fd-card):not([data-card]):not([class*="fd-"]):not( [data-no-underline] ), -a[data-external-link]:not(:has(img)):not(.fd-card):not([data-card]):not( +[data-external-link]:not(:has(img)):not(.fd-card):not([data-card]):not( [class*="fd-"] ):not([data-no-underline]) { text-decoration: none; @@ -35,14 +35,14 @@ article a:not(:has(img)):not(.fd-card):not([data-card]):not([class*="fd-"]):not( [data-no-underline] ):hover, -a[data-external-link]:not(:has(img)):not(.fd-card):not([data-card]):not( +[data-external-link]:not(:has(img)):not(.fd-card):not([data-card]):not( [class*="fd-"] ):not([data-no-underline]):hover { border-bottom-width: 2.5px; } /* External links in documentation */ -a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( +[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( [data-no-arrow] ):not(:has(img)), article @@ -57,7 +57,7 @@ article } .dark - a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( + [data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( [data-no-arrow] ):not(:has(img)), .dark diff --git a/apps/www/app/layout.config.tsx b/apps/www/app/layout.config.tsx index e58c04654..8e9d6d649 100644 --- a/apps/www/app/layout.config.tsx +++ b/apps/www/app/layout.config.tsx @@ -25,11 +25,5 @@ export const baseOptions: BaseLayoutProps = { type: "icon", icon: , }, - { - text: "Roadmap", - url: "https://github.com/yamcodes/arkenv/issues/683", - active: "none", - external: true, - }, ], }; From caceb8d59f0de7e3b986d10d3708058bcc0ffe68 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Tue, 6 Jan 2026 00:47:29 +0500 Subject: [PATCH 07/10] refactor: Refine external link icon styling, especially in navigation, and add roadmap link to documentation. --- apps/www/app/(home)/layout.tsx | 8 +--- apps/www/app/globals.css | 56 +++++++++++++++++++++----- apps/www/content/docs/arkenv/meta.json | 4 +- 3 files changed, 50 insertions(+), 18 deletions(-) diff --git a/apps/www/app/(home)/layout.tsx b/apps/www/app/(home)/layout.tsx index 74a9566b0..949959957 100644 --- a/apps/www/app/(home)/layout.tsx +++ b/apps/www/app/(home)/layout.tsx @@ -1,8 +1,6 @@ import { HomeLayout } from "fumadocs-ui/layouts/home"; -import { ArrowUpRight } from "lucide-react"; import type { ReactNode } from "react"; import { baseOptions } from "~/app/layout.config"; -import { ExternalLink } from "~/components/ui/external-link"; export default function Layout({ children }: { children: ReactNode }) { return ( @@ -15,11 +13,7 @@ export default function Layout({ children }: { children: ReactNode }) { active: "none", }, { - text: ( - - Roadmap - - ), + text: "Roadmap", url: "https://github.com/yamcodes/arkenv/issues/683", external: true, }, diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css index dee383459..9bdf63942 100644 --- a/apps/www/app/globals.css +++ b/apps/www/app/globals.css @@ -42,13 +42,12 @@ article } /* External links in documentation */ -[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( +article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( [data-no-arrow] ):not(:has(img)), -article - a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( - [class*="fd-"] - ):not([data-no-arrow]):not(:has(img)) { +[data-external-link]:not(.fd-card):not([data-card]):not([data-no-arrow]):not( + :has(img) + ) { padding-right: 1.1em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; @@ -57,14 +56,51 @@ article } .dark - [data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not( + article + a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( [data-no-arrow] ):not(:has(img)), .dark - article - a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( - [class*="fd-"] - ):not([data-no-arrow]):not(:has(img)) { + [data-external-link]:not(.fd-card):not([data-card]):not([data-no-arrow]):not( + :has(img) + ) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); +} + +/* Sidebar & Nav: Automagic icons next to text for flex containers */ +[data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)) { + background-image: none !important; + padding-right: 0 !important; + display: flex; + align-items: center; +} + +#nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)), +#nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)) { + background-image: none !important; + padding-right: 0 !important; + display: inline-flex; + align-items: center; +} + +[data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, +#nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, +#nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after { + content: ""; + width: 0.9em; + height: 0.9em; + margin-left: 0.1em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + flex-shrink: 0; + opacity: 0.5; +} + +.dark [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, +.dark #nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, +.dark #nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); } diff --git a/apps/www/content/docs/arkenv/meta.json b/apps/www/content/docs/arkenv/meta.json index 92d0ee608..7fb34beb9 100644 --- a/apps/www/content/docs/arkenv/meta.json +++ b/apps/www/content/docs/arkenv/meta.json @@ -18,6 +18,8 @@ "[Standard Schema](/docs/arkenv/integrations/standard-schema)", "---How-to---", "[Load environment variables](/docs/arkenv/how-to/load-environment-variables)", - "[Reuse your schema](/docs/arkenv/how-to/reuse-schemas)" + "[Reuse your schema](/docs/arkenv/how-to/reuse-schemas)", + "---", + "[Roadmap](https://github.com/yamcodes/arkenv/issues/683)" ] } From 920af7a3237769d64c79b5093057e0bc18845d77 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Tue, 6 Jan 2026 00:49:23 +0500 Subject: [PATCH 08/10] fix: Add `gap: 0 !important` to specific navigation and scroll area links. --- apps/www/app/globals.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css index 9bdf63942..13347ef05 100644 --- a/apps/www/app/globals.css +++ b/apps/www/app/globals.css @@ -73,6 +73,7 @@ article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( padding-right: 0 !important; display: flex; align-items: center; + gap: 0 !important; } #nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)), @@ -81,6 +82,7 @@ article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( padding-right: 0 !important; display: inline-flex; align-items: center; + gap: 0 !important; } [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, From 062ed6ff0e5be2f73f13038813f91d1f2243cbc9 Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Tue, 6 Jan 2026 00:49:35 +0500 Subject: [PATCH 09/10] style: Reformat CSS selectors for improved readability. --- apps/www/app/globals.css | 55 +++++++++++++++++++++++++++++++--------- 1 file changed, 43 insertions(+), 12 deletions(-) diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css index 13347ef05..62290890d 100644 --- a/apps/www/app/globals.css +++ b/apps/www/app/globals.css @@ -42,9 +42,10 @@ article } /* External links in documentation */ -article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( - [data-no-arrow] - ):not(:has(img)), +article +a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( + [data-no-arrow] +):not(:has(img)), [data-external-link]:not(.fd-card):not([data-card]):not([data-no-arrow]):not( :has(img) ) { @@ -68,7 +69,10 @@ article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( } /* Sidebar & Nav: Automagic icons next to text for flex containers */ -[data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)) { +[data-radix-scroll-area-viewport] + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + ) { background-image: none !important; padding-right: 0 !important; display: flex; @@ -76,8 +80,14 @@ article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( gap: 0 !important; } -#nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)), -#nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)) { +#nd-nav + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + ), +#nd-subnav + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + ) { background-image: none !important; padding-right: 0 !important; display: inline-flex; @@ -85,9 +95,18 @@ article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( gap: 0 !important; } -[data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, -#nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, -#nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after { +[data-radix-scroll-area-viewport] + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + )::after, +#nd-nav + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + )::after, +#nd-subnav + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + )::after { content: ""; width: 0.9em; height: 0.9em; @@ -100,9 +119,21 @@ article a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( opacity: 0.5; } -.dark [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, -.dark #nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after, -.dark #nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child))::after { +.dark + [data-radix-scroll-area-viewport] + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + )::after, +.dark + #nd-nav + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + )::after, +.dark + #nd-subnav + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + )::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); } From 065f4cc692ae16b33e02bcad547eca94424a5e8b Mon Sep 17 00:00:00 2001 From: Yam C Borodetsky Date: Tue, 6 Jan 2026 01:10:01 +0500 Subject: [PATCH 10/10] refactor: Replace hardcoded external link icons with theme-aware CSS variables and adjust flex display for links. --- apps/www/app/globals.css | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css index 62290890d..8bd11b05d 100644 --- a/apps/www/app/globals.css +++ b/apps/www/app/globals.css @@ -12,9 +12,10 @@ @plugin "tailwindcss-animate"; @source "../node_modules/fumadocs-ui/dist/**/*.js"; -/* External link arrow icon as CSS custom property */ +/* External link icon variables */ @theme { - --external-link-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); + --icon-external-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); } /* Link underlines in documentation */ @@ -50,7 +51,7 @@ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( :has(img) ) { padding-right: 1.1em; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-external); background-repeat: no-repeat; background-size: 0.9em; background-position: center right; @@ -65,21 +66,14 @@ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( [data-external-link]:not(.fd-card):not([data-card]):not([data-no-arrow]):not( :has(img) ) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-external-dark); } /* Sidebar & Nav: Automagic icons next to text for flex containers */ [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( :has(> svg:only-child) - ) { - background-image: none !important; - padding-right: 0 !important; - display: flex; - align-items: center; - gap: 0 !important; -} - + ), #nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( :has(> svg:only-child) @@ -95,6 +89,14 @@ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( gap: 0 !important; } +/* Sidebar specifically needs full flex for better link hit-areas */ +[data-radix-scroll-area-viewport] + a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( + :has(> svg:only-child) + ) { + display: flex; +} + [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( :has(> svg:only-child) @@ -111,7 +113,7 @@ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( width: 0.9em; height: 0.9em; margin-left: 0.1em; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-external); background-size: contain; background-repeat: no-repeat; background-position: center; @@ -134,7 +136,7 @@ a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not( a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not( :has(> svg:only-child) )::after { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-external-dark); } button[data-search-full] {