SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: 🩹 use twig for fenced html code blocks for improved code highlighting in resulting page

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-26 16:40:31 +02:00
parent 47e46af2ca
commit 03e23c1ea4
1 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/posts/2024-10-19_building-a-blog-with-eleventy.md
View file

@ -53,7 +53,7 @@ You can think of layouts as re-usable content wrappers. Which is great, since it
Eleventy by default looks for layouts in a sub-directory called `_includes`. The naming for layout files is arbitrary, so I just went with a `base.njk` layout that holds all the default boilerplate HTML structure that will be common to all pages on the site. Since I'm using Nunjucks as my templating language for layouts, it offers me some variables inside the HTML and this is what makes this a whole lot more dynamic.
```html
```twig
<!DOCTYPE html>
<html lang="en">
<head>
@ -97,7 +97,7 @@ Eleventy doesn't really care what the {% raw %}`{{ content }}`{% endraw %} in a
Suppose the layout to be chained is called `blogpost.njk` and will receive all the, well, blog posts. It could look something like this:
```html
```twig
---
layout: base.njk
---
@ -179,7 +179,7 @@ When using a more complex data structure like this, it's important to note that
Until now the site has no styles, which doesn't look particularly pretty. Adding styles isn't very complicated either, though. It's just one line to add to the `base.njk` layout in the page's `<head>` section:
```html
```twig
<link rel="stylesheet" href="{% raw %}{{ '/css/style.css' | url }}{% endraw %}">
```
@ -339,7 +339,7 @@ Most plugins for Eleventy still use CommonJS in their examples, but they're stil
Eleventy offers a 1st party navigation plugin. It operates on collections to generate the navigation in templates via filters. The most simple way to add navigation to a site is:
```html
```twig
<!DOCTYPE html>
<html lang="en">
<head>
@ -385,7 +385,7 @@ Now, having just an `<ul>` full of links doesn't exactly make for the prettiest
Something I wish the docs were clearer about, though, is the fact that this is not entirely solvable in *front matter* as shown in the [examples](https://www.11ty.dev/docs/plugins/navigation/#advanced-all-rendering-options-for-eleventynavigationtohtml). Added to my `base.njk` layout it just kept throwing errors about `eleventyNavigation` not being defined (I guess it means the value for the `activeKey`?) which is confusing as hell when it's right there. So either the example given in the docs is just flat-out wrong or the filter doesn't get passed the instance of `eleventyNavigation`. That kept me busy for longer than I would've liked. Eventually I put it in directly in the options of the filter. Doesn't look as tidy as I would've liked, but it works.
```html
```twig
<!DOCTYPE html>
<html lang="en">
<head>
@ -418,7 +418,7 @@ As long as the blog is still in its infancy, the post overview page is still qui
This is where the pagination plugin comes to the rescue! If I want the blog post page to only show a limited number of posts before it's necessary to "flip the page", I just add it to that page like so:
```html
```twig
---
layout: postlist.njk
title: Posts
@ -447,7 +447,7 @@ As you can see, pagination is done with the aptly named `pagination` object in *
Adding it to the page where the posts will eventually get listed:
```html
```twig
<nav>
<ol class="pagination">
<li><a href="{% raw %}{{ pagination.href.first }}{% endraw %}">First Page</a></li>
@ -473,7 +473,7 @@ Adding it to the page where the posts will eventually get listed:
It might be unnecessary to show pagination when there's less than 10 posts (only 1 page). So let's hide it when it would be otherwise unnecessary:
```html
```twig
{% raw %}{% if pagination.pages.length > 1 %}
<nav>
<ol class="pagination">
@ -501,7 +501,7 @@ It might be unnecessary to show pagination when there's less than 10 posts (only
We can take this even further: If the visitor is viewing the first page in the pagination it wouldn't make much sense for the first and previous links to be clickable. The same goes for the next and last links. So let's give them elements that aren't clickable by default and add the `aria-disabled` attributes for both communicating to assistive technologies that the element is disabled and to have an additional way to target them in CSS.
```html
```twig
{% raw %}{% if pagination.pages.length > 1 %}
<nav aria-label="Post pages">
<ol class="pagination">
@ -631,7 +631,7 @@ After a quick install and adding it to the `tailwind.config.js`, there's now a w
For the most basic use, just adding the `prose` CSS class to the blog post layout does the trick:
```html
```twig
<article class="prose">
{% raw %}{{ content | safe }}{% endraw %}
</article>