From 108b3db2330bda55f05012b0b2b06048c7e5e80e Mon Sep 17 00:00:00 2001 From: Michel Maillard Date: Sun, 9 Jun 2024 18:42:52 +0200 Subject: [PATCH] initial commit --- .github/workflows/main.yml | 36 +++++++ .gitignore | 2 + README.md | 55 ++++++++++ eleventy.config.js | 13 +++ package.json | 21 ++++ src/_data/site.json | 9 ++ src/_data/tokens.json | 10 ++ src/_includes/arrow.svg | 10 ++ src/_includes/copyright.liquid | 1 + src/_includes/css/base.css | 33 ++++++ src/_includes/css/colors.css | 30 ++++++ src/_includes/css/flex.css | 26 +++++ src/_includes/css/form.css | 4 + src/_includes/css/grid.css | 26 +++++ src/_includes/css/navigation.css | 86 +++++++++++++++ src/_includes/css/reset.css | 100 ++++++++++++++++++ src/_includes/css/space.css | 23 ++++ src/_includes/decapcms.liquid | 11 ++ src/_includes/default.liquid | 26 +++++ src/_includes/navigation/dropdown.liquid | 19 ++++ src/_includes/navigation/footer.liquid | 9 ++ src/_includes/navigation/primary.liquid | 9 ++ src/_includes/navigation/secondary.liquid | 12 +++ src/_includes/pagination/dropdown.liquid | 12 +++ .../pagination/paginate-collections.liquid | 3 + src/_layouts/base.liquid | 18 ++++ src/_layouts/decapcms.liquid | 51 +++++++++ src/_layouts/default.liquid | 25 +++++ src/_layouts/paginate.liquid | 18 ++++ src/assets/admin/config.yml | 75 +++++++++++++ src/assets/admin/index.html | 17 +++ src/assets/img/arrow.svg | 12 +++ src/assets/img/favicon.png | Bin 0 -> 1731 bytes src/assets/js/nav.js | 19 ++++ src/assets/js/netlifyIdentity.js | 9 ++ src/content/404.liquid | 6 ++ src/content/blog/blog.json | 4 + src/content/blog/index.md | 10 ++ src/content/blog/pagination.md | 12 +++ src/content/blog/post1.md | 37 +++++++ src/content/blog/post2.md | 12 +++ src/content/blog/post3.md | 17 +++ src/content/contact.liquid | 65 ++++++++++++ src/content/css.liquid | 42 ++++++++ src/content/doc/doc.json | 5 + src/content/doc/doc1.md | 21 ++++ src/content/doc/doc2.md | 18 ++++ src/content/doc/doc3.md | 14 +++ src/content/doc/doc4.md | 17 +++ src/content/doc/doc5.md | 11 ++ src/content/doc/index.md | 10 ++ src/content/index.md | 60 +++++++++++ 52 files changed, 1191 insertions(+) create mode 100644 .github/workflows/main.yml create mode 100644 .gitignore create mode 100644 README.md create mode 100644 eleventy.config.js create mode 100644 package.json create mode 100644 src/_data/site.json create mode 100644 src/_data/tokens.json create mode 100644 src/_includes/arrow.svg create mode 100644 src/_includes/copyright.liquid create mode 100644 src/_includes/css/base.css create mode 100644 src/_includes/css/colors.css create mode 100644 src/_includes/css/flex.css create mode 100644 src/_includes/css/form.css create mode 100644 src/_includes/css/grid.css create mode 100644 src/_includes/css/navigation.css create mode 100644 src/_includes/css/reset.css create mode 100644 src/_includes/css/space.css create mode 100644 src/_includes/decapcms.liquid create mode 100644 src/_includes/default.liquid create mode 100644 src/_includes/navigation/dropdown.liquid create mode 100644 src/_includes/navigation/footer.liquid create mode 100644 src/_includes/navigation/primary.liquid create mode 100644 src/_includes/navigation/secondary.liquid create mode 100644 src/_includes/pagination/dropdown.liquid create mode 100644 src/_includes/pagination/paginate-collections.liquid create mode 100644 src/_layouts/base.liquid create mode 100644 src/_layouts/decapcms.liquid create mode 100644 src/_layouts/default.liquid create mode 100644 src/_layouts/paginate.liquid create mode 100644 src/assets/admin/config.yml create mode 100644 src/assets/admin/index.html create mode 100644 src/assets/img/arrow.svg create mode 100644 src/assets/img/favicon.png create mode 100644 src/assets/js/nav.js create mode 100644 src/assets/js/netlifyIdentity.js create mode 100644 src/content/404.liquid create mode 100644 src/content/blog/blog.json create mode 100644 src/content/blog/index.md create mode 100644 src/content/blog/pagination.md create mode 100644 src/content/blog/post1.md create mode 100644 src/content/blog/post2.md create mode 100644 src/content/blog/post3.md create mode 100644 src/content/contact.liquid create mode 100644 src/content/css.liquid create mode 100644 src/content/doc/doc.json create mode 100644 src/content/doc/doc1.md create mode 100644 src/content/doc/doc2.md create mode 100644 src/content/doc/doc3.md create mode 100644 src/content/doc/doc4.md create mode 100644 src/content/doc/doc5.md create mode 100644 src/content/doc/index.md create mode 100644 src/content/index.md diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..d9adfdf --- /dev/null +++ b/.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 }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5a87346 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +_site \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..7ec14ec --- /dev/null +++ b/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 + } + }; +}; +``` diff --git a/eleventy.config.js b/eleventy.config.js new file mode 100644 index 0000000..b201fee --- /dev/null +++ b/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 + } + }; +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..db14004 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/src/_data/site.json b/src/_data/site.json new file mode 100644 index 0000000..800fc15 --- /dev/null +++ b/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" +} diff --git a/src/_data/tokens.json b/src/_data/tokens.json new file mode 100644 index 0000000..e60db1d --- /dev/null +++ b/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)" +} diff --git a/src/_includes/arrow.svg b/src/_includes/arrow.svg new file mode 100644 index 0000000..ca87ba3 --- /dev/null +++ b/src/_includes/arrow.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/_includes/copyright.liquid b/src/_includes/copyright.liquid new file mode 100644 index 0000000..58b6b75 --- /dev/null +++ b/src/_includes/copyright.liquid @@ -0,0 +1 @@ +© {{ "now" | date: "%Y" }} Built with Eleventy & LiquidJS by Michel Maillard • Decap CMS • GitHub diff --git a/src/_includes/css/base.css b/src/_includes/css/base.css new file mode 100644 index 0000000..67c85f2 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/_includes/css/colors.css b/src/_includes/css/colors.css new file mode 100644 index 0000000..2243958 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/src/_includes/css/flex.css b/src/_includes/css/flex.css new file mode 100644 index 0000000..aedafcd --- /dev/null +++ b/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; +} diff --git a/src/_includes/css/form.css b/src/_includes/css/form.css new file mode 100644 index 0000000..5ce2f38 --- /dev/null +++ b/src/_includes/css/form.css @@ -0,0 +1,4 @@ + +/************/ +/* form.css */ +/************/ \ No newline at end of file diff --git a/src/_includes/css/grid.css b/src/_includes/css/grid.css new file mode 100644 index 0000000..97a521d --- /dev/null +++ b/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; +} diff --git a/src/_includes/css/navigation.css b/src/_includes/css/navigation.css new file mode 100644 index 0000000..bcb7f44 --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/src/_includes/css/reset.css b/src/_includes/css/reset.css new file mode 100644 index 0000000..d4c318c --- /dev/null +++ b/src/_includes/css/reset.css @@ -0,0 +1,100 @@ + +/*************/ +/* reset.css */ +/*************/ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'], +nav ul { + list-style: none; +} + +nav a { + text-decoration: none; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} + +/* Balance text wrapping on headings */ +h1, +h2, +h3, +h4 { + text-wrap: balance; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentColor; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font-family: inherit; + font-size: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} \ No newline at end of file diff --git a/src/_includes/css/space.css b/src/_includes/css/space.css new file mode 100644 index 0000000..d0e3a9b --- /dev/null +++ b/src/_includes/css/space.css @@ -0,0 +1,23 @@ + +/*************/ +/* space.css */ +/*************/ + +aside nav ul { + padding-left: 0; +} + +header>*, +main>*, +footer>* { + margin: var(--spacing); + padding: 0 var(--spacing); +} + +footer { + padding-bottom: var(--spacing); +} + +* { + line-height: clamp(1.125rem, 0.924vw + 0.886rem, 1.625rem); +} \ No newline at end of file diff --git a/src/_includes/decapcms.liquid b/src/_includes/decapcms.liquid new file mode 100644 index 0000000..a1b4607 --- /dev/null +++ b/src/_includes/decapcms.liquid @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/_includes/default.liquid b/src/_includes/default.liquid new file mode 100644 index 0000000..0612d33 --- /dev/null +++ b/src/_includes/default.liquid @@ -0,0 +1,26 @@ +--- +layout: base +--- +
+ {% include 'navigation/dropdown' %} +

{{ site.name }}

+
+
+ {%- if folder %} + + {% endif %} +
+ {%- if tags contains 'dropdown' %}{% include 'pagination/dropdown' %}{% endif %} + {%- if tags contains 'secondary' %}{% include 'pagination/paginate-collections' %}{% endif %} +

{{ title }}

+ {%- if description %}

{{ description }}

{% endif %} + {{ content }} +
+
+ +{% block decapcms %}{% endblock %} \ No newline at end of file diff --git a/src/_includes/navigation/dropdown.liquid b/src/_includes/navigation/dropdown.liquid new file mode 100644 index 0000000..74149a1 --- /dev/null +++ b/src/_includes/navigation/dropdown.liquid @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/src/_includes/navigation/footer.liquid b/src/_includes/navigation/footer.liquid new file mode 100644 index 0000000..33e56c2 --- /dev/null +++ b/src/_includes/navigation/footer.liquid @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/_includes/navigation/primary.liquid b/src/_includes/navigation/primary.liquid new file mode 100644 index 0000000..f50b339 --- /dev/null +++ b/src/_includes/navigation/primary.liquid @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/_includes/navigation/secondary.liquid b/src/_includes/navigation/secondary.liquid new file mode 100644 index 0000000..9b215b9 --- /dev/null +++ b/src/_includes/navigation/secondary.liquid @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/_includes/pagination/dropdown.liquid b/src/_includes/pagination/dropdown.liquid new file mode 100644 index 0000000..0ad42d8 --- /dev/null +++ b/src/_includes/pagination/dropdown.liquid @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/_includes/pagination/paginate-collections.liquid b/src/_includes/pagination/paginate-collections.liquid new file mode 100644 index 0000000..fc97c77 --- /dev/null +++ b/src/_includes/pagination/paginate-collections.liquid @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/_layouts/base.liquid b/src/_layouts/base.liquid new file mode 100644 index 0000000..72d2da0 --- /dev/null +++ b/src/_layouts/base.liquid @@ -0,0 +1,18 @@ + + + + + + + + + + {{ title }} - {{ site.name }} + + + + + {{ content }} + + + \ No newline at end of file diff --git a/src/_layouts/decapcms.liquid b/src/_layouts/decapcms.liquid new file mode 100644 index 0000000..961cf67 --- /dev/null +++ b/src/_layouts/decapcms.liquid @@ -0,0 +1,51 @@ + + + + + + + + + + {{ title }} - {{ site.name }} + + + + + +
+ {% include 'navigation/dropdown' %} +

{{ site.name }}

+
+
+ {%- if folder %} + + {% endif %} +
+ {%- if tags contains 'dropdown' %}{% include 'pagination/dropdown' %}{% endif %} + {%- if tags contains 'secondary' %}{% include 'pagination/paginate-collections' %}{% endif %} +

{{ title }}

+ {%- if description %}

{{ description }}

{% endif %} + {{ content }} +
+
+ + + + + \ No newline at end of file diff --git a/src/_layouts/default.liquid b/src/_layouts/default.liquid new file mode 100644 index 0000000..4cabffa --- /dev/null +++ b/src/_layouts/default.liquid @@ -0,0 +1,25 @@ +--- +layout: base +--- +
+ {% include 'navigation/dropdown' %} +

{{ site.name }}

+
+
+ {%- if folder %} + + {% endif %} +
+ {%- if tags contains 'dropdown' %}{% include 'pagination/dropdown' %}{% endif %} + {%- if tags contains 'secondary' %}{% include 'pagination/paginate-collections' %}{% endif %} +

{{ title }}

+ {%- if description %}

{{ description }}

{% endif %} + {{ content }} +
+
+ \ No newline at end of file diff --git a/src/_layouts/paginate.liquid b/src/_layouts/paginate.liquid new file mode 100644 index 0000000..6ab3b6e --- /dev/null +++ b/src/_layouts/paginate.liquid @@ -0,0 +1,18 @@ +--- +layout: base +--- +
+ {% include 'navigation/primary' %} +

{{ site.name }}

+
+
+
+

The Blog

+ {% include 'pagination/secondary' %} + {{ content }} +
+
+ \ No newline at end of file diff --git a/src/assets/admin/config.yml b/src/assets/admin/config.yml new file mode 100644 index 0000000..5e6fee3 --- /dev/null +++ b/src/assets/admin/config.yml @@ -0,0 +1,75 @@ +backend: # Required + name: git-gateway + branch: main +media_folder: "src/assets/img/" # Required +public_folder: "assets/img/" # Required +local_backend: true # Run "npx decap-server" for local backend | optional +display_url: https://mobile-michel.github.io/13-simple-blog/ +collections: # Required + - name: "pages" # Required. Used in routes, e.g., /admin/collections/blog + label: "Pages" # Required. Used in the UI + files: + - label: "Homepage" # Used in the UI | required + name: "index" # Used in routes, e.g., /admin/collections/blog | required + file: "src/content/index.md" # The path to the file | required + fields: # The fields in front matter | required + - { label: "Title", name: "title", widget: "string" } # required + - { label: "Layout", name: "layout", widget: "string" } + - { label: "Collections", name: "tags", widget: "string" } + - { label: "Body", name: "body", widget: "markdown" } + - label: "Contact" + name: "contact" + file: "src/content/contact.liquid" + fields: + - { label: "Title", name: "title", widget: "string" } + - { label: "Layout", name: "layout", widget: "string" } + - { label: "Collections", name: "tags", widget: "string" } + - { label: "Body", name: "body", widget: "markdown" } + - label: "Blog" + name: "blog" + folder: "src/content/blog" + create: true + editor: + preview: false + fields: + - { label: "Title", name: "title", widget: "string" } + - { label: "Description", name: "description", widget: "string" } + - { label: "Author", name: "author", widget: "string" } + - { label: "Publish Date", name: "date", widget: "datetime" } + - { label: "Body", name: "body", widget: "markdown" } + - label: "Documentation" + name: "doc" + folder: "src/content/doc" + create: true + editor: + preview: false + fields: + - { label: "Title", name: "title", widget: "string" } + - { label: "Description", name: "description", widget: "string" } + - { label: "Author", name: "author", widget: "string" } + - { label: "Publish Date", name: "date", widget: "datetime" } + - { label: "Body", name: "body", widget: "markdown" } + - name: "configuration" # Required. Used in routes, e.g., /admin/collections/blog + label: "Configuration" # Required. Used in the UI + files: + - label: "Site settings" + name: "settings" + file: "src/_data/site.json" + fields: + - { label: Name, name: name, widget: string } + - { label: Description, name: description, widget: string } + - { label: Author name, name: authorName, widget: string } + - { label: Author URL, name: authorUrl, widget: string } + - { label: Favicon, name: favicon, widget: string } + - label: "Design" + name: "Tokens" + file: "src/_data/tokens.json" + fields: + - { label: Size, name: size, widget: select, options: [{ label: "small", value: "10px" }, { label: "medium", value: "12px" }, { label: "big", value: "14px" }] } + - { label: Hue, name: hue, widget: select, options: [{ label: "red", value: "0" }, { label: "red-orange", value: "18" }, { label: "orange", value: "20" }, { label: "orange-yellow", value: "45" }, { label: "yellow", value: "60" }, { label: "yellow-green", value: "90" }, { label: "green", value: "120" }, { label: "green-blue", value: "180" }, { label: "blue", value: "240" }, { label: "blue-purple", value: "270" }, { label: "purple", value: "280" }, { label: "purple-red", value: "300" }] } + - { label: Saturation, name: saturation, widget: select, options: [{ label: "very saturated", value: "99%" }, { label: "saturated", value: "80%" }, { label: "medium", value: "50%" }, { label: "pale", value: "30%" }, { label: "very pale", value: "10%" }] } + - { label: Lightness, name: lightness, widget: select, options: [{ label: "very light", value: "80%" }, { label: "light", value: "65%" }, { label: "medium", value: "50%" }, { label: "dark", value: "35%" }, { label: "very dark", value: "20%" }] } + - { label: Color Scheme, name: color-scheme, widget: select, options: [{ label: "monochromatic", value: "0" }, { label: "analogous", value: "30" }, { label: "complementary", value: "180" }, { label: "triadic", value: "120" }] } + - { label: Max-width, name: max-width, widget: select, options: [{ label: "narrow", value: "40rem" }, { label: "medium", value: "50rem" }, { label: "large", value: "60rem" }, { label: "full", value: "100%" }] } + - { label: Spacing, name: spacing, widget: select, options: [{ label: "dense", value: ".1rem" }, { label: "medium", value: "1rem" }, { label: "sparse", value: "2rem" }] } + - { label: Text font size, name: text-font-size, widget: select, options: [{ label: "small", value: "clamp(0.625rem, 0.693vw + 0.446rem, 1rem)" }, { label: "medium", value: "clamp(1rem, 0.924vw + 0.511rem, 1.25rem)" }, { label: "big", value: "clamp(1.313rem, 1.178vw + 1.008rem, 1.95rem)" }] } diff --git a/src/assets/admin/index.html b/src/assets/admin/index.html new file mode 100644 index 0000000..745bf75 --- /dev/null +++ b/src/assets/admin/index.html @@ -0,0 +1,17 @@ + + + + + + + + Content Manager + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/arrow.svg b/src/assets/img/arrow.svg new file mode 100644 index 0000000..212316f --- /dev/null +++ b/src/assets/img/arrow.svg @@ -0,0 +1,12 @@ + + + + \ No newline at end of file diff --git a/src/assets/img/favicon.png b/src/assets/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..cddc2a63a6f7b479046d4b446dd71ae4faa2a78c GIT binary patch literal 1731 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+0815;3dPlzi}!H2bePTi+~ z02%-P|7RBUYy+mM!zDp}!9bctBYVxw zPk;X2Se2>9Y&Pxw@4J(Xm?S%1K5r7^WHdSWZ;!rSvHkUnF~`^byfmwzaL$!qKUVKQ z5+xCLqWz0#-#612MXXb_#5Ip9sxn4L+N``h@nN;}wYhWto=+C|Q1WY!FUJPwugh4t zo_C1^96GrD;{s!*`XAfe*jApNa3+TL?riVe>>NYU@6oKA;MsyZ1hpBtIIEGl9 z&Yko8|FP)!t$=)>A!AfJ3LhXYE2PH4g zFfwZA**a6OLFe~|6-yo}Z(>YX!rWq?RpMvjcN9fEFI}(;(A66 zN4$ZYj(t|ttAJn%w-#P>?>&&5B$e1&3WUAz=5>0+f%b=_T(rhSRY~Z)xIAXnCUjD z-01BiLDmJCyT4aRHvHSGa@48F>L&q8Uh?LX63>MCN4g{>csKKGJY(pn$@!^ zn7+(cS#T{!d7f46vm70TRi!L*f;YUX`OCU2;IFI8`=u3iM<(?D%J1m5GUgTguI79R&%eJg>WQ9I!?lYNL4QrW ze%$-ZF1zPSq?`DmhIXdTEw)vEo@9onZ})#wT@}c1uq*1V{i{l~yfx2ucIn5t3B3(p z@9m=Yr6uyddH(Ly{qOEpzl>b4eDCU&itp-v{8)K?@`nu)pMIXco`1jokIvt(zt6`X z{>OgF*WX-pN9Z$PDpD0evjZ^-o&v-r!VqjM0)=TCVRu=Z2EW#|T;L>1nIE7hxbBMy}8&^&oIdeqj h2>a;`%mGG_n) literal 0 HcmV?d00001 diff --git a/src/assets/js/nav.js b/src/assets/js/nav.js new file mode 100644 index 0000000..3de4eaf --- /dev/null +++ b/src/assets/js/nav.js @@ -0,0 +1,19 @@ +const nav = document.querySelector('nav') +const list = nav.querySelector('ul'); +const burgerClone = document.querySelector('#burger-template').content.cloneNode(true); + +const button = burgerClone.querySelector('button'); +button.addEventListener('click', e => { + const isOpen = button.getAttribute('aria-expanded') === "false" + + button.setAttribute('aria-expanded', isOpen); +}); + +nav.addEventListener('keyup', e => { + if (e.code === 'Escape') { + button.setAttribute('aria-expanded', false); + button.focus() + } +}); + +nav.insertBefore(burgerClone, list); \ No newline at end of file diff --git a/src/assets/js/netlifyIdentity.js b/src/assets/js/netlifyIdentity.js new file mode 100644 index 0000000..a588c65 --- /dev/null +++ b/src/assets/js/netlifyIdentity.js @@ -0,0 +1,9 @@ +if (window.netlifyIdentity) { + window.netlifyIdentity.on("init", user => { + if (!user) { + window.netlifyIdentity.on("login", () => { + document.location.href = "/admin/"; + }); + } + }); +} diff --git a/src/content/404.liquid b/src/content/404.liquid new file mode 100644 index 0000000..dc0ad4b --- /dev/null +++ b/src/content/404.liquid @@ -0,0 +1,6 @@ +--- +title: Oops! Not Found +layout: default +permalink: 404.html +--- +

You may find something on the home page...

\ No newline at end of file diff --git a/src/content/blog/blog.json b/src/content/blog/blog.json new file mode 100644 index 0000000..ff60e56 --- /dev/null +++ b/src/content/blog/blog.json @@ -0,0 +1,4 @@ +{ + "layout": "default", + "tags": ["secondary", "blog"] +} \ No newline at end of file diff --git a/src/content/blog/index.md b/src/content/blog/index.md new file mode 100644 index 0000000..3deceb0 --- /dev/null +++ b/src/content/blog/index.md @@ -0,0 +1,10 @@ +--- +title: Blog +description: This blog is about photography. +layout: default +date: 2024-01-03 +override:tags: ["primary", "footer"] +--- +{% for post in collections.blog %} +- [{{ post.data.title }}]({{ post.data.title | slugify | prepend: '/blog/' | append: '/' | url }}) published on {{ post.data.date | date: '%d %b %Y' }} by {{ post.data.author }} +{% endfor %} \ No newline at end of file diff --git a/src/content/blog/pagination.md b/src/content/blog/pagination.md new file mode 100644 index 0000000..a63cfc5 --- /dev/null +++ b/src/content/blog/pagination.md @@ -0,0 +1,12 @@ +--- +title: Blog pagination +layout: default +date: 2024-01-03 +eleventyExcludeFromCollections: true +pagination: + data: collections.blog + size: 1 +permalink: "{{ pagination.items[0].data.title | slugify | prepend: '/blog/' | append: '/' }}" +--- +

{{ pagination.items[0].data.title }}

+

{{ pagination.items[0].content }}

\ No newline at end of file diff --git a/src/content/blog/post1.md b/src/content/blog/post1.md new file mode 100644 index 0000000..4fc3944 --- /dev/null +++ b/src/content/blog/post1.md @@ -0,0 +1,37 @@ +--- +title: Flash Photography +description: Introduction to Flash Photography. +author: Michel Maillard +date: 2024-05-13 +--- +In this post, we will explore the basics of flash photography. Flash photography is a technique that involves using artificial light sources to illuminate a subject. It can be a powerful tool for photographers to control lighting conditions and create stunning images. + +### Why Use Flash? + +Flash photography offers several advantages over natural light photography. It allows you to: + +- Overcome low light situations: Flash can provide additional light in dimly lit environments, allowing you to capture well-exposed images even in challenging lighting conditions. +- Freeze motion: Flash has a very short duration, which can help freeze fast-moving subjects and eliminate motion blur. +- Add creative lighting effects: Flash can be used to create dramatic lighting effects, such as backlighting, fill light, or adding catchlights to the subject's eyes. + +### Types of Flash + +There are various types of flash units available, including: + +1. Built-in flash: Many cameras come with a built-in flash that can be used for basic flash photography. +2. External flash: External flash units offer more power and flexibility compared to built-in flashes. They can be mounted on the camera's hot shoe or used off-camera for more creative lighting setups. +3. Studio strobes: Studio strobes are powerful flash units used in professional studio setups. They provide consistent and controlled lighting for studio photography. + +### Flash Techniques + +To get started with flash photography, here are a few techniques to consider: + +1. On-camera flash: This is the simplest technique where the flash is mounted on the camera's hot shoe and used to illuminate the subject directly. +2. Off-camera flash: By using wireless triggers or sync cables, you can take the flash off-camera and experiment with different lighting angles and positions. +3. Flash modifiers: Attachments like diffusers, reflectors, and softboxes can help control the quality and direction of the flash, resulting in softer and more flattering light. + +### Conclusion + +Flash photography is a versatile technique that can greatly enhance your photography skills. By understanding the basics of flash and experimenting with different techniques, you can take your images to the next level. Stay tuned for more advanced flash photography tips and tricks in future posts! + +Happy shooting! \ No newline at end of file diff --git a/src/content/blog/post2.md b/src/content/blog/post2.md new file mode 100644 index 0000000..489bcb6 --- /dev/null +++ b/src/content/blog/post2.md @@ -0,0 +1,12 @@ +--- +title: Street Photography +description: Introduction to Street Photography. +author: Copilot +date: 2024-05-14 +--- + +Street photography is a popular genre of photography that captures candid moments of everyday life in public places. It often focuses on capturing the essence of a city, its people, and the interactions between them. Street photographers aim to document the human condition and tell stories through their images. + +In this post, we will explore the basics of street photography, including composition techniques, camera settings, and tips for capturing compelling street photographs. Whether you're a beginner or an experienced photographer, this guide will provide you with valuable insights to improve your street photography skills. + +Stay tuned for upcoming posts where we will delve deeper into specific aspects of street photography, such as capturing emotions, using light and shadow, and post-processing techniques. \ No newline at end of file diff --git a/src/content/blog/post3.md b/src/content/blog/post3.md new file mode 100644 index 0000000..b7ca16a --- /dev/null +++ b/src/content/blog/post3.md @@ -0,0 +1,17 @@ +--- +title: Wedding photo +description: Capturing the moments and emotions of a wedding ceremony and reception. +author: Michel Maillard +date: 2024-05-15 +--- +Wedding photography is a specialized genre of photography that focuses on capturing the moments and emotions of a wedding ceremony and reception. It requires a unique set of skills and techniques to capture the beauty, joy, and love of the couple and their loved ones. + +As a wedding photographer, it is important to have a good understanding of the couple's preferences and vision for their wedding day. This includes meeting with them beforehand to discuss their expectations, preferred style, and any specific shots they want to be captured. + +On the wedding day, the photographer should arrive early to capture the preparations, details, and candid moments leading up to the ceremony. During the ceremony, they should be discreet and unobtrusive while capturing the exchange of vows, ring exchange, and other important moments. + +After the ceremony, the photographer will typically take formal portraits of the couple, family, and bridal party. They will also capture candid moments during the reception, including the first dance, speeches, and cake cutting. + +Post-processing is an important part of wedding photography. This involves editing the photos to enhance their quality, adjust colors, and apply any desired effects. The final edited photos are then delivered to the couple in a digital format or as prints, depending on their preferences. + +Wedding photography requires not only technical skills but also the ability to work well under pressure, adapt to different lighting conditions, and capture fleeting moments that tell the story of the day. It is a rewarding and challenging field that allows photographers to be a part of one of the most important days in a couple's life. diff --git a/src/content/contact.liquid b/src/content/contact.liquid new file mode 100644 index 0000000..f553bd9 --- /dev/null +++ b/src/content/contact.liquid @@ -0,0 +1,65 @@ +--- +title: Contact +layout: default +tags: [primary, footer] +author: 'John Doe' +--- +
+

This is just a test form. It doesn't do anything.

+ +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + + + +

+ +

+ + +

+ +

+ + +

+ +

+ +

+ + + + +
\ No newline at end of file diff --git a/src/content/css.liquid b/src/content/css.liquid new file mode 100644 index 0000000..ef5ee0d --- /dev/null +++ b/src/content/css.liquid @@ -0,0 +1,42 @@ +--- +permalink: assets/css/style.css +--- +/************************************************** +Classless CSS stylesheet v1.0, Michel Maillard +**************************************************/ + +/*************/ +/* Variables */ +/*************/ + +:root { + --size: {{ tokens.size }}; + --text-font-size: {{ tokens.text-font-size }}; + --hue: {{ tokens.hue }}; + --saturation: {{ tokens.saturation }}; + --lightness: {{ tokens.lightness }}; + --primary-color: hsl(var(--hue), var(--saturation),var(--lightness)); + --color-scheme: {{ tokens.color-scheme }}; + --secondary-hue: calc(var(--hue) + var(--color-scheme)); + --secondary-lightness: calc(var(--lightness) + 20%); + --secondary-color: hsl(var(--secondary-hue), var(--saturation), var(--secondary-lightness)); + --max-width: {{ tokens.max-width }}; + --spacing: {{ tokens.spacing }}; + --grey100: #f8f9fa; + --grey200: #e9ecef; + --grey300: #dee2e6; + --grey400: #ced4da; + --grey500: #adb5bd; + --grey600: #868e96; + --grey700: #495057; + --grey800: #343a40; + --grey900: #212529; +} + +{% include "css/reset.css" %} +{% include "css/base.css" %} +{% include "css/flex.css" %} +{% include "css/space.css" %} +{% include "css/colors.css" %} +{% include "css/navigation.css" %} +{% include "css/form.css" %} \ No newline at end of file diff --git a/src/content/doc/doc.json b/src/content/doc/doc.json new file mode 100644 index 0000000..10e65ba --- /dev/null +++ b/src/content/doc/doc.json @@ -0,0 +1,5 @@ +{ + "layout": "default", + "tags": ["dropdown", "doc"], + "navigation": "doc" +} \ No newline at end of file diff --git a/src/content/doc/doc1.md b/src/content/doc/doc1.md new file mode 100644 index 0000000..6bb950b --- /dev/null +++ b/src/content/doc/doc1.md @@ -0,0 +1,21 @@ +--- +title: LiquidJS +description: A simple, expressive and safe template engine. +author: Wikipedia +date: 2024-05-13 +--- +[LiquidJS](https://liquidjs.com/) is a powerful template language that allows you to dynamically generate content in your web applications. It provides a simple and intuitive syntax for creating dynamic templates. + +LiquidJS supports various features such as variables, filters, loops, conditionals, and includes. It is widely used in popular web frameworks like Shopify and Jekyll. + +### Safe Rendering +Liquid templates are highly readable and fault-tolerant thus suitable for designers and customers. Operators and expressions are parsed to AST and no eval or new Function are used. + +### Zero Dependency +Written with zero npm dependency and no native binding, available in both Node.js and browsers. All of the CMD, ESM and CJS bundles are available on CDN. + +### Shopify Compatible +All filters and tags from Ruby shopify/liquid are supported by LiquidJS. Jekyll sites, Github Pages and Shopify templates can be ported to Node.js without pain. + +### TypeScript Strict +The whole repo is re-written in TypeScript strict mode to ensure a smooth experience using this lib and the document is precise and always up to date. \ No newline at end of file diff --git a/src/content/doc/doc2.md b/src/content/doc/doc2.md new file mode 100644 index 0000000..bb8d8db --- /dev/null +++ b/src/content/doc/doc2.md @@ -0,0 +1,18 @@ +--- +title: Eleventy +description: Eleventy is a simpler static site generator. +author: Wikipedia +date: 2024-05-14 +--- +[11ty](https://www.11ty.dev/) is a static site generator that allows you to build fast and flexible websites. It is based on JavaScript and supports various templating languages such as Markdown, Nunjucks, and Handlebars. + +With 11ty, you can easily create and organize your content, customize your site's layout and design, and generate static HTML files that can be deployed to any web server. + +### 11ty elements +- template language (default to LiquidJS) +- layouts +- collections +- pagination (create pages from data) +- data cascade +- environment variables +- filters \ No newline at end of file diff --git a/src/content/doc/doc3.md b/src/content/doc/doc3.md new file mode 100644 index 0000000..af36a3c --- /dev/null +++ b/src/content/doc/doc3.md @@ -0,0 +1,14 @@ +--- +title: Classless CSS +description: Provide a set of pre-designed and pre-styled components that can be + easily added to a web page without the need to write custom CSS classes. +author: GitHub +date: 2024-06-05 +--- +[Classless CSS frameworks](https://github.com/topics/classless-css?l=html) are a great option for developers looking to create simple and fast-loading web pages without sacrificing design and style. They are also ideal for small projects or prototypes where the overhead of a full CSS framework may not be necessary. + +It's a CSS stylesheet that styles DOM elements based on semantic HTML tags. A webpage typically consists of several HTML element types, such as headings, lists, tables, paragraphs, and form controls. + +HTML offers several tags to render these elements, such as the <table> tag to create a table. Each tag indicates how the end DOM element  will appear when we use the <table> tag, we know that the web browser will render a table. + +Classless CSS frameworks help you style raw HTML pages instantly without using pre-defined classes, like class-based frameworks, or even writing a single line of CSS. Moreover, classless frameworks offer various themes and CSS variables for better customization. diff --git a/src/content/doc/doc4.md b/src/content/doc/doc4.md new file mode 100644 index 0000000..4cb95d6 --- /dev/null +++ b/src/content/doc/doc4.md @@ -0,0 +1,17 @@ +--- +title: DecapCMS +description: Open source content management for your Git workflow. +author: Wikipedia +date: 2024-05-15 +--- +[DecapCMS](https://decapcms.org/) is a powerful content management system that allows you to easily create and manage your website's content. It provides a user-friendly interface and a wide range of features to help you build dynamic and interactive websites. + +With DecapCMS, you can create and organize your content using a hierarchical structure of pages and categories. You can also add custom fields to your content to capture specific information. DecapCMS supports various content types, including articles, blog posts, events, and more. + +One of the key features of DecapCMS is its flexibility. It allows you to customize the appearance and functionality of your website by using themes and plugins. You can choose from a wide range of pre-designed themes or create your own custom theme to match your brand identity. + +DecapCMS also provides powerful search and navigation capabilities, making it easy for your visitors to find the content they are looking for. It supports SEO-friendly URLs, meta tags, and sitemaps to improve your website's visibility in search engines. + +In addition, DecapCMS offers user management and permission control, allowing you to define different roles and access levels for your team members. You can assign specific permissions to each user, ensuring that only authorized individuals can modify or publish content. + +Overall, DecapCMS is a versatile and user-friendly content management system that simplifies the process of creating and managing your website's content. It provides a robust set of features and customization options, making it suitable for both small personal websites and large enterprise applications. \ No newline at end of file diff --git a/src/content/doc/doc5.md b/src/content/doc/doc5.md new file mode 100644 index 0000000..fd2e65c --- /dev/null +++ b/src/content/doc/doc5.md @@ -0,0 +1,11 @@ +--- +title: GitHub Pages +description: Websites for you and your projects. +author: GitHub +date: 2024-05-16 +--- +GitHub is one of the most popular tools that companies and individuals use to host and version control source code repositories. The platform runs by using Git software, which helps track code changes and streamline development collaboration. GitHub has been constantly improving the software developer experience and keeps launching new features to enhance automation and encourage even more collaboration between dev teams — with one of those features being GitHub Pages. + +[GitHub Pages](https://pages.github.com/) is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. + +GitHub Pages is a feature of GitHub that lets you host static websites from GitHub repositories and make them publicly available or even privately accessible within your team and organization. From your personal website and portfolio to your project’s documentation, GitHub Pages can help you launch websites in a matter of minutes. You will even get a URL in the form https://repository-name.github.io that you can share with the world to make your website(s) accessible to others. \ No newline at end of file diff --git a/src/content/doc/index.md b/src/content/doc/index.md new file mode 100644 index 0000000..8068755 --- /dev/null +++ b/src/content/doc/index.md @@ -0,0 +1,10 @@ +--- +title: Documentation +description: This is documentation. +layout: default +date: 2024-01-03 +override:tags: ["primary", "footer"] +--- +{% for post in collections.blog %} +- [{{ post.data.title }}]({{ post.data.title | slugify | prepend: '/blog/' | append: '/' | url }}) published on {{ post.data.date | date: '%d %b %Y' }} by {{ post.data.author }} +{% endfor %} \ No newline at end of file diff --git a/src/content/index.md b/src/content/index.md new file mode 100644 index 0000000..1dd0a73 --- /dev/null +++ b/src/content/index.md @@ -0,0 +1,60 @@ +--- +title: Home +date: 2024-01-01 +layout: decapcms +tags: + - primary + - footer +--- +### 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 with /components +- 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-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 + } + }; +}; +``` \ No newline at end of file