docs: 📝 Removed oidc logo and seo improvements (#77)

* docs(docs): 📝  Removed oidc logo from nuxt oidc auth

* docs(seo): ✨  Improved seo for several pages and assets

Author: itpropro

README.md

@@ -1,4 +1,4 @@
-[![nuxt-oidc-auth-social-card](https://github.com/itpropro/nuxt-oidc-auth/assets/15030951/41173d50-afd4-4d1e-8cd0-e377d7f7effc)](https://nuxt.com/modules/nuxt-oidc-auth)
+[![nuxt-oidc-auth-social-card](https://github.com/user-attachments/assets/77ab04f8-7823-4dee-bae4-841e46357d6e)](https://nuxt.com/modules/nuxt-oidc-auth)
 
 # Nuxt OIDC Auth
 

docs/app/app.config.ts

@@ -16,7 +16,7 @@ export default defineAppConfig({
     logo: {
       alt: '~/assets/nuxt-oidc-auth.png',
       light: '~/assets/nuxt-oidc-auth.png',
-      dark: '~/assets/nuxt-oidc-auth.png',
+      dark: '~/assets/nuxt-oidc-auth-dark.png',
     },
     search: true,
     colorMode: true,

docs/app/assets/nuxt-oidc-auth-dark.png

@@ -14,7 +14,8 @@ const currentVersion = computed(() => data.value?.release?.tag || 'v0.19.0')
   <UHeader>
     <template #logo>
       <div class="flex gap-3 items-center">
-        <img src="~/assets/nuxt-oidc-auth.svg" class="w-auto h-8">
+        <img src="~/assets/nuxt-oidc-auth.png" class="w-auto h-8 dark:hidden">
+        <img src="~/assets/nuxt-oidc-auth-dark.png" class="w-auto h-8 hidden dark:block">
         <span class="hidden sm:block">
           Nuxt OIDC Auth
         </span>

docs/app/assets/nuxt-oidc-auth-dark.svg

@@ -42,7 +42,6 @@ const logoStyle = computed(() => ({
 }))
 
 const unlocked = ref(false)
-const ready = useTimeout(300)
 </script>
 
 <template>
@@ -78,14 +77,25 @@ const ready = useTimeout(300)
       </template>
 
       <div>
-        <div class="[perspective:600px] mb-32 group">
-          <div ref="target" class="h-48 max-w-64 mx-auto" :style="cardStyle">
-            <img :class="unlocked ? 'opacity-100' : 'opacity-40'" class="absolute left-0 top-0 h-full w-full" src="~/assets/browser.svg" :style="browserStyle">
-            <img :class="unlocked ? 'opacity-0' : 'opacity-100'" class="absolute left-0 h-32 top-8 w-full" src="~/assets/nuxt-oidc-auth.svg" :style="logoStyle">
-            <button class="absolute w-full h-full" @click="unlocked = !unlocked" />
+        <ClientOnly>
+          <div class="[perspective:600px] mb-32 group">
+            <div ref="target" class="h-48 max-w-64 mx-auto" :style="cardStyle">
+              <img loading="lazy" alt="browser" :class="unlocked ? 'opacity-100' : 'opacity-40'" class="absolute left-0 top-0 h-full w-full" src="~/assets/browser.svg" :style="browserStyle">
+              <img loading="lazy" alt="lock-sign" :class="unlocked ? 'opacity-0' : 'opacity-100'" class="absolute left-0 h-32 top-8 w-full" src="~/assets/nuxt-oidc-auth.svg" :style="logoStyle">
+              <button name="nuxt-oidc-auth-unlock" class="absolute w-full h-full" @click="unlocked = !unlocked" />
+            </div>
+            <div class="transition-all duration-300 ease-out h-2 absolute group-hover:shadow-[0px_70px_32px_4px_rgba(0,220,130,0.75)] shadow-[0px_70px_33px_3px_rgba(0,220,130,0.75)] bottom-0 lg:left-[27.5%] left-[35%] w-[30%] lg:w-[45%] bg-slate-700" :style="shadowStyle" />
           </div>
-          <div :class="ready ? 'transition-all' : 'transition-transform'" class="duration-300 ease-out h-2 absolute group-hover:shadow-[0px_70px_32px_4px_rgba(0,220,130,0.75)] shadow-[0px_70px_33px_3px_rgba(0,220,130,0.75)] bottom-0 lg:left-[27.5%] left-[35%] w-[30%] lg:w-[45%] bg-slate-700" :style="shadowStyle" />
-        </div>
+          <template #fallback>
+            <div class="[perspective:600px] mb-32 group">
+              <div ref="target" class="h-48 max-w-64 mx-auto">
+                <img loading="lazy" alt="browser" :class="unlocked ? 'opacity-100' : 'opacity-40'" class="absolute left-0 top-0 h-full w-full" src="~/assets/browser.svg">
+                <img loading="lazy" alt="lock-sign" :class="unlocked ? 'opacity-0' : 'opacity-100'" class="absolute left-0 h-32 top-8 w-full" src="~/assets/nuxt-oidc-auth.svg">
+                <button class="absolute w-full h-full" @click="unlocked = !unlocked" />
+              </div>
+            </div>
+          </template>
+        </ClientOnly>
         <MDC
           :value="page.hero.code"
           class="prose prose-primary dark:prose-invert mx-auto"