full rework in vite

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+# Build and deploy the Vite site to GitHub Pages
+name: Deploy to Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/nextjs.yml

@@ -1,93 +0,0 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
-name: Deploy Next.js site to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ["main"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine package manager"
-            exit 1
-          fi
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-        with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
-          static_site_generator: next
-      - name: Restore cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            .next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
-      - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
-      - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./out
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

.gitignore

@@ -9,12 +9,8 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -28,9 +24,5 @@ yarn-error.log*
 # local env files
 .env*.local
 
-# vercel
-.vercel
-
 # typescript
 *.tsbuildinfo
-next-env.d.ts

README.md

@@ -1,36 +1,24 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+A quick, code-first Java tutorial site, built with [Vite](https://vitejs.dev/) + React.
 
 ## Getting Started
 
-First, run the development server:
-
 ```bash
+npm install
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:5173](http://localhost:5173) to see it.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+Content lives in `src/data/java_tutorial.json` — each entry in `sections` becomes a topic page at `/topic/:id`. Edit that file to add or change tutorial content.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Build
 
-## Learn More
+```bash
+npm run build
+```
 
-To learn more about Next.js, take a look at the following resources:
+Outputs a static site to `dist/`, deployed automatically to GitHub Pages on push to `main` via `.github/workflows/deploy.yml`.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## License
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+MIT

app/_app.tsx

@@ -1,16 +0,0 @@
-import { AppProps } from 'next/app'
-import Head from 'next/head'
-import '../globals.css'
-
-function MyApp({ Component, pageProps }: AppProps) {
-    return (
-        <>
-            <Head>
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-            </Head>
-            <Component {...pageProps} />
-        </>
-    )
-}
-
-export default MyApp

app/layout.tsx

@@ -1,59 +0,0 @@
-"use client";
-import { useState, useEffect } from "react"
-import Navigation from "../components/navigation"
-import Footer from "../components/footer"
-import "./globals.css"
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-    const [showButton, setShowButton] = useState(false)
-
-    useEffect(() => {
-        const handleScroll = () => {
-            if (window.scrollY > 300) {
-                setShowButton(true)
-            } else {
-                setShowButton(false)
-            }
-        }
-
-        window.addEventListener("scroll", handleScroll)
-
-        return () => {
-            window.removeEventListener("scroll", handleScroll)
-        }
-    }, [])
-
-    const scrollToTop = () => {
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-        })
-    }
-
-    return (
-        <html lang="en" className=" min-w-min">
-        <head>
-            <style jsx global>{`
-                    html {
-                        scroll-behavior: smooth;
-                    }
-                `}</style>
-        </head>
-        <body className="flex flex-col min-h-[100dvh] scroll-smooth">
-        <Navigation />
-        <main className="flex-1">
-            {children}
-        </main>
-        {showButton && (
-            <button
-                onClick={scrollToTop}
-                className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary-dark transition"
-            >
-                ↑ Top
-            </button>
-        )}
-        <Footer />
-        </body>
-        </html>
-    )
-}

app/page.tsx

@@ -1,53 +0,0 @@
-import JavaText from "./java_tutorial.json"
-import {
-    Carousel,
-    CarouselContent,
-    CarouselItem,
-    CarouselNext,
-    CarouselPrevious,
-} from "@/components/ui/carousel"
-import {Cabin} from "next/dist/compiled/@next/font/dist/google";
-
-
-export default function MainPage() {
-    const JavaContent = JavaText
-    return (
-        <>
-            {JavaContent.sections.map((section, index) => (
-                <section key={index} id={section.id} className={`py-12 md:py-24 w-full ${index % 2 === 0 ? 'bg-muted' : ''}`}>
-                    <div className="container mx-auto px-4 md:px-6">
-                        <h2 className="text-3xl font-bold mb-8">{section.title}</h2>
-                        <p className="text-lg mb-8">{section.description}</p>
-                        <div className="grid md:grid-cols-2 gap-16">
-                            {section.items.map((item, itemIndex) => (
-                                <div key={itemIndex}>
-                                    <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
-                                    <p className="text-muted-foreground mb-6">{item.description}</p>
-                                    <div className="bg-background rounded-lg p-6 shadow-2xl my-4">
-                                        <Carousel className="max-w px-8">
-                                            <CarouselContent>
-                                                <CarouselItem>
-                                                    <pre className="text-sm font-mono">
-                                                        <code className="text-pretty">{item.code}</code>
-                                                    </pre>
-                                                </CarouselItem>
-                                                <CarouselItem>
-                                                    <pre className="text-sm font-mono">
-                                                        <code className="text-pretty">{item.result}</code>
-                                                    </pre>
-                                                </CarouselItem>
-                                            </CarouselContent>
-                                            <CarouselPrevious className="mx-6"/>
-                                            <CarouselNext className="mx-6"/>
-                                        </Carousel>
-                                    </div>
-                                    <p className="text-pretty">{item.explanation}</p>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </section>
-            ))}
-        </>
-    )
-}

components.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "default",
-  "rsc": true,
+  "rsc": false,
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "app/globals.css",
+    "css": "src/index.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Dot Java</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

next.config.mjs

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;

package.json

@@ -2,26 +2,24 @@
   "name": "dotjava",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.0.20",
     "@monaco-editor/react": "^4.6.0",
-    "@nextui-org/divider": "^2.0.28",
     "@radix-ui/react-dialog": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.1.5",
-    "gh-pages": "^6.1.1",
     "lucide-react": "^0.395.0",
-    "next": "16.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-router-dom": "^6.26.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "nanoid": ">=3.3.18",
@@ -32,11 +30,11 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "16.0.10",
+    "@vitejs/plugin-react": "^4.3.1",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
+    "vite": "^5.4.0",
     "nanoid": ">=3.3.18",
     "minimatch": ">=3.1.4",
     "picomatch": ">=2.3.2"

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

src/App.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react"
+import { Route, Routes } from "react-router-dom"
+import Navigation from "@/components/navigation"
+import Footer from "@/components/footer"
+import Home from "@/pages/Home"
+import Topic from "@/pages/Topic"
+
+export default function App() {
+    const [showButton, setShowButton] = useState(false)
+
+    useEffect(() => {
+        const handleScroll = () => setShowButton(window.scrollY > 300)
+        window.addEventListener("scroll", handleScroll)
+        return () => window.removeEventListener("scroll", handleScroll)
+    }, [])
+
+    const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" })
+
+    return (
+        <div className="flex flex-col min-h-[100dvh]">
+            <Navigation />
+            <main className="flex-1">
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/topic/:id" element={<Topic />} />
+                </Routes>
+            </main>
+            {showButton && (
+                <button
+                    onClick={scrollToTop}
+                    className="fixed bottom-10 right-10 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary-dark transition"
+                >
+                    ↑ Top
+                </button>
+            )}
+            <Footer />
+        </div>
+    )
+}

src/components/TopicContent.tsx

@@ -0,0 +1,46 @@
+import {
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselNext,
+    CarouselPrevious,
+} from "@/components/ui/carousel"
+import type { Topic } from "@/data/topics"
+
+export default function TopicContent({ topic }: { topic: Topic }) {
+    return (
+        <section className="py-12 md:py-24 w-full">
+            <div className="container mx-auto px-4 md:px-6">
+                <h2 className="text-3xl font-bold mb-8">{topic.title}</h2>
+                <p className="text-lg mb-8">{topic.description}</p>
+                <div className="grid md:grid-cols-2 gap-16">
+                    {topic.items.map((item, itemIndex) => (
+                        <div key={itemIndex}>
+                            <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
+                            <p className="text-muted-foreground mb-6">{item.description}</p>
+                            <div className="bg-background rounded-lg p-6 shadow-2xl my-4">
+                                <Carousel className="max-w px-8">
+                                    <CarouselContent>
+                                        <CarouselItem>
+                                            <pre className="text-sm font-mono">
+                                                <code className="text-pretty">{item.code}</code>
+                                            </pre>
+                                        </CarouselItem>
+                                        <CarouselItem>
+                                            <pre className="text-sm font-mono">
+                                                <code className="text-pretty">{item.result}</code>
+                                            </pre>
+                                        </CarouselItem>
+                                    </CarouselContent>
+                                    <CarouselPrevious className="mx-6"/>
+                                    <CarouselNext className="mx-6"/>
+                                </Carousel>
+                            </div>
+                            <p className="text-pretty">{item.explanation}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

src/components/navigation.tsx

@@ -1,19 +1,19 @@
-import Link from "next/link";
-import JavaContent from "../app/java_tutorial.json";
+import { Link } from "react-router-dom";
+import { topics } from "@/data/topics";
 import { JSX, SVGProps } from "react";
 
 export default function Navigation() {
     return (
         <header className="bg-primary text-primary-foreground py-4 px-6 shadow">
             <div className="container mx-auto flex items-center justify-between">
-                <Link href="/" className="flex items-center gap-2 font-bold text-xl" prefetch={false}>
+                <Link to="/" className="flex items-center gap-2 font-bold text-xl">
                     <CodeIcon className="w-6 h-6"/>
                     Dot Java
                 </Link>
                 <nav className="hidden md:flex items-center gap-6">
-                    {JavaContent.sections.map((section, index) => (
-                        <Link key={index} href={`#${section.id}`} className="hover:underline" prefetch={false}>
-                            {section.title}
+                    {topics.map((topic) => (
+                        <Link key={topic.id} to={`/topic/${topic.id}`} className="hover:underline">
+                            {topic.title}
                         </Link>
                     ))}
                 </nav>

src/data/java_tutorial.json

@@ -195,6 +195,41 @@
             "result": "Output:\nJohn is 25 years old."
         }
       ]
+    },
+    {
+      "id": "exceptions",
+      "title": "Exception Handling",
+      "description": "Learn how Java handles runtime errors using try-catch blocks, the finally clause, custom exceptions, and try-with-resources.",
+      "items": [
+        {
+          "title": "Try-Catch",
+          "description": "The try-catch block lets you handle exceptions that occur during the execution of a block of code.",
+          "code": "try {\n  int result = 10 / 0;\n} catch (ArithmeticException e) {\n  System.out.println(\"Cannot divide by zero: \" + e.getMessage());\n}",
+          "explanation": "This example wraps risky code in a try block. When the division by zero throws an ArithmeticException, control jumps to the matching catch block instead of crashing the program.",
+          "result": "Output:\nCannot divide by zero: / by zero"
+        },
+        {
+          "title": "Finally",
+          "description": "The finally block always runs after try/catch, whether or not an exception was thrown, making it ideal for cleanup.",
+          "code": "FileWriter writer = null;\ntry {\n  writer = new FileWriter(\"log.txt\");\n  writer.write(\"entry\");\n} catch (IOException e) {\n  System.out.println(\"Write failed.\");\n} finally {\n  if (writer != null) {\n    try { writer.close(); } catch (IOException ignored) {}\n  }\n}",
+          "explanation": "The finally block closes the file resource regardless of whether the write succeeded, preventing resource leaks even when an exception occurs.",
+          "result": "Output:\n(file is always closed, even on failure)"
+        },
+        {
+          "title": "Custom Exceptions",
+          "description": "You can define your own exception types by extending Exception or RuntimeException to represent domain-specific errors.",
+          "code": "class InsufficientFundsException extends Exception {\n  public InsufficientFundsException(String message) {\n    super(message);\n  }\n}\n\nvoid withdraw(double balance, double amount) throws InsufficientFundsException {\n  if (amount > balance) {\n    throw new InsufficientFundsException(\"Not enough funds.\");\n  }\n}",
+          "explanation": "InsufficientFundsException extends Exception and carries a custom message. Callers must handle or declare it, making the failure mode explicit in the method signature.",
+          "result": "Output:\nInsufficientFundsException: Not enough funds."
+        },
+        {
+          "title": "Try-With-Resources",
+          "description": "Try-with-resources automatically closes any resource that implements AutoCloseable when the block finishes.",
+          "code": "try (BufferedReader reader = new BufferedReader(new FileReader(\"input.txt\"))) {\n  String line = reader.readLine();\n  System.out.println(line);\n} catch (IOException e) {\n  System.out.println(\"Could not read file.\");\n}",
+          "explanation": "The reader is declared inside the parentheses of the try statement, so Java closes it automatically when the block exits, even if an exception is thrown, without a manual finally block.",
+          "result": "Output:\n(first line of input.txt, resource closed automatically)"
+        }
+      ]
     }
   ]
 }

src/data/topics.ts

@@ -0,0 +1,22 @@
+import raw from "./java_tutorial.json"
+
+export type TopicItem = {
+    title: string
+    description: string
+    code: string
+    explanation: string
+    result: string
+}
+
+export type Topic = {
+    id: string
+    title: string
+    description: string
+    items: TopicItem[]
+}
+
+export const topics: Topic[] = raw.sections
+
+export function getTopic(id: string | undefined): Topic | undefined {
+    return topics.find((topic) => topic.id === id)
+}

src/index.css

@@ -70,6 +70,9 @@
     * {
       @apply border-border;
     }
+    html {
+      scroll-behavior: smooth;
+    }
     body {
       @apply bg-background text-foreground;
       margin: 0;

src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { HashRouter } from "react-router-dom"
+import App from "./App"
+import "./index.css"
+
+createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+        <HashRouter>
+            <App />
+        </HashRouter>
+    </StrictMode>,
+)

src/pages/Home.tsx

@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
+import { topics } from "@/data/topics"
+
+export default function Home() {
+    return (
+        <section className="py-12 md:py-24 w-full">
+            <div className="container mx-auto px-4 md:px-6">
+                <h1 className="text-4xl font-bold mb-4">Dot Java</h1>
+                <p className="text-lg text-muted-foreground mb-12">
+                    A quick, code-first tour of the Java language. Pick a topic to get started.
+                </p>
+                <div className="grid md:grid-cols-2 gap-6">
+                    {topics.map((topic) => (
+                        <Link key={topic.id} to={`/topic/${topic.id}`}>
+                            <Card className="h-full transition-colors hover:bg-accent">
+                                <CardHeader>
+                                    <CardTitle>{topic.title}</CardTitle>
+                                    <CardDescription>{topic.description}</CardDescription>
+                                </CardHeader>
+                                <CardContent className="text-sm text-muted-foreground">
+                                    {topic.items.length} topics
+                                </CardContent>
+                            </Card>
+                        </Link>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}

src/pages/Topic.tsx

@@ -0,0 +1,19 @@
+import { Link, useParams } from "react-router-dom"
+import TopicContent from "@/components/TopicContent"
+import { getTopic } from "@/data/topics"
+
+export default function Topic() {
+    const { id } = useParams<{ id: string }>()
+    const topic = getTopic(id)
+
+    if (!topic) {
+        return (
+            <section className="py-24 w-full text-center">
+                <h1 className="text-2xl font-bold mb-4">Topic not found</h1>
+                <Link to="/" className="underline">Back to all topics</Link>
+            </section>
+        )
+    }
+
+    return <TopicContent topic={topic} />
+}

tailwind.config.ts

@@ -3,9 +3,7 @@ import type { Config } from "tailwindcss"
 const config = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
+    './index.html',
     './src/**/*.{ts,tsx}',
   ],
   prefix: "",

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -10,17 +12,11 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
+    "jsx": "react-jsx",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["src", "vite.config.ts"],
   "exclude": ["node_modules"]
 }

vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import path from "node:path"
+
+export default defineConfig({
+    base: "/dotjava/",
+    plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+})