Merge pull request #52 from aloxe/seo-fields

Seo fields in meta tags and CMS

.eleventy.js

@@ -46,7 +46,8 @@ module.exports = async function(eleventyConfig) {
       ? "./" + env.meta.media_folder + imgPath.slice(env.meta.public_folder.length)
       : imgPath.slice(0,1) === "/" 
         ? env.eleventy.directories.input.slice(0, -1) + imgPath
-        : env.page.inputPath.substring(0, env.page.inputPath.lastIndexOf('/')) + "/" + imgPath
+        : env.page.inputPath.substring(0, env.page.inputPath.lastIndexOf('/')+1) + imgPath
+      // TODO: is imgPath.slice(0,1) === "/" ? really necessary?
 
     const imgAlt = token.content
     const imgTitle = token.attrGet('title') ?? ''
@@ -145,6 +146,22 @@ module.exports = async function(eleventyConfig) {
   return `${picture}`;
   });
 
+  // image path for page thumbnail (used in meta tags)
+  eleventyConfig.addNunjucksAsyncShortcode("getOGImageUri", async (meta, page, src) => {
+    if (!src) return "/img/vera-460w.jpeg"; // use an existing image as fallback
+
+    const isGlobal = src.slice(0, meta.public_folder.length) === meta.public_folder
+
+    const imgSrc = isGlobal 
+    ? "./" + meta.media_folder + src.slice(meta.public_folder.length)
+    : page.inputPath.substring(0, page.inputPath.lastIndexOf('/')+1) + src
+
+    const ImgOptions = getImgOptions(page, src, "", "", [600], ["webp"], undefined);
+    const metadata = await Image(imgSrc, ImgOptions)
+    console.log("RETURN image " + metadata.webp[0].url);
+
+    return metadata.webp[0].url
+  })
 
   // Collections 
   eleventyConfig.addCollection("documentation", function (collection) {
@@ -215,10 +232,8 @@ const stringifyAttributes = (attributeMap) => {
   }
 
   const getImgOptions = (page, src, alt, className, widths, formats, sizes) => {
-    let outputFolder = page.outputPath.split("/")
-    outputFolder.pop() // remove index.html
-    outputFolder = outputFolder.join("/");
-
+    let outputFolder = page.outputPath.slice(0, page.outputPath.lastIndexOf('/')+1) // remove index.html
+
     let urlPath = outputFolder.split("/")
     urlPath.shift() // remove ./
     urlPath.shift() // remove _site

README.md

@@ -1,29 +1,29 @@
 # huwindty 🌬️
 
-I wanted to use [Windty](https://github.com/distantcam/windty/) for my next [eleventy](https://www.11ty.dev/) project before I realised I need more than just a single page with [Tailwindcss](https://tailwindcss.com/). So I kept the good work and added more.
+*I wanted to use [Windty](https://github.com/distantcam/windty/) for my next [eleventy](https://www.11ty.dev/) project before I realised I need more than just a single page with [Tailwindcss](https://tailwindcss.com/). So I kept the good work and added more.*
 
 ## What was added
 ### Continuous Integration
-- Publication to github pages
+- Publication to github pages (on merge)
 - Deployment to stand alone server via ssh (manual action)
-- Lighthouse checks on key pages for each PR to keep the triple 💯
+- Make sure you keep the lighthouse 💯 💯 💯 💯 (check on PR)
 ### Styles
 - Tailwind css are processed directly by 11ty
 ### Navigation
-- Navigation menu is directly generated from page structure
+- The navigation menu is generated from the page structure
 ### Site output
-- Handle markdown with style
+- Render markdown with styles
 - Process images to make them responsive
+- reder "SEO" meta tags on all pages
 ### Content Managment System
 - Installed Sveltia and Decap CMS with content flow
 - Possibility to use Sveltia CMS with the same config
+- Manage meta data and images on a per page basis
 ### Documentation
 - Documentation comes with the starter as an example
 - Explains how features are developped
 
-
 ## What is still missing
-- better SEO metadata
 - dark mode
 
 ## Install

src/_assets/public/admin/config.yml

@@ -7,9 +7,9 @@
 # Sveltia CMS docs: https://github.com/sveltia/sveltia-cms#features
 
 backend:
-  name: github
+  name: github # current huwindty has been tested with github only
   repo: aloxe/huwindty # Path to your GitHub repository
-  branch: ecrire
+  branch: ecrire # name of the branch where content edits will be pushed
   base_url: https://auth.xn--4lj4bfp6d.eu.org # Path to ext auth provider
 
 
@@ -24,6 +24,8 @@ collections:
   - name: "documentation" # Used in routes, e.g., /admin/collections/blog
     label: "Documentation" # Used in the UI
     folder: "src/pages/documentation" # The path to the folder where the documents are stored
+    thumbnail: true
+    columns: [title, date]
     media_folder: '' # start with a slash
     public_folder: /documentation
     create: true # Allow users to create new documents in this collection
@@ -39,13 +41,36 @@ collections:
       - label: "Title"
         name: "title"
         widget: "string"
-      - label: "subtitle"
-        name: "subtitle"
+      - label: "headline"
+        name: "headline"
         widget: "string"
         required: false
       - label: "Body"
         name: "body"
         widget: "markdown"
+      - label: "description"
+        name: "description"
+        widget: "string"
+        required: false
+      - label: "tags"
+        name: "tags"
+        widget: "string"
+        required: false
+      - label: "author"
+        name: "author"
+        widget: "string"
+        required: false
+      - label: "date"
+        name: "date"
+        widget: "datetime"
+        default: "{{now}}"
+        format: "YYYY-MM-DD"
+        picker_utc: false
+      - label: "Featured Image"
+        name: "thumbnail"
+        widget: "image"
+        allow_multiple: false
+        required: false
   - name: "examples" # Used in routes, e.g., /admin/collections/blog
     label: "Examples" # Used in the UI
     folder: "src/pages/examples" # The path to the folder where the documents are stored
@@ -65,14 +90,28 @@ collections:
       - label: "Title"
         name: "title"
         widget: "string"
-      - label: "subtitle"
-        name: "subtitle"
+      - label: "headline"
+        name: "headline"
         widget: "string"
         required: false
+      - label: "Body"
+        name: "body"
+        widget: "markdown"
       - label: "description"
         name: "description"
         widget: "string"
         required: false
-      - label: "Body"
-        name: "body"
-        widget: "markdown"
+      - label: "tags"
+        name: "tags"
+        widget: "string"
+        required: false
+      - label: "author"
+        name: "author"
+        widget: "string"
+        required: false
+      - label: "date"
+        name: "date"
+        widget: "datetime"
+        default: "{{now}}"
+        format: "YYYY-MM-DD"
+        picker_utc: false

src/_assets/public/decap/index.html → src/_assets/public/admin/index.html

@@ -5,16 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex" />
     <link rel="dns-prefetch" href="https://unpkg.com">
-    <title>CMS admin (decap CMS)</title>
+    <title>CMS admin sveltia CMS</title>
   </head>
   <body>
     <!--
-    This index can load sveltia or decap cms, just comment or uncomment the script you want to use
+    This index can load sveltia or decap cms, just comment or uncomment the script you want to use.
+    Huwindty uses sveltia CMS but you may prefer decap cms if you want certain features that are not yet implemented in sveltia (like workflow)
     -->
-    <!-- Include the script that builds the page and powers Decap CMS -->
-    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+    <!-- <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script> -->
+    <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js" type="module"></script>
+
     <script>
-      // Take from demo https://github.com/decaporg/decap-cms/blob/main/dev-test/index.html
+      // Taken from demo https://github.com/decaporg/decap-cms/blob/main/dev-test/index.html
       const previewStyles = `
         html,
         body {

src/_data/meta.json

@@ -4,7 +4,8 @@
   "description": "Huwindty enhanced template using 11ty.",
   "language": "en",
   "author": {
-    "name": "Alix Guillard"
+    "name": "Alix Guillard",
+    "fediverse": "@[email protected]"
   },
 "media_folder": "src/static/img",
 "public_folder": "/img"

src/_layouts/includes/head.njk

@@ -1,34 +1,34 @@
 <meta charSet="utf-8"/>
-<meta name="author" content="{{ meta.author.name }}" />
+{% if meta.author.name %}<meta name="author" content="{{ meta.author.name }}" />{% endif %}
 <meta name="HandheldFriendly" content="True" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<meta name="title" content="{{ title }}">
-<meta name="description" content="{{ description }}">
 <link rel="icon" type="image/png" href="{{ '/favicon.ico' }}" />
 <link rel="manifest" href="{{ '/manifest.json' }}" />
 
 {% if page.fileSlug === "404" %}{% else %}
   <link rel="canonical" href="{{ meta.url }}{{ page.data.permalink or page.url | url }}" />
 {% endif %}
 
-<title>
-  {{ title or meta.title }}
-</title>
+<title>{{ title or meta.title }}</title>
+{% if description %}<meta name="description" content="{{ description }}">{% endif %}
+
 {% if page.fileSlug === "404" %}{% else %}
   <meta itemprop="name" content="{{ title }}">
-  <meta itemprop="description" content="{{ description }}">
-  {# <meta itemprop="image" content="{{ meta.url }}{% getOGImageUri page, image %}"> #}
+  {% if description %}<meta itemprop="description" content="{{ description }}">{% endif %}
+  {% if thumbnail %}<meta itemprop="image" content="{{ meta.url }}{% getOGImageUri meta, page, thumbnail %}">{% endif %}
+
   <meta property="og:title" content="{{ title }}">
   <meta property="og:type" content="article">
   <meta property="og:url" content="{{ meta.url }}{{ page.data.permalink or page.url | url }}">
-  <meta property="og:description" content="{{ description }}">
+  {% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
   <meta property="og:site_name" content="{{ meta.title }}">
-  <meta property="og:locale" content="{{ meta.language }}">
-  {# <meta property="og:image" content="{{ meta.url }}{% getOGImageUri page, image %}"> #}
+  <meta property="og:locale" content="{{ meta.language or "en" }}">
+  {% if thumbnail %}<meta property="og:image" content="{{ meta.url }}{% getOGImageUri meta, page, thumbnail %}">{% endif %}
 
+  {% if meta.author.fediverse %}<meta name="fediverse:creator" content="{{ meta.author.fediverse }}" />{% endif %}
   <meta name="twitter:title" content="{{ title }}">
-  <meta name="twitter:description" content="{{ description }}">
-  {# <meta name="twitter:image:src" content="{{ meta.url }}{% getOGImageUri page, image %}"> #}
+  {% if description %}<meta name="twitter:description" content="{{ description }}">{% endif %}
+  {% if thumbnail %}<meta name="twitter:image:src" content="{{ meta.url }}{% getOGImageUri meta, page, thumbnail %}">{% endif %}
   <meta name="twitter:card" content="summary_large_image">
 {% endif %}
 

src/_layouts/includes/header.njk

@@ -3,6 +3,6 @@
       {{ title }}
     </h1>
     <p class="mb-6 text-center text-base leading-normal md:text-left md:text-2xl">
-      {{ subtitle }}
+      {{ headline }}
     </p>
   </header>

src/_layouts/includes/menu.njk

@@ -1,13 +1,20 @@
 {% from '../macros/renderNavItem.njk' import renderNavItem with context %}
 
 
-<nav class="w-full bg-blue-600 text-white text-xl flex-shrink-0">
+<nav class="w-full bg-blue-600 text-white text-xl md:flex-shrink-0">
   {% set allEntries = collections.all %}
-  <ul role="list" class="flex">
-    <li class="relative group">
+  <div class="float-left">
     <a href="/" {% if entry.url == "/" %} aria-current="page" {% endif %}
-      class="block p-4 text-nowrap hover:text-blue-300"
-      >ॐ sweet home</a> 
+    class="block p-4 text-nowrap hover:text-blue-300"
+    >ॐ<span class="hidden md:inline"> sweet home</span></a> 
+  </div>
+    <input id="hamburger" type="checkbox" name="hamburger" class="sr-only peer" unchecked />
+    <label for="hamburger" class="after:float-right after:p-4 after:content-['≡'] peer-checked:after:content-['✕'] md:hidden cursor-pointer">
+      <span class="sr-only">Menu</span>
+    </label>
+  <ul role="list" class="md:flex hidden peer-checked:block">
+    <li class="relative group">
+      <span class="mt-12 block text-nowrap"></span> 
     </li>
     {%- for entry in allEntries %}
       {% if entry.url.split("/").length === 3 %}
@@ -21,4 +28,5 @@
       {% endif %}
     {% endfor %}
   </ul>
+
 </nav>

src/_layouts/macros/renderNavItem.njk

@@ -12,7 +12,7 @@
 
 {% macro ulClass(entry) %}
   {% if entry.url.split("/").length === 3 %}
-    absolute left-0 hidden bg-white text-black shadow-lg group-hover:block
+    md:absolute left-0 hidden bg-white text-black shadow-lg group-hover:block
   {% endif %}
 {% endmacro %}
 

src/pages/documentation/ci.md

@@ -1,7 +1,7 @@
 ---
 layout: base
 title: Continuous Integration
-subtitle: Github CI pipelines
+headline: Github CI pipelines
 ismarkdown: true
 ---
 ## Github Continuous Integration
@@ -15,7 +15,7 @@ This starter comes with 3 github pipelines that can be used for your project's c
 
 The pipeline is triggered on every update of the default branch. it will deploy the static site generated by 11ty (in _site) to github pages that will make it available at https://<your_account_name>.github.io/<your_repository_name>
 
-If you choose this solution to publish your site, remember that the `your_repository_name` will be added to the meta.json.
+If you choose this solution to publish your site, remember that the `your_repository_name` needs to be added to the meta.json.
 
 More on Github pages: https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site
 
@@ -24,7 +24,7 @@ More on Github pages: https://docs.github.com/en/pages/getting-started-with-gith
 **pipeline:** test.yml
 **prerequisites**: You need to set up your own web server accessible via ssh.
 
-The pipeline is triggered on every update of the `test` branch or manually in the github action tab.
+The pipeline is triggered on every update of the branch called `test` or manually in the apropriate github action page 'Deploy 11ty test 🛠️'.
 
 It will copy the static site generated by 11ty (in _site) to the server of your choice using ssh.
 
@@ -33,16 +33,18 @@ To do so, you will need to create an ssh key and copy the public key to `.ssh/au
 - HOST: the name of your server
 - USERNAME: your username
 - KEY: the private ssh key you just created
-- PORT: the specific port used by the server ssh daemon (default is 22)
-- PATH: the location of your html root document (relative to your home on the server)
+- PORT: the specific port used by your server ssh daemon (default is 22)
+- PATH: the location of your html root document (relative to the USERNAME home on your server)
 
 ### Lighthouse pipeline
 
 **pipeline:** lighthouse.yml
 **prerequisites**: You need to create a LHCI_GITHUB_APP_TOKEN that you save in tokens and authorise the [lighthouse-ci](https://github.com/GoogleChrome/lighthouse-ci) App in the repository setting of your project.
 
-The lighthouse pipeline is triggered on every pull request, it will display the lighthouse score of the index page within your pull request checks. 
+The lighthouse pipeline is triggered on every pull request, it will display the lighthouse score of the index page within your pull request checks. If you don't get all 💯. the test will display the an error and a link to the lighthouse page that tells you what to do to fix it. If it is all green, you can merge your changes in.
 
-The settings of lighthouse are done in `lighthouserc.js` at the root of the project. It is possible to add assertions to focus on certain aspects of lighthouse measurements.
+The settings of lighthouse are done in `lighthouserc.js` at the root of the project. It is possible to add assertions to focus on certain aspects of lighthouse measurements or allow more flexibility.
+
+The current project tests three pages. It is possible to add more, but be aware that adding too many pages may cause the PR checks to time out.
 
 More on lighthouse-ci: https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md