Skip to content

Commit ac6cd2e

Browse files
jake8655jake8655
authored
feat: statically generate the entire website (#11)
Fix various issues and a11y problems
1 parent 6db08fe commit ac6cd2e

18 files changed

Lines changed: 339 additions & 303 deletions

‎biome.jsonc‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
"clientKind": "git",
66
"useIgnoreFile": true
77
},
8-
"files": { "ignoreUnknown": false, "includes": ["**"] },
8+
"files": {
9+
"ignoreUnknown": true,
10+
"includes": ["src/**/*.{ts,tsx}"],
11+
"experimentalScannerIgnores": ["node_modules", ".next"]
12+
},
913
"formatter": { "enabled": true },
1014
"assist": { "actions": { "source": { "organizeImports": "on" } } },
1115
"linter": {

‎bun.lock‎

Lines changed: 72 additions & 75 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎next.config.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,24 @@ import createNextIntlPlugin from "next-intl/plugin";
66
* for Docker builds.
77
*/
88
import "@/env";
9+
import { routing } from "@/i18n/routing";
910

1011
const nextConfig: NextConfig = {
1112
reactStrictMode: true,
1213
experimental: {
1314
reactCompiler: true,
14-
ppr: true,
1515
},
1616
typescript: {
1717
ignoreBuildErrors: true,
1818
},
19+
20+
async redirects() {
21+
return [...routing.locales.map(locale => ({
22+
source: `/${locale}/playground`,
23+
destination: `/${locale}/playground/bubble`,
24+
permanent: true,
25+
}))]
26+
}
1927
};
2028

2129
const withNextIntl = createNextIntlPlugin();

‎package.json‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,36 +13,33 @@
1313
"typecheck": "tsc --noEmit"
1414
},
1515
"dependencies": {
16-
"@icons-pack/react-simple-icons": "^13.3.0",
16+
"@icons-pack/react-simple-icons": "^13.4.0",
1717
"@radix-ui/react-select": "^2.2.5",
1818
"@radix-ui/react-slider": "^1.3.5",
1919
"@radix-ui/react-slot": "^1.2.3",
2020
"@t3-oss/env-nextjs": "^0.13.8",
21-
"@tanstack/react-query": "^5.81.5",
22-
"@tanstack/react-query-devtools": "^5.81.5",
2321
"class-variance-authority": "^0.7.1",
2422
"clsx": "^2.1.1",
2523
"d3": "^7.9.0",
2624
"hast-util-to-jsx-runtime": "^2.3.6",
2725
"lucide-react": "^0.525.0",
28-
"motion": "^12.23.0",
29-
"next": "15.4.0-canary.111",
26+
"motion": "^12.23.3",
27+
"next": "^15.3.5",
3028
"next-intl": "^4.3.4",
3129
"nuqs": "^2.4.3",
3230
"react": "^19.1.0",
3331
"react-dom": "^19.1.0",
3432
"react-use-measure": "^2.1.7",
35-
"server-only": "^0.0.1",
3633
"shiki": "^3.7.0",
3734
"tailwind-merge": "^3.3.1",
3835
"tw-animate-css": "^1.3.5",
39-
"zod": "^3.25.71"
36+
"zod": "^4.0.5"
4037
},
4138
"devDependencies": {
42-
"@biomejs/biome": "^2.0.6",
39+
"@biomejs/biome": "2.0.0",
4340
"@tailwindcss/postcss": "^4.1.11",
4441
"@types/d3": "^7.4.3",
45-
"@types/node": "^24.0.10",
42+
"@types/node": "^24.0.13",
4643
"@types/react": "^19.1.8",
4744
"@types/react-dom": "^19.1.6",
4845
"babel-plugin-react-compiler": "^19.1.0-rc.2",

‎src/app/[locale]/layout.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import type { Metadata } from "next";
12
import { Geist, Geist_Mono } from "next/font/google";
2-
import { notFound } from "next/navigation";
3-
import { hasLocale, type Locale, NextIntlClientProvider } from "next-intl";
3+
import { type Locale, NextIntlClientProvider } from "next-intl";
44
import { getTranslations, setRequestLocale } from "next-intl/server";
5-
import { routing } from "@/i18n/routing";
6-
import "./globals.css";
75
import Footer from "@/components/footer";
86
import Navigation from "@/components/navigation";
9-
import Providers from "@/components/providers";
7+
import { routing } from "@/i18n/routing";
8+
import "@/app/globals.css";
9+
import { NuqsAdapter } from "nuqs/adapters/next/app";
1010

1111
const geistSans = Geist({
1212
variable: "--font-geist-sans",
@@ -18,6 +18,7 @@ const geistMono = Geist_Mono({
1818
subsets: ["latin"],
1919
});
2020

21+
export const dynamicParams = false;
2122
export function generateStaticParams() {
2223
return routing.locales.map((locale) => ({ locale }));
2324
}
@@ -26,7 +27,7 @@ export async function generateMetadata({
2627
params,
2728
}: {
2829
params: Promise<{ locale: Locale }>;
29-
}) {
30+
}): Promise<Metadata> {
3031
const { locale } = await params;
3132
const t = await getTranslations({ locale, namespace: "metadata" });
3233

@@ -44,7 +45,6 @@ export default async function LocaleLayout({
4445
params: Promise<{ locale: Locale }>;
4546
}) {
4647
const { locale } = await params;
47-
if (!hasLocale(routing.locales, locale)) notFound();
4848

4949
// Enable static rendering
5050
setRequestLocale(locale);
@@ -54,13 +54,13 @@ export default async function LocaleLayout({
5454
<body
5555
className={`${geistSans.variable} ${geistMono.variable} dark font-sans antialiased`}
5656
>
57-
<Providers>
57+
<NuqsAdapter>
5858
<NextIntlClientProvider>
5959
<Navigation />
6060
{children}
6161
<Footer />
6262
</NextIntlClientProvider>
63-
</Providers>
63+
</NuqsAdapter>
6464
</body>
6565
</html>
6666
);

‎src/app/[locale]/page.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {
99
Split,
1010
} from "lucide-react";
1111
import { motion } from "motion/react";
12-
import Link from "next/link";
1312
import { useTranslations } from "next-intl";
1413
import { BubbleBackground } from "@/components/animate-ui/bubble-background";
1514
import { GradientText } from "@/components/animate-ui/gradient-text";
1615
import { RippleButton } from "@/components/animate-ui/ripple-button";
16+
import { Link } from "@/i18n/navigation";
1717

1818
export default function HomePage() {
1919
const t = useTranslations("home");
@@ -166,31 +166,31 @@ export default function HomePage() {
166166
<BarChart3 className="h-10 w-10 transition-transform duration-300 group-hover:scale-110" />
167167
),
168168
description: t("algorithms.bubble-sort.description"),
169-
queryParam: "bubble",
169+
path: "bubble",
170170
},
171171
{
172172
name: t("algorithms.selection-sort.title"),
173173
icon: (
174174
<SortAsc className="h-10 w-10 transition-transform duration-300 group-hover:scale-110" />
175175
),
176176
description: t("algorithms.selection-sort.description"),
177-
queryParam: "selection",
177+
path: "selection",
178178
},
179179
{
180180
name: t("algorithms.insertion-sort.title"),
181181
icon: (
182182
<Shuffle className="h-10 w-10 transition-transform duration-300 group-hover:scale-110" />
183183
),
184184
description: t("algorithms.insertion-sort.description"),
185-
queryParam: "insertion",
185+
path: "insertion",
186186
},
187187
{
188188
name: t("algorithms.quick-sort.title"),
189189
icon: (
190190
<Split className="h-10 w-10 transition-transform duration-300 group-hover:scale-110" />
191191
),
192192
description: t("algorithms.quick-sort.description"),
193-
queryParam: "quicksort",
193+
path: "quicksort",
194194
},
195195
].map((algorithm, index) => (
196196
<motion.div
@@ -202,8 +202,7 @@ export default function HomePage() {
202202
>
203203
<Link
204204
href={{
205-
pathname: "/playground",
206-
query: { algorithm: algorithm.queryParam },
205+
pathname: `/playground/${algorithm.path}`,
207206
}}
208207
className="block"
209208
>

‎src/app/[locale]/playground/[algorithm]/page.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { HexagonBackground } from "@/components/animate-ui/hexagon-background";
2+
import PlaygroundState from "@/components/playground-state";
3+
import { highlight } from "@/lib/highlight";
4+
import { ALGORITHMS, type Algorithm, getAlgorithmCode } from "@/lib/utils";
5+
6+
export const dynamicParams = false;
7+
export function generateStaticParams() {
8+
return ALGORITHMS.map((algorithm) => ({ algorithm }));
9+
}
10+
11+
export default async function Playground({
12+
params,
13+
}: {
14+
params: Promise<{ algorithm: Algorithm }>;
15+
}) {
16+
const { algorithm } = (await params) as { algorithm: Algorithm };
17+
18+
const highlightedAlgorithmCode = await highlight(
19+
getAlgorithmCode(algorithm),
20+
"ts",
21+
);
22+
23+
return (
24+
<div className="relative flex items-center justify-center">
25+
<HexagonBackground className="absolute inset-0 z-0" />
26+
<PlaygroundState
27+
algorithm={algorithm}
28+
highlightedAlgorithmCode={highlightedAlgorithmCode}
29+
/>
30+
</div>
31+
);
32+
}

‎src/app/[locale]/playground/page.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

src/app/[locale]/globals.css renamed to src/app/globals.css

File renamed without changes.

‎src/components/algorithm-explanation.tsx‎

Lines changed: 34 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
"use client";
22

3-
import { useQuery } from "@tanstack/react-query";
4-
import { Check, Copy, Loader2 } from "lucide-react";
3+
import { Check, Copy } from "lucide-react";
54
import { useTranslations } from "next-intl";
6-
import { useState } from "react";
5+
import { type JSX, useState } from "react";
76
import {
87
Tabs,
98
TabsContent,
@@ -18,33 +17,26 @@ import {
1817
CardHeader,
1918
CardTitle,
2019
} from "@/components/ui/card";
21-
import {
22-
type Algorithm,
23-
cn,
24-
codeHighlightOptions,
25-
getAlgorithmCode,
26-
} from "@/lib/utils";
20+
import { type Algorithm, cn, getAlgorithmCode } from "@/lib/utils";
2721
import { RippleButton } from "./animate-ui/ripple-button";
2822

2923
interface AlgorithmExplanationProps {
3024
algorithm: Algorithm;
3125
iterations: number;
3226
swaps: number;
27+
highlightedAlgorithmCode: JSX.Element;
3328
className?: string;
3429
}
3530

3631
export default function AlgorithmExplanation({
3732
algorithm,
3833
iterations,
3934
swaps,
35+
highlightedAlgorithmCode,
4036
className,
4137
}: AlgorithmExplanationProps) {
4238
const t = useTranslations("algorithm-explanation");
4339

44-
const { data, isPending, isError } = useQuery(
45-
codeHighlightOptions(algorithm),
46-
);
47-
4840
const [copied, setCopied] = useState<string | null>(null);
4941

5042
const copyCode = (code: string) => {
@@ -260,47 +252,35 @@ export default function AlgorithmExplanation({
260252
</TabsContent>
261253

262254
<TabsContent value="code" className="group relative mt-4">
263-
{isPending ? (
264-
<p className="text-muted-foreground text-xs">
265-
<Loader2 className="mx-auto animate-spin text-primary" />
266-
</p>
267-
) : isError ? (
268-
<p className="text-muted-foreground text-xs">
269-
There was an error loading the code.
270-
</p>
271-
) : (
272-
data
273-
)}
274-
{data && (
275-
<RippleButton
276-
onClick={() => copyCode(getAlgorithmCode(algorithm))}
277-
variant="ghost"
278-
size="sm"
279-
className={cn(
280-
"absolute top-1 right-1 flex size-8 scale-0 items-center justify-center bg-background/60 p-0 transition-all duration-200 ease-snappy touch-only:group-focus-within:scale-100 touch-only:group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",
281-
copied === getAlgorithmCode(algorithm) &&
282-
"scale-100 opacity-100",
283-
)}
284-
type="button"
285-
>
286-
<div className="relative size-4">
287-
<Check
288-
className={cn(
289-
"absolute inset-0 scale-0 text-primary opacity-0 transition-all duration-200 ease-snappy",
290-
copied === getAlgorithmCode(algorithm) &&
291-
"scale-100 opacity-100",
292-
)}
293-
/>
294-
<Copy
295-
className={cn(
296-
"absolute inset-0 scale-100 opacity-100 transition-all duration-200 ease-snappy",
297-
copied === getAlgorithmCode(algorithm) &&
298-
"scale-0 opacity-0",
299-
)}
300-
/>
301-
</div>
302-
</RippleButton>
303-
)}
255+
{highlightedAlgorithmCode}
256+
<RippleButton
257+
onClick={() => copyCode(getAlgorithmCode(algorithm))}
258+
variant="ghost"
259+
size="sm"
260+
className={cn(
261+
"absolute top-1 right-1 flex size-8 scale-0 items-center justify-center bg-background/60 p-0 transition-all duration-200 ease-snappy focus-visible:scale-100 focus-visible:opacity-100 touch-only:group-focus-within:scale-100 touch-only:group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",
262+
copied === getAlgorithmCode(algorithm) &&
263+
"scale-100 opacity-100",
264+
)}
265+
type="button"
266+
>
267+
<div className="relative size-4">
268+
<Check
269+
className={cn(
270+
"absolute inset-0 scale-0 text-primary opacity-0 transition-all duration-200 ease-snappy",
271+
copied === getAlgorithmCode(algorithm) &&
272+
"scale-100 opacity-100",
273+
)}
274+
/>
275+
<Copy
276+
className={cn(
277+
"absolute inset-0 scale-100 opacity-100 transition-all duration-200 ease-snappy",
278+
copied === getAlgorithmCode(algorithm) &&
279+
"scale-0 opacity-0",
280+
)}
281+
/>
282+
</div>
283+
</RippleButton>
304284
</TabsContent>
305285
</TabsContents>
306286
</Tabs>

0 commit comments

Comments
 (0)