change meta structure

src/_data/meta.js

@@ -7,21 +7,23 @@ module.exports = {
   locale: 'en_EN',
   lang: 'en',
   skipContent: 'Skip to content',
-  author: 'Lene Saile', // i.e. Lene Saile - page / blog author's name. Must be set.
+  author: {
-  authorAvatar: '/favicon.png', // for h-card, defaults to favicon
+    name: 'Lene Saile', // i.e. Lene Saile - page / blog author's name. Must be set.
-  authorEmail: '', // i.e. hola@lenesaile.com - email of the author
+    avatar: '/favicon.png',
-  authorWebsite: '', // i.e. https.://www.lenesaile.com - the personal site of the author
+    email: 'hola@lenesaile.com', // i.e. hola@lenesaile.com - email of the author
-  creator: 'Lene Saile', // i.e. Lene Saile - creator's (developer) name.
+    website: 'https.://www.lenesaile.com' // i.e. https.://www.lenesaile.com - the personal site of the author
-  creatorEmail: 'hola@lenesaile.com', // i.e. hola@lenesaile.com
+  },
-  creatorWebsite: 'https://www.lenesaile.com', // i.e. https.://www.lenesaile.com
+  creator: {
-  creatorSocial: 'https://front-end.social/@lene', // i.e. https.://www.lenesaile.com
+    name: 'Lene Saile', // i.e. Lene Saile - creator's (developer) name.
+    email: 'hola@lenesaile.com',
+    website: 'https://www.lenesaile.com',
+    social: 'https://front-end.social/@lene'
+  },
   themeColor: '#DD4462', //  Manifest: defines the default theme color for the application
   themeBgColor: '#FBFBFB', // Manifest: defines a placeholder background color for the application page to display before its stylesheet is loaded
-  meta_data: {
+  opengraph_default: '/assets/images/template/opengraph-default.jpg', // fallback/default meta image
-    opengraph_default: '/assets/images/template/opengraph-default.jpg', // fallback/default meta image
+  opengraph_default_alt:
-    opengraph_default_alt:
+    'Visible content: Eleventy starter based on workflow for Cube CSS, Every Layout, Design Tokens and Tailwind for uitility, based on the concepts explained in buildexcellentwebsit.es', // alt text for default meta image
-      'Visible content: Eleventy starter based on workflow for Cube CSS, Every Layout, Design Tokens and Tailwind for uitility, based on the concepts explained in buildexcellentwebsit.es' // alt text for default meta image
-  },
   blog: {
     // this is for the rss feed
     name: 'My Web Development Blog',

src/_includes/partials/meta-info.njk

@@ -48,12 +48,12 @@
   content="{{ meta.url }}{% if (layout == 'post') %}/assets/og-images/{{
     title | slugify
   }}-preview.jpeg
-  {% else %}{{ meta.meta_data.opengraph_default }}
+  {% else %}{{ meta.opengraph_default }}
   {% endif %}"
 />
 <meta
   property="og:image:alt"
-  content="{% if (layout == 'post') %}{% else %}{{ meta.meta_data.opengraph_default_alt }}
+  content="{% if (layout == 'post') %}{% else %}{{ meta.opengraph_default_alt }}
 {% endif %}"
 />
 <meta
@@ -64,7 +64,7 @@
 />
 <meta property="og:site_name" content="{{ meta.siteName }}" />
 <meta property="og:locale" content="{{ meta.locale }}" />
-<meta property="article:author" content="{{ meta.author }}" />
+<meta property="article:author" content="{{ meta.author.name }}" />
 
 <!-- Twitter specific head data was removed in v2 -->
 

src/_includes/schemas/blogpost-schema.njk

@@ -11,16 +11,16 @@
     "@id": "{{ url }}",
     "headline": "{{ title or meta.siteName }}",
     "description": "{{ discover.description or description or meta.siteDescription }}",
-    "image": "{{ meta.url }}{% if discover.image %}/assets/images/{{ discover.image }}{% else %}{{ meta.meta_data.opengraph_default }}{% endif %}",
+    "image": "{{ meta.url }}{% if discover.image %}/assets/images/{{ discover.image }}{% else %}{{ meta.opengraph_default }}{% endif %}",
     "inLanguage": "{{ meta.locale }}",
     "publisher": {
       "@type": "{{ meta.siteType }}",
-      "name": "{{ meta.author }}",
+      "name": "{{ meta.author.name }}",
       "url": "{{ meta.url }}"
     },
     "author": {
       "@type": "Person",
-      "name": "{{ meta.author }}"
+      "name": "{{ meta.author.name }}"
     },
     "datePublished": "{{ date | toIsoString }}"
   }

src/_layouts/post.njk

@@ -35,11 +35,11 @@ schema: blog
   <!--  h-card infos: https://indieweb.org/authorship -->
   <div hidden class="h-entry">
     <a class="u-url" href="{{ page.url | url | absoluteUrl(meta.url) }}">{{ title }}</a>
-    <a class="p-name u-url" rel="author" href="{{ meta.url }}">{{ meta.author }}</a>
+    <a class="p-name u-url" rel="author" href="{{ meta.url }}">{{ meta.author.name }}</a>
     <img
       class="u-author h-card"
-      src="{{ meta.authorAvatar | url | absoluteUrl(meta.url) }}"
+      src="{{ meta.author.avatar | url | absoluteUrl(meta.url) }}"
-      alt="{{ meta.author }}"
+      alt="{{ meta.author.name }}"
     />
   </div>
 </article>

src/common/404.md

@@ -12,4 +12,4 @@ noindex: true
 [Please try visiting the home page!](/)
 
 Please let me know if you encounter more errors:
-<a href="mailto:{{ meta.creatorEmail }}">{{ meta.creatorEmail }}</a>
+<a href="mailto:{{ meta.creator.email }}">{{ meta.creator.email }}</a>

src/common/feed.njk

@@ -13,8 +13,8 @@ excludeFromSitemap: true
   <updated>{{ postslist | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
   <id>{{ meta.url }}/</id>
   <author>
-    <name>{{ meta.author }}</name>
+    <name>{{ meta.author.name }}</name>
-    <email>{{ meta.authorEmail }}</email>
+    <email>{{ meta.author.email }}</email>
   </author>
   {%- for post in postslist %} {%- set absolutePostUrl = post.url | absoluteUrl(meta.url)
   %}

src/common/humans.njk

@@ -3,13 +3,12 @@ permalink: /humans.txt
 eleventyExcludeFromCollections: true
 excludeFromSitemap: true
 ---
-
 /* TEAM */
-Developer: {{ meta.creator }}
+Developer: {{ meta.creator.name }}
-Contact: {{ meta.creatorEmail }}
+Contact: {{ meta.creator.email }}
-Site: {{ meta.creatorWebsite }}
+Site: {{ meta.creator.website }}
-{% if meta.creatorSocial %}
+{% if meta.creator.social %}
-Find me on: {{ meta.creatorSocial }}{% endif %}
+Find me on: {{ meta.creator.social }}{% endif %}
 
 /* SITE */
 Doctype: HTML5

src/posts/2023-01-25-opengraph-images.md

@@ -21,12 +21,12 @@ The fallback and default image for all other pages is the image set as `opengrap
 <meta
   property="og:image"
   content="{{ meta.url }}
-  {% if (layout == 'post') %}/assets/images/social-preview/{{ title | slugify }}-preview.jpeg
+  {% if (layout == 'post') %}/assets/og-images/{{ title | slugify }}-preview.jpeg
-  {% else %}{{ meta.meta_data.opengraph_default }}
+  {% else %}{{ meta.opengraph_default }}
   {% endif %}"
 />
 ```
 
 {% endraw %}
 
-To change the look and behaviour of those images and replace the SVG background edit `src/social-preview.njk`. The implementation is based on [Bernard Nijenhuis article](https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/).
+To change the look and behaviour of those images and replace the SVG background edit `src/common/og-images.njk`. The implementation is based on [Bernard Nijenhuis article](https://bnijenhuis.nl/notes/automatically-generate-open-graph-images-in-eleventy/).