docs(guide): update html docs with sharing

This commit is contained in:
Elian Doran 2025-10-06 19:58:33 +03:00
parent caa1ea12f1
commit 2fca995725
No known key found for this signature in database
4 changed files with 13333 additions and 13289 deletions

View File

@ -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>

View File

@ -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>

View File

@ -1,6 +1,6 @@
{
"formatVersion": 2,
"appVersion": "0.99.0",
"appVersion": "0.99.1",
"files": [
{
"isClone": false,
@ -9,9 +9,9 @@
"pOsGYCXsbNQG"
],
"title": "User Guide",
"notePosition": 1,
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"isExpanded": true,
"type": "text",
"mime": "text/html",
"attributes": [],
@ -4135,8 +4135,7 @@
"prefix": null,
"dataFileName": "Quick edit.clone.md",
"type": "text",
"format": "markdown",
"isExpanded": false
"format": "markdown"
},
{
"isClone": false,

View File

@ -72,15 +72,17 @@ You can inject custom JavaScript into the shared note using the `~shareJs` relat
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`
* **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
* `#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.