add thumbnail field

.eleventy.js

@@ -145,6 +145,37 @@ module.exports = async function(eleventyConfig) {
   return `${picture}`;
   });
 
+  // image path for meta tags
+  eleventyConfig.addNunjucksAsyncShortcode("getOGImageUri", async (page src) => {
+    if (!src) return "/img/tete-2006.png";
+
+    let inputFolder = page.inputPath.split("/")
+    inputFolder.pop()
+    inputFolder = inputFolder.join("/");
+    const imageSrc = inputFolder+"/"+src;
+
+    let urlPath = page.outputPath.split("/")
+    urlPath.pop()
+    urlPath.shift()
+    urlPath = "/" + urlPath.join("/");
+
+    // TODO: limit to a certain max height 200x200 min 1200×1200 max
+    let metadata = await Image(imageSrc, {
+      widths: [1200],
+      formats: ["webp"],
+      urlPath: urlPath,
+      outputDir: `./_site/${page.url}`,
+      filenameFormat: function (id, src, width, format, options) {
+        const extension = path.extname(src);
+        const name = path.basename(src, extension);
+        return `${name}-og.${format}`;
+      }
+    })
+
+    const data = metadata.webp[0]
+    // data.url might be /blog/hello-world/xfO_genLg4-600.jpeg
+    return data.url
+  })
 
   // Collections 
   eleventyConfig.addCollection("documentation", function (collection) {

src/_assets/public/admin/config.yml

@@ -9,7 +9,7 @@
 backend:
   name: github
   repo: aloxe/huwindty # Path to your GitHub repository
-  branch: ecrire
+  branch: seo-fields
   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
@@ -49,21 +51,26 @@ collections:
       - label: "description"
         name: "description"
         widget: "string"
-        picker_utc: false
+        required: false
       - label: "tags"
         name: "tags"
         widget: "string"
-        picker_utc: false
+        required: false
       - label: "author"
         name: "author"
         widget: "string"
-        picker_utc: false
+        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

src/_layouts/includes/head.njk

@@ -1,5 +1,5 @@
 <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" />
 <link rel="icon" type="image/png" href="{{ '/favicon.ico' }}" />
@@ -9,26 +9,36 @@
   <link rel="canonical" href="{{ meta.url }}{{ page.data.permalink or page.url | url }}" />
 {% endif %}
 
-<title>
-  {{ title or meta.title }}
-</title>
-  <meta name="description" content="{{ description }}">
+<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="thumbnail" content="{{ meta.url }}{{ thumbnail }}">{% endif %}
+
+  {% if thumbnail %}<meta itemprop="image" content="{{ meta.url }}{% getOGImageUri page, image %}">{% 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 }}{{ thumbnail }}">{% endif %}
 
-  <meta name="fediverse:creator" content="{{ meta.author.fediverse }}" />
+  {% 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 }}{{ thumbnail }}">{% endif %}
   <meta name="twitter:card" content="summary_large_image">
 {% endif %}
 

src/pages/documentation/index.md

@@ -4,6 +4,7 @@ title: Documentation
 headline: How Huwindty works and how to install it
 description: Documentation for Huwindty.
 ismarkdown: true
+thumbnail: /static/img/vera.jpg
 ---
 ## Table of content