initial commit

.github/workflows/main.yml

@@ -0,0 +1,36 @@
+name: build 11ty site
+
+on:
+  push:
+    branches: ["main"]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Install dependencies & build
+        run: |
+          npm install
+          npm run build-gp
+      - uses: actions/upload-pages-artifact@v2
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v2
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+_site

README.md

@@ -0,0 +1,55 @@
+# Multi blog with Eleventy, Liquid, classless CSS framework & DecapCMS
+
+### Folder structure
+
+- templates in /content
+- documentation in /content/doc with aside navigation
+- blog in /content/blog with pagination navigation
+- layouts in /_layouts
+- includes in /_includes
+- JSON files in /_data
+- CSS files in /assets/css
+- images & JS in /assets with /admin (Decap CMS)
+
+### Page layout
+
+- _layouts/base.liquid: head code + DecapCMS scripts
+- _layouts/default.liquid: HTML5 structure with ARIA landmarks
+- _includes/nav-primary.liquid with primary navigation
+- _includes/nav-secondary.liquid with secondary navigation
+- _includes/nav-pagination.liquid with pagination navigation
+- _includes/nav-footer.liquid with footer navigation
+- _includes/copyright.liquid to include in footer
+
+### Navigation links
+
+- tags: add primary, secondary or footer in frontmatter
+- for secondary tags, add folder with folder's name in frontmatter
+
+### Package.json scripts
+- "serve": "npx @11ty/eleventy --serve",
+- "start": "npx decap-server & npx @11ty/eleventy --serve",
+- "build": "@11ty/eleventy",
+- "build-gp": "eleventy --pathprefix '13-simple-blog'"
+
+### Dependencies
+- "@11ty/eleventy": "^2.0.1"
+- ready for [Decap CMS](https://decapcms.org/) integration.
+- ready for GitHub Pages (.github/workflows/)
+
+### eleventy.config.js
+```
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addWatchTarget("./assets");
+  eleventyConfig.addPassthroughCopy("./assets");
+  return {
+    dir: {
+      input: "content", // Set the source for 11ty
+      layouts: "../_layouts", // Base page layouts
+      includes: "../_includes", // All UI partials
+      data: "../_data", // JSON datasets
+      output: "_site" // This is the default
+    }
+  };
+};
+```

eleventy.config.js

@@ -0,0 +1,13 @@
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addWatchTarget("./src/assets");
+    eleventyConfig.addPassthroughCopy({ "./src/assets": "./assets" });
+    return {
+        dir: {
+            input: "src/content", // Set the source for 11ty
+            output: "_site", // This is the default
+            includes: "../_includes", // This is the default
+            layouts: "../_layouts", // Base page layouts
+            data: "../_data" // This is the default
+        }
+    };
+};

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "15-new-structure",
+  "version": "1.0.0",
+  "description": "Multi blog with Eleventy, Liquid & DecapCMS",
+  "main": "eleventy.config.js",
+  "scripts": {
+    "start": "npx @11ty/eleventy --serve",
+    "serve": "npx decap-server & npx @11ty/eleventy --serve",
+    "build": "eleventy",
+    "build-gp": "eleventy --pathprefix '15-new-structure'"
+  },
+  "keywords": [
+    "eleventy",
+    "liquid"
+  ],
+  "author": "Michel Maillard",
+  "license": "ISC",
+  "dependencies": {
+    "@11ty/eleventy": "^2.0.1"
+  }
+}

src/_data/site.json

@@ -0,0 +1,9 @@
+{
+  "github": "https://github.com/mobile-michel/14-multi-blog",
+  "authorUrl": "https://michelmaillard.ch/",
+  "name": "Welcome",
+  "authorName": "Michel Maillard",
+  "description": "Eleventy 2.0.1 simple template with Liquid templating & Decap CMS.",
+  "favicon": "/assets/img/favicon.png",
+  "css": "/assets/css/style.css"
+}

src/_data/tokens.json

@@ -0,0 +1,10 @@
+{
+  "size": "14px",
+  "hue": "60",
+  "saturation": "30%",
+  "lightness": "65%",
+  "color-scheme": "180",
+  "max-width": "50rem",
+  "spacing": "1rem",
+  "text-font-size": "clamp(1rem, 0.924vw + 0.511rem, 1.25rem)"
+}

src/_includes/copyright.liquid

@@ -0,0 +1 @@
+<small>&copy; {{ "now" | date: "%Y" }} Built with <a href="https://www.11ty.dev/">Eleventy</a> & <a href="https://liquidjs.com/">LiquidJS</a> by <a href="{{ site.authorUrl }}">Michel Maillard</a> • <a href="{{ '/assets/admin' | url }}" target="_blank">Decap CMS</a> • <a href="{{ site.github }}">GitHub</a></small>

src/_includes/css/base.css

@@ -0,0 +1,33 @@
+
+/************/
+/* base.css */
+/************/
+
+html {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: var(--size);
+}
+
+header {
+    text-align: center ;
+    h1 {
+        font-family: cursive;
+    }
+}
+
+section {
+    overflow-x: auto;
+}
+
+pre {
+    background-color: var(--grey300);
+    font-size: smaller;
+    padding: 20px;
+    border-left: 3px solid var(--primary-color);
+    margin: 20px 0;
+    overflow-x: auto;
+}
+
+footer {
+    text-align: center;
+}

src/_includes/css/colors.css

@@ -0,0 +1,30 @@
+
+/**************/
+/* colors.css */
+/**************/
+
+header {
+    background-color: var(--primary-color);
+    color: var(--grey100);
+}
+
+main,
+footer {
+    background-color: var(--grey200)
+}
+
+footer {
+    border-top: 1px solid var(--secondary-color)
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: var(--grey900);
+        color: var(--grey100);
+    }
+
+    main,
+    footer {
+        background-color: var(--grey700)
+    }
+}

src/_includes/css/flex.css

@@ -0,0 +1,26 @@
+
+/************/
+/* flex.css */
+/************/
+
+body {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+
+main aside {
+    flex-grow: 1;
+}
+
+main section {
+    flex: 3 1 21em;
+}

src/_includes/css/form.css

@@ -0,0 +1,4 @@
+
+/************/
+/* form.css */
+/************/

src/_includes/css/grid.css

@@ -0,0 +1,26 @@
+
+/************/
+/* grid.css */
+/************/
+
+body {
+    margin: 0;
+    display: grid;
+    grid-template-columns: minmax(auto, 50rem);
+    grid-template-rows: auto 1fr auto;
+    justify-content: center;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+
+main aside {
+    flex: 1 1 10em;
+}
+
+main section {
+    flex: 4 1 20em;
+}

src/_includes/css/navigation.css

@@ -0,0 +1,86 @@
+
+/******************/
+/* navigation.css */
+/******************/
+
+[aria-label=Primary] {
+    ul {
+        display: flex;
+        justify-content: center;
+        list-style: none;
+        padding: 0;
+        flex-wrap: wrap;
+    }
+
+    li {
+        border: 1px solid var(--grey100);
+        border-radius: 5px;
+        margin: .2em;
+        padding: .5em 1em;
+
+        ul {
+            display: none;
+        }
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    a[aria-current="page"] {
+        font-weight: bold;
+    }
+
+    li:hover ul {
+        display: block;
+        position: absolute;
+        background-color: var(--primary-color);
+        border: 1px solid var(--grey100);
+        border-radius: 5px;
+        margin: 0;
+        padding: 0;
+        z-index: 1;
+    }
+
+    li ul li {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    li ul li a {
+        display: block;
+        padding: .5em 1em;
+    }
+
+    li:hover {
+        background-color: var(--secondary-color);
+    }
+
+    li ul li a:active {
+        background-color: #e0e0e0;
+    }
+}
+
+[aria-label="Pagination"],
+[aria-label="Footer"] ul {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+
+    a {
+        padding: .2em .5em;
+        border: 1px solid var(--grey800);
+        border-radius: 5px;
+    }
+
+    a:hover {
+        background-color: var(--secondary-color);
+    }
+}
+
+main a {
+    color: var(--secondary-color);
+}
+
+/* Path: assets/css/typography.css */