My Web Development Blog
Tell the word what you are writing about in your blog. It will show up on feed readers.
2024-03-18T00:00:00Z
https://paulapplegate.com/
Paul Applegate
me@paulapplegate.com
Free advice
2024-03-18T00:00:00Z
https://paulapplegate.com/blog/free-advice/
<p>Simple and to the point.</p>
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/esdirad5tm2lei2kqqk9.jpg" class="cld-responsive" />
<p class="photo-credit">Photo by <a href="https://paulapplegate.com/">Paul Applegate</a> on <a href="https://paulapplegate.com/blog/free-advice/">Facebook</a></p>
The Game Show
2024-02-11T00:00:00Z
https://paulapplegate.com/blog/the-game-show/
<p><picture class="flow"><source type="image/avif" srcset="https://paulapplegate.com/assets/images/Pyramid-title-220w.avif 220w, https://paulapplegate.com/assets/images/Pyramid-title-440w.avif 440w, https://paulapplegate.com/assets/images/Pyramid-title-880w.avif 880w, https://paulapplegate.com/assets/images/Pyramid-title-1024w.avif 1024w, https://paulapplegate.com/assets/images/Pyramid-title-1360w.avif 1360w, https://paulapplegate.com/assets/images/Pyramid-title-2720w.avif 2720w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/Pyramid-title-220w.webp 220w, https://paulapplegate.com/assets/images/Pyramid-title-440w.webp 440w, https://paulapplegate.com/assets/images/Pyramid-title-880w.webp 880w, https://paulapplegate.com/assets/images/Pyramid-title-1024w.webp 1024w, https://paulapplegate.com/assets/images/Pyramid-title-1360w.webp 1360w, https://paulapplegate.com/assets/images/Pyramid-title-2720w.webp 2720w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/Pyramid-title-220w.jpeg 220w, https://paulapplegate.com/assets/images/Pyramid-title-440w.jpeg 440w, https://paulapplegate.com/assets/images/Pyramid-title-880w.jpeg 880w, https://paulapplegate.com/assets/images/Pyramid-title-1024w.jpeg 1024w, https://paulapplegate.com/assets/images/Pyramid-title-1360w.jpeg 1360w, https://paulapplegate.com/assets/images/Pyramid-title-2720w.jpeg 2720w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/Pyramid-title-2720w.jpeg" width="2720" height="1763" alt="Show Title" loading="eager" decoding="async" /></picture></p>
<p>I let AI write/improve my words. Here is what it wrote:</p>
<p>When I was just ten years old, I found myself under the dazzling lights of a game show set. It’s a memory that brings a smile to my face every time I think about it. The adventure began when my mother was auditioning for the $20,000 Pyramid. She had already breezed through three interviews and demo games, and was on the brink of being selected.</p>
<p>That’s when the unexpected happened. The producers pulled her aside and presented an intriguing offer. Instead of the usual pairing with a celebrity, they invited her to join a new show called the <a href="https://en.wikipedia.org/wiki/Pyramid_(game_show)" rel="noopener">Junior Partner Pyramid</a>. In this twist on the classic game, an adult would partner with their child. Without hesitation, my mom agreed, and that’s when my “training” began.</p>
<p>The day of the taping, I was a bundle of nerves. But the legendary <a href="https://en.wikipedia.org/wiki/Dick_Clark" rel="noopener">Dick Clark</a> himself put us at ease, telling us to relax and just be ourselves. Under those scorching set lights, we prepared for the show, even bringing a change of clothes to “pretend” it was the next day if we won.</p>
<p>The competition was fierce, and we ultimately lost, but the experience was unforgettable. Dick Clark spent time talking with us, and his warmth and encouragement made the whole experience feel like a win in itself.</p>
<p>If you’re curious about what 1979 TV looked like, you can watch the game show <a href="https://vimeo.com/26595314" rel="noopener">online</a> (password: pa$$word). It’s a glimpse into a unique moment in time, one I’ll treasure forever.</p>
<p><picture class="flow"><source type="image/avif" srcset="https://paulapplegate.com/assets/images/Me-Mom-220w.avif 220w, https://paulapplegate.com/assets/images/Me-Mom-440w.avif 440w, https://paulapplegate.com/assets/images/Me-Mom-880w.avif 880w, https://paulapplegate.com/assets/images/Me-Mom-1024w.avif 1024w, https://paulapplegate.com/assets/images/Me-Mom-1360w.avif 1360w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/Me-Mom-220w.webp 220w, https://paulapplegate.com/assets/images/Me-Mom-440w.webp 440w, https://paulapplegate.com/assets/images/Me-Mom-880w.webp 880w, https://paulapplegate.com/assets/images/Me-Mom-1024w.webp 1024w, https://paulapplegate.com/assets/images/Me-Mom-1360w.webp 1360w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/Me-Mom-220w.jpeg 220w, https://paulapplegate.com/assets/images/Me-Mom-440w.jpeg 440w, https://paulapplegate.com/assets/images/Me-Mom-880w.jpeg 880w, https://paulapplegate.com/assets/images/Me-Mom-1024w.jpeg 1024w, https://paulapplegate.com/assets/images/Me-Mom-1360w.jpeg 1360w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/Me-Mom-1360w.jpeg" width="1360" height="1381" alt="Me and my Mom" loading="eager" decoding="async" /></picture></p>
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,w_auto/dpr_auto/f_auto,q_auto/contract_vfe0tn.jpg" class="cld-responsive" />
<p>My words. Clearly I’m not a writer.<br />
Ten years old and on a game show. That trivia statement makes me smile whenever I think about it. It all started when my mother was auditioning for the $20,000 Pyramid. She made it through three interviews and demo games. Just when she was about to be picked for the show she was pulled aside my the higher ups and asked if she wanted to be on a new show called the <a href="https://en.wikipedia.org/wiki/Pyramid_(game_show)" rel="noopener">Junior Partner Pyramid</a>. It would be played by an adult partnered with their child instead of being paired with a famous actor. My mom said yes and that started my training haha.<br />
The day of the taping I was a nervous wreak. <a href="https://en.wikipedia.org/wiki/Dick_Clark" rel="noopener">Dick Clark</a> told us to relax and be ourselves. I remember how hot the lights were on the set. We had to bring a change of clothes in case we won and needed to “pretend” it has the next day at the least. We ended up losing the game but Dick Clark spoke to us the most during the taping. If you are curious about 1979 TV, I have the game show <a href="https://vimeo.com/26595314" rel="noopener">online.</a>, the password is pa$$word.</p>
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,w_auto/dpr_auto/f_auto,q_auto/vieste_italy_ignoyr.jpg" class="cld-responsive" />
<p><picture class="flow"><source type="image/avif" srcset="https://paulapplegate.com/assets/images/contract-220w.avif 220w, https://paulapplegate.com/assets/images/contract-440w.avif 440w, https://paulapplegate.com/assets/images/contract-880w.avif 880w, https://paulapplegate.com/assets/images/contract-1024w.avif 1024w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/contract-220w.webp 220w, https://paulapplegate.com/assets/images/contract-440w.webp 440w, https://paulapplegate.com/assets/images/contract-880w.webp 880w, https://paulapplegate.com/assets/images/contract-1024w.webp 1024w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/contract-220w.jpeg 220w, https://paulapplegate.com/assets/images/contract-440w.jpeg 440w, https://paulapplegate.com/assets/images/contract-880w.jpeg 880w, https://paulapplegate.com/assets/images/contract-1024w.jpeg 1024w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/contract-1024w.jpeg" width="1024" height="1340" alt="consolation prize list" loading="eager" decoding="async" /></picture></p>
<img src="https://res.cloudinary.com/paulapplegate-com/image/upload/f_auto,q_auto,c_fill/c_scale,w_auto:breakpoints_200_1920_30_15/vauwn2sqd4pojobtybdz.jpg" alt="" />
Eleventy Excellent 2.0
2024-02-01T00:00:00Z
https://paulapplegate.com/blog/eleventy-excellent-20/
<p>I changed so much, that documenting everything will be hard. I will try and name the most important changes in the next few weeks.</p>
<h2 id="maybe-a-quick-why-first"><a class="heading-anchor" href="https://paulapplegate.com/blog/eleventy-excellent-20/#maybe-a-quick-why-first">Maybe a quick “why” first</a></h2>
<p>I created this starter after I saw <a href="https://eleventy-excellent.netlify.app/about/#watch-the-talk" rel="noopener">Andy’s talk</a> and studied the source code for <a href="http://buildexcellentwebsit.es/" rel="noopener">buildexcellentwebsit.es</a>.</p>
<p>I quickly came to the conclusion that this is the way I want to build all my websites from now on! It’s so great. I know many of you feel the same way.</p>
<p>I had already accumulated a lot of opinions, files and basic settings from my previous Eleventy projects, and to make it easier for me to start a new project in the future, I combined everything in this starter. The name is a tribute to its origin:</p>
<blockquote>
<p>“Go Forth And Build <strong>Excellent</strong> Websites”!</p>
</blockquote>
<p>When that was finished, I thought it was only fair to make it easily accessible to others, and at the end of 2022 I registered the starter with the <a href="https://www.11ty.dev/docs/starter/" rel="noopener">official stater projects</a>.</p>
<p>What I didn’t count on, was <em>how many</em> people would actually go and use the starter.</p>
<p>So many of you have also contacted me or contributed something.</p>
<h2 id="i-wanted-to-make-the-starter-better"><a class="heading-anchor" href="https://paulapplegate.com/blog/eleventy-excellent-20/#i-wanted-to-make-the-starter-better">I wanted to make the starter better</a></h2>
<p>I have since made sure that everything stays fairly updated, fixed a few bugs and added a few features – but I haven’t quite dared to change the base too much, now that so many others were involved.</p>
<p>The thing is, I have learned <strong>lots of new things</strong> and changed my mind about other stuff like naming or organization in the last year and a half. Whenever I begin a project now, I still turn to this starter – but I modify <em>a lot</em> before I get started. This goes above all for the organization and naming of files and folders, modern CSS, and better accessibility.</p>
<p>You will see that many things are new and different, but better! And that the basic character is still the same.</p>
<p>I will try and take some time to document important changes so you can upgrade more easily.</p>
<p><a href="https://github.com/madrilene/eleventy-excellent/tree/v1" rel="noopener">I have kept v1 in a separate branch.</a></p>
<h2 id="plans-for-the-future"><a class="heading-anchor" href="https://paulapplegate.com/blog/eleventy-excellent-20/#plans-for-the-future">Plans for the future</a></h2>
<ul class="list">
<li>I will change everything to ES modules as soon as Eleventy v3 with ESM support is stable.</li>
<li>I might bring back the drawer menu as something to opt in (<strong>Update:</strong> I did this already, see “<a href="https://paulapplegate.com/get-started/#navigation">Get started</a>”).</li>
<li>Lots of small fixes, no doubt.</li>
</ul>
<p><strong>Thank you and let’s build more excellent websites!</strong></p>
What is Tailwind CSS doing here?
2023-11-30T00:00:00Z
https://paulapplegate.com/blog/what-is-tailwind-css-doing-here/
<p><strong>Update February 2024:</strong><br />
The CSS system of this starter was invented by Andy Bell.<br />
I wrote the following explanation quite quickly after hearing several times that people are confused about normal Tailwind CSS classes not working. In the meantime, Andy has published a <a href="https://piccalil.li/blog/a-css-project-boilerplate/" rel="noopener">much better and much more detailed explanation</a>.</p>
<hr />
<p>We are using Tailwinds “engine” to generate utility classes on demand, based on our design tokens.</p>
<p>If you have a look at the <a href="https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js" rel="noopener">tailwind.config.js</a>, you can see how that is done. For example, we are <a href="https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L67C1-L69C5" rel="noopener">deactivating Tailwinds default reset</a>.</p>
<p>We are hooking into the components layer, to make Tailwind output classes based on our tokens, instead of their default design system.</p>
<p>That is, you are able to use <code>mt-xs-s</code> instead of a class like <code>mt-20</code> for example. Same goes for colors, depending on the names you defined in your <code>colors.json</code>, you get custom classes like <code>text-primary</code>. These use the usual Tailwind prefixes.</p>
<p><strong>Example:</strong></p>
<pre class="language-js"><code class="language-js"><span class="token punctuation">{</span>
<span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"my custom color name"</span><span class="token punctuation">,</span>
<span class="token string-property property">"value"</span><span class="token operator">:</span> <span class="token string">"pink"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre>
<p>You get a custom property mapped to the color name <code>pink</code>: <code>--color-my-custom-color-name: pink</code> <em>and</em> the classes <code>bg-my-custom-color-name</code> as well as <code>text-my-custom-color-name</code>.</p>
<p>Consider that we limit those utilities in the theme section:</p>
<pre class="language-js"><code class="language-js"><span class="token function-variable function">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function-variable function">textColor</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function-variable function">margin</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">auto</span><span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
<span class="token operator">...</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'spacing'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token function-variable function">padding</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'spacing'</span><span class="token punctuation">)</span></code></pre>
<p>If you want to add the generation for border-color classes for example, you’d have to add that right there:</p>
<p><code>borderColor: ({theme}) => theme('colors')</code></p>
<p>Also. you <em>do</em> have something like <code>md:text-right</code> available because we define the screens on line 26:</p>
<pre class="language-js"><code class="language-js"><span class="token literal-property property">screens</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">md</span><span class="token operator">:</span> <span class="token string">'50em'</span><span class="token punctuation">,</span>
<span class="token literal-property property">lg</span><span class="token operator">:</span> <span class="token string">'80em'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>`</code></pre>
<p>Additionally, you get custom properties based on the naming of your design token files, the prefix is defined in line 77:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> groups <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'colors'</span><span class="token punctuation">,</span> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'color'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'spacing'</span><span class="token punctuation">,</span> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'space'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'fontSize'</span><span class="token punctuation">,</span> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'size'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'fontFamily'</span><span class="token punctuation">,</span> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'font'</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>In your dev tools you can see all the generated custom properties + your custom ones from <code>css/global/variables.css</code>.<br />
They are generated by default.</p>
<p><picture class="flow"><source type="image/avif" srcset="https://paulapplegate.com/assets/images/custom-properties-220w.avif 220w, https://paulapplegate.com/assets/images/custom-properties-440w.avif 440w, https://paulapplegate.com/assets/images/custom-properties-880w.avif 880w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/custom-properties-220w.webp 220w, https://paulapplegate.com/assets/images/custom-properties-440w.webp 440w, https://paulapplegate.com/assets/images/custom-properties-880w.webp 880w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/custom-properties-220w.jpeg 220w, https://paulapplegate.com/assets/images/custom-properties-440w.jpeg 440w, https://paulapplegate.com/assets/images/custom-properties-880w.jpeg 880w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/custom-properties-880w.jpeg" width="880" height="815" alt="Screenshot of the Firefox dev tools, CSS tab, showing the generated custom properties" loading="lazy" decoding="async" /></picture></p>
<p>You can also create custom utility classes on line 104:</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> customUtilities <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'spacing'</span><span class="token punctuation">,</span> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'flow-space'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'--flow-space'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span><span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'colors'</span><span class="token punctuation">,</span> <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'spot-color'</span><span class="token punctuation">,</span> <span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'--spot-color'</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>
<p>For example: <code>{key: 'spacing', prefix: 'gutter', property: '--gutter'}</code></p>
<p>If you install the Tailwind CSS IntelliSense addon, you can actually see the classes available to you, including the color preview.</p>
<p><picture class="flow"><source type="image/avif" srcset="https://paulapplegate.com/assets/images/intellisense-220w.avif 220w, https://paulapplegate.com/assets/images/intellisense-440w.avif 440w, https://paulapplegate.com/assets/images/intellisense-880w.avif 880w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/intellisense-220w.webp 220w, https://paulapplegate.com/assets/images/intellisense-440w.webp 440w, https://paulapplegate.com/assets/images/intellisense-880w.webp 880w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/intellisense-220w.jpeg 220w, https://paulapplegate.com/assets/images/intellisense-440w.jpeg 440w, https://paulapplegate.com/assets/images/intellisense-880w.jpeg 880w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/intellisense-880w.jpeg" width="880" height="495" alt="Screenshot in VS Code showing the available flow-space-classes we created, using the Tailwind CSS IntelliSense addon" loading="lazy" decoding="async" /></picture></p>
<p>Read some thoughts that lead Andy Bell to come up with that approach: <a href="https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/" rel="noopener">https://andy-bell.co.uk/i-used-tailwind-for-the-u-in-cube-css-and-i-liked-it/</a></p>
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,w_auto/dpr_auto/f_auto,q_auto/rqs5g21gldwpdnopnnzh.jpg" class="cld-responsive" />
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,w_auto/dpr_auto/f_auto,q_auto/aina-antal_wt8txa.jpg" class="cld-responsive" />
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,w_auto/dpr_auto/f_auto,q_auto/vieste_italy_fzd6ap.jpg" class="cld-responsive" />
Demo pages
2023-10-30T00:00:00Z
https://paulapplegate.com/blog/demo-pages/
<p><strong>Important</strong>: As of version 2.0, the demos featured here are all directly built in the starter.</p>
<p>I did not want to clutter the starter with too many features, that you might not need, but I find myself using them frequently for my own projects, so now they are “baked in”.<br />
I will keep the old demo repos for the moment, but they are not maintained and are deprecated.</p>
<p>If you never saw version 1, nevermind.</p>
<h2 id="demos"><a class="heading-anchor" href="https://paulapplegate.com/blog/demo-pages/#demos">Demos</a></h2>
<article class="flow my-m-l">
<h3>Gallery</h3>
<p>A gallery with good old "popup" functionality inside a dialog element and a regular loop over images.
</p><div class="cluster">
<a class="button no-indicator" href="https://paulapplegate.com/blog/post-with-a-gallery/">Demo</a>
</div>
</article>
<article class="flow my-m-l">
<h3>Pagination</h3>
<p>The blog collection with a pagination. To work with visual current page indication, :has() pseudo-class support is required.
</p><div class="cluster">
<a class="button no-indicator" href="https://paulapplegate.com/blog/page-0/">Demo</a>
</div>
</article>
<article class="flow my-m-l">
<h3>Tags</h3>
<p>The blog has a basic tag system. Tags can be stored in front matter, as a YAML list or as an array.
</p><div class="cluster">
<a class="button no-indicator" href="https://paulapplegate.com/tags/">Demo</a>
</div>
</article>
Open Graph images
2023-01-25T00:00:00Z
https://paulapplegate.com/blog/open-graph-images/
<p>When you share your blog posts, a thumbnail image may appear - the image we define in our meta data as an Open Graph Image (<code>og:image</code>).</p>
<p>This starter generates these images for your blog posts automatically. They take in the title and date of the post.</p>
<figure class="flow"><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/og-preview-220w.avif 220w, https://paulapplegate.com/assets/images/og-preview-440w.avif 440w, https://paulapplegate.com/assets/images/og-preview-880w.avif 880w, https://paulapplegate.com/assets/images/og-preview-1024w.avif 1024w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/og-preview-220w.webp 220w, https://paulapplegate.com/assets/images/og-preview-440w.webp 440w, https://paulapplegate.com/assets/images/og-preview-880w.webp 880w, https://paulapplegate.com/assets/images/og-preview-1024w.webp 1024w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/og-preview-220w.jpeg 220w, https://paulapplegate.com/assets/images/og-preview-440w.jpeg 440w, https://paulapplegate.com/assets/images/og-preview-880w.jpeg 880w, https://paulapplegate.com/assets/images/og-preview-1024w.jpeg 1024w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/og-preview-1024w.jpeg" width="1024" height="537" alt="Open Graph image preview of a blog Post. 'Eleventy Excellent 2.0' is written as a large title in the center, the date is shown above and the name and URL of the website is seen on the bottom. The backgrpund consists of layered pink color areas resembling a city skyline" loading="lazy" decoding="async" /></picture><figcaption>This is what an OG image for a blog posts looks right now</figcaption></figure>
<p>The fallback and default image for all other pages is the image set as <code>opengraph_default</code> in the <code>meta.js</code> global data file.</p>
<figure class="flow"><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/opengraph-default-220w.avif 220w, https://paulapplegate.com/assets/images/opengraph-default-440w.avif 440w, https://paulapplegate.com/assets/images/opengraph-default-880w.avif 880w, https://paulapplegate.com/assets/images/opengraph-default-1024w.avif 1024w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/opengraph-default-220w.webp 220w, https://paulapplegate.com/assets/images/opengraph-default-440w.webp 440w, https://paulapplegate.com/assets/images/opengraph-default-880w.webp 880w, https://paulapplegate.com/assets/images/opengraph-default-1024w.webp 1024w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/opengraph-default-220w.jpeg 220w, https://paulapplegate.com/assets/images/opengraph-default-440w.jpeg 440w, https://paulapplegate.com/assets/images/opengraph-default-880w.jpeg 880w, https://paulapplegate.com/assets/images/opengraph-default-1024w.jpeg 1024w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/opengraph-default-1024w.jpeg" width="1024" height="542" alt="Visible content: Eleventy starter built around the CSS workflow for Cube CSS, Every Layout, Design Tokens and Tailwind for uitility, based on the concepts explained in buildexcellentwebsit.es" loading="lazy" decoding="async" /></picture><figcaption>This is what the general OG image for non-blog posts looks like</figcaption></figure>
<p>A more detailed explanation can be found in the <a href="https://paulapplegate.com/get-started/#open-graph-images">docs</a>.</p>
Post with all the markdown
2022-11-02T00:00:00Z
https://paulapplegate.com/blog/post-with-all-the-markdown/
<p>A lot of markdown packages are installed to help you write your posts.<br />
You can configure them in <code>config/plugins/markdown.js</code>.</p>
<p>As of my personal preference, there are some presets. For example the conversion of web pages to links (<a href="http://www.lenesaile.com/" rel="noopener">www.lenesaile.com</a>) and the addition of <code>rel="noopener"</code> for external links (all links with the pattern <code>/^https?:/</code>).</p>
<p><strong>This is a tiny pitfall!</strong><br />
Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:</p>
<pre class="language-markdown"><code class="language-markdown">An internal link to the <span class="token url">[<span class="token content">about page</span>](<span class="token url">/about/</span>)</span></code></pre>
<h2 id="h2-heading"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#h2-heading">h2 Heading</a></h2>
<h3 id="h3-heading"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#h3-heading">h3 Heading</a></h3>
<h4 id="h4-heading"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#h4-heading">h4 Heading</a></h4>
<p>Muffin bonbon jujubes cheesecake chupa chups shortbread ice cream cotton candy cake. Jelly-o biscuit dessert danish dessert pastry tootsie roll lemon drops gingerbread. Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears.</p>
<p>Soufflé topping shortbread lemon.</p>
<h2 id="hr"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#hr">hr</a></h2>
<hr />
<h2 id="typographic-replacements"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#typographic-replacements">Typographic replacements</a></h2>
<p><strong>The replacement converts this input:</strong></p>
<pre class="language-markdown"><code class="language-markdown">(c) (C) (r) (R) (tm) (TM) +-
and so on.. and so on... and so on..... AND SO ON???????.....
WTF!!!!!! How many exclamation marks are you going to use????????????
,, -- ---
"double quotes" and 'single quotes'</code></pre>
<p><strong>To this:</strong></p>
<p>© © ® ® ™ ™ ±<br />
and so on… and so on… and so on… AND SO ON???..<br />
WTF!!! How many exclamation marks are you going to use???<br />
, – —<br />
“double quotes” and ‘single quotes’</p>
<h2 id="emphasis"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#emphasis">Emphasis</a></h2>
<p><strong>This is bold text</strong><br />
<em>This is italic text</em><br />
<s>Strikethrough</s></p>
<h2 id="blockquote"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#blockquote">Blockquote</a></h2>
<blockquote>
<p>Cheesecake donut marzipan sweet roll icing muffin halvah. Dragée donut cake biscuit pie carrot cake sesame snaps jelly-o gummi bears. Cotton candy cookie croissant fruitcake.</p>
</blockquote>
<h2 id="lists"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#lists">Lists</a></h2>
<h3 id="unordered-lists"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#unordered-lists">Unordered lists</a></h3>
<ul class="list">
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
<li>Another item</li>
</ul>
<h3 id="ordered-lists"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#ordered-lists">Ordered lists</a></h3>
<ol class="list">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ol>
<h2 id="code"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#code">Code</a></h2>
<p>Syntax highlighting</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.back-top-top</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> 110vh<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* by David Darnes */</span></code></pre>
<h2 id="tables"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#tables">Tables</a></h2>
<table>
<thead>
<tr>
<th>Technology</th>
<th>Fun fact</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>HTML (Hypertext Markup Language) was created by Sir Tim Berners-Lee in 1991 as a way to structure and link documents on the World Wide Web.</td>
</tr>
<tr>
<td>CSS</td>
<td>It’s called “cascading” because styles can cascade down from parent elements to their children, allowing for inheritance and overriding.</td>
</tr>
<tr>
<td>JavaScript</td>
<td>TypeError: null is not an object</td>
</tr>
</tbody>
</table>
<h2 id="links"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#links">Links</a></h2>
<p><a href="https://moderncss.dev/" rel="noopener">Read all those articles</a><br />
Autoconverted link <a href="https://every-layout.dev/" rel="noopener">https://every-layout.dev/</a> (enabled via linkify)</p>
<h2 id="emojis"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#emojis">Emojis</a></h2>
<p><strong>Literal:</strong><br />
🤩 💯 💚 👻 👾</p>
<p><strong>Classic markup:</strong><br />
😢 💩 🔥 😆 🎄<br />
(<a href="https://gist.github.com/rxaviers/7360908" rel="noopener">A reference for emoji markup</a>)</p>
<p><strong>Shortcuts (emoticons)</strong>:<br />
😃 😦 😎 😉 😛</p>
<h2 id="mark"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#mark">mark</a></h2>
<p><mark>Marked text</mark></p>
<h2 id="footnotes"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#footnotes">Footnotes</a></h2>
<p>Footnote 1 link<sup class="footnote-ref"><a href="https://paulapplegate.com/blog/post-with-all-the-markdown/#fn1" id="fnref1">[1]</a></sup>.<br />
Footnote 2 link<sup class="footnote-ref"><a href="https://paulapplegate.com/blog/post-with-all-the-markdown/#fn2" id="fnref2">[2]</a></sup>.</p>
<p>*[HTML]: Hyper Text Markup Language</p>
<h2 id="images"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-all-the-markdown/#images">Images</a></h2>
<p>Consider that <code>src</code> is already prepended in the settings.</p>
<p><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.avif 220w, https://paulapplegate.com/assets/images/EHwkdjzoWm-440.avif 440w, https://paulapplegate.com/assets/images/EHwkdjzoWm-880.avif 880w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1024.avif 1024w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1360.avif 1360w, https://paulapplegate.com/assets/images/EHwkdjzoWm-2000.avif 2000w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.webp 220w, https://paulapplegate.com/assets/images/EHwkdjzoWm-440.webp 440w, https://paulapplegate.com/assets/images/EHwkdjzoWm-880.webp 880w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1024.webp 1024w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1360.webp 1360w, https://paulapplegate.com/assets/images/EHwkdjzoWm-2000.webp 2000w" sizes="90vw" /><img loading="lazy" decoding="async" alt="Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green grass" src="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.jpeg" width="2000" height="1329" srcset="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.jpeg 220w, https://paulapplegate.com/assets/images/EHwkdjzoWm-440.jpeg 440w, https://paulapplegate.com/assets/images/EHwkdjzoWm-880.jpeg 880w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1024.jpeg 1024w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1360.jpeg 1360w, https://paulapplegate.com/assets/images/EHwkdjzoWm-2000.jpeg 2000w" sizes="90vw" /></picture></p>
<hr class="footnotes-sep" />
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Footnote <strong>can have markup</strong><br />
and multiple paragraphs. <a href="https://paulapplegate.com/blog/post-with-all-the-markdown/#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Footnote text. <a href="https://paulapplegate.com/blog/post-with-all-the-markdown/#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
Post with a video
2022-10-31T00:00:00Z
https://paulapplegate.com/blog/post-with-a-video/
<p>This starter uses Justin Ribeiro’s lite-youtube web component. Add <code>youtube: true</code> to frontmatter to activate.</p>
<div class="youtube-embed"> <lite-youtube videoid="Ah6je_bBSH8" style="background-image: url('https://i.ytimg.com/vi/Ah6je_bBSH8/hqdefault.jpg');">
<button type="button" class="lty-playbtn">
<span class="lyt-visually-hidden">Alberto Ballesteros - Artista Sin Obra</span>
</button>
</lite-youtube></div>
Post with an image
2022-10-12T00:00:00Z
https://paulapplegate.com/blog/post-with-an-image/
<p>This starter uses Eleventy’s build-time image transformations.</p>
<p>Find more info on <a href="https://www.11ty.dev/docs/plugins/image/" rel="noopener">https://www.11ty.dev/docs/plugins/image/</a> and edit settings in <code>config/shortcodes/image</code>.</p>
<h2 id="syntax"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-an-image/#syntax">Syntax</a></h2>
<p>In the most basic version it contains the path to the image, alt text (can be an empty string if the image is decorative), and may hold a caption.</p>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">eleventyImage</span> <span class="token string">"path to image"</span><span class="token punctuation">,</span> <span class="token string">"alt text"</span><span class="token punctuation">,</span> <span class="token string">"caption text"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p>It defaults to <code>loading = 'lazy'</code>, the picture element gets its set of images from <code>widths = [440, 880, 1024, 1360]</code> and compares to a condition of <code>90vw</code>.</p>
<p>If you want to be very specific, you can pass in manually all the conditions, add <code>null</code> to skip.</p>
<p>The class names are passed in the outer container, the <code><picture></code> or <code><figure></code> element (<code><figure></code> is added if you set a caption).</p>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">eleventyImage</span> <span class="token string">"path to image"</span><span class="token punctuation">,</span> <span class="token string">"alt text"</span><span class="token punctuation">,</span> <span class="token string">"caption text"</span><span class="token punctuation">,</span> <span class="token string">"eager"</span><span class="token punctuation">,</span> <span class="token string">"class names"</span><span class="token punctuation">,</span> <span class="token string">"(min-width:30em) 50vw, 100vw"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">400</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span>
<span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">eleventyImage</span> <span class="token string">"path to image"</span><span class="token punctuation">,</span> <span class="token string">"alt text"</span><span class="token punctuation">,</span> <span class="token variable">null</span><span class="token punctuation">,</span> <span class="token string">"eager"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<h3 id="example-image-with-a-caption"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-an-image/#example-image-with-a-caption">Example image with a caption</a></h3>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">eleventyImage</span> <span class="token string">"./src/assets/images/gallery/asturias-2.jpg"</span><span class="token punctuation">,</span> <span class="token string">"Close-up of a delicate white flower with a yellow center, surrounded by green leaves"</span><span class="token punctuation">,</span> <span class="token string">"Jasmine nightshades blooming in July"</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<figure class="flow"><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/asturias-2-220w.avif 220w, https://paulapplegate.com/assets/images/asturias-2-440w.avif 440w, https://paulapplegate.com/assets/images/asturias-2-880w.avif 880w, https://paulapplegate.com/assets/images/asturias-2-1024w.avif 1024w, https://paulapplegate.com/assets/images/asturias-2-1360w.avif 1360w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/asturias-2-220w.webp 220w, https://paulapplegate.com/assets/images/asturias-2-440w.webp 440w, https://paulapplegate.com/assets/images/asturias-2-880w.webp 880w, https://paulapplegate.com/assets/images/asturias-2-1024w.webp 1024w, https://paulapplegate.com/assets/images/asturias-2-1360w.webp 1360w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/asturias-2-220w.jpeg 220w, https://paulapplegate.com/assets/images/asturias-2-440w.jpeg 440w, https://paulapplegate.com/assets/images/asturias-2-880w.jpeg 880w, https://paulapplegate.com/assets/images/asturias-2-1024w.jpeg 1024w, https://paulapplegate.com/assets/images/asturias-2-1360w.jpeg 1360w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/asturias-2-1360w.jpeg" width="1360" height="903" alt="Close-up of a delicate white flower with a yellow center, surrounded by green leaves" loading="lazy" decoding="async" /></picture><figcaption>Jasmine nightshades blooming in July</figcaption></figure>
<h3 id="example-image-with-all-the-arguments"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-an-image/#example-image-with-all-the-arguments">Example image with all the arguments</a></h3>
<figure class="flow"><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/PIA08386-220w.avif 220w, https://paulapplegate.com/assets/images/PIA08386-440w.avif 440w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/PIA08386-220w.webp 220w, https://paulapplegate.com/assets/images/PIA08386-440w.webp 440w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/PIA08386-220w.jpeg 220w, https://paulapplegate.com/assets/images/PIA08386-440w.jpeg 440w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/PIA08386-440w.jpeg" width="440" height="502" alt="The preview for social media" loading="lazy" decoding="async" /></picture><figcaption>An interesting caption text.</figcaption></figure>
<figure class="flow"><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/stairs-220w.avif 220w, https://paulapplegate.com/assets/images/stairs-440w.avif 440w, https://paulapplegate.com/assets/images/stairs-880w.avif 880w, https://paulapplegate.com/assets/images/stairs-1024w.avif 1024w, https://paulapplegate.com/assets/images/stairs-1360w.avif 1360w, https://paulapplegate.com/assets/images/stairs-2720w.avif 2720w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/stairs-220w.webp 220w, https://paulapplegate.com/assets/images/stairs-440w.webp 440w, https://paulapplegate.com/assets/images/stairs-880w.webp 880w, https://paulapplegate.com/assets/images/stairs-1024w.webp 1024w, https://paulapplegate.com/assets/images/stairs-1360w.webp 1360w, https://paulapplegate.com/assets/images/stairs-2720w.webp 2720w" sizes="90vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/stairs-220w.jpeg 220w, https://paulapplegate.com/assets/images/stairs-440w.jpeg 440w, https://paulapplegate.com/assets/images/stairs-880w.jpeg 880w, https://paulapplegate.com/assets/images/stairs-1024w.jpeg 1024w, https://paulapplegate.com/assets/images/stairs-1360w.jpeg 1360w, https://paulapplegate.com/assets/images/stairs-2720w.jpeg 2720w" sizes="90vw" /><img src="https://paulapplegate.com/assets/images/stairs-2720w.jpeg" width="2720" height="1813" alt="The preview for social media" loading="lazy" decoding="async" /></picture><figcaption>An interesting caption text.</figcaption></figure>
<pre class="language-jinja2"><code class="language-jinja2"><span class="token jinja2 language-jinja2"><span class="token delimiter punctuation">{%</span> <span class="token tag keyword">eleventyImage</span> <span class="token string">"./src/assets/images/gallery/asturias-3.jpg"</span><span class="token punctuation">,</span> <span class="token string">"A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains"</span><span class="token punctuation">,</span> <span class="token variable">null</span><span class="token punctuation">,</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span> <span class="token string">"class-that-does-nothing"</span><span class="token punctuation">,</span> <span class="token string">"(min-width:30em) 50vw, 100vw"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">400</span><span class="token punctuation">]</span> <span class="token delimiter punctuation">%}</span></span></code></pre>
<p><picture class="flow class-that-does-nothing"><source type="image/avif" srcset="https://paulapplegate.com/assets/images/asturias-3-200w.avif 200w, https://paulapplegate.com/assets/images/asturias-3-400w.avif 400w" sizes="(min-width:30em) 50vw, 100vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/asturias-3-200w.webp 200w, https://paulapplegate.com/assets/images/asturias-3-400w.webp 400w" sizes="(min-width:30em) 50vw, 100vw" /><source type="image/jpeg" srcset="https://paulapplegate.com/assets/images/asturias-3-200w.jpeg 200w, https://paulapplegate.com/assets/images/asturias-3-400w.jpeg 400w" sizes="(min-width:30em) 50vw, 100vw" /><img src="https://paulapplegate.com/assets/images/asturias-3-400w.jpeg" width="400" height="265" alt="A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains" loading="lazy" decoding="async" /></picture></p>
<h2 id="markdown-sytnax"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-an-image/#markdown-sytnax">Markdown sytnax</a></h2>
<p>Thanks to the <a href="https://github.com/solution-loisir/markdown-it-eleventy-img" rel="noopener">markdown-it-eleventy-img</a> package markdown also has it own image syntax. <code>src</code> is already prepended here, see <code>config/plugins/markdown.js</code>.</p>
<pre class="language-markdown"><code class="language-markdown"><span class="token url"><span class="token operator">!</span>[<span class="token content">alt text</span>](<span class="token url">/path/to/image</span>)</span>
<span class="token url"><span class="token operator">!</span>[<span class="token content">Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras</span>](<span class="token url">/assets/images/gallery/asturias-4.jpg</span>)</span></code></pre>
<p><picture><source type="image/avif" srcset="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.avif 220w, https://paulapplegate.com/assets/images/EHwkdjzoWm-440.avif 440w, https://paulapplegate.com/assets/images/EHwkdjzoWm-880.avif 880w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1024.avif 1024w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1360.avif 1360w, https://paulapplegate.com/assets/images/EHwkdjzoWm-2000.avif 2000w" sizes="90vw" /><source type="image/webp" srcset="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.webp 220w, https://paulapplegate.com/assets/images/EHwkdjzoWm-440.webp 440w, https://paulapplegate.com/assets/images/EHwkdjzoWm-880.webp 880w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1024.webp 1024w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1360.webp 1360w, https://paulapplegate.com/assets/images/EHwkdjzoWm-2000.webp 2000w" sizes="90vw" /><img loading="lazy" decoding="async" alt="Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras" src="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.jpeg" width="2000" height="1329" srcset="https://paulapplegate.com/assets/images/EHwkdjzoWm-220.jpeg 220w, https://paulapplegate.com/assets/images/EHwkdjzoWm-440.jpeg 440w, https://paulapplegate.com/assets/images/EHwkdjzoWm-880.jpeg 880w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1024.jpeg 1024w, https://paulapplegate.com/assets/images/EHwkdjzoWm-1360.jpeg 1360w, https://paulapplegate.com/assets/images/EHwkdjzoWm-2000.jpeg 2000w" sizes="90vw" /></picture></p>
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/v1709828779/plane-landing_o1twzy.jpg" alt="" class="cld-responsive" />
<p class="photo-credit">Photo by <a href="https://unsplash.com/@zhpix?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Pascal Meier</a> on <a href="https://unsplash.com/photos/white-biplane-UYiesSO4FiM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></p>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="cld-responsive" data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,dpr_auto,w_auto/alley.jpg?_a=BAMHUyLRA" />
<p class="photo-credit">
Photo by <a href="https://unsplash.com/@zhpix?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">mos design</a> on
<a href="https://unsplash.com/photos/a-narrow-hallway-with-a-neon-sign-on-the-wall-3hDKIRiEvG8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
</p>
Post with some code
2022-09-01T00:00:00Z
https://paulapplegate.com/blog/post-with-some-code/
<p>This theme uses 11ty’s <a href="https://www.11ty.dev/docs/plugins/syntaxhighlight/" rel="noopener">Syntax Highlighting Plugin</a>, a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.</p>
<pre class="language-js"><code class="language-js"><span class="token keyword">const</span> cards <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.card'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
cards<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">card</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
card<span class="token punctuation">.</span>style<span class="token punctuation">.</span>cursor <span class="token operator">=</span> <span class="token string">'pointer'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> down<span class="token punctuation">,</span>
up<span class="token punctuation">,</span>
link <span class="token operator">=</span> card<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
card<span class="token punctuation">.</span><span class="token function-variable function">onmousedown</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>down <span class="token operator">=</span> <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
card<span class="token punctuation">.</span><span class="token function-variable function">onmouseup</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
up <span class="token operator">=</span> <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>up <span class="token operator">-</span> down <span class="token operator"><</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
link<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// © Heydon Pickering</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token selector">.smol-container</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">min</span><span class="token punctuation">(</span>100% - 3rem<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--container-max<span class="token punctuation">,</span> 60ch<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* © Stephanie Eckles, https://smolcss.dev/ */</span></code></pre>
<p>Edit styles in <code>css/blocks/code.css</code></p>
Post with 301 redirects
2022-08-28T00:00:00Z
https://paulapplegate.com/blog/post-with-301-redirects/
<p>URLs usually change over time, as you use another CMS or optimize your file structure.</p>
<p>A 301 is used when a page has permanently changed location.<br />
Informing about this change is indispensable if you want to keep your incoming links working, be it from organic Google search or other pages that have linked to your content.</p>
<p>Aleksandr Hovhannisyan came up with an <a href="https://www.aleksandrhovhannisyan.com/blog/eleventy-netlify-redirects/" rel="noopener">elegant solution for Eleventy and Netlify</a>. To directly cover several possible previous routes it is created as an array. You can find the loop in <code>_redirects.njk</code>.</p>
<h2 id="usage"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-301-redirects/#usage">Usage</a></h2>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">Frontmatter</span><span class="token punctuation">:</span>
<span class="token punctuation">---</span>
<span class="token key atrule">redirectFrom</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'/old-route/'</span><span class="token punctuation">,</span> <span class="token string">'/optionally-another-old-route/'</span><span class="token punctuation">]</span>
<span class="token punctuation">---</span></code></pre>
Post with fetched content
2022-08-28T00:00:00Z
https://paulapplegate.com/blog/post-with-fetched-content/
<p><a href="https://www.11ty.dev/docs/plugins/fetch/" rel="noopener">Eleventy Fetch</a> fetches and caches resources – at configurable intervals.</p>
<p>This is an example of fetching external data.<br />
In this case, my public repositories (with more than zero stargazer) and a cache duration of 1 day.</p>
<p>Endpoint editable in <code>_data/github.js.</code></p>
<h2 id="eleventy-excellent"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-fetched-content/#eleventy-excellent"><a href="https://github.com/madrilene/eleventy-excellent" rel="noopener">eleventy-excellent</a></a></h2>
<p><strong>324 GitHub stars</strong><br />
Eleventy starter based on the workflow suggested by Andy Bell's <a href="http://buildexcellentwebsit.es/" rel="noopener">buildexcellentwebsit.es</a>.</p>
<h2 id="eleventy-i18n"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-fetched-content/#eleventy-i18n"><a href="https://github.com/madrilene/eleventy-i18n" rel="noopener">eleventy-i18n</a></a></h2>
<p><strong>18 GitHub stars</strong><br />
Minimal starter for localized content, using Eleventy's own Internationalization (I18n) plugin</p>
<h2 id="lenesailecom"><a class="heading-anchor" href="https://paulapplegate.com/blog/post-with-fetched-content/#lenesailecom"><a href="https://github.com/madrilene/lenesaile.com" rel="noopener">lenesaile.com</a></a></h2>
<p><strong>25 GitHub stars</strong><br />
My personal website built with Eleventy. It supports three languages.</p>
<img data-src="https://res.cloudinary.com/paulapplegate-com/image/upload/c_limit,w_auto/dpr_auto/f_auto,q_auto/vieste_italy_ignoyr.jpg" class="cld-responsive" />