Basic setup

src/assets/scripts/embedded/register-serviceworker.js

@@ -0,0 +1,5 @@
+window.addEventListener('load', () => {
+  navigator.serviceWorker.register('/sw.js').catch((registrationError) => {
+    console.error('SW registration failed: ', registrationError);
+  });
+});

src/assets/scripts/embedded/theme-switcher.js

@@ -0,0 +1,42 @@
+(function () {
+  const root = document.getElementsByTagName('html')[0];
+
+  function setTheme(newTheme) {
+    window.__theme = newTheme;
+    preferredTheme = newTheme;
+    const currentTheme = newTheme === 'light' ? 'dark' : 'light';
+    root.classList.add(newTheme);
+    root.classList.remove(currentTheme);
+  }
+
+  let preferredTheme;
+
+  try {
+    preferredTheme = localStorage.getItem('theme');
+  } catch (err) {
+    console.error(err);
+  }
+
+  window.__setPreferredTheme = function (newTheme) {
+    setTheme(newTheme);
+    try {
+      localStorage.setItem('theme', newTheme);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  window.__toggleTheme = function () {
+    const currentTheme = window.__theme;
+    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+    window.__setPreferredTheme(newTheme);
+  };
+
+  const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  darkQuery.addEventListener('change', function (e) {
+    window.__setPreferredTheme(e.matches ? 'dark' : 'light');
+  });
+
+  setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
+})();

src/assets/scripts/main.js

@@ -0,0 +1 @@
+console.log('Hello, world');

src/data/site.js

@@ -0,0 +1,9 @@
+module.exports = {
+  isProduction: process.env.ELEVENTY_ENV === 'production',
+  buildTime: new Date(),
+  title: '',
+  description: '',
+  url: 'https://www.kogakure.de',
+  author: 'Stefan Imhoff',
+  twitter: '@kogakure',
+};

src/includes/favicons.njk

@@ -0,0 +1,4 @@
+<link rel="icon" href="/favicon.ico" />
+<link rel="icon" href="{{ site.faviconPath }}favicon.svg" type="image/svg+xml" />
+<link rel="apple-touch-icon" href="{{ site.faviconPath }}apple-touch-icon.png" />
+<link rel="manifest" href="/manifest.webmanifest" />

src/includes/feeds.njk

@@ -0,0 +1 @@
+<link rel="alternate" type="application/rss+xml" title="" href="{{ site.url }}/index.xml" />

src/includes/icon-sprites.njk

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="0" height="0">
+  {# {% include "icons.svg" %} #}
+</svg>

src/includes/meta-tags.njk

@@ -0,0 +1,45 @@
+{%- set ogTitle -%}
+  {%- if page.url === "/" -%}
+    {{ site.author }} · {{ site.description }}
+  {%- else -%}
+    {{ title }} · {{ site.author }}
+  {%- endif -%}
+{%- endset -%}
+
+{%- set ogDescription -%}
+  {%- if page.url === "/" -%}
+    {{ site.tagline }}
+  {%- else -%}
+    {{ description or title }}
+  {%- endif -%}
+{%- endset -%}
+
+{%- set ogImage -%}
+  {%- if og -%}
+    {{ site.url }}/assets/images/branding/og/{{ og }}
+  {%- else -%}
+    {{ site.url }}/assets/images/branding/og/banner.png
+  {%- endif -%}
+{%- endset -%}
+
+<!-- Meta -->
+<meta name="author" content="{{ site.author }}" />
+<meta name="description" content="{{ ogDescription }}" />
+<meta name="theme-color" content="#e7e6e4" />
+
+<!-- Open graph -->
+<meta property="og:title" content="{{ ogTitle }}" />
+<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
+<meta property="og:description" content="{{ ogDescription }}" />
+<meta property="og:type" content="article" />
+<meta property="og:image" content="{{ ogImage }}"/>
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="675" />
+
+<!-- Twitter -->
+<meta name="twitter:title" content="{{ ogTitle }}" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="{{ site.twitter }}" />
+<meta name="twitter:description" content="{{ ogDescription }}" />
+<meta name="twitter:image" content="{{ ogImage }}" />
+<meta name="twitter:creator" content="{{ site.twitter }}" />

src/includes/preload.njk

@@ -0,0 +1,3 @@
+<link rel="preload" href="{{ '/assets/fonts/xyz1.woff2' | url }}" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="{{ '/assets/fonts/xyz2.woff2' | url }}" as="font" type="font/woff2" crossorigin />
+

src/includes/robots.njk

@@ -0,0 +1,5 @@
+{% if robots %}
+  <meta name="robots" content="{{ robots }}" />
+{% else %}
+  <meta name="robots" content="all" />
+{% endif %}

src/includes/scripts.njk

@@ -0,0 +1,7 @@
+{% set js %} 
+  {% include "../assets/scripts/embedded/theme-switcher.js" %}
+  {% if site.isProduction %}
+    {% include "../assets/scripts/embedded/register-serviceworker.js" %}
+  {% endif %}
+{% endset %}
+<script>{{ js | jsmin | safe }}</script>

src/includes/styles.njk

@@ -0,0 +1,28 @@
+{% if site.isProduction %}
+  {% set criticalCSS %}
+    {% include "critical/base.css" %}
+    {% if css %}
+      {% include "critical/" + css %} 
+    {% endif %}
+  {% endset %}
+
+  <style>
+    {{ criticalCSS | safe }}
+  </style>
+
+{% else %}
+
+  <link rel="stylesheet" href="{{ '/assets/styles/base.css' | url }}" />
+  {% if css %}
+    <link rel="stylesheet" href="{{ '/assets/styles/' + css | url }}" />
+  {% endif %}
+
+{% endif %}
+
+<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}" media="print" onload="this.media='all'" />
+<link rel="stylesheet" href="{{ '/assets/styles/print.css' | url }}" media="print" />
+
+
+<noscript>
+<link rel="stylesheet" href="{{ '/assets/styles/main.css' | url }}" />
+</noscript>

src/layouts/base.njk

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>
+    {%- if page.url === "/" -%}
+      {{ site.author }} · {{ site.description }}
+    {%- else -%}
+      {{ title }} · {{ site.author }}
+    {%- endif -%}
+    </title>
+
+    <link rel="canonical" href="{{ site.url }}{{ page.url }}" />
+    
+    <script type="module">
+      document.documentElement.classList.remove('no-js');
+      document.documentElement.classList.add('js');
+    </script>
+
+    {% include "scripts.njk" %}
+    {% include "styles.njk" %}
+    {% include "favicons.njk" %}
+    {% include "meta-tags.njk" %}
+    {% include "preload.njk" %}
+    {% include "robots.njk" %}
+    {% include "feeds.njk" %}
+  </head>
+  <body {% if bodyClass %}class="{{ bodyClass }}"{% endif %}>
+    {% include "icon-sprites.njk" %}
+    {{ content | safe }}
+    <script src="/assets/scripts/main.js" async></script>
+  </body>
+</html>

src/pages/homepage.njk

@@ -0,0 +1,7 @@
+---
+layout: base
+title: Home
+permalink: /
+---
+
+Hello, world!

src/utils/collections.js

@@ -0,0 +1 @@
+module.exports = {};

src/utils/filters.js

@@ -0,0 +1,10 @@
+const moment = require('moment');
+
+module.exports = {
+  dateToFormat: function (date, format = 'MMMM Do, YYYY') {
+    return moment(date).format(format);
+  },
+  dateToISO: function (date) {
+    return moment(date).format();
+  },
+};

src/utils/minify-html.js

@@ -0,0 +1,15 @@
+const htmlmin = require('html-minifier');
+
+module.exports = function (content, outputPath) {
+  if (outputPath.endsWith('.html')) {
+    let minified = htmlmin.minify(content, {
+      useShortDoctype: true,
+      removeComments: true,
+      collapseWhitespace: true,
+    });
+
+    return minified;
+  }
+
+  return content;
+};

src/utils/minify-js.js

@@ -0,0 +1,12 @@
+const UglifyJS = require('uglify-js');
+
+module.exports = function (code) {
+  let minified = UglifyJS.minify(code);
+
+  if (minified.error) {
+    console.log('UglifyJS error: ', minified.error);
+    return code;
+  }
+
+  return minified.code;
+};

src/utils/shortcodes.js

@@ -0,0 +1,10 @@
+const outdent = require('outdent')({ newline: ' ' });
+
+module.exports = {
+  test: function () {
+    const html = outdent`
+    <div>Hello, World</div>`;
+
+    return html;
+  },
+};