kyh 0.0.1 → 0.1.0

package/dist/index.js

@@ -50971,6 +50971,35 @@ var AppContext = import_react.createContext({
   keyHandler: null,
   renderer: null
 });
+var useAppContext = () => {
+  return import_react.useContext(AppContext);
+};
+function useEffectEvent(handler) {
+  const handlerRef = import_react3.useRef(handler);
+  import_react3.useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+  return import_react3.useCallback((...args) => {
+    const fn = handlerRef.current;
+    return fn(...args);
+  }, []);
+}
+var useKeyboard = (handler, options = { release: false }) => {
+  const { keyHandler } = useAppContext();
+  const stableHandler = useEffectEvent(handler);
+  import_react2.useEffect(() => {
+    keyHandler?.on("keypress", stableHandler);
+    if (options?.release) {
+      keyHandler?.on("keyrelease", stableHandler);
+    }
+    return () => {
+      keyHandler?.off("keypress", stableHandler);
+      if (options?.release) {
+        keyHandler?.off("keyrelease", stableHandler);
+      }
+    };
+  }, [keyHandler, options.release]);
+};
 class ErrorBoundary extends import_react8.default.Component {
   constructor(props) {
     super(props);
@@ -51372,30 +51401,313 @@ function createRoot(renderer) {
   };
 }
 
+// src/index.tsx
+var import_react12 = __toESM(require_react(), 1);
+
+// src/data/content.ts
+var name = "Kaiyu Hsu";
+var heroText = `Hello world. You can call me Kai since we're pretty much friends now. I enjoy creating things for the internet. By day, I get to do that through investing, advising, and building products you may not have heard of, yet. Welcome to my corner of the web.`;
+var projects = [
+  {
+    title: "Vibedgames",
+    description: "Games made with vibes",
+    url: "https://vibedgames.com"
+  },
+  {
+    title: "Yours Sincerely",
+    description: "Anonymous love letters written in disappearing ink",
+    url: "https://yourssincerely.org"
+  },
+  {
+    title: "UICapsule",
+    description: "A curated collection of components that spark joy",
+    url: "https://uicapsule.com"
+  },
+  {
+    title: "Inteligir",
+    description: "Lifelong learning",
+    url: "https://inteligir.com"
+  },
+  {
+    title: "Dataembed",
+    description: "Search the web like a database",
+    url: "https://dataembed.com"
+  },
+  {
+    title: "Founding",
+    description: "Your proxy founding team",
+    url: "https://founding.so"
+  },
+  {
+    title: "Total Compensation Calculator",
+    description: "Navigate tech startup compensation",
+    url: "https://tc.kyh.io"
+  },
+  {
+    title: "Covid-19 Dashboard",
+    description: "Visualize global Covid-19 data",
+    url: "https://covid-19.kyh.io"
+  },
+  {
+    title: "Keiko and Friends",
+    description: "Cute sticker pack",
+    url: "https://apps.apple.com/us/app/id1209391711"
+  },
+  {
+    title: "Init",
+    description: "An AI native starter kit to build, launch, and scale your next project",
+    url: "https://init.kyh.io"
+  }
+];
+var work = [
+  {
+    title: "Sequoia",
+    description: "Helping the daring build legendary companies",
+    url: "https://sequoiacap.com"
+  },
+  {
+    title: "Vercel",
+    description: "Build and publish wonderful things",
+    url: "https://vercel.com"
+  },
+  {
+    title: "Google",
+    description: "Looking for something?",
+    url: "https://grow.google"
+  },
+  {
+    title: "Amazon",
+    description: "Earth's biggest bookstore",
+    url: "https://amazon.design"
+  },
+  {
+    title: "Cardiogram",
+    description: "Your personal healthcare assistant",
+    url: "https://apps.apple.com/us/app/cardiogram/id1000017994"
+  }
+];
+var contactLinks = [
+  { label: "Website", value: "kyh.io", url: "https://kyh.io" },
+  { label: "GitHub", value: "github.com/kyh", url: "https://github.com/kyh" },
+  { label: "X", value: "x.com/kaiyuhsu", url: "https://x.com/kaiyuhsu" },
+  { label: "LinkedIn", value: "linkedin.com/in/kyh", url: "https://linkedin.com/in/kyh" },
+  { label: "Email", value: "hello@kyh.io", url: "mailto:hello@kyh.io" }
+];
+
+// src/lib/utils.ts
+import { exec } from "child_process";
+import { platform } from "os";
+function openUrl(url) {
+  const cmd = platform() === "win32" ? "start" : platform() === "darwin" ? "open" : "xdg-open";
+  exec(`${cmd} "${url}"`);
+}
+function wrapText(text, width) {
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (currentLine.length + word.length + 1 <= width) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      if (currentLine)
+        lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+  if (currentLine)
+    lines.push(currentLine);
+  return lines;
+}
+
 // node_modules/@opentui/react/jsx-dev-runtime.js
 var import_jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
 
 // src/index.tsx
+var TITLE_WIDTH = 32;
+var PREFIX_WIDTH = 2;
+var DESC_INDENT = PREFIX_WIDTH + TITLE_WIDTH;
+var LABEL_WIDTH = 10;
+var DIM = "#666666";
+var HIGHLIGHT = "#00FFFF";
+var allItems = [...projects, ...work];
+process.stdout.write("\x1B[2J\x1B[H\x1B[?25l");
+process.on("exit", () => process.stdout.write("\x1B[?25h\x1B[2J\x1B[H"));
 function App() {
-  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-    alignItems: "center",
-    justifyContent: "center",
-    flexGrow: 1,
-    children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-      justifyContent: "center",
-      alignItems: "flex-end",
+  const [selectedIndex, setSelectedIndex] = import_react12.useState(0);
+  const [showContact, setShowContact] = import_react12.useState(false);
+  const [contactIndex, setContactIndex] = import_react12.useState(0);
+  const termWidth = process.stdout.columns || 80;
+  const contentWidth = termWidth - 4;
+  const descWidth = contentWidth - DESC_INDENT;
+  useKeyboard((key) => {
+    if (showContact) {
+      switch (key.name) {
+        case "up":
+        case "k":
+          setContactIndex((i) => i > 0 ? i - 1 : contactLinks.length - 1);
+          break;
+        case "down":
+        case "j":
+          setContactIndex((i) => i < contactLinks.length - 1 ? i + 1 : 0);
+          break;
+        case "return":
+          openUrl(contactLinks[contactIndex].url);
+          break;
+        case "escape":
+        case "c":
+          setShowContact(false);
+          setContactIndex(0);
+          break;
+      }
+      return;
+    }
+    switch (key.name) {
+      case "up":
+      case "k":
+        setSelectedIndex((i) => i > 0 ? i - 1 : allItems.length - 1);
+        break;
+      case "down":
+      case "j":
+        setSelectedIndex((i) => i < allItems.length - 1 ? i + 1 : 0);
+        break;
+      case "return":
+        openUrl(allItems[selectedIndex].url);
+        break;
+      case "c":
+        setShowContact(true);
+        break;
+      case "escape":
+      case "q":
+        process.exit(0);
+        break;
+    }
+  });
+  const heroLines = wrapText(heroText, contentWidth);
+  const divider = "\u2500".repeat(contentWidth);
+  const renderItem = (item, index, isFirst) => {
+    const isSelected = index === selectedIndex;
+    const prefix = isSelected ? "> " : "  ";
+    const title = item.title.padEnd(TITLE_WIDTH);
+    const descLines = wrapText(item.description, descWidth);
+    return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+      flexDirection: "column",
       children: [
-        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("ascii-font", {
-          font: "tiny",
-          text: "OpenTUI"
+        !isFirst && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          fg: DIM,
+          children: divider
         }, undefined, false, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-          attributes: TextAttributes.DIM,
-          children: "What will you build?"
-        }, undefined, false, undefined, this)
+          fg: isSelected ? undefined : DIM,
+          children: [
+            prefix,
+            title,
+            descLines[0]
+          ]
+        }, undefined, true, undefined, this),
+        descLines.slice(1).map((line, i) => /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          fg: isSelected ? undefined : DIM,
+          children: [
+            " ".repeat(DESC_INDENT),
+            line
+          ]
+        }, i, true, undefined, this))
       ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
+    }, item.title, true, undefined, this);
+  };
+  if (showContact) {
+    return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      flexGrow: 1,
+      children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: "Contact"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          contactLinks.map((link2, i) => {
+            const isSelected = i === contactIndex;
+            const prefix = isSelected ? "> " : "  ";
+            return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+              flexDirection: "row",
+              children: [
+                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                  children: prefix
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                  fg: HIGHLIGHT,
+                  children: link2.label.padEnd(LABEL_WIDTH)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                  fg: isSelected ? undefined : DIM,
+                  children: link2.value
+                }, undefined, false, undefined, this)
+              ]
+            }, link2.label, true, undefined, this);
+          }),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: DIM,
+            children: "\u2191\u2193 navigate  enter open  esc close"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+    flexDirection: "column",
+    paddingLeft: 2,
+    paddingTop: 1,
+    flexGrow: 1,
+    children: [
+      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+        flexDirection: "column",
+        flexGrow: 1,
+        children: [
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: name
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          heroLines.map((line, i) => /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: DIM,
+            children: line
+          }, i, false, undefined, this)),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: "Projects"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          projects.map((project, i) => renderItem(project, i, i === 0)),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: "Work"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            children: " "
+          }, undefined, false, undefined, this),
+          work.map((item, i) => renderItem(item, projects.length + i, i === 0))
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+        fg: DIM,
+        children: "\u2191\u2193 navigate  enter open  c contact  q quit"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 var renderer = await createCliRenderer();
 createRoot(renderer).render(/* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(App, {}, undefined, false, undefined, this));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyh",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Personal CLI tool",
   "type": "module",
   "bin": {
@@ -13,8 +13,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@opentui/core": "^0.1.67",
-    "@opentui/react": "^0.1.67",
+    "@opentui/core": "^0.1.69",
+    "@opentui/react": "^0.1.69",
     "react": "^19.2.3"
   },
   "devDependencies": {