Web Components

OP ships client-side web components for displaying indexed content without writing any query logic yourself. This page demonstrates the current versions.

Upgrading from tags.js? The legacy tags.js script used <octo-thorpe>term</octo-thorpe> with the term as text content. The new component uses the o attribute instead: <octo-thorpe o="term">. The element name is the same, so switching scripts is a one-line change — but you’ll need to update any existing elements to use the o attribute to get the new render modes and filtering options. tags.js continues to work for sites that haven’t migrated.

In action on this page

`<octo-thorpe>`

Displays pages tagged with one or more octothorpe terms. Load it from the OP CDN:

<script type="module" src="https://octothorp.es/components/octo-thorpe.js"></script>

List (default)

<octo-thorpe o="demo" autoload></octo-thorpe>

Cards

<octo-thorpe o="demo" render="cards" limit="6" autoload></octo-thorpe>

Compact

Renders as an inline comma-separated list — useful in sidebars or footers.

<octo-thorpe o="demo" render="compact" limit="5" autoload></octo-thorpe>

Count

Renders as a bare number for embedding inline.

There are <octo-thorpe o="demo" render="count" autoload></octo-thorpe> pages tagged "demo".

There are pages tagged “demo”.

Without `autoload`

Omit autoload and the component renders a load button instead of fetching on mount.

<octo-thorpe o="smallweb"></octo-thorpe>

Multiple terms

Comma-separate terms to query pages tagged with any of them.

<octo-thorpe o="indieweb,smallweb" autoload></octo-thorpe>

Attributes

Attribute	What it does	Default
`o`	Term(s) to query (comma-separated)	—
`s`	Filter by subject domain(s)	—
`noto`	Exclude terms	—
`nots`	Exclude subjects	—
`match`	Match mode: `exact`, `fuzzy`, `fuzzy-o`, `fuzzy-s`, `very-fuzzy`	`exact`
`limit`	Max results	`10`
`offset`	Result offset for pagination	`0`
`when`	Date filter: `recent`, `after-DATE`, `before-DATE`, `between-DATE-and-DATE`	—
`render`	Display mode: `list`, `cards`, `compact`, `count`	`list`
`autoload`	Fetch on mount instead of waiting for user	`false`
`server`	OP server URL	`https://octothorp.es`

CSS custom properties

octo-thorpe {
  --octo-font: system-ui, sans-serif;
  --octo-primary: #3c7efb;
  --octo-background: #ffffff;
  --octo-text: #333333;
  --octo-border: #e0e0e0;
  --octo-error: #d32f2f;
  --octo-spacing: 1rem;
  --octo-radius: 4px;
}

`<octo-backlinks>`

Displays pages that link back to a given URL. Load it from the OP CDN:

<script type="module" src="https://octothorp.es/components/octo-backlinks.js"></script>

The component uses the current page’s URL as the target by default. Here it is live on this page:

Raw HTML

<h2 id="octo-thorpe"><code class="language-plaintext highlighter-rouge">&lt;octo-thorpe&gt;</code></h2>

Displays pages tagged with one or more octothorpe terms. Load it from the OP CDN:

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"module"</span> <span class="na">src=</span><span class="s">"https://octothorp.es/components/octo-thorpe.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></div>

<h3 id="list-default">List (default)</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;octo-thorpe</span> <span class="na">o=</span><span class="s">"demo"</span> <span class="na">autoload</span><span class="nt">&gt;&lt;/octo-thorpe&gt;</span>
</code></pre></div></div>

<octo-thorpe o="demo" autoload=""></octo-thorpe>

<hr />

<h3 id="cards">Cards</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;octo-thorpe</span> <span class="na">o=</span><span class="s">"demo"</span> <span class="na">render=</span><span class="s">"cards"</span> <span class="na">limit=</span><span class="s">"6"</span> <span class="na">autoload</span><span class="nt">&gt;&lt;/octo-thorpe&gt;</span>
</code></pre></div></div>

<octo-thorpe o="demo" render="cards" limit="6" autoload=""></octo-thorpe>

<hr />

<h3 id="compact">Compact</h3>

Renders as an inline comma-separated list — useful in sidebars or footers.

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;octo-thorpe</span> <span class="na">o=</span><span class="s">"demo"</span> <span class="na">render=</span><span class="s">"compact"</span> <span class="na">limit=</span><span class="s">"5"</span> <span class="na">autoload</span><span class="nt">&gt;&lt;/octo-thorpe&gt;</span>
</code></pre></div></div>

<octo-thorpe o="demo" render="compact" limit="5" autoload=""></octo-thorpe>

<hr />

<h3 id="count">Count</h3>

Renders as a bare number for embedding inline.

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>There are <span class="nt">&lt;octo-thorpe</span> <span class="na">o=</span><span class="s">"demo"</span> <span class="na">render=</span><span class="s">"count"</span> <span class="na">autoload</span><span class="nt">&gt;&lt;/octo-thorpe&gt;</span> pages tagged "demo".
</code></pre></div></div>

There are <octo-thorpe o="demo" render="count" autoload=""></octo-thorpe> pages tagged “demo”.

<hr />

<h3 id="without-autoload">Without <code class="language-plaintext highlighter-rouge">autoload</code></h3>

Omit <code class="language-plaintext highlighter-rouge">autoload</code> and the component renders a load button instead of fetching on mount.

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;octo-thorpe</span> <span class="na">o=</span><span class="s">"smallweb"</span><span class="nt">&gt;&lt;/octo-thorpe&gt;</span>
</code></pre></div></div>

<octo-thorpe o="smallweb"></octo-thorpe>

<hr />

<h3 id="multiple-terms">Multiple terms</h3>

Comma-separate terms to query pages tagged with any of them.

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;octo-thorpe</span> <span class="na">o=</span><span class="s">"indieweb,smallweb"</span> <span class="na">autoload</span><span class="nt">&gt;&lt;/octo-thorpe&gt;</span>
</code></pre></div></div>

<octo-thorpe o="indieweb,smallweb" autoload=""></octo-thorpe>

<hr />

<h3 id="attributes">Attributes</h3>

<table>
  <thead>
    <tr>
      <th>Attribute</th>
      <th>What it does</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">o</code></td>
      <td>Term(s) to query (comma-separated)</td>
      <td>—</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">s</code></td>
      <td>Filter by subject domain(s)</td>
      <td>—</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">noto</code></td>
      <td>Exclude terms</td>
      <td>—</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">nots</code></td>
      <td>Exclude subjects</td>
      <td>—</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">match</code></td>
      <td>Match mode: <code class="language-plaintext highlighter-rouge">exact</code>, <code class="language-plaintext highlighter-rouge">fuzzy</code>, <code class="language-plaintext highlighter-rouge">fuzzy-o</code>, <code class="language-plaintext highlighter-rouge">fuzzy-s</code>, <code class="language-plaintext highlighter-rouge">very-fuzzy</code></td>
      <td><code class="language-plaintext highlighter-rouge">exact</code></td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">limit</code></td>
      <td>Max results</td>
      <td><code class="language-plaintext highlighter-rouge">10</code></td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">offset</code></td>
      <td>Result offset for pagination</td>
      <td><code class="language-plaintext highlighter-rouge">0</code></td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">when</code></td>
      <td>Date filter: <code class="language-plaintext highlighter-rouge">recent</code>, <code class="language-plaintext highlighter-rouge">after-DATE</code>, <code class="language-plaintext highlighter-rouge">before-DATE</code>, <code class="language-plaintext highlighter-rouge">between-DATE-and-DATE</code></td>
      <td>—</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">render</code></td>
      <td>Display mode: <code class="language-plaintext highlighter-rouge">list</code>, <code class="language-plaintext highlighter-rouge">cards</code>, <code class="language-plaintext highlighter-rouge">compact</code>, <code class="language-plaintext highlighter-rouge">count</code></td>
      <td><code class="language-plaintext highlighter-rouge">list</code></td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">autoload</code></td>
      <td>Fetch on mount instead of waiting for user</td>
      <td><code class="language-plaintext highlighter-rouge">false</code></td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">server</code></td>
      <td>OP server URL</td>
      <td><code class="language-plaintext highlighter-rouge">https://octothorp.es</code></td>
    </tr>
  </tbody>
</table>

<h3 id="css-custom-properties">CSS custom properties</h3>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">octo-thorpe</span> <span class="p">{</span>
  <span class="py">--octo-font</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="py">--octo-primary</span><span class="p">:</span> <span class="m">#3c7efb</span><span class="p">;</span>
  <span class="py">--octo-background</span><span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span>
  <span class="py">--octo-text</span><span class="p">:</span> <span class="m">#333333</span><span class="p">;</span>
  <span class="py">--octo-border</span><span class="p">:</span> <span class="m">#e0e0e0</span><span class="p">;</span>
  <span class="py">--octo-error</span><span class="p">:</span> <span class="m">#d32f2f</span><span class="p">;</span>
  <span class="py">--octo-spacing</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
  <span class="py">--octo-radius</span><span class="p">:</span> <span class="m">4px</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<hr />

<h2 id="octo-backlinks"><code class="language-plaintext highlighter-rouge">&lt;octo-backlinks&gt;</code></h2>

Displays pages that link back to a given URL. Load it from the OP CDN:

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"module"</span> <span class="na">src=</span><span class="s">"https://octothorp.es/components/octo-backlinks.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></div>

The component uses the current page’s URL as the target by default. Here it is live on this page:

<octo-backlinks autoload=""></octo-backlinks>

# Octothorpes Demo

#