wip

.eleventy.js

@@ -1,118 +1,109 @@
-const rssPlugin = require('@11ty/eleventy-plugin-rss');
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
-const fs = require('fs');
-
-const pluginTOC = require('eleventy-plugin-toc')
-
+const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
+const pluginRss = require("@11ty/eleventy-plugin-rss");
+const directoryOutputPlugin = require("@11ty/eleventy-plugin-directory-output");
+const sitemap = require("@quasibit/eleventy-plugin-sitemap");
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const generateSocialImages = require("@manustays/eleventy-plugin-generate-social-images");
+
+const markdownConfig = require('./src/11ty/utils/markdown');
+const browserSyncConfig = require('./src/11ty/utils/browsersync');
+const UserConfig = require("@11ty/eleventy/src/UserConfig");
 
 const filters = require('./src/11ty/filters');
 const filtersMethods = Object.entries(filters);
 
-// Import transforms
-const parseTransform = require('./src/transforms/parse-transform.js');
-
-const markdownConfig = require('./src/utils/markdown.js');
-
-// Import data files
-const site = require('./src/_data/site.json');
+const transforms = require('./src/11ty/transforms');
+const helpers = require('./src/_data/helpers');
+const transformsMethods = Object.entries(transforms);
 
 const passthroughItems = [
-  "src/_redirects",
-  "src/fonts",
-  "src/images",
-  "src/js",
-  "src/uploads",
-  "src/admin/config.yml",
-  "src/admin/previews.js",
-  "node_modules/nunjucks/browser/nunjucks-slim.js"
-]
+  'src/_redirects',
+  {
+    "src/favicon.ico": "/favicon.ico",
+    "src/static/img": "/static/img",
+    "src/static/CV.pdf": "/static/CV.pdf",
+    "src/_includes/assets/js": "/assets/js"
+  }
+];
+
+/** @param {UserConfig} eleventyConfig */
+module.exports = function (eleventyConfig) {
+
+  eleventyConfig.addCollection('post', (collectionApi) => collectionApi.getFilteredByGlob("src/posts/*.md"));
+  eleventyConfig.addCollection('pages', (collectionApi) => collectionApi.getFilteredByGlob("src/pages/*.md"));
+  eleventyConfig.addCollection('project', (collectionApi) => collectionApi.getFilteredByGlob("src/projects/*.md"));
+  eleventyConfig.addCollection('rss', (collectionApi) => collectionApi.getFilteredByGlob(["src/posts/*.md", "src/projects/*.md"]));
 
-module.exports = function (config) {
-  // Filters
   filtersMethods.forEach(([name, filter]) => {
-    config.addFilter(name, filter)
+    eleventyConfig.addFilter(name, filter)
   });
 
-  // Transforms
-  config.addTransform('parse', parseTransform);
-
-  passthroughItems.forEach(item => {
-    config.addPassthroughCopy(item);
-  })
-
-  config.addWatchTarget("src/_includes/partials/global/service-worker.js");
-
-  const isStarredPost = post => post.data.star;
-
-  config.addCollection('posts', collection => {
-    return [
-      ...collection.getFilteredByGlob('./src/posts/*.md')
-    ].reverse();
+  transformsMethods.forEach(([name, filter]) => {
+    eleventyConfig.addTransform(name, filter)
   });
 
-  config.addCollection('postFeed', collection => {
-    return [...collection.getFilteredByGlob('./src/posts/*.md')]
-      .reverse()
-      .slice(0, site.maxPostsPerPage);
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
+  eleventyConfig.addPlugin(emojiReadTime, {
+    emoji: "🍿",
+    label: "min.",
+    wpm: 250,
+    bucketSize: 3,
   });
-
-  config.addCollection('starFeed', collection => {
-    return [...collection.getFilteredByGlob('./src/posts/*.md').filter(isStarredPost)]
-      .reverse()
-      .slice(0, site.maxPostsPerPage);
+  eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(sitemap, {
+    sitemap: {
+      hostname: helpers.url(),
+    },
   });
-
-  config.addCollection('work', collection => {
-    return collection.getFilteredByGlob('./src/work/*.md')
-      .sort((a, b) => b.data.start - a.data.start);
+  eleventyConfig.addPlugin(syntaxHighlight);
+  eleventyConfig.addPlugin(generateSocialImages, {
+    promoImage: "./src/static/img/profile.png",
+    outputDir: "./dist/img/preview",
+    urlPath: "/img/preview",
+    siteName: "sylvain.dev/",
+    titleColor: "#fedb8b",
+    bgGradient: ['#ABB8C0', '#A0ACB3']
   });
 
-  // Plugins
-  config.addPlugin(rssPlugin);
-  config.addPlugin(syntaxHighlight);
-  config.addPlugin(pluginTOC, {
-    tags: ['h2', 'h3', 'h4'],
-    wrapper: 'nav',
-    wrapperClass: 'toc'
-  });
+  passthroughItems.forEach(item => {
+    eleventyConfig.addPassthroughCopy(item);
+  })
 
-  // 404
-  config.setBrowserSyncConfig({
-    ui: false,
-    // Replicate click on all opened tabs
-    ghostMode: false,
-    callbacks: {
-      ready: function (err, browserSync) {
-        const content_404 = fs.readFileSync('dist/404.html');
+  eleventyConfig.addWatchTarget("./src/scss/*.scss");
 
-        browserSync.addMiddleware('*', (req, res) => {
-          // Provides the 404 content without redirect.
-          res.write(content_404);
-          res.end();
-        });
-      }
-    }
+  eleventyConfig.setBrowserSyncConfig(browserSyncConfig);
+  eleventyConfig.setLibrary("md", markdownConfig);
+  eleventyConfig.setDataDeepMerge(true);
+  eleventyConfig.setFrontMatterParsingOptions({
+    excerpt: true,
+    excerpt_separator: "---"
   });
 
-  config.setLibrary("md", markdownConfig)
+  eleventyConfig.setQuietMode(true);
+  eleventyConfig.addPlugin(directoryOutputPlugin, {
+    // Customize columns
+    columns: {
+      filesize: true, // Use `false` to disable
+      benchmark: true, // Use `false` to disable
+    },
 
-  config.setFrontMatterParsingOptions({
-    excerpt: true,
-    excerpt_separator: "---"
+    // Will show in yellow if greater than this number of bytes
+    warningFileSize: 400 * 1000,
   });
 
   return {
-    templateFormats: [
-      "md",
-      "njk",
-    ],
+    templateFormats: ["md", "njk", "html", "11ty.js"],
+    pathPrefix: "/",
+    passthroughFileCopy: true,
     markdownTemplateEngine: "njk",
     htmlTemplateEngine: "njk",
     dataTemplateEngine: "njk",
     dir: {
-      input: 'src',
-      output: 'dist'
-    },
-    passthroughFileCopy: true
+      input: "src",
+      includes: "_includes",
+      data: "_data",
+      output: "dist"
+    }
   };
 };

.eleventyignore

@@ -0,0 +1,2 @@
+README.md
+.github/

.github/workflows/eleventy_build.yml

@@ -18,10 +18,13 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 13
+          node-version: 16
 
       - name: Install packages
         run: npm ci
 
       - name: Build site
-        run: npm run production
+        run: npm run build
+
+      - name: Validate output HTML
+        run: npm run test:html

.gitignore

@@ -5,13 +5,5 @@ npm-debug.*
 *.swp
 .DS_Store
 .sass-cache
-node_modules
-dist 
-
-# Specifics
-
-# Hide design tokens
-src/scss/_tokens.scss
-
-# Hide compiled CSS
-src/_includes/assets/*
+node_modules/
+dist/

.htmlvalidate.json

@@ -1,5 +1,15 @@
 {
   "extends": [
     "html-validate:recommended"
-  ]
+  ],
+  "rules": {
+    "close-order": "error",
+    "no-trailing-whitespace": "warn",
+    "attribute-boolean-style": [
+      "error",
+      {
+        "style": "empty"
+      }
+    ]
+  }
 }

.nvmrc

@@ -1 +1 @@
-v13
+16

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.13.2

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "html.suggest.html5": true,
+  "emmet.includeLanguages": {
+    "njk": "html"
+  },
+  "files.associations": {
+    "*.njk": "njk"
+  }
+}