ecklf 1.0.0

package/README.md

@@ -0,0 +1,57 @@
+# ecklf
+
+A terminal UI for [ecklf.com](https://ecklf.com). Browse Florentin's projects and open
+them on the web or GitHub — complete with a spinning ASCII wireframe and typed
+multi‑language greetings, just like the website.
+
+## Usage
+
+Run it without installing:
+
+```sh
+npx ecklf
+```
+
+Or install globally:
+
+```sh
+npm i -g ecklf
+# then
+ecklf
+```
+
+## Controls
+
+| Key            | Action                                   |
+| -------------- | ---------------------------------------- |
+| `↑` / `↓`, `j` / `k` | Navigate projects                  |
+| `↵`            | Open menu → choose **Website** / **GitHub** |
+| `w`            | Open ecklf.com in your browser           |
+| `g`            | Open the selected project on GitHub      |
+| `←` / `→`      | Switch choice (in the open menu)         |
+| `esc`          | Back                                     |
+| `q`            | Quit                                     |
+
+## How it works
+
+- Project data is fetched **live** from [ecklf.com](https://ecklf.com) at launch and
+  parsed from the server-rendered markup. If the site can't be reached it falls back
+  to a bundled snapshot, so it still works offline.
+- The header features two animations mirroring the site:
+  - a rotating 3D wireframe **torus-knot** rendered with braille characters, and
+  - a **typewriter** cycling greetings in different languages.
+
+## Development
+
+This project uses [pnpm](https://pnpm.io).
+
+```sh
+pnpm install
+pnpm build      # compile TypeScript -> dist/
+pnpm start      # run the built CLI
+pnpm dev        # tsc --watch
+```
+
+## License
+
+MIT © [Florentin Eckl](https://ecklf.com)

package/dist/App.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { Greeting } from "./Greeting.js";
+import { Knot } from "./Knot.js";
+import { openUrl } from "./open.js";
+import { fetchSiteData, SITE_URL } from "./data.js";
+const ACCENT = "cyanBright";
+export const App = () => {
+    const { exit } = useApp();
+    const [status, setStatus] = useState("loading");
+    const [data, setData] = useState(null);
+    const [selected, setSelected] = useState(0);
+    const [mode, setMode] = useState("list");
+    const [actionChoice, setActionChoice] = useState(0); // 0 = website, 1 = github
+    const [opened, setOpened] = useState(null);
+    useEffect(() => {
+        let active = true;
+        fetchSiteData().then((d) => {
+            if (!active)
+                return;
+            setData(d);
+            setStatus("ready");
+        });
+        return () => {
+            active = false;
+        };
+    }, []);
+    useInput((input, key) => {
+        if (input === "q" || (key.ctrl && input === "c")) {
+            exit();
+            return;
+        }
+        if (status !== "ready" || !data)
+            return;
+        const projects = data.projects;
+        if (mode === "list") {
+            if (key.upArrow || input === "k") {
+                setSelected((s) => (s - 1 + projects.length) % projects.length);
+                setOpened(null);
+            }
+            else if (key.downArrow || input === "j") {
+                setSelected((s) => (s + 1) % projects.length);
+                setOpened(null);
+            }
+            else if (key.return || input === " ") {
+                setMode("action");
+                setActionChoice(1); // default highlight GitHub
+            }
+            else if (input === "g") {
+                openUrl(projects[selected].github);
+                setOpened(projects[selected].github);
+            }
+            else if (input === "w") {
+                openUrl(SITE_URL);
+                setOpened(SITE_URL);
+            }
+        }
+        else {
+            // action mode
+            if (key.leftArrow || key.rightArrow || input === "h" || input === "l" || key.tab) {
+                setActionChoice((c) => (c === 0 ? 1 : 0));
+            }
+            else if (key.return) {
+                const p = projects[selected];
+                const url = actionChoice === 0 ? SITE_URL : p.github;
+                openUrl(url);
+                setOpened(url);
+                setMode("list");
+            }
+            else if (key.escape) {
+                setMode("list");
+            }
+        }
+    }, { isActive: process.stdin.isTTY === true });
+    if (status === "loading") {
+        return (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: _jsx(Text, { color: "gray", children: "Connecting to ecklf.com\u2026" }) }));
+    }
+    const d = data;
+    const projects = d.projects;
+    const current = projects[selected];
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, justifyContent: "center", children: [_jsx(Box, { children: _jsx(Greeting, {}) }), _jsx(Text, { bold: true, color: "whiteBright", children: d.name }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: d.tagline }), _jsx(Text, { color: "gray", children: d.subtitle })] })] }), _jsx(Box, { width: 28, height: 14, justifyContent: "flex-end", children: _jsx(Knot, { cols: 26, rows: 14 }) })] }), _jsxs(Box, { marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "whiteBright", children: "Projects" }), _jsxs(Text, { color: "gray", children: ["  ", d.source === "live" ? "● live" : "○ offline"] })] }), _jsx(Box, { flexDirection: "column", children: projects.map((p, i) => {
+                    const active = i === selected;
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: active ? ACCENT : "gray", children: active ? "❯ " : "  " }), _jsx(Text, { bold: true, color: active ? "whiteBright" : "white", children: p.title })] }), active && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: p.description }) }))] }, p.github));
+                }) }), mode === "action" && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["Open ", _jsx(Text, { color: "whiteBright", children: current.title }), " \u2192"] }), _jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: actionChoice === 0 ? "black" : ACCENT, backgroundColor: actionChoice === 0 ? ACCENT : undefined, children: " Website " }), _jsx(Text, { children: " " }), _jsx(Text, { color: actionChoice === 1 ? "black" : ACCENT, backgroundColor: actionChoice === 1 ? ACCENT : undefined, children: " GitHub " })] })] })), opened && mode === "list" && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "greenBright", children: "\u2197 opened " }), _jsx(Text, { color: "gray", children: opened })] })), _jsx(Box, { marginTop: 1, children: mode === "list" ? (_jsx(Text, { color: "gray", dimColor: true, children: "\u2191/\u2193 navigate \u00B7 \u21B5 open\u2026 \u00B7 w website \u00B7 g github \u00B7 q quit" })) : (_jsx(Text, { color: "gray", dimColor: true, children: "\u2190/\u2192 choose \u00B7 \u21B5 confirm \u00B7 esc back" })) })] }));
+};

package/dist/Greeting.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Text } from "ink";
+// Multi-language greetings, cycled with a typewriter effect — mirrors the
+// animated headline on ecklf.com.
+const GREETINGS = [
+    "Hallo",
+    "Hello",
+    "Bonjour",
+    "Hola",
+    "Ciao",
+    "こんにちは",
+    "안녕하세요",
+    "你好",
+    "Olá",
+    "Привет",
+    "Hej",
+    "Merhaba",
+];
+export const Greeting = () => {
+    const [index, setIndex] = useState(0);
+    const [text, setText] = useState("");
+    const [phase, setPhase] = useState("typing");
+    const [cursorOn, setCursorOn] = useState(true);
+    const timer = useRef();
+    // Blinking cursor.
+    useEffect(() => {
+        const id = setInterval(() => setCursorOn((c) => !c), 450);
+        return () => clearInterval(id);
+    }, []);
+    useEffect(() => {
+        const word = GREETINGS[index];
+        const schedule = (fn, ms) => {
+            timer.current = setTimeout(fn, ms);
+        };
+        if (phase === "typing") {
+            if (text.length < word.length) {
+                schedule(() => setText(word.slice(0, text.length + 1)), 90);
+            }
+            else {
+                setPhase("holding");
+            }
+        }
+        else if (phase === "holding") {
+            schedule(() => setPhase("deleting"), 1400);
+        }
+        else {
+            if (text.length > 0) {
+                schedule(() => setText(word.slice(0, text.length - 1)), 45);
+            }
+            else {
+                setIndex((i) => (i + 1) % GREETINGS.length);
+                setPhase("typing");
+            }
+        }
+        return () => {
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, [text, phase, index]);
+    return (_jsxs(Text, { bold: true, color: "white", children: [text, _jsx(Text, { color: "cyanBright", children: cursorOn ? "▋" : " " })] }));
+};

package/dist/Knot.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useClock } from "./hooks.js";
+import { renderKnot } from "./knot-renderer.js";
+export const Knot = ({ cols = 26, rows = 14 }) => {
+    const t = useClock(24);
+    const frame = renderKnot(t, cols, rows);
+    return _jsx(Text, { color: "gray", children: frame });
+};

package/dist/cli.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink";
+import { App } from "./App.js";
+const args = process.argv.slice(2);
+if (args.includes("--help") || args.includes("-h")) {
+    console.log(`
+  ecklf — a terminal UI for ecklf.com
+
+  Usage
+    $ ecklf
+
+  Controls
+    ↑/↓ or j/k   navigate projects
+    ↵            open menu (Website / GitHub)
+    w            open ecklf.com
+    g            open selected project on GitHub
+    q            quit
+`);
+    process.exit(0);
+}
+if (args.includes("--version") || args.includes("-v")) {
+    console.log("1.0.0");
+    process.exit(0);
+}
+if (!process.stdin.isTTY) {
+    console.error("ecklf is an interactive terminal app — please run it directly in a terminal.");
+    process.exit(1);
+}
+// Enter alternate screen buffer so the TUI doesn't clutter scrollback.
+process.stdout.write("\x1b[?1049h");
+const { waitUntilExit } = render(_jsx(App, {}));
+waitUntilExit().then(() => {
+    process.stdout.write("\x1b[?1049l");
+});

package/dist/data.js

@@ -0,0 +1,92 @@
+const SITE_URL = "https://ecklf.com";
+/**
+ * Fallback data (last known good snapshot of ecklf.com) used when the
+ * site cannot be reached. Keeps the TUI useful offline.
+ */
+const FALLBACK = {
+    name: "I'm Florentin",
+    tagline: "Full Stack Developer from Germany",
+    subtitle: "Compute Infrastructure ▲ Vercel",
+    source: "fallback",
+    projects: [
+        { title: "tailwindcss-radix", description: "Utilities and variants for styling Radix state", github: "https://github.com/ecklf/tailwindcss-radix" },
+        { title: "tailwindcss-base-ui", description: "Utilities and variants for styling Base UI state", github: "https://github.com/ecklf/tailwindcss-base-ui" },
+        { title: "tailwindcss-figma-kit", description: "Design Kit for Utility-First CSS", github: "https://github.com/ecklf/tailwindcss-figma-kit" },
+        { title: "tailwindcss-figma-plugin", description: "Style importer for Figma", github: "https://github.com/ecklf/tailwindcss-figma-plugin" },
+        { title: "flutters", description: "Flappy Bird + Doodle Jump", github: "https://github.com/ecklf/flutters" },
+        { title: "coingecko-rs", description: "Rust client for the CoinGecko API", github: "https://github.com/ecklf/coingecko-rs" },
+        { title: "macos-tags", description: "Rust library for modifying macOS tags", github: "https://github.com/ecklf/macos-tags" },
+        { title: "reddit-clawler", description: "A simple Reddit Crawler written in Rust", github: "https://github.com/ecklf/reddit-clawler" },
+    ],
+};
+function decodeEntities(input) {
+    return input
+        .replace(/&/g, "&")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;|&#x27;/g, "'")
+        .replace(/&apos;/g, "'")
+        .replace(/&nbsp;/g, " ");
+}
+function stripTags(input) {
+    return decodeEntities(input.replace(/<[^>]*>/g, "")).replace(/\s+/g, " ").trim();
+}
+/**
+ * Parse the server-rendered ecklf.com markup. The project list lives inside
+ * <li> elements that each contain an <h3> title, a <p> description and an
+ * <a href="…github…"> link.
+ */
+export function parseSite(html) {
+    const projects = [];
+    const liRegex = /<li\b[^>]*>([\s\S]*?)<\/li>/gi;
+    let match;
+    while ((match = liRegex.exec(html)) !== null) {
+        const block = match[1];
+        const hrefMatch = block.match(/href="(https:\/\/github\.com\/ecklf\/[^"]+)"/i);
+        if (!hrefMatch)
+            continue;
+        const titleMatch = block.match(/<h3\b[^>]*>([\s\S]*?)<\/h3>/i);
+        const descMatch = block.match(/<p\b[^>]*>([\s\S]*?)<\/p>/i);
+        if (!titleMatch)
+            continue;
+        const title = stripTags(titleMatch[1]);
+        const description = descMatch ? stripTags(descMatch[1]) : "";
+        const github = hrefMatch[1];
+        if (title && !projects.some((p) => p.github === github)) {
+            projects.push({ title, description, github });
+        }
+    }
+    return projects;
+}
+export async function fetchSiteData(timeoutMs = 6000) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+        const res = await fetch(SITE_URL, {
+            signal: controller.signal,
+            headers: { "user-agent": "ecklf-cli" },
+        });
+        if (!res.ok)
+            throw new Error(`HTTP ${res.status}`);
+        const html = await res.text();
+        const projects = parseSite(html);
+        if (projects.length === 0)
+            return FALLBACK;
+        return {
+            name: FALLBACK.name,
+            tagline: FALLBACK.tagline,
+            subtitle: FALLBACK.subtitle,
+            projects,
+            source: "live",
+        };
+    }
+    catch {
+        return FALLBACK;
+    }
+    finally {
+        clearTimeout(timer);
+    }
+}
+export const websiteUrl = (project) => SITE_URL;
+export { SITE_URL, FALLBACK };

package/dist/hooks.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from "react";
+/**
+ * Drives a continuously increasing clock (seconds) using setInterval,
+ * suitable for animation. `fps` controls update frequency.
+ */
+export function useClock(fps = 20) {
+    const [t, setT] = useState(0);
+    const start = useRef(Date.now());
+    useEffect(() => {
+        const id = setInterval(() => {
+            setT((Date.now() - start.current) / 1000);
+        }, 1000 / fps);
+        return () => clearInterval(id);
+    }, [fps]);
+    return t;
+}
+export function useInterval(callback, ms) {
+    const saved = useRef(callback);
+    useEffect(() => {
+        saved.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        const id = setInterval(() => saved.current(), ms);
+        return () => clearInterval(id);
+    }, [ms]);
+}

package/dist/knot-renderer.js

@@ -0,0 +1,104 @@
+// 3D torus-knot wireframe renderer -> ASCII braille grid.
+// Mirrors the spinning wireframe on ecklf.com.
+// Generate vertices along a (p,q) torus knot.
+function torusKnot(samples, p = 2, q = 3, R = 1, r = 0.4) {
+    const pts = [];
+    for (let i = 0; i < samples; i++) {
+        const u = (i / samples) * Math.PI * 2;
+        const cu = Math.cos(q * u);
+        const x = (R + r * cu) * Math.cos(p * u);
+        const y = (R + r * cu) * Math.sin(p * u);
+        const z = r * Math.sin(q * u);
+        pts.push({ x, y, z });
+    }
+    return pts;
+}
+function rotate(p, ax, ay, az) {
+    // X
+    let { x, y, z } = p;
+    let cy = Math.cos(ax), sy = Math.sin(ax);
+    let ny = y * cy - z * sy;
+    let nz = y * sy + z * cy;
+    y = ny;
+    z = nz;
+    // Y
+    cy = Math.cos(ay);
+    sy = Math.sin(ay);
+    let nx = x * cy + z * sy;
+    nz = -x * sy + z * cy;
+    x = nx;
+    z = nz;
+    // Z
+    cy = Math.cos(az);
+    sy = Math.sin(az);
+    nx = x * cy - y * sy;
+    ny = x * sy + y * cy;
+    x = nx;
+    y = ny;
+    return { x, y, z };
+}
+// Braille dot bit layout (2 cols x 4 rows per cell).
+const BRAILLE_OFFSETS = [
+    [0x01, 0x08],
+    [0x02, 0x10],
+    [0x04, 0x20],
+    [0x40, 0x80],
+];
+const SAMPLES = 240;
+const KNOT = torusKnot(SAMPLES);
+/**
+ * Render the rotating knot to a string. `cols`/`rows` are character cell
+ * dimensions; the braille grid is 2x wider and 4x taller in dots.
+ */
+export function renderKnot(t, cols, rows) {
+    const dotW = cols * 2;
+    const dotH = rows * 4;
+    const grid = new Uint8Array(cols * rows);
+    const ax = t * 0.7;
+    const ay = t * 1.0;
+    const az = t * 0.3;
+    const scale = Math.min(dotW, dotH) * 0.32;
+    const cx = dotW / 2;
+    const cy = dotH / 2;
+    const persp = 3.2;
+    const projected = new Array(SAMPLES);
+    for (let i = 0; i < SAMPLES; i++) {
+        const r = rotate(KNOT[i], ax, ay, az);
+        const depth = persp / (persp + r.z);
+        const px = cx + r.x * scale * depth;
+        // terminal cells ~2x taller than wide -> compress vertical a touch
+        const py = cy + r.y * scale * depth * 1.0;
+        projected[i] = { x: px, y: py };
+    }
+    const plot = (x, y) => {
+        const xi = Math.round(x);
+        const yi = Math.round(y);
+        if (xi < 0 || xi >= dotW || yi < 0 || yi >= dotH)
+            return;
+        const cellX = xi >> 1;
+        const cellY = yi >> 2;
+        const idx = cellY * cols + cellX;
+        const bit = BRAILLE_OFFSETS[yi & 3][xi & 1];
+        grid[idx] |= bit;
+    };
+    // Draw line segments between consecutive (looping) knot points.
+    for (let i = 0; i < SAMPLES; i++) {
+        const a = projected[i];
+        const b = projected[(i + 1) % SAMPLES];
+        const steps = Math.max(1, Math.ceil(Math.hypot(b.x - a.x, b.y - a.y)));
+        for (let s = 0; s <= steps; s++) {
+            const f = s / steps;
+            plot(a.x + (b.x - a.x) * f, a.y + (b.y - a.y) * f);
+        }
+    }
+    let out = "";
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            const v = grid[row * cols + col];
+            out += v === 0 ? " " : String.fromCharCode(0x2800 + v);
+        }
+        if (row < rows - 1)
+            out += "\n";
+    }
+    return out;
+}

package/dist/open.js

@@ -0,0 +1,34 @@
+import { spawn } from "node:child_process";
+/**
+ * Open a URL in the user's default browser. Cross-platform, dependency-free.
+ */
+export function openUrl(url) {
+    const platform = process.platform;
+    let command;
+    let args;
+    if (platform === "darwin") {
+        command = "open";
+        args = [url];
+    }
+    else if (platform === "win32") {
+        command = "cmd";
+        args = ["/c", "start", "", url];
+    }
+    else {
+        command = "xdg-open";
+        args = [url];
+    }
+    try {
+        const child = spawn(command, args, {
+            stdio: "ignore",
+            detached: true,
+        });
+        child.on("error", () => {
+            /* swallow — nothing we can do in a TUI */
+        });
+        child.unref();
+    }
+    catch {
+        /* ignore */
+    }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "ecklf",
+  "version": "1.0.0",
+  "description": "A terminal UI for ecklf.com — browse Florentin's projects and open them on the web or GitHub, with a spinning ASCII wireframe and typed greetings.",
+  "keywords": [
+    "ecklf",
+    "cli",
+    "tui",
+    "ink",
+    "portfolio",
+    "terminal"
+  ],
+  "author": "Florentin Eckl <hi@ecklf.com> (https://ecklf.com)",
+  "license": "MIT",
+  "homepage": "https://ecklf.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ecklf/ecklf.git"
+  },
+  "type": "module",
+  "packageManager": "pnpm@10.33.0",
+  "bin": {
+    "ecklf": "dist/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "start": "node dist/cli.js",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "ink": "^5.0.1",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^26.0.1",
+    "@types/react": "^18.3.12",
+    "typescript": "^5.6.3"
+  }
+}