opengraph

config/autoload/local.php.dist

@@ -34,7 +34,7 @@ $app = [
         'title'       => 'Dotkernel | Headless Platform for modern web application',
         'description' => 'Dotkernel is a Headless Platform for building modern web applications '
             . 'using a collection of applications (skeletons).',
-        'image'       => $baseUrl . '/uploads/opengraph/dotkernel.png',
+        'image'       => $baseUrl . '/opengraph/dotkernel.png',
         'type'        => 'website',
         'siteName'    => 'Dotkernel',
         'locale'      => 'en_US',

src/App/templates/app/index.html.twig

@@ -71,7 +71,7 @@
                 </div>
 
                 <div class="trait">
-                    <img class="icon icon-lg" decoding="async" src="{{ asset('images/app/content/speed-radar-50.svg') }}" alt="" loading="lazy">
+                    <img class="icon icon-lg" decoding="async" src="{{ asset('images/app/content/speed-radar-50.svg') }}" alt="One domain, three deployables" loading="lazy">
                     <p>One domain, three deployables</p>
                 </div>
 

src/App/templates/partial/meta.html.twig

@@ -5,7 +5,7 @@
     <meta name="theme-color" content="#ffffff">
     <title>{{ meta.title ?? meta.name ?? app.meta.title }}</title>
     <meta name="description"         content="{{ (meta.description ?? meta.excerpt ?? app.meta.description) }}"/>
-    <meta property="og:title"        content="{{ meta.title ?? app.meta.title }}"/>
+    <meta property="og:title"        content="{{ meta.title ?? meta.name ?? app.meta.title }}"/>
     <meta property="og:description"  content="{{ (meta.description ?? meta.excerpt ?? app.meta.description) }}"/>
     <meta property="og:image"        content="{{ ogImage ? (app.url ~ ogImage) : app.meta.image }}"/>
     <meta property="og:type"         content="{{ meta.type ?? app.meta.type }}"/>
@@ -16,4 +16,4 @@
     <meta name="twitter:site"        content="{{ app.meta.twitterSite }}"/>
     <meta name="twitter:title"       content="{{ meta.title ?? meta.name ?? app.meta.title }}"/>
     <meta name="twitter:description" content="{{ (meta.description ?? meta.excerpt ?? app.meta.description) }}"/>
-    <meta name="twitter:image"       content="{{ meta.image ?? app.meta.image }}"/>
+    <meta name="twitter:image"       content="{{ ogImage ? (app.url ~ ogImage) : app.meta.image }}"/>

src/Page/templates/page/about.html.twig

@@ -5,6 +5,7 @@
     title: 'About us | The team behind Dotkernel',
     description: 'Dotkernel is built by the dev team at Apidemia - a team that reviews every change together, '
         ~ 'gives its work back to the PHP community under MIT, and puts guardrails around the tools it adopts.',
+    openGraphImage: '/opengraph/pages/twitter-card-about-dk.com.png',
 } %}
 
 {% block title %}About Us{% endblock %}
@@ -93,28 +94,6 @@
                 </div>
             </div>
         </div>
-        <div class="wrap hero-art-row">
-            <figure class="hero-art">
-                <figcaption>One team, one codebase</figcaption>
-                <svg viewBox="0 0 1180 200" role="img" aria-label="Six contributors connected to one shared codebase at the centre">
-                    <rect x="450" y="62" width="280" height="76" rx="12"/>
-                    <line class="art-faint" x1="480" y1="88" x2="700" y2="88"/>
-                    <line class="art-faint" x1="480" y1="112" x2="640" y2="112"/>
-                    <path class="art-accent" d="M450 82 C 320 82 250 40 90 40"/>
-                    <path class="art-accent" d="M450 100 H 90"/>
-                    <path class="art-accent" d="M450 118 C 320 118 250 160 90 160"/>
-                    <path class="art-accent" d="M730 82 C 860 82 930 40 1090 40"/>
-                    <path class="art-accent" d="M730 100 H 1090"/>
-                    <path class="art-accent" d="M730 118 C 860 118 930 160 1090 160"/>
-                    <circle class="art-accent" cx="70" cy="40" r="13"/>
-                    <circle class="art-accent" cx="70" cy="100" r="13"/>
-                    <circle class="art-accent" cx="70" cy="160" r="13"/>
-                    <circle class="art-accent" cx="1110" cy="40" r="13"/>
-                    <circle class="art-accent" cx="1110" cy="100" r="13"/>
-                    <circle class="art-accent" cx="1110" cy="160" r="13"/>
-                </svg>
-            </figure>
-        </div>
     </section>
 
     <section class="what-is-platform">

src/Page/templates/page/admin.html.twig

@@ -5,6 +5,7 @@
     title: 'Dotkernel Admin | Open-source PHP admin application',
     description: 'Dotkernel Admin is an open-source admin application (skeleton) built on Mezzio, Laminas and Doctrine. '
         ~ 'Table-based record management, RBAC guards, CSRF-protected forms and 2FA, over the same Core as Dotkernel API.',
+    openGraphImage: '/opengraph/pages/twitter-card-admin.png',
 } %}
 
 {% block title %}Dotkernel Admin{% endblock %}

src/Page/templates/page/api.html.twig

@@ -5,6 +5,7 @@
     title: 'Dotkernel API | Open-source REST API skeleton for PHP',
     description: 'Dotkernel API is an open-source REST API skeleton built on Mezzio, Laminas and Doctrine. '
         ~ 'OAuth2, RBAC, HAL, problem details and OpenAPI 3.0 come wired together on install. MIT licensed.',
+    openGraphImage: '/opengraph/pages/twitter-card-api.png',
 } %}
 
 {% block title %}Dotkernel API{% endblock %}

src/Page/templates/page/architecture.html.twig

@@ -5,6 +5,7 @@
     title: 'Architecture | How a request moves through a Dotkernel application',
     description: 'The PSR-15 middleware pipeline behind Dotkernel API, stage by stage: error boundary, routing, '
         ~ 'content negotiation, deprecation headers, OAuth 2.0, RBAC and dispatch - plus the library flow underneath it.',
+    openGraphImage: '/opengraph/pages/twitter-card-architecture.png',
 } %}
 
 {% block title %}Architecture{% endblock %}
@@ -116,41 +117,6 @@
                 </div>
             </div>
         </div>
-        <div class="wrap hero-art-row">
-            <figure class="hero-art">
-                <figcaption>Nineteen stages, folded</figcaption>
-                <svg viewBox="0 0 1180 200" role="img" aria-label="Nineteen pipeline stages running left to right, grouped into five phases">
-                    <line class="art-accent" x1="20" y1="104" x2="1160" y2="104"/>
-                    <line class="art-hot" x1="20" y1="88" x2="20" y2="120"/>
-                    <line x1="80" y1="92" x2="80" y2="116"/>
-                    <line x1="140" y1="92" x2="140" y2="116"/>
-                    <line x1="200" y1="92" x2="200" y2="116"/>
-                    <line x1="260" y1="92" x2="260" y2="116"/>
-                    <line x1="320" y1="92" x2="320" y2="116"/>
-                    <line x1="380" y1="92" x2="380" y2="116"/>
-                    <line x1="440" y1="92" x2="440" y2="116"/>
-                    <line x1="500" y1="92" x2="500" y2="116"/>
-                    <line x1="560" y1="92" x2="560" y2="116"/>
-                    <line x1="620" y1="92" x2="620" y2="116"/>
-                    <line x1="680" y1="92" x2="680" y2="116"/>
-                    <line x1="740" y1="92" x2="740" y2="116"/>
-                    <line x1="800" y1="92" x2="800" y2="116"/>
-                    <line x1="860" y1="92" x2="860" y2="116"/>
-                    <circle class="art-dot" cx="920" cy="104" r="6"/>
-                    <line x1="980" y1="92" x2="980" y2="116"/>
-                    <line x1="1040" y1="92" x2="1040" y2="116"/>
-                    <line x1="1100" y1="92" x2="1100" y2="116"/>
-                    <line x1="1160" y1="88" x2="1160" y2="120"/>
-                    <path class="art-faint" d="M20 76 v-30 h40 v30"/>
-                    <path class="art-faint" d="M80 76 v-30 h260 v30"/>
-                    <path class="art-faint" d="M360 76 v-30 h260 v30"/>
-                    <path class="art-faint" d="M640 76 v-30 h260 v30"/>
-                    <path class="art-faint" d="M920 76 v-30 h240 v30"/>
-                    <line class="art-faint" x1="1160" y1="158" x2="46" y2="158"/>
-                    <path class="art-faint" d="M54 150 l-9 8 l9 8"/>
-                </svg>
-            </figure>
-        </div>
     </section>
 
     <section class="what-is-platform">

src/Page/templates/page/dotboost.html.twig

@@ -5,6 +5,7 @@
     title: 'dotboost | Claude Code configuration for Dotkernel projects',
     description: 'dotboost is a drop-in .claude/ directory that teaches Claude Code the conventions of any Dotkernel '
         ~ 'application - ten commands, seventeen skills, six hooks, and permission guardrails that keep secrets out of the context.',
+    openGraphImage: '/opengraph/pages/twitter-card-dotboost.png',
 } %}
 
 {% block title %}dotboost{% endblock %}

src/Page/templates/page/frontend.html.twig

@@ -5,6 +5,7 @@
     title: 'Dotkernel Frontend | Server-rendered PHP web starter',
     description: 'Dotkernel Frontend is a web starter skeleton on Mezzio and Laminas - user accounts, a contact form, '
         ~ 'RBAC guards, CSRF-protected forms, flash messages and GDPR account anonymization, server-rendered in Twig.',
+    openGraphImage: '/opengraph/pages/twitter-card-frontend.png',
 } %}
 
 {% block title %}Dotkernel Frontend{% endblock %}

src/Page/templates/page/light.html.twig

@@ -5,6 +5,7 @@
     title: 'Dotkernel Light | Minimal PSR-15 site skeleton for PHP',
     description: 'Dotkernel Light is a minimal PSR-15 application skeleton on Mezzio and Laminas, for presentation '
         ~ 'sites and small services. Six direct dependencies, Twig templating, Vite assets, no database layer.',
+    openGraphImage: '/opengraph/pages/twitter-card-light.png',
 } %}
 
 {% block title %}Dotkernel Light{% endblock %}

src/Page/templates/page/queue.html.twig

@@ -5,6 +5,7 @@
     title: 'Dotkernel Queue | Asynchronous task queue for PHP',
     description: 'Dotkernel Queue runs time-consuming work on background workers instead of inside the request cycle. '
         ~ 'A Swoole TCP daemon, Valkey streams and Symfony Messenger, with retries, a dead letter queue and reporting commands.',
+    openGraphImage: '/opengraph/pages/twitter-card-queue.png',
 } %}
 
 {% block title %}Dotkernel Queue{% endblock %}

src/Page/templates/page/wsl2.html.twig

@@ -5,6 +5,7 @@
     title: 'Development Environment | AlmaLinux 10 on WSL 2',
     description: 'AlmaLinux 10 on WSL 2 for a RHEL-compatible local stack. One Ansible playbook installs PHP, Apache, '
         ~ 'MariaDB, Composer, Node.js and phpMyAdmin, and provisions a virtualhost for every project you add.',
+    openGraphImage: '/opengraph/pages/twitter-card-wsl2.png',
 } %}
 
 {% block title %}Development Environment{% endblock %}