fangge 1.0.1

package/README.md

@@ -0,0 +1,23 @@
+# fango
+
+My terminal business card.
+
+## Usage
+
+```
+npx fango
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## Build
+
+```bash
+pnpm build
+node dist/cli.js
+```

package/dist/cli.js

@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+
+// source/cli.tsx
+import { render } from "ink";
+
+// source/app.tsx
+import { Box as Box4, Text as Text4, useApp, useInput as useInput2 } from "ink";
+
+// source/data.ts
+var profile = {
+  name: "Fango",
+  fullName: { first: "Fangge", last: "Zhao" },
+  title: "Solo Builder & AI Engineer",
+  tagline: "Building ListenHub \u2014 turn anything into podcasts, speech & video."
+};
+var experiences = [
+  {
+    company: "MarsWave AI",
+    location: "Beijing",
+    title: "Full Stack Engineer",
+    from: "2025",
+    to: "Present"
+  },
+  {
+    company: "TikTok",
+    location: "Beijing",
+    title: "Sr. Frontend Engineer",
+    from: "2024",
+    to: "2025"
+  },
+  {
+    company: "DiDi",
+    location: "Beijing",
+    title: "Sr. Frontend Engineer",
+    from: "2021",
+    to: "2023"
+  },
+  {
+    company: "SF Express",
+    location: "Beijing",
+    title: "Frontend Engineer",
+    from: "2018",
+    to: "2021"
+  }
+];
+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" }
+];
+var education = {
+  school: "Beijing Univ. of Posts & Telecom",
+  degree: "B.S.",
+  from: "2014",
+  to: "2018"
+};
+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: "Website", href: "https://fango.blog", display: "fango.blog" }
+];
+
+// source/components/experience.tsx
+import { Box, Text } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+function truncate(str, max) {
+  return str.length > max ? str.slice(0, max - 1) + "\u2026" : str;
+}
+var Experience = ({ experiences: experiences2 }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    flexDirection: "column",
+    borderStyle: "round",
+    paddingX: 1,
+    paddingY: 1,
+    children: [
+      /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "Experience" }) }),
+      experiences2.map((exp) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+        /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "white", children: truncate(exp.company, 20) }),
+          /* @__PURE__ */ jsx(Text, { children: truncate(exp.title, 22) })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: exp.location }),
+          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+            exp.from,
+            " \u2013 ",
+            exp.to
+          ] })
+        ] })
+      ] }, `${exp.company}-${exp.from}`))
+    ]
+  }
+);
+
+// source/components/projects.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function truncate2(str, max) {
+  return str.length > max ? str.slice(0, max - 1) + "\u2026" : str;
+}
+var Projects = ({ projects: projects2 }) => /* @__PURE__ */ jsxs2(
+  Box2,
+  {
+    flexDirection: "column",
+    borderStyle: "round",
+    paddingX: 1,
+    paddingY: 1,
+    children: [
+      /* @__PURE__ */ jsx2(Box2, { marginBottom: 1, children: /* @__PURE__ */ jsx2(Text2, { bold: true, color: "red", children: "Projects" }) }),
+      projects2.map((proj) => /* @__PURE__ */ jsxs2(Box2, { gap: 1, children: [
+        /* @__PURE__ */ jsx2(Text2, { bold: true, color: "white", children: proj.name }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "\xB7" }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: truncate2(proj.description, 30) })
+      ] }, proj.name))
+    ]
+  }
+);
+
+// source/components/links.tsx
+import { Box as Box3, Text as Text3, useInput } from "ink";
+import { useState, useCallback, useRef } from "react";
+import open from "open";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function truncate3(str, max) {
+  return str.length > max ? str.slice(0, max - 1) + "\u2026" : str;
+}
+var Links = ({ links: links2 }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [successHint, setSuccessHint] = useState(false);
+  const [failedUrl, setFailedUrl] = useState(null);
+  const lastOpenTime = useRef(0);
+  const handleSelect = useCallback(async () => {
+    const now = Date.now();
+    if (now - lastOpenTime.current < 500) return;
+    lastOpenTime.current = now;
+    const link = links2[selectedIndex];
+    try {
+      await open(link.href);
+      setSuccessHint(true);
+      setFailedUrl(null);
+      setTimeout(() => setSuccessHint(false), 1e3);
+    } catch {
+      setSuccessHint(false);
+      setFailedUrl(link.href);
+    }
+  }, [links2, selectedIndex]);
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((i) => i > 0 ? i - 1 : links2.length - 1);
+      setSuccessHint(false);
+    } else if (key.downArrow) {
+      setSelectedIndex((i) => i < links2.length - 1 ? i + 1 : 0);
+      setSuccessHint(false);
+    } else if (key.return) {
+      void handleSelect();
+    }
+  });
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingTop: 1, children: [
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Use \u2191\u2193 arrows to select, Enter to open:" }),
+    /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", paddingTop: 1, children: links2.map((link, index) => {
+      const isSelected = index === selectedIndex;
+      return /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+        /* @__PURE__ */ jsx3(Text3, { color: isSelected ? "cyan" : void 0, children: isSelected ? "\u276F" : " " }),
+        /* @__PURE__ */ jsx3(Text3, { bold: isSelected, color: isSelected ? "cyan" : void 0, children: link.label }),
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: truncate3(link.display, 28) }),
+        isSelected && successHint && /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: " Opened!" })
+      ] }, link.label);
+    }) }),
+    failedUrl && /* @__PURE__ */ jsxs3(Box3, { paddingTop: 1, children: [
+      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "Could not open \u2014 copy this URL: " }),
+      /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: failedUrl })
+    ] })
+  ] });
+};
+
+// source/app.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var App = () => {
+  const { exit } = useApp();
+  useInput2((input) => {
+    if (input === "q") {
+      exit();
+    }
+  });
+  return /* @__PURE__ */ jsxs4(
+    Box4,
+    {
+      flexDirection: "column",
+      borderStyle: "round",
+      paddingX: 2,
+      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__ */ 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: [
+              education.degree,
+              " ",
+              education.from,
+              "\u2013",
+              education.to
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4(Links, { links })
+      ]
+    }
+  );
+};
+
+// source/cli.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+render(/* @__PURE__ */ jsx5(App, {}));

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "fangge",
+  "version": "1.0.1",
+  "description": "Fango's terminal business card — run npx fango",
+  "type": "module",
+  "bin": {
+    "fangge": "./dist/cli.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsx source/cli.tsx",
+    "test": "echo 'no tests'",
+    "prepublishOnly": "pnpm build"
+  },
+  "keywords": [
+    "cli",
+    "card",
+    "terminal",
+    "npx"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "ink": "^5.2.1",
+    "ink-link": "^4.1.0",
+    "open": "^10.2.0",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.28",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}