TS7 upgrade + write to TS over JS

frontend/eslint.config.js

@@ -2,22 +2,22 @@ import js from "@eslint/js";
 import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
     globalIgnores(["dist"]),
+
     {
-        files: ["**/*.{js,jsx}"],
-        extends: [
-            js.configs.recommended,
-            reactHooks.configs.flat.recommended,
-            reactRefresh.configs.vite,
-        ],
+        files: ["**/*.{js,jsx,mjs}"],
+        extends: [js.configs.recommended, reactHooks.configs.flat.recommended],
         languageOptions: {
             ecmaVersion: 2020,
-            globals: globals.browser,
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
             parserOptions: {
-                ecmaVersion: "latest",
                 ecmaFeatures: { jsx: true },
                 sourceType: "module",
             },
@@ -26,4 +26,28 @@ export default defineConfig([
             "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
         },
     },
+
+    {
+        files: ["**/*.{ts,tsx}"],
+        extends: [
+            js.configs.recommended,
+            ...tseslint.configs.recommended,
+            reactHooks.configs.flat.recommended,
+            reactRefresh.configs.vite,
+        ],
+        languageOptions: {
+            globals: globals.browser,
+            parserOptions: {
+                ecmaFeatures: { jsx: true },
+                sourceType: "module",
+            },
+        },
+        rules: {
+            "no-unused-vars": "off",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                { varsIgnorePattern: "^[A-Z_]" },
+            ],
+        },
+    },
 ]);

frontend/package.json

@@ -7,6 +7,7 @@
         "dev": "vite",
         "build": "vite build",
         "lint": "eslint .",
+        "typecheck": "node_modules/typescript-7/bin/tsc --noEmit",
         "preview": "vite preview"
     },
     "dependencies": {
@@ -34,6 +35,9 @@
         "eslint-plugin-react-refresh": "^0.5.2",
         "globals": "^17.4.0",
         "prettier": "^3.8.3",
+        "typescript": "^6.0.3",
+        "typescript-7": "npm:typescript@^7.0.1-rc",
+        "typescript-eslint": "^8.61.1",
         "typescript-language-server": "^5.3.0",
         "vite": "^8.0.4",
         "vscode-langservers-extracted": "^4.10.0"

frontend/src/App.tsx

@@ -1,13 +1,14 @@
+import type { ReactElement } from "react";
 import "./App.css";
 
 import Layout from "./components/Layout";
 import Home from "./pages/Home";
 import Stream from "./pages/Stream";
 
-function App() {
+function App(): ReactElement {
     const path = window.location.pathname.toLowerCase();
 
-    let content = <Home />;
+    let content: ReactElement = <Home />;
     if (path === "/stream") {
         content = <Stream />;
     }

frontend/src/components/Header.tsx

@@ -1,9 +1,23 @@
 import Aku from "../assets/images/aku.png";
 
-export default function Header({ theme }) {
+interface NavItem {
+    label: string;
+    url: string;
+}
+
+interface HeaderTheme {
+    theme: string;
+    toggleTheme: () => void;
+}
+
+interface HeaderProps {
+    theme: HeaderTheme;
+}
+
+export default function Header({ theme }: HeaderProps) {
     const { theme: currentTheme, toggleTheme } = theme;
 
-    const navItems = [
+    const navItems: NavItem[] = [
         { label: "Nextcloud", url: "https://nextcloud.aramjonghu.nl" },
         { label: "Navidrome", url: "https://music.aramjonghu.nl" },
         { label: "Forgejo Git", url: "https://git.aramjonghu.nl" },

frontend/src/components/Layout.tsx

@@ -1,8 +1,13 @@
+import type { ReactNode } from "react";
 import Footer from "./Footer";
 import Header from "./Header";
 import { useTheme } from "../hooks/useTheme";
 
-export default function Layout({ children }) {
+interface LayoutProps {
+    children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
     const theme = useTheme();
 
     return (

frontend/src/components/ProjectsReadme.jsx

@@ -1,215 +0,0 @@
-import { useEffect, useState, useMemo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
-import rehypeSanitize from "rehype-sanitize";
-
-const toRawUrl = (repoUrl) => {
-    if (!repoUrl) return repoUrl;
-
-    if (
-        repoUrl.includes("github.com") &&
-        !repoUrl.includes("raw.githubusercontent.com")
-    ) {
-        return repoUrl
-            .replace("github.com", "raw.githubusercontent.com")
-            .replace("/blob/", "/");
-    }
-
-    if (repoUrl.includes("/src/branch/")) {
-        return repoUrl.replace("/src/branch/", "/raw/branch/");
-    }
-
-    return repoUrl;
-};
-
-const getRepoRawBase = (repoUrl) => {
-    const rawUrl = toRawUrl(repoUrl);
-    if (!rawUrl) return null;
-
-    try {
-        const url = new URL(rawUrl);
-        const parts = url.pathname.split("/").filter(Boolean);
-
-        if (url.hostname.includes("raw.githubusercontent.com")) {
-            return `${url.origin}/${parts.slice(0, 3).join("/")}`;
-        }
-
-        const rawIndex = parts.indexOf("raw");
-        if (rawIndex !== -1) {
-            return `${url.origin}/${parts.slice(0, rawIndex + 3).join("/")}`;
-        }
-
-        return null;
-    } catch {
-        return null;
-    }
-};
-
-const resolveImageSrc = (src, base) => {
-    if (!src) return src;
-    if (src.startsWith("http")) return src;
-    if (!base) return src;
-
-    const clean = src.replace(/^.\//, "");
-    if (src.startsWith("/")) return base + src;
-    return `${base}/${clean}`;
-};
-
-const fetchREADME = async (repoUrl) => {
-    try {
-        const rawUrl = toRawUrl(repoUrl);
-        const response = await fetch(rawUrl);
-
-        if (!response.ok) {
-            throw new Error("Failed to fetch README");
-        }
-
-        return await response.text();
-    } catch (error) {
-        console.error(error);
-        return "Error fetching README. Make sure the URL points to a raw markdown file.";
-    }
-};
-
-export default function ProjectsReadme({ repoUrl }) {
-    const [readmeContent, setReadmeContent] = useState("");
-    const [isLoading, setIsLoading] = useState(true);
-
-    const base = useMemo(() => getRepoRawBase(repoUrl), [repoUrl]);
-
-    useEffect(() => {
-        fetchREADME(repoUrl).then((content) => {
-            setReadmeContent(content);
-            setIsLoading(false);
-        });
-    }, [repoUrl]);
-
-    return (
-        <div className="w-full max-w-4xl mx-auto p-4 md:p-8 bg-ctp-mantle rounded-xl shadow-sm border border-ctp-text">
-            {isLoading ? (
-                <div className="flex flex-col gap-3 animate-pulse w-full">
-                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
-                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
-                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
-                </div>
-            ) : (
-                <div className="text-ctp-text leading-relaxed prose prose-base md:prose-lg dark:prose-invert max-w-none">
-                    <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
-                        components={{
-                            code({ className, children, ...props }) {
-                                const isBlock =
-                                    className ||
-                                    (typeof children === "string" &&
-                                        children.includes("\n"));
-
-                                if (isBlock) {
-                                    return (
-                                        <code
-                                            className={`${className || ""} text-sm block overflow-x-auto`}
-                                            {...props}
-                                        >
-                                            {children}
-                                        </code>
-                                    );
-                                }
-
-                                return (
-                                    <code
-                                        className="bg-ctp-mantle px-1.5 py-0.5 rounded text-sm font-mono"
-                                        {...props}
-                                    >
-                                        {children}
-                                    </code>
-                                );
-                            },
-
-                            pre({ children, ...props }) {
-                                return (
-                                    <pre
-                                        className="bg-ctp-mantle p-4 rounded-lg overflow-x-auto text-sm my-4"
-                                        {...props}
-                                    >
-                                        {children}
-                                    </pre>
-                                );
-                            },
-
-                            h1: ({ children }) => (
-                                <h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
-                                    {children}
-                                </h1>
-                            ),
-
-                            h2: ({ children }) => (
-                                <h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
-                                    {children}
-                                </h2>
-                            ),
-
-                            h3: ({ children }) => (
-                                <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3">
-                                    {children}
-                                </h3>
-                            ),
-
-                            p: ({ children }) => (
-                                <p className="mb-4 text-ctp-text">{children}</p>
-                            ),
-
-                            ul: ({ children }) => (
-                                <ul className="list-disc pl-6 mb-4">
-                                    {children}
-                                </ul>
-                            ),
-
-                            ol: ({ children }) => (
-                                <ol className="list-decimal pl-6 mb-4">
-                                    {children}
-                                </ol>
-                            ),
-
-                            li: ({ children }) => (
-                                <li className="mb-1">{children}</li>
-                            ),
-
-                            a: ({ children, href }) => (
-                                <a
-                                    href={href}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    className="hover:underline text-ctp-green"
-                                >
-                                    {children}
-                                </a>
-                            ),
-
-                            blockquote: ({ children }) => (
-                                <blockquote className="border-l-4 border-ctp-text pl-4 py-1 mb-4 bg-ctp-mantle rounded-r-lg">
-                                    {children}
-                                </blockquote>
-                            ),
-
-                            img: ({ src, alt }) => {
-                                const resolved = resolveImageSrc(src, base);
-
-                                return (
-                                    <img
-                                        src={resolved}
-                                        alt={alt}
-                                        className="max-w-full h-auto rounded-md my-4 shadow-sm border-2 border-ctp-text"
-                                        loading="lazy"
-                                    />
-                                );
-                            },
-                        }}
-                    >
-                        {readmeContent}
-                    </ReactMarkdown>
-                </div>
-            )}
-        </div>
-    );
-}

frontend/src/components/ProjectsReadme.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState, useMemo, type ReactElement } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+
+const toRawUrl = (repoUrl: string): string => {
+    if (!repoUrl) return repoUrl;
+
+    if (
+        repoUrl.includes("github.com") &&
+        !repoUrl.includes("raw.githubusercontent.com")
+    ) {
+        return repoUrl
+            .replace("github.com", "raw.githubusercontent.com")
+            .replace("/blob/", "/");
+    }
+
+    if (repoUrl.includes("/src/branch/")) {
+        return repoUrl.replace("/src/branch/", "/raw/branch/");
+    }
+
+    return repoUrl;
+};
+
+const getRepoRawBase = (repoUrl: string): string | null => {
+    const rawUrl = toRawUrl(repoUrl);
+    if (!rawUrl) return null;
+
+    try {
+        const url = new URL(rawUrl);
+        const parts = url.pathname.split("/").filter(Boolean);
+
+        if (url.hostname.includes("raw.githubusercontent.com")) {
+            return `${url.origin}/${parts.slice(0, 3).join("/")}`;
+        }
+
+        const rawIndex = parts.indexOf("raw");
+        if (rawIndex !== -1) {
+            return `${url.origin}/${parts.slice(0, rawIndex + 3).join("/")}`;
+        }
+
+        return null;
+    } catch {
+        return null;
+    }
+};
+
+const resolveImageSrc = (src: string, base: string | null): string => {
+    if (!src) return src;
+    if (src.startsWith("http")) return src;
+    if (!base) return src;
+
+    const clean = src.replace(/^.\//, "");
+    if (src.startsWith("/")) return base + src;
+    return `${base}/${clean}`;
+};
+
+const fetchREADME = async (repoUrl: string): Promise<string> => {
+    try {
+        const rawUrl = toRawUrl(repoUrl);
+        const response = await fetch(rawUrl);
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch README");
+        }
+
+        return await response.text();
+    } catch (error) {
+        console.error(error);
+        return "Error fetching README. Make sure the URL points to a raw markdown file.";
+    }
+};
+
+interface ProjectsReadmeProps {
+    repoUrl: string;
+}
+
+export default function ProjectsReadme({
+    repoUrl,
+}: ProjectsReadmeProps): ReactElement {
+    const [readmeContent, setReadmeContent] = useState<string>("");
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    const base = useMemo(() => getRepoRawBase(repoUrl), [repoUrl]);
+
+    useEffect(() => {
+        fetchREADME(repoUrl).then((content) => {
+            setReadmeContent(content);
+            setIsLoading(false);
+        });
+    }, [repoUrl]);
+
+    return (
+        <div className="w-full max-w-4xl mx-auto p-4 md:p-8 bg-ctp-mantle rounded-xl shadow-sm border border-ctp-text">
+            {isLoading ? (
+                <div className="flex flex-col gap-3 animate-pulse w-full">
+                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
+                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
+                    <div className="h-4 bg-ctp-overlay0 rounded-full w-3/4"></div>
+                </div>
+            ) : (
+                <div className="text-ctp-text leading-relaxed prose prose-base md:prose-lg dark:prose-invert max-w-none">
+                    <ReactMarkdown
+                        remarkPlugins={[remarkGfm]}
+                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+                        components={{
+                            code({
+                                className,
+                                children,
+                                ...props
+                            }: React.ComponentPropsWithoutRef<"code">): ReactElement {
+                                const isBlock =
+                                    className ||
+                                    (typeof children === "string" &&
+                                        children.includes("\n"));
+
+                                if (isBlock) {
+                                    return (
+                                        <code
+                                            className={`${className || ""} text-sm block overflow-x-auto`}
+                                            {...props}
+                                        >
+                                            {children}
+                                        </code>
+                                    );
+                                }
+
+                                return (
+                                    <code
+                                        className="bg-ctp-mantle px-1.5 py-0.5 rounded text-sm font-mono"
+                                        {...props}
+                                    >
+                                        {children}
+                                    </code>
+                                );
+                            },
+
+                            pre({
+                                children,
+                                ...props
+                            }: React.ComponentPropsWithoutRef<"pre">): ReactElement {
+                                return (
+                                    <pre
+                                        className="bg-ctp-mantle p-4 rounded-lg overflow-x-auto text-sm my-4"
+                                        {...props}
+                                    >
+                                        {children}
+                                    </pre>
+                                );
+                            },
+
+                            h1({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"h1">): ReactElement {
+                                return (
+                                    <h1 className="text-3xl font-bold text-ctp-mauve mt-8 mb-4 border-b pb-2 border-ctp-green">
+                                        {children}
+                                    </h1>
+                                );
+                            },
+
+                            h2({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"h2">): ReactElement {
+                                return (
+                                    <h2 className="text-2xl font-bold text-ctp-lavender mt-8 mb-4 border-b pb-2 border-ctp-green">
+                                        {children}
+                                    </h2>
+                                );
+                            },
+
+                            h3({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"h3">): ReactElement {
+                                return (
+                                    <h3 className="text-xl font-bold text-ctp-lavender mt-5 mb-3">
+                                        {children}
+                                    </h3>
+                                );
+                            },
+
+                            p({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"p">): ReactElement {
+                                return (
+                                    <p className="mb-4 text-ctp-text">
+                                        {children}
+                                    </p>
+                                );
+                            },
+
+                            ul({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"ul">): ReactElement {
+                                return (
+                                    <ul className="list-disc pl-6 mb-4">
+                                        {children}
+                                    </ul>
+                                );
+                            },
+
+                            ol({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"ol">): ReactElement {
+                                return (
+                                    <ol className="list-decimal pl-6 mb-4">
+                                        {children}
+                                    </ol>
+                                );
+                            },
+
+                            li({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"li">): ReactElement {
+                                return <li className="mb-1">{children}</li>;
+                            },
+
+                            a({
+                                children,
+                                href,
+                            }: React.ComponentPropsWithoutRef<"a">): ReactElement {
+                                return (
+                                    <a
+                                        href={href}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        className="hover:underline text-ctp-green"
+                                    >
+                                        {children}
+                                    </a>
+                                );
+                            },
+
+                            blockquote({
+                                children,
+                            }: React.ComponentPropsWithoutRef<"blockquote">): ReactElement {
+                                return (
+                                    <blockquote className="border-l-4 border-ctp-text pl-4 py-1 mb-4 bg-ctp-mantle rounded-r-lg">
+                                        {children}
+                                    </blockquote>
+                                );
+                            },
+
+                            img({
+                                src,
+                                alt,
+                            }: React.ComponentPropsWithoutRef<"img">): ReactElement {
+                                const resolved = resolveImageSrc(
+                                    src || "",
+                                    base,
+                                );
+
+                                return (
+                                    <img
+                                        src={resolved}
+                                        alt={alt}
+                                        className="max-w-full h-auto rounded-md my-4 shadow-sm border-2 border-ctp-text"
+                                        loading="lazy"
+                                    />
+                                );
+                            },
+                        }}
+                    >
+                        {readmeContent}
+                    </ReactMarkdown>
+                </div>
+            )}
+        </div>
+    );
+}

frontend/src/hooks/useTheme.ts

@@ -1,8 +1,13 @@
 import { useEffect, useState } from "react";
 import { getInitialTheme, applyTheme, toggleTheme } from "../utils/theme";
 
-export function useTheme() {
-    const [theme, setTheme] = useState(getInitialTheme);
+interface UseThemeReturn {
+    theme: string;
+    toggleTheme: () => void;
+}
+
+export function useTheme(): UseThemeReturn {
+    const [theme, setTheme] = useState<string>(getInitialTheme);
 
     useEffect(() => {
         applyTheme(theme);

frontend/src/main.jsx

@@ -1,9 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.jsx";
-
-createRoot(document.getElementById("root")).render(
-    <StrictMode>
-        <App />
-    </StrictMode>,
-);

frontend/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Root element not found");
+
+createRoot(root).render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+);

frontend/src/pages/Home.tsx

@@ -1,8 +1,20 @@
-import { useState } from "react";
+import { useState, type ReactElement } from "react";
 import ProjectsReadme from "../components/ProjectsReadme";
 
-export default function Home() {
-    const projectList = [
+interface ProjectInfo {
+    id: string;
+    name: string;
+    url: string;
+}
+
+interface Section {
+    id: string;
+    title: string;
+    content: ReactElement;
+}
+
+export default function Home(): ReactElement {
+    const projectList: ProjectInfo[] = [
         {
             id: "site",
             name: "aramjonghu-site",
@@ -20,14 +32,14 @@ export default function Home() {
         },
     ];
 
-    const [projIdx, setProjIdx] = useState(0);
+    const [projIdx, setProjIdx] = useState<number>(0);
     const prevProject = () =>
         setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
     const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);
 
-    const [activeTab, setActiveTab] = useState("projects");
+    const [activeTab, setActiveTab] = useState<string>("projects");
 
-    const sections = [
+    const sections: Section[] = [
         {
             id: "projects",
             title: "Projects",

frontend/src/pages/Stream.tsx

@@ -1,14 +1,19 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, type ReactElement } from "react";
 
-const streams = [
+interface StreamInfo {
+    id: string;
+    label: string;
+}
+
+const streams: StreamInfo[] = [
     { id: "aramstream", label: "Aram" },
     { id: "generalstream", label: "General" },
     { id: "gueststream", label: "Guest" },
 ];
 
-export default function Stream() {
-    const [activeStream, setActiveStream] = useState("aramstream");
-    const headerRef = useRef(null);
+export default function Stream(): ReactElement {
+    const [activeStream, setActiveStream] = useState<string>("aramstream");
+    const headerRef = useRef<HTMLHeadingElement>(null);
 
     useEffect(() => {
         headerRef.current?.scrollIntoView({

frontend/src/utils/theme.ts

@@ -1,21 +1,21 @@
 const LIGHT = "latte";
 const DARK = "macchiato";
 
-export function getSystemTheme() {
+export function getSystemTheme(): string {
     return window.matchMedia("(prefers-color-scheme: dark)").matches
         ? DARK
         : LIGHT;
 }
 
-export function getStoredTheme() {
+export function getStoredTheme(): string | null {
     return localStorage.getItem("theme");
 }
 
-export function getInitialTheme() {
+export function getInitialTheme(): string {
     return getStoredTheme() || getSystemTheme();
 }
 
-export function applyTheme(theme) {
+export function applyTheme(theme: string): void {
     const root = document.documentElement;
 
     root.classList.remove(LIGHT, DARK);
@@ -25,6 +25,6 @@ export function applyTheme(theme) {
     localStorage.setItem("theme", theme);
 }
 
-export function toggleTheme(current) {
+export function toggleTheme(current: string): string {
     return current === DARK ? LIGHT : DARK;
 }

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "jsx": "react-jsx",
+        "strict": true,
+        "noEmit": true,
+        "isolatedModules": true,
+        "skipLibCheck": true,
+        "noUncheckedSideEffectImports": false,
+        "types": ["react", "react-dom"],
+        "rootDir": "./src"
+    },
+    "include": ["src"]
+}