Initial commit

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eleventy.js

@@ -0,0 +1,113 @@
+const pluginRss = require("@11ty/eleventy-plugin-rss"); // needed for absoluteUrl feature
+const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+
+// Base setup for builds, needed for og tags and correct image paths
+// (mostly for github pages deployment, see build-deploy.yaml)
+const baseUrl = process.env.BASE_URL || 'http://localhost:8080';
+// e.g. 'https://mandrasch.github.io/'
+const pathPrefix = process.env.PATH_PREFIX || '/';
+// e.g. '/11ty-plain-boostrap5/'
+console.log('baseUrl is set to ...', baseUrl);
+console.log('pathPrefix is set to ...', pathPrefix);
+
+// will be accessible in all templates via
+// see "eleventyConfig.addGlobalData("site", globalData);"" below
+// related: https://github.com/11ty/eleventy/issues/1641
+const globalSiteData = {
+  title: "11ty-plain-bootstrap5",
+  description: "Template for static site generator Eleventy with Boostrap 5 and SCSS/JS compilation via laravel-mix.",
+  locale: 'en',
+  baseUrl: baseUrl,
+  pathPrefix: pathPrefix,
+}
+
+// https://www.11ty.dev/docs/plugins/image/#use-this-in-your-templates
+const Image = require("@11ty/eleventy-img");
+
+async function imageShortcode(src, alt, sizes = "100vw") {
+  if (alt === undefined) {
+    // You bet we throw an error on missing alt (alt="" works okay)
+    throw new Error(`Missing \`alt\` on responsiveimage from: ${src}`);
+  }
+
+  // TODO: pathPrefix must be '/path/', check existence of trailing slash?!
+  let metadata = await Image(src, {
+    widths: [600, 1200],
+    formats: ['webp', 'jpeg'],
+    urlPath: `${pathPrefix}img`,
+    // outputDir: "./img/" is default
+    outputDir: './_site/img/' // passthrough below didn't work, write to output dir by now
+
+  });
+
+  let lowsrc = metadata.jpeg[0];
+  let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
+
+  return `<picture>
+    ${Object.values(metadata).map(imageFormat => {
+    return `  <source type="${imageFormat[0].sourceType}" srcset="${imageFormat.map(entry => entry.srcset).join(", ")}" sizes="${sizes}">`;
+  }).join("\n")}
+      <img
+        src="${lowsrc.url}"
+        width="${highsrc.width}"
+        height="${highsrc.height}"
+        alt="${alt}"
+        loading="lazy"
+        decoding="async">
+    </picture>`;
+}
+
+module.exports = function (eleventyConfig) {
+
+  // Set site title
+  eleventyConfig.addGlobalData("site", globalSiteData);
+
+  // Add plugins
+  eleventyConfig.addPlugin(pluginRss);
+  eleventyConfig.addPlugin(eleventyNavigationPlugin);
+
+  // Copy dist/ files from laravel mix
+  eleventyConfig.addPassthroughCopy("dist/"); // path is relative from root
+
+  // Copy (static) files to output (_site)
+  eleventyConfig.addPassthroughCopy("src/assets");
+
+  // Copy transformed images
+  // TODO: this is executed too soon? imgs not there?
+  eleventyConfig.addPassthroughCopy("img/");
+
+  // Important for watch: Eleventy will not add a watch for files or folders that
+  // are in .gitignore (--> dist/),unless setUseGitIgnore is turned off. See this chapter:
+  // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
+  eleventyConfig.setUseGitIgnore(false);
+
+  // Watch for changes (and reload browser)
+  eleventyConfig.addWatchTarget("./src/assets"); // normal (static) assets
+  eleventyConfig.addWatchTarget("./dist") // laravel-mix output changes
+
+  // RandomId function for IDs used by labelled-by
+  // Thanks https://github.com/mozilla/nunjucks/issues/724#issuecomment-207581540
+  // TODO: replace with addNunjucksGlobal? https://github.com/11ty/eleventy/issues/1498
+  eleventyConfig.addFilter("generateRandomIdString", function (prefix) {
+    return prefix + "-" + Math.floor(Math.random() * 1000000);
+  });
+
+  // eleventy-img config
+  eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);
+
+  // Base Config
+  return {
+    dir: {
+      input: "src",
+      output: "_site",
+      includes: "includes", // this path is releative to input-path (src/)
+      layouts: "layouts", // this path is releative to input-path (src/)
+      data: "data", // this path is releative to input-path (src/)
+    },
+    templateFormats: ["njk", "md"],
+    htmlTemplateEngine: "njk",
+    markdownTemplateEngine: "njk",
+    // important for github pages build (subdirectory):
+    pathPrefix: pathPrefix
+  };
+};

.eleventyignore

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

.github/workflows/build-deploy.yaml

@@ -0,0 +1,59 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+    # Sustainability: Don't trigger build for updated README
+    paths-ignore:
+      - "**/README.md"
+    # Allows you to run this workflow manually from the Actions tab.
+    workflow_dispatch:
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2
+      - name: Use Node LTS
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16" # lts
+
+      # This build runs with path prefix for github pages (hosted on subdirectory),
+      # for example https://<USER>.github.io/<REPO-NAME>/
+      # See: https://www.11ty.dev/docs/config/#deploy-to-a-subdirectory-with-a-path-prefix
+      - name: Install and Build for Github Pages 🔧
+        run: |
+          npm install
+          npm run build
+          # npm run build -- --pathprefix="${{ github.event.repository.name }}"
+          # The above doesn't work anymore? :-/
+          # also doesn't work with eleventy-img https://github.com/11ty/eleventy/issues/1641
+          # We set pathprefix again via Node env, see below
+        env:
+          ELEVENTY_ENV: production
+          BASE_URL: "https://${{ github.event.repository.owner.name }}.github.io/"
+          PATH_PREFIX: "/${{ github.event.repository.name }}/"
+      - name: Deploy to Github Pages 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: _site #the static site folder
+
+
+      # If you need more privacy / no tracking,
+      # sync your site to your own webspace
+      # https://github.com/marketplace/actions/ftp-deploy
+
+      # Build again if you need another path prefix
+      # - name: Install and Build for FTP 🔧
+      #   run: |
+      #    npm install
+      #    npm run build
+
+      #- name: 📂 Sync files
+      #  uses: SamKirkland/[email protected]
+      #  with:
+      #    server: ftp.samkirkland.com
+      #    username: myFtpUserName
+      #    password: ${{ secrets.ftp_password }}

.gitignore

@@ -0,0 +1,8 @@
+/node_modules
+# eleventy output directory
+/_site
+# laravel mix output directory
+/dist
+/mix-manifest.json
+# eleventy-img output directory
+/img

.gitpod.yml

@@ -0,0 +1,10 @@
+# Commands to start on workspace startup
+tasks:
+  - init: npm install
+    command: npm run dev
+# Ports to expose on workspace startup
+ports:
+  - port: 8080
+    onOpen: open-preview
+#  - port: 3001
+#    onOpen: ignore

.htmlhintrc

@@ -0,0 +1,12 @@
+{
+  "tagname-lowercase": true,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "doctype-first": false,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "attr-no-duplication": true,
+  "title-require": true
+}

.prettierignore

@@ -0,0 +1,2 @@
+/src/includes/navigation.njk
+/src/includes/meta.njk

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "emmet.includeLanguages": {
+    "njk": "html"
+  },
+  "files.associations": {
+    "*.njk": "html"
+  }
+}

CREDITS

@@ -0,0 +1,9 @@
+This is a fork of https://github.com/maxboeck/eleventastic by Max Böck
+
+Copyright 2020 Max Böck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Matthias Andrasch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,95 @@
+# 11ty-plain-bootstrap5
+
+[![Build and Deploy](https://github.com/mandrasch/11ty-plain-bootstrap5/actions/workflows/build-deploy.yaml/badge.svg)](https://github.com/mandrasch/11ty-plain-bootstrap5/actions/workflows/build-deploy.yaml)
+
+Minimalistic template for the awesome static site generator [Eleventy/11ty](https://www.11ty.dev/), just
+
+- [Bootstrap 5](https://www.npmjs.com/package/bootstrap) (via npm)
+- [Laravel Mix](https://www.npmjs.com/package/laravel-mix)\* for SCSS / JS compilation (incl. Autoprefixer)
+
+_\* Laravel Mix is a wrapper around webpack, it is purely NodeJS, no PHP involved ;-)_
+
+Plugins used (you don't have to keep them):
+
+- [eleventy-navigation](https://www.11ty.dev/docs/plugins/navigation/)
+- [eleventy-img](https://www.11ty.dev/docs/plugins/image/)
+- [eleventy-rss](https://www.11ty.dev/docs/plugins/rss/) (to get absolute URLs for social media open graph tags)
+
+## Live demo
+
+- https://mandrasch.github.io/11ty-plain-bootstrap5/
+
+[![Open in Gitpod](gitpod.svg)](https://gitpod.io/#https://github.com/mandrasch/11ty-plain-bootstrap5)
+
+## Usage
+
+**Install via:**
+
+- `npm install`
+
+**Start local development with**
+
+- `npm run dev`
+
+Preview runs on http://localhost:8080/.
+
+**Where to edit?**
+
+- Work with files in `src/`-folder
+- Homepage: `src/index.njk`, Config: `.eleventy.js`
+- **Don't** edit `_site/` folder (automatically generated)
+
+**Generate a static build with**
+
+- `npm run build`
+
+_Advice: `BASE_URL` should be set as node env variable for open graph image support (they need full instead of relative URLs. You can strip them out as well in `meta.njk`. See `.github/workflows/build-deploy.yaml` for information. Currently it defaults to http://localhost:8080 if no env var is set.)_
+
+## Credits
+
+- Big thanks to [bergwerk/11ty-mix](https://github.com/bergwerk/11ty-mix) by [@marvinhuebner](https://github.com/marvinhuebner) for example of using Laravel Mix!
+- Some icons used of https://icons.getbootstrap.com/ (included via svg inline, MIT license)
+- Inspired by https://github.com/maxboeck/eleventastic (MIT license)
+- https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/
+- Learned a lot from [Eleventy (11ty) Static HTML Theme Conversion (YouTube)](https://www.youtube.com/watch?v=z-o1W9ijUhI&list=PLOSLUtJ_J3rrJ1R1qEf8CCEpV3GgbJGNr)
+- Layout based on official bootstrap [Jumbotron Example](https://getbootstrap.com/docs/5.0/examples/)
+
+## Alternatives
+
+- https://11straps.com/
+- https://github.com/mesinkasir/eleventyblog
+- See all starters: https://www.11ty.dev/docs/starter/
+
+## Technical background:
+
+Bootstrap information for npm/sass:
+
+- https://getbootstrap.com/docs/5.2/getting-started/download/#source-files
+- https://getbootstrap.com/docs/5.2/customize/sass/
+
+Sustainable Web Design:
+
+- Comment out not needed bootstrap components in `src/scss/app.scss`
+
+## TODOs
+
+Roadmap:
+
+- [ ] Add vite support (https://www.11ty.dev/docs/server-vite/), eleventy v2 needed, see e.g. https://github.com/matthiasott/eleventy-plus-vite
+
+Ideas:
+
+- [ ] Add support for Stackblitz (https://stackblitz.com/github/mandrasch/11ty-plain-bootstrap5)
+- [ ] Add more demo content with image/gallery examples
+- [ ] Add local google fonts example
+- [ ] Improve handling of absolute URLs for open graph image information and BASE_URL settings
+- [ ] Add sitemap.xml (See https://github.com/maxboeck/eleventastic)
+- [ ] Add minimalistisc cache busting via timestamp https://rob.cogit8.org/posts/2020-10-28-simple-11ty-cache-busting/ or https://laravel.com/docs/9.x/mix#versioning-and-cache-busting (would require to read mix-manifest.json file in build step?)
+- [ ] Check a11y with WAVE, aXe, etc. or use automated workflow, e.g. pa11y https://rodneylab.com/sveltekit-accessibility-testing
+- [ ] Add PWA features (?)
+
+## License
+
+MIT license
+
+_(License is for compatibility purposes with eleventys license only. You don't have to attribute my personal additions, I did mostly boring config stuff. Please be aware that Eleventy, Bootstrap, Bootstrap Icons, Laravel Mix and eleventy plugins used are licensed as MIT license.)_