Skip to main content
Tugboat 🛟
On this page

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)
  • 🖼 eleventy-image for easy, pre-configured, fast build-time image optimization using @11ty/eleventy-img.
  • 🌌 color-schemer for zero-added-specificity dark/light mode support.
  • 🗣 visually-hidden to hide content but keep it accessible to screen readers.
  • 💾 pre 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.

anchor Demos

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

Favicon for https://www.11ty.dev/ Eleventy Favicon for https://zachleat.com/ Zach Leatherman Favicon for https://mxb.dev/ Max Böck Favicon for https://sia.codes/ Sia Karamalegos Favicon for https://jennschiffer.com/ Jenn Schiffer Favicon for https://ryanmulligan.dev/ Ryan Mulligan Favicon for https://samtan.dev/ Sam Tancharoensuksavai Favicon for https://georgefrancis.dev/ George Francis Favicon for https://www.sarasoueidan.com/ Sara Soueidan
View Source 
<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

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

View Source 
<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.

This page was published:

View Source 
<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:

This page was published:

View Source 
<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:

This page was published:

View Source 
<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.

A photo of a small blue and white tugboat next to a very large shipping container ship full of multi-colored shipping containers.

Photo by Sung Jin Cho on Unsplash.

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

<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>
View Source 
<pre @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>
</pre>

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>
View Source 
<pre>
<!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>
</pre>

anchor Accessible Emoji

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