Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Last active May 22, 2024 04:52
Show Gist options
  • Save cferdinandi/5a8fdc0e315974de1b793532acb20852 to your computer and use it in GitHub Desktop.
Save cferdinandi/5a8fdc0e315974de1b793532acb20852 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;
}
simple-toc ul {
list-style: none;
margin-left: 0;
padding-left: 0;
display: flex;
align-items: center;
column-gap: 1em;
flex-wrap: wrap;
}
</style>
</head>
<body>
<h1>Table of Contents</h1>
<simple-toc heading="On this page..."></simple-toc>
<h2>Cat O'Nine Tails</h2>
<p>Cat o'nine tails Pieces of Eight swab carouser tackle. Pink hornswaggle gabion Sea Legs Davy Jones' Locker.</p>
<p>Hang the jib Nelsons folly trysail ahoy prow. Transom strike colors scallywag aft league.</p>
<h3 id="the-brig">The Brig</h3>
<p>Dead men tell no tales topmast Sail ho Davy Jones' Locker chantey. Wherry fluke pillage rope's end brig.</p>
<h4>Privateer</h4>
<p>Tack topgallant draft line flogging. Maroon overhaul grog blossom Privateer main sheet.</p>
<p>Provost me cackle fruit Corsair Cat o'nine tails. Hempen halter Davy Jones' Locker clipper bring a spring upon her cable run a shot across the bow.</p>
<h2>Ahoy</h2>
<p>Booty squiffy wench overhaul ahoy. Parrel Pirate Round long clothes long boat come about.</p>
<p>Squiffy jack crow's nest bilged on her anchor barkadeer. Snow bucko mizzen six pounders tack.</p>
<h3 id="man-of-war">Man-of-War</h3>
<p>Lee lad nipperkin avast pressgang. Man-of-war prow ho Sail ho landlubber or just lubber.</p>
<p>Ho no prey, no pay fire ship salmagundi capstan. Hail-shot doubloon wherry loaded to the gunwalls cutlass.</p>
<h2 id="corsair">Corsair</h2>
<p>Corsair chantey hardtack ahoy snow. Maroon cog galleon topmast tender.</p>
<h3 id="shiver-me-timbers">Shiver Me Timbers</h3>
<p>Galleon nipper Shiver me timbers lugger Nelsons folly. Wench ballast scurvy man-of-war hearties.</p>
<p>Poop deck clap of thunder Corsair grog hornswaggle. Dead men tell no tales brigantine long clothes black spot sutler.</p>
<h4 id="scurvy-dog">Scurvy Dog</h4>
<p>Jury mast Letter of Marque boatswain scurvy sheet. Jolly boat plunder jack starboard Pirate Round.</p>
<p>Holystone bring a spring upon her cable grog blossom deadlights league. Lanyard gabion reef sails booty gaff.</p>
<h4>Sea Legs</h4>
<p>Sea Legs to go on account skysail Yellow Jack heave down. Spanker heave down yawl starboard barque.</p>
<p>To go on account hulk swing the lead heave to tack. Fore fire in the hole prow run a rig Jack Ketch.</p>
<h2 id="quarterdeck">On the Quarterdeck</h2>
<p>Tack chase red ensign league pinnace. Holystone quarterdeck me boatswain rope's end.</p>
<p>Sink me lanyard Pieces of Eight starboard black spot. Blimey heave down crimp mutiny matey.</p>
<h3 id="jolly-roger">Jolly Roger</h3>
<p>Belay piracy come about jolly boat transom. Heave to gally snow Arr wherry.</p>
<p>Sutler Davy Jones' Locker ahoy walk the plank lugger. Jolly Roger matey hornswaggle Privateer marooned.</p>
<h2>Davy Jones' Locker</h2>
<p>Davy Jones' Locker jib trysail bowsprit heave down. Transom square-rigged clipper Jack Ketch chandler.</p>
<p>Square-rigged yawl execution dock sloop American Main. Six pounders red ensign lugger heave to dead men tell no tales.</p>
<h3 id="sloop">Sloop</h3>
<p>Spanker rutters Arr sloop pinnace. List crimp swab Blimey grog.</p>
<p>Shiver me timbers hulk black jack Pirate Round clap of thunder. Scuppers six pounders carouser spirits jib.</p>
<h4 id="swab">Swab</h4>
<p>Spanker rutters Arr sloop pinnace. List crimp swab Blimey grog.</p>
<p>Shiver me timbers hulk black jack Pirate Round clap of thunder. Scuppers six pounders carouser spirits jib.</p>
<h5>Grog</h5>
<p>Spanker rutters Arr sloop pinnace. List crimp swab Blimey grog.</p>
<p>Shiver me timbers hulk black jack Pirate Round clap of thunder. Scuppers six pounders carouser spirits jib.</p>
<script src="simple-toc.js"></script>
</body>
</html>
customElements.define('simple-toc', class extends HTMLElement {
/**
* Instantiate the Web Component
*/
constructor () {
// Get parent class properties
super();
// Generate HTML
let heading = this.getAttribute('heading');
let navList = Array.from(document.querySelectorAll('h2')).map(function (heading) {
if (!heading.id) return '';
return `<li><a href="#${heading.id}">${heading.textContent}</a></li>`;
}).join('');
// Make sure a navList exists
if (navList.length < 1) return;
// Render the HTML
this.innerHTML = `<ul>${heading ? `<li><strong>${heading}</strong></li>` : ''}${navList}</ul>`;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment