407 lines
12 KiB
HTML
407 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>twtxt-lib Demo</title>
|
|
<link rel="shortcut icon" href="favicon.ico"/>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="stylesheet" href="/demo/styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<ul class="tabs">
|
|
<li class="tab tabOverview" id="overview">
|
|
<a class="tab-link" href="#overview" id="tabOverview-link">Overview</a>
|
|
|
|
<div class="tab-panel" id="tabOverview-panel">
|
|
<h1>twtxt-lib</h2>
|
|
|
|
<p>
|
|
An isomorphic TypeScript library of
|
|
utility functions for parsing and interacting with
|
|
<a href="https://twtxt.dev/"
|
|
><code>twtxt.txt</code> files</a
|
|
>.
|
|
</p>
|
|
|
|
<p>These functions include:</p>
|
|
|
|
<ul>
|
|
<li><a href="#hashTwt">hashTwt</a>: takes the constituent parts of a
|
|
“twt” and generates an
|
|
<a href="https://twtxt.dev/exts/twt-hash.html">extension-compatible
|
|
hash</a> for it.</li>
|
|
<li><a href="#parseTwtxt">parseTwtxt</a>: parses a twtxt file string,
|
|
returning an object with information about the file and its owner
|
|
(including <a href="https://twtxt.dev/exts/twt-hash.html">hashes</a>
|
|
for each twt and any
|
|
<a href="https://twtxt.dev/exts/metadata.html">metadata</a> in the
|
|
file).</li>
|
|
<li><a href="#loadAndParseTwtxtFile">loadAndParseTwtxtFile</a>: fetches a
|
|
twtxt file from <em>the internet</em> and parses it into an object (as
|
|
above).</li>
|
|
</ul>
|
|
|
|
<h2>Features</h2>
|
|
|
|
<ul>
|
|
<li>Isomorphic, available as an
|
|
(<a href="/dist-browser/twtxt-lib.min.js">optionally minified</a>)
|
|
<a href="/dist-browser/twtxt-lib.js">ES6+ library for the browser</a>
|
|
or as a package (from
|
|
<a href="https://www.npmjs.com/package/twtxt-lib">NPM</a> or
|
|
<a href="https://jsr.io/@itsericwoodward/twtxt-lib">JSR</a>).
|
|
</li>
|
|
|
|
<li>Fully typed and source-mapped (I hope).</li>
|
|
|
|
<li>Built as an <a href="https://caniuse.com/es6-module">ES6 module</a>
|
|
(and <a href="https://antfu.me/posts/move-on-to-esm-only">ESM only</a>)
|
|
</li>
|
|
|
|
<li>
|
|
Includes sample files and an interactive demo <em>(you're looking
|
|
at it)</em>.
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<h2>Installation</h2>
|
|
|
|
<p>This library can be installed several different ways:</p>
|
|
|
|
<h3>For the Browser</h3>
|
|
|
|
<ol>
|
|
<li>
|
|
Grab the latest copy of the <code>twtxt-lib.js</code> file, either by
|
|
downloading it from the
|
|
<a href="https://git.itsericwoodward.com/eric/twtxt-lib/raw/branch/main/dist-browser/twtxt-lib.js">git
|
|
repo</a>, the
|
|
<a href="/dist-browser/twtxt-lib.js">website</a>, or doing a
|
|
<code>git clone https://git.itsericwoodward.com/eric/twtxt-lib.git</code>
|
|
and pulling it out of the <code>dist-browser</code> folder.
|
|
|
|
<ul>
|
|
<li>
|
|
Alternatively, you can grab the minified version from the
|
|
<a href="https://git.itsericwoodward.com/eric/twtxt-lib/raw/branch/main/dist-browser/twtxt-lib.min.js">same</a>
|
|
<a href="https://twtxt-lib.itsericwoodward.com/dist-browser/twtxt-lib.min.js">sources</a>.
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
Add the newly acquired file to your static site / progressive web app /
|
|
over-engineered blog.
|
|
</li>
|
|
|
|
<li>
|
|
Import the desired function(s) via ESM:
|
|
<code>import { hashTwt, loadAndParseTwtxtFile } from "./twtxt-lib.js";</code>
|
|
</li>
|
|
</ol>
|
|
|
|
<h3>For Node</h3>
|
|
|
|
<ol>
|
|
<li>
|
|
Add the package to your project.
|
|
|
|
<ul>
|
|
<li>
|
|
Via <a href="https://www.npmjs.com/package/twtxt-lib">NPM</a>:
|
|
<code>yarn add twtxt-lib</code>
|
|
</li>
|
|
|
|
<li>
|
|
Via <a href="https://jsr.io/@itsericwoodward/twtxt-lib">JSR</a>:
|
|
<code>yarn add jsr:@itsericwoodward/twtxt-lib</code>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
Import the desired function(s) via ESM:
|
|
<code>import { hashTwt, loadAndParseTwtxtFile } from "twtxt-lib";</code>
|
|
</li>
|
|
</ol>
|
|
|
|
<p>Use the tabs to learn more.</p>
|
|
|
|
<hr />
|
|
|
|
<div id="tabOverview-example">
|
|
<p>
|
|
Example parsed file from
|
|
<a href="/twtxt-demos/demo-hipster-twtxt.txt">
|
|
<code>/twtxt-demos/demo-hipster-twtxt.txt</code> </a
|
|
>:
|
|
</p>
|
|
|
|
<span class="dotLoader"></span>
|
|
</div>
|
|
|
|
<p>
|
|
Example files generated with
|
|
<a href="https://hipsum.co/">Hipster Ipsum</a>,
|
|
<a href="https://pirateipsum.me/">Pirate Ipsum</a>,
|
|
a different <a href="https://lorem-ipsumm.com/pirate-ipsum/">Pirate Ipsum</a>, and
|
|
<a href="https://saganipsum.com/">Sagan Ipsum</a>.
|
|
</p>
|
|
|
|
<p class="copyright">
|
|
Copyright © 2026 Eric Woodward, released under the <a href="https://www.itsericwoodward.com/licenses/mit/">MIT License</a>.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="tab tabHashTwt" id="hashTwt">
|
|
<a class="tab-link" href="#hashTwt">hashTwt</a>
|
|
|
|
<div class="tab-panel" id="tabHashTwt-panel">
|
|
<p>
|
|
A function that takes the constituent parts of a “twt” and
|
|
generates an
|
|
<a href="https://twtxt.dev/exts/twt-hash.html">extension-compatible hash</a>
|
|
for it.
|
|
</p>
|
|
|
|
<p>
|
|
Version 0.10.0 and above includes support for
|
|
<a href="https://git.mills.io/yarnsocial/twtxt.dev/pulls/28">V2 of the
|
|
Hashing Spec</a>:
|
|
|
|
<ul>
|
|
<li>A specific hashing version can be provided as an optional argument.</li>
|
|
|
|
<li>
|
|
When no version argument is provided, it defaults to using version
|
|
1 for all twts with a created date before the epoch date
|
|
(<code>2026-07-01T00:00:00Z</code>), and version 2 for all twts
|
|
created on or after the epoch.
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<form id="formHash" name="formHash" method="post">
|
|
<div class="flexRow">
|
|
<div class="flexCol">
|
|
<label for="version">Version
|
|
<select id="version" name="version">
|
|
<option value="0">Default</option>
|
|
<option value="1">v1</option>
|
|
<option value="2">v2</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label for="content">Content</label>
|
|
|
|
<textarea
|
|
id="content"
|
|
name="content"
|
|
>Prow scuttle parley provost Sail ho shrouds spirits boom mizzenmast yardarm.</textarea>
|
|
</div>
|
|
|
|
<div class="flexCol">
|
|
<label>
|
|
Created
|
|
<input
|
|
type="text"
|
|
name="created"
|
|
value="2026-02-01T01:23:45Z"
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
URL
|
|
<input
|
|
type="text"
|
|
name="url"
|
|
value="https://example.org/~pirate/twtxt.txt"
|
|
/>
|
|
</label>
|
|
|
|
<input type="submit" value="Go" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="tab tabParse" id="parseTwtxt">
|
|
<a class="tab-link" href="#parseTwtxt">parseTwtxt</a>
|
|
|
|
<div class="tab-panel" id="tabParse-panel">
|
|
<p>
|
|
A function that parses a twtxt file string,
|
|
returning an object with information about the file and its owner
|
|
(including <a href="#hashTwt">hashes</a> for each twt and any
|
|
<a href="https://twtxt.dev/exts/metadata.html">metadata</a> in the
|
|
file).
|
|
</p>
|
|
|
|
<p>Pre-included examples:</p>
|
|
<ul>
|
|
<li>
|
|
<code>/twtxt-demos/demo-hipster-twtxt.txt</code>
|
|
|
|
<button
|
|
data-url="/twtxt-demos/demo-hipster-twtxt.txt"
|
|
id="parseHipsterButton"
|
|
name="parseHipsterButton"
|
|
>
|
|
Load
|
|
</button>
|
|
</li>
|
|
|
|
<li>
|
|
<code>/twtxt-demos/demo-pirate-twtxt.txt</code>
|
|
|
|
<button
|
|
data-url="/twtxt-demos/demo-pirate-twtxt.txt"
|
|
id="parsePirateButton"
|
|
name="parsePirateButton"
|
|
>
|
|
Load
|
|
</button>
|
|
</li>
|
|
|
|
<li>
|
|
<code>/twtxt-demos/demo-sagan-twtxt.txt</code>
|
|
|
|
<button
|
|
data-url="/twtxt-demos/demo-sagan-twtxt.txt"
|
|
id="parseSaganButton"
|
|
name="parseSaganButton"
|
|
/>
|
|
Load
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<form id="formParse" name="formParse" method="post">
|
|
<div class="flexRow">
|
|
<div class="flexCol">
|
|
<label>
|
|
URL
|
|
<input
|
|
id="parseURL"
|
|
name="url"
|
|
type="text"
|
|
value="/twtxt-demos/demo-hipster-twtxt.txt"
|
|
/>
|
|
</label>
|
|
|
|
<input type="submit" value="Go" />
|
|
|
|
<span class="dotLoader"></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="tab tabLoadAndParse" id="loadAndParseTwtxtFile">
|
|
<a class="tab-link" href="#loadAndParseTwtxtFile">loadAndParseTwtxtFile</a>
|
|
|
|
<div class="tab-panel" id="tabLoadAndParse-panel">
|
|
<p>
|
|
An async function that fetches a <code>twtxt.txt</code>-compatible file
|
|
from a URL and parses it, returning the extracted data as an object.
|
|
</p>
|
|
|
|
<p>Pre-included examples:</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<code>/twtxt-demos/demo-hipster-twtxt.txt</code>
|
|
|
|
<button
|
|
data-url="/twtxt-demos/demo-hipster-twtxt.txt"
|
|
id="loadAndParseHipsterButton"
|
|
name="loadAndParseHipsterButton"
|
|
>
|
|
Load
|
|
</button>
|
|
</li>
|
|
|
|
<li>
|
|
<code>/twtxt-demos/demo-pirate-twtxt.txt</code>
|
|
|
|
<button
|
|
data-url="/twtxt-demos/demo-pirate-twtxt.txt"
|
|
id="loadAndParsePirateButton"
|
|
name="loadAndParsePirateButton"
|
|
>
|
|
Load
|
|
</button>
|
|
</li>
|
|
|
|
<li>
|
|
<code>/twtxt-demos/demo-sagan-twtxt.txt</code>
|
|
|
|
<button
|
|
data-url="/twtxt-demos/demo-sagan-twtxt.txt"
|
|
id="loadAndParseSaganButton"
|
|
name="loadAndParseSaganButton"
|
|
>
|
|
Load
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<em>
|
|
Note that
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS">Cross-Origin
|
|
Resource Sharing (CORS)</a> restrictions may limit the
|
|
effectiveness of using this function across domains.
|
|
</em>
|
|
</p>
|
|
|
|
<form
|
|
id="formLoadAndParse"
|
|
name="formLoadAndParse"
|
|
method="post"
|
|
>
|
|
<div class="flexRow">
|
|
<div class="flexCol">
|
|
<label>
|
|
URL
|
|
<input
|
|
id="loadAndParseURL"
|
|
name="url"
|
|
type="text"
|
|
value="/twtxt-demos/demo-hipster-twtxt.txt"
|
|
/>
|
|
</label>
|
|
|
|
<input type="submit" value="Go" />
|
|
|
|
<span class="dotLoader"></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<script src="/dist-browser/twtxt-lib.js" type="module"></script>
|
|
<script src="/demo/add-default-route.js" type="module"></script>
|
|
<script src="/demo/browser-detection.js" type="module"></script>
|
|
<script src="/demo/external-links.js" type="module"></script>
|
|
<script src="/demo/theme-toggle.js" type="module"></script>
|
|
<script src="/demo/overview-example-source.js" type="module"></script>
|
|
<script src="/demo/overview-example-result.js" type="module"></script>
|
|
<script src="/demo/hashTwt-example-source.js" type="module"></script>
|
|
<script src="/demo/hashTwt-example-result.js" type="module"></script>
|
|
<script src="/demo/parseTwtxt-example-source.js" type="module"></script>
|
|
<script src="/demo/parseTwtxt-example-result.js" type="module"></script>
|
|
<script src="/demo/loadAndParseTwtxtFile-example-source.js" type="module"></script>
|
|
<script src="/demo/loadAndParseTwtxtFile-example-result.js" type="module"></script>
|
|
</body>
|
|
</html>
|