Files

T

trilium-share-gruvbox 2818c40f96 feat(embeds): geo/gpx/3D/YouTube/media keyword system + docs, sanitized mirrors

- new snippet geo_map_render.js: [map] inline geomaps (tree order, tint,
  theme-following), [gpx] stats card + elevation profile with hover cursor
  (km from start, d-height, vertical guide), [yt] privacy click-to-load
  facade, [video]/[audio] inline players fed from the new geoData indexes
- 3d_model_viewer.js: [cad] keyword + title/ID resolution via geoData.cad,
  sizes/captions, real occt-wasm ESM pair (fixes 'STEP worker error'),
  code-span-safe keyword scan (docs can show examples)
- blog_generator.js: buildGeoData() v6 – maps (geolocation + geoShape
  point/line/polygon + child GPX tracks), gpx/cad/media indexes,
  branch-change rebuild for route reordering
- generated/geo_data.js placeholder; docs/embed-keywords.md (new) +
  embed-3d-model Option D; README layout/wiring/notes tables updated
- license: runtime components (MapLibre ISC, VersaTiles MIT/ODbL, YouTube)
- hygiene: removed leaked note IDs and instance domain from theme docs

2026-09-28 14:53:51 +02:00

3.4 KiB

Raw Blame History

Inline embed keywords (map / gpx / cad / yt / video / audio)

The share renders small text keywords into interactive widgets, client-side, from two shareHtml snippets: scripts/geo_map_render.js (map, gpx, yt, video, audio) and scripts/3d_model_viewer.js (cad). Keywords are plain text, so they survive editor re-saves — no raw HTML needed. Put one keyword on its own line (recommended) or inline in a sentence.

A keyword is ignored when it sits inside code/pre (that is how this file shows examples).

Syntax

[map <id|title>]                     # geomap, optional: |small|medium|large
[gpx <id|title>]                     # track stats card + elevation profile, optional: |Custom title
[cad <id|title>]                     # 3D model viewer, optional: |small|medium|large or |Caption
[yt <videoId|url>]                   # YouTube click-to-load facade, optional: |Caption
[video <id|title>]                   # inline video player, optional: |Caption
[audio <id|title>]                   # inline audio player, optional: |Caption

<id|title> is either the note ID (12 chars) or the note title / file name (case-insensitive; file extension optional).

Requirements per keyword

Keyword	References	Notes
`map`	a geoMap book note (`#viewType=geoMap` + `#publish=true`)	points via child `#geolocation` / `#geo:position` / `#geoShape` or child `.gpx` files; tree order = route order; reorder children in Trilium → auto refresh (`~runOnBranchChange`)
`gpx`	any `.gpx` file note in the blog tree	stats: distance, ascent/descent (0.5 m deadband), elevation range, duration, avg speed, pace (needs `<time>` in track points) + hover cursor on the profile (km from start · Δheight from start)
`cad`	`.stl` / `.step` / `.stp` file note	extension may live in the note title or `#originalFileName`; STEP parsed by occt-wasm in a module worker (~22 MB on first load)
`yt`	YouTube video ID or URL (`youtu.be`, `watch?v=`, `/shorts/`)	only the thumbnail loads initially; player comes from `youtube-nocookie.com` on click
`video`	`.mp4` / `.webm` / `.mov` / `.m4v` file note	use faststart MP4 (moov first). Trilium ignores `Range` requests → seeking may re-buffer
`audio`	`.mp3` / `.ogg` / `.oga` / `.wav` / `.flac` / `.m4a` / `.aac` / `.opus` file note	streamed from `api/notes/<id>/download`

gpx (as card), cad, video and audio resolve through the geoData indexes (maps, gpx, cad, media) which blog_generator.js builds automatically — so the files must live somewhere inside the blog tree (they do not need their own publish label).

Theme

Maps, GPX cards, players and captions follow the blog's day/night toggle (theme-dark / theme-light class on <html>), not the OS setting. Map basemaps are VersaTiles muted ("neutron" look) in day mode, CSS-inverted at night; a subtle sage/bone tint overlay sits on the map in day mode only.

Styling knobs (geo map render)

map height: [map x|small] ≈ 280 px, medium ≈ 440 px, default min(70vh, 640px), large ≈ 620 px (Cad: same words via CAD_HEIGHTS)
map style label on the book note: #map:style=auto|muted|neutron|osm-bright|liberty
tint: .blog-geo-map::after gradient + mix-blend-mode: multiply
3D shading: append ?render=normal to the page URL to disable the electron-microscope shader

3.4 KiB Raw Blame History