dependencies updates, readme stuff and optimized head structure

package.json

@@ -42,7 +42,7 @@
     "cssnano": "^5.1.7",
     "dayjs": "^1.11.5",
     "dotenv": "^16.0.3",
-    "esbuild": "^0.15.10",
+    "esbuild": "^0.16.4",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

readme.md

@@ -1,11 +1,11 @@
-# Eleventy starter
+# Eleventy Excellent
 
-Opiniated but easy to use Eleventy starter, based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
+Opiniated but easy to use Eleventy starter, based on the workflow suggested by Andy Bell's [buildexcellentwebsit.es](https://buildexcellentwebsit.es/).
 
 If you end up using this starter, feel free to send me a link, I'd love to see it!
 Also let me know if you miss any features. Currently in planning: automatically generated OpenGraph images (as fallback) and dark mode.
 
-- [Eleventy starter](#eleventy-starter)
+- [Eleventy Excellent](#eleventy-excellent)
   - [Preview](#preview)
   - [Features](#features)
   - [First steps](#first-steps)
@@ -14,7 +14,9 @@ Also let me know if you miss any features. Currently in planning: automatically
     - [Install dependencies](#install-dependencies)
     - [Working locally](#working-locally)
     - [Creating a production build](#creating-a-production-build)
+  - [Built with Eleventy Excellent](#built-with-eleventy-excellent)
   - [Logbook](#logbook)
+    - [22-12-12](#22-12-12)
     - [22-11-24](#22-11-24)
     - [22-11-04](#22-11-04)
     - [22-10-30](#22-10-30)
@@ -36,10 +38,10 @@ https://eleventy-excellent.netlify.app/
 - Youtube embed with lite-youtube _(see blog post)_
 - Easy resource fetching with eleventy-fetch _(see blog post)_
 - Syntax highlighting via eleventy-plugin-syntaxhighlight _(see blog post)_
+- Advanced markdown handling _(see blog post)_
 - SEO basics (XML-sitemap, metadata)
 - dayjs handling dates & times
 - 301 redirects for Netlify
-- Advanced markdown handling
 - Bundling via esbuild
 - RSS feed
 - Links to social networks in footer
@@ -82,8 +84,20 @@ Minify JS, inline and minify CSS.
 npm run build
 ```
 
+## Built with Eleventy Excellent
+
+- [www.lenesaile.com](https://www.lenesaile.com/)
+- [stephenanfield.com](https://stephenanfield.com/)
+- [krgr.dev](https://krgr.dev/)
+
 ## Logbook
 
+### 22-12-12
+
+- updated head structure for better performance
+- added "built with this" section in readme
+- added note for internal links in markdown blog post
+
 ### 22-11-24
 
 - updated required node version in package.json

src/_includes/partials/meta-info.njk

@@ -1,7 +1,3 @@
-<!-- https://htmlhead.dev / https://www.matuzo.at/blog/html-boilerplate/
--->
-
-<!-- Set the base URL for all relative URLs within the document -->
 <base href="{{ page.url }}" />
 
 <meta
@@ -16,50 +12,30 @@
   "
 />
 
+<meta name="theme-color" content="{{ meta.themeColor }}" />
 <meta name="robots" content="index,follow" /><!-- All Search Engines -->
 <meta name="googlebot" content="index,follow" /><!-- Google Specific -->
-<meta name="generator" content="eleventy" /><!-- thank you, Zach Leatherman -->
+<meta name="generator" content="{{ eleventy.generator }}" /><!-- thank you, Zach -->
 <!-- Disable automatic detection and formatting of possible phone numbers -->
 <meta name="format-detection" content="telephone=no" />
 <!-- Helps prevent duplicate content issues -->
 <link rel="canonical" href="{{ meta.url }}{{ page.url }}" />
 
-<title>
-  {% if seo.title %} {{ seo.title }}
-  {% elif title %}
-  {{ title }}
-  {% else %}
-  {{ meta.siteName }}
-  {% endif %}
-</title>
-
 <!-- Links to information about the author(s) of the document -->
 <link rel="author" href="humans.txt" />
 
-<!-- Favicon -->
-<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any" />
-<link rel="icon" href="{{ '/favicon.svg' | url }}" type="image/svg+xml" />
-<link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png' | url }}" />
-<link rel="icon" type="image/png" href="{{ '/favicon-32x32.png' | url }}" sizes="32x32" />
-<link rel="icon" type="image/png" href="{{ '/favicon-16x16.png' | url }}" sizes="16x16" />
-<link rel="manifest" href="{{ '/site.webmanifest' | url }}" />
-
 {% if meta.meta_data.mastodonProfile %}
 <!-- Mastodon verified site -->
 <link rel="me" href="{{ meta.meta_data.mastodonProfile }}" />
 {% endif %}
 
-<meta name="theme-color" content="{{ meta.themeColor }}" />
+<!-- Open Graph meta  -->
-<meta name="generator" content="Eleventy" />
-
-<!-- Facebook Open Graph meta -->
 <meta property="og:url" content="{{ meta.url }}{{ page.url }}" />
 <meta property="og:type" content="website" />
 <meta
   property="og:title"
   content="{% if title %}{{ title }}{% else %}{{ meta.siteName }}{% endif %}"
 />
-
 <meta
   property="og:image"
   content="{{
@@ -68,7 +44,6 @@
     meta.meta_data.opengraph_default
   }}{% endif %}"
 />
-
 <meta
   property="og:description"
   content="{% if description %}{{ description }}{% else %}{{
@@ -79,13 +54,19 @@
 <meta property="og:locale" content="{{ meta.locale }}" />
 <meta property="article:author" content="{{ meta.author }}" />
 
-<!-- Twitter Open Graph meta -->
+<!-- Twitter meta -->
 <meta name="twitter:card" content="summary_large_image" />
 {% if meta.meta_data.twitterSite %}
 <meta name="twitter:site" content="{{ meta.meta_data.twitterSite }}" />
 {% endif %} {% if meta.meta_data.twitterCreator %}
 <meta name="twitter:creator" content="{{ meta.meta_data.twitterCreator }}" />
 {% endif %}
-
-<!-- disallow Twitter from using your site's info for personalization purposes -->
 <meta name="twitter:dnt" content="on" />
+
+<!-- Favicon -->
+<link rel="icon" href="{{ '/favicon.ico' | url }}" sizes="any" />
+<link rel="icon" href="{{ '/favicon.svg' | url }}" type="image/svg+xml" />
+<link rel="apple-touch-icon" sizes="180x180" href="{{ '/apple-touch-icon.png' | url }}" />
+<link rel="icon" type="image/png" href="{{ '/favicon-32x32.png' | url }}" sizes="32x32" />
+<link rel="icon" type="image/png" href="{{ '/favicon-16x16.png' | url }}" sizes="16x16" />
+<link rel="manifest" href="{{ '/site.webmanifest' | url }}" />

src/_layouts/base.njk

@@ -3,13 +3,28 @@
 <!DOCTYPE html>
 <html lang="{{ meta.lang }}">
   <head>
+    <!-- charset/http-equiv/viewport -->
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    {% include "partials/meta-info.njk" %}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <!-- fonts preload -->
+    <!-- title -->
+    <title>
+      {% if seo.title %} {{ seo.title }}
+      {% elif title %}
+      {{ title }}
+      {% else %}
+      {{ meta.siteName }}
+      {% endif %}
+    </title>
 
+    <!-- synchronous js / schema  -->
+    {% include "schemas/base-schema.njk" %}
+
+    <!-- synchronous css / inline css  -->
+    <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
+
+    <!-- preloads -->
     <link
       rel="preload"
       href="/assets/fonts/inter/inter-v7-latin-500.woff2"
@@ -17,7 +32,6 @@
       type="font/woff2"
       crossorigin
     />
-
     <link
       rel="preload"
       href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
@@ -26,23 +40,11 @@
       crossorigin
     />
 
-    <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
+    <!-- defered js  -->
-
-    <!-- defer js  -->
     <script type="module" src="/assets/app.js" defer></script>
 
-    <!--  Add facility for pages to declare an array of stylesheet paths -->
+    <!-- everything else: meta tags, icons, open graph etc.  -->
-    {% if pageStylesheets %} {% for item in pageStylesheets %}
+    {% include "partials/meta-info.njk" %}
-    <link
-      rel="stylesheet"
-      media="print"
-      href="{{ item }}?{{ assetHash }}"
-      onload="this.media='all'"
-    />
-    {% endfor %} {% endif %}
-
-    <!-- include base schema  -->
-    {% include "schemas/base-schema.njk" %}
   </head>
 
   <body>

src/posts/2022-11-02-markdown.md

@@ -8,6 +8,12 @@ A lot of markdown packages are installed to help you write your posts. You can c
 
 As of my personal preference, there are some presets. For example the automatic conversion of web pages to links (lenesaile.com) and the automatic addition of `target: '_blank'` and `rel: 'noreferrer noopener'` for external links (all links with the pattern`/^https?:/`).
 
+This is a small pitfall! 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:
+
+```
+An internal link to the [about page](/about/)
+```
+
 ## h2 Heading
 
 ### h3 Heading