From 1fcdc4ea6c7bae06839d902d0b5e64cdd566693c Mon Sep 17 00:00:00 2001 From: forgejo-bot Date: Sat, 9 May 2026 19:23:26 +0000 Subject: [PATCH] chore: format frontend with prettier --- frontend/.vite/deps/_metadata.json | 12 +- frontend/.vite/deps/package.json | 2 +- frontend/eslint.config.js | 40 +-- frontend/index.html | 28 +- frontend/package.json | 70 ++-- frontend/src/App.css | 14 +- frontend/src/App.jsx | 12 +- frontend/src/components/Footer.jsx | 36 +- frontend/src/components/Header.jsx | 72 ++-- frontend/src/components/Layout.jsx | 16 +- frontend/src/components/ProjectsReadme.jsx | 371 ++++++++++----------- frontend/src/hooks/useTheme.js | 16 +- frontend/src/main.jsx | 6 +- frontend/src/pages/Home.jsx | 217 ++++++------ frontend/src/pages/Stream.jsx | 32 +- frontend/src/utils/theme.js | 20 +- frontend/tailwind.config.js | 12 +- frontend/vite.config.js | 10 +- 18 files changed, 484 insertions(+), 502 deletions(-) diff --git a/frontend/.vite/deps/_metadata.json b/frontend/.vite/deps/_metadata.json index c887548..6c8f21d 100644 --- a/frontend/.vite/deps/_metadata.json +++ b/frontend/.vite/deps/_metadata.json @@ -1,8 +1,8 @@ { - "hash": "38d6ee96", - "configHash": "4c0366d0", - "lockfileHash": "e1de79ea", - "browserHash": "9db598fc", - "optimized": {}, - "chunks": {} + "hash": "38d6ee96", + "configHash": "4c0366d0", + "lockfileHash": "e1de79ea", + "browserHash": "9db598fc", + "optimized": {}, + "chunks": {} } diff --git a/frontend/.vite/deps/package.json b/frontend/.vite/deps/package.json index 4720025..3dbc1ca 100644 --- a/frontend/.vite/deps/package.json +++ b/frontend/.vite/deps/package.json @@ -1,3 +1,3 @@ { - "type": "module" + "type": "module" } diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js index 1ced299..6196e83 100644 --- a/frontend/eslint.config.js +++ b/frontend/eslint.config.js @@ -5,25 +5,25 @@ import reactRefresh from "eslint-plugin-react-refresh"; 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, - ], - languageOptions: { - ecmaVersion: 2020, - globals: globals.browser, - parserOptions: { - ecmaVersion: "latest", - ecmaFeatures: { jsx: true }, - sourceType: "module", - }, - }, - rules: { - "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }], - }, + globalIgnores(["dist"]), + { + files: ["**/*.{js,jsx}"], + extends: [ + js.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: "latest", + ecmaFeatures: { jsx: true }, + sourceType: "module", + }, }, + rules: { + "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }], + }, + }, ]); diff --git a/frontend/index.html b/frontend/index.html index 93fdd6b..c1f04aa 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,16 +1,16 @@ - - - - - aramjonghu-site - - -
- - + + + + + aramjonghu-site + + +
+ + diff --git a/frontend/package.json b/frontend/package.json index 6234261..e6f9865 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,37 +1,37 @@ { - "name": "aramjonghu-site", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "lint": "eslint .", - "preview": "vite preview" - }, - "dependencies": { - "@tailwindcss/vite": "^4.2.2", - "react": "^19.2.4", - "react-dom": "^19.2.4", - "react-markdown": "^10.1.0", - "rehype-raw": "^7.0.0", - "rehype-sanitize": "^6.0.0", - "tailwindcss": "^4.2.2" - }, - "devDependencies": { - "@babel/core": "^7.29.0", - "@catppuccin/tailwindcss": "^1.0.0", - "@eslint/js": "^9.39.4", - "@rolldown/plugin-babel": "^0.2.2", - "@types/react": "^19.2.14", - "@types/react-dom": "^19.2.3", - "@vitejs/plugin-react": "^6.0.1", - "babel-plugin-react-compiler": "^1.0.0", - "eslint": "^9.39.4", - "eslint-plugin-react-hooks": "^7.0.1", - "eslint-plugin-react-refresh": "^0.5.2", - "globals": "^17.4.0", - "prettier": "^3.8.3", - "vite": "^8.0.4" - } + "name": "aramjonghu-site", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@tailwindcss/vite": "^4.2.2", + "react": "^19.2.4", + "react-dom": "^19.2.4", + "react-markdown": "^10.1.0", + "rehype-raw": "^7.0.0", + "rehype-sanitize": "^6.0.0", + "tailwindcss": "^4.2.2" + }, + "devDependencies": { + "@babel/core": "^7.29.0", + "@catppuccin/tailwindcss": "^1.0.0", + "@eslint/js": "^9.39.4", + "@rolldown/plugin-babel": "^0.2.2", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.1", + "babel-plugin-react-compiler": "^1.0.0", + "eslint": "^9.39.4", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.5.2", + "globals": "^17.4.0", + "prettier": "^3.8.3", + "vite": "^8.0.4" + } } diff --git a/frontend/src/App.css b/frontend/src/App.css index a6873ec..dffe9a7 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -2,23 +2,23 @@ @import "@catppuccin/tailwindcss/macchiato.css"; .ui-btn { - @apply text-ctp-text border border-ctp-text rounded px-3 py-1 cursor-pointer transition-colors; + @apply text-ctp-text border border-ctp-text rounded px-3 py-1 cursor-pointer transition-colors; } .ui-btn:hover { - @apply bg-ctp-surface0 text-ctp-green border-ctp-green duration-300 ease-in-out; + @apply bg-ctp-surface0 text-ctp-green border-ctp-green duration-300 ease-in-out; } .ui-btn-active { - @apply bg-ctp-surface0 text-ctp-green border-ctp-green; + @apply bg-ctp-surface0 text-ctp-green border-ctp-green; } .stream-frame { - width: 96vw; - margin: 0 auto; - @apply aspect-video rounded-2xl overflow-hidden border border-ctp-lavender-800 bg-ctp-mantle shadow-lg; + width: 96vw; + margin: 0 auto; + @apply aspect-video rounded-2xl overflow-hidden border border-ctp-lavender-800 bg-ctp-mantle shadow-lg; } .stream-frame iframe { - @apply w-full h-full border-0; + @apply w-full h-full border-0; } diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d51c43b..2a663f7 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -5,14 +5,14 @@ import Home from "./pages/Home"; import Stream from "./pages/Stream"; function App() { - const path = window.location.pathname.toLowerCase(); + const path = window.location.pathname.toLowerCase(); - let content = ; - if (path === "/stream") { - content = ; - } + let content = ; + if (path === "/stream") { + content = ; + } - return {content}; + return {content}; } export default App; diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index a574bb0..09a794d 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -1,25 +1,25 @@ import forgejo from "../assets/images/forgejo.svg"; export default function Footer() { - const currentYear = new Date().getFullYear(); + const currentYear = new Date().getFullYear(); - const goToRepo = () => { - window.location.href = - "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site"; - }; + const goToRepo = () => { + window.location.href = + "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site"; + }; - return ( -
-

- © {currentYear} AramJonghu. All rights reserved. -

+ return ( +
+

+ © {currentYear} AramJonghu. All rights reserved. +

- Forgejo repository -
- ); + Forgejo repository +
+ ); } diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index 63e1bf1..a91f984 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -1,47 +1,43 @@ import Aku from "../assets/images/aku.png"; export default function Header({ theme }) { - const { theme: currentTheme, toggleTheme } = theme; + const { theme: currentTheme, toggleTheme } = theme; - const navItems = [ - { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" }, - { label: "Navidrome", url: "https://music.aramjonghu.nl" }, - { label: "Forgejo Git", url: "https://git.aramjonghu.nl" }, - { label: "Stream", url: "/stream" }, - { label: "SearXNG", url: "https://xng.aramjonghu.nl" }, - { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" }, - ]; + const navItems = [ + { label: "Nextcloud", url: "https://aramjonghu.nl/nextcloud" }, + { label: "Navidrome", url: "https://music.aramjonghu.nl" }, + { label: "Forgejo Git", url: "https://git.aramjonghu.nl" }, + { label: "Stream", url: "/stream" }, + { label: "SearXNG", url: "https://xng.aramjonghu.nl" }, + { label: "Gitea zach-dev", url: "https://git.zach-dev.cc" }, + ]; - const goHome = () => { - window.location.href = "/"; - }; + const goHome = () => { + window.location.href = "/"; + }; - return ( -
- Home + return ( +
+ Home - + -
- -
-
- ); +
+ +
+
+ ); } diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx index 3a12144..4b10196 100644 --- a/frontend/src/components/Layout.jsx +++ b/frontend/src/components/Layout.jsx @@ -3,13 +3,13 @@ import Header from "./Header"; import { useTheme } from "../hooks/useTheme"; export default function Layout({ children }) { - const theme = useTheme(); + const theme = useTheme(); - return ( -
-
-
{children}
-
-
- ); + return ( +
+
+
{children}
+
+
+ ); } diff --git a/frontend/src/components/ProjectsReadme.jsx b/frontend/src/components/ProjectsReadme.jsx index d1a34c4..31f4262 100644 --- a/frontend/src/components/ProjectsReadme.jsx +++ b/frontend/src/components/ProjectsReadme.jsx @@ -3,224 +3,217 @@ import ReactMarkdown from "react-markdown"; import rehypeRaw from "rehype-raw"; const toRawUrl = (repoUrl) => { - if (!repoUrl) return 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("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/"); - } + if (repoUrl.includes("/src/branch/")) { + return repoUrl.replace("/src/branch/", "/raw/branch/"); + } - return repoUrl; + return repoUrl; }; const getRepoRawBase = (repoUrl) => { - const rawUrl = toRawUrl(repoUrl); - if (!rawUrl) return null; + const rawUrl = toRawUrl(repoUrl); + if (!rawUrl) return null; - try { - const url = new URL(rawUrl); - const parts = url.pathname.split("/").filter(Boolean); + 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 + 2).join("/")}`; - } - - return null; - } catch { - return null; + 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 + 2).join("/")}`; + } + + return null; + } catch { + return null; + } }; const resolveImageSrc = (src, base) => { - if (!src) return src; + if (!src) return src; - if (src.startsWith("http")) return src; + if (src.startsWith("http")) return src; - if (src.includes("/blob/")) { - return src - .replace("github.com", "raw.githubusercontent.com") - .replace("/blob/", "/"); - } + if (src.includes("/blob/")) { + return src + .replace("github.com", "raw.githubusercontent.com") + .replace("/blob/", "/"); + } - if (!base) return src; + if (!base) return src; - const clean = src.replace(/^.\//, ""); + const clean = src.replace(/^.\//, ""); - if (src.startsWith("/")) { - return base + src; - } + if (src.startsWith("/")) { + return base + src; + } - return `${base}/${clean}`; + return `${base}/${clean}`; }; const fetchREADME = async (repoUrl) => { - try { - const rawUrl = toRawUrl(repoUrl); - const response = await fetch(rawUrl); + 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."; + 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 [readmeContent, setReadmeContent] = useState(""); + const [isLoading, setIsLoading] = useState(true); - const base = useMemo(() => getRepoRawBase(repoUrl), [repoUrl]); + const base = useMemo(() => getRepoRawBase(repoUrl), [repoUrl]); - useEffect(() => { - setIsLoading(true); + useEffect(() => { + setIsLoading(true); - fetchREADME(repoUrl).then((content) => { - setReadmeContent(content); - setIsLoading(false); - }); - }, [repoUrl]); + fetchREADME(repoUrl).then((content) => { + setReadmeContent(content); + setIsLoading(false); + }); + }, [repoUrl]); - return ( -
- {isLoading ? ( -
-
-
-
-
- ) : ( -
- - {children} - - ); - } - - return ( - - {children} - - ); - }, - - pre({ children, ...props }) { - return ( - 
-                                        {children}
-
- ); - }, - - h1: ({ children }) => ( -

- {children} -

- ), - - h2: ({ children }) => ( -

- {children} -

- ), - - h3: ({ children }) => ( -

- {children} -

- ), - - p: ({ children }) => ( -

{children}

- ), - - ul: ({ children }) => ( -
    - {children} -
- ), - - ol: ({ children }) => ( -
    - {children} -
- ), - - li: ({ children }) => ( -
  • {children}
    • - ), - - a: ({ children, href }) => ( - - {children} - - ), - - blockquote: ({ children }) => ( -
    - {children} -
    - ), - - img: ({ src, alt }) => { - const resolved = resolveImageSrc(src, base); - - return ( - {alt} - ); - }, - }} - > - {readmeContent} -     -
    - )} + return ( +
    + {isLoading ? ( +
    +
    +
    +
    - ); + ) : ( +
    + + {children} + + ); + } + + return ( + + {children} + + ); + }, + + pre({ children, ...props }) { + return ( + 
    +                    {children}
+
    + ); + }, + + h1: ({ children }) => ( +

    + {children} +

    + ), + + h2: ({ children }) => ( +

    + {children} +

    + ), + + h3: ({ children }) => ( +

    + {children} +

    + ), + + p: ({ children }) => ( +

    {children}

    + ), + + ul: ({ children }) => ( +
      {children}
    + ), + + ol: ({ children }) => ( +
      {children}
    + ), + + li: ({ children }) =>
  • {children}
    • , + + a: ({ children, href }) => ( + + {children} + + ), + + blockquote: ({ children }) => ( +
    + {children} +
    + ), + + img: ({ src, alt }) => { + const resolved = resolveImageSrc(src, base); + + return ( + {alt} + ); + }, + }} + > + {readmeContent} +     +
    + )} +
    + ); } diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js index e0e766e..6a3750a 100644 --- a/frontend/src/hooks/useTheme.js +++ b/frontend/src/hooks/useTheme.js @@ -2,15 +2,15 @@ import { useEffect, useState } from "react"; import { getInitialTheme, applyTheme, toggleTheme } from "../utils/theme"; export function useTheme() { - const [theme, setTheme] = useState(getInitialTheme); + const [theme, setTheme] = useState(getInitialTheme); - useEffect(() => { - applyTheme(theme); - }, [theme]); + useEffect(() => { + applyTheme(theme); + }, [theme]); - const handleToggle = () => { - setTheme((prev) => toggleTheme(prev)); - }; + const handleToggle = () => { + setTheme((prev) => toggleTheme(prev)); + }; - return { theme, toggleTheme: handleToggle }; + return { theme, toggleTheme: handleToggle }; } diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 35cd9a4..637e43b 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client"; import App from "./App.jsx"; createRoot(document.getElementById("root")).render( - - - , + + + , ); diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 8923ff3..3e6dc03 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -2,120 +2,115 @@ import { useState } from "react"; import ProjectsReadme from "../components/ProjectsReadme"; export default function Home() { - const projectList = [ - { - id: "site", - name: "aramjonghu-site", - url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md", - }, - { - id: "game", - name: "Game (Gameron the Lost Level)", - url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md", - }, - { - id: "nvim", - name: "Nvim Config", - url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md", - }, - ]; + const projectList = [ + { + id: "site", + name: "aramjonghu-site", + url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md", + }, + { + id: "game", + name: "Game (Gameron the Lost Level)", + url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md", + }, + { + id: "nvim", + name: "Nvim Config", + url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md", + }, + ]; - const [projIdx, setProjIdx] = useState(0); - const prevProject = () => - setProjIdx((i) => (i - 1 + projectList.length) % projectList.length); - const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length); + const [projIdx, setProjIdx] = useState(0); + const prevProject = () => + setProjIdx((i) => (i - 1 + projectList.length) % projectList.length); + const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length); - const [activeTab, setActiveTab] = useState("about"); + const [activeTab, setActiveTab] = useState("about"); - const sections = [ - { - id: "projects", - title: "Projects", - content: ( - <> -

    - Projects -

    -
    - - - {projectList[projIdx].name} ({projIdx + 1}/ - {projectList.length}) - - -
    - - - ), - }, - { - id: "systems", - title: "Systems", - content:

    Systems content goes here.

    , - }, - { - id: "about", - title: "About", - content:

    About content goes here.

    , - }, - ]; + const sections = [ + { + id: "projects", + title: "Projects", + content: ( + <> +

    + Projects +

    +
    + + + {projectList[projIdx].name} ({projIdx + 1}/{projectList.length}) + + +
    + + + ), + }, + { + id: "systems", + title: "Systems", + content:

    Systems content goes here.

    , + }, + { + id: "about", + title: "About", + content:

    About content goes here.

    , + }, + ]; - return ( -
    -
    -

    - AramJonghu -

    -

    - Software engineer building systems, services, and - experiments across a self-hosted environment. -

    -

    - This site acts as a hub for projects, infrastructure, and - personal tooling. -

    -
    -
    - {sections.map((section) => ( - - ))} -
    -
    - {sections.map((section) => ( -
    - {section.content} -
    - ))} -
    -
    -
    + return ( +
    +
    +

    AramJonghu

    +

    + Software engineer building systems, services, and experiments across a + self-hosted environment. +

    +

    + This site acts as a hub for projects, infrastructure, and personal + tooling. +

    +
    +
    + {sections.map((section) => ( + + ))} +
    +
    + {sections.map((section) => ( +
    + {section.content} +
    + ))} +
    - ); +
    +
    + ); } diff --git a/frontend/src/pages/Stream.jsx b/frontend/src/pages/Stream.jsx index 6e39b34..8cd7b51 100644 --- a/frontend/src/pages/Stream.jsx +++ b/frontend/src/pages/Stream.jsx @@ -1,21 +1,19 @@ export default function Stream() { - return ( -
    -
    -

    - Stream -

    + return ( +
    +
    +

    Stream

    -
    -