298 lines
8.7 KiB
HTML
298 lines
8.7 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="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>,
|
|
with NPM and JSR versions coming soon.
|
|
<li>Fully typed and source-mapped.</li>
|
|
<li><a href="https://caniuse.com/es6-module">ESM</a> (and <a href="https://antfu.me/posts/move-on-to-esm-only">ESM only</a>)</li>
|
|
<li>Includes an interactive demo <em>(you're looking at it)</em>.</li>
|
|
</ul>
|
|
|
|
<h2>Installation</h2>
|
|
|
|
<p>
|
|
Browser
|
|
<ul>
|
|
<li>Download <a href="/dist-browser/twtxt-lib.js">library</a> (or
|
|
<a href="/dist-browser/twtxt-lib.min.js">minified version</a>).</li>
|
|
<li>Import desired function(s) into your project: `import { hashTwt, loadAndParseTwtxtFile } from "./twtxt-lib.js"`</li>
|
|
</ul>
|
|
</p>
|
|
<p>
|
|
JSR
|
|
<ul>
|
|
<li>Coming soon</li>
|
|
</ul>
|
|
</p>
|
|
<p>
|
|
NPM
|
|
<ul>
|
|
<li>Coming soon</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<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 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>
|
|
<form id="formHash" name="formHash" method="post">
|
|
<div class="flexRow">
|
|
<div class="flexCol">
|
|
<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="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).
|
|
</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>
|
|
<p>
|
|
<em
|
|
>Note that CORS restrictions may limit the
|
|
effectiveness of using this function from another
|
|
domain.</em
|
|
>
|
|
</p>
|
|
|
|
<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 twtxt.txt-compatible file
|
|
from a URL and parses it into 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 CORS restrictions may limit the
|
|
effectiveness of using this function from another
|
|
domain.</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/theme-toggle.js" type="module"></script>
|
|
<script src="/demo/external-links.js" type="module"></script>
|
|
<script src="/demo/add-default-route.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>
|