3D viewer overhaul: full-bleed + responsive, Web Worker STEP parse, progress bar, caption stats, inline models in text notes, STL fix, app widget; weekday dates (dateText); fix shields badge escaping; docs + licenses

This commit is contained in:
trilium-share-gruvbox
2026-08-28 18:15:50 +02:00
parent 3968011e3c
commit 41ec295954
9 changed files with 544 additions and 56 deletions
+51 -16
View File
@@ -44,10 +44,13 @@ CSS file (Gruvbox, light + dark, theme toggle without reload).
- **Article prev/next** (`scripts/prev_next.js`) is scoped to the article's category
(`blog_data.articles[].category`); falls back to the global list when uncategorized.
- **Menu sorting** (`scripts/menu_date_sort.js`, `shareHtmlLocation=body:end`): reads
`blog_data.articles[].date` (generator exposes the `date` label, fallback `dateCreated`,
`YYYY-MM-DD`), re-sorts each category's menu entries by date descending and prefixes the
label with `YYYY-MM-DD <shortened title>` (icons preserved). Non-article entries are left
in place.
`blog_data.articles[].date` (ISO, used for sorting via `data-pubdate`) and displays
`dateText` (`Fri 2026-08-28`), re-sorts each category's menu entries by date descending
and prefixes the label with `Fri 2026-08-28 <shortened title>` (icons preserved).
Non-article entries are left in place.
- **Dates**: all visible dates (post cards, garden table) are rendered by the generator's
`dateText()` helper as `Fri 2026-08-28` (English weekday + ISO date); `blog_data.date`
stays ISO for sorting, `blog_data.dateText` is added for display. JSON-LD keeps ISO dates.
- **Thumbnails** (`thumbSrc()`): prefer a child note of the article titled `*_thumb.*`
(e.g. `ngc281_thumb.jpg`) → `api/notes/<id>/download`; otherwise use the first `<img>`
from the note content. Layout: image left, summary right (`.blog-post-inner`),
@@ -55,6 +58,14 @@ CSS file (Gruvbox, light + dark, theme toggle without reload).
- Regenerates `feed.xml`, `sitemap.xml`, `state_map` (garden states) and `blog_data`
(search index: id/title/url/summary/tags/category). Sets `shareDescription` from `summary`.
## Publishing workflow (blog_publish_manager)
New notes are created under `Unpublished/<Category>` (the `Unpublished` root mirrors the blog
categories). Setting `publish=true` makes the manager clone the note into the matching blog
category (`ensureNoteIsPresentInParent`) and run the generator; setting it back to `false`
moves the clone back out of the blog. So: create the note under `Unpublished/<Category>`,
set the other labels, and set `publish=true` **last**.
## Wiring / attributes (the ground truth)
- All inheritable relations live on the **blog root**: `~shareCss → blog_share_theme.css`,
@@ -81,12 +92,19 @@ CSS file (Gruvbox, light + dark, theme toggle without reload).
- Embedded images: `#content img:not(.blog-thumb) { border-radius:8px }`.
- **Figure captions**: `#content figcaption` is a Gruvbox chip (secondary bg, highlight
border, 8px radius, muted italic text, centered).
- **3D models** (`scripts/3d_model_viewer.js`): `.step`/`.stp`/`.stl` file notes (title ends
in the extension) or inline attachment links (link text ends in the extension) get an
interactive three.js viewer (drag/zoom), 8px rounded box + caption. STEP is parsed by
occt-import-js (OpenCascade WASM). All five libraries are hosted as local notes and
referenced via `__THREE_ID__`/`__THREE_ORBIT_ID__`/`__THREE_STL_ID__`/`__OCCT_JS_ID__`/
`__OCCT_WASM_ID__`. User guide: `docs/embed-3d-model.md`.
- **3D models** (`scripts/3d_model_viewer.js`): renders `.step`/`.stp`/`.stl` as file notes
(title ends in the extension), inline attachment links, or links to published model file
notes from text notes (resolved via `window.blogData`). The viewer is **full-bleed**
(`~100vw`, `height: min(70vh, 900px)`, ResizeObserver), with a loading progress bar and a
caption that always shows `name · size · triangle count`. STEP is parsed by occt-import-js
(OpenCascade WASM) in a **Web Worker** (non-blocking) with
`linearDeflection: 0.0002, angularDeflection: 0.1`. Libraries hosted as local notes via
`__THREE_ID__`/`__THREE_ORBIT_ID__`/`__THREE_STL_ID__`/`__OCCT_JS_ID__`/`__OCCT_WASM_ID__`.
User guide: `docs/embed-3d-model.md`.
- **3D viewer in the Trilium app** (independent of the blog): `app/3d-model-viewer-app.jsx`
(widget, `#widget=3dModelViewer`, `parent: note-detail-pane`) + `app/3d-worker.js` (STEP
worker, loaded from a code note instead of a Blob so the app CSP allows it). The widget
renders the viewer for file notes whose title ends in `.step`/`.stp`/`.stl`.
- Images in the share are served full-size only (no resize endpoint) → keep the
`_thumb` child-note convention for small thumbnails.
- Built-in share footer navigation and book children list are hidden
@@ -116,10 +134,27 @@ CSS file (Gruvbox, light + dark, theme toggle without reload).
for bandwidth-friendly thumbnails.
- Comments/commits in the repo are English; communication with the owner is German.
## Releasing changes
## Releasing changes (do this after every change set)
Edit the corresponding Trilium note (live), verify on `richard.familie-zink.org`, then mirror
the anonymized file into this repo (replace `richard.familie-zink.org``https://YOUR-INSTANCE.example.com`,
`Richard's Blog``Your Blog`, and the note-ID tokens → `__…__`), update `README.md` if the
feature list changed, commit and push to `main`. Never commit real note IDs, the ETAPI token,
or personal data (name/domain are allowed in the README demo badge only).
1. Edit the corresponding Trilium note (live) and verify on `richard.familie-zink.org`.
2. Mirror the anonymized file(s) into this repo: replace
`richard.familie-zink.org``https://YOUR-INSTANCE.example.com`,
`Richard's Blog``Your Blog`, `by fam.zink``by the author`, and every note-ID
token → `__…_ID__` (mappings are the tokens already used in `blog_generator.js` /
`scripts/*.js`). New component notes (e.g. the app widget) get a `__…_ID__` token in
the repo reference file.
3. Check licenses: `THIRD_PARTY_LICENSES.md` must list every vendored third-party file;
original code stays GPL-3.0. Update it if new libraries were added.
4. Update docs if behaviour changed: `docs/embed-3d-model.md` (3D viewer), `README.md`
(features/layout) and this file.
5. Commit (English message) and push to `main` with the neutral identity
`trilium-share-gruvbox <trilium-share-gruvbox@users.noreply.git.familie-zink.org>`.
Never commit real note IDs, the ETAPI token, or personal data (name/domain are allowed
in the README demo badge only).
## Repo gotchas
- shields.io badges: a literal `-` in label/message must be escaped as `--` in the badge URL
(e.g. `familie-zink.org``familie--zink.org`), otherwise shields renders a "404 badge not
found" error badge.