improve meta handling

HugoRCD · Nov 30, 2024 · b2ec24f · b2ec24f
1 parent 418c782
commit b2ec24f
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 55 deletions.
diff --git a/apps/base/components/Blur.vue b/apps/base/components/Blur.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="fixed inset-x-0 top-0 isolate h-24">
+    <div
+      style="-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[1px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[2px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[3px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[6px]"
+    />
+    <div
+      style="-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)"
+      class="absolute inset-0 gradient-mask-b-0 blur-[12px]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.gradient-mask-b-0 {
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 100%);
+}
+</style>
diff --git a/apps/base/components/ShelveMeta.vue b/apps/base/components/ShelveMeta.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+useScriptPlausibleAnalytics({
+  domain: 'shelve.cloud',
+  scriptInput: {
+    src: 'https://analytics.hrcd.fr/js/script.js',
+  }
+})
+
+const { title, link, description, ogImage } = useAppConfig()
+
+useHead({
+  title: title,
+  link: link,
+})
+
+useSeoMeta({
+  title,
+  description,
+  author: 'Hugo Richard',
+  twitterCreator: '@HugoRCD__',
+  twitterTitle: title,
+  twitterDescription: description,
+  twitterCard: 'summary_large_image',
+  twitterImage: ogImage,
+  ogUrl: 'https://shelve.cloud',
+  ogImage: ogImage,
+  ogSiteName: title,
+  ogTitle: title,
+  ogDescription: description
+})
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/apps/lp/app/app.vue b/apps/lp/app/app.vue
@@ -1,40 +1,11 @@
 <script setup lang="ts">
 import { Toaster } from 'vue-sonner'
-
-useScriptPlausibleAnalytics({
-  domain: 'shelve.cloud',
-  scriptInput: {
-    src: 'https://analytics.hrcd.fr/js/script.js',
-  }
-})
-
-const { title, link, description, ogImage } = useAppConfig()
-
-useHead({
-  title: title,
-  link: link,
-})
-
-useSeoMeta({
-  title,
-  description,
-  author: 'Hugo Richard',
-  twitterCreator: '@HugoRCD__',
-  twitterTitle: title,
-  twitterDescription: description,
-  twitterCard: 'summary_large_image',
-  twitterImage: ogImage,
-  ogUrl: 'https://shelve.cloud',
-  ogImage: ogImage,
-  ogSiteName: title,
-  ogTitle: title,
-  ogDescription: description
-})
 </script>
 
 <template>
   <Html lang="en">
-    <Body class="overscroll-y-none selection:bg-primary font-geist relative overflow-x-hidden bg-white text-black selection:text-inverted dark:bg-neutral-950 dark:text-white">
+    <Body class="overscroll-y-none selection:bg-primary font-geist overflow-x-hidden bg-white text-black selection:text-inverted dark:bg-neutral-950 dark:text-white">
+      <ShelveMeta />
       <UApp :tooltip="{ delayDuration: 0 }">
         <NuxtLayout>
           <NuxtPage />

diff --git a/apps/lp/app/components/layout/Navbar.vue b/apps/lp/app/components/layout/Navbar.vue
@@ -35,8 +35,8 @@ items.push(githubItem)
 
 <template>
   <div class="z-[99] relative">
+    <Blur />
     <div class="fixed top-0 flex w-full">
-      <div class="fixed w-full top-0 z-40 h-40 bg-gradient-to-b from-neutral-950 to-transparent" />
       <div class="z-50 flex w-full items-center justify-between sm:justify-around p-4 sm:px-5 sm:py-2">
         <Logo size="size-8" />
         <div class="flex items-center">

diff --git a/apps/shelve/app/app.vue b/apps/shelve/app/app.vue
@@ -1,29 +1,6 @@
 <script setup lang="ts">
 import { Toaster } from 'vue-sonner'
 
-const { title, link, description, ogImage } = useAppConfig()
-
-useHead({
-  title: title,
-  link: link,
-})
-
-useSeoMeta({
-  title,
-  description,
-  author: 'Hugo Richard',
-  twitterCreator: '@HugoRCD__',
-  twitterTitle: title,
-  twitterDescription: description,
-  twitterCard: 'summary_large_image',
-  twitterImage: ogImage,
-  ogUrl: 'https://shelve.cloud',
-  ogImage: ogImage,
-  ogSiteName: title,
-  ogTitle: title,
-  ogDescription: description
-})
-
 function setPrefersReducedMotion(reduceMotion: boolean) {
   if (reduceMotion) {
     document.documentElement.setAttribute('data-reduce-motion', 'reduce')
@@ -65,6 +42,7 @@ if (loggedIn.value && teams.value.length === 0)
 <template>
   <Html lang="en">
     <Body class="overscroll-y-none selection:bg-primary font-geist relative overflow-x-hidden bg-white text-black selection:text-inverted dark:bg-neutral-950 dark:text-white">
+      <ShelveMeta />
       <UApp :tooltip="{ delayDuration: 0 }">
         <NuxtLayout>
           <NuxtPage />