Skip to main content

Tool recommendations, PWA install prompt, per-tool OG images, and a global stash palette

· 3 min read
工具坞
工具坞
工具坞团队

Four small UX upgrades today, all about helping you find tools, install the site, share it, and move data between tools faster.

Tool recommendations at the bottom of every tool page​

  • A new "Similar tools" section now sits above the share/embed widget on every tool page.
  • Recommendations are computed from frontmatter tags (overlap * 3) plus same-category bonus (+1), capped at 4 results.
  • Cards reuse the homepage tool card styling - icon, title, two-line description, up to two tag chips, and an arrow link.

PWA install prompt​

  • A dismissible install banner now appears at the bottom of the screen on Chrome/Edge (listening to beforeinstallprompt), and shows a manual "share button -> add to home screen" instruction on iOS Safari.
  • Dismissing persists for 7 days in localStorage. The banner is hidden in standalone mode so installed users never see it.
  • The web manifest now ships 7 app shortcuts (JSON, Base64, timestamp, UUID, QR code, image compressor, regex). Long-pressing the installed icon on mobile surfaces them.

Per-tool OG images (static, generated at build time)​

  • A new scripts/generate-og-images.js scans every docs/*.mdx and emits a 1200x630 SVG into static/og/<tool-id>.svg (about 1-2 KB each, 77 files total).
  • Template: accent bar, brand logo, GONGJU.DEV label, category name, the tool title (wrapped to up to 3 lines), a two-line description, and a footer line "Free - Local - Privacy-first - gongju.dev".
  • The build pipeline now runs npm run gen-og before docusaurus build.
  • Each tool page injects og:image and twitter:image meta tags pointing to its own SVG. Twitter will fall back to the default social card since it doesn't accept SVG; Facebook, Slack, LinkedIn, Telegram and others render it natively.

Global stash palette (cross-tool data flow, no per-tool changes)​

  • Press Alt+S (or Ctrl/Cmd+Shift+V) anywhere on the site to summon a modal that lists your stashed items.
  • Search at the top filters by content. Up/Down arrows move the highlight, Enter inserts the selected item into whichever input was focused before you opened the palette, Esc closes.
  • Each item shows its type tag (text/json), relative timestamp ("just now", "5 minutes ago", "3 hours ago"), the content (clamped to 2 lines), and a copy-to-clipboard button.
  • The insertion uses React's native value setter plus input/change events, so it works with any controlled component without each tool having to expose a ref.
  • The first-visit toast now advertises all three global shortcuts: Ctrl+B for the workspace drawer, Ctrl+K for the command palette, and Alt+S for the stash palette.

Feedback welcome in the comments below - especially if the Alt+S shortcut collides with anything you rely on.