feat(seo): head route

src/lang/br/index.ts

@@ -1,11 +1,13 @@
 import editor from './editor'
 import toast from './toast'
 import landing from './landing'
+import seo from './seo'
 
 export default {
   editor,
   toast,
   landing,
+  seo,
   generics: {
     input: {
       image: 'Inserir Imagem',

src/lang/br/seo.ts

@@ -0,0 +1,17 @@
+export default {
+  landing: {
+    title: 'Better Write',
+    description:
+      'Better Write é um processador de texto para escritores criativos.',
+  },
+  editor: {
+    title: 'Better Write - Editor',
+    description:
+      'Better Write é um processador de texto para escritores criativos.',
+  },
+  '404': {
+    title: 'Better Write - 404 :(',
+    description:
+      'Better Write é um processador de texto para escritores criativos.',
+  },
+}

src/lang/en/index.ts

@@ -1,11 +1,13 @@
 import editor from './editor'
 import toast from './toast'
 import landing from './landing'
+import seo from './seo'
 
 export default {
   editor,
   toast,
   landing,
+  seo,
   generics: {
     input: {
       image: 'Insert Image',

src/lang/en/seo.ts

@@ -0,0 +1,14 @@
+export default {
+  landing: {
+    title: 'Better Write',
+    description: 'Better Write is a word processor for creative writers.',
+  },
+  editor: {
+    title: 'Better Write - Editor',
+    description: 'Better Write is a word processor for creative writers.',
+  },
+  '404': {
+    title: 'Better Write - 404 :(',
+    description: 'Better Write is a word processor for creative writers.',
+  },
+}

src/pages/404.vue

@@ -1,9 +1,25 @@
 <template>
   <main class="wb-base flex items-center justify-center flex-col md:flex-row">
-    <router-link to="/" class="text-3xl dark:text-gray-900 text-black"
+    <router-link to="/" class="text-3xl dark:text-gray-300 text-black"
       >404 :(</router-link
     >
   </main>
 </template>
 
-<script lang="ts" setup></script>
+<script setup lang="ts">
+  import { useHead } from '@vueuse/head'
+  import { useI18n } from 'vue-i18n'
+  import { computed } from 'vue'
+
+  const { t } = useI18n()
+
+  useHead({
+    title: computed(() => t('seo.404.title')),
+    meta: [
+      {
+        name: `description`,
+        content: computed(() => t('seo.404.description')),
+      },
+    ],
+  })
+</script>

src/pages/Editor.vue

@@ -9,16 +9,45 @@
 </template>
 
 <script setup lang="ts">
+  import { useEnv } from '@/use/env'
   import { useKeyboard } from '@/use/keyboard'
   import { useLocalStorage } from '@/use/storage/local'
-  import { onUnmounted } from 'vue'
+  import { useHead } from '@vueuse/head'
+  import { computed, onUnmounted } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { useStore } from 'vuex'
 
+  const store = useStore()
   const keyboard = useKeyboard()
+  const env = useEnv()
+  const { t } = useI18n()
 
   keyboard.init()
   useLocalStorage().onAutoSave(60)
 
   onUnmounted(() => {
     keyboard.destroy()
   })
+
+  const project = computed(() => store.state.project.nameRaw)
+  const heading = computed(() => store.state.context.entity)
+
+  const title = computed(() => t('seo.editor.title'))
+  const description = computed(() => t('seo.editor.description'))
+
+  const _title = computed(() =>
+    project.value === env.projectEmpty()
+      ? title.value
+      : project.value + ' - ' + heading.value[0]?.raw
+  )
+
+  useHead({
+    title: _title,
+    meta: [
+      {
+        name: `description`,
+        content: description,
+      },
+    ],
+  })
 </script>

src/pages/Landing.vue

@@ -20,3 +20,21 @@
     <LandingThird />
   </main>
 </template>
+
+<script setup lang="ts">
+  import { useHead } from '@vueuse/head'
+  import { useI18n } from 'vue-i18n'
+  import { computed } from 'vue'
+
+  const { t } = useI18n()
+
+  useHead({
+    title: computed(() => t('seo.landing.title')),
+    meta: [
+      {
+        name: `description`,
+        content: computed(() => t('seo.landing.description')),
+      },
+    ],
+  })
+</script>