From bc20470341ab10f09c66930a54b59c68b579c1ee Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Mon, 2 Dec 2024 09:21:31 +0200
Subject: [PATCH] add meta title, description

---
 apps/frontend/src/main.ts                     |  5 +++--
 apps/frontend/src/views/CreateView.vue        |  8 +++++++
 apps/frontend/src/views/DonateView.vue        |  5 +++++
 apps/frontend/src/views/HomeView.vue          |  9 ++++++--
 .../src/views/ManageQRCodeChatView.vue        | 21 ++++++++++++++++++-
 .../src/views/ManageQRCodeReadyView.vue       |  8 +++++++
 apps/frontend/src/views/PublicChatView.vue    |  8 +++++++
 apps/frontend/src/views/ReadQRCodeView.vue    |  5 +++++
 8 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/main.ts b/apps/frontend/src/main.ts
index 011a0c1..59dfb5b 100644
--- a/apps/frontend/src/main.ts
+++ b/apps/frontend/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
+import { Head } from '@unhead/vue/components'
 import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
 // import { createPinia } from 'pinia'
 import PouchDB from '@/api/PouchDB'
@@ -47,8 +48,8 @@ const vueQueryPluginOptions: VueQueryPluginOptions = {
   },
 }
 
-const head = createHead()
-app.use(head)
+app.use(createHead())
+app.component('MetaHead', Head)
 app.use(VueQueryPlugin, vueQueryPluginOptions)
 // app.use(createPinia())
 app.use(router)
diff --git a/apps/frontend/src/views/CreateView.vue b/apps/frontend/src/views/CreateView.vue
index bff4d6a..ebdd377 100644
--- a/apps/frontend/src/views/CreateView.vue
+++ b/apps/frontend/src/views/CreateView.vue
@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Создание QR-кода — НаСвязи</title>
+    <meta
+      name="description"
+      content="Создайте свой QR-код для безопасного и конфиденциального взаимодействия"
+    />
+  </MetaHead>
+
   <div class="max-w-prose mx-auto py-6 px-4 md:px-6">
     <section class="content">
       <div class="max-w-prose mx-auto py-8">
diff --git a/apps/frontend/src/views/DonateView.vue b/apps/frontend/src/views/DonateView.vue
index 145f400..975da0e 100644
--- a/apps/frontend/src/views/DonateView.vue
+++ b/apps/frontend/src/views/DonateView.vue
@@ -1,4 +1,9 @@
 <template>
+  <MetaHead>
+    <title>Поддержите развитие НаСвязи</title>
+    <meta name="description" content="" />
+  </MetaHead>
+
   <section class="max-w-2xl mx-auto py-8 px-4 text-center">
     <h1 class="text-2xl font-bold mb-4">Поддержите развитие НаСвязи</h1>
     <p class="text-gray-600 mb-6">
diff --git a/apps/frontend/src/views/HomeView.vue b/apps/frontend/src/views/HomeView.vue
index ae31bb3..ed7efd3 100644
--- a/apps/frontend/src/views/HomeView.vue
+++ b/apps/frontend/src/views/HomeView.vue
@@ -1,6 +1,11 @@
-<script setup lang="ts"></script>
-
 <template>
+  <MetaHead>
+    <title>НаСвязи — Быстрая и конфиденциальная связь через QR-код</title>
+    <meta
+      name="description"
+      content="НаСвязи позволяет быстро и конфиденциально связаться через QR-код. Создайте свой код и обеспечьте удобное взаимодействие без раскрытия личных данных"
+    />
+  </MetaHead>
   <main>
     <TheWelcome />
   </main>
diff --git a/apps/frontend/src/views/ManageQRCodeChatView.vue b/apps/frontend/src/views/ManageQRCodeChatView.vue
index 63011c8..87e4d67 100644
--- a/apps/frontend/src/views/ManageQRCodeChatView.vue
+++ b/apps/frontend/src/views/ManageQRCodeChatView.vue
@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
+    <meta
+      name="description"
+      content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
+    />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <!-- Основной контент -->
     <main class="flex-grow flex flex-col">
@@ -47,5 +55,16 @@
 <script setup lang="ts">
 import type { MessageDocument } from '@hereconnect/types'
 import ChatComponent from '@/components/ChatComponent.vue'
-defineProps<{ qr_code_uri: MessageDocument['qr_code_uri']; chat: MessageDocument['chat'] }>()
+import { getQrCodeDocument } from '@/api/qrCode'
+import { useQuery } from '@tanstack/vue-query'
+
+const props = defineProps<{
+  qr_code_uri: MessageDocument['qr_code_uri']
+  chat: MessageDocument['chat']
+}>()
+
+const { data: chatDoc } = useQuery({
+  queryKey: ['qrCode', computed(() => props.qr_code_uri)],
+  queryFn: () => getQrCodeDocument(props.qr_code_uri),
+})
 </script>
diff --git a/apps/frontend/src/views/ManageQRCodeReadyView.vue b/apps/frontend/src/views/ManageQRCodeReadyView.vue
index fa05eef..39207ab 100644
--- a/apps/frontend/src/views/ManageQRCodeReadyView.vue
+++ b/apps/frontend/src/views/ManageQRCodeReadyView.vue
@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Ваш QR-код готов — НаСвязи</title>
+    <meta
+      name="description"
+      content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
+    />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <main
       class="flex-grow flex justify-center py-6 px-4 md:px-6"
diff --git a/apps/frontend/src/views/PublicChatView.vue b/apps/frontend/src/views/PublicChatView.vue
index ac09dd8..f3a6611 100644
--- a/apps/frontend/src/views/PublicChatView.vue
+++ b/apps/frontend/src/views/PublicChatView.vue
@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Чат — НаСвязи</title>
+    <meta
+      name="description"
+      content="Чат QR-кода. Безопасная и конфиденциальная связь для решения всех вопросов"
+    />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <!-- Основной контент -->
     <main class="flex-grow flex flex-col">
diff --git a/apps/frontend/src/views/ReadQRCodeView.vue b/apps/frontend/src/views/ReadQRCodeView.vue
index b43556d..eca23ce 100644
--- a/apps/frontend/src/views/ReadQRCodeView.vue
+++ b/apps/frontend/src/views/ReadQRCodeView.vue
@@ -1,4 +1,9 @@
 <template>
+  <MetaHead>
+    <title></title>
+    <meta name="description" content="" />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
       <section class="max-w-prose w-full flex flex-col gap-10">