.eleventy.js

@@ -0,0 +1,39 @@
+const inspect = require("util").inspect;
+
+module.exports = config => {
+  config.setUseGitIgnore(false);
+
+  config.addPassthroughCopy({"./src/_includes/js/" : "/js"});
+
+  config.addLayoutAlias('base', 'layouts/base.html');
+
+  config.addCollection("sections", (collectionApi) => {
+    const sections = collectionApi.getFilteredByGlob("./src/pages/sections/**")
+      .sort((a, b) => a.data.order - b.data.order);
+    process.env.DEBUG && console.log(inspect(sections));
+    return sections;
+  });
+  config.addCollection("projects", (collectionApi) => {
+    const projects = collectionApi.getFilteredByGlob("./src/projects/**")
+      .sort((a, b) => a.data.order - b.data.order);
+    process.env.DEBUG && console.log(inspect(projects));
+    return projects;
+  });
+
+  config.addCollection('experiences', collection => {
+    return [...collection.getFilteredByGlob('./src/experiences/*.md')]
+      .sort((a, b) => a.data.startDate - b.data.startDate).reverse();
+  });
+
+  config.addPassthroughCopy('src/favicon.ico')
+
+  return {
+    markdownTemplateEngine: 'liquid',
+    dataTemplateEngine: 'liquid',
+    htmlTemplateEngine: 'liquid',
+    dir: {
+      input: 'src',
+      output: 'dist'
+    }
+  };
+};

eleventy.config.js

@@ -1,112 +0,0 @@
-import { inspect } from "util";
-import browserslist from "browserslist";
-import * as sass from "sass";
-import path from "node:path";
-import { bundle, browserslistToTargets, composeVisitors, transform } from "lightningcss" ;
-
-export default async function (eleventyConfig) {
-  eleventyConfig.setUseGitIgnore(false);
-
-  eleventyConfig.addPassthroughCopy({"./src/_includes/js/" : "/js"});
-
-  eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
-
-  eleventyConfig.addCollection("sections", (collectionApi) => {
-    const sections = collectionApi.getFilteredByGlob("./src/pages/sections/**")
-      .sort((a, b) => a.data.order - b.data.order);
-    process.env.DEBUG && console.log(inspect(sections));
-    return sections;
-  });
-  eleventyConfig.addCollection("projects", (collectionApi) => {
-    const projects = collectionApi.getFilteredByGlob("./src/projects/**")
-      .sort((a, b) => a.data.order - b.data.order);
-    process.env.DEBUG && console.log(inspect(projects));
-    return projects;
-  });
-
-  eleventyConfig.addCollection('experiences', collection => {
-    return [...collection.getFilteredByGlob('./src/experiences/*.md')]
-      .sort((a, b) => a.data.startDate - b.data.startDate).reverse();
-  });
-
-  eleventyConfig.addPassthroughCopy('src/favicon.ico')
-
-  // Recognize CSS as a "template language"
-  eleventyConfig.addTemplateFormats("css");
-
-  // Process CSS with LightningCSS
-  eleventyConfig.addExtension("css", {
-    outputFileExtension: "css",
-    compile: async function (_inputContent, inputPath) {
-      let parsed = path.parse(inputPath);
-      if (parsed.name.startsWith("_")) {
-        return;
-      }
-
-      let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
-
-      return async () => {
-        // Switch to the `transform` function if you don't
-        // plan to use `@import` to merge files
-        let { code } = await bundle({
-          filename: inputPath,
-          minify: true,
-          sourceMap: false,
-          targets,
-          // Supports CSS nesting
-          drafts: {
-            nesting,
-          },
-        });
-        return code;
-      };
-    },
-  });
-
-  // Recognize Sass as a "template languages"
-  eleventyConfig.addTemplateFormats("scss");
-
-  // Compile Sass
-  eleventyConfig.addExtension("scss", {
-    outputFileExtension: "css",
-    compile: async function (inputContent, inputPath) {
-      // Skip files like _fileName.scss
-      let parsed = path.parse(inputPath);
-      if (parsed.name.startsWith("_")) {
-        return;
-      }
-
-      // Run file content through Sass
-      let result = sass.compileString(inputContent, {
-        loadPaths: [parsed.dir || "."],
-        sourceMap: false, // or true, your choice!
-      });
-
-      // Allow included files from @use or @import to
-      // trigger rebuilds when using --incremental
-      this.addDependencies(inputPath, result.loadedUrls);
-
-      let targets = browserslistToTargets(browserslist("> 0.2% and not dead"));
-
-      return async () => {
-        let { code } = await transform({
-          code: Buffer.from(result.css),
-          minify: true,
-          sourceMap: false,
-          targets,
-        });
-        return code;
-      };
-    },
-  });
-
-  return {
-    markdownTemplateEngine: 'liquid',
-    dataTemplateEngine: 'liquid',
-    htmlTemplateEngine: 'liquid',
-    dir: {
-      input: 'src',
-      output: 'dist'
-    }
-  };
-};

gulp-tasks/sass.js

@@ -0,0 +1,50 @@
+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', 'home.scss', 'page.scss', 'work-item.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

@@ -2,19 +2,21 @@
   "name": "11ty-resume",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": ".eleventy.js",
-  "type": "module",
   "scripts": {
-    "start": "npx eleventy --serve",
+    "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --serve\"",
-    "production": "NODE_ENV=production npx @11ty/eleventy"
+    "production": "NODE_ENV=production npx gulp && NODE_ENV=production npx @11ty/eleventy"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy": "^2.0.1",
-    "browserslist": "^4.24.4",
+    "concurrently": "^7.6.0",
-    "lightningcss": "^1.29.3",
+    "gulp": "^4.0.2",
-    "sass": "^1.87.0"
+    "gulp-clean-css": "^4.3.0",
+    "gulp-imagemin": "7.1.0",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.57.1"
   }
 }

src/_data/site.js

@@ -1,9 +1,9 @@
-export default {
+module.exports = {
-  buildTime: new Date(),
+    buildTime: new Date(),
-  isProduction: process.env.NODE_ENV === 'production',
+    isProduction: process.env.NODE_ENV === 'production',
-  url: "http://localhost:8080",
+    url: "http://localhost:8080",
-  description: "A blog built with Eleventy",
+    description: "A blog built with Eleventy",
-  lang: "fr",
+    lang: "fr",
-  repository: "https://github.com/TheThomaas",
+    repository: "https://github.com/TheThomaas",
-  repoSrc: "Github"
+    repoSrc: "Github"
-}
+  }

src/css/scss.json

@@ -1,3 +0,0 @@
-{
-    "eleventyExcludeFromCollections": true
-}

src/experiences/experiences.11tydata.js

@@ -0,0 +1,3 @@
+module.exports = {
+    permalink: false
+};

src/experiences/experiences.json

@@ -1,3 +0,0 @@
-{
-    "permalink": false
-}

src/pages/sections/sections.11tydata.js

@@ -0,0 +1,3 @@
+module.exports = {
+    permalink: false
+};

src/pages/sections/sections.json

@@ -1,3 +0,0 @@
-{
-    "permalink": false
-}

src/projects/projects.11tydata.js

@@ -0,0 +1,4 @@
+module.exports = {
+    permalink: false,
+    order: 1
+};

src/projects/projects.json

@@ -1,4 +0,0 @@
-{
-    "permalink": false,
-    "order": 1
-}

src/scss/components/_colors.scss

@@ -0,0 +1,70 @@
+/* BRAND */
+$sand-50: 249 248 243;
+$sand-100: 242 239 226;
+$sand-200: 227 221 197;
+$sand-300: 210 199 159;
+$sand-400: 194 176 128; // Main
+$sand-500: 177 151 94;
+$sand-600: 164 133 82;
+$sand-700: 136 107 70;
+$sand-800: 111 88 61;
+$sand-900: 90 72 52;
+$sand-950: 48 37 26;
+
+$forest-50: 244 247 238;
+$forest-100: 231 238 217;
+$forest-200: 208 223 183;
+$forest-300: 187 208 154; // Main
+$forest-400: 149 180 103;
+$forest-500: 119 152 74;
+$forest-600: 93 120 56;
+$forest-700: 72 93 46;
+$forest-800: 59 75 41;
+$forest-900: 52 65 38;
+$forest-950: 26 34 17;
+/* BRAND */
+/* NEUTRAL */
+$light-0: 255, 255, 255, 0;
+$light-2: 255, 255, 255, 0.02;
+$light-4: 255, 255, 255, 0.04;
+$light-6: 255, 255, 255, 0.06;
+$light-8: 255, 255, 255, 0.08;
+$light-10: 255, 255, 255, 0.1;
+$light-20: 255, 255, 255, 0.2;
+$light-30: 255, 255, 255, 0.3;
+$light-40: 255, 255, 255, 0.4;
+$light-50: 255, 255, 255, 0.5;
+$light-60: 255, 255, 255, 0.6;
+$light-70: 255, 255, 255, 0.7;
+$light-80: 255, 255, 255, 0.8;
+$light-90: 255, 255, 255, 0.9;
+$light-100: 255, 255, 255;
+
+$dark-0: 9, 9, 11, 0;
+$dark-2: 9, 9, 11, 0.02;
+$dark-4: 9, 9, 11, 0.04;
+$dark-6: 9, 9, 11, 0.06;
+$dark-8: 9, 9, 11, 0.08;
+$dark-10: 9, 9, 11, 0.1;
+$dark-20: 9, 9, 11, 0.2;
+$dark-30: 9, 9, 11, 0.3;
+$dark-40: 9, 9, 11, 0.4;
+$dark-50: 9, 9, 11, 0.5;
+$dark-60: 9, 9, 11, 0.6;
+$dark-70: 9, 9, 11, 0.7;
+$dark-80: 9, 9, 11, 0.8;
+$dark-90: 9, 9, 11, 0.9;
+$dark-100: 9, 9, 11;
+
+$shark-50: 246 246 246;
+$shark-100: 231 231 231;
+$shark-200: 209 209 209;
+$shark-300: 176 176 176;
+$shark-400: 136 136 136;
+$shark-500: 109 109 109;
+$shark-600: 93 93 93;
+$shark-700: 79 79 79;
+$shark-800: 69 69 69;
+$shark-900: 61 61 61;
+$shark-950: 30 30 30; // Main
+/* NEUTRAL */

src/scss/components/_tokens.scss

@@ -1,73 +1,4 @@
-/* BRAND */
+@import './components/colors';
-$sand-50: 249 248 243;
-$sand-100: 242 239 226;
-$sand-200: 227 221 197;
-$sand-300: 210 199 159;
-$sand-400: 194 176 128; // Main
-$sand-500: 177 151 94;
-$sand-600: 164 133 82;
-$sand-700: 136 107 70;
-$sand-800: 111 88 61;
-$sand-900: 90 72 52;
-$sand-950: 48 37 26;
-
-$forest-50: 244 247 238;
-$forest-100: 231 238 217;
-$forest-200: 208 223 183;
-$forest-300: 187 208 154; // Main
-$forest-400: 149 180 103;
-$forest-500: 119 152 74;
-$forest-600: 93 120 56;
-$forest-700: 72 93 46;
-$forest-800: 59 75 41;
-$forest-900: 52 65 38;
-$forest-950: 26 34 17;
-/* BRAND */
-/* NEUTRAL */
-$light-0: 255, 255, 255, 0;
-$light-2: 255, 255, 255, 0.02;
-$light-4: 255, 255, 255, 0.04;
-$light-6: 255, 255, 255, 0.06;
-$light-8: 255, 255, 255, 0.08;
-$light-10: 255, 255, 255, 0.1;
-$light-20: 255, 255, 255, 0.2;
-$light-30: 255, 255, 255, 0.3;
-$light-40: 255, 255, 255, 0.4;
-$light-50: 255, 255, 255, 0.5;
-$light-60: 255, 255, 255, 0.6;
-$light-70: 255, 255, 255, 0.7;
-$light-80: 255, 255, 255, 0.8;
-$light-90: 255, 255, 255, 0.9;
-$light-100: 255, 255, 255;
-
-$dark-0: 9, 9, 11, 0;
-$dark-2: 9, 9, 11, 0.02;
-$dark-4: 9, 9, 11, 0.04;
-$dark-6: 9, 9, 11, 0.06;
-$dark-8: 9, 9, 11, 0.08;
-$dark-10: 9, 9, 11, 0.1;
-$dark-20: 9, 9, 11, 0.2;
-$dark-30: 9, 9, 11, 0.3;
-$dark-40: 9, 9, 11, 0.4;
-$dark-50: 9, 9, 11, 0.5;
-$dark-60: 9, 9, 11, 0.6;
-$dark-70: 9, 9, 11, 0.7;
-$dark-80: 9, 9, 11, 0.8;
-$dark-90: 9, 9, 11, 0.9;
-$dark-100: 9, 9, 11;
-
-$shark-50: 246 246 246;
-$shark-100: 231 231 231;
-$shark-200: 209 209 209;
-$shark-300: 176 176 176;
-$shark-400: 136 136 136;
-$shark-500: 109 109 109;
-$shark-600: 93 93 93;
-$shark-700: 79 79 79;
-$shark-800: 69 69 69;
-$shark-900: 61 61 61;
-$shark-950: 30 30 30; // Main
-/* NEUTRAL */
 
 :root {
   --neutral-lowest: #{$light-50};