refactor: add gitRev, consolidate <head>

uncenter · May 20, 2023 · 6517e2e · 6517e2e
1 parent 2890d58
commit 6517e2e
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
 		"cross-spawn": "^7.0.3",
 		"cssnano": "^5.1.15",
 		"eleventy-plugin-icons": "3.0.0-1",
+		"execa": "^7.1.1",
 		"fs": "0.0.1-security",
 		"gitlog": "^4.0.8",
 		"html-minifier": "^4.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/_data/gitRev.js b/src/_data/gitRev.js
@@ -0,0 +1,8 @@
+// Via: https://github.com/ryanccn/ryanccn.dev/blob/827b12321ea7d606593d2d2a3cfabe8e9a5bc7b3/src/_data/gitRev.js
+// License: MIT
+module.exports = async () => {
+	const { execa } = await import('execa');
+	return await execa('git', ['rev-parse', '--short', 'HEAD']).then(
+		(a) => a.stdout,
+	);
+};
diff --git a/src/_includes/head.njk b/src/_includes/head.njk
diff --git a/src/_includes/tags.njk b/src/_includes/tags.njk
@@ -4,7 +4,7 @@
             <time datetime="{{ tagsDate }}">{{ tagsDate | toShortDate }}</time>
         {% endif %}
         {% if tagsTags %}
-            ·
+                &middot;
                 <span class="capitalize">Tagged:</span>
             <div>
                 {%- for tag in tagsTags -%}

diff --git a/src/_layouts/index.njk b/src/_layouts/index.njk
@@ -1,61 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        {% include "head.njk" %}
-        <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/GeneralSans-Variable.woff2?v=20230514" crossorigin="anonymous">
-        <link rel="stylesheet" href="/assets/styles.css">
-        {% if styles %}
-            {% for style in (styles | toArray) %}<link rel="stylesheet" href="/assets/css/{{ style }}">{% endfor %}
-        {% endif %}
+        <meta charset="utf-8">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="author" content="{{ meta.name }}">
+        <meta name="description" content="{% if description %}{{ description }}{% else %}{{ meta.description }}{% endif %}">
+        <meta name="generator" content="{{ eleventy.generator }}">
+
+        <title>{{ title }} &middot; {{ meta.name }}</title>
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="manifest" href="/site.webmanifest">
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+        <link rel="shortcut icon" href="/favicon.ico">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="theme-color" content="#ffffff">
+        <meta name="view-transition" content="same-origin">
+
+        <link href="https://github.com/{{ meta.github.username }}" rel="me">
+        <link href="https://{{ meta.social.mastodon.instance }}/@{{ meta.social.mastodon.username }}" rel="me">
+
+        <link rel="canonical" href="{{ meta.url }}{{ page.url }}">
+        <link rel="alternate" type="application/rss+xml" href="https://{{ meta.domain }}/feed.xml">
+
+        <link rel="preload" as="font" type="font/woff2" href="/assets/fonts/GeneralSans-Variable.woff2" crossorigin="anonymous">
+        <link rel="stylesheet" href="/assets/styles.css?v={{ gitRev }}">
+
+        <script defer data-website-id="{{ meta.analytics.websiteId }}" data-domains="{{ meta.domain }}" src="{{ meta.analytics.url }}/{{ meta.analytics.trackerScript }}.js"></script>
         <style>
             {{inlined.css | safe}}
         </style>
         <script>
-            function loadGiscus() {
-                if (!document.querySelector('#comments')) {
-                    console.warn(`Giscus: #comments element not found (ignore if this isn't a blog post).`);
-                    return;
-                }
-                let giscusAttributes = {
-                    src: 'https://giscus.app/client.js',
-                    'data-repo': '{{ meta.github.username }}/{{ meta.github.repo }}',
-                    'data-repo-id': 'R_kgDOHSjhjQ',
-                    'data-category-id': 'DIC_kwDOHSjhjc4CTQUr',
-                    'data-mapping': 'title',
-                    'data-reactions-enabled': '1',
-                    'data-emit-metadata': '0',
-                    'data-input-position': 'top',
-                    'data-theme': document
-                        .documentElement
-                        .getAttribute('theme'),
-                    'data-lang': 'en',
-                    crossorigin: 'anonymous',
-                    async: ''
-                };
-                let giscusScript = document.createElement('script');
-                Object
-                    .entries(giscusAttributes)
-                    .forEach(([key, value]) => giscusScript.setAttribute(key, value),);
-                document
-                    .querySelector('#comments')
-                    .innerHTML = '';
-                document
-                    .querySelector('#comments')
-                    .appendChild(giscusScript);
-            }
             {{ inlined.js.before | safe }}
         </script>
     </head>
     <body class="mx-4 my-12 p-4 bg-bg text-fg font-display">
         {{ content | safe }}
     </body>
     <script>
+        function loadGiscus() {
+            if (!document.querySelector('#comments')) 
+                return;
+            let giscusAttributes = {
+                src: 'https://giscus.app/client.js',
+                'data-repo': '{{ meta.github.username }}/{{ meta.github.repo }}',
+                'data-repo-id': 'R_kgDOHSjhjQ',
+                'data-category-id': 'DIC_kwDOHSjhjc4CTQUr',
+                'data-mapping': 'title',
+                'data-reactions-enabled': '1',
+                'data-emit-metadata': '0',
+                'data-input-position': 'top',
+                'data-theme': document
+                    .documentElement
+                    .getAttribute('theme'),
+                'data-lang': 'en',
+                crossorigin: 'anonymous',
+                async: ''
+            };
+            let giscusScript = document.createElement('script');
+            Object
+                .entries(giscusAttributes)
+                .forEach(([key, value]) => giscusScript.setAttribute(key, value),);
+            document
+                .querySelector('#comments')
+                .innerHTML = '';
+            document
+                .querySelector('#comments')
+                .appendChild(giscusScript);
+        }
         window.addEventListener('load', loadGiscus);
         {{ inlined.js.after | safe }}
     </script>
-    {% if scripts %}
-        {% for script in (scripts | toArray) %}
-            <script src="/assets/scripts/{{script}}"></script>
-        {% endfor %}
-    {% endif %}
 </html>