v10.0.0

.env.example

@@ -66,6 +66,7 @@ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 APP_AUTHOR="musimana"
 APP_COPYRIGHT="MIT (2024)"
 APP_DESCRIPTION="Laravel VILT stack template app with server-side rendering (SSR), Larastan, Pest & Dusk test suites. Created by Musimana."
+APP_IMAGE_OPEN_GRAPH="resources/img/open-graph.png"
 #APP_KEYWORDS="Musimana, Bassform, Laravel, VILT"
 APP_LINK_PROJECT_REPO="https://github.com/musimana/bassform"
 

README.md

@@ -1,5 +1,7 @@
 # Bassform - VILT SSR
 
+![Bassform - VILT SSR](resources/img/banner-readme.png)
+
 VILT stack template app for PHP 8.2.x created by Musimana. Features include server-side rendering (SSR) and Larastan, Pest & Dusk test suites.
 
 [Vue3](https://vuejs.org/),

app/Http/Controllers/Public/HomepageController.php

@@ -4,6 +4,7 @@
 
 use App\Http\Controllers\Controller;
 use App\Http\Resources\Views\Public\Content\HomepageContentResource;
+use App\Http\Resources\Views\Public\Metadata\HomepageMetadataResource;
 use App\Repositories\Views\PublicViewRepository;
 use Inertia\Response;
 
@@ -16,7 +17,8 @@ public function __invoke(): Response
     {
         return (new PublicViewRepository)->getViewDetails(
             self::TEMPLATE_PUBLIC_INDEX,
-            (new HomepageContentResource)->getItem()
+            (new HomepageContentResource)->getItem(),
+            (new HomepageMetadataResource)->getItem()
         );
     }
 }

app/Http/Resources/Views/Public/Metadata/HomepageMetadataResource.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources\Views\Public\Metadata;
+
+use App\Interfaces\Resources\Items\ConstantItemInterface;
+use Illuminate\Support\Facades\Vite;
+
+final class HomepageMetadataResource implements ConstantItemInterface
+{
+    /**
+     * Get the metadata array for the site homepage.
+     *
+     * @return array<string, string>
+     */
+    public function getItem(): array
+    {
+        return [
+            'openGraphImage' => Vite::asset(config('metadata.open_graph_image')),
+        ];
+    }
+}

config/metadata.php

@@ -37,6 +37,23 @@
 
     'description' => env('APP_DESCRIPTION', ''),
 
+    /*
+    |--------------------------------------------------------------------------
+    | Open Graph Image
+    |--------------------------------------------------------------------------
+    |
+    | The string for the filename of the image to be used for the app's
+    | Open Graph image. Should be in the resources/images directory, so it's
+    | included in Vite's asset bundling.
+    |
+    | Max size: 8MB, 1200px x 630px.
+    | [Open Graph Docs](https://ogp.me/)
+    | [Good Blog](https://kaydee.net/blog/open-graph-image/)
+    |
+    */
+
+    'open_graph_image' => env('APP_IMAGE_OPEN_GRAPH'),
+
     /*
     |--------------------------------------------------------------------------
     | Social Media Links

resources/js/Components/Icons/IconAppLogo.vue

@@ -7,8 +7,8 @@
     stroke="currentColor"
     stroke-width="1"
   >
-    <circle cx="512" cy="512" r="496" stroke-width="32" fill="none" />
+    <circle cx="512" cy="512" r="496" stroke-width="32" fill="none" stroke-linecap="round" stroke-linejoin="round" />
     <polygon points="488,128 896,203 536,188 536,248 848,302 536,293 536,674 491,680" />
-    <circle cx="332" cy="680" r="180" stroke-width="48" fill="none" />
+    <circle cx="332" cy="680" r="180" stroke-width="48" fill="none" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
 </template>

resources/js/Components/Sections/AppHead.vue

@@ -23,11 +23,11 @@ defineProps({
     <meta v-if="metadata?.canonical && metadata.canonical !== ''" name="canonical" :content="metadata.canonical" />
     <meta v-if="metadata?.keywords && metadata.keywords !== ''" name="keywords" :content="metadata.keywords" />
 
-    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" name="keywords" property="og:image" :content="metadata.openGraphImage" />
-    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" name="keywords" property="og:title" :content="metadata.title" />
-    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" name="keywords" property="og:description" :content="metadata.description" />
-    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" name="keywords" property="og:image:width" content="1200" />
-    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" name="keywords" property="og:image:height" content="630" />
+    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" property="og:image" :content="metadata.openGraphImage" />
+    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" property="og:title" :content="metadata.title" />
+    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" property="og:description" :content="metadata.description" />
+    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" property="og:image:width" content="1200" />
+    <meta v-if="metadata?.openGraphImage && metadata.openGraphImage !== ''" property="og:image:height" content="630" />
 
     <meta v-if="metadata?.twitterCardImage && metadata.twitterCardImage !== ''" name="twitter:card" content="summary_large_image" />
     <meta v-if="metadata?.twitterCardImage && metadata.twitterCardImage !== ''" name="twitter:title" :content="metadata.title" />

resources/js/Components/Sections/AppPanelLink.vue

@@ -12,7 +12,7 @@ defineProps({
 <template>
   <a
     :href="item.url"
-    class="relative grid grid-cols-1 scale-100 border-2 border-blue-600 dark:border-gray-200 p-8 bg-blue-800 bg-gradient-to-bl from-blue-300/80 via-blue-600 ring-1 ring-inset ring-gray-100/5 rounded-lg motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-blue-600 dark:focus:outline-gray-200"
+    class="relative grid grid-cols-1 scale-100 border-2 border-gray-400 dark:border-gray-200 p-8 bg-blue-800 bg-gradient-to-bl from-blue-300/80 via-blue-600 ring-1 ring-inset ring-gray-100/5 rounded-lg motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-blue-600 dark:focus:outline-gray-200"
   >
     <h3 class="text-gray-200 text-xl font-semibold">{{ item.title }}</h3>
 

resources/js/app.js

@@ -7,7 +7,7 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
 
 import.meta.glob([
-  '../images/**',
+  '../img/**',
 ])
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel'

resources/views/partials/head/default.blade.php

@@ -9,6 +9,15 @@
     <base href="{{ url('/') }}">
     <meta name="robots" content="index, follow" />
 
+    @if(config('metadata.open_graph_image'))
+    <!-- Open Graph Image -->
+    <meta property="og:image" content="{{ Vite::asset(config('metadata.open_graph_image')) }}" inertia />
+    <meta property="og:title" content="{{ config('metadata.title') }}" inertia />
+    <meta property="og:description" content="{{ config('metadata.description') }}" inertia />
+    <meta property="og:image:width" content="1200" inertia />
+    <meta property="og:image:height" content="630" inertia />
+    @endif
+
     @if(config('metadata.author'))
     <meta name="author" content="{{ config('metadata.author') }}" />
     @endif

tests/Feature/Http/Controllers/Public/HomepageControllerTest.php

@@ -2,8 +2,8 @@
 
 use App\Http\Controllers\Public\HomepageController;
 use App\Http\Resources\Views\DetailsViewResource;
-use App\Http\Resources\Views\MetadataViewResource;
 use App\Http\Resources\Views\Public\Content\HomepageContentResource;
+use App\Http\Resources\Views\Public\Metadata\HomepageMetadataResource;
 
 test('TEMPLATE_PUBLIC_INDEX Vue page component exists', function () {
     $template = (new ReflectionClassConstant(
@@ -33,7 +33,7 @@
 
     $data = (new DetailsViewResource)->getItem(
         (new HomepageContentResource)->getItem(),
-        (new MetadataViewResource)->getItem([])
+        (new HomepageMetadataResource)->getItem()
     );
 
     expect($actual)

tests/Unit/App/Http/Resources/Views/Public/Metadata/HomepageMetadataResourceTest.php

@@ -0,0 +1,20 @@
+<?php
+
+use App\Http\Resources\Views\Public\Metadata\HomepageMetadataResource;
+use App\Interfaces\Resources\Items\ConstantItemInterface;
+use Illuminate\Support\Facades\Vite;
+
+arch('it implements the expected interface')
+    ->expect(HomepageMetadataResource::class)
+    ->toImplement(ConstantItemInterface::class);
+
+test('getItem returns ok', function () {
+    $actual = (new HomepageMetadataResource)->getItem();
+
+    expect($actual)
+        ->toHaveCamelCaseKeys()
+        ->toHaveCount(1)
+        ->toMatchArray([
+            'openGraphImage' => Vite::asset(config('metadata.open_graph_image')),
+        ]);
+});