From 03c42c2cdad73391097f08417ef1843c19e97f03 Mon Sep 17 00:00:00 2001
From: Alexander Chernyaev <265195@niuitmo.ru>
Date: Thu, 16 Nov 2023 14:28:27 +0300
Subject: [PATCH 1/5] Add head managment

---
 package.json                                |  1 +
 src/application/i18n/messages/en.json       |  9 ++++
 src/application/services/useBrowserTitle.ts | 14 ++++++
 src/application/services/useNote.ts         | 13 +++++
 src/index.ts                                |  2 +
 src/presentation/pages/Home.vue             | 11 ++++
 src/presentation/pages/Note.vue             | 27 +++++++++-
 src/presentation/pages/NoteSettings.vue     | 10 ++++
 src/presentation/pages/Settings.vue         |  8 ++-
 yarn.lock                                   | 56 +++++++++++++++++++++
 10 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 src/application/services/useBrowserTitle.ts

diff --git a/package.json b/package.json
index cc1dc096..762fbb67 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "jwt-decode": "^3.1.2",
     "normalize.css": "^8.0.1",
     "typescript-cookie": "^1.0.6",
+    "unhead": "^1.8.3",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4"
diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index e72e0db1..7dcc47d7 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -1,4 +1,13 @@
 {
+  "site": {
+    "titles": {
+      "home": "NoteX",
+      "userSettings": "User Settings",
+      "noteSettings": "Note Settings",
+      "newNote": "New Note"
+    }
+  },
+
   "auth": {
     "login": "Login"
   },
diff --git a/src/application/services/useBrowserTitle.ts b/src/application/services/useBrowserTitle.ts
new file mode 100644
index 00000000..9059d08c
--- /dev/null
+++ b/src/application/services/useBrowserTitle.ts
@@ -0,0 +1,14 @@
+/**
+ * Limit Title length to 50 char
+ *
+ * @param title - string to be reduced
+ */
+export default function limitTitle(title: string): string {
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  if (title.length <= 50) {
+    return title;
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    return title.slice(0, 50);
+  }
+}
diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index e251aa08..ab8c07ab 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -55,6 +55,11 @@ interface UseNoteComposableState {
    * Load note by custom hostname
    */
   resolveHostname: () => Promise<void>;
+
+  /**
+   * Title for bookmarks in the browser
+   */
+  title: Ref<string>;
 }
 
 interface UseNoteComposableOptions {
@@ -87,6 +92,13 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const router = useRouter();
 
+  /**
+   * Title identifier
+   */
+  const title = computed(() => {
+    return note.value?.content.blocks[0].data.text;
+  });
+
   /**
    * Load note by id
    *
@@ -172,6 +184,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
 
   return {
     note,
+    title,
     resolveHostname,
     save,
   };
diff --git a/src/index.ts b/src/index.ts
index 9533474f..29d0e7a7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import { createHead } from 'unhead';
 import App from './App.vue';
 import i18n from '@/application/i18n';
 import router from '@/application/router/index';
@@ -6,6 +7,7 @@ import '@/presentation/styles/index.pcss';
 
 const app = createApp(App);
 
+app.use(createHead);
 app.use(router);
 app.use(i18n);
 app.mount('#app');
diff --git a/src/presentation/pages/Home.vue b/src/presentation/pages/Home.vue
index bc342a37..e3fafb6f 100644
--- a/src/presentation/pages/Home.vue
+++ b/src/presentation/pages/Home.vue
@@ -6,6 +6,17 @@
 </template>
 
 <script setup lang="ts">
+import { useHead } from 'unhead';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+/**
+ * Changing the title in the browser
+ */
+useHead({
+  title: t('site.titles.home'),
+});
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 5459a7bb..12fa33f4 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -14,7 +14,13 @@
 import { computed, ref } from 'vue';
 import Editor from '@/presentation/components/editor/Editor.vue';
 import useNote from '@/application/services/useNote';
-import { NoteContent } from '@/domain/entities/Note';
+import {  NoteContent } from '@/domain/entities/Note';
+import { useHead } from 'unhead';
+import { useI18n } from 'vue-i18n';
+import { watchEffect } from 'vue';
+import limitTitle from '@/application/services/useBrowserTitle.js';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   /**
@@ -25,7 +31,7 @@ const props = defineProps<{
 
 const noteId = computed(() => props.id);
 
-const { note, save } = useNote({
+const { note, save, title } = useNote({
   id: noteId,
 });
 
@@ -46,6 +52,23 @@ function noteChanged(data: NoteContent): void {
     save(data);
   }
 }
+
+/**
+ * Changing the title in the browser
+ */
+if (!props.id) {
+  useHead({
+    title: t('site.titles.newNote'),
+  });
+} else {
+  watchEffect(() => {
+    if (title.value) {
+      useHead({
+        title: limitTitle(title.value),
+      });
+    }
+  });
+}
 </script>
 
 <style scoped>
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index 0a458eda..096d490a 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -34,6 +34,10 @@ import Button from '@/presentation/components/button/Button.vue';
 import { IconSave } from '@codexteam/icons';
 import useNoteSettings from '@/application/services/useNoteSettings';
 import Checkbox from '@/presentation/components/checkbox/Checkbox.vue';
+import { useHead } from 'unhead';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps<{
   /**
@@ -59,6 +63,12 @@ function onClick() {
   });
 }
 
+/**
+ * Changing the title in the browser
+ */
+useHead({
+  title: t('site.titles.noteSettings'),
+});
 </script>
 
 <style scoped>
diff --git a/src/presentation/pages/Settings.vue b/src/presentation/pages/Settings.vue
index 0b95644f..b7c95b6c 100644
--- a/src/presentation/pages/Settings.vue
+++ b/src/presentation/pages/Settings.vue
@@ -30,12 +30,12 @@ import { useI18n } from 'vue-i18n';
 import ThemeButton from '@/presentation/components/theme/ThemeButton.vue';
 import { useAppState } from '@/application/services/useAppState';
 import { useUserSettings } from '@/application/services/useUserSettings';
+import { useHead } from 'unhead';
 
 const { userEditorTools } = useAppState();
 const { t } = useI18n();
 const { addTool: addToolToUser } = useUserSettings();
 
-
 /**
  * Add tool to user. Imitates Installations from the Marketplace
  *
@@ -51,6 +51,12 @@ function addTool(event: KeyboardEvent): void {
   }
 }
 
+/**
+ * Changing the title in the browser
+ */
+useHead({
+  title: t('site.titles.noteSettings'),
+});
 </script>
 
 <style scoped>
diff --git a/yarn.lock b/yarn.lock
index 87053fe9..fc8a0d83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1075,6 +1075,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@unhead/dom@npm:1.8.3":
+  version: 1.8.3
+  resolution: "@unhead/dom@npm:1.8.3"
+  dependencies:
+    "@unhead/schema": 1.8.3
+    "@unhead/shared": 1.8.3
+  checksum: f42d5552c6cba1b6a831772122099bd029a2eb0f46198c924fa28c7c27566f9d568a194e290ef1b982465b8accfa6f3ca310f041c2536e99c19f83b291849b09
+  languageName: node
+  linkType: hard
+
+"@unhead/schema@npm:1.8.3":
+  version: 1.8.3
+  resolution: "@unhead/schema@npm:1.8.3"
+  dependencies:
+    hookable: ^5.5.3
+    zhead: ^2.2.4
+  checksum: 2bb6d77bfc526269ee43f7a16f48c1305b4d26d3b7152764be97b1b7d09e153879630272f4a65a2e5b6fad1d50bf0920777d74d45ecde7fcdcf25cc40b4d1380
+  languageName: node
+  linkType: hard
+
+"@unhead/shared@npm:1.8.3":
+  version: 1.8.3
+  resolution: "@unhead/shared@npm:1.8.3"
+  dependencies:
+    "@unhead/schema": 1.8.3
+  checksum: c9e25b84fa8ac7a6f951bf41077ade781b00b0511e451fe4b079c7fa78101ff90631dc60444ab217bcf56e28e76cadadc1cd7b01c4e16dea261049e78dcf3d69
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-vue@npm:^4.1.0":
   version: 4.4.0
   resolution: "@vitejs/plugin-vue@npm:4.4.0"
@@ -2809,6 +2838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hookable@npm:^5.5.3":
+  version: 5.5.3
+  resolution: "hookable@npm:5.5.3"
+  checksum: df659977888398649b6ef8c4470719e7e8384a1d939a6587e332e86fd55b3881806e2f8aaebaabdb4f218f74b83b98f2110e143df225e16d62a39dc271e7e288
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -3548,6 +3584,7 @@ __metadata:
     postcss-preset-env: ^9.0.0
     typescript: ^5.0.2
     typescript-cookie: ^1.0.6
+    unhead: ^1.8.3
     vite: ^4.4.9
     vue: ^3.3.4
     vue-i18n: ^9.2.2
@@ -4805,6 +4842,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unhead@npm:^1.8.3":
+  version: 1.8.3
+  resolution: "unhead@npm:1.8.3"
+  dependencies:
+    "@unhead/dom": 1.8.3
+    "@unhead/schema": 1.8.3
+    "@unhead/shared": 1.8.3
+    hookable: ^5.5.3
+  checksum: f49c62504717c37cc164b10b4c5a14fc5433df078e0eb1197b898899b1b4c70b92f3cee71fe19f3682c9345011c9a48fbbbb75490c6ef2fae844401b09ace0e2
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"
@@ -5083,3 +5132,10 @@ __metadata:
   checksum: f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"zhead@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "zhead@npm:2.2.4"
+  checksum: 22836aa6947b27d35176cde40e3f5b19c24e0f46ee52d860e8df674a35aec07b34f6c78437323c797d1dc37ec0847e61e4f07ab605d519cc742245b5fa25b889
+  languageName: node
+  linkType: hard

From 3ff344d733c2ef0584fd8d169af2bd376165cb96 Mon Sep 17 00:00:00 2001
From: Alexander Chernyaev <265195@niuitmo.ru>
Date: Tue, 5 Dec 2023 23:10:41 +0300
Subject: [PATCH 2/5] Review changes

---
 src/application/i18n/messages/en.json         | 26 +++++++++----------
 src/application/services/useBrowserTitle.ts   | 14 ----------
 src/application/services/useNote.ts           | 21 ++++++++++++++-
 .../components/theme/ThemeButton.vue          |  2 +-
 src/presentation/pages/Home.vue               |  2 +-
 src/presentation/pages/Note.vue               |  5 ++--
 src/presentation/pages/NoteSettings.vue       |  2 +-
 src/presentation/pages/Settings.vue           |  6 ++---
 8 files changed, 40 insertions(+), 38 deletions(-)
 delete mode 100644 src/application/services/useBrowserTitle.ts

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index 7dcc47d7..e19f11d7 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -1,27 +1,25 @@
 {
-  "site": {
-    "titles": {
-      "home": "NoteX",
-      "userSettings": "User Settings",
-      "noteSettings": "Note Settings",
-      "newNote": "New Note"
-    }
-  },
-
+  "appTitle": "NoteX",
   "auth": {
     "login": "Login"
   },
-  "settings": {
-    "title": "Settings",
-    "changeTheme": "Change theme",
-    "userEditorTools": "User editor tools"
-  },
   "header": {
     "buttons": {
       "home": "Home",
       "noteSettings": "Settings"
     }
   },
+  "userSettings": {
+    "title": "User Settings",
+    "changeTheme": "Change theme",
+    "userEditorTools": "User editor tools"
+  },
+  "noteSettings": {
+    "title": "Note Settings"
+  },
+  "note": {
+    "new": "New Note"
+  },
   "home": {
     "title": "Recent Notes"
   },
diff --git a/src/application/services/useBrowserTitle.ts b/src/application/services/useBrowserTitle.ts
deleted file mode 100644
index 9059d08c..00000000
--- a/src/application/services/useBrowserTitle.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Limit Title length to 50 char
- *
- * @param title - string to be reduced
- */
-export default function limitTitle(title: string): string {
-  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-  if (title.length <= 50) {
-    return title;
-  } else {
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    return title.slice(0, 50);
-  }
-}
diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index ab8c07ab..fb721b0f 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -92,11 +92,30 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const router = useRouter();
 
+  /**
+   * Limit Title length to 50 char
+   *
+   * @param line - title taken from the note
+   */
+  function limitTitle(line: string): string {
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    if (line.length <= 50) {
+      return line;
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      return line.slice(0, 50);
+    }
+  }
+
   /**
    * Title identifier
    */
   const title = computed(() => {
-    return note.value?.content.blocks[0].data.text;
+    if (!note.value?.content.blocks[0] && !(Boolean((note.value?.content.blocks[0].data.text)))) {
+      return 'Note';
+    } else {
+      return limitTitle(note.value?.content.blocks[0].data.text);
+    }
   });
 
   /**
diff --git a/src/presentation/components/theme/ThemeButton.vue b/src/presentation/components/theme/ThemeButton.vue
index ada0abf7..d0d6d6eb 100644
--- a/src/presentation/components/theme/ThemeButton.vue
+++ b/src/presentation/components/theme/ThemeButton.vue
@@ -1,6 +1,6 @@
 <template>
   <Button
-    :text="t('settings.changeTheme')"
+    :text="t('userSettings.changeTheme')"
     :icon="IconReplace"
     @click="changeTheme"
   />
diff --git a/src/presentation/pages/Home.vue b/src/presentation/pages/Home.vue
index e3fafb6f..2a18a564 100644
--- a/src/presentation/pages/Home.vue
+++ b/src/presentation/pages/Home.vue
@@ -15,7 +15,7 @@ const { t } = useI18n();
  * Changing the title in the browser
  */
 useHead({
-  title: t('site.titles.home'),
+  title: t('home.title'),
 });
 </script>
 
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 12fa33f4..4015b45f 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -18,7 +18,6 @@ import {  NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 import { watchEffect } from 'vue';
-import limitTitle from '@/application/services/useBrowserTitle.js';
 
 const { t } = useI18n();
 
@@ -58,13 +57,13 @@ function noteChanged(data: NoteContent): void {
  */
 if (!props.id) {
   useHead({
-    title: t('site.titles.newNote'),
+    title: t('note.new'),
   });
 } else {
   watchEffect(() => {
     if (title.value) {
       useHead({
-        title: limitTitle(title.value),
+        title: title.value,
       });
     }
   });
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index 096d490a..2e1e7ef0 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -67,7 +67,7 @@ function onClick() {
  * Changing the title in the browser
  */
 useHead({
-  title: t('site.titles.noteSettings'),
+  title: t('noteSettings.title'),
 });
 </script>
 
diff --git a/src/presentation/pages/Settings.vue b/src/presentation/pages/Settings.vue
index b7c95b6c..e11bec2c 100644
--- a/src/presentation/pages/Settings.vue
+++ b/src/presentation/pages/Settings.vue
@@ -1,6 +1,6 @@
 <template>
-  <h1>{{ t("settings.title") }}</h1>
-  <h2>{{ t("settings.userEditorTools") }}:</h2>
+  <h1>{{ t("userSettings.title") }}</h1>
+  <h2>{{ t("userSettings.userEditorTools") }}:</h2>
   <ul
     v-for="tool in userEditorTools"
     :key="tool.id"
@@ -55,7 +55,7 @@ function addTool(event: KeyboardEvent): void {
  * Changing the title in the browser
  */
 useHead({
-  title: t('site.titles.noteSettings'),
+  title: t('userSettings.title'),
 });
 </script>
 

From fffa1c66e7bddd529fe9a5f65409d0d3103289c5 Mon Sep 17 00:00:00 2001
From: Alexander Chernyaev <265195@niuitmo.ru>
Date: Fri, 8 Dec 2023 11:58:39 +0300
Subject: [PATCH 3/5] Review changes

---
 src/application/services/useNote.ts | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index ff025efb..99d36ede 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -97,29 +97,17 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const router = useRouter();
 
-  /**
-   * Limit Title length to 50 char
-   *
-   * @param line - title taken from the note
-   */
-  function limitTitle(line: string): string {
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    if (line.length <= 50) {
-      return line;
-    } else {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      return line.slice(0, 50);
-    }
-  }
-
   /**
    * Title identifier
    */
+  const limitChars = 50;
   const title = computed(() => {
-    if (!note.value?.content.blocks[0] && !(Boolean((note.value?.content.blocks[0].data.text)))) {
+    const firstBlockNote = note.value?.content.blocks[0];
+
+    if (!firstBlockNote || !(Boolean(firstBlockNote.data.text))) {
       return 'Note';
     } else {
-      return limitTitle(note.value?.content.blocks[0].data.text);
+      return firstBlockNote.data.text.slice(0, limitChars);
     }
   });
 

From 99eef88cf3c55c69dae36417af82c94330b8d045 Mon Sep 17 00:00:00 2001
From: Alexander Chernyaev <265195@niuitmo.ru>
Date: Mon, 11 Dec 2023 18:17:50 +0300
Subject: [PATCH 4/5] Rename variables

---
 src/application/services/useNote.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 99d36ede..e959f7f3 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -98,16 +98,16 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   const router = useRouter();
 
   /**
-   * Title identifier
+   * Note Title identifier
    */
-  const limitChars = 50;
-  const title = computed(() => {
-    const firstBlockNote = note.value?.content.blocks[0];
+  const limitCharsForNoteTitle = 50;
+  const noteTitle = computed(() => {
+    const firstNoteBlock = note.value?.content.blocks[0];
 
-    if (!firstBlockNote || !(Boolean(firstBlockNote.data.text))) {
+    if (!firstNoteBlock || !(Boolean(firstNoteBlock.data.text))) {
       return 'Note';
     } else {
-      return firstBlockNote.data.text.slice(0, limitChars);
+      return firstNoteBlock.data.text.slice(0, limitCharsForNoteTitle);
     }
   });
 
@@ -207,7 +207,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
 
   return {
     note,
-    title,
+    noteTitle,
     canEdit,
     resolveHostname,
     save,

From 351a43d5486bd25fba3ef010fec6368199458634 Mon Sep 17 00:00:00 2001
From: Alexander Chernyaev <265195@niuitmo.ru>
Date: Mon, 11 Dec 2023 18:59:53 +0300
Subject: [PATCH 5/5] update

---
 src/application/services/useNote.ts | 2 +-
 src/presentation/pages/Note.vue     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index e959f7f3..7496dee6 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -64,7 +64,7 @@ interface UseNoteComposableState {
   /**
    * Title for bookmarks in the browser
    */
-  title: Ref<string>;
+  noteTitle: Ref<string>;
 }
 
 interface UseNoteComposableOptions {
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 468407a4..c38da8f5 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -31,7 +31,7 @@ const props = defineProps<{
 
 const noteId = computed(() => props.id);
 
-const { note, save, title, canEdit } = useNote({
+const { note, save, noteTitle, canEdit } = useNote({
   id: noteId,
 });
 
@@ -62,9 +62,9 @@ if (!props.id) {
   });
 } else {
   watchEffect(() => {
-    if (title.value) {
+    if (noteTitle.value) {
       useHead({
-        title: title.value,
+        title: noteTitle.value,
       });
     }
   });