Fix my HTML and integrate prettier
This commit is contained in:
parent
12baf5df2e
commit
779cce9f9d
@ -1,5 +1,12 @@
|
||||
<a href="#skip" class="visually-hidden">Skip to main content</a>
|
||||
<header>
|
||||
<a href="/" class="home-link"><img class="logo" src="{{ metadata.logo }}" alt="{{ metadata.title }}"></a>
|
||||
<a
|
||||
href="/"
|
||||
class="home-link">
|
||||
<img
|
||||
class="logo"
|
||||
src="{{ metadata.logo }}"
|
||||
alt="{{ metadata.title }}">
|
||||
</a>
|
||||
{% if not hideNav %}{% include "nav.njk" %}{% endif %}
|
||||
</header>
|
||||
|
||||
@ -9,13 +9,13 @@ layout: layouts/base.njk
|
||||
<div class="post-metadata">
|
||||
{% if author %}
|
||||
|
||||
{% if author.url %}<a href="{{ author.url }}">{% endif %}
|
||||
<p>{% if author.name %}{{ author.name }}, {% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
|
||||
<p>{% if author.url %}<a href="{{ author.url }}">{% endif %}
|
||||
{% if author.name %}{{ author.name }}, {% endif %}{% if author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
|
||||
|
||||
{% else %}
|
||||
|
||||
{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
|
||||
<p>{% if metadata.author.name %}{{ metadata.author.name }}, {% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
|
||||
<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
|
||||
{% if metadata.author.name %}{{ metadata.author.name }}, {% endif %}{% if metadata.author.url %}</a>{% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
|
||||
|
||||
{% endif %}
|
||||
|
||||
@ -23,7 +23,13 @@ layout: layouts/base.njk
|
||||
<ul>
|
||||
{%- for tag in tags | filterTagList %}
|
||||
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
|
||||
<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }} </a></li>
|
||||
<li>
|
||||
<a
|
||||
href="{{ tagUrl }}"
|
||||
class="post-tag">
|
||||
{{ tag }}
|
||||
</a>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
Reply on Mastodon to comment »
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<template id="comment-template">
|
||||
|
||||
@ -1,51 +1,62 @@
|
||||
{%- if collections.posts %}
|
||||
{%- set previousPost = collections.posts | getPreviousCollectionItem %}
|
||||
{%- set nextPost = collections.posts | getNextCollectionItem %}
|
||||
{%- if nextPost or previousPost %}
|
||||
<section class="links-nextprev">
|
||||
<h2>Read Next</h2>
|
||||
<div class="postlist-item-container">
|
||||
{%- if previousPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<p>Previous Article:</p>
|
||||
<h3>
|
||||
{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if previousPost.data.synopsis %}<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ previousPost.content | truncate(105) | safe }}{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% if collections.posts %}
|
||||
{% set previousPost = collections.posts | getPreviousCollectionItem %}
|
||||
{% set nextPost = collections.posts | getNextCollectionItem %}
|
||||
{% if nextPost or previousPost %}
|
||||
<section class="links-nextprev">
|
||||
<h2>Read Next</h2>
|
||||
<div class="postlist-item-container">
|
||||
{% if previousPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<p>Previous Article:</p>
|
||||
<h3>
|
||||
{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if previousPost.data.synopsis %}
|
||||
<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>
|
||||
{% else %}
|
||||
<p>{{ previousPost.content | truncate(105) | safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% if not nextPost %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if nextPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<p>Next Article:</p>
|
||||
<h3>
|
||||
{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if nextPost.data.synopsis %}
|
||||
<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>
|
||||
{% else %}
|
||||
<p>{{ nextPost.content | truncate(105) | safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{%- if nextPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<p>Next Article:</p>
|
||||
<h3>
|
||||
{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if nextPost.data.synopsis %}<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>{% else %}{{ nextPost.content | truncate(105) | safe }}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
{% endif %}
|
||||
|
||||
@ -7,16 +7,16 @@ eleventyNavigation:
|
||||
<article>
|
||||
<h1>About me and this website I’ve built.</h1>
|
||||
<h2>All about Nathan</h2>
|
||||
<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.
|
||||
<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.</p>
|
||||
|
||||
This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself as a human and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here soon.</p>
|
||||
<p>This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself as a human and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here soon.</p>
|
||||
|
||||
<h2>About this website</h2>
|
||||
<p>This website is made with <a href="https://www.11ty.dev/">the 11ty static site generator</a>, free and open source variable typefaces <a href="https://www.gent.media/manrope">Manrope</a> and <a href="https://fraunces.undercase.xyz/">Fraunces</a>, along with plain-old HTML, CSS, and some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on <a href="https://utopia.fyi">utopia.fyi</a> to help me implement fluid typography and spacing.
|
||||
<p>This website is made with <a href="https://www.11ty.dev/">the 11ty static site generator</a>, free and open source variable typefaces <a href="https://www.gent.media/manrope">Manrope</a> and <a href="https://fraunces.undercase.xyz/">Fraunces</a>, along with plain-old HTML, CSS, and some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on <a href="https://utopia.fyi">utopia.fyi</a> to help me implement fluid typography and spacing.</p>
|
||||
|
||||
I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a> otherwise). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website.
|
||||
<p>I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a> otherwise). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website.</p>
|
||||
|
||||
Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.</p>
|
||||
<p>Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, or <a href="https://ooh.directory/">ooh.directory</a>.</p>
|
||||
|
||||
<h2>Contact Me</h2>
|
||||
<p>If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here’s where you can find me</a>.</p>
|
||||
|
||||
@ -10,8 +10,10 @@ imageURL: /img/dragons_blood_incense_copy.avif
|
||||
imageAlt: A small piece of a coreless, Japanese-style incense stick burning in a black cast-iron burner.
|
||||
mastodon_id: "111732713202024407"
|
||||
---
|
||||
Some time ago, maybe a year or so, I extruded a batch of incense sticks from some ingredients I thought might go well together: sandalwood, cinnamon, dragon's blood resin, a touch of Hojari frankincense for acidity, and some tonka bean for sweetness, if I recall correctly. After leaving the sticks to dry overnight, I was disappointed to see that they didn't stay lit; the stick would shrink behind the ember, and it would fizzle out in short order. Even worse, the little scent I was able to detect during the short burn was terrible: acrid and smoky. Dejected, I put the sticks away, returning to attempt to burn a small fragment every few days or so before I lost interest entirely. A few months later, the tube of crooked red incense sticks caught my eye, and I once again attempted to burn a stick. To my surprise, it stayed lit throughout the entire burn. The fragrance had transformed also, from leafy-campfire to a simple, warm, slightly sweet, and medicinal fragrance. While this was enough of an improvement to encourage me to light one every now and then, I remained disappointed that the fragrance was so far from what I'd hoped to achieve. After half-heartedly burning each stick in the little plastic tube that housed them over a period of weeks, the tube disappeared into a basket on the shelf beneath my coffee table amidst a mess of bundled cables and game-controllers, never to be seen again – until just a few days ago.
|
||||
Some time ago, maybe a year or so, I extruded a batch of incense sticks from some ingredients I thought might go well together: sandalwood, cinnamon, dragon's blood resin, a touch of Hojari frankincense for acidity, and some tonka bean for sweetness, if I recall correctly. After leaving the sticks to dry overnight, I was disappointed to see that they didn't stay lit; the stick would shrink behind the ember, and it would fizzle out in short order. Even worse, the little scent I was able to detect during the short burn was terrible: acrid and smoky. Dejected, I put the sticks away, returning to attempt to burn a small fragment every few days or so before I lost interest entirely.
|
||||
|
||||
A few months later, the tube of crooked red incense sticks caught my eye, and I once again attempted to burn a stick. To my surprise, it stayed lit throughout the entire burn. The fragrance had transformed also, from leafy-campfire to a simple, warm, slightly sweet, and medicinal fragrance. While this was enough of an improvement to encourage me to light one every now and then, I remained disappointed that the fragrance was so far from what I'd hoped to achieve. After half-heartedly burning each stick in the little plastic tube that housed them over a period of weeks, the tube disappeared into a basket on the shelf beneath my coffee table amidst a mess of bundled cables and game-controllers, never to be seen again – until just a few days ago.
|
||||
|
||||
[](/img/dragons_blood_incense_copy.avif)
|
||||
|
||||
While rustling around in search of a controller, I discovered the thin plastic tube, noticing two small fragments of incense sliding about as I lifted the tube from the basket. As I lit the first fragment this morning, I was met with a wonderfully clear impression of dragon's blood, uplifted by the bright citrus of Hojari frankincense, on a sweet, warm, woody base; my incense had turned out well after all. Unfortunately, the recipe, written on the tube in dry-erase marker, had long worn off; thinking the batch was a failure, I hadn't recorded it anywhere else. Burning those last two fragments today was bittersweet; all I had needed to do was wait. I'm frustrated about a number of things here, but there is something oddly gratifying about the situation. By failing to record the recipe, I got to experience something rare and unique today. In those peaceful, fragrant moments, I experienced something lovely for the first and last time – and I learned a thing or two about patience.
|
||||
While rustling around in search of a controller, I discovered the thin plastic tube, noticing two small fragments of incense sliding about as I lifted the tube from the basket. As I lit the first fragment this morning, I was met with a wonderfully clear impression of dragon's blood, uplifted by the bright citrus of Hojari frankincense, on a sweet, warm, woody base; my incense had turned out well after all. Unfortunately, the recipe, written on the tube in dry-erase marker, had long worn off; thinking the batch was a failure, I hadn't recorded it anywhere else. Burning those last two fragments today was bittersweet; all I had needed to do was wait. I'm frustrated about a number of things here, but there is something oddly gratifying about the situation. By failing to record the recipe, I got to experience something rare and unique today. In those peaceful, fragrant moments, I experienced something lovely for the first and last time — and I learned a thing or two about patience.
|
||||
|
||||
@ -7,13 +7,14 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
|
||||
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
|
||||
const pluginBundle = require("@11ty/eleventy-plugin-bundle");
|
||||
const pluginNavigation = require("@11ty/eleventy-navigation");
|
||||
const prettier = require("prettier");
|
||||
const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");
|
||||
|
||||
const figoptions = {
|
||||
figcaption: true
|
||||
};
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
module.exports = eleventyConfig => {
|
||||
|
||||
// Helper Functions
|
||||
const multiReplace = (text, replacementTable) => {
|
||||
@ -22,6 +23,15 @@ module.exports = function(eleventyConfig) {
|
||||
return newText;
|
||||
};
|
||||
|
||||
// Transforms
|
||||
eleventyConfig.addTransform("prettier", function (content, outputPath) {
|
||||
if (outputPath && outputPath.endsWith(".html")) {
|
||||
return prettier.format(content, {parser: "html", bracketSameLine: true, vueIndentScriptAndStyle: true, singleAttributePerLine: true, htmlWhitespaceSensitivity: "ignore"});
|
||||
} else {
|
||||
return content;
|
||||
}
|
||||
});
|
||||
|
||||
eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
|
||||
|
||||
// Official plugins
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"markdown-it-footnote": "^3.0.3",
|
||||
"markdown-it-image-figures": "^2.1.1"
|
||||
"markdown-it-image-figures": "^2.1.1",
|
||||
"prettier": "^3.2.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
code[class*="language-"], pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user