Welcome to Tugboat 🛟

A modern starter project using Eleventy and WebC.

#anchor Features

Bundled WebC components:

• 🏝 is-land (client-JavaScript) to use Islands architecture to control how components load and initialize (using @11ty/is-land)
• 🌌 color-schemer for zero-added-specificity dark/light mode support.
• 🗣 visually-hidden to hide content but keep it accessible to screen readers.
• 💾 syntax-highlight for syntax highlighting (using @11ty/eleventy-plugin-syntaxhighlight).
• 🔗 favicon-link will show a favicon image in an external link.
• ⏰ time-difference (client-JavaScript) to show human readable time differences for visitor-localized time zones.
• 🎭 accessible-emoji to show screen-reader friendly emoji.
• 🎪 live-demo will both render a block of code and show the server-rendered code, syntax highlighted with a copy to clipboard button.
• 📋 table-of-contents creates a list of server-rendered anchor links to point to headings in the document to create a table of contents (shown in the sidebar. Active state is highlighted with client-JavaScript.

Other features:

• 🖼 Images are build-time optimized using the Eleventy Image utility.

#anchor Demos

#anchor Fancy Links

Use the favicon-link component to easily show a link with a favicon image shown alongside the content.

Eleventy Zach Leatherman Max Böck Sia Karamalegos Jenn Schiffer Ryan Mulligan Sam Tancharoensuksavai George Francis Sara Soueidan

View Source

📋 Copy

<a webc:is="favicon-link" href="https://www.11ty.dev/">Eleventy</a>
<a webc:is="favicon-link" href="https://zachleat.com/">Zach Leatherman</a>
<a webc:is="favicon-link" href="https://mxb.dev/">Max Böck</a>
<a webc:is="favicon-link" href="https://sia.codes/">Sia Karamalegos</a>
<a webc:is="favicon-link" href="https://jennschiffer.com/">Jenn Schiffer</a>
<a webc:is="favicon-link" href="https://ryanmulligan.dev/">Ryan Mulligan</a>
<a webc:is="favicon-link" href="https://samtan.dev/">Sam Tancharoensuksavai</a>
<a webc:is="favicon-link" href="https://georgefrancis.dev/">George Francis</a>
<a webc:is="favicon-link" href="https://www.sarasoueidan.com/">Sara Soueidan</a>

#anchor Dark/Light Mode

<color-schemer></color-schemer>
<p>Note that this value is synchronized with all other color-schemer instances on the page (there’s another one in the footer).</p>

#anchor Time Difference

The time-difference component shows the difference between a date/time and now in the user’s local time zone.

<p>
	This page was published: <time-difference :@date="Date.now()" live units="minutes"></time-difference>
</p>

#anchor Islands Architecture

Use islands architecture to “hydrate” components that use client-side JavaScript when conditions are met. This island initializes a time-difference web component when the island is visible:

<p>
	<is-land on:visible>
		This page was published: <time-difference :@date="Date.now()" live units="minutes"></time-difference>
	</is-land>
</p>

This island will only activate when you interact with it:

<p>
	<is-land on:visible on:interaction>
		This page was published: <time-difference :@date="Date.now()" live units="minutes"></time-difference>
		<button class="demo-predefined-only">Click this button to activate the Island</button>
	</is-land>
</p>

#anchor Image Optimization

A very large 1600×1200 source image has been downscaled to 400w and 800w output sizes in three separate image formats (avif, webp, and jpeg). The image component includes the width and height attributes to eliminate Content Layout Shift, decides whether the picture syntax is necessary, and generates optimal markup using srcset.

Photo by Sung Jin Cho on Unsplash.

View Source

📋 Copy

<img src="img/sung-jin-cho-5dgq-7DySyE-unsplash.jpg" eleventy:formats="avif,webp,jpeg" eleventy:width="400,800" alt="A photo of a small blue and white tugboat next to a very large shipping container ship full of multi-colored shipping containers." sizes="100vw">

<p><em>Photo by <a href="https://unsplash.com/de/@mbuff?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sung Jin Cho</a> on <a href="https://unsplash.com/photos/5dgq-7DySyE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</em></p>

#anchor Syntax Highlighting

Here’s some server-rendered (no client-JavaScript) syntax highlighted code:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<title></title>
	</head>
	<body>
		<header>
			<h1></h1>
		</header>
		<main>
		</main>
	</body>
</html>

<template webc:is="syntax-highlight" @language="html">
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<title></title>
	</head>
	<body>
		<header>
			<h1></h1>
		</header>
		<main>
		</main>
	</body>
</html>
</template>

The @language prop is optional, and falls back to an unstyled code block:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<title></title>
	</head>
	<body>
		<header>
			<h1></h1>
		</header>
		<main>
		</main>
	</body>
</html>

<template webc:is="syntax-highlight">
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<title></title>
	</head>
	<body>
		<header>
			<h1></h1>
		</header>
		<main>
		</main>
	</body>
</html>
</template>

#anchor Accessible Emoji

<accessible-emoji emoji="✅"></accessible-emoji>
<accessible-emoji emoji="🏝"></accessible-emoji>
<accessible-emoji emoji="🫠"></accessible-emoji>