a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
velxio/frontend/src/components/component-docs
History
David Montero Crespo c02547049d feat: ESP32 bridge seams, picker datasheets, S3/C3 examples + online-only board showcase 
Generic platform work ported from the internal line:
- Esp32BridgeFactory seam + rebuildEsp32Bridge + sync-I2C seam: a
  substitute simulation bridge (e.g. the hosted editor's in-browser JS
  emulators) can be installed without touching OSS code
- Component datasheets: hover popover (ComponentInfoPanel) + markdown
  docs for common parts
- Per-chip S3/C3 basics examples for the gallery
- .gitignore: never allow pro emulator mask ROMs into the OSS repo

New: online-only board showcase. Boards implemented by the hosted editor
(ESP32-C6, M5Stack Core, Cardputer ADV, Pimoroni RP2350 family) appear
in the picker as advertisement cards with an ONLINE badge linking to
velxio.com, where they are free to use. Ads auto-hide in any build that
registers the real BoardKind.
 		2026-07-21 00:22:19 -03:00
..
displays
…
input
…
output
…
sensors
…
README.md
…

README.md

Component datasheets

Hand-authored Markdown shown in the Component Picker's hover panel (ComponentInfoPanel). One file per component:

component-docs/<category>/<id>.md

Full authoring guide (with a per-component id checklist): docs/wiki/component-datasheets.md

  • <id> MUST match the component id in public/components-metadata.json (the loader in componentDocs.ts matches by filename and ignores the category folder, so the folder is purely for tidiness).
  • <category> — pick the closest ComponentCategory (sensors, displays, input, output, motors, passive, logic, analog, electromech, boards, other).
  • Keep it scannable. The panel is a hover popover — a good doc is a one-line overview, a pinout table, a few spec bullets, and one wiring tip. The panel is scrollable, so longer datasheets are fine; front-load the essentials.
  • GitHub-flavoured Markdown is supported (tables, lists, `code`, bold, links). Raw HTML is not rendered (react-markdown default).

Front-matter (optional)

A doc may start with a small ----delimited block giving the component's brand and a purchase link. Both are optional; when present the panel shows a "by " line under the title and a Buy button in the footer.

---
brand: Aosong (AM2302)
buy: https://www.example.com/product/dht22
---
Body markdown starts here…
  • brand — manufacturer / brand name (plain text).
  • buy — purchase URL. Must be http(s):// (other schemes are ignored for safety). The seeded docs use vendor search URLs as placeholders — swap them for the real product or affiliate link.

The panel already lists the live default Properties from metadata below your doc, so don't repeat property defaults here — focus on what the JSON can't express: how the part works, its pinout, wiring, and gotchas.

Adding a doc

  1. Create component-docs/<category>/<id>.md.
  2. Write the overview + pinout + tips.
  3. That's it — the file is picked up automatically (Vite import.meta.glob), loaded on first hover and cached. No registration needed.