Create an example 11ty site

.eleventy.js

@@ -0,0 +1,13 @@
+module.exports = config => {
+  config.setUseGitIgnore(false);
+  
+  return {
+    markdownTemplateEngine: 'njk',
+    dataTemplateEngine: 'njk',
+    htmlTemplateEngine: 'njk',
+    dir: {
+      input: 'src',
+      output: 'dist'
+    }
+  };
+};

.eleventyignore

@@ -0,0 +1 @@
+node_modules

.gitignore

@@ -0,0 +1,15 @@
+# Misc
+*.log
+npm-debug.*
+*.scssc
+*.swp
+.DS_Store
+Thumbs.db
+.sass-cache
+.env
+.cache
+
+# Node modules and output
+node_modules
+dist
+src/_includes/css

gulp-tasks/sass.js

@@ -0,0 +1,51 @@
+const {dest, src} = require('gulp');
+const cleanCSS = require('gulp-clean-css');
+const sassProcessor = require('gulp-sass')(require('sass'));
+
+// We want to be using canonical Sass, rather than node-sass
+sassProcessor.compiler = require('sass');
+
+// Flags whether we compress the output etc
+const isProduction = process.env.NODE_ENV === 'production';
+
+// An array of outputs that should be sent over to includes
+const criticalStyles = ['critical.scss'];
+
+// Takes the arguments passed by `dest` and determines where the output file goes
+const calculateOutput = ({history}) => {
+  // By default, we want a CSS file in our dist directory, so the
+  // HTML can grab it with a <link />
+  let response = './dist/css';
+
+  // Get everything after the last slash
+  const sourceFileName = /[^(/|\\)]*$/.exec(history[0])[0];
+
+  // If this is critical CSS though, we want it to go
+  // to the _includes directory, so nunjucks can include it
+  // directly in a <style>
+  if (criticalStyles.includes(sourceFileName)) {
+    response = './src/_includes/css';
+  }
+
+  return response;
+};
+
+// The main Sass method grabs all root Sass files,
+// processes them, then sends them to the output calculator
+const sass = () => {
+    return src('./src/scss/*.scss')
+      .pipe(sassProcessor().on('error', sassProcessor.logError))
+      .pipe(
+        cleanCSS(
+          isProduction
+            ? {
+                level: 2
+              }
+            : {}
+        )
+      )
+      .pipe(dest(calculateOutput, {sourceMaps: !isProduction}));
+  };
+  
+  module.exports = sass;
+  

gulpfile.js

@@ -0,0 +1,19 @@
+const {parallel, watch} = require('gulp');
+
+// Pull in each task
+const sass = require('./gulp-tasks/sass.js');
+
+// Set each directory and contents that we want to watch and
+// assign the relevant task. `ignoreInitial` set to true will
+// prevent the task being run when we run `gulp watch`, but it
+// will run when a file changes.
+const watcher = () => {
+  watch('./src/scss/**/*.scss', {ignoreInitial: true}, sass);
+};
+
+// The default (if someone just runs `gulp`) is to run each task in parrallel
+exports.default = parallel(sass);
+
+// This is our watcher task that instructs gulp to watch directories and
+// act accordingly
+exports.watch = watcher;

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "11ty-workflow-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": ".eleventy.js",
+  "scripts": {
+    "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --serve\"",
+    "production": "SET NODE_ENV=production & npx gulp && SET NODE_ENV=production & npx eleventy"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@11ty/eleventy": "^2.0.1",
+    "concurrently": "^8.0.1",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.62.1"
+  }
+}

src/_data/buildInfo.js

@@ -0,0 +1,16 @@
+module.exports = () => {
+  const now = new Date();
+  const timeZone = 'Europe/Zurich';
+  const buildTime = new Intl.DateTimeFormat('fr-CH', {
+    dateStyle: 'full',
+    timeStyle: 'short',
+    timeZone,
+  }).format(now);
+
+  return {
+    time: {
+      raw: now.toISOString(),
+      formatted: `${buildTime}`,
+    },
+  };
+};

src/_data/global.js

@@ -0,0 +1,8 @@
+module.exports = {
+    random() {
+        const segment = () => {
+            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        };
+        return `${segment()}-${segment()}-${segment()}`;
+    }
+};

src/_data/site.json

@@ -0,0 +1,6 @@
+{
+    "name": "Eleventy Workflow Example",
+    "url": "dev.thethomaas.net",
+    "src": "https://git.thethomaas.net/TheThomaas/11ty-workflow-example"
+}
+  

src/_includes/layouts/base.html

@@ -0,0 +1,15 @@
+{% set assetHash = global.random() %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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.html" %}
+    <style>{% include "css/critical.css" %}</style>
+  </head>
+  <body>
+    <main tabindex="-1" id="main-content">{% block content %}{% endblock %}</main>
+    {% include "partials/footer.html" %}
+  </body>
+</html>

src/_includes/layouts/home.html

@@ -0,0 +1,7 @@
+{% extends "layouts/base.html" %} 
+{% block content %}
+  <article>
+    <h1>{{ title }}</h1>
+    {{ content | safe }}
+  </article>
+{% endblock %}

src/_includes/partials/footer.html

@@ -0,0 +1,3 @@
+<footer>
+    Généré avec <a href="https://www.11ty.dev/" rel="noreferrer noopener" target="_blank">Eleventy</a> - Source sur <a href="{{site.src}}" rel="noreferrer noopener" target="_blank">Gitea</a> - Dernier build : <time datetime="{{ buildInfo.time.raw }}">{{ buildInfo.time.formatted }}</time>
+</footer>

src/_includes/partials/meta-info.html

@@ -0,0 +1,42 @@
+{% set pageTitle = title + ' - ' + site.name %}
+
+{# We don't want any duplication. This is likely for the home page. #}
+{% if site.name === title %} 
+  {% set pageTitle = title %}
+{% endif %}
+
+{% set siteTitle = site.name %}
+{% set currentUrl = site.url + page.url %}
+
+{# If the page’s Front Matter has specific metaTitle and/or metaDesc items, switch 
+  them into the mix. #}
+{% if metaTitle %}
+  {% set pageTitle = metaTitle %}
+{% endif %}
+
+{% if not metaDesc %}
+  {% set metaDesc = summary %}
+{% endif %}
+
+
+<title>{{ pageTitle }}</title>
+<link rel="canonical" href="{{ currentUrl }}" />
+
+<meta property="og:site_name" content="{{ siteTitle }}" />
+<meta property="og:title" content="{{ pageTitle }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ currentUrl }}" />
+
+{% if socialImage %}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta property="og:image" content="{{ socialImage }}" />
+  <meta name="twitter:image" content="{{ socialImage }}" />
+  <meta property="og:image:alt" content="Page image for {{ site.name }}" />
+  <meta name="twitter:image:alt" content="Page image for {{ site.name }}" />
+{% endif %}
+
+{% if metaDesc %}
+  <meta name="description" content="{{ metaDesc }}" />
+  <meta name="twitter:description" content="{{ metaDesc }}" />
+  <meta property="og:description" content="{{ metaDesc }}" />
+{% endif %}

src/index.md

@@ -0,0 +1,6 @@
+---
+title: 'Hello world'
+layout: 'layouts/home.html'
+---
+
+This is pretty _rad_, right?

src/scss/_reset.scss

@@ -0,0 +1,77 @@
+// A modified version of my "modern reset" https://github.com/hankchizljaw/modern-css-reset
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core root defaults */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don’t have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01s !important;
+    scroll-behavior: auto !important;
+  }
+}

src/scss/critical.scss

@@ -0,0 +1,42 @@
+@import 'reset';
+
+
+html, body {
+  background-color: rgb(54, 54, 54);
+  color: whitesmoke;
+  height: 100vh;
+  font-family: sans-serif;
+}
+
+main {
+  height: 100%;
+  display: grid;
+  place-content: center;
+  text-align: center;
+
+  h1 {
+    font-size: clamp(2.8rem, 8vw, 6.5rem);
+  }
+
+  p {
+    font-size: clamp(1.2rem, 4vw, 1.8rem);
+  }
+}
+
+footer {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  text-align: center;
+  padding: 1rem 0;
+  background-color: rgb(34, 34, 34);
+
+  a {
+    color: white;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}