refactor: ♻️ use metagen for more metadata generation

src/layouts/base.njk

@@ -4,22 +4,30 @@
     {% metagen
         title=title + ' - Sebin\'s Blog',
         desc=description,
-        url=url + page.url,
+        url='https://blog.sebin-nyshkim.net' + page.url,
+        type=type,
+        site_name='Sebin\'s Blog',
+        og_image_width=image.width,
+        og_image_height=image.height,
+        og_image_alt=image.alt,
+        og_image_type=image.type,
         twitter_card_type=twitter.cardType,
         twitter_handle=twitter.account,
         name=author.name,
-        generator='eleventy'
+        generator='eleventy',
+        preconnect=['https://cdn.sebin-nyshkim.net'],
+        dns_prefetch=['https://cdn.sebin-nyshkim.net'],
+        css=['/fonts/tilt-warp/tilt-warp.css',
+             '/fonts/encode-sans/encode-sans.css',
+             '/fonts/m-plus-1-code/m-plus-1-code.css',
+             '/css/style.css',
+             '/css/prism.css']
     %}
     {% ogImage "og-image.og.njk", { title: title, author: author, image: image } %}
-    {% if mastodon.fediverseCreator %}
+    {% if mastodon.fediverseCreator and mastodon.fediverseCreator != '' %}
       <meta name="fediverse:creator" content="{{ mastodon.fediverseCreator }}" />
     {% endif %}
     <link rel="alternate" href="/feed.xml" title="Sebin's Blog" type="application/atom+xml">
-    <link rel="stylesheet" href="{{ '/fonts/tilt-warp/tilt-warp.css' | url }}">
-    <link rel="stylesheet" href="{{ '/fonts/encode-sans/encode-sans.css' | url }}">
-    <link rel="stylesheet" href="{{ '/fonts/m-plus-1-code/m-plus-1-code.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
-    <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
     <link rel="shortcut icon" href="/img/sebin.png" type="image/png">
     <link rel="me" href="https://meow.social/@SebinNyshkim">
   </head>

src/posts/2024-10-22_responsive-images-with-self-hosted-image-service-for-your-eleventy-blog.md

@@ -5,6 +5,9 @@ image:
   src: https://cdn.sebin-nyshkim.net/-iTHSLFBdpY
   alt: Close-up of SVG code on a computer screen
   credit: Photo by Florian Olivo on Unsplash
+  width: 1200
+  height: 630
+  type: 'image/png'
 tags: ["self-hosting", "docker", "eleventy"]
 ---
 

src/posts/2024-10-24_apple-clueless-about-ipad.md

@@ -4,6 +4,10 @@ description: Apple recently unveiled their refresh of the iPad mini. Most surpri
 image:
   src: https://cdn.sebin-nyshkim.net/-rtKd7CgZ6g
   alt: iOS face with swirly eyes emoji surrounded by a word cloud of Apple marketing jargon on red background with jagged lines
+  credit: Made with GIMP
+  width: 1200
+  height: 630
+  type: 'image/png'
 tags: ['apple']
 ---
 

src/posts/posts.json

@@ -2,7 +2,7 @@
   "layout": "blogpost.njk",
   "permalink": "/posts/{{ title | slugify }}/",
   "date": "git Created",
-  "url": "https://blog.sebin-nyshkim.net",
+  "type": "article",
   "author": {
     "name": "Sebin Nyshkim",
     "href": "https://blog.sebin-nyshkim.net",