Merge pull request #26 from fumeapp/og-image

✨ proper og images

app/components/OgImage/OgLogo.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="w-full h-full bg-black">
+    <div class="w-full h-full flex items-center justify-center bg-sky-950/30">
+      <svg
+        class="absolute right-0 top-0"
+        width="629"
+        height="593"
+        viewBox="0 0 629 593"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_f_199_94966)">
+          <path
+            d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+            fill="#38bdf8"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_199_94966"
+            x="0.873535"
+            y="-659"
+            width="1255.25"
+            height="1251.52"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="40.5" result="effect1_foregroundBlur_199_94966" />
+          </filter>
+        </defs>
+      </svg>
+
+      <img src="/logo-text.png" width="900" class="opacity-80" alt="logo">
+    </div>
+  </div>
+</template>

app/components/OgImage/OgTitleDesc.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+/**
+ * @credits NuxtLabs <https://nuxtlabs.com/>
+ * @see https://github.com/nuxt/nuxt.com/blob/main/components/OgImage/Docs.vue
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+})
+
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full bg-black">
+    <div class="w-full h-full flex flex-col justify-center bg-sky-950/30">
+      <svg
+        class="absolute right-0 top-0"
+        width="629"
+        height="593"
+        viewBox="0 0 629 593"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_f_199_94966)">
+          <path
+            d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+            fill="#38bdf8"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_199_94966"
+            x="0.873535"
+            y="-659"
+            width="1255.25"
+            height="1251.52"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="40.5" result="effect1_foregroundBlur_199_94966" />
+          </filter>
+        </defs>
+      </svg>
+
+      <div class="w-[740px] pl-[100px]">
+        <p v-if="headline" class="uppercase text-[24px] text-sky-300 mb-4 font-semibold">
+          {{ headline }}
+        </p>
+        <h1 v-if="title" class="w-[600px] m-0 text-[75px] font-semibold mb-4 text-sky-200 flex items-center">
+          <span>{{ title }}</span>
+        </h1>
+        <p v-if="description" class="text-[32px] text-sky-300 leading-tight">
+          {{ description }}
+        </p>
+      </div>
+      <img src="/logo.png" width="340" height="340" class="absolute top-[130px] right-[90px] opacity-50" alt="logo">
+    </div>
+  </div>
+</template>

app/pages/index.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
-const { loggedIn } = useUserSession()
+const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+
+if (!page.value)
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+
+useSeoMeta({
+  titleTemplate: '',
+  title: page.value.title,
+  ogTitle: page.value.title,
+  description: page.value.description,
+  ogDescription: page.value.description,
+})
+defineOgImageComponent('OgLogo')
 </script>
 
 <template>
-  <layout-login />
+  <div>
+    Landing page under construction
+  </div>
 </template>
 
 <style scoped></style>

app/pages/logo.vue

@@ -5,10 +5,9 @@ definePageMeta({
 </script>
 
 <template>
-  <div>
-    <div class="relative w-[800px] h-[800px]">
-      <header-logo />
-      <u-icon name="i-mdi-test-tube" class="w-1/2 h-1/2 text-primary-100 absolute bottom-0 right-0 mb-[10%]" />
+  <div class="w-screen h-screen flex items-center justify-center bg-black">
+    <div class="flex justify-center items-center space-x-6 bg-green-500 p-6">
+      <logo-bio class="w-52 h-52" />
     </div>
   </div>
 </template>

app/pages/terms.vue

@@ -4,14 +4,17 @@ if (!page.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
 
 useSeoMeta({
-  titleTemplate: '',
+  titleTemplate: '| fume.bio',
   title: page.value.title,
   ogTitle: page.value.title,
   description: page.value.description,
   ogDescription: page.value.description,
 })
 
-console.log(page)
+defineOgImageComponent('OgTitleDesc', {
+  title: page.value.title,
+  description: page.value.description,
+})
 </script>
 
 <template>

content/0.index.yml

@@ -1,2 +1,2 @@
-title: Welcome to Fume Bio
-description: Fume Bio helps you track your medicinal intake with your supplier
+title: fume.bio
+description: fume.bio provides tools, information, and products related to weight loss

content/terms.md

@@ -1,10 +1,11 @@
 ---
-title: Terms of Service | fume.bio
-description: TERMS AND CONDITIONS  Last updated September 02, 2023
+headline: terms
+title: terms of service
+description: fume.bio terms of service agreement last updated September 02, 2024
 ---
 
 #  Terms of Service
-##  Last updated September 02, 2023
+##  Last updated September 02, 2024
 
 AGREEMENT TO OUR LEGAL TERMS   We are fume.bio (“Company,” “we,” “us,” “our”).   We operate the website https://fume.bio (the “Site”), as well as any other related products and services that refer or link to these legal terms (the “Legal Terms”) (collectively, the “Services”).   You can contact us by email at [email protected].   These Legal Terms constitute a legally binding agreement made between you, whether personally or on behalf of an entity (“you”), and eropeptides.com, concerning your access to and use of the Services. You agree that by accessing the Services, you have read, understood, and agreed to be bound by all of these Legal Terms. IF YOU DO NOT AGREE WITH ALL OF THESE LEGAL TERMS, THEN YOU ARE EXPRESSLY PROHIBITED FROM USING THE SERVICES AND YOU MUST DISCONTINUE USE IMMEDIATELY.   We will provide you with prior notice of any scheduled changes to the Services you are using. The modified Legal Terms will become effective upon posting or notifying you by [email protected], as stated in the email message. By continuing to use the Services after the effective date of any changes, you agree to be bound by the modified terms.     We recommend that you print a copy of these Legal Terms for your records.
 

nuxt.config.ts

@@ -1,16 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  // devtools: { enabled: true },
+  devtools: { enabled: true },
   extends: ['@nuxt/ui-pro'],
-  modules: [
-    '@nuxt/ui',
-    '@prisma/nuxt',
-    '@nuxt/eslint',
-    '@nuxt/content',
-    '@nuxt/image',
-    'nuxt-auth-utils',
-    '@nuxt/test-utils',
-  ],
+  modules: ['@nuxt/ui', '@prisma/nuxt', '@nuxt/eslint', '@nuxt/content', '@nuxt/image', 'nuxt-auth-utils', '@nuxt/test-utils', 'nuxt-og-image'],
+  site: {
+    url: 'https://fume.bio',
+  },
   eslint: {
     config: {
       standalone: false,
@@ -60,7 +55,7 @@ export default defineNuxtConfig({
   vite: {
     resolve: {
       alias: {
-        '.prisma/client/index-browser': './node_modules/.pnpm/@[email protected].0_prisma@5.19.0/node_modules/.prisma/client/index-browser.js',
+        '.prisma/client/index-browser': './node_modules/.pnpm/@[email protected].1_prisma@5.19.1/node_modules/.prisma/client/index-browser.js',
       },
     },
   },

package.json

@@ -41,6 +41,7 @@
     "happy-dom": "^15.6.0",
     "nuxt": "^3.13.0",
     "nuxt-auth-utils": "^0.3.5",
+    "nuxt-og-image": "3.0.0-rc.66",
     "prisma": "^5.19.0",
     "ua-parser-js": "^1.0.38",
     "vitest": "^2.0.5",