Eric Woodward
1c06197be0
add LibreJS licenses to all demo JS split browser build from node build add copyright info to license files update to use yarn v4.13.0 update to v0.9.2
335 lines
10 KiB
HTML
335 lines
10 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>,
|
|
with NPM and JSR versions coming soon.
|
|
<li>Fully typed and source-mapped.</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 an interactive demo <em>(you're looking at it)</em>.</li>
|
|
</ul>
|
|
|
|
|
|
<h2>Installation</h2>
|
|
|
|
<p>This library can be installed in 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) into your code:
|
|
<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 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/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>
|