Skip to content

fix(docs): use router Link for landing nav to avoid full-page reload #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rqbazan merged 1 commit into from
May 21, 2026
Merged

fix(docs): use router Link for landing nav to avoid full-page reload #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions docsite/src/components/landing/close.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { GithubIcon } from "#src/components/github-icon.tsx";
import { LANDING_META } from "./data.ts";
Expand Down Expand Up @@ -33,8 +34,8 @@ export function Close() {
@max-[480px]/dirA:flex-col @max-[480px]/dirA:items-stretch @max-[480px]/dirA:gap-2.5
"
>
<a
href={LANDING_META.docsHref}
<Link
to={LANDING_META.docsHref}
className="
group inline-flex min-w-[168px] items-center justify-center gap-2.5
rounded-lg border border-landing-accent bg-landing-accent
Expand All @@ -44,7 +45,7 @@ export function Close() {
>
Read the docs
<ArrowRight size={16} className="transition-transform group-hover:translate-x-0.5" aria-hidden />
</a>
</Link>
<a
href={LANDING_META.githubUrl}
target="_blank"
Expand Down
2 changes: 1 addition & 1 deletion docsite/src/components/landing/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const LANDING_META = {
vlandUrl: "https://variable.land",
githubUrl: "https://github.com/variableland/env",
npmUrl: "https://www.npmjs.com/package/@vlandoss/env",
docsHref: "/docs",
docsHref: "/docs/" as string,
publishDate: "2026",
} as const;

Expand Down
7 changes: 4 additions & 3 deletions docsite/src/components/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Link } from "@tanstack/react-router";
import { ArrowRight, Check, Copy } from "lucide-react";
import { useState } from "react";
import { LANDING_META, RUNTIMES } from "./data.ts";
Expand Down Expand Up @@ -86,8 +87,8 @@ export function Hero({ snippets }: { snippets: Snippets }) {
@max-[760px]/dirA:flex-col @max-[760px]/dirA:items-stretch
"
>
<a
href={LANDING_META.docsHref}
<Link
to={LANDING_META.docsHref}
className="
group inline-flex items-center justify-center gap-2.5
rounded-lg border border-landing-accent bg-landing-accent
Expand All @@ -97,7 +98,7 @@ export function Hero({ snippets }: { snippets: Snippets }) {
>
Read the docs
<ArrowRight size={15} className="transition-transform group-hover:translate-x-0.5" aria-hidden />
</a>
</Link>
<button
type="button"
onClick={onCopy}
Expand Down
80 changes: 51 additions & 29 deletions docsite/src/components/landing/nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { Link } from "@tanstack/react-router";
import { Menu, X } from "lucide-react";
import { useState } from "react";
import { BrandMark } from "#src/components/brand-mark.tsx";
import { GithubIcon } from "#src/components/github-icon.tsx";
import { LANDING_META } from "./data.ts";

const LINKS = [
{ label: "Docs", href: "/docs" },
{ label: "API", href: "/docs/api-reference" },
{ label: "Guides", href: "/docs/guides" },
{ label: "Changelog", href: `${LANDING_META.githubUrl}/releases` },
type NavLink = { label: string; href: string; external?: boolean };

const LINKS: readonly NavLink[] = [
{ label: "Docs", href: "/docs/" },
{ label: "API", href: "/docs/api-reference/" },
{ label: "Guides", href: "/docs/guides/" },
{ label: "Changelog", href: `${LANDING_META.githubUrl}/releases`, external: true },
] as const;

export function LandingNav() {
Expand Down Expand Up @@ -50,21 +53,30 @@ export function LandingNav() {
@max-[480px]/dirA:hidden
"
>
{LINKS.map((link, i) => (
<a
key={link.label}
href={link.href}
data-nav-link
data-link-index={i}
className="
{LINKS.map((link, i) => {
const className = `
text-sm text-landing-dim no-underline transition-colors hover:text-landing-text
@max-[760px]/dirA:data-[link-index='2']:hidden
@max-[760px]/dirA:data-[link-index='3']:hidden
"
>
{link.label}
</a>
))}
`;
return link.external ? (
<a
key={link.label}
href={link.href}
target="_blank"
rel="noreferrer"
data-nav-link
data-link-index={i}
className={className}
>
{link.label}
</a>
) : (
<Link key={link.label} to={link.href} data-nav-link data-link-index={i} className={className}>
{link.label}
</Link>
);
})}
<a
href={LANDING_META.githubUrl}
target="_blank"
Expand Down Expand Up @@ -111,21 +123,31 @@ export function LandingNav() {
@max-[480px]/dirA:flex
"
>
{LINKS.map((link) => (
<a
key={link.label}
href={link.href}
onClick={() => setOpen(false)}
className="
{LINKS.map((link) => {
const className = `
flex items-center justify-between border-b border-landing-border
px-1 py-4 text-base tracking-[-0.005em] text-landing-text no-underline
last:border-b-0
"
>
<span>{link.label}</span>
<span className="text-sm text-landing-dim-2">→</span>
</a>
))}
`;
return link.external ? (
<a
key={link.label}
href={link.href}
target="_blank"
rel="noreferrer"
onClick={() => setOpen(false)}
className={className}
>
<span>{link.label}</span>
<span className="text-sm text-landing-dim-2">→</span>
</a>
) : (
<Link key={link.label} to={link.href} onClick={() => setOpen(false)} className={className}>
<span>{link.label}</span>
<span className="text-sm text-landing-dim-2">→</span>
</Link>
);
})}
<a
href={LANDING_META.githubUrl}
target="_blank"
Expand Down
Loading