fix: better image support for blog posts

src/_includes/layout.njk

@@ -10,12 +10,12 @@
         <meta property="og:description" content="{{ description }}">
         <meta property="og:type" content="article">
         <meta property="og:url" content="{{ site.url }}{{ page.url }}">
-        <meta property="og:image" content="{{ image }}">
+        <meta property="og:image" content="{{ site.url }}{{ image }}">
         <!-- Twitter Card Meta Tags -->
         <meta name="twitter:card" content="summary_large_image">
         <meta name="twitter:title" content="{{ title }}">
         <meta name="twitter:description" content="{{ description }}">
-        <meta name="twitter:image" content="{{ image }}">
+        <meta name="twitter:image" content="{{ site.url }}{{ image }}">
         <!-- Structured Data (JSON-LD) -->
         <script type="application/ld+json">
             {
@@ -23,7 +23,7 @@
                 "@type": "BlogPosting",
                 "headline": "{{ title }}",
                 "description": "{{ description }}",
-                "image": "{{ image }}",
+                "image": "{{ site.url }}{{ image }}",
                 "author": {
                     "@type": "Person",
                     "name": "{{ site.author.name }}"

src/blog/8.14.25.md

@@ -7,8 +7,11 @@ description: "Stop configuring your new lab devices manually!"
 excerpt: "Stop configuring your new lab devices manually!"
 sitemapPriority: 0.5
 sitemapChangefreq: "never"
+image: "/assets/images/8.14.25/junos+opnsense.jpg"
 ---
 
+![Banner Image]({{ image }}#center)
+<br/>
 Most people know that DHCP (Dynamic Host Configuration Protocol) is a protocol used to dynamically allocate IP addresses. But did you know that it can be used to configure other host device settings? Network device vendors like Junip... *ermm*, HPE Networking... take advantage of DHCP to implement "Zero Touch Provisioning" and even perform software upgrades for out-of-the-box devices. Here I will show you how to use OPNsense with Dnsmasq DHCP to "auto-provision" your Junos devices.
 
 

src/blog/8.5.25.md

@@ -7,8 +7,10 @@ description: "First post made using Eleventy!"
 excerpt: Made using Eleventy!
 sitemapPriority: 0.5
 sitemapChangefreq: "never"
+image: "/assets/images/8.5.25/11ty.jpg"
 ---
-
+![Banner Image]({{ image }}#center)
+<br/>
 Welcome to my new blog! This is my very first post. This website was created using eleventy in a custom nodejs docker container, pretty cool huh?? Maybe I'll post the source code here one day!
 <br/>
 <br/>

src/css/style.css

@@ -98,6 +98,10 @@ article {
     line-height: 1.6;
     overflow-wrap: break-word;
 }
+article img[src*='#center'] {
+    display: block;
+    margin: auto;
+}
 article h1, article h2, article h3, article h4, article h5, article h6 {
     font-weight: 700;
     color: #f9fafb; /* White headings */