Add roadmap link to header and footer navigation

apps/www/app/(home)/layout.tsx

@@ -1,4 +1,3 @@
-import { SiGithub } from "@icons-pack/react-simple-icons";
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 import { baseOptions } from "~/app/layout.config";
@@ -14,12 +13,11 @@ export default function Layout({ children }: { children: ReactNode }) {
 					active: "none",
 				},
 				{
-					text: "GitHub",
-					url: "https://github.com/yamcodes/arkenv",
-					active: "none",
-					type: "icon",
-					icon: <SiGithub aria-label="GitHub" />,
+					text: "Roadmap",
+					url: "https://github.com/yamcodes/arkenv/issues/683",
+					external: true,
 				},
+				...(baseOptions.links ?? []),
 			]}
 		>
 			{children}

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,15 +13,6 @@ export default function Layout({ children }: { children: ReactNode }) {
 					banner: <InstallButton />,
 				}}
 				{...baseOptions}
-				links={[
-					{
-						text: "GitHub",
-						url: "https://github.com/yamcodes/arkenv",
-						active: "none",
-						type: "icon",
-						icon: <SiGithub aria-label="GitHub" />,
-					},
-				]}
 			>
 				{children}
 			</DocsLayout>

apps/www/app/globals.css

@@ -12,17 +12,18 @@
 @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 */
 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,37 +36,107 @@ 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-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)) {
+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)
+	) {
 	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;
 }
 
 .dark
-	a[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)) {
-	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");
+	[data-external-link]:not(.fd-card):not([data-card]):not([data-no-arrow]):not(
+		:has(img)
+	) {
+	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)
+	),
+#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;
+	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)
+	)::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: var(--icon-external);
+	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: var(--icon-external-dark);
 }
 
 button[data-search-full] {

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,13 @@ export const baseOptions: BaseLayoutProps = {
 	themeSwitch: {
 		component: <ThemeToggle key="theme-toggle" />,
 	},
+	links: [
+		{
+			text: "GitHub",
+			url: "https://github.com/yamcodes/arkenv",
+			active: "none",
+			type: "icon",
+			icon: <SiGithub aria-label="GitHub" />,
+		},
+	],
 };

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)"
 	]
 }