zink/trilium_share_gruvbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Gruvbox share theme + blog system for Trilium (anonymized)

Browse Source 
Blog generator, publish manager, share scripts, theme CSS, highlight.js
bundles, font, favicon, templates and generated-reference outputs, plus an
English installation guide.
This commit is contained in:
trilium-share-gruvbox
2026-08-28 13:36:22 +02:00
commit aa7a2d0ab5
31 changed files with 4387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/ignis8_icon.svg
+140
View File
@@ -0,0 +1,140 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
<!-- =========================================================================
IGNIS-8 Emblem: Simplified Fire & Wireless Remote Favicon Shield
Palette: 100% Strict Gruvbox Dark Match
Style: Vibrant, Geometric, Cyber-Tactical, High-Contrast
OUTSIDE TRANSPARENT, INSIDE DARK GRAY.
Previously a borderless rectangle in Gruvbox bg0 (#282828) sat under
the entire image. The emblem thus carried a gray plate that remained
visible next to the frame — in the light GitHub theme as a gray box,
in the header of the control view as an edge against its own
background.
The gray now sits exclusively INSIDE the border/outline: It is the
fill of exactly the same rectangle that also carries the green
contour. The fill edge thereby lies under the inner half of the
contour and is not visible; beyond the contour the area stays free.
For the maskable PWA purpose that is unsuitable — there the home
screen cuts its own shape out of the image and needs a full-surface
plate. This version therefore lives separately in
favicon-maskable.svg, see manifest.json.
========================================================================= -->
<defs>
<!-- Silhouette of the emblem: the OUTER EDGE of the border/outline.
x/y 12 and 488 x 488 result from the frame rectangle (24, 464)
plus half the contour width (12); the radius correspondingly 48 + 12.
The clipping is not decoration. The shield group extends roughly
10 units beyond the outer edge at the bottom — on a gray background
that would look like a shield overlapping the frame, without a
background it would be a freely floating yellow tip. -->
<clipPath id="ignis8-frame">
<rect x="12" y="12" width="488" height="488" rx="60" />
</clipPath>
</defs>
<g clip-path="url(#ignis8-frame)">
<!-- 1. Border/outline (Gruvbox Bright Green #b8bb26) with dark gray
inner surface (Gruvbox bg0). Both on ONE element so that the
fill edge necessarily lies under the contour. -->
<rect x="24" y="24" width="464" height="464" rx="48"
fill="#282828"
stroke="#b8bb26"
stroke-width="24" />
<!-- 2. Radio waves in the upper right corner (Gruvbox Bright Green #b8bb26) -->
<g id="wireless-corner" fill="none" stroke="#b8bb26" stroke-width="16" stroke-linecap="round">
<!-- Signal center (corner point) -->
<circle cx="430" cy="82" r="12" fill="#b8bb26" stroke="none" />
<!-- First radio wave -->
<path d="M 370 82 A 60 60 0 0 0 430 142" />
<!-- Second radio wave -->
<path d="M 310 82 A 120 120 0 0 0 430 202" stroke-width="18" />
<!-- Third radio wave -->
<path d="M 250 82 A 180 180 0 0 0 430 262" stroke-width="20" />
</g>
<!--
3. Shield & fire group (Slightly offset toward the lower left,
to perfectly balance the radio waves at the top right)
-->
<g id="shield-core-group" transform="translate(-35, 35) scale(0.92)">
<!-- Fire brigade shield (Gruvbox Dark Hard #1d2021) with yellow border (#fabd2f) -->
<path d="M 256 120
C 200 110, 150 135, 110 155
C 95 245, 95 335, 120 395
C 145 455, 210 492, 256 507
C 302 492, 367 455, 392 395
C 417 335, 417 245, 402 155
C 362 135, 312 110, 256 120 Z"
fill="#1d2021"
stroke="#fabd2f"
stroke-width="20"
stroke-linejoin="round" />
<!--
Vibrant, intensely glowing fire (Pure Gruvbox accents)
Outer: Bright Red (#fb4934) | Middle: Bright Orange (#fe8019) | Inner: Bright Yellow (#fabd2f)
-->
<g id="vibrant-fire">
<!-- Outer flame (Gruvbox Red) -->
<path d="M 256 180
C 190 250, 150 290, 150 360
C 150 415, 190 435, 256 435
C 322 435, 362 415, 362 360
C 362 290, 322 250, 256 180 Z"
fill="#fb4934" />
<!-- Middle flame (Gruvbox Orange) -->
<path d="M 256 215
C 205 275, 175 310, 175 370
C 175 415, 205 425, 256 425
C 307 425, 337 415, 337 370
C 337 310, 307 275, 256 215 Z"
fill="#fe8019" />
<!-- Inner flame (Gruvbox Yellow) -->
<path d="M 256 250
C 220 295, 200 325, 200 375
C 200 410, 222 415, 256 415
C 290 415, 312 410, 312 375
C 312 325, 292 295, 256 250 Z"
fill="#fabd2f" />
</g>
<!-- The "8" as an endless ribbon (Gruvbox Light-Cream #fbf1c7) -->
<g id="number-eight">
<!-- Dark mask for optical separation from the bright fire (#1d2021) -->
<path d="M 256 310
C 228 310, 228 250, 256 250
C 284 250, 284 310, 256 310
C 220 310, 220 395, 256 395
C 292 395, 292 310, 256 310"
fill="none"
stroke="#1d2021"
stroke-width="56"
stroke-linecap="round"
stroke-linejoin="round" />
<!-- Foreground loop -->
<path d="M 256 310
C 228 310, 228 250, 256 250
C 284 250, 284 310, 256 310
C 220 310, 220 395, 256 395
C 292 395, 292 310, 256 310"
fill="none"
stroke="#fbf1c7"
stroke-width="26"
stroke-linecap="round"
stroke-linejoin="round" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

examples/ignis8_icon_mono_dark.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 560">
<g transform="translate(7, -36)">
<g transform="translate(-35, 35) scale(0.92)" fill="none" stroke="#83a598" stroke-linecap="round" stroke-linejoin="round">
<path d="M 256 120 C 200 110, 150 135, 110 155 C 95 245, 95 335, 120 395 C 145 455, 210 492, 256 507 C 302 492, 367 455, 392 395 C 417 335, 417 245, 402 155 C 362 135, 312 110, 256 120 Z" stroke-width="20"/>
<path d="M 256 180 C 190 250, 150 290, 150 360 C 150 415, 190 435, 256 435 C 322 435, 362 415, 362 360 C 362 290, 322 250, 256 180 Z" stroke-width="15"/>
<path d="M 256 310 C 228 310, 228 250, 256 250 C 284 250, 284 310, 256 310 C 220 310, 220 395, 256 395 C 292 395, 292 310, 256 310" stroke-width="24"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

examples/ignis8_icon_mono_light.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 560">
<g transform="translate(7, -36)">
<g transform="translate(-35, 35) scale(0.92)" fill="none" stroke="#076678" stroke-linecap="round" stroke-linejoin="round">
<path d="M 256 120 C 200 110, 150 135, 110 155 C 95 245, 95 335, 120 395 C 145 455, 210 492, 256 507 C 302 492, 367 455, 392 395 C 417 335, 417 245, 402 155 C 362 135, 312 110, 256 120 Z" stroke-width="20"/>
<path d="M 256 180 C 190 250, 150 290, 150 360 C 150 415, 190 435, 256 435 C 322 435, 362 415, 362 360 C 362 290, 322 250, 256 180 Z" stroke-width="15"/>
<path d="M 256 310 C 228 310, 228 250, 256 250 C 284 250, 284 310, 256 310 C 220 310, 220 395, 256 395 C 292 395, 292 310, 256 310" stroke-width="24"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

examples/ignis8_menu_icon.js
+37
View File
@@ -0,0 +1,37 @@
<script>
(function () {
var titleSvg = "api/notes/__TITLE_ICON_ID__/download";
var a = document.querySelector('#menu a[href="./ignis8"]');
if (a) {
var icon = a.querySelector(".tn-icon");
if (icon) {
var s = document.createElementNS("http://www.w3.org/2000/svg", "svg");
s.setAttribute("class", "tn-icon tn-image tn-image-svg");
s.setAttribute("viewBox", "0 0 420 560");
s.setAttribute("fill", "none");
s.setAttribute("stroke", "currentColor");
s.setAttribute("stroke-linecap", "round");
s.setAttribute("stroke-linejoin", "round");
s.setAttribute("aria-hidden", "true");
s.innerHTML = '<g transform="translate(7, -36)"><g transform="translate(-35, 35) scale(0.92)">' +
'<path d="M 256 120 C 200 110, 150 135, 110 155 C 95 245, 95 335, 120 395 C 145 455, 210 492, 256 507 C 302 492, 367 455, 392 395 C 417 335, 417 245, 402 155 C 362 135, 312 110, 256 120 Z" stroke-width="20"/>' +
'<path d="M 256 180 C 190 250, 150 290, 150 360 C 150 415, 190 435, 256 435 C 322 435, 362 415, 362 360 C 362 290, 322 250, 256 180 Z" stroke-width="15"/>' +
'<path d="M 256 310 C 228 310, 228 250, 256 250 C 284 250, 284 310, 256 310 C 220 310, 220 395, 256 395 C 292 395, 292 310, 256 310" stroke-width="24"/>' +
'</g></g>';
icon.replaceWith(s);
}
}
if (document.body.getAttribute("data-note-id") === "__CATEGORY_NOTE_ID__") {
var title = document.getElementById("title");
if (title) {
var t = document.createElement("img");
t.className = "title-image";
t.src = titleSvg;
t.alt = "ignis8";
title.insertBefore(t, title.firstChild);
}
}
})();
</script>