feat(frontend): astro seo, images on features

KeziahMoselle · Apr 16, 2024 · 2e2d49b · 2e2d49b
1 parent c4a5483
commit 2e2d49b
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 61 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,6 +24,7 @@
     "@vueuse/core": "^10.9.0",
     "astro": "^4.5.17",
     "astro-purgecss": "^4.1.0",
+    "astro-seo": "^0.8.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lexical": "0.13.1",

diff --git a/frontend/public/builder.png b/frontend/public/builder.png
diff --git a/frontend/public/lore-graph-tree.png b/frontend/public/lore-graph-tree.png
diff --git a/frontend/src/components/molecules/CardImage.vue b/frontend/src/components/molecules/CardImage.vue
@@ -8,15 +8,14 @@ defineProps<{
 </script>
 
 <template>
-  <article
-    class="flex flex-col gap-2 bg-secondary border border-primary p-3 md:p-7"
-  >
-    <header class="relative">
-      <img class="" src="/horizontal-image-background.png" alt="" />
-      <img class="absolute inset-0 p-4" :src="src" :alt="alt" />
+  <article class="flex flex-col items-center gap-2 bg-secondary border border-primary p-3 md:p-7">
+    <header class="relative overflow-hidden">
+      <img src="/horizontal-image-background.png" alt="" />
+      <img loading="lazy" class="absolute top-0 left-1/2 transform -translate-x-1/2 p-4 h-full object-contain"
+        :src="src" :alt="alt" />
     </header>
 
-    <div>
+    <div class="mt-2 w-[428px] mx-auto">
       <h2 class="type-h2 mb-2">{{ title }}</h2>
       <slot>
         {{ text }}

diff --git a/frontend/src/components/molecules/PreregisterInput.vue b/frontend/src/components/molecules/PreregisterInput.vue
@@ -15,7 +15,8 @@ async function preregister(e) {
   <form @submit.prevent="preregister" class="flex items-center">
     <div class="flex-1 relative">
       <input name="email" type="email" placeholder="Your best email address"
-        class="w-full pl-8 pr-8 py-4 bg-white text-black border border-ring placeholder:italic md:text-xl leading-6 invalid:border-destructive lg:pr-36" />
+        class="w-full pl-8 pr-8 py-4 bg-white text-black border border-ring placeholder:italic md:text-xl leading-6 transition focus:invalid:border-destructive focus:border-primary focus:outline-none lg:pr-36"
+        required />
       <button class="button absolute right-2 top-2">Notify me</button>
     </div>
   </form>

diff --git a/frontend/src/components/organisms/Editor/ui/ColorPicker/index.vue b/frontend/src/components/organisms/Editor/ui/ColorPicker/index.vue
@@ -222,55 +222,28 @@ function transformColor<M extends keyof Color, C extends Color[M]>(
 </script>
 
 <template>
-  <div
-    ref="innerDivRef"
-    class="color-picker-wrapper"
-    :style="`width: ${WIDTH}px`"
-  >
-    <TextInput
-      label="Hex"
-      :model-value="inputColor"
-      @update:model-value="onSetHex"
-    />
+  <div ref="innerDivRef" class="color-picker-wrapper" :style="`width: ${WIDTH}px`">
+    <TextInput label="Hex" :model-value="inputColor" @update:model-value="onSetHex" />
     <div class="color-picker-basic-color">
-      <button
-        v-for="basicColor in basicColors"
-        :key="basicColor"
-        :class="basicColor === selfColor.hex ? ' active' : ''"
+      <button v-for="basicColor in basicColors" :key="basicColor" :class="basicColor === selfColor.hex ? ' active' : ''"
         :style="{ backgroundColor: basicColor }"
-        @click="
-          inputColor = basicColor
-          selfColor = transformColor('hex', basicColor)
-        "
-      />
+        @click="inputColor = basicColor;selfColor = transformColor('hex', basicColor)" />
     </div>
-    <MoveWrapper
-      class="color-picker-saturation"
-      :style="{ backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }"
-      @change="onMoveSaturation"
-    >
-      <div
-        class="color-picker-saturation_cursor"
-        :style="{
+    <MoveWrapper class="color-picker-saturation" :style="{ backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }"
+      @change="onMoveSaturation">
+      <div class="color-picker-saturation_cursor" :style="{
           backgroundColor: selfColor.hex,
           left: `${saturationPosition.x}px`,
           top: `${saturationPosition.y}px`,
-        }"
-      />
+        }" />
     </MoveWrapper>
     <MoveWrapper class="color-picker-hue" @change="onMoveHue">
-      <div
-        class="color-picker-hue_cursor"
-        :style="{
+      <div class="color-picker-hue_cursor" :style="{
           backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
           left: `${huePosition.x}px`,
-        }"
-      />
+        }" />
     </MoveWrapper>
-    <div
-      class="color-picker-color"
-      :style="{ backgroundColor: selfColor.hex }"
-    />
+    <div class="color-picker-color" :style="{ backgroundColor: selfColor.hex }" />
   </div>
 </template>
 
@@ -309,6 +282,7 @@ function transformColor<M extends keyof Color, C extends Color[M]>(
     linear-gradient(to right, white, transparent);
   user-select: none;
 }
+
 .color-picker-saturation_cursor {
   position: absolute;
   width: 20px;
@@ -319,21 +293,20 @@ function transformColor<M extends keyof Color, C extends Color[M]>(
   box-sizing: border-box;
   transform: translate(-10px, -10px);
 }
+
 .color-picker-hue {
   width: 100%;
   position: relative;
   margin-top: 15px;
   height: 12px;
-  background-image: linear-gradient(
-    to right,
-    rgb(255, 0, 0),
-    rgb(255, 255, 0),
-    rgb(0, 255, 0),
-    rgb(0, 255, 255),
-    rgb(0, 0, 255),
-    rgb(255, 0, 255),
-    rgb(255, 0, 0)
-  );
+  background-image: linear-gradient(to right,
+      rgb(255, 0, 0),
+      rgb(255, 255, 0),
+      rgb(0, 255, 0),
+      rgb(0, 255, 255),
+      rgb(0, 0, 255),
+      rgb(255, 0, 255),
+      rgb(255, 0, 0));
   user-select: none;
   border-radius: 12px;
 }

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import type { Media } from '@payload-types'
 import '@/styles/globals.scss'
+import { SEO } from "astro-seo";
 import { Toaster } from 'vue-sonner'
 import { Menu } from 'lucide-vue-next'
 import GameSelect from '@/components/molecules/GameSelect.vue'
@@ -22,7 +23,32 @@ const { user } = Astro.locals
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="generator" content={Astro.generator} />
-    <title>{title} | soulsborne.build</title>
+    <SEO
+      title={title}
+      titleTemplate="%s | soulsborne.build"
+      description="soulsborne.build is a website focused on the soulsborne series (Dark Souls, Bloodborne, Elden Ring) which aims to centralize community created content like builds and character appearances as well as some interesting lore data visualization."
+      openGraph={{
+        basic: {
+          title: title,
+          type: "image",
+          image: "https://cdn.soulsborne.build/og/banner.jpg",
+        }
+      }}
+      twitter={{
+        creator: "@KeziahMoselle"
+      }}
+      extend={{
+        link: [{ rel: "icon", href: "/favicon.ico" }],
+        meta: [
+          {
+            name: "twitter:image",
+            content: "https://cdn.soulsborne.build/og/banner.jpg",
+          },
+          { name: "twitter:title", content: `${title} | soulsborne.build` },
+        ],
+      }}
+    />
+
     <link rel="stylesheet" href="https://use.typekit.net/okw0knf.css" />
     {
       import.meta.env.PROD && (
@@ -114,7 +140,7 @@ const { user } = Astro.locals
     </main>
 
     <footer>
-      <div class="text-center px-4 mb-4 mt-24 max-w-md mx-auto">
+      <div class="text-center text-white text-opacity-70 px-4 mb-4 mt-24 max-w-md mx-auto">
         <p>
           Soulsborne.build is not affiliated with or endorsed by BANDAI NAMCO,
           FROMSOFTWARE, Inc.

diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
@@ -179,7 +179,7 @@ const CORE_MEMBERS = [
     <h2 class="type-h2 text-center mb-16">Major features upcoming</h2>
 
     <div class="grid gap-5 lg:grid-cols-3">
-      <CardImage title="Builder" src="" alt="">
+      <CardImage title="Builder" src="/builder.png" alt="">
         Lorem ipsum dolor sit amet consectetur. Elit cras libero quam sociis.
         Egestas cursus condimentum dui aliquet convallis eget. Libero orci
         tincidunt quis nibh at in rhoncus elementum. In amet placerat luctus
@@ -191,7 +191,7 @@ const CORE_MEMBERS = [
         tincidunt quis nibh at in rhoncus elementum. In amet placerat luctus
         cras sem.
       </CardImage>
-      <CardImage title="Lore tree graph" src="" alt="">
+      <CardImage title="Lore tree graph" src="/lore-graph-tree.png" alt="Lore tree graph">
         Lorem ipsum dolor sit amet consectetur. Elit cras libero quam sociis.
         Egestas cursus condimentum dui aliquet convallis eget. Libero orci
         tincidunt quis nibh at in rhoncus elementum. In amet placerat luctus
@@ -214,7 +214,10 @@ const CORE_MEMBERS = [
       Pre-register your account and get notified when we launch !
     </p>
 
-    <PreregisterInput client:visible />
+    <div class="flex flex-col justify-center">
+      <PreregisterInput client:visible />
+      <p class="drop-shadow-md text-base mt-2">We will only send you 1 email at release time.</p>
+    </div>
   </section>
 
   <!-- Changelog -->