initial public commit
This commit is contained in:
297
dist-demo/index.html
Normal file
297
dist-demo/index.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user