Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-23 15:19:41 +02:00
Code Issues Releases Activity

chore: make vue global components and layouts localizable (#1565)

Browse source
This commit is contained in:
Philipp Fischbeck 2022-08-15 23:55:51 +02:00 • committed by GitHub
parent 7af48d51be
commit ba15006bb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 193 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/Layout/AppHeader.vue
View file

@ -28,7 +28,7 @@
:prepend-inner-icon="$globals.icons.search" :prepend-inner-icon="$globals.icons.search"
background-color="primary lighten-1" background-color="primary lighten-1"
color="white" color="white"
placeholder="Press '/'" :placeholder="$t('search.search-hint')"
> >
</v-text-field> </v-text-field>
</div> </div>

4
frontend/components/Layout/AppSidebar.vue
View file

@ -8,7 +8,9 @@
<v-list-item-content> <v-list-item-content>
<v-list-item-title> {{ $auth.user.fullName }}</v-list-item-title> <v-list-item-title> {{ $auth.user.fullName }}</v-list-item-title>
<v-list-item-subtitle> <v-list-item-subtitle>
<NuxtLink class="favorites-link" :to="`/user/${$auth.user.id}/favorites`"> Favorite Recipes </NuxtLink> <NuxtLink class="favorites-link" :to="`/user/${$auth.user.id}/favorites`">
{{ $t("user.favorite-recipes") }}
</NuxtLink>
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>

11
frontend/components/global/AppButtonCopy.vue
View file

@ -22,14 +22,14 @@
@blur="on.blur" @blur="on.blur"
> >
<v-icon>{{ $globals.icons.contentCopy }}</v-icon> <v-icon>{{ $globals.icons.contentCopy }}</v-icon>
{{ icon ? "" : "Copy" }} {{ icon ? "" : $t("general.copy") }}
</v-btn> </v-btn>
</template> </template>
<span> <span>
<v-icon left dark> <v-icon left dark>
{{ $globals.icons.clipboardCheck }} {{ $globals.icons.clipboardCheck }}
</v-icon> </v-icon>
<slot> {{ $t("general.copied") }}! </slot> <slot> {{ $t("general.copied_message") }} </slot>
</span> </span>
</v-tooltip> </v-tooltip>
</template> </template>
@ -42,7 +42,7 @@ export default defineComponent({
props: { props: {
copyText: { copyText: {
type: String, type: String,
default: "Default Copy Text", required: true,
}, },
color: { color: {
type: String, type: String,
@ -81,10 +81,9 @@ export default defineComponent({
show, show,
copyToolTip, copyToolTip,
textToClipboard, textToClipboard,
} };
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

4
frontend/components/global/AutoForm.vue
View file

@ -129,7 +129,9 @@
</div> </div>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<BaseButton small @click="value[inputField.varName].push(getTemplate(inputField.items))"> New </BaseButton> <BaseButton small @click="value[inputField.varName].push(getTemplate(inputField.items))">
{{ $t("general.new") }}
</BaseButton>
</v-card-actions> </v-card-actions>
</div> </div>
</v-col> </v-col>

7
frontend/components/global/BannerExperimental.vue
View file

@ -1,14 +1,13 @@
<template> <template>
<v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert"> <v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
<b>Experimental Feature</b> <b>{{ $t("banner-experimental.title") }}</b>
<div>This page contains experimental or still-baking features. Please excuse the mess.</div> <div>{{ $t("banner-experimental.description") }}</div>
<div v-if="issue != ''" class="py-2"> <div v-if="issue != ''" class="py-2">
<a :href="issue" target="_blank"> Track our progress here</a> <a :href="issue" target="_blank">{{ $t("banner-experimental.issue-link-text") }}</a>
</div> </div>
</v-alert> </v-alert>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
props: { props: {

18
frontend/components/global/BaseButton.vue
View file

@ -109,40 +109,40 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const { $globals } = useContext(); const { $globals, i18n } = useContext();
const buttonOptions = { const buttonOptions = {
create: { create: {
text: "Create", text: i18n.t("general.create"),
icon: $globals.icons.createAlt, icon: $globals.icons.createAlt,
color: "success", color: "success",
}, },
update: { update: {
text: "Update", text: i18n.t("general.update"),
icon: $globals.icons.edit, icon: $globals.icons.edit,
color: "success", color: "success",
}, },
save: { save: {
text: "Save", text: i18n.t("general.save"),
icon: $globals.icons.save, icon: $globals.icons.save,
color: "success", color: "success",
}, },
edit: { edit: {
text: "Edit", text: i18n.t("general.edit"),
icon: $globals.icons.edit, icon: $globals.icons.edit,
color: "info", color: "info",
}, },
delete: { delete: {
text: "Delete", text: i18n.t("general.delete"),
icon: $globals.icons.delete, icon: $globals.icons.delete,
color: "error", color: "error",
}, },
cancel: { cancel: {
text: "Cancel", text: i18n.t("general.cancel"),
icon: $globals.icons.close, icon: $globals.icons.close,
color: "grey", color: "grey",
}, },
download: { download: {
text: "Download", text: i18n.t("general.download"),
icon: $globals.icons.download, icon: $globals.icons.download,
color: "info", color: "info",
}, },
@ -189,13 +189,11 @@ export default defineComponent({
return buttonStyles.defaults; return buttonStyles.defaults;
}); });
const api = useUserApi(); const api = useUserApi();
function downloadFile() { function downloadFile() {
api.utils.download(props.downloadUrl); api.utils.download(props.downloadUrl);
} }
return { return {
btnAttrs, btnAttrs,
btnStyle, btnStyle,

3
frontend/components/global/BaseCardSectionTitle.vue
View file

@ -1,4 +1,3 @@
<template> <template>
<v-card <v-card
color="background" color="background"
@ -30,7 +29,7 @@ export default defineComponent({
props: { props: {
title: { title: {
type: String, type: String,
default: "Place Holder", required: true,
}, },
icon: { icon: {
type: String, type: String,

1
frontend/components/global/BaseDialog.vue
View file

@ -102,6 +102,7 @@ export default defineComponent({
}, },
submitText: { submitText: {
type: String, type: String,
// TODO Figure out how to localize this default value
default: () => "Create", default: () => "Create",
}, },
keepOpen: { keepOpen: {

4
frontend/components/global/BaseOverflowButton.vue
View file

@ -94,6 +94,7 @@ export default defineComponent({
btnText: { btnText: {
type: String, type: String,
required: false, required: false,
// TODO Figure out how to localize this default value
default: "Actions", default: "Actions",
}, },
}, },
@ -127,6 +128,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

2
frontend/components/global/ButtonLink.vue
View file

@ -20,7 +20,7 @@ export default defineComponent({
}, },
text: { text: {
type: String, type: String,
default: "Link", required: true,
}, },
icon: { icon: {
type: String, type: String,

8
frontend/components/global/CrudTable.vue
View file

@ -37,7 +37,7 @@
<slot name="button-row"> </slot> <slot name="button-row"> </slot>
</v-card-actions> </v-card-actions>
<div class="mx-2 clip-width"> <div class="mx-2 clip-width">
<v-text-field v-model="search" :label="$tc('search.search')"></v-text-field> <v-text-field v-model="search" :label="$t('search.search')"></v-text-field>
</div> </div>
<v-data-table <v-data-table
v-model="selected" v-model="selected"
@ -57,12 +57,12 @@
:buttons="[ :buttons="[
{ {
icon: $globals.icons.edit, icon: $globals.icons.edit,
text: 'Edit', text: $t('general.edit'),
event: 'edit', event: 'edit',
}, },
{ {
icon: $globals.icons.delete, icon: $globals.icons.delete,
text: 'Delete', text: $t('general.delete'),
event: 'delete', event: 'delete',
}, },
]" ]"
@ -77,7 +77,7 @@
<template #icon> <template #icon>
{{ $globals.icons.download }} {{ $globals.icons.download }}
</template> </template>
{{ $tc("general.download") }} {{ $t("general.download") }}
</BaseButton> </BaseButton>
</v-card-actions> </v-card-actions>
</div> </div>

2
frontend/components/global/InputColor.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-text-field v-model="inputVal" label="Color"> <v-text-field v-model="inputVal" :label="$t('general.color')">
<template #prepend> <template #prepend>
<v-btn class="elevation-0" small height="30px" width="30px" :color="inputVal || 'grey'" @click="setRandomHex"> <v-btn class="elevation-0" small height="30px" width="30px" :color="inputVal || 'grey'" @click="setRandomHex">
<v-icon color="white"> <v-icon color="white">

6
frontend/components/global/InputQuantity.vue
View file

@ -3,7 +3,7 @@
<v-text-field <v-text-field
v-model.number="quantity" v-model.number="quantity"
hide-details hide-details
label="Qty" :label="$t('form.quantity-label-abbreviated')"
:min="min" :min="min"
:max="max" :max="max"
type="number" type="number"
@ -21,10 +21,6 @@ import { computed, defineComponent } from "@nuxtjs/composition-api";
export default defineComponent({ export default defineComponent({
name: "VInputNumber", name: "VInputNumber",
props: { props: {
label: {
type: String,
default: "Qty",
},
min: { min: {
type: Number, type: Number,
default: 0, default: 0,

2
frontend/components/global/MarkdownEditor.vue
View file

@ -5,7 +5,7 @@
:buttons="[ :buttons="[
{ {
icon: previewState ? $globals.icons.edit : $globals.icons.eye, icon: previewState ? $globals.icons.edit : $globals.icons.eye,
text: previewState ? $tc('general.edit') : 'Preview Markdown', text: previewState ? $t('general.edit') : $t('markdown-editor.preview-markdown-button-label'),
event: 'toggle', event: 'toggle',
}, },
]" ]"

13
frontend/components/global/ReportTable.vue
View file

@ -25,7 +25,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, useRouter } from "@nuxtjs/composition-api"; import { defineComponent, useContext, useRouter } from "@nuxtjs/composition-api";
import { ReportSummary } from "~/types/api-types/reports"; import { ReportSummary } from "~/types/api-types/reports";
export default defineComponent({ export default defineComponent({
@ -38,13 +38,14 @@ export default defineComponent({
setup(_, context) { setup(_, context) {
const router = useRouter(); const router = useRouter();
const { i18n } = useContext();
const headers = [ const headers = [
{ text: "Category", value: "category" }, { text: i18n.t("category.category"), value: "category" },
{ text: "Name", value: "name" }, { text: i18n.t("general.name"), value: "name" },
{ text: "Timestamp", value: "timestamp" }, { text: i18n.t("general.timestamp"), value: "timestamp" },
{ text: "Status", value: "status" }, { text: i18n.t("general.status"), value: "status" },
{ text: "Delete", value: "actions" }, { text: i18n.t("general.delete"), value: "actions" },
]; ];
function handleRowClick(item: ReportSummary) { function handleRowClick(item: ReportSummary) {

55
frontend/lang/messages/en-US.json
View file

@ -20,7 +20,8 @@
"portfolio": "Portfolio", "portfolio": "Portfolio",
"production": "Production", "production": "Production",
"support": "Support", "support": "Support",
"version": "Version" "version": "Version",
"unknown-version": "unknown"
}, },
"asset": { "asset": {
"assets": "Assets", "assets": "Assets",
@ -44,7 +45,8 @@
"category-updated": "Category updated", "category-updated": "Category updated",
"uncategorized-count": "Uncategorized {count}", "uncategorized-count": "Uncategorized {count}",
"create-a-category": "Create a Category", "create-a-category": "Create a Category",
"category-name": "Category Name" "category-name": "Category Name",
"category": "Category"
}, },
"events": { "events": {
"apprise-url": "Apprise URL", "apprise-url": "Apprise URL",
@ -65,7 +67,7 @@
"close": "Close", "close": "Close",
"confirm": "Confirm", "confirm": "Confirm",
"confirm-delete-generic": "Are you sure you want to delete this?", "confirm-delete-generic": "Are you sure you want to delete this?",
"copied": "Copied", "copied_message": "Copied!",
"create": "Create", "create": "Create",
"created": "Created", "created": "Created",
"custom": "Custom", "custom": "Custom",
@ -150,7 +152,10 @@
"delete-with-name": "Delete {name}", "delete-with-name": "Delete {name}",
"confirm-delete-generic-with-name": "Are you sure you want to delete this {name}?", "confirm-delete-generic-with-name": "Are you sure you want to delete this {name}?",
"organizer": "Organizer", "organizer": "Organizer",
"transfer": "Transfer" "transfer": "Transfer",
"copy": "Copy",
"color": "Color",
"timestamp": "Timestamp"
}, },
"group": { "group": {
"are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?", "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
@ -241,7 +246,9 @@
"view-scraped-data": "View Scraped Data", "view-scraped-data": "View Scraped Data",
"trim-whitespace-description": "Trim leading and trailing whitespace as well as blank lines", "trim-whitespace-description": "Trim leading and trailing whitespace as well as blank lines",
"trim-prefix-description": "Trim first character from each line", "trim-prefix-description": "Trim first character from each line",
"split-by-numbered-line-description": "Attempts to split a paragraph by matching '1)' or '1.' patterns" "split-by-numbered-line-description": "Attempts to split a paragraph by matching '1)' or '1.' patterns",
"import-by-url": "Import a recipe by URL",
"create-manually": "Create a recipe manually"
}, },
"page": { "page": {
"404-page-not-found": "404 Page not found", "404-page-not-found": "404 Page not found",
@ -254,7 +261,9 @@
"page-update-failed": "Page update failed", "page-update-failed": "Page update failed",
"page-updated": "Page updated", "page-updated": "Page updated",
"pages-update-failed": "Pages update failed", "pages-update-failed": "Pages update failed",
"pages-updated": "Pages updated" "pages-updated": "Pages updated",
"404-not-found": "404 Not Found",
"an-error-occurred": "An error occurred"
}, },
"recipe": { "recipe": {
"add-key": "Add Key", "add-key": "Add Key",
@ -357,7 +366,8 @@
"search": "Search", "search": "Search",
"search-mealie": "Search Mealie (press /)", "search-mealie": "Search Mealie (press /)",
"search-placeholder": "Search...", "search-placeholder": "Search...",
"tag-filter": "Tag Filter" "tag-filter": "Tag Filter",
"search-hint": "Press '/'"
}, },
"settings": { "settings": {
"add-a-new-theme": "Add a New Theme", "add-a-new-theme": "Add a New Theme",
@ -425,7 +435,9 @@
"theme-name-is-required": "Theme Name is required.", "theme-name-is-required": "Theme Name is required.",
"theme-saved": "Theme Saved", "theme-saved": "Theme Saved",
"theme-updated": "Theme updated", "theme-updated": "Theme updated",
"warning": "Warning" "warning": "Warning",
"light-mode": "Light Mode",
"dark-mode": "Dark Mode"
}, },
"token": { "token": {
"active-tokens": "ACTIVE TOKENS", "active-tokens": "ACTIVE TOKENS",
@ -484,7 +496,13 @@
"site-settings": "Site Settings", "site-settings": "Site Settings",
"tags": "Tags", "tags": "Tags",
"toolbox": "Toolbox", "toolbox": "Toolbox",
"language": "Language" "language": "Language",
"maintenance": "Maintenance",
"background-tasks": "Background Tasks",
"parser": "Parser",
"developer": "Developer",
"cookbook": "Cookbook",
"create-cookbook": "Create a new cookbook"
}, },
"signup": { "signup": {
"error-signing-up": "Error Signing Up", "error-signing-up": "Error Signing Up",
@ -572,7 +590,8 @@
"you-are-not-allowed-to-create-a-user": "You are not allowed to create a user", "you-are-not-allowed-to-create-a-user": "You are not allowed to create a user",
"you-are-not-allowed-to-delete-this-user": "You are not allowed to delete this user", "you-are-not-allowed-to-delete-this-user": "You are not allowed to delete this user",
"enable-advanced-content": "Enable Advanced Content", "enable-advanced-content": "Enable Advanced Content",
"enable-advanced-content-description": "Enables advanced features like Recipe Scaling, API keys, Webhooks, and Data Management. Don't worry, you can always change this later" "enable-advanced-content-description": "Enables advanced features like Recipe Scaling, API keys, Webhooks, and Data Management. Don't worry, you can always change this later",
"favorite-recipes": "Favorite Recipes"
}, },
"language-dialog": { "language-dialog": {
"translated": "translated", "translated": "translated",
@ -624,5 +643,21 @@
"default-30-days": "Default 30 Days", "default-30-days": "Default 30 Days",
"expires-at": "Expires At", "expires-at": "Expires At",
"recipe-link-copied-message": "Recipe link copied to clipboard" "recipe-link-copied-message": "Recipe link copied to clipboard"
},
"banner-experimental": {
"title": "Experimental Feature",
"description": "This page contains experimental or still-baking features. Please excuse the mess.",
"issue-link-text": "Track our progress here"
},
"form": {
"quantity-label-abbreviated": "Qty"
},
"markdown-editor": {
"preview-markdown-button-label": "Preview Markdown"
},
"demo": {
"info_message_with_version": "This is a Demo for version: {version}",
"demo_username": "Username: {username}",
"demo_password": "Password: {password}"
} }
} }

8
frontend/layouts/admin.vue
View file

@ -6,7 +6,7 @@
:top-link="topLinks" :top-link="topLinks"
:bottom-links="bottomLinks" :bottom-links="bottomLinks"
:user="{ data: true }" :user="{ data: true }"
secondary-header="Developer" :secondary-header="$t('sidebar.developer')"
:secondary-links="developerLinks" :secondary-links="developerLinks"
/> />
@ -77,17 +77,17 @@ export default defineComponent({
{ {
icon: $globals.icons.wrench, icon: $globals.icons.wrench,
to: "/admin/maintenance", to: "/admin/maintenance",
title: "Maintenance", title: i18n.t("sidebar.maintenance"),
}, },
{ {
icon: $globals.icons.check, icon: $globals.icons.check,
to: "/admin/background-tasks", to: "/admin/background-tasks",
title: "Background Tasks", title: i18n.t("sidebar.background-tasks"),
}, },
{ {
icon: $globals.icons.slotMachine, icon: $globals.icons.slotMachine,
to: "/admin/parser", to: "/admin/parser",
title: "Parser", title: i18n.t("sidebar.parser"),
}, },
]; ];

9
frontend/layouts/blank.vue
View file

@ -4,7 +4,9 @@
<v-banner v-if="isDemo" sticky> <v-banner v-if="isDemo" sticky>
<div class="text-center"> <div class="text-center">
<b> This is a Demo for version: {{ version }} </b> | Username: changeme@email.com | Password: demo <b> {{ $t("demo.info_message_with_version", { version: version }) }} </b> |
{{ $t("demo.demo_username", { username: "changeme@email.com" }) }} |
{{ $t("demo.demo_password", { password: "demo" }) }}
</div> </div>
</v-banner> </v-banner>
@ -17,7 +19,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from "@nuxtjs/composition-api"; import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import TheSnackbar from "~/components/Layout/TheSnackbar.vue"; import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
import { useAppInfo } from "~/composables/api"; import { useAppInfo } from "~/composables/api";
export default defineComponent({ export default defineComponent({
@ -27,7 +29,8 @@ export default defineComponent({
const isDemo = computed(() => appInfo?.value?.demoStatus || false); const isDemo = computed(() => appInfo?.value?.demoStatus || false);
const version = computed(() => appInfo?.value?.version || "unknown"); const { i18n } = useContext();
const version = computed(() => appInfo?.value?.version || i18n.t("about.unknown-version"));
return { return {
appInfo, appInfo,

80
frontend/layouts/default.vue
View file

@ -6,7 +6,7 @@
v-model="sidebar" v-model="sidebar"
absolute absolute
:top-link="topLinks" :top-link="topLinks"
secondary-header="Cookbooks" :secondary-header="$t('sidebar.cookbooks')"
secondary-header-link="/group/cookbooks" secondary-header-link="/group/cookbooks"
:secondary-links="cookbookLinks || []" :secondary-links="cookbookLinks || []"
:bottom-links="isAdmin ? bottomLink : []" :bottom-links="isAdmin ? bottomLink : []"
@ -57,7 +57,9 @@
{{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }} {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
</v-icon> </v-icon>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title> {{ $vuetify.theme.dark ? "Light Mode" : "Dark Mode" }} </v-list-item-title> <v-list-item-title>
{{ $vuetify.theme.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
</v-list-item-title>
</v-list-item> </v-list-item>
</template> </template>
</AppSidebar> </AppSidebar>
@ -89,7 +91,7 @@ export default defineComponent({
middleware: "auth", middleware: "auth",
setup() { setup() {
const { cookbooks } = useCookbooks(); const { cookbooks } = useCookbooks();
const { $globals, $auth, $vuetify } = useContext(); const { $globals, $auth, $vuetify, i18n } = useContext();
const isAdmin = computed(() => $auth.user?.admin); const isAdmin = computed(() => $auth.user?.admin);
@ -113,83 +115,83 @@ export default defineComponent({
}; };
}); });
}); });
return { cookbookLinks, isAdmin, languageDialog, toggleDark, sidebar };
}, const createLinks = [
data() {
return {
createLinks: [
{ {
icon: this.$globals.icons.link, icon: $globals.icons.link,
title: "Import", title: i18n.t("general.import"),
subtitle: "Import a recipe by URL", subtitle: i18n.t("new-recipe.import-by-url"),
to: "/recipe/create/url", to: "/recipe/create/url",
restricted: true, restricted: true,
}, },
{ divider: true }, { divider: true },
{ {
icon: this.$globals.icons.edit, icon: $globals.icons.edit,
title: "Create", title: i18n.t("general.create"),
subtitle: "Create a recipe manually", subtitle: i18n.t("new-recipe.create-manually"),
to: "/recipe/create/new", to: "/recipe/create/new",
restricted: true, restricted: true,
}, },
{ divider: true }, { divider: true },
{ {
icon: this.$globals.icons.pages, icon: $globals.icons.pages,
title: "Cookbook", title: i18n.t("sidebar.cookbook"),
subtitle: "Create a new cookbook", subtitle: i18n.t("sidebar.create-cookbook"),
to: "/group/cookbooks", to: "/group/cookbooks",
restricted: true, restricted: true,
}, },
], ];
bottomLink: [
const bottomLink = [
{ {
icon: this.$globals.icons.cog, icon: $globals.icons.cog,
title: this.$t("general.settings"), title: i18n.t("general.settings"),
to: "/admin/site-settings", to: "/admin/site-settings",
restricted: true, restricted: true,
}, },
], ];
topLinks: [
const topLinks = [
{ {
icon: this.$globals.icons.calendarMultiselect, icon: $globals.icons.calendarMultiselect,
title: this.$t("meal-plan.meal-planner"), title: i18n.t("meal-plan.meal-planner"),
to: "/group/mealplan/planner", to: "/group/mealplan/planner",
restricted: true, restricted: true,
}, },
{ {
icon: this.$globals.icons.formatListCheck, icon: $globals.icons.formatListCheck,
title: this.$t("shopping-list.shopping-lists"), title: i18n.t("shopping-list.shopping-lists"),
to: "/shopping-lists", to: "/shopping-lists",
restricted: true, restricted: true,
}, },
{ {
icon: this.$globals.icons.viewModule, icon: $globals.icons.viewModule,
to: "/recipes/all", to: "/recipes/all",
title: this.$t("sidebar.all-recipes"), title: i18n.t("sidebar.all-recipes"),
}, },
{ {
icon: this.$globals.icons.search, icon: $globals.icons.search,
to: "/search", to: "/search",
title: this.$t("sidebar.search"), title: i18n.t("sidebar.search"),
}, },
{ {
icon: this.$globals.icons.tags, icon: $globals.icons.tags,
to: "/recipes/categories", to: "/recipes/categories",
title: this.$t("sidebar.categories"), title: i18n.t("sidebar.categories"),
}, },
{ {
icon: this.$globals.icons.tags, icon: $globals.icons.tags,
to: "/recipes/tags", to: "/recipes/tags",
title: this.$t("sidebar.tags"), title: i18n.t("sidebar.tags"),
}, },
{ {
icon: this.$globals.icons.potSteam, icon: $globals.icons.potSteam,
to: "/recipes/tools", to: "/recipes/tools",
title: "Tools", title: i18n.t("tool.tools"),
}, },
], ];
};
return { cookbookLinks, createLinks, bottomLink, topLinks, isAdmin, languageDialog, toggleDark, sidebar };
}, },
}); });
</script> </script>

13
frontend/layouts/error.vue
View file

@ -39,9 +39,15 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
useMeta({ title: props.error.statusCode === 404 ? "404 Not Found" : "An error occurred" });
const { $globals, i18n } = useContext(); const { $globals, i18n } = useContext();
useMeta({
title:
props.error.statusCode === 404
? (i18n.t("page.404-not-found") as string)
: (i18n.t("page.an-error-occurred") as string),
});
const buttons = [ const buttons = [
{ icon: $globals.icons.home, to: "/", text: i18n.t("general.home") }, { icon: $globals.icons.home, to: "/", text: i18n.t("general.home") },
{ icon: $globals.icons.primary, to: "/recipes/all", text: i18n.t("page.all-recipes") }, { icon: $globals.icons.primary, to: "/recipes/all", text: i18n.t("page.all-recipes") },
@ -50,7 +56,7 @@ export default defineComponent({
return { return {
buttons, buttons,
} };
}, },
// Needed for useMeta // Needed for useMeta
head: {}, head: {},
@ -67,4 +73,3 @@ p {
font-size: 200px; font-size: 200px;
} }
</style> </style>