# Octothorpes Demo
Documentation
Protocol Source
Neocities Demo
Wordpress Demo
Contact
Octothorp.es

#

Web Components

OP ships a set of web components for displaying indexed content on any site.

v0.6

Here's what this page has sent to OP


BACKLINKS

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

<octo-thorpe>

Displays pages tagged with one or more octothorpe terms. Load it from the OP server you want to query:

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

Upgrading from tags.js? The new component is a drop-in replacement. Both the text-content syntax (<octo-thorpe>term</octo-thorpe>) and the preload-link injection from tags.js still work — switching is a one-line script change with no markup updates required. The o attribute is available if you want render modes, filtering, or multiple terms. tags.js continues to work for sites that haven’t migrated.

Compact (default)

This mimics the original tags.js version. It displays the octothorpe with a tilted # that expands the list when clicked. Use either the text-content form or the o attribute — they’re equivalent:

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

List

Renders as a bulleted list with title, description, and date for each result.

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

Without autoload

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

<octo-thorpe o="demo" render="list" limit="5"></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”.

Multiple terms

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

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

Cards

<octo-thorpe o="demo" render="cards" limit="6" 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 compact
autoload Fetch on mount instead of waiting for user false
nopreload Skip injecting a <link rel="preload"> for the indexing endpoint false
server OP server to query Origin of the script’s URL

The component automatically injects a <link rel="preload" as="fetch"> pointing at the indexing endpoint for the current page (mirroring tags.js). Set nopreload to opt out.

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;
}

Displays pages that link back to a given URL. Load it from the OP server you want to query:

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

If o is omitted, the component uses the current page’s URL as the target. Here it is live on this page:

<octo-backlinks autoload></octo-backlinks>

Explicit URL

Point it at any URL:

<octo-backlinks o="https://octothorp.es" render="list" autoload></octo-backlinks>

Attributes

Attribute What it does Default
o URL to find backlinks for Current page URL
s Filter by subject domain(s) —
noto Exclude targets —
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
emptyMessage Text shown when no results "No links found to this page"
server OP server to query Origin of the script’s URL

<octo-badge>

Renders a clickable 88×31 badge and triggers indexing of the current page when it loads. Drop it anywhere on a registered page:

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

Attributes

Attribute What it does Default
uri Page URL to index Current page URL
as Harmonizer ID or URL "default"
server OP server to index with Origin of the script’s URL

<octo-multipass>

Accepts a MultiPass JSON object and displays results. A MultiPass is the serialized form of an OP query — you can get one from any /get/[what]/[by]/multipass endpoint:

https://octothorp.es/get/pages/thorped/multipass?o=demo

Pass the result to the component:

<script type="module" src="https://octothorp.es/components/octo-multipass.js"></script>
<octo-multipass multipass='{ ... }' autoload></octo-multipass>

Attributes

Attribute What it does Default
multipass MultiPass JSON string or object —
autoload Fetch on mount false
render Display mode: list, cards, compact, count list

<octo-multipass-loader>

A drag-and-drop zone for MultiPass objects. Accepts a MultiPass GIF or JSON file and renders results when a file is dropped.

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

Attributes

Attribute What it does Default
placeholder Upload prompt text "Drop MultiPass JSON or GIF here"
render Display mode for results: list, cards, compact list
gif URL to a MultiPass GIF (can be set programmatically) —
target CSS selector for an external element to render results into —