-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.webc
148 lines (118 loc) · 6.27 KB
/
index.webc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
---node
let layout = "layouts/base.webc";
// Hi
---
<h1>Welcome to Tugboat <accessible-emoji emoji="🛟"></accessible-emoji></h1>
<p @text="pkg.description"></p>
<h2>Features</h2>
<p>Bundled WebC components:</p>
<ul>
<li><accessible-emoji emoji="🏝"></accessible-emoji> <code>is-land</code> <em>(client-JavaScript)</em> to use Islands architecture to control how components load and initialize (using <a href="https://www.11ty.dev/docs/plugins/partial-hydration/"><code>@11ty/is-land</code></a>)</li>
<li><accessible-emoji emoji="🖼"></accessible-emoji> <code>eleventy-image</code> for easy, pre-configured, fast build-time image optimization using <a href="https://www.11ty.dev/docs/plugins/image/"><code>@11ty/eleventy-img</code></a>.</li>
<li><accessible-emoji emoji="🌌"></accessible-emoji> <code>color-schemer</code> for zero-added-specificity dark/light mode support.</li>
<li><accessible-emoji emoji="🗣"></accessible-emoji> <code>visually-hidden</code> to hide content but keep it <a href="https://www.a11yproject.com/posts/how-to-hide-content/">accessible to screen readers</a>.</li>
<li><accessible-emoji emoji="💾"></accessible-emoji> <code>pre</code> for syntax highlighting using <a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/"><code>@11ty/eleventy-plugin-syntaxhighlight</code></a>.</li>
<li><accessible-emoji emoji="🔗"></accessible-emoji> <code>favicon-link</code> will show a favicon image in an external link.</li>
<li><accessible-emoji emoji="⏰"></accessible-emoji> <code>time-difference</code> <em>(client-JavaScript)</em> to show human readable time differences for visitor-localized time zones.</li>
<li><accessible-emoji emoji="🎭"></accessible-emoji> <code>accessible-emoji</code> to show screen-reader friendly emoji.</li>
<li><accessible-emoji emoji="🎪"></accessible-emoji> <code>live-demo</code> will both render a block of code and show the server-rendered code, syntax highlighted with a copy to clipboard button.</li>
</ul>
<h2>Demos</h2>
<h3>Fancy Links</h3>
<p>Use the <code>favicon-link</code> component to easily show a link with a favicon image shown alongside the content.</p>
<live-demo>
<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>
</live-demo>
<h3>Dark/Light Mode</h3>
<live-demo @wrap>
<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>
</live-demo>
<h3>Time Difference</h3>
<p>The <code>time-difference</code> component shows the difference between a date/time and now in the user’s local time zone.</p>
<live-demo>
<p>
This page was published: <time-difference :@date="Date.now()" live units="minutes"></time-difference>
</p>
</live-demo>
<h3>Islands Architecture</h3>
<p>Use islands architecture to “hydrate” components that use client-side JavaScript when conditions are met. This island initializes a <code>time-difference</code> web component when the island is visible:</p>
<live-demo>
<p>
<is-land on:visible>
This page was published: <time-difference :@date="Date.now()" live units="minutes"></time-difference>
</is-land>
</p>
</live-demo>
<p>This island will only activate when you interact with it:</p>
<live-demo>
<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>
</live-demo>
<h3>Image Optimization</h3>
<p>A very large <code>1600×1200</code> source image has been downscaled to <code>400w</code> and <code>800w</code> output sizes in three separate image formats (<code>avif</code>, <code>webp</code>, and <code>jpeg</code>). The image component includes the <code>width</code> and <code>height</code> attributes to eliminate <a href="https://web.dev/cls/">Content Layout Shift</a>, decides whether the <code>picture</code> syntax is necessary, and generates optimal markup using <code>srcset</code>.</p>
<live-demo @wrap>
<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>
</live-demo>
<h3>Syntax Highlighting</h3>
<p>Here’s some server-rendered (no client-JavaScript) syntax highlighted code:</p>
<live-demo>
<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>
</live-demo>
<p>The <code>@language</code> <a href="https://www.11ty.dev/docs/languages/webc/#props-(properties)">prop</a> is optional, and falls back to an unstyled code block:</p>
<live-demo>
<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>
</live-demo>
<h3>Accessible Emoji</h3>
<live-demo>
<accessible-emoji emoji="✅"></accessible-emoji>
<accessible-emoji emoji="🏝"></accessible-emoji>
<accessible-emoji emoji="🫠"></accessible-emoji>
</live-demo>