✨ sponsors

Author: GautierDele

app/app.config.ts

@@ -20,12 +20,14 @@ export default defineAppConfig({
     },
     search: true,
     colorMode: true,
-    links: [{
-      'icon': 'i-mdi-github',
-      'to': 'https://github.com/Lomkit/laravel-rest-api',
-      'target': '_blank',
-      'aria-label': 'Laravel Rest Api on Github'
-    }]
+    links: [
+        {
+        'icon': 'i-mdi-github',
+        'to': 'https://github.com/Lomkit/laravel-rest-api',
+        'target': '_blank',
+        'aria-label': 'Laravel Rest Api on Github'
+      }
+    ]
   },
   footer: {
     credits: 'Copyright © ' + (new Date().getFullYear()),
@@ -49,5 +51,14 @@ export default defineAppConfig({
         target: '_blank'
       }]
     }
+  },
+  sponsors: {
+    title: 'Sponsors',
+    links: [{
+      icon: 'i-mdi-hand-heart-outline',
+      label: 'Become a sponsor',
+      to: 'https://github.com/sponsors/GautierDele',
+      target: '_blank'
+    }]
   }
 })

app/components/Sponsors/Ads.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const sponsor = useSponsors()
+</script>
+
+<template>
+  <div class="space-y-3">
+    <UPageCard :to="sponsor.link" target="_blank" :ui="{ header: { padding: 'p-0 sm:p-0' }, rounded: 'rounded', body: { padding: 'p-2 sm:p-2', base: 'text-center' } }">
+      <template #header>
+        <div class="px-2 py-2">
+          <UColorModeImage :dark="sponsor.logo.dark" :light="sponsor.logo.light" :alt="sponsor.name" />
+        </div>
+      </template>
+      <p class="text-sm dark:text-gray-400 text-gray-500 pb-1">
+        {{ sponsor.text }}
+      </p>
+    </UPageCard>
+  </div>
+</template>

app/composables/useSponsors.ts

@@ -0,0 +1,23 @@
+export const useSponsors = () => {
+    const sponsors = [{
+        name: 'XEFI',
+        text: 'French leader in IT performance support',
+        logo: {
+            light: '/sponsors/xefi-light.png',
+            dark: '/sponsors/xefi-dark.png',
+        },
+        link: 'https://xefi.com'
+    }]
+
+    function getRandomElement<T>(arr: T[]): T | undefined {
+        if (arr.length === 0) {
+            return undefined;
+        }
+
+        const randomIndex = Math.floor(Math.random() * arr.length);
+
+        return arr[randomIndex];
+    }
+
+    return computed(() => getRandomElement(sponsors));
+}

app/pages/[...slug].vue

@@ -6,7 +6,7 @@ definePageMeta({
 })
 
 const route = useRoute()
-const { toc, seo } = useAppConfig()
+const { toc, seo, sponsors } = useAppConfig()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
 if (!page.value) {
@@ -87,6 +87,18 @@ const links = computed(() => [toc?.bottom?.edit && {
               :title="toc.bottom.title"
               :links="links"
             />
+
+            <UDivider
+                v-if="sponsors?.length"
+                type="dashed"
+            />
+
+            <UPageLinks
+                :title="sponsors.title"
+                :links="sponsors.links"
+            />
+
+            <SponsorsAds />
           </div>
         </template>
       </UContentToc>