This commit is contained in:
DerGrumpf 2025-06-17 11:26:27 +02:00
parent a8b82208f7
commit 6ff5e89cdd
23 changed files with 424 additions and 2802 deletions

228
.gitignore vendored Normal file
View File

@ -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

View File

@ -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
```

View File

@ -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

39
links.toml Normal file
View File

@ -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"]

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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"

6
node_modules/.package-lock.json generated vendored
View File

@ -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",

View File

@ -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"
},

2646
node_modules/.vite/deps/js-yaml.js generated vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -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";

9
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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>

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -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" ]

1
src/assets/links.toml Symbolic link
View File

@ -0,0 +1 @@
links.toml

View File

@ -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}

View File

@ -5,7 +5,7 @@
}
.link-item {
width: 95%;
width: 100%;
display: flex;
align-items: center;
padding: 20px;

View File

@ -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)

View File

@ -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']
})