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
+14 -6
View File
@@ -1,7 +1,7 @@
# Trilium Share Gruvbox Blog System
[![License](https://img.shields.io/badge/License-GPL--3.0-fb4934)](LICENSE)
[![Live demo](https://img.shields.io/badge/Live%20demo-richard.familie-zink.org-8ec07c)](https://richard.familie-zink.org)
[![Live demo](https://img.shields.io/badge/Live%20demo-richard.familie--zink.org-8ec07c)](https://richard.familie-zink.org)
[![TriliumNext](https://img.shields.io/badge/TriliumNext-Public%20Share-83a598)](https://github.com/TriliumNext/Trilium)
[![Theme](https://img.shields.io/badge/Theme-Gruvbox-98971a)](https://github.com/morhetz/gruvbox)
[![Built with](https://img.shields.io/badge/Built%20with-Opencode-fe8019)](https://opencode.ai)
@@ -27,7 +27,8 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
- Gruvbox light/dark theme for the share, with a theme toggle in the header.
- Blog index, category pages, sub-categories, tags and tag overview.
- **Menu sorting**: articles in the left menu are sorted by publication date (newest first)
and labelled `YYYY-MM-DD <shortened title>` automatically.
and labelled `Fri 2026-08-28 <shortened title>` automatically. All date displays
(post cards, garden table, menu) include the weekday (`dateText` from the generator).
- **Article thumbnails**: each post card shows the first image of the article on the left
(bounded by the teaser height), summary on the right, lazy-loaded. If an article has a child
note named `*_thumb.*` (e.g. `ngc281_thumb.jpg`), that image is used instead ideal for
@@ -44,10 +45,15 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
(`templates/share/page.ejs`).
- **Widget rendering** for Mermaid, Excalidraw (canvas) and MindElixir (mind map) notes, with a
collapsible, highlighted "Source" block and copy button.
- **3D models**: `.step` / `.stp` / `.stl` files (as file notes or inline attachments) render
in an interactive three.js viewer (STEP via occt-import-js, OpenCascade WASM) drag to
rotate, scroll to zoom, 8px rounded box with caption. All libraries are hosted locally.
See [docs/embed-3d-model.md](docs/embed-3d-model.md).
- **3D models**: `.step` / `.stp` / `.stl` files (as file notes, as inline attachments, or linked
from text notes) render in an interactive three.js viewer (STEP via occt-import-js, OpenCascade
WASM, parsed in a **Web Worker** so the page stays responsive). The viewer is **full-bleed**
(~`100vw`) with a viewport-based height, drag to rotate / scroll to zoom, rounded 8px box, a
loading progress bar and a caption that always shows `name · size · triangle count`.
STEP tessellation is dense (≈0.11 M+ triangles for assemblies). See
[docs/embed-3d-model.md](docs/embed-3d-model.md).
- **3D viewer inside Trilium (app widget)**: the same viewer runs in the Trilium app itself
(independent of the blog) via a `note-detail-pane` widget see `app/`.
- Code highlighting (highlight.js + line numbers) and copy buttons on all code boxes.
- Optional "Buy me a coffee" button with locally-hosted Cookie font.
- `blog_generator` (backend) builds index/feed/sitemap/search-data; `blog_publish_manager` moves
@@ -66,6 +72,8 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
| `lib/3d/*` | three.js + OrbitControls + STLLoader + occt-import-js (WASM) for the 3D viewer | code / file |
| `lib/hljs_line_numbers.js` | highlight.js line-numbers plugin | code |
| `scripts/*.js` | frontend share snippets (content is pasted **verbatim** into a code note, including the `<script>`/`<style>` wrapper) | code |
| `app/3d-model-viewer-app.jsx` | JSX widget that renders the 3D viewer for model file notes inside the Trilium app (label `#widget=3dModelViewer`) | code, `text/jsx` |
| `app/3d-worker.js` | Web Worker (STEP parsing) loaded by the app widget from a code note (CSP-safe) | code, `text/javascript` |
| `templates/blog_article.html` | article template with promoted labels | text |
| `templates/share/*.ejs` | custom share template + partials (canonical, OG, JSON-LD, robots) | code, `application/x-ejs` |
| `assets/og-banner.png` | default Open Graph image (1200×630, replace with your own) | file |