Refactor directory layout

.eleventy.js

@@ -1,5 +1,7 @@
-const { DateTime } = require("luxon");
 const fs = require("fs");
+const path = require("path");
+
+const { DateTime } = require("luxon");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
@@ -8,6 +10,7 @@ const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 const markdownItAttrs = require("markdown-it-attrs");
 
+
 function hyphenize(input) {
   return input.replace(/[^\w- ]/, "").replace(/[_ ]/, "-").toLowerCase();
 }
@@ -72,11 +75,11 @@ ${content}
   });
 
   eleventyConfig.addPairedAsyncShortcode("banner", async (content, title, backgroundSource, backgroundAlt) => {
-    const backgroundMetadata = await Image(backgroundSource, {
+    const backgroundMetadata = await Image(`src/images/${backgroundSource}`, {
       widths: [1200, 1980, 4000],
       formats: ["avif", "webp", "jpeg"],
       urlPath: "/assets/img",
-      outputDir: "./_site/assets/img",
+      outputDir: "./dist/assets/img",
       sharpAvifOptions: { quality: 40 },
       sharpWebpOptions: { quality: 50 },
       sharpJpegOptions: { quality: 65 },
@@ -122,12 +125,12 @@ ${
   // Build settings
   //
 
-  eleventyConfig.addPassthroughCopy("assets");
+  eleventyConfig.addPassthroughCopy({ "src/assets": "assets" });
 
   eleventyConfig.setBrowserSyncConfig({
     callbacks: {
       ready: function(err, browserSync) {
-        const content_404 = fs.readFileSync('_site/404.html');
+        const content_404 = fs.readFileSync('dist/404.html');
 
         browserSync.addMiddleware("*", (req, res) => {
           // Provides the 404 content without redirect.
@@ -145,7 +148,17 @@ ${
   // Other settings
   //
 
+
   return {
+    dir: {
+      input: 'src/content',
+      // These are all relative to the input directory so the paths get a little
+      // weird:
+      includes: '../includes',
+      data: '../data',
+      output: 'dist',
+    },
+
     templateFormats: [
       "md",
       "njk",

.eleventyignore

@@ -1,2 +1 @@
-README.md
 assets/fonts/OFL.txt

.gitignore

@@ -1,8 +1,7 @@
 node_modules/
 
 # Eleventy build output
-/assets/css/
-/_site/
+dist/
 
 # Editor settings
 .vscode/
@@ -11,4 +10,5 @@ node_modules/
 # Environment
 .env
 # `nix build` output
+/.dev
 /result

.nvmrc

@@ -1 +0,0 @@
-12

README.md

@@ -16,10 +16,11 @@ npm run build:styles
 npm run dev:site
 ```
 
-Go to <https://localhost:8080/>, which will update live when content changes.
+Go to <https://localhost:8080/>, which will update live when content changes
+(the initial build may take some time to render out the different image sizes).
 If you make style changes, make sure to recompile the CSS files with the second
-command. Alternatively, run `npm run dev:styles` in a second terminal to watch
-for changes.
+of the above commands. Alternatively, run `npm run dev:styles` in an additional
+terminal to watch for changes.
 
 ### Nix environment
 

flake.nix

@@ -10,7 +10,7 @@
 
     nodejs = pkgs.nodejs-16_x;
 
-    nodePackages = import ./_nix/default.nix { inherit pkgs system nodejs; };
+    nodePackages = import ./nix/default.nix { inherit pkgs system nodejs; };
     nodeDependencies = nodePackages.nodeDependencies.override {
       nativeBuildInputs = with pkgs; [ pkg-config ];
       buildInputs = with pkgs; [ vips ];

package.json

@@ -4,7 +4,7 @@
   "description": "Angestöpselt Homepage",
   "scripts": {
     "build:site": "eleventy",
-    "build:styles": "sass --style=compressed styles/:_site/assets/css/",
+    "build:styles": "sass --style=compressed src/styles/:dist/assets/css/",
     "build": "npm run build:site && npm run build:styles",
     "dev:site": "eleventy --serve",
     "dev:styles": "npm run build:styles -- --watch"

src/content/index.md

@@ -3,7 +3,7 @@ layout: layouts/home.njk
 ---
 {% banner
   "Angestöpselt",
-  "images/home-banner.jpg",
+  "home-banner.jpg",
   "Kinder und Jugendliche verfolgen die Präsentation eines 3D-Druckers"
 %}
 Wir bieten Bedürftigen Zugang in die digitale Welt

src/content/kontakt/index.md

@@ -7,7 +7,7 @@ eleventyNavigation:
 ---
 {% banner
   "",
-  "images/contact-banner.jpg",
+  "contact-banner.jpg",
   "Aufnahme des Vereinsheims bei Nacht. Die Innenbeleuchtung ist an und der Angestöpselt-Schriftzug ist zu sehen."
 %}
 {% endbanner %}

src/content/mitmachen.md

@@ -4,7 +4,7 @@ useForms: true
 ---
 {% banner
   "",
-  "images/work-banner.jpg",
+  "work-banner.jpg",
   "Nahaufnahme eines Laptops mit geöffnetem Gehäuse. Sichtbar ist die ausgebaute Festplatte."
 %}
 {% endbanner %}