Reworked

2025-06-17 11:26:27 +02:00
parent a8b82208f7
commit 6ff5e89cdd
23 changed files with 424 additions and 2802 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,228 @@
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+
--- a/README.md
+++ b/README.md
@@ -1,3 +1,10 @@
+# Jupyter Linktree
+
+a simple Application to Display links and redirects by editing a simple TOML File.
+
+
+## Adding a Link
+
 Each link is defined in src/assets/links.toml. The format should be:

 ```toml
@@ -6,7 +13,40 @@ id = "Name of Website"
 icon = "local Icon link (src/assets/icons) or link to picture"
    [links.config]
    title = "Title of the Link"
-    link = "local redirect (e.g. /jupyter -> <window.origin>/jupyter)"
+    link = "local redirect (e.g. /jupyter -> <window.origin>/jupyter) or link (e.g. https://example.de)"
    description = "Description of the link"
    tags = [ "Tag1", "Tag2", ...]
 ```
+
+## Nix 
+
+When using Nix run the command
+
+```bash
+nix develop
+```
+
+beforehand, after that procede with the rest of the Dev Setup.
+
+## Dev Setup
+
+Install Node v21 or higher. After that navigate to the project and run 
+
+```bash
+npm install 
+npm run dev
+```
+
+Then type "o" into the console and a Window Tab in your Browser should open.
+
+## Docker
+
+Using docker is as simple as running 
+
+```bash
+docker compose up --build
+```
+
+
+
+
--- a/compose.yml
+++ b/compose.yml
@@ -1,12 +1,10 @@
-version: '3.8'
-
 services:
-  preact-linktree:
+  linktree:
    build: .
    ports:
      - "8080:8080"
    volumes:
-      - ./links:/app/links:ro
+      - ./links.toml:/app/links:ro
    environment:
      - NODE_ENV=production
    restart: unless-stopped
--- a/links.toml
+++ b/links.toml
@@ -0,0 +1,39 @@
+[[links]]
+id = "jupyterhub"
+icon = "https://jupyter.org/assets/homepage/main-logo.svg"
+
+  [links.config]
+  title = "Jupyter Hub"
+  link = "/jupyter"
+  description = "The main System build on top of Docker"
+  tags = [ "Teaching", "Docker" ]
+
+[[links]]
+id = "ifnwebsite"
+icon = "https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg"
+
+  [links.config]
+  title = "IFN Website"
+  link = "https://www.tu-braunschweig.de/ifn"
+  description = "All about the Institut"
+  tags = [ "Info" ]
+
+[[links]]
+id = "course-prog"
+icon = "https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg"
+
+  [links.config]
+  title = "Course Site"
+  link = "https://www.tu-braunschweig.de/ifn/edu/ws/einfuehrung-in-die-programmierung-fuer-nicht-informatiker"
+  description = "Stuff about Einführung in die Programmierung für NichtInformatiker*innen"
+  tags = [ "Info", "Teaching" ]
+
+[[links]]
+id = "Name of Website"
+icon = "assets/icons/samples.svg"
+    [links.config]
+    title = "Example"
+    link = "/404"
+    description = "Description of the link"
+    tags = [ "Tag1", "Tag2"]
+
--- a/links/blog/config.yaml
+++ b/links/blog/config.yaml
@@ -1,4 +0,0 @@
-title: "Tech Blog"
-link: "https://yourblog.com"
-description: "Read my thoughts on technology, programming, and life experiences. Deep dives into development practices and industry insights."
-short: "Technical writing and insights"
--- a/links/email/config.yaml
+++ b/links/email/config.yaml
@@ -1,4 +0,0 @@
-title: "Email Contact"
-link: "mailto:hello@yourdomain.com"
-description: "Get in touch with me directly via email for collaborations, questions, or just to say hello!"
-short: "Direct communication"
--- a/links/github/config.yaml
+++ b/links/github/config.yaml
@@ -1,4 +0,0 @@
-title: "GitHub Profile"
-link: "https://github.com/yourusername" 
-description: "Check out my open source projects and contributions to the community. From web applications to system tools, explore my code repositories."
-short: "Code repositories and projects"
--- a/links/linkedin/config.yaml
+++ b/links/linkedin/config.yaml
@@ -1,4 +0,0 @@
-title: "LinkedIn Profile"
-link: "https://linkedin.com/in/yourprofile"
-description: "Connect with me professionally and see my career journey. Let's network and explore opportunities together."
-short: "Professional networking"
--- a/links/portfolio/config.yaml
+++ b/links/portfolio/config.yaml
@@ -1,4 +0,0 @@
-title: "Portfolio Website"
-link: "https://yourportfolio.com"
-description: "Showcase of my work, projects, and creative endeavors. Explore my professional experience and featured projects."
-short: "Professional portfolio"
--- a/links/youtube/config.yaml
+++ b/links/youtube/config.yaml
@@ -1,4 +0,0 @@
-title: "My YouTube Channel" 
-link: "https://youtube.com/@yourchannel"
-description: "Subscribe to my YouTube channel for tutorials on programming, tech reviews, and coding tips. New videos every week covering web development, NixOS, Docker, and more!"
-short: "Tech tutorials and programming content"
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -1930,6 +1930,12 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/toml": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+      "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==",
+      "license": "MIT"
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
--- a/node_modules/.vite/deps/_metadata.json
+++ b/node_modules/.vite/deps/_metadata.json
@@ -1,95 +1,95 @@
 {
-  "hash": "339b1334",
+  "hash": "d656e9fe",
  "configHash": "742ac490",
-  "lockfileHash": "7d445b7e",
-  "browserHash": "8ec1e9b2",
+  "lockfileHash": "acf0cd05",
+  "browserHash": "88a8b691",
  "optimized": {
    "preact": {
      "src": "../../preact/dist/preact.module.js",
      "file": "preact.js",
-      "fileHash": "3d208919",
+      "fileHash": "ae6c468d",
      "needsInterop": false
    },
    "preact/jsx-runtime": {
      "src": "../../preact/jsx-runtime/dist/jsxRuntime.module.js",
      "file": "preact_jsx-runtime.js",
-      "fileHash": "1229a945",
+      "fileHash": "be585393",
      "needsInterop": false
    },
    "preact/jsx-dev-runtime": {
      "src": "../../preact/jsx-runtime/dist/jsxRuntime.module.js",
      "file": "preact_jsx-dev-runtime.js",
-      "fileHash": "5192533b",
+      "fileHash": "ac7a1058",
      "needsInterop": false
    },
    "preact/debug": {
      "src": "../../preact/debug/dist/debug.module.js",
      "file": "preact_debug.js",
-      "fileHash": "9d8ba6db",
+      "fileHash": "55186cec",
      "needsInterop": false
    },
    "preact/devtools": {
      "src": "../../preact/devtools/dist/devtools.module.js",
      "file": "preact_devtools.js",
-      "fileHash": "24bafedb",
+      "fileHash": "766507da",
      "needsInterop": false
    },
-    "js-yaml": {
-      "src": "../../js-yaml/dist/js-yaml.mjs",
-      "file": "js-yaml.js",
-      "fileHash": "f8520d1c",
+    "chart.js": {
+      "src": "../../chart.js/dist/chart.js",
+      "file": "chart__js.js",
+      "fileHash": "144d332c",
      "needsInterop": false
    },
    "preact-iso": {
      "src": "../../preact-iso/src/index.js",
      "file": "preact-iso.js",
-      "fileHash": "daf73d8b",
+      "fileHash": "dcc454c9",
      "needsInterop": false
    },
    "preact/hooks": {
      "src": "../../preact/hooks/dist/hooks.module.js",
      "file": "preact_hooks.js",
-      "fileHash": "62a82ea5",
-      "needsInterop": false
-    },
-    "react-highlight": {
-      "src": "../../react-highlight/index.js",
-      "file": "react-highlight.js",
-      "fileHash": "94fdb516",
-      "needsInterop": true
-    },
-    "chart.js": {
-      "src": "../../chart.js/dist/chart.js",
-      "file": "chart__js.js",
-      "fileHash": "07e990d3",
+      "fileHash": "ad5dcee2",
      "needsInterop": false
    },
    "react-chartjs-2": {
      "src": "../../react-chartjs-2/dist/index.js",
      "file": "react-chartjs-2.js",
-      "fileHash": "5fc07a3e",
+      "fileHash": "01e93613",
      "needsInterop": false
+    },
+    "react-highlight": {
+      "src": "../../react-highlight/index.js",
+      "file": "react-highlight.js",
+      "fileHash": "2a44455b",
+      "needsInterop": true
+    },
+    "toml": {
+      "src": "../../toml/index.js",
+      "file": "toml.js",
+      "fileHash": "7658a80c",
+      "needsInterop": true
    }
  },
  "chunks": {
    "prerender-BA576TZW": {
      "file": "prerender-BA576TZW.js"
    },
+    "chunk-2PFVE7YK": {
+      "file": "chunk-2PFVE7YK.js"
+    },
+    "chunk-BNEGSWOM": {
+      "file": "chunk-BNEGSWOM.js"
+    },
+    "chunk-44JN52BC": {
+      "file": "chunk-44JN52BC.js"
+    },
    "chunk-AAFB4U5C": {
      "file": "chunk-AAFB4U5C.js"
    },
    "chunk-O5MKVYJX": {
      "file": "chunk-O5MKVYJX.js"
    },
-    "chunk-44JN52BC": {
-      "file": "chunk-44JN52BC.js"
-    },
-    "chunk-BNEGSWOM": {
-      "file": "chunk-BNEGSWOM.js"
-    },
-    "chunk-2PFVE7YK": {
-      "file": "chunk-2PFVE7YK.js"
-    },
    "chunk-453BAUPL": {
      "file": "chunk-453BAUPL.js"
    },
--- a/node_modules/.vite/deps/js-yaml.js
+++ b/node_modules/.vite/deps/js-yaml.js
--- a/node_modules/.vite/deps/js-yaml.js.map
+++ b/node_modules/.vite/deps/js-yaml.js.map
--- a/node_modules/.vite/deps/react-chartjs-2.js
+++ b/node_modules/.vite/deps/react-chartjs-2.js
@@ -1,12 +1,3 @@
-import {
-  D,
-  Rn,
-  init_compat_module
-} from "./chunk-AAFB4U5C.js";
-import {
-  A,
-  y
-} from "./chunk-O5MKVYJX.js";
 import {
  BarController,
  BubbleController,
@@ -18,6 +9,15 @@ import {
  RadarController,
  ScatterController
 } from "./chunk-44JN52BC.js";
+import {
+  D,
+  Rn,
+  init_compat_module
+} from "./chunk-AAFB4U5C.js";
+import {
+  A,
+  y
+} from "./chunk-O5MKVYJX.js";
 import "./chunk-453BAUPL.js";
 import "./chunk-BYYN2XO5.js";

--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
        "preact": "^10.25.3",
        "preact-iso": "^2.9.1",
        "react-chartjs-2": "^5.3.0",
-        "react-highlight": "^0.15.0"
+        "react-highlight": "^0.15.0",
+        "toml": "^3.0.0"
      },
      "devDependencies": {
        "@preact/preset-vite": "^2.9.3",
@@ -1905,6 +1906,12 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/toml": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+      "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==",
+      "license": "MIT"
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
  "version": "1.0.0",
  "description": "A Jupyter notebook-styled linktree application built with Preact",
  "main": "index.js",
+  "type": "module",
  "scripts": {
    "dev": "vite --host 0.0.0.0 --port 8080",
    "build": "vite build",
@@ -16,7 +17,8 @@
    "preact": "^10.25.3",
    "preact-iso": "^2.9.1",
    "react-chartjs-2": "^5.3.0",
-    "react-highlight": "^0.15.0"
+    "react-highlight": "^0.15.0",
+    "toml": "^3.0.0"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.9.3",
--- a/src/assets/icons/samples.svg
+++ b/src/assets/icons/samples.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 297.5 297.5" xml:space="preserve">
+<g id="XMLID_40_">
+	<g>
+		<path style="fill:#ACBFC7;" d="M277.71,158.52v85.7H19.79v-85.7h6.53v40.54c0,16.98,13.81,30.78,30.78,30.78
+			s30.78-13.8,30.78-30.78v-40.54h30.09v40.54c0,16.98,13.81,30.78,30.78,30.78c16.98,0,30.78-13.8,30.78-30.78v-40.54h30.1v40.54
+			c0,16.98,13.8,30.78,30.78,30.78c16.97,0,30.78-13.8,30.78-30.78v-40.54H277.71z"/>
+		<rect x="218.66" y="53.28" style="fill:#CDD9DD;" width="43.49" height="10.53"/>
+		<rect x="229.17" y="83.35" style="fill:#CDD9DD;" width="22.48" height="23.92"/>
+		<rect x="137.51" y="83.35" style="fill:#CDD9DD;" width="22.48" height="23.92"/>
+		<rect x="127.01" y="53.28" style="fill:#CDD9DD;" width="43.49" height="10.53"/>
+		<rect x="35.35" y="53.28" style="fill:#CDD9DD;" width="43.49" height="10.53"/>
+		<rect x="45.86" y="83.35" style="fill:#CDD9DD;" width="22.48" height="23.92"/>
+		<path style="fill:#FF4855;" d="M251.65,126.81v72.25c0,6.2-5.05,11.24-11.24,11.24c-6.2,0-11.24-5.04-11.24-11.24v-72.25H251.65z"
+			/>
+		<path style="fill:#D61616;" d="M68.34,126.81v72.25c0,6.2-5.04,11.24-11.24,11.24s-11.24-5.04-11.24-11.24v-72.25H68.34z"/>
+		<path style="fill:#FFD63F;" d="M159.99,126.81v72.25c0,6.2-5.04,11.24-11.24,11.24s-11.24-5.04-11.24-11.24v-72.25H159.99z"/>
+		<path d="M297.25,148.75v105.24c0,5.4-4.37,9.77-9.77,9.77H10.02c-5.39,0-9.77-4.37-9.77-9.77V148.75c0-5.4,4.38-9.77,9.77-9.77
+			h16.3V83.35h-0.74c-5.39,0-9.77-4.38-9.77-9.77V43.51c0-5.4,4.38-9.77,9.77-9.77h63.03c5.4,0,9.77,4.37,9.77,9.77v30.07
+			c0,5.39-4.37,9.77-9.77,9.77h-0.73v55.63h30.09V83.35h-0.73c-5.4,0-9.77-4.38-9.77-9.77V43.51c0-5.4,4.37-9.77,9.77-9.77h63.03
+			c5.39,0,9.77,4.37,9.77,9.77v30.07c0,5.39-4.38,9.77-9.77,9.77h-0.74v55.63h30.1V83.35h-0.74c-5.39,0-9.77-4.38-9.77-9.77V43.51
+			c0-5.4,4.38-9.77,9.77-9.77h63.03c5.4,0,9.77,4.37,9.77,9.77v30.07c0,5.39-4.37,9.77-9.77,9.77h-0.73v55.63h16.29
+			C292.88,138.98,297.25,143.35,297.25,148.75z M277.71,244.22v-85.7h-6.52v40.54c0,16.98-13.81,30.78-30.78,30.78
+			c-16.98,0-30.78-13.8-30.78-30.78v-40.54h-30.1v40.54c0,16.98-13.8,30.78-30.78,30.78c-16.97,0-30.78-13.8-30.78-30.78v-40.54
+			H87.88v40.54c0,16.98-13.81,30.78-30.78,30.78s-30.78-13.8-30.78-30.78v-40.54h-6.53v85.7H277.71z M262.15,63.81V53.28h-43.49
+			v10.53H262.15z M251.65,199.06v-72.25h-22.48v72.25c0,6.2,5.04,11.24,11.24,11.24C246.6,210.3,251.65,205.26,251.65,199.06z
+			 M251.65,107.27V83.35h-22.48v23.92H251.65z M170.5,63.81V53.28h-43.49v10.53H170.5z M159.99,199.06v-72.25h-22.48v72.25
+			c0,6.2,5.04,11.24,11.24,11.24S159.99,205.26,159.99,199.06z M159.99,107.27V83.35h-22.48v23.92H159.99z M78.84,63.81V53.28H35.35
+			v10.53H78.84z M68.34,199.06v-72.25H45.86v72.25c0,6.2,5.04,11.24,11.24,11.24S68.34,205.26,68.34,199.06z M68.34,107.27V83.35
+			H45.86v23.92H68.34z"/>
+	</g>
+	<g>
+	</g>
+</g>
+</svg>
--- a/src/assets/links.toml
+++ b/src/assets/links.toml
@@ -1,29 +0,0 @@
-[[links]]
-id = "jupyterhub"
-icon = "https://jupyter.org/assets/homepage/main-logo.svg"
-
-  [links.config]
-  title = "Jupyter Hub"
-  link = "`${window.location.origin}/jupyter`"
-  description = "The main System build on top of Docker"
-  tags = [ "Teaching", "Docker" ]
-
-[[links]]
-id = "ifnwebsite"
-icon = "https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg"
-
-  [links.config]
-  title = "IFN Website"
-  link = "https://www.tu-braunschweig.de/ifn"
-  description = "All about the Institut"
-  tags = [ "Info" ]
-
-[[links]]
-id = "course-prog"
-icon = "https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg"
-
-  [links.config]
-  title = "Course Site"
-  link = "https://www.tu-braunschweig.de/ifn/edu/ws/einfuehrung-in-die-programmierung-fuer-nicht-informatiker"
-  description = "Stuff about Einführung in die Programmierung für NichtInformatiker*innen"
-  tags = [ "Info", "Teaching" ]
--- a/src/assets/links.toml
+++ b/src/assets/links.toml
@@ -0,0 +1 @@
+links.toml
--- a/src/components/Links/Links.jsx
+++ b/src/components/Links/Links.jsx
@@ -1,7 +1,6 @@
 import './style.css';

 const Tag = ({ tag }) => {
-    console.log(tag)
    return (
        <div class="link-tag">
            {tag}
@@ -11,8 +10,6 @@ const Tag = ({ tag }) => {

 const LinkItem = ({ linkData }) => {
    const { config, icon } = linkData;
-    const fullUrl = `${window.location.origin}${config.link}`;
-    console.log(config.tags)
    return (
        <a
            href={config.link}
--- a/src/components/Links/style.css
+++ b/src/components/Links/style.css
@@ -5,7 +5,7 @@
 }

 .link-item {
-    width: 95%;
+    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px;
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'preact/hooks';
 import './style.css';
+import tomlContent from '../../../links.toml?raw';
+import toml from 'toml';

 // Components 

@@ -35,42 +37,7 @@ for link in links:
 plt.show()
 `

-const getMockLinks = () => {
-  return [
-    {
-      id: 'jupyterhub',
-      config: {
-        title: 'Jupyter Hub',
-        link: `${window.location.origin}/jupyter`,
-        description: 'The main System build on top of Docker',
-        tags: ['Teaching', 'Docker']
-      },
-      icon: 'https://jupyter.org/assets/homepage/main-logo.svg'
-    },
-    {
-      id: 'ifnwebsite',
-      config: {
-        title: 'IFN Website',
-        link: 'https://www.tu-braunschweig.de/ifn',
-        description: 'All about the institut',
-        tags: ['Info']
-      },
-      icon: 'https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg'
-    },
-    {
-      id: 'course-prog',
-      config: {
-        title: 'Lehrseite',
-        link: 'https://www.tu-braunschweig.de/ifn/edu/ws/einfuehrung-in-die-programmierung-fuer-nicht-informatiker',
-        description: 'Useful Stuff about the course',
-        tags: ['Info', 'Teaching']
-      },
-      icon: 'https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg'
-    },
-  ];
-};
-
-
+const linksData = toml.parse(tomlContent);

 export default function Home() {
    const [links, setLinks] = useState([]);
@@ -79,7 +46,9 @@ export default function Home() {
    useEffect(() => {
        const delay = 500 + Math.random() * 1500;
        const timer = setTimeout(() => {
-            setLinks(getMockLinks())
+            //const links = parseToml('../../assets/links.toml');
+            console.log(linksData.links);
+            setLinks(linksData.links);
            setLoading(false);
        }, delay)

--- a/vite.config.js
+++ b/vite.config.js
@@ -15,14 +15,17 @@ export default defineConfig({
    ],
    server: {
        host: '0.0.0.0',
-        port: 8080
+        port: 8080,
+        assetsDir: 'assets'
    },
    preview: {
        host: '0.0.0.0',
-        port: 8080
+        port: 8080,
+        assetsDir: 'assets'
    },
    build: {
        outDir: 'dist',
        assetsDir: 'assets'
-    }
+    },
+    assetsInclude: ['**/*.toml']
 })