Enrich page title with context (#296)

- Static pages have their own titles
- The name of the recipe is displayed when viewing it

frontend/src/components/UI/CategorySidebar.vue

@@ -54,7 +54,7 @@ export default {
         {
           icon: "mdi-magnify",
           to: "/search",
-          title: "search",
+          title: this.$t('search.search'),
         },
       ],
     };

frontend/src/locales/messages/en.json

@@ -48,7 +48,8 @@
     "apply": "Apply",
     "current-parenthesis": "(Current)",
     "users": "Users",
-    "groups": "Groups"
+    "groups": "Groups",
+    "about": "About"
   },
   "page": {
     "home-page": "Home Page",
@@ -145,7 +146,8 @@
     "delete-confirmation": "Are you sure you want to delete this recipe?"
   },
   "search": {
-    "search-mealie": "Search Mealie"
+    "search-mealie": "Search Mealie",
+    "search": "Search"
   },
   "settings": {
     "general-settings": "General Settings",

frontend/src/locales/messages/fr.json

@@ -46,7 +46,8 @@
     "token": "Jeton",
     "field-required": "Champ obligatoire",
     "apply": "Appliquer",
-    "current-parenthesis": "(Actuel)"
+    "current-parenthesis": "(Actuel)",
+    "about": "À propos"
   },
   "page": {
     "home-page": "Accueil",
@@ -143,7 +144,8 @@
     "delete-confirmation": "Êtes-vous sûr(e) de vouloir supprimer cette recette ?"
   },
   "search": {
-    "search-mealie": "Rechercher dans Mealie"
+    "search-mealie": "Rechercher dans Mealie",
+    "search": "Rechercher"
   },
   "settings": {
     "general-settings": "Paramètres généraux",

frontend/src/main.js

@@ -18,6 +18,20 @@ const router = new VueRouter({
   mode: process.env.NODE_ENV === "production" ? "history" : "hash",
 });
 
+const DEFAULT_TITLE = 'Mealie';
+const TITLE_SEPARATOR = '🍴';
+const TITLE_SUFFIX = " " + TITLE_SEPARATOR + " " + DEFAULT_TITLE;
+router.afterEach( (to) => {
+  Vue.nextTick( async () => {
+    if(typeof to.meta.title === 'function' ) {
+      const title  = await to.meta.title(to);
+      document.title = title + TITLE_SUFFIX;
+    } else {
+      document.title = to.meta.title ? to.meta.title + TITLE_SUFFIX : DEFAULT_TITLE;
+    }
+  });
+});  
+
 const vueApp = new Vue({
   vuetify,
   store,

frontend/src/routes/admin.js

@@ -8,6 +8,7 @@ import ManageUsers from "@/pages/Admin/ManageUsers";
 import Settings from "@/pages/Admin/Settings";
 import About from "@/pages/Admin/About";
 import { store } from "../store";
+import i18n from '@/i18n.js';
 
 export default {
   path: "/admin",
@@ -25,35 +26,59 @@ export default {
     {
       path: "profile",
       component: Profile,
+      meta: {
+        title: i18n.t('settings.profile'),
+      },
     },
 
     {
       path: "backups",
       component: Backup,
+      meta: {
+        title: i18n.t('settings.backup-and-exports'),
+      },
     },
     {
       path: "themes",
       component: Theme,
+      meta: {
+        title: i18n.t('general.themes'),
+      },
     },
     {
       path: "meal-planner",
       component: MealPlanner,
+      meta: {
+        title: i18n.t('meal-plan.meal-planner'),
+      },
     },
     {
       path: "migrations",
       component: Migration,
+      meta: {
+        title: i18n.t('settings.migrations'),
+      },
     },
     {
       path: "manage-users",
       component: ManageUsers,
+      meta: {
+        title: i18n.t('settings.manage-users'),
+      },
     },
     {
       path: "settings",
       component: Settings,
+      meta: {
+        title: i18n.t('settings.site-settings'),
+      },
     },
     {
       path: "about",
       component: About,
+      meta: {
+        title: i18n.t('general.about'),
+      },
     },
   ],
 };

frontend/src/routes/index.js

@@ -15,6 +15,7 @@ import ThisWeek from "@/pages/MealPlan/ThisWeek";
 import { api } from "@/api";
 import Admin from "./admin";
 import { store } from "../store";
+import i18n from '@/i18n.js';
 
 export const routes = [
   { path: "/", name: "home", component: HomePage },
@@ -31,15 +32,43 @@ export const routes = [
   { path: "/sign-up", redirect: "/" },
   { path: "/sign-up/:token", component: SignUpPage },
   { path: "/debug", component: Debug },
-  { path: "/search", component: SearchPage },
+  { 
+    path: "/search", 
+    component: SearchPage,
+    meta: {
+      title: i18n.t('search.search'),
+    },
+  },
   { path: "/recipes/all", component: AllRecipes },
   { path: "/pages/:customPage", component: CustomPage },
   { path: "/recipes/tag/:tag", component: TagPage },
   { path: "/recipes/category/:category", component: CategoryPage },
-  { path: "/recipe/:recipe", component: ViewRecipe },
+  { 
+    path: "/recipe/:recipe", 
+    component: ViewRecipe,
+    meta: {
+      title: async route => {
+        const recipe = await api.recipes.requestDetails(route.params.recipe);
+        return recipe.name;
+      },
+    } 
+  },
   { path: "/new/", component: NewRecipe },
-  { path: "/meal-plan/planner", component: Planner },
-  { path: "/meal-plan/this-week", component: ThisWeek },
+  { 
+    path: "/meal-plan/planner",
+    component: Planner,
+    meta: {
+      title:  i18n.t('meal-plan.meal-planner'),
+    } 
+  },
+  { 
+    path: "/meal-plan/this-week", 
+    component: ThisWeek,
+    meta: {
+      title: i18n.t('meal-plan.dinner-this-week'),
+    } 
+
+  },
   Admin,
   {
     path: "/meal-plan/today",