@zjy4fun/json-open 0.1.1

package/.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Run tests
+        run: npm test

package/.github/workflows/publish-gpr.yml

@@ -0,0 +1,31 @@
+name: Publish to GitHub Packages
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  publish-gpr:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node for GitHub Packages
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://npm.pkg.github.com
+          scope: '@zjy4fun'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish package to GitHub Packages
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/publish.yml

@@ -0,0 +1,35 @@
+name: Publish to npm (tag)
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+
+      - run: npm ci
+      - run: npm test --if-present
+      - run: npm run build --if-present
+
+      - name: Verify tag matches package version
+        run: |
+          TAG_VERSION="${GITHUB_REF_NAME#v}"
+          PKG_VERSION=$(node -p "require('./package.json').version")
+          [ "$TAG_VERSION" = "$PKG_VERSION" ] || (echo "Tag $TAG_VERSION != package.json $PKG_VERSION" && exit 1)
+
+      - run: npm publish --access public --provenance

package/README.md

@@ -0,0 +1,160 @@
+# json-open
+
+Open JSON in your browser with a collapsible tree view (supports stdin and inline JSON text).
+
+> A tiny CLI for command-line users: feed JSON, instantly inspect it in a browser with foldable structure.
+
+## Demo
+
+![json-open demo](./demo.gif)
+
+---
+
+## Why this exists
+
+Reading JSON in a terminal is often painful:
+
+- Long output is hard to scan
+- Deep nesting is hard to understand quickly
+- Heavy tools feel overkill for quick debugging
+
+`json-open` keeps this simple: **make JSON inspection fast and visual**.
+
+---
+
+## Features
+
+- ✅ Pipe input: `curl ... | json`
+- ✅ Inline JSON: `json '{"a":1}'`
+- ✅ Collapsible tree view in browser
+- ✅ Expand all / Collapse all buttons
+- ✅ Rendered from local temp file (no remote upload)
+- ✅ Cross-platform browser open (macOS / Linux / Windows)
+
+---
+
+## Installation
+
+### Option A: GitHub Packages (current primary channel)
+
+Configure npm for GitHub Packages first:
+
+```bash
+echo "@zjy4fun:registry=https://npm.pkg.github.com" >> ~/.npmrc
+echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> ~/.npmrc
+```
+
+Then install:
+
+```bash
+npm i -g @zjy4fun/json-open
+```
+
+### Option B: Local development install
+
+```bash
+git clone https://github.com/zjy4fun/json-open.git
+cd json-open
+npm install
+npm link
+```
+
+After that, the `json` command is available globally.
+
+---
+
+## Quick start
+
+```bash
+# 1) API response
+curl https://jsonplaceholder.typicode.com/todos/1 | json
+
+# 2) Inline JSON
+json '{"hello":"world","list":[1,2,3]}'
+
+# 3) JSON file content
+cat response.json | json
+```
+
+The command opens your browser and shows a JSON tree view.
+
+---
+
+## Common use cases
+
+1. **API debugging**  
+   Inspect response shape quickly, especially nested data.
+
+2. **Backend/frontend integration checks**  
+   Verify missing fields or type mismatches after API changes.
+
+3. **Ad-hoc JSON inspection**  
+   Visualize JSON copied from logs, queues, or snapshots.
+
+4. **Team discussion/demo**  
+   Share a clearer structure view when discussing payloads.
+
+---
+
+## Command behavior
+
+```bash
+json
+```
+
+Input source:
+
+- stdin (pipe)
+- inline argument JSON string
+
+Example:
+
+```bash
+json '{"ok":true}'
+```
+
+If no input is provided, it prints usage help.
+
+---
+
+## Release & distribution
+
+Included GitHub Actions workflows:
+
+- `CI`: basic validation flow
+- `Publish to GitHub Packages`: publish to GPR
+- `Publish to npm (Trusted Publishing)`: reserved for npm OIDC flow
+
+Current primary distribution: **GitHub Packages**.
+
+---
+
+## Contributing
+
+Issues and PRs are welcome.
+
+### Good contribution ideas
+
+- Better error diagnostics (e.g. JSON syntax location)
+- Theme switch (light/dark)
+- Direct file path support (e.g. `json ./data.json`)
+- Rich interactions (search, highlight, copy JSON path)
+
+### Local development
+
+```bash
+npm install
+npm test
+```
+
+Before submitting:
+
+- Ensure code runs correctly
+- Ensure README examples still work
+- Keep changes focused and clear
+
+---
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,160 @@
+# json-open
+
+把 JSON 直接在浏览器里以可折叠树形结构查看（支持 stdin 和行内 JSON 字符串）。
+
+> 一个给命令行用户准备的「JSON 临时观察器」：输入 JSON，立刻打开浏览器查看结构。
+
+## 演示
+
+![json-open 演示](./demo.gif)
+
+---
+
+## 为什么做这个
+
+在终端里看 JSON 常见痛点：
+
+- 内容太长，不好定位
+- 嵌套太深，不直观
+- 临时调试不想上重型工具
+
+`json-open` 的目标是：**让“看 JSON”这一步更快更顺手**。
+
+---
+
+## 功能特性
+
+- ✅ 支持管道输入：`curl ... | json`
+- ✅ 支持行内 JSON：`json '{"a":1}'`
+- ✅ 浏览器树形展示（可折叠/展开）
+- ✅ 一键全展开 / 全收起
+- ✅ 本地临时文件渲染，不上传数据
+- ✅ 跨平台打开浏览器（macOS / Linux / Windows）
+
+---
+
+## 安装
+
+### 方式一：GitHub Packages（当前主分发）
+
+先配置 npm 使用 GitHub Packages：
+
+```bash
+echo "@zjy4fun:registry=https://npm.pkg.github.com" >> ~/.npmrc
+echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> ~/.npmrc
+```
+
+然后安装：
+
+```bash
+npm i -g @zjy4fun/json-open
+```
+
+### 方式二：本地开发安装
+
+```bash
+git clone https://github.com/zjy4fun/json-open.git
+cd json-open
+npm install
+npm link
+```
+
+安装后可全局使用 `json` 命令。
+
+---
+
+## 快速开始
+
+```bash
+# 1) API 返回
+curl https://jsonplaceholder.typicode.com/todos/1 | json
+
+# 2) 行内 JSON
+json '{"hello":"world","list":[1,2,3]}'
+
+# 3) 文件内容
+cat response.json | json
+```
+
+执行后会自动打开浏览器，展示 JSON 树形视图。
+
+---
+
+## 常见应用场景
+
+1. **API 调试**  
+   快速查看接口返回结构，尤其是深层嵌套数据。
+
+2. **前后端联调**  
+   接口变更后快速确认字段缺失或类型异常。
+
+3. **临时数据检查**  
+   对日志、队列、快照中的 JSON 做可视化排查。
+
+4. **沟通与演示**  
+   与同事讨论 payload 时更直观。
+
+---
+
+## 命令行为
+
+```bash
+json
+```
+
+输入来源：
+
+- stdin（管道）
+- 命令行参数中的 JSON 字符串
+
+示例：
+
+```bash
+json '{"ok":true}'
+```
+
+如果没有输入，会输出 usage 提示。
+
+---
+
+## 发布与分发
+
+仓库已包含 GitHub Actions：
+
+- `CI`：基础校验流程
+- `Publish to GitHub Packages`：发布到 GPR
+- `Publish to npm (Trusted Publishing)`：预留 npm OIDC 发布流程
+
+当前主分发方式：**GitHub Packages**。
+
+---
+
+## 参与贡献
+
+欢迎提 Issue / PR。
+
+### 建议贡献方向
+
+- 更好的错误提示（如 JSON 语法错误定位）
+- 主题切换（亮色/暗色）
+- 支持直接读取文件路径（如 `json ./data.json`）
+- 更丰富交互（搜索、高亮、复制 JSON Path）
+
+### 本地开发
+
+```bash
+npm install
+npm test
+```
+
+提交前建议：
+
+- 确保代码可运行
+- 确保 README 示例可复现
+- 改动保持聚焦、清晰
+
+---
+
+## 许可证
+
+MIT

package/bin/json.js

@@ -0,0 +1,213 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises'
+import os from 'node:os'
+import path from 'node:path'
+import { spawn } from 'node:child_process'
+
+function readStdin() {
+  return new Promise((resolve, reject) => {
+    let data = ''
+    process.stdin.setEncoding('utf8')
+    process.stdin.on('data', (chunk) => (data += chunk))
+    process.stdin.on('end', () => resolve(data.trim()))
+    process.stdin.on('error', reject)
+  })
+}
+
+function escapeHtml(str) {
+  return str
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+function valueToHtml(value, key = null) {
+  const keyHtml = key === null ? '' : `<span class=\"key\">${escapeHtml(String(key))}</span><span class=\"colon\">: </span>`
+
+  if (value === null) {
+    return `<div class=\"line\">${keyHtml}<span class=\"null\">null</span></div>`
+  }
+
+  const type = typeof value
+
+  if (type === 'string') {
+    return `<div class=\"line\">${keyHtml}<span class=\"string\">\"${escapeHtml(value)}\"</span></div>`
+  }
+
+  if (type === 'number') {
+    return `<div class=\"line\">${keyHtml}<span class=\"number\">${String(value)}</span></div>`
+  }
+
+  if (type === 'boolean') {
+    return `<div class=\"line\">${keyHtml}<span class=\"boolean\">${String(value)}</span></div>`
+  }
+
+  if (Array.isArray(value)) {
+    const children = value
+      .map((item, idx) => `<li>${valueToHtml(item, idx)}</li>`)
+      .join('')
+
+    return `
+      <details open>
+        <summary>${keyHtml}<span class=\"symbol\">[ ]</span> <span class=\"meta\">(${value.length} items)</span></summary>
+        <ul>${children}</ul>
+      </details>
+    `
+  }
+
+  if (type === 'object') {
+    const entries = Object.entries(value)
+    const children = entries
+      .map(([childKey, childValue]) => `<li>${valueToHtml(childValue, childKey)}</li>`)
+      .join('')
+
+    return `
+      <details open>
+        <summary>${keyHtml}<span class=\"symbol\">{ }</span> <span class=\"meta\">(${entries.length} keys)</span></summary>
+        <ul>${children}</ul>
+      </details>
+    `
+  }
+
+  return `<div class=\"line\">${keyHtml}<span>${escapeHtml(String(value))}</span></div>`
+}
+
+function toHtml(jsonObj) {
+  const body = valueToHtml(jsonObj)
+  return `<!doctype html>
+<html lang=\"en\">
+<head>
+  <meta charset=\"UTF-8\" />
+  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
+  <title>JSON Response Viewer</title>
+  <style>
+    :root {
+      color-scheme: dark;
+    }
+    body {
+      margin: 0;
+      padding: 24px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+      background: #0f172a;
+      color: #e2e8f0;
+      line-height: 1.5;
+    }
+    .toolbar {
+      position: sticky;
+      top: 0;
+      background: rgba(15, 23, 42, 0.8);
+      backdrop-filter: blur(6px);
+      border-bottom: 1px solid #334155;
+      padding: 12px 0;
+      margin-bottom: 16px;
+      display: flex;
+      gap: 8px;
+    }
+    button {
+      border: 1px solid #475569;
+      background: #1e293b;
+      color: #e2e8f0;
+      border-radius: 8px;
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #334155;
+    }
+    details {
+      margin-left: 16px;
+    }
+    summary {
+      cursor: pointer;
+      list-style: none;
+    }
+    summary::-webkit-details-marker {
+      display: none;
+    }
+    summary::before {
+      content: '▸';
+      margin-right: 6px;
+      color: #94a3b8;
+    }
+    details[open] > summary::before {
+      content: '▾';
+    }
+    ul {
+      list-style: none;
+      margin: 4px 0 0 12px;
+      padding-left: 12px;
+      border-left: 1px dashed #334155;
+    }
+    .key { color: #93c5fd; }
+    .colon { color: #94a3b8; }
+    .string { color: #86efac; }
+    .number { color: #fcd34d; }
+    .boolean { color: #f9a8d4; }
+    .null { color: #cbd5e1; }
+    .symbol { color: #c4b5fd; }
+    .meta { color: #64748b; }
+  </style>
+</head>
+<body>
+  <div class=\"toolbar\">
+    <button id=\"expand-all\">Expand all</button>
+    <button id=\"collapse-all\">Collapse all</button>
+  </div>
+  <main>${body}</main>
+  <script>
+    const details = () => Array.from(document.querySelectorAll('details'))
+    document.getElementById('expand-all').addEventListener('click', () => details().forEach((d) => d.open = true))
+    document.getElementById('collapse-all').addEventListener('click', () => details().forEach((d) => d.open = false))
+  </script>
+</body>
+</html>`
+}
+
+function openInBrowser(filePath) {
+  const platform = process.platform
+  const command = platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open'
+
+  if (platform === 'win32') {
+    spawn('cmd', ['/c', command, filePath], { detached: true, stdio: 'ignore' }).unref()
+    return
+  }
+
+  spawn(command, [filePath], { detached: true, stdio: 'ignore' }).unref()
+}
+
+async function main() {
+  const inlineInput = process.argv.slice(2).join(' ').trim()
+
+  if (!inlineInput && process.stdin.isTTY) {
+    console.error('Usage: curl https://example.com | json\n   or: json "{\"hello\":\"world\"}"')
+    process.exit(1)
+  }
+
+  const input = inlineInput || (await readStdin())
+
+  if (!input) {
+    console.error('No JSON input received.')
+    process.exit(1)
+  }
+
+  let parsed
+  try {
+    parsed = JSON.parse(input)
+  } catch {
+    console.error('Input is not valid JSON.')
+    process.exit(1)
+  }
+
+  const html = toHtml(parsed)
+  const filePath = path.join(os.tmpdir(), `json-viewer-${Date.now()}.html`)
+  await fs.writeFile(filePath, html, 'utf8')
+  openInBrowser(filePath)
+  console.log(`Opened JSON viewer: ${filePath}`)
+}
+
+main().catch((err) => {
+  console.error('Unexpected error:', err.message)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@zjy4fun/json-open",
+  "version": "0.1.1",
+  "description": "Open JSON (stdin or inline text) in a browser with collapsible tree view",
+  "type": "module",
+  "bin": {
+    "json": "bin/json.js"
+  },
+  "scripts": {
+    "start": "node bin/json.js",
+    "test": "node --test"
+  },
+  "keywords": [
+    "json",
+    "curl",
+    "cli",
+    "browser",
+    "formatter"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}