From f3ea467e20a8d1c7cce4801e169d848f99c9b902 Mon Sep 17 00:00:00 2001 From: sephrat <34862846+sephrat@users.noreply.github.com> Date: Wed, 14 Apr 2021 17:12:22 +0200 Subject: [PATCH] Enrich page title with context (#296) - Static pages have their own titles - The name of the recipe is displayed when viewing it --- .../src/components/UI/CategorySidebar.vue | 2 +- frontend/src/locales/messages/en.json | 6 ++- frontend/src/locales/messages/fr.json | 6 ++- frontend/src/main.js | 14 +++++++ frontend/src/routes/admin.js | 25 +++++++++++++ frontend/src/routes/index.js | 37 +++++++++++++++++-- 6 files changed, 81 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/UI/CategorySidebar.vue b/frontend/src/components/UI/CategorySidebar.vue index 7fd349579f54..9103417dbe21 100644 --- a/frontend/src/components/UI/CategorySidebar.vue +++ b/frontend/src/components/UI/CategorySidebar.vue @@ -54,7 +54,7 @@ export default { { icon: "mdi-magnify", to: "/search", - title: "search", + title: this.$t('search.search'), }, ], }; diff --git a/frontend/src/locales/messages/en.json b/frontend/src/locales/messages/en.json index 3bd654f2776b..36835625eeb7 100644 --- a/frontend/src/locales/messages/en.json +++ b/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", diff --git a/frontend/src/locales/messages/fr.json b/frontend/src/locales/messages/fr.json index a92e4d9af7fd..4e56fefcff14 100644 --- a/frontend/src/locales/messages/fr.json +++ b/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", diff --git a/frontend/src/main.js b/frontend/src/main.js index 45c9381a93d7..c4917605eee3 100644 --- a/frontend/src/main.js +++ b/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, diff --git a/frontend/src/routes/admin.js b/frontend/src/routes/admin.js index e52927db249d..cb990f26aa96 100644 --- a/frontend/src/routes/admin.js +++ b/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'), + }, }, ], }; diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index af58a187d4dd..f17df9907c5a 100644 --- a/frontend/src/routes/index.js +++ b/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",