diff --git a/frontend/.vite/deps/_metadata.json b/frontend/.vite/deps/_metadata.json index 6c8f21d..c887548 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 3dbc1ca..4720025 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 6196e83..1ced299 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", - }, + 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_]" }], + }, }, - rules: { - "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }], - }, - }, ]); diff --git a/frontend/index.html b/frontend/index.html index c1f04aa..93fdd6b 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 e6f9865..6234261 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 1d03ede..a6873ec 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -2,13 +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; +} + +.stream-frame iframe { + @apply w-full h-full border-0; } diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d83d5bf..d51c43b 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2,13 +2,17 @@ import "./App.css"; import Layout from "./components/Layout"; import Home from "./pages/Home"; +import Stream from "./pages/Stream"; function App() { - return ( - - - - ); + const path = window.location.pathname.toLowerCase(); + + let content = ; + if (path === "/stream") { + content = ; + } + + return {content}; } export default App; diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index 09a794d..a574bb0 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 332da85..63e1bf1 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -1,43 +1,47 @@ 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: "https://stream.aramjonghu.nl" }, - { 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 4b10196..3a12144 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 31f4262..d1a34c4 100644 --- a/frontend/src/components/ProjectsReadme.jsx +++ b/frontend/src/components/ProjectsReadme.jsx @@ -3,217 +3,224 @@ 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("/")}`; + 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 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"); + 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."; } - - 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 ? ( -
-
-
-
-
- ) : ( -
- + {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} + ); + }, + }} > - {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} -     + {readmeContent} + +
    + )}
    - )} -
    - ); + ); } diff --git a/frontend/src/hooks/useTheme.js b/frontend/src/hooks/useTheme.js index 6a3750a..e0e766e 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 637e43b..35cd9a4 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 3e6dc03..8923ff3 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -2,115 +2,120 @@ 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 new file mode 100644 index 0000000..6e39b34 --- /dev/null +++ b/frontend/src/pages/Stream.jsx @@ -0,0 +1,21 @@ +export default function Stream() { + return ( +
    +
    +

    + Stream +

    + +
    +