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] {