fangge 1.0.1 → 1.0.3

package/README.md

@@ -1,11 +1,11 @@
-# fango
+# fangge
 
 My terminal business card.
 
 ## Usage
 
 ```
-npx fango
+npx fangge
 ```
 
 ## Development

package/dist/cli.js

@@ -4,7 +4,7 @@
 import { render } from "ink";
 
 // source/app.tsx
-import { Box as Box4, Text as Text4, useApp, useInput as useInput2 } from "ink";
+import { Box as Box5, Text as Text6, useApp, useInput as useInput2 } from "ink";
 
 // source/data.ts
 var profile = {
@@ -44,10 +44,31 @@ var experiences = [
   }
 ];
 var projects = [
-  { name: "ListenHub", description: "AI audio platform", href: "https://listenhub.ai" },
-  { name: "LH Skills", description: "AI skills for Claude Code", href: "https://github.com/marswaveai/skills" },
-  { name: "LH SDK", description: "TypeScript SDK", href: "https://github.com/marswaveai/listenhub-sdk" },
-  { name: "fango-cli", description: "This terminal card", href: "https://github.com/0xFANGO/fango-cli" }
+  {
+    name: "ListenHub",
+    description: "AI podcast platform",
+    href: "https://listenhub.ai"
+  },
+  {
+    name: "LH Skills",
+    description: "AI skills for Claude Code",
+    href: "https://github.com/marswaveai/skills"
+  },
+  {
+    name: "LH CLI",
+    description: "Command-line interface for ListenHub",
+    href: "https://github.com/marswaveai/listenhub-cli"
+  },
+  {
+    name: "LH SDK",
+    description: "JavaScript SDK For ListenHub",
+    href: "https://github.com/marswaveai/listenhub-sdk"
+  },
+  {
+    name: "fango-cli",
+    description: "This terminal card",
+    href: "https://github.com/0xFANGO/fango-cli"
+  }
 ];
 var education = {
   school: "Beijing Univ. of Posts & Telecom",
@@ -55,12 +76,34 @@ var education = {
   from: "2014",
   to: "2018"
 };
+var musicUrl = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
 var links = [
   { label: "ListenHub", href: "https://listenhub.ai", display: "listenhub.ai" },
-  { label: "LH Skills", href: "https://github.com/marswaveai/skills", display: "github.com/marswaveai/skills" },
-  { label: "LH SDK", href: "https://github.com/marswaveai/listenhub-sdk", display: "github.com/marswaveai/listenhub-sdk" },
-  { label: "GitHub", href: "https://github.com/0xFANGO", display: "github.com/0xFANGO" },
-  { label: "Email", href: "mailto:silencerichard@163.com", display: "silencerichard@163.com" },
+  {
+    label: "LH Skills",
+    href: "https://github.com/marswaveai/skills",
+    display: "github.com/marswaveai/skills"
+  },
+  {
+    label: "LH CLI",
+    href: "https://github.com/marswaveai/listenhub-cli",
+    display: "github.com/marswaveai/listenhub-cli"
+  },
+  {
+    label: "LH SDK",
+    href: "https://github.com/marswaveai/listenhub-sdk",
+    display: "github.com/marswaveai/listenhub-sdk"
+  },
+  {
+    label: "GitHub",
+    href: "https://github.com/0xFANGO",
+    display: "github.com/0xFANGO"
+  },
+  {
+    label: "Email",
+    href: "mailto:silencerichard@163.com",
+    display: "silencerichard@163.com"
+  },
   { label: "Website", href: "https://fango.blog", display: "fango.blog" }
 ];
 
@@ -178,17 +221,218 @@ var Links = ({ links: links2 }) => {
   ] });
 };
 
-// source/app.tsx
+// source/components/music-player.tsx
+import { Text as Text4 } from "ink";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var MusicPlayer = ({ status }) => {
+  if (status === "loading") {
+    return /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "\u266A Loading..." });
+  }
+  if (status === "playing") {
+    return /* @__PURE__ */ jsxs4(Text4, { color: "cyan", children: [
+      "\u266A Playing \u2014 press ",
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "p" }),
+      " to pause"
+    ] });
+  }
+  if (status === "paused") {
+    return /* @__PURE__ */ jsxs4(Text4, { color: "yellow", children: [
+      "\u266A Paused \u2014 press ",
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "p" }),
+      " to resume"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+    "\u266A Press ",
+    /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "p" }),
+    " to play music"
+  ] });
+};
+
+// source/components/mascot.tsx
+import { Box as Box4, Text as Text5 } from "ink";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var R = "#E60012";
+var W = "#FFFFFF";
+var S = "#FFDAB9";
+var K = "#000000";
+var Mascot = () => /* @__PURE__ */ jsxs5(Box4, { flexDirection: "column", width: 11, children: [
+  /* @__PURE__ */ jsxs5(Text5, { children: [
+    "  ",
+    /* @__PURE__ */ jsx5(Text5, { color: R, children: "\u2584\u2584\u2588\u2588\u2588\u2584\u2584" }),
+    "  "
+  ] }),
+  /* @__PURE__ */ jsxs5(Text5, { children: [
+    /* @__PURE__ */ jsx5(Text5, { color: R, children: "\u2584\u2588" }),
+    /* @__PURE__ */ jsx5(Text5, { color: R, backgroundColor: R, children: "\u2580\u2580" }),
+    /* @__PURE__ */ jsx5(Text5, { color: R, children: "\u2588\u2588\u2588" }),
+    /* @__PURE__ */ jsx5(Text5, { color: R, backgroundColor: R, children: "\u2580\u2580" }),
+    /* @__PURE__ */ jsx5(Text5, { color: R, children: "\u2588\u2584" })
+  ] }),
+  /* @__PURE__ */ jsxs5(Text5, { children: [
+    "  ",
+    /* @__PURE__ */ jsx5(Text5, { color: S, children: "\u2588" }),
+    /* @__PURE__ */ jsx5(Text5, { color: W, backgroundColor: K, children: "\u2022" }),
+    /* @__PURE__ */ jsx5(Text5, { color: S, children: "\u2588\u2588\u2588" }),
+    /* @__PURE__ */ jsx5(Text5, { color: W, backgroundColor: K, children: "\u2022" }),
+    /* @__PURE__ */ jsx5(Text5, { color: S, children: "\u2588" }),
+    "  "
+  ] }),
+  /* @__PURE__ */ jsxs5(Text5, { children: [
+    "  ",
+    /* @__PURE__ */ jsx5(Text5, { color: S, children: "\u2588\u2588\u2588\u2588\u2588\u2588\u2588" }),
+    "  "
+  ] })
+] });
+
+// source/hooks/use-audio-player.ts
+import { useState as useState2, useEffect, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { spawn } from "child_process";
+import { createWriteStream, unlinkSync, existsSync } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+import { get as httpsGet } from "https";
+import { get as httpGet } from "http";
+function useAudioPlayer(url) {
+  const [status, setStatus] = useState2("idle");
+  const processRef = useRef2(null);
+  const tmpFileRef = useRef2(null);
+  const mountedRef = useRef2(true);
+  const getTmpPath = () => {
+    if (!tmpFileRef.current) {
+      tmpFileRef.current = join(tmpdir(), `fango-music-${Date.now()}.mp3`);
+    }
+    return tmpFileRef.current;
+  };
+  const download = useCallback2(
+    () => new Promise((resolve, reject) => {
+      const dest = getTmpPath();
+      if (existsSync(dest)) {
+        resolve(dest);
+        return;
+      }
+      const getter = url.startsWith("https") ? httpsGet : httpGet;
+      const file = createWriteStream(dest);
+      const request = getter(url, (res) => {
+        if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+          file.close();
+          const redirectGet = res.headers.location.startsWith("https") ? httpsGet : httpGet;
+          redirectGet(res.headers.location, (redirectRes) => {
+            redirectRes.pipe(file);
+            file.on("finish", () => {
+              file.close();
+              resolve(dest);
+            });
+          }).on("error", reject);
+          return;
+        }
+        res.pipe(file);
+        file.on("finish", () => {
+          file.close();
+          resolve(dest);
+        });
+      });
+      request.on("error", (err) => {
+        file.close();
+        try {
+          unlinkSync(dest);
+        } catch {
+        }
+        reject(err);
+      });
+    }),
+    [url]
+  );
+  const getPlayCommand = () => {
+    if (process.platform === "darwin") {
+      return { cmd: "afplay", args: (f) => [f] };
+    }
+    return { cmd: "mpv", args: (f) => ["--no-video", f] };
+  };
+  const play = useCallback2(async () => {
+    if (status === "playing") return;
+    if (status === "paused" && processRef.current) {
+      processRef.current.kill("SIGCONT");
+      setStatus("playing");
+      return;
+    }
+    setStatus("loading");
+    try {
+      const filePath = await download();
+      if (!mountedRef.current) return;
+      const { cmd, args } = getPlayCommand();
+      const proc = spawn(cmd, args(filePath), { stdio: "ignore" });
+      processRef.current = proc;
+      setStatus("playing");
+      proc.on("close", () => {
+        if (!mountedRef.current) return;
+        processRef.current = null;
+        setStatus("idle");
+      });
+      proc.on("error", () => {
+        if (!mountedRef.current) return;
+        processRef.current = null;
+        setStatus("idle");
+      });
+    } catch {
+      if (mountedRef.current) setStatus("idle");
+    }
+  }, [status, download]);
+  const pause = useCallback2(() => {
+    if (status === "playing" && processRef.current) {
+      processRef.current.kill("SIGSTOP");
+      setStatus("paused");
+    }
+  }, [status]);
+  const stop = useCallback2(() => {
+    if (processRef.current) {
+      processRef.current.kill("SIGKILL");
+      processRef.current = null;
+    }
+    setStatus("idle");
+  }, []);
+  const toggle = useCallback2(() => {
+    if (status === "playing") {
+      pause();
+    } else {
+      void play();
+    }
+  }, [status, pause, play]);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (processRef.current) {
+        processRef.current.kill("SIGKILL");
+        processRef.current = null;
+      }
+      if (tmpFileRef.current && existsSync(tmpFileRef.current)) {
+        try {
+          unlinkSync(tmpFileRef.current);
+        } catch {
+        }
+      }
+    };
+  }, []);
+  return { status, toggle, play, pause, stop };
+}
+
+// source/app.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var App = () => {
   const { exit } = useApp();
+  const audio = useAudioPlayer(musicUrl);
   useInput2((input) => {
     if (input === "q") {
+      audio.stop();
       exit();
     }
+    if (input === "p") {
+      audio.toggle();
+    }
   });
-  return /* @__PURE__ */ jsxs4(
-    Box4,
+  return /* @__PURE__ */ jsxs6(
+    Box5,
     {
       flexDirection: "column",
       borderStyle: "round",
@@ -196,28 +440,33 @@ var App = () => {
       paddingY: 1,
       width: 54,
       children: [
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "white", children: [
-            "\u266A ",
-            profile.fullName.first,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx4(Text4, { bold: true, color: "red", children: profile.fullName.last }),
-          /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
-            " (",
-            profile.name,
-            ")"
+        /* @__PURE__ */ jsxs6(Box5, { children: [
+          /* @__PURE__ */ jsx6(Box5, { width: 12, flexShrink: 0, children: /* @__PURE__ */ jsx6(Mascot, {}) }),
+          /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", flexGrow: 1, children: [
+            /* @__PURE__ */ jsxs6(Text6, { children: [
+              /* @__PURE__ */ jsxs6(Text6, { bold: true, color: "white", children: [
+                profile.fullName.first,
+                " "
+              ] }),
+              /* @__PURE__ */ jsx6(Text6, { bold: true, color: "red", children: profile.fullName.last }),
+              /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+                " (",
+                profile.name,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: profile.title }),
+            /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: profile.tagline })
           ] })
         ] }),
-        /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: profile.title }),
-        /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: profile.tagline }),
-        /* @__PURE__ */ jsx4(Experience, { experiences }),
-        /* @__PURE__ */ jsx4(Projects, { projects }),
-        /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingTop: 1, children: [
-          /* @__PURE__ */ jsx4(Text4, { bold: true, color: "red", children: "Education" }),
-          /* @__PURE__ */ jsxs4(Box4, { justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsx4(Text4, { children: education.school }),
-            /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        /* @__PURE__ */ jsx6(MusicPlayer, { status: audio.status }),
+        /* @__PURE__ */ jsx6(Experience, { experiences }),
+        /* @__PURE__ */ jsx6(Projects, { projects }),
+        /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", paddingTop: 1, children: [
+          /* @__PURE__ */ jsx6(Text6, { bold: true, color: "red", children: "Education" }),
+          /* @__PURE__ */ jsxs6(Box5, { justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx6(Text6, { children: education.school }),
+            /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
               education.degree,
               " ",
               education.from,
@@ -226,12 +475,12 @@ var App = () => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx4(Links, { links })
+        /* @__PURE__ */ jsx6(Links, { links })
       ]
     }
   );
 };
 
 // source/cli.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-render(/* @__PURE__ */ jsx5(App, {}));
+import { jsx as jsx7 } from "react/jsx-runtime";
+render(/* @__PURE__ */ jsx7(App, {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fangge",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Fango's terminal business card — run npx fango",
   "type": "module",
   "bin": {
@@ -32,6 +32,7 @@
     "react": "^18.3.1"
   },
   "devDependencies": {
+    "@types/node": "^25.6.0",
     "@types/react": "^18.3.28",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",