docs(guide): update html docs with sharing

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Attributes/Relations.html

@@ -116,6 +116,13 @@ class="admonition tip">
         <td>JavaScript note which will be injected into the share page. JS note must
           be in the shared sub-tree as well. Consider using <code>share_hidden_from_tree</code>.</td>
       </tr>
+      <tr>
+        <td><code>shareHtml</code>
+        </td>
+        <td>HTML note which will be injected into the share page at locations specified
+          by the <code>shareHtmlLocation</code> label. HTML note must be in the shared
+          sub-tree as well. Consider using <code>share_hidden_from_tree</code>.</td>
+      </tr>
       <tr>
         <td><code>shareTemplate</code>
         </td>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/Sharing.html

@@ -234,6 +234,34 @@ class="image">
     This allows you to access note attributes or traverse the note tree using
     the <code>fetchNote()</code> API, which retrieves note data based on its
     ID.</p>
+  <h3>Adding custom HTML</h3>
+  <p>You can inject custom HTML snippets into specific locations of the shared
+    page using the <code>~shareHtml</code> relation. The HTML note should contain
+    the raw HTML content you want to inject, and you can control where it appears
+    by adding the <code>#shareHtmlLocation</code> label to the HTML snippet note
+    itself.</p>
+  <p>The <code>#shareHtmlLocation</code> label accepts values in the format <code>location:position</code>:</p>
+  <ul>
+    <li><strong>Locations</strong>: <code>head</code>, <code>body</code>, <code>content</code>
+    </li>
+    <li><strong>Positions</strong>: <code>start</code>, <code>end</code>
+    </li>
+  </ul>
+  <p>For example:</p>
+  <ul>
+    <li><code>#shareHtmlLocation=head:start</code> - Injects HTML at the beginning
+      of the <code>&lt;head&gt;</code> section</li>
+    <li><code>#shareHtmlLocation=head:end</code> - Injects HTML at the end of the <code>&lt;head&gt;</code> section
+      (default)</li>
+    <li><code>#shareHtmlLocation=body:start</code> - Injects HTML at the beginning
+      of the <code>&lt;body&gt;</code> section</li>
+    <li><code>#shareHtmlLocation=content:start</code> - Injects HTML at the beginning
+      of the content area</li>
+    <li><code>#shareHtmlLocation=content:end</code> - Injects HTML at the end of
+      the content area</li>
+  </ul>
+  <p>If no location is specified, the HTML will be injected at <code>content:end</code> by
+    default.</p>
   <p>Example:</p><pre><code class="language-application-javascript-env-backend">const currentNote = await fetchNote();
 const parentNote = await fetchNote(currentNote.parentNoteIds[0]);
 
@@ -344,6 +372,14 @@ for (const attr of parentNote.attributes) {
         </td>
         <td>Note with this label will list all roots of shared notes.</td>
       </tr>
+      <tr>
+        <td><code>shareHtmlLocation</code>
+        </td>
+        <td>defines where custom HTML injected via <code>~shareHtml</code> relation
+          should be placed. Applied to the HTML snippet note itself. Format: <code>location:position</code> where
+          location is <code>head</code>, <code>body</code>, or <code>content</code> and
+          position is <code>start</code> or <code>end</code>. Defaults to <code>content:end</code>.</td>
+      </tr>
     </tbody>
   </table>
   

apps/server/src/services/builtin_attributes.ts

@@ -66,6 +66,7 @@ export default [
     { type: "label", name: "shareDisallowRobotIndexing" },
     { type: "label", name: "shareCredentials" },
     { type: "label", name: "shareIndex" },
+    { type: "label", name: "shareHtmlLocation" },
     { type: "label", name: "displayRelations" },
     { type: "label", name: "hideRelations" },
     { type: "label", name: "titleTemplate", isDangerous: true },
@@ -105,6 +106,7 @@ export default [
     { type: "relation", name: "renderNote", isDangerous: true },
     { type: "relation", name: "shareCss" },
     { type: "relation", name: "shareJs" },
+    { type: "relation", name: "shareHtml" },
     { type: "relation", name: "shareTemplate" },
     { type: "relation", name: "shareFavicon" }
 ];

docs/User Guide/User Guide/Advanced Usage/Attributes/Relations.md

@@ -50,5 +50,6 @@ These relations are supported and used internally by Trilium.
 | `widget_relation` | target of this relation will be executed and rendered as a widget in the sidebar |
 | `shareCss` | CSS note which will be injected into the share page. CSS note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree` and `share_omit_default_css` as well. |
 | `shareJs` | JavaScript note which will be injected into the share page. JS note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree`. |
+| `shareHtml` | HTML note which will be injected into the share page at locations specified by the `shareHtmlLocation` label. HTML note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree`. |
 | `shareTemplate` | Embedded JavaScript note that will be used as the template for displaying the shared note. Falls back to the default template. Consider using `share_hidden_from_tree`. |
 | `shareFavicon` | Favicon note to be set in the shared page. Typically you want to set it to share root and make it inheritable. Favicon note must be in the shared sub-tree as well. Consider using `share_hidden_from_tree`. |

docs/User Guide/User Guide/Advanced Usage/Sharing.md

@@ -67,6 +67,25 @@ The default design should be a good starting point, but you can customize it usi
 
 You can inject custom JavaScript into the shared note using the `~shareJs` relation. This allows you to access note attributes or traverse the note tree using the `fetchNote()` API, which retrieves note data based on its ID.
 
+### Adding custom HTML
+
+You can inject custom HTML snippets into specific locations of the shared page using the `~shareHtml` relation. The HTML note should contain the raw HTML content you want to inject, and you can control where it appears by adding the `#shareHtmlLocation` label to the HTML snippet note itself.
+
+The `#shareHtmlLocation` label accepts values in the format `location:position`:
+
+*   **Locations**: `head`, `body`, `content`
+*   **Positions**: `start`, `end`
+
+For example:
+
+*   `#shareHtmlLocation=head:start` - Injects HTML at the beginning of the `<head>` section
+*   `#shareHtmlLocation=head:end` - Injects HTML at the end of the `<head>` section (default)
+*   `#shareHtmlLocation=body:start` - Injects HTML at the beginning of the `<body>` section
+*   `#shareHtmlLocation=content:start` - Injects HTML at the beginning of the content area
+*   `#shareHtmlLocation=content:end` - Injects HTML at the end of the content area
+
+If no location is specified, the HTML will be injected at `content:end` by default.
+
 Example:
 
 ```javascript
@@ -106,7 +125,7 @@ To do so, create a shared text note and apply the `shareIndex` label. When viewe
 
 ## Attribute reference
 
-<table><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>shareHiddenFromTree</code></td><td>this note is hidden from left navigation tree, but still accessible with its URL</td></tr><tr><td><code>shareExternalLink</code></td><td>note will act as a link to an external website in the share tree</td></tr><tr><td><code>shareAlias</code></td><td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code></td></tr><tr><td><code>shareOmitDefaultCss</code></td><td>default share page CSS will be omitted. Use when you make extensive styling changes.</td></tr><tr><td><code>shareRoot</code></td><td>marks note which is served on /share root.</td></tr><tr><td><code>shareDescription</code></td><td>define text to be added to the HTML meta tag for description</td></tr><tr><td><code>shareRaw</code></td><td>Note will be served in its raw format, without HTML wrapper. See also&nbsp;<a class="reference-link" href="Sharing/Serving%20directly%20the%20content%20o.md">Serving directly the content of a note</a>&nbsp;for an alternative method without setting an attribute.</td></tr><tr><td><code>shareDisallowRobotIndexing</code></td><td><p>Indicates to web crawlers that the page should not be indexed of this note by:</p><ul><li data-list-item-id="e6baa9f60bf59d085fd31aa2cce07a0e7">Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li><li data-list-item-id="ec0d067db136ef9794e4f1033405880b7">Setting the <code>noindex, follow</code> meta tag.</li></ul></td></tr><tr><td><code>shareCredentials</code></td><td>require credentials to access this shared note. Value is expected to be in format <code>username:password</code>. Don't forget to make this inheritable to apply to child-notes/images.</td></tr><tr><td><code>shareIndex</code></td><td>Note with this label will list all roots of shared notes.</td></tr></tbody></table>
+<table><thead><tr><th>Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>shareHiddenFromTree</code></td><td>this note is hidden from left navigation tree, but still accessible with its URL</td></tr><tr><td><code>shareExternalLink</code></td><td>note will act as a link to an external website in the share tree</td></tr><tr><td><code>shareAlias</code></td><td>define an alias using which the note will be available under <code>https://your_trilium_host/share/[your_alias]</code></td></tr><tr><td><code>shareOmitDefaultCss</code></td><td>default share page CSS will be omitted. Use when you make extensive styling changes.</td></tr><tr><td><code>shareRoot</code></td><td>marks note which is served on /share root.</td></tr><tr><td><code>shareDescription</code></td><td>define text to be added to the HTML meta tag for description</td></tr><tr><td><code>shareRaw</code></td><td>Note will be served in its raw format, without HTML wrapper. See also&nbsp;<a class="reference-link" href="Sharing/Serving%20directly%20the%20content%20o.md">Serving directly the content of a note</a>&nbsp;for an alternative method without setting an attribute.</td></tr><tr><td><code>shareDisallowRobotIndexing</code></td><td><p>Indicates to web crawlers that the page should not be indexed of this note by:</p><ul><li data-list-item-id="e6baa9f60bf59d085fd31aa2cce07a0e7">Setting the <code>X-Robots-Tag: noindex</code> HTTP header.</li><li data-list-item-id="ec0d067db136ef9794e4f1033405880b7">Setting the <code>noindex, follow</code> meta tag.</li></ul></td></tr><tr><td><code>shareCredentials</code></td><td>require credentials to access this shared note. Value is expected to be in format <code>username:password</code>. Don't forget to make this inheritable to apply to child-notes/images.</td></tr><tr><td><code>shareIndex</code></td><td>Note with this label will list all roots of shared notes.</td></tr><tr><td><code>shareHtmlLocation</code></td><td>defines where custom HTML injected via <code>~shareHtml</code> relation should be placed. Applied to the HTML snippet note itself. Format: <code>location:position</code> where location is <code>head</code>, <code>body</code>, or <code>content</code> and position is <code>start</code> or <code>end</code>. Defaults to <code>content:end</code>.</td></tr></tbody></table>
 
 ## Credits
 

packages/share-theme/src/templates/page.ejs

@@ -1,7 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <% const hasTree = subRoot.note.hasVisibleChildren(); %>
+    <%
+    const hasTree = subRoot.note.hasVisibleChildren();
+
+    // Collect HTML snippets by location
+    const htmlSnippetsByLocation = {};
+    for (const htmlRelation of note.getRelations("shareHtml")) {
+        const htmlNote = htmlRelation.targetNote;
+        if (htmlNote) {
+            let location = htmlNote.getLabelValue("shareHtmlLocation") || "content:end";
+            // Default to :end if no position specified
+            if (!location.includes(":")) {
+                location = location + ":end";
+            }
+            if (!htmlSnippetsByLocation[location]) {
+                htmlSnippetsByLocation[location] = [];
+            }
+            htmlSnippetsByLocation[location].push(htmlNote.getContent());
+        }
+    }
+    const renderSnippets = (location) => {
+        const snippets = htmlSnippetsByLocation[location];
+        return snippets ? snippets.join("\n") : "";
+    };
+    %>
+    <%- renderSnippets("head:start") %>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -53,6 +77,7 @@
     <meta name="twitter:image" content="<%= openGraphImage %>">
     <!-- Meta Tags Generated via https://opengraph.dev -->
     <meta name="theme-color" content="<%= openGraphColor %>">
+    <%- renderSnippets("head:end") %>
 </head>
 <%
 const customLogoId = subRoot.note.getRelation("shareLogo")?.value;
@@ -72,6 +97,7 @@ content = content.replaceAll(headingRe, (...match) => {
 });
 %>
 <body data-note-id="<%= note.noteId %>" class="type-<%= note.type %><%= themeClass %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
+<%- renderSnippets("body:start") %>
 <div id="mobile-header">
     <a href="<%= shareRootLink %>">
             <img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
@@ -121,8 +147,8 @@ content = content.replaceAll(headingRe, (...match) => {
     </div>
     <div id="right-pane">
         <div id="main">
-
             <div id="content" class="type-<%= note.type %><% if (note.type === "text") { %> ck-content<% } %><% if (isEmpty) { %> no-content<% } %>">
+                <%- renderSnippets("content:start") %>
                     <h1 id="title"><%= note.title %></h1>
                 <% if (isEmpty && (!note.hasVisibleChildren() && note.type !== "book")) { %>
                     <p>This note has no content.</p>
@@ -132,6 +158,7 @@ content = content.replaceAll(headingRe, (...match) => {
                     %>
                     <%- content %>
                 <% } %>
+                <%- renderSnippets("content:end") %>
             </div>
 
             <% if (note.hasVisibleChildren() || note.type === "book") { %>
@@ -205,5 +232,6 @@ content = content.replaceAll(headingRe, (...match) => {
         <% } %>
     </div>
 </div>
+<%- renderSnippets("body:end") %>
 </body>
 </html>