wbrawner/mealie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dev-feature/analyze-bundle (#529)

Browse source 
* add bundle analyzer

* use svg icons - closes #522

* fix recent recipes icon

Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-06-16 18:55:32 -08:00 committed by GitHub
parent d475818a9f
commit ee1a11ea57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
65 changed files with 588 additions and 248 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/.env.development
View file

@ -1 +1,2 @@
VUE_APP_API_BASE_URL=http://localhost:9000
PREVIEW_BUNDLE=true

139
frontend/package-lock.json generated
View file

@ -2202,6 +2202,12 @@
"integrity": "sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==",
"dev": true
},
"@mdi/js": {
"version": "5.9.55",
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.9.55.tgz",
"integrity": "sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A==",
"dev": true
},
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -2218,6 +2224,12 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
"dev": true
},
"@polka/url": {
"version": "1.0.0-next.15",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==",
"dev": true
},
"@soda/friendly-errors-webpack-plugin": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@ -11189,6 +11201,17 @@
}
}
},
"sirv": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.12.tgz",
"integrity": "sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==",
"dev": true,
"requires": {
"@polka/url": "^1.0.0-next.15",
"mime": "^2.3.1",
"totalist": "^1.0.0"
}
},
"slash": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@ -12222,6 +12245,12 @@
"integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
"dev": true
},
"totalist": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
"dev": true
},
"tough-cookie": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@ -12751,6 +12780,116 @@
}
}
},
"vue-cli-plugin-webpack-bundle-analyzer": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/vue-cli-plugin-webpack-bundle-analyzer/-/vue-cli-plugin-webpack-bundle-analyzer-4.0.0.tgz",
"integrity": "sha512-gEQt8RMh0j9aD591PXjuMJMoKG6Aaylsi2rZHDiDRE9zGEk7wlUMrIVGwL9bYnMAHSHkojQL4oQinM3WBxCDew==",
"dev": true,
"requires": {
"webpack-bundle-analyzer": "^4.2.0"
},
"dependencies": {
"acorn": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.0.tgz",
"integrity": "sha512-ULr0LDaEqQrMFGyQ3bhJkLsbtrQ8QibAseGZeaSUiT/6zb9IvIkomWHJIvgvwad+hinRAgsI51JcWk2yvwyL+w==",
"dev": true
},
"acorn-walk": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.1.0.tgz",
"integrity": "sha512-mjmzmv12YIG/G8JQdQuz2MUDShEJ6teYpT5bmWA4q7iwoGen8xtt3twF3OvzIUl+Q06aWIjvnwQUKvQ6TtMRjg==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"commander": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
"dev": true
},
"gzip-size": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
"dev": true,
"requires": {
"duplexer": "^0.1.2"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"webpack-bundle-analyzer": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz",
"integrity": "sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ==",
"dev": true,
"requires": {
"acorn": "^8.0.4",
"acorn-walk": "^8.0.0",
"chalk": "^4.1.0",
"commander": "^6.2.0",
"gzip-size": "^6.0.0",
"lodash": "^4.17.20",
"opener": "^1.5.2",
"sirv": "^1.0.7",
"ws": "^7.3.1"
}
},
"ws": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
"integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
"dev": true
}
}
},
"vue-eslint-parser": {
"version": "7.6.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",

2
frontend/package.json
View file

@ -27,6 +27,7 @@
"devDependencies": {
"@intlify/vue-i18n-loader": "^1.1.0",
"@mdi/font": "^5.9.55",
"@mdi/js": "^5.9.55",
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-plugin-pwa": "~4.5.0",
@ -38,6 +39,7 @@
"sass-loader": "^8.0.2",
"vue-cli-plugin-i18n": "~1.0.1",
"vue-cli-plugin-vuetify": "^2.4.1",
"vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.2"
},

4
frontend/src/components/Fallbacks/The404.vue
View file

@ -32,9 +32,9 @@ export default {
data() {
return {
buttons: [
{ icon: "mdi-home", to: "/", text: "Home" },
{ icon: this.$globals.icons.home, to: "/", text: "Home" },
{ icon: this.$globals.icons.primary, to: "/recipes/all", text: "All Recipes" },
{ icon: "mdi-magnify", to: "/search", text: "Search" },
{ icon: this.$globals.icons.search, to: "/search", text: "Search" },
],
};
},

2
frontend/src/components/FormHelpers/LanguageSelector.vue
View file

@ -4,7 +4,7 @@
:items="allLanguages"
item-text="name"
:label="$t('settings.language')"
prepend-icon="mdi-translate"
:prepend-icon="$globals.icons.translate"
:value="selectedItem"
@input="setLanguage"
>

2
frontend/src/components/FormHelpers/TimePickerDialog.vue
View file

@ -4,7 +4,7 @@
<v-text-field
v-model="time"
:label="$t('settings.set-new-time')"
prepend-icon="mdi-clock-time-four-outline"
:prepend-icon="$globals.icons.clockOutline"
readonly
v-bind="attrs"
v-on="on"

2
frontend/src/components/ImportSummaryDialog/index.vue
View file

@ -4,7 +4,7 @@
<v-card>
<v-app-bar dark color="primary mb-2">
<v-icon large left>
mdi-import
{{ $globals.icons.import }}
</v-icon>
<v-toolbar-title class="headline">
{{ $t("settings.backup.import-summary") }}

9
frontend/src/components/Login/LoginForm.vue
View file

@ -14,18 +14,21 @@
<v-card-text>
<v-text-field
v-model="user.email"
prepend-icon="mdi-email"
:prepend-icon="$globals.icons.email"
validate-on-blur
autocomplete
autofocus
:label="`${$t('user.email')} or ${$t('user.username')} `"
type="email"
></v-text-field>
<v-text-field
v-model="user.password"
class="mb-2s"
prepend-icon="mdi-lock"
autocomplete
:prepend-icon="$globals.icons.lock"
:label="$t('user.password')"
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
@click:append="showPassword = !showPassword"
></v-text-field>
<v-card-actions>

8
frontend/src/components/Login/SignUpForm.vue
View file

@ -34,7 +34,7 @@
<v-text-field
v-model="user.email"
light="light"
prepend-icon="mdi-email"
:prepend-icon="$globals.icons.email"
validate-on-blur
:rules="[existsRule, emailRule]"
:label="$t('user.email')"
@ -44,7 +44,7 @@
v-model="user.password"
light="light"
class="mb-2s"
prepend-icon="mdi-lock"
:prepend-icon="$globals.icons.lock"
validate-on-blur
:label="$t('user.password')"
:type="showPassword ? 'text' : 'password'"
@ -54,10 +54,10 @@
v-model="user.passwordConfirm"
light="light"
class="mb-2s"
prepend-icon="mdi-lock"
:prepend-icon="$globals.icons.lock"
:label="$t('user.password')"
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
:rules="[user.password === user.passwordConfirm || $t('user.password-must-match')]"
@click:append="showPassword = !showPassword"
></v-text-field>

8
frontend/src/components/MealPlan/MealPlanNew.vue
View file

@ -3,7 +3,7 @@
<v-card-title class=" headline">
{{ $t("meal-plan.create-a-new-meal-plan") }}
<v-btn color="info" class="ml-auto" @click="setQuickWeek()">
<v-icon left>mdi-calendar-minus</v-icon>
<v-icon left> {{ $globals.icons.calendarMinus }} </v-icon>
{{ $t("meal-plan.quick-week") }}
</v-btn>
</v-card-title>
@ -26,7 +26,7 @@
v-model="startComputedDateFormatted"
:label="$t('meal-plan.start-date')"
persistent-hint
prepend-icon="mdi-calendar"
:prepend-icon="$globals.icons.calendarMinus"
readonly
v-bind="attrs"
v-on="on"
@ -50,7 +50,7 @@
v-model="endComputedDateFormatted"
:label="$t('meal-plan.end-date')"
persistent-hint
prepend-icon="mdi-calendar"
:prepend-icon="$globals.icons.calendarMinus"
readonly
v-bind="attrs"
v-on="on"
@ -69,7 +69,7 @@
<v-card-actions class="mr-5">
<TheButton edit @click="random" v-if="planDays.length > 0" text>
<template v-slot:icon>
mdi-dice-multiple
{{ $globals.icons.diceMultiple }}
</template>
{{ $t("general.random") }}
</TheButton>

6
frontend/src/components/Recipe/CommentSection/index.vue
View file

@ -2,9 +2,9 @@
<v-card>
<v-card-title class="headline">
<v-icon large class="mr-2">
mdi-comment-text-multiple-outline
{{ $globals.icons.commentTextMultipleOutline }}
</v-icon>
{{ $t('recipe.comments') }}
{{ $t("recipe.comments") }}
</v-card-title>
<v-divider class="mx-2"></v-divider>
<v-card class="ma-2" v-for="(comment, index) in comments" :key="comment.id">
@ -43,7 +43,7 @@
<v-card-text v-if="loggedIn">
<v-textarea auto-grow row-height="1" outlined v-model="newComment"> </v-textarea>
<div class="d-flex">
<TheButton class="ml-auto" create @click="createNewComment"> {{ $t('recipe.comment-action') }} </TheButton>
<TheButton class="ml-auto" create @click="createNewComment"> {{ $t("recipe.comment-action") }} </TheButton>
</div>
</v-card-text>
</v-card>

13
frontend/src/components/Recipe/ContextMenu.vue
View file

@ -4,7 +4,7 @@
:title="$t('recipe.delete-recipe')"
:message="$t('recipe.delete-confirmation')"
color="error"
icon="mdi-alert-circle"
:icon="$globals.icons.alertCircle"
ref="deleteRecipieConfirm"
v-on:confirm="deleteRecipe()"
/>
@ -21,7 +21,7 @@
>
<template v-slot:activator="{ on, attrs }">
<v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
<v-icon>{{ menuIcon }}</v-icon>
<v-icon>{{ effMenuIcon }}</v-icon>
</v-btn>
</template>
<v-list dense>
@ -65,7 +65,7 @@ export default {
type: String,
},
menuIcon: {
default: "mdi-dots-vertical",
default: null,
},
name: {
type: String,
@ -76,6 +76,9 @@ export default {
},
},
computed: {
effMenuIcon() {
return this.menuIcon ? this.menuIcon : this.$globals.icons.dotsVertical;
},
loggedIn() {
return this.$store.getters.getIsLoggedIn;
},
@ -89,13 +92,13 @@ export default {
return [
{
title: this.$t("general.print"),
icon: "mdi-printer",
icon: this.$globals.icons.printer,
color: "accent",
action: "print",
},
{
title: this.$t("general.share"),
icon: "mdi-share-variant",
icon: this.$globals.icons.shareVariant,
color: "accent",
action: "share",
},

2
frontend/src/components/Recipe/FavoriteBadge.vue
View file

@ -12,7 +12,7 @@
v-on="on"
>
<v-icon :small="!buttonStyle" color="secondary">
{{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
{{ isFavorite ? $globals.icons.heart : $globals.icons.heartOutline }}
</v-icon>
</v-btn>
</template>

6
frontend/src/components/Recipe/MobileRecipeCard.vue
View file

@ -34,11 +34,7 @@
:value="rating"
></v-rating>
<v-spacer></v-spacer>
<ContextMenu
:slug="slug"
menu-icon="mdi-dots-horizontal"
:name="name"
/>
<ContextMenu :slug="slug" :menu-icon="$globals.icons.dotsHorizontal" :name="name" />
</div>
</v-list-item-content>
</v-list-item>

50
frontend/src/components/Recipe/Parts/Assets.vue
View file

@ -8,14 +8,14 @@
<v-list :flat="!edit" v-if="value.length > 0">
<v-list-item v-for="(item, i) in value" :key="i">
<v-list-item-icon class="ma-auto">
<v-icon v-text="item.icon"></v-icon>
<v-icon v-text="getIcon(item.icon)"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title class="pl-2" v-text="item.name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn v-if="!edit" color="primary" icon :href="assetURL(item.fileName)" target="_blank" top>
<v-icon> mdi-download</v-icon>
<v-icon> {{ $globals.icons.download }} </v-icon>
</v-btn>
<div v-else>
<v-btn color="error" icon @click="deleteAsset(i)" top>
@ -29,7 +29,7 @@
</v-card>
<div class="d-flex ml-auto mt-2">
<v-spacer></v-spacer>
<base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="newAsset.icon">
<base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="getIcon(newAsset.icon)">
<template v-slot:open="{ open }">
<v-btn color="secondary" dark @click="open" v-if="edit">
<v-icon>{{ $globals.icons.create }}</v-icon>
@ -38,11 +38,17 @@
<v-card-text class="pt-2">
<v-text-field dense v-model="newAsset.name" :label="$t('general.name')"></v-text-field>
<div class="d-flex justify-space-between">
<v-select dense :prepend-icon="newAsset.icon" v-model="newAsset.icon" :items="iconOptions" class="mr-2">
<v-select
dense
:prepend-icon="getIcon(newAsset.icon)"
v-model="newAsset.icon"
:items="iconOptions"
class="mr-2"
>
<template v-slot:item="{ item }">
<v-list-item-avatar>
<v-icon class="mr-auto">
{{ item }}
{{ getIcon(item) }}
</v-icon>
</v-list-item-avatar>
{{ item }}
@ -86,23 +92,6 @@ export default {
icon: "mdi-file",
},
iconOptions: ["mdi-file", "mdi-file-pdf-box", "mdi-file-image", "mdi-code-json", "mdi-silverware-fork-knife"],
menu: [
{
title: "Link 1",
icon: "mdi-file",
action: "Do Something",
},
{
title: "Link 1",
icon: "mdi-file",
action: "Do Something",
},
{
title: "Link 1",
icon: "mdi-file",
action: "Do Something",
},
],
};
},
computed: {
@ -111,6 +100,22 @@ export default {
},
},
methods: {
getIcon(val) {
switch (val) {
case "mdi-file":
return this.$globals.icons.file;
case "mdi-file-pdf-box":
return this.$globals.icons.filePDF;
case "mdi-file-image":
return this.$globals.icons.fileImage;
case "mdi-code-json":
return this.$globals.icons.codeJson;
case "mdi-silverware-fork-knife":
return this.$globals.icons.primary;
default:
return this.$globals.icons.file;
}
},
assetURL(assetName) {
return api.recipes.recipeAssetPath(this.slug, assetName);
},
@ -138,4 +143,3 @@ export default {
};
</script>
<style scoped></style>

2
frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue
View file

@ -4,7 +4,7 @@
<template v-slot:activator="{ on, attrs }">
<v-btn color="accent" dark v-bind="attrs" v-on="on">
<v-icon left>
mdi-image
{{ $globals.icons.fileImage }}
</v-icon>
{{ $t("general.image") }}
</v-btn>

2
frontend/src/components/Recipe/Parts/Helpers/SettingsMenu.vue
View file

@ -4,7 +4,7 @@
<template v-slot:activator="{ on, attrs }">
<v-btn color="accent" dark v-bind="attrs" v-on="on">
<v-icon left>
mdi-cog
{{ $globals.icons.cog }}
</v-icon>
{{ $t("general.settings") }}
</v-btn>

3
frontend/src/components/Recipe/Parts/Ingredients.vue
View file

@ -10,14 +10,13 @@
class="mr-2"
:label="$t('recipe.ingredient')"
v-model="value[index].note"
mdi-move-resize
auto-grow
solo
dense
rows="1"
>
<template slot="append-outer">
<v-icon class="handle">mdi-arrow-up-down</v-icon>
<v-icon class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
</template>
<v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
{{ $globals.icons.delete }}

4
frontend/src/components/Recipe/PrintView.vue
View file

@ -33,9 +33,9 @@
<ul>
<li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index">
<v-icon>
mdi-checkbox-blank-outline
{{ $globals.icons.checkboxBlankOutline }}
</v-icon>
<p>{{ ingredient }}</p>
<p>{{ ingredient.note }}</p>
</li>
</ul>
</div>

16
frontend/src/components/Recipe/RecipePageActionMenu.vue
View file

@ -12,7 +12,7 @@
:title="$t('recipe.delete-recipe')"
:message="$t('recipe.delete-confirmation')"
color="error"
icon="mdi-alert-circle"
:icon="$globals.icons.alertCircle"
ref="deleteRecipieConfirm"
v-on:confirm="emitDelete()"
/>
@ -30,7 +30,7 @@
:menu-top="false"
:slug="slug"
:name="name"
menu-icon="mdi-dots-horizontal"
:menu-icon="$globals.icons.mdiDotsHorizontal"
fab
color="info"
:card-menu="false"
@ -85,25 +85,25 @@ export default {
editorButtons() {
return [
{
text: this.$t('general.delete'),
text: this.$t("general.delete"),
icon: this.$globals.icons.delete,
event: DELETE_EVENT,
color: "error",
},
{
text: this.$t('general.json'),
icon: "mdi-code-braces",
text: this.$t("general.json"),
icon: this.$globals.icons.codeBraces,
event: JSON_EVENT,
color: "accent",
},
{
text: this.$t('general.close'),
icon: "mdi-close",
text: this.$t("general.close"),
icon: this.$globals.icons.close,
event: CLOSE_EVENT,
color: "",
},
{
text: this.$t('general.save'),
text: this.$t("general.save"),
icon: this.$globals.icons.save,
event: SAVE_EVENT,
color: "success",

2
frontend/src/components/Recipe/RecipeTimeCard.vue
View file

@ -2,7 +2,7 @@
<div>
<v-chip label color="accent custom-transparent" class="ma-1" v-for="(time, index) in allTimes" :key="index">
<v-icon left>
mdi-clock-outline
{{ $globals.icons.clockOutline }}
</v-icon>
{{ time.name }} |
{{ time.value }}

4
frontend/src/components/UI/Buttons/TheCopyButton.vue
View file

@ -20,12 +20,12 @@
@blur="on.blur"
retain-focus-on-click
>
<v-icon>mdi-content-copy</v-icon>
<v-icon>{{ $globals.icons.contentCopy }}</v-icon>
</v-btn>
</template>
<span>
<v-icon left dark>
mdi-clipboard-check
{{ $globals.icons.clipboardCheck }}
</v-icon>
<slot> {{ $t("general.copied") }}! </slot>
</span>

7
frontend/src/components/UI/Buttons/TheUploadBtn.vue
View file

@ -3,7 +3,7 @@
<input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
<slot v-bind="{ isSelecting, onButtonClick }">
<v-btn :loading="isSelecting" @click="onButtonClick" :small="small" color="accent" :text="textBtn">
<v-icon left> {{ icon }}</v-icon>
<v-icon left> {{ effIcon }}</v-icon>
{{ text ? text : defaultText }}
</v-btn>
</slot>
@ -24,7 +24,7 @@ export default {
},
url: String,
text: String,
icon: { default: "mdi-cloud-upload" },
icon: { default: null },
fileName: { default: "archive" },
textBtn: {
default: true,
@ -36,6 +36,9 @@ export default {
}),
computed: {
effIcon() {
return this.icon ? this.icon : this.$globals.icons.upload;
},
defaultText() {
return this.$t("general.upload");
},

14
frontend/src/components/UI/CardSection.vue
View file

@ -8,7 +8,7 @@
<v-spacer></v-spacer>
<v-btn :icon="$vuetify.breakpoint.xsOnly" text @click="navigateRandom">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
mdi-dice-multiple
{{ $globals.icons.diceMultiple }}
</v-icon>
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
</v-btn>
@ -16,7 +16,7 @@
<template v-slot:activator="{ on, attrs }">
<v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
mdi-sort
{{ $globals.icons.diceMultiple }}
</v-icon>
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
</v-btn>
@ -24,31 +24,31 @@
<v-list>
<v-list-item @click="sortRecipes(EVENTS.az)">
<v-icon left>
mdi-order-alphabetical-ascending
{{ $globals.icons.orderAlphabeticalAscending }}
</v-icon>
<v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipes(EVENTS.rating)">
<v-icon left>
mdi-star
{{ $globals.icons.star }}
</v-icon>
<v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipes(EVENTS.created)">
<v-icon left>
mdi-new-box
{{ $globals.icons.newBox }}
</v-icon>
<v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipes(EVENTS.updated)">
<v-icon left>
mdi-update
{{ $globals.icons.update }}
</v-icon>
<v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipes(EVENTS.shuffle)">
<v-icon left>
mdi-shuffle-variant
{{ $globals.icons.shuffleVariant }}
</v-icon>
<v-list-item-title>{{ $t("general.shuffle") }}</v-list-item-title>
</v-list-item>

2
frontend/src/components/UI/Dialogs/BackupDialog.vue
View file

@ -2,7 +2,7 @@
<div>
<BaseDialog
:title="$t('settings.backup.create-heading')"
titleIcon="mdi-database"
:titleIcon="$globals.icons.database"
@submit="createBackup"
:submit-text="$t('general.create')"
:loading="loading"

4
frontend/src/components/UI/Dialogs/ImportDialog.vue
View file

@ -2,7 +2,7 @@
<div class="text-center">
<BaseDialog
:title="name"
titleIcon="mdi-database"
:titleIcon="$globals.icons.database"
:submit-text="$t('general.import')"
:loading="loading"
ref="baseDialog"
@ -28,7 +28,7 @@
<TheDownloadBtn :download-url="downloadUrl">
<template v-slot:default="{ downloadFile }">
<v-btn class="mr-1" color="info" @click="downloadFile">
<v-icon left> mdi-download </v-icon>
<v-icon left> {{ $globals.icons.download }}</v-icon>
{{ $t("general.download") }}
</v-btn>
</template>

8
frontend/src/components/UI/Dialogs/SearchDialog.vue
View file

@ -26,22 +26,22 @@
hide-details
single-line
:placeholder="$t('search.search')"
prepend-inner-icon="mdi-magnify"
:prepend-inner-icon="$globals.icons.search"
>
</v-text-field>
</FuseSearchBar>
<v-btn v-if="isMobile" x-small fab light @click="dialog = false">
<v-icon>
mdi-close
{{ $globals.icons.close }}
</v-icon>
</v-btn>
</v-app-bar>
<v-card class="mt-1 pa-1" relative>
<v-card-actions>
<div class="mr-auto">
{{ $t('search.results') }}
{{ $t("search.results") }}
</div>
<router-link to="/search"> {{ $t('search.advanced-search') }} </router-link>
<router-link to="/search"> {{ $t("search.advanced-search") }} </router-link>
</v-card-actions>
<v-card-actions v-if="loading">
<SiteLoader :loading="loading" />

8
frontend/src/components/UI/GlobalSnackbar.vue
View file

@ -32,13 +32,13 @@ export default {
icon() {
switch (this.snackbar.color) {
case "error":
return "mdi-alert";
return this.$globals.icons.alert;
case "success":
return "mdi-checkbox-marked-circle";
return this.$globals.icons.checkboxMarkedCircle;
case "info":
return "mdi-information";
return this.$globals.icons.information;
default:
return "mdi-bell-alert";
return this.$globals.icons.bellAlert;
}
},
},

4
frontend/src/components/UI/LogCard.vue
View file

@ -9,7 +9,7 @@
solo
:label="$t('about.log-lines')"
type="number"
append-icon="mdi-refresh-circle"
:append-icon="$globals.icons.refreshCircle"
v-model="lines"
@click:append="getLogText"
suffix="lines"
@ -19,7 +19,7 @@
<TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log">
<template v-slot:default="{ downloadFile }">
<v-btn bottom right relative fab icon color="primary" @click="downloadFile">
<v-icon> mdi-download </v-icon>
<v-icon> {{ $globals.icons.download }}</v-icon>
</v-btn>
</template>
</TheDownloadBtn>

2
frontend/src/components/UI/Search/SearchBar.vue
View file

@ -18,7 +18,7 @@
>
<template #prepend-inner>
<v-icon color="grey lighten-3" size="29">
mdi-magnify
{{ $globals.icons.search }}
</v-icon>
</template>
</v-text-field>

2
frontend/src/components/UI/Search/SearchDialog.vue
View file

@ -34,7 +34,7 @@
</div>
</v-card-text>
<v-btn v-if="isMobile" fab bottom @click="dialog = false" class="ma-2">
<v-icon> mdi-close </v-icon>
<v-icon> {{ $globals.icons.close }} </v-icon>
</v-btn>
</v-card>
</v-dialog>

6
frontend/src/components/UI/TheAppBar.vue
View file

@ -3,7 +3,7 @@
<TheSidebar ref="theSidebar" />
<v-app-bar clipped-left dense app color="primary" dark class="d-print-none" :bottom="isMobile">
<v-btn icon @click="openSidebar">
<v-icon> mdi-menu </v-icon>
<v-icon> {{ $globals.icons.menu }}</v-icon>
</v-btn>
<router-link to="/">
<v-btn icon>
@ -21,7 +21,7 @@
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn icon class="mr-1" small v-bind="attrs" v-on="on" @click="isDark = !isDark">
<v-icon v-text="isDark ? 'mdi-weather-sunny' : 'mdi-weather-night'"> </v-icon>
<v-icon v-text="isDark ? $globals.icons.weatherSunny : $globals.icons.weatherNight"> </v-icon>
</v-btn>
</template>
<span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
@ -31,7 +31,7 @@
</div>
<div v-else>
<v-btn icon @click="$refs.recipeSearch.open()">
<v-icon> mdi-magnify </v-icon>
<v-icon> {{ $globals.icons.search }} </v-icon>
</v-btn>
<SearchDialog ref="recipeSearch" />
</div>

10
frontend/src/components/UI/TheRecipeFab.vue
View file

@ -3,7 +3,7 @@
<v-dialog v-model="addRecipe" width="650" @click:outside="reset">
<v-card :loading="processing">
<v-app-bar dark color="primary mb-2">
<v-icon large left v-if="!processing"> mdi-link </v-icon>
<v-icon large left v-if="!processing"> {{ $globals.icons.link }} </v-icon>
<v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
<v-toolbar-title class="headline">
@ -29,7 +29,7 @@
<v-expand-transition>
<v-alert v-if="error" color="error" class="mt-6 white--text">
<v-card-title class="ma-0 pa-0">
<v-icon left color="white" x-large> mdi-robot </v-icon>
<v-icon left color="white" x-large> {{ $globals.icons.robot }} </v-icon>
{{ $t("new-recipe.error-title") }}
</v-card-title>
<v-divider class="my-3 mx-2"></v-divider>
@ -60,7 +60,7 @@
:to="{ path: '/recipes/debugger', query: { test_url: recipeURL } }"
@click="addRecipe = false"
>
<v-icon> mdi-external-link </v-icon>
<v-icon left> {{ $globals.icons.externalLink }} </v-icon>
View Scraped Data
</v-btn>
</div>
@ -72,7 +72,7 @@
<v-card-actions>
<v-btn color="grey" text @click="reset">
<v-icon left> mdi-close </v-icon>
<v-icon left> {{ $globals.icons.close }}</v-icon>
{{ $t("general.close") }}
</v-btn>
<v-spacer></v-spacer>
@ -93,7 +93,7 @@
<v-tooltip left dark color="primary">
<template v-slot:activator="{ on, attrs }">
<v-btn fab dark small color="primary" v-bind="attrs" v-on="on" @click="addRecipe = true">
<v-icon>mdi-link</v-icon>
<v-icon>{{ $globals.icons.link }} </v-icon>
</v-btn>
</template>
<span>{{ $t("new-recipe.from-url") }}</span>

24
frontend/src/components/UI/TheSidebar.vue
View file

@ -6,10 +6,10 @@
<v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
<v-list-item-icon>
<v-icon> mdi-heart </v-icon>
<v-icon> {{ $globals.icons.heart }} </v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title> {{ $t('general.favorites') }} </v-list-item-title>
<v-list-item-title> {{ $t("general.favorites") }} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
@ -28,13 +28,13 @@
<v-list nav dense class="fixedBottom" v-if="!isMain">
<v-list-item href="https://github.com/sponsors/hay-kot" target="_target">
<v-list-item-icon>
<v-icon color="pink"> mdi-heart </v-icon>
<v-icon color="pink"> {{ $globals.icons.heart }} </v-icon>
</v-list-item-icon>
<v-list-item-title> {{ $t("about.support") }} </v-list-item-title>
</v-list-item>
<v-list-item to="/admin/about">
<v-list-item-icon class="mr-3 pt-1">
<v-icon :color="newVersionAvailable ? 'red--text' : ''"> mdi-information </v-icon>
<v-icon :color="newVersionAvailable ? 'red--text' : ''"> {{ $globals.icons.information }} </v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
@ -99,17 +99,17 @@ export default {
baseMainLinks() {
return [
{
icon: "mdi-home",
icon: this.$globals.icons.home,
to: "/",
title: this.$t("page.home-page"),
},
{
icon: "mdi-magnify",
icon: this.$globals.icons.search,
to: "/search",
title: this.$t("search.search"),
},
{
icon: "mdi-view-module",
icon: this.$globals.icons.viewModule,
to: "/recipes/all",
title: this.$t("page.all-recipes"),
},
@ -129,7 +129,7 @@ export default {
const pages = this.$store.getters.getCustomPages;
if (pages.length > 0) {
pages.sort((a, b) => a.position - b.position);
return pages.map((x) => ({
return pages.map(x => ({
title: x.name,
to: `/pages/${x.slug}`,
icon: this.$globals.icons.pages,
@ -152,17 +152,17 @@ export default {
adminLinks() {
return [
{
icon: "mdi-view-dashboard",
icon: this.$globals.icons.viewDashboard,
to: "/admin/dashboard",
title: this.$t("general.dashboard"),
},
{
icon: "mdi-cog",
icon: this.$globals.icons.cog,
to: "/admin/settings",
title: this.$t("settings.site-settings"),
},
{
icon: "mdi-tools",
icon: this.$globals.icons.tools,
to: "/admin/toolbox",
title: this.$t("settings.toolbox.toolbox"),
},
@ -172,7 +172,7 @@ export default {
title: this.$t("user.manage-users"),
},
{
icon: "mdi-database-import",
icon: this.$globals.icons.import,
to: "/admin/migrations",
title: this.$t("settings.migrations"),
},

14
frontend/src/components/UI/TheSiteMenu.vue
View file

@ -46,37 +46,37 @@ export default {
login: true,
},
{
icon: "mdi-calendar-week",
icon: this.$globals.icons.calendarWeek,
title: this.$t("meal-plan.dinner-this-week"),
nav: "/meal-plan/this-week",
restricted: true,
},
{
icon: "mdi-calendar-today",
icon: this.$globals.icons.calendarToday,
title: this.$t("meal-plan.dinner-today"),
nav: "/meal-plan/today",
restricted: true,
},
{
icon: "mdi-calendar-multiselect",
icon: this.$globals.icons.calendarMultiselect,
title: this.$t("meal-plan.planner"),
nav: "/meal-plan/planner",
restricted: true,
},
{
icon: "mdi-format-list-checks",
title: this.$t('shopping-list.shopping-lists'),
icon: this.$globals.icons.formatListCheck,
title: this.$t("shopping-list.shopping-lists"),
nav: "/shopping-list",
restricted: true,
},
{
icon: "mdi-logout",
icon: this.$globals.icons.logout,
title: this.$t("user.logout"),
restricted: true,
nav: "/logout",
},
{
icon: "mdi-cog",
icon: this.$globals.icons.cog,
title: this.$t("general.settings"),
nav: "/admin",
restricted: true,

2
frontend/src/main.js
View file

@ -6,7 +6,7 @@ import VueRouter from "vue-router";
import { router } from "./routes";
import { globals } from "@/utils/globals";
import i18n from "./i18n";
import "@mdi/font/css/materialdesignicons.css";
// import "@mdi/font/css/materialdesignicons.css";
import "typeface-roboto/index.css";
import "./registerServiceWorker";

32
frontend/src/pages/Admin/About/index.vue
View file

@ -4,27 +4,27 @@
<v-spacer></v-spacer>
<v-btn href="https://github.com/sponsors/hay-kot" target="_blank" class="mx-1" color="secondary">
<v-icon left>
mdi-heart
{{ $globals.icons.heart }}
</v-icon>
{{$t('about.support')}}
{{ $t("about.support") }}
</v-btn>
<v-btn href="https://github.com/hay-kot" target="_blank" class="mx-1" color="secondary">
<v-icon left>
mdi-github
{{ $globals.icons.github }}
</v-icon>
{{$t('about.github')}}
{{ $t("about.github") }}
</v-btn>
<v-btn href="https://hay-kot.dev" target="_blank" class="mx-1" color="secondary">
<v-icon left>
mdi-account
{{ $globals.icons.account }}
</v-icon>
{{$t('about.portfolio')}}
{{ $t("about.portfolio") }}
</v-btn>
<v-btn href="https://hay-kot.github.io/mealie/" target="_blank" class="mx-1" color="secondary">
<v-icon left>
mdi-folder-outline
{{ $globals.icons.folderOutline }}
</v-icon>
{{$t('about.docs')}}
{{ $t("about.docs") }}
</v-btn>
<v-spacer></v-spacer>
</v-app-bar>
@ -53,7 +53,7 @@
<TheDownloadBtn download-url="/api/debug/last-recipe-json">
<template v-slot:default="{ downloadFile }">
<v-btn color="primary" @click="downloadFile">
<v-icon left> mdi-code-braces </v-icon> {{ $t("about.download-recipe-json") }}
<v-icon left> {{ $globals.icons.codeBraces }} </v-icon> {{ $t("about.download-recipe-json") }}
</v-btn>
</template>
</TheDownloadBtn>
@ -85,37 +85,37 @@ export default {
this.prettyInfo = [
{
name: this.$t("about.version"),
icon: "mdi-information",
icon: this.$globals.icons.information,
value: debugInfo.version,
},
{
name: this.$t("about.application-mode"),
icon: "mdi-dev-to",
icon: this.$globals.icons.devTo,
value: debugInfo.production ? this.$t("about.production") : this.$t("about.development"),
},
{
name: this.$t("about.demo-status"),
icon: "mdi-test-tube",
icon: this.$globals.icons.testTube,
value: debugInfo.demoStatus ? this.$t("about.demo") : this.$t("about.not-demo"),
},
{
name: this.$t("about.api-port"),
icon: "mdi-api",
icon: this.$globals.icons.api,
value: debugInfo.apiPort,
},
{
name: this.$t("about.api-docs"),
icon: "mdi-file-document",
icon: this.$globals.icons.file,
value: debugInfo.apiDocs ? this.$t("general.enabled") : this.$t("general.disabled"),
},
{
name: this.$t("about.database-type"),
icon: "mdi-database",
icon: this.$globals.icons.database,
value: debugInfo.dbType,
},
{
name: this.$t("about.database-url"),
icon: "mdi-file-cabinet",
icon: this.$globals.icons.database,
value: debugInfo.dbUrl,
},
{

6
frontend/src/pages/Admin/Dashboard/BackupViewer.vue
View file

@ -8,7 +8,7 @@
@import="importBackup"
@delete="deleteBackup"
/>
<StatCard icon="mdi-backup-restore" :color="color">
<StatCard :icon="$globals.icons.backupRestore" :color="color">
<template v-slot:after-heading>
<div class="ml-auto text-right">
<h2 class="body-3 grey--text font-weight-light">
@ -24,7 +24,7 @@
<TheUploadBtn url="/api/backups/upload" @uploaded="getAvailableBackups">
<template v-slot="{ isSelecting, onButtonClick }">
<v-btn :loading="isSelecting" class="mx-2" small color="info" @click="onButtonClick">
<v-icon left> mdi-cloud-upload </v-icon> {{ $t("general.upload") }}
<v-icon left> {{ $globals.icons.upload }} </v-icon> {{ $t("general.upload") }}
</v-btn>
</template>
</TheUploadBtn>
@ -40,7 +40,7 @@
<v-list-item @click.prevent="openDialog(item)">
<v-list-item-avatar>
<v-icon large dark :color="color">
mdi-database
{{ $globals.icons.database }}
</v-icon>
</v-list-item-avatar>

14
frontend/src/pages/Admin/Dashboard/EventViewer.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<StatCard icon="mdi-bell-ring" :color="color">
<StatCard :icon="$globals.icons.bellAlert" :color="color">
<template v-slot:after-heading>
<div class="ml-auto text-right">
<h2 class="body-3 grey--text font-weight-light">
@ -14,7 +14,7 @@
</template>
<div class="d-flex row py-3 justify-end">
<v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
<v-icon left> mdi-notification-clear-all </v-icon> {{ $t("general.clear") }}
<v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
</v-btn>
</div>
<template v-slot:bottom>
@ -61,23 +61,23 @@ export default {
events: [],
icons: {
general: {
icon: "mdi-information",
icon: this.$globals.icons.information,
color: "info",
},
recipe: {
icon: "mdi-silverware-fork-knife",
icon: this.$globals.icons.primary,
color: "primary",
},
backup: {
icon: "mdi-database",
icon: this.$globals.icons.database,
color: "primary",
},
schedule: {
icon: "mdi-calendar-clock",
icon: this.$globals.icons.calendar,
color: "primary",
},
migration: {
icon: "mdi-database-import",
icon: this.$globals.icons.backupRestore,
color: "primary",
},
user: {

2
frontend/src/pages/Admin/Dashboard/index.vue
View file

@ -2,7 +2,7 @@
<div class="mt-10">
<v-row>
<v-col cols="12" sm="12" md="4">
<StatCard icon="mdi-silverware-fork-knife">
<StatCard :icon="$globals.icons.primary">
<template v-slot:after-heading>
<div class="ml-auto text-right">
<h2 class="body-3 grey--text font-weight-light">

8
frontend/src/pages/Admin/ManageUsers/GroupCard.vue
View file

@ -8,7 +8,7 @@
groupName: group.name,
})
"
icon="mdi-alert"
:icon="$globals.icons.alert"
@confirm="deleteGroup"
:width="450"
@close="closeGroupDelete"
@ -100,17 +100,17 @@ export default {
},
{
text: this.$t("user.total-mealplans"),
icon: "mdi-food",
icon: this.$globals.icons.food,
value: this.group.mealplans.length,
},
{
text: this.$t("user.webhooks-enabled"),
icon: "mdi-webhook",
icon: this.$globals.icons.webhook,
value: this.group.webhookEnable ? this.$t("general.yes") : this.$t("general.no"),
},
{
text: this.$t("user.webhook-time"),
icon: "mdi-clock-outline",
icon: this.$globals.icons.clockOutline,
value: this.group.webhookTime,
},
];

2
frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
View file

@ -8,7 +8,7 @@
v-model="filter"
clearable
class="mr-2 pt-0"
append-icon="mdi-filter"
:append-icon="$globals.icons.filter"
:label="$t('general.filter')"
single-line
hide-details

6
frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
View file

@ -8,14 +8,14 @@
link: activeName,
})
"
icon="mdi-alert"
:icon="$globals.icons.alert"
@confirm="deleteToken"
:width="450"
@close="closeDelete"
/>
<v-toolbar flat>
<v-icon large color="accent" class="mr-1">
mdi-link-variant
{{ $globals.icons.externalLink }}
</v-icon>
<v-toolbar-title class="headine">
{{ $t("signup.sign-up-links") }}
@ -75,7 +75,7 @@
<template v-slot:item.admin="{ item }">
<v-btn small :color="item.admin ? 'success' : 'error'" text>
<v-icon small left>
mdi-account-cog
{{ $globals.icons.admin }}
</v-icon>
{{ item.admin ? $t("general.yes") : $t("general.no") }}
</v-btn>

6
frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
View file

@ -9,7 +9,7 @@
activeId,
})
"
icon="mdi-alert"
:icon="$globals.icons.alert"
@confirm="deleteUser"
:width="450"
@close="closeDelete"
@ -20,7 +20,7 @@
<v-text-field
v-model="search"
class="mr-2"
append-icon="mdi-filter"
:append-icon="$globals.icons.filter"
:label="$t('general.filter')"
single-line
hide-details
@ -117,7 +117,7 @@
</v-btn>
<v-btn small color="success" @click="editItem(item)">
<v-icon small left class="mr-2">
mdi-pencil
{{ $globals.icons.edit }}
</v-icon>
{{ $t("general.edit") }}
</v-btn>

2
frontend/src/pages/Admin/ManageUsers/index.vue
View file

@ -11,7 +11,7 @@
<v-tab href="#sign-ups">
{{ $t("signup.sign-up-links") }}
<v-icon>mdi-account-plus-outline</v-icon>
<v-icon>{{ $globals.icons.accountPlusOutline }}</v-icon>
</v-tab>
<v-tab href="#groups" @click="reqGroups">

2
frontend/src/pages/Admin/Migration/MigrationCard.vue
View file

@ -20,7 +20,7 @@
<v-card-text>
<v-row align="center">
<v-col cols="2">
<v-icon large color="primary">mdi-import</v-icon>
<v-icon large color="primary">{{ $globals.icons.import }}</v-icon>
</v-col>
<v-col cols="10">
<div class="text-truncate">

2
frontend/src/pages/Admin/Migration/MigrationDialog.vue
View file

@ -4,7 +4,7 @@
<v-card>
<v-app-bar dark color="primary mb-2">
<v-icon large left>
mdi-import
{{ $globals.icons.import }}
</v-icon>
<v-toolbar-title class="headline">
Migration Summary

8
frontend/src/pages/Admin/Profile/APITokenCard.vue
View file

@ -1,5 +1,5 @@
<template>
<StatCard icon="mdi-api" color="accent">
<StatCard :icon="$globals.icons.api" color="accent">
<template v-slot:after-heading>
<div class="ml-auto text-right">
<h2 class="body-3 grey--text font-weight-light">
@ -18,7 +18,7 @@
<v-list-item @click.prevent>
<v-list-item-avatar>
<v-icon large dark color="accent">
mdi-api
{{ $globals.icons.api }}
</v-icon>
</v-list-item-avatar>
@ -41,7 +41,7 @@
<v-spacer></v-spacer>
<BaseDialog
:title="$t('settings.token.create-an-api-token')"
title-icon="mdi-api"
:title-icon="$globals.icons.api"
@submit="createToken"
:submit-text="buttonText"
:loading="loading"
@ -57,7 +57,7 @@
:label="$t('settings.token.api-token')"
readonly
v-model="createdToken"
append-outer-icon="mdi-content-copy"
:append-outer-icon="$globals.icons.contentCopy"
@click:append-outer="copyToken"
>
</v-textarea>

8
frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
View file

@ -21,7 +21,7 @@
/>
</div>
<v-subheader>{{$t('user.users-header')}}</v-subheader>
<v-subheader>{{ $t("user.users-header") }}</v-subheader>
<v-divider></v-divider>
<v-virtual-scroll v-if="currentGroup.users" :items="currentGroup.users" height="257" item-height="64">
@ -46,7 +46,7 @@
<div class="mt-3">
<h3 class="display-2 font-weight-light text--primary">
<v-icon x-large>
mdi-food-variant
{{ $globals.icons.food }}
</v-icon>
<small> {{ $t("meal-plan.mealplan-settings") }} </small>
</h3>
@ -92,7 +92,7 @@
<v-card-actions class="pa-0">
<v-spacer></v-spacer>
<v-btn small color="success" @click="addWebhook">
<v-icon left> mdi-webhook </v-icon>
<v-icon left> {{ $globals.icons.webhook }} </v-icon>
{{ $t("general.new") }}
</v-btn>
</v-card-actions>
@ -101,7 +101,7 @@
<v-divider></v-divider>
<v-card-actions class="pb-0">
<v-btn class="ma-2" color="info" @click="testWebhooks">
<v-icon left> mdi-webhook </v-icon>
<v-icon left> {{ $globals.icons.webhook }} </v-icon>
{{ $t("settings.webhooks.test-webhooks") }}
</v-btn>
<v-spacer></v-spacer>

14
frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<StatCard icon="mdi-format-color-fill" :color="color">
<StatCard :icon="$globals.icons.formatColorFill" :color="color">
<template v-slot:after-heading>
<div class="ml-auto text-right">
<div class="body-3 grey--text font-weight-light" v-text="$t('general.themes')" />
@ -14,21 +14,21 @@
<template v-slot:actions>
<v-btn-toggle v-model="darkMode" color="primary " mandatory>
<v-btn small value="system">
<v-icon>mdi-desktop-tower-monitor</v-icon>
<v-icon>{{ $globals.icons.desktopTowerMonitor }}</v-icon>
<span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
{{ $t("settings.theme.default-to-system") }}
</span>
</v-btn>
<v-btn small value="light">
<v-icon>mdi-white-balance-sunny</v-icon>
<v-icon>{{ $globals.icons.weatherSunny }}</v-icon>
<span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
{{ $t("settings.theme.light") }}
</span>
</v-btn>
<v-btn small value="dark">
<v-icon>mdi-weather-night</v-icon>
<v-icon>{{ $globals.icons.weatherNight }}</v-icon>
<span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
{{ $t("settings.theme.dark") }}
</span>
@ -43,7 +43,7 @@
<v-list-item @click="selectedTheme = item">
<v-list-item-avatar>
<v-icon large dark :color="item.colors.primary">
mdi-format-color-fill
{{ $globals.icons.formatColorFill }}
</v-icon>
</v-list-item-avatar>
@ -80,7 +80,7 @@
<BaseDialog
:loading="loading"
:title="modalLabel.title"
title-icon="mdi-format-color-fill"
:title-icon="$globals.icons.formatColorFill"
modal-width="700"
ref="themeDialog"
:submit-text="modalLabel.button"
@ -92,7 +92,7 @@
:label="$t('settings.theme.theme-name')"
v-model="defaultData.name"
:rules="[rules.required]"
:append-outer-icon="jsonEditor ? 'mdi-form-select' : 'mdi-code-braces'"
:append-outer-icon="jsonEditor ? $globals.icons.formSelect : $globals.icons.codeBraces"
@click:append-outer="jsonEditor = !jsonEditor"
></v-text-field>
<v-row dense dflex wrap justify-content-center v-if="defaultData.colors && !jsonEditor">

14
frontend/src/pages/Admin/Profile/UserCard.vue
View file

@ -20,7 +20,7 @@
<template v-slot:actions>
<BaseDialog
:title="$t('user.reset-password')"
title-icon="mdi-lock"
:title-icon="$globals.icons.lock"
:submit-text="$t('settings.change-password')"
@submit="changePassword"
:loading="loading"
@ -28,8 +28,8 @@
>
<template v-slot:open="{ open }">
<v-btn color="info" class="mr-1" small @click="open">
<v-icon left>mdi-lock</v-icon>
{{$t('settings.change-password')}}
<v-icon left>{{ $globals.icons.lock }}</v-icon>
{{ $t("settings.change-password") }}
</v-btn>
</template>
@ -37,7 +37,7 @@
<v-form ref="passChange">
<v-text-field
v-model="password.current"
prepend-icon="mdi-lock"
:prepend-icon="$globals.icons.lock"
:label="$t('user.current-password')"
:rules="[existsRule]"
validate-on-blur
@ -46,7 +46,7 @@
></v-text-field>
<v-text-field
v-model="password.newOne"
prepend-icon="mdi-lock"
:prepend-icon="$globals.icons.lock"
:label="$t('user.new-password')"
:rules="[minRule]"
:type="showPassword ? 'text' : 'password'"
@ -54,7 +54,7 @@
></v-text-field>
<v-text-field
v-model="password.newTwo"
prepend-icon="mdi-lock"
:prepend-icon="$globals.icons.lock"
:label="$t('user.confirm-password')"
:rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
validate-on-blur
@ -91,7 +91,7 @@
<v-divider></v-divider>
<v-card-actions class="pb-1 pt-3">
<TheUploadBtn
icon="mdi-image-area"
:icon="$globals.icons.fileImage"
:text="$t('user.upload-photo')"
:url="userProfileImage"
file-name="profile_image"

2
frontend/src/pages/Admin/Settings/CreatePageDialog.vue
View file

@ -3,7 +3,7 @@
<v-card>
<v-app-bar dark dense color="primary">
<v-icon left>
mdi-page-layout-body
{{ $globals.icons.pageLayoutBody }}
</v-icon>
<v-toolbar-title class="headline">

8
frontend/src/pages/Admin/Settings/HomePageSettings.vue
View file

@ -28,7 +28,7 @@
<v-card outlined min-height="350px">
<v-app-bar dark dense color="primary">
<v-icon left>
mdi-home
{{ $globals.icons.home }}
</v-icon>
<v-toolbar-title class="headline">
@ -48,7 +48,7 @@
>
<v-list-item v-for="(item, index) in settings.categories" :key="`${item.name}-${index}`">
<v-list-item-icon>
<v-icon>mdi-menu</v-icon>
<v-icon> {{ $globals.icons.menu }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
@ -88,7 +88,7 @@
>
<v-list-item v-for="(item, index) in allCategories" :key="`${item.name}-${index}`">
<v-list-item-icon>
<v-icon>mdi-menu</v-icon>
<v-icon>{{ $globals.icons.menu }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
@ -114,7 +114,7 @@
<v-col cols="12" md="3" sm="12">
<v-select
dense
prepend-icon="mdi-calendar-week-begin"
:prepend-icon="$globals.icons.calendarWeekBegin"
v-model="settings.firstDayOfWeek"
:items="allDays"
item-text="name"

2
frontend/src/pages/Admin/Settings/index.vue
View file

@ -6,7 +6,7 @@
<span>
<v-btn class="pt-1" text href="/docs">
{{ $t("settings.local-api") }}
<v-icon right>mdi-open-in-new</v-icon>
<v-icon right>{{ $globals.icons.openInNew }}</v-icon>
</v-btn>
</span>
</v-card-title>

2
frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
View file

@ -61,7 +61,7 @@
hide-details
single-line
:placeholder="$t('search.search')"
prepend-inner-icon="mdi-magnify"
:prepend-inner-icon="$globals.icons.search"
>
</v-text-field>
</fuse-search-bar>

10
frontend/src/pages/Admin/ToolBox/EventNotification.vue
View file

@ -5,7 +5,7 @@
<v-spacer></v-spacer>
<BaseDialog
:keep-open="keepDialogOpen"
title-icon="mdi-bell-alert"
:title-icon="$globals.icons.bellAlert"
:title="$t('general.new') + ' ' + $t('events.notification')"
@submit="createNotification"
>
@ -46,7 +46,7 @@
>
</v-text-field>
<v-btn class="d-flex ml-auto" small color="info" @click="testByURL(newNotification.notificationUrl)">
<v-icon left> mdi-test-tube</v-icon>
<v-icon left> {{ $globals.icons.testTube }}</v-icon>
{{ $t("general.test") }}
</v-btn>
<v-subheader class="pa-0 mb-0">
@ -85,13 +85,13 @@
v-else-if="item[boolHeader.value] === true || item[boolHeader.value] === false"
:color="item[boolHeader.value] ? 'success' : 'gray'"
>
{{ item[boolHeader.value] ? "mdi-check" : "mdi-close" }}
{{ item[boolHeader.value] ? $globals.icons.check : $globals.icons.close }}
</v-icon>
<div v-else-if="boolHeader.text === 'Actions'">
<TheButton class="mr-1" delete x-small minor @click="deleteNotification(item.id)" />
<TheButton edit x-small @click="testByID(item.id)">
<template v-slot:icon>
mdi-test-tube
{{ $globals.icons.testTube }}
</template>
{{ $t("general.test") }}
</TheButton>
@ -136,7 +136,7 @@ export default {
notificationTypes: [
{
text: "General",
icon: "mdi-bell-alert",
icon: this.$globals.icons.bellAlert,
},
{
text: "Discord",

4
frontend/src/pages/Admin/ToolBox/index.vue
View file

@ -6,7 +6,7 @@
<v-tab href="#event-notifications">
{{ $t("settings.notify") }}
<v-icon>mdi-bell-alert</v-icon>
<v-icon>{{ $globals.icons.bellAlert }}</v-icon>
</v-tab>
<v-tab href="#category-editor">
{{ $t("recipe.categories") }}
@ -19,7 +19,7 @@
</v-tab>
<v-tab href="#organize">
{{ $t("settings.organize") }}
<v-icon>mdi-broom</v-icon>
<v-icon>{{ $globals.icons.broom }}</v-icon>
</v-tab>
</v-tabs>

2
frontend/src/pages/HomePage.vue
View file

@ -1,7 +1,7 @@
<template>
<v-container>
<CardSection
title-icon="mdi-test"
title-icon="mdi-none"
v-if="siteSettings.showRecent"
:title="$t('page.recent')"
:recipes="recentRecipes"

4
frontend/src/pages/MealPlan/Planner.vue
View file

@ -20,7 +20,7 @@
<v-card-actions class="mb-0 px-2 py-0">
<v-btn text small v-if="!mealplan.shoppingList" color="info" @click="createShoppingList(mealplan.uid)">
<v-icon left small>
mdi-cart-check
{{ $globals.icons.mdiCartCheck }}
</v-icon>
{{ $t("shopping-list.create-shopping-list") }}
</v-btn>
@ -33,7 +33,7 @@
:to="{ path: '/shopping-list', query: { list: mealplan.shoppingList } }"
>
<v-icon left small>
mdi-cart-check
{{ $globals.icons.mdiCartCheck }}
</v-icon>
{{ $t("shopping-list.shopping-list") }}
</v-btn>

2
frontend/src/pages/Recipe/ScraperDebugger.vue
View file

@ -3,7 +3,7 @@
<v-text-field v-model="testUrl" outlined single-line label="Recipe Url"> </v-text-field>
<div class="d-flex">
<v-btn class="mt-0 ml-auto" color="info" @click="getTestData">
<v-icon left> mdi-test-tube </v-icon>
<v-icon left> {{ $globals.icons.testTube}} </v-icon>
Test Scrape
</v-btn>
</div>

10
frontend/src/pages/SearchPage/index.vue
View file

@ -7,7 +7,7 @@
outlined
color="primary accent-3"
:placeholder="$t('search.search-placeholder')"
append-icon="mdi-magnify"
:append-icon="$globals.icons.search"
>
</v-text-field>
</v-col>
@ -39,7 +39,13 @@
</v-col>
</v-row>
<CardSection class="mt-n9" title-icon="mdi-mag" :recipes="showRecipes" :hardLimit="maxResults" @sort="assignFuzzy" />
<CardSection
class="mt-n9"
:title-icon="$globals.icons.magnify"
:recipes="showRecipes"
:hardLimit="maxResults"
@sort="assignFuzzy"
/>
</v-container>
</template>

12
frontend/src/pages/ShoppingList/index.vue
View file

@ -3,18 +3,18 @@
<v-app-bar color="transparent" flat class="mt-n1 rounded">
<v-btn v-if="list" color="info" @click="list = null">
<v-icon left>
mdi-arrow-left-bold
{{ $globals.icons.arrowLeftBold }}
</v-icon>
{{ $t("shopping-list.all-lists") }}
</v-btn>
<v-icon v-if="!list" large left>
mdi-format-list-checks
{{ $globals.icons.formatListChecks }}
</v-icon>
<v-toolbar-title v-if="!list" class="headline"> {{ $t("shopping-list.shopping-lists") }} </v-toolbar-title>
<v-spacer></v-spacer>
<BaseDialog
:title="$t('shopping-list.new-list')"
title-icon="mdi-format-list-checks"
:title-icon="$globals.icons.formatListChecks"
:submit-text="$t('general.create')"
@submit="createNewList"
>
@ -40,7 +40,7 @@
<v-spacer></v-spacer>
<v-btn color="info" @click="list = item.id">
<v-icon left>
mdi-cart-check
{{ $globals.icons.cartCheck }}
</v-icon>
{{ $t("general.view") }}
</v-btn>
@ -70,7 +70,7 @@
<div v-if="edit">
<v-btn x-small text class="ml-1" @click="activeList.items[index].quantity -= 1">
<v-icon>
mdi-minus
{{ $globals.icons.mdiMinus }}
</v-icon>
</v-btn>
<v-btn x-small text class="mr-1" @click="activeList.items[index].quantity += 1">
@ -98,7 +98,7 @@
<p v-if="!edit" class="mb-0">{{ item.quantity }}</p>
<v-icon v-if="!edit" x-small class="mx-3">
mdi-window-close
{{ $globals.icons.windowClose }}
</v-icon>
<v-lazy>

3
frontend/src/plugins/vuetify.js
View file

@ -55,6 +55,9 @@ const vuetify = new Vuetify({
},
current: "en-US",
},
icons: {
iconfont: "mdiSvg",
},
});
export default vuetify;

204
frontend/src/utils/globals.js
View file

@ -1,23 +1,201 @@
import {
mdiAccount,
mdiSilverwareVariant,
mdiPlus,
mdiPlusCircle,
mdiDelete,
mdiContentSave,
mdiContentSaveEdit,
mdiSquareEditOutline,
mdiClose,
mdiTagMultipleOutline,
mdiBookOutline,
mdiAccountCog,
mdiAccountGroup,
mdiHome,
mdiMagnify,
mdiTranslate,
mdiClockTimeFourOutline,
mdiImport,
mdiEmail,
mdiLock,
mdiEye,
mdiEyeOff,
mdiCalendarMinus,
mdiCalendar,
mdiDiceMultiple,
mdiAlertCircle,
mdiDotsVertical,
mdiPrinter,
mdiShareVariant,
mdiHeart,
mdiHeartOutline,
mdiDotsHorizontal,
mdiCheckboxBlankOutline,
mdiCommentTextMultipleOutline,
mdiDownload,
mdiFile,
mdiFilePdfBox,
mdiFileImage,
mdiCodeJson,
mdiArrowUpDown,
mdiCog,
mdiSort,
mdiOrderAlphabeticalAscending,
mdiStar,
mdiNewBox,
mdiShuffleVariant,
mdiAlert,
mdiCheckboxMarkedCircle,
mdiInformation,
mdiBellAlert,
mdiRefreshCircle,
mdiMenu,
mdiWeatherSunny,
mdiWeatherNight,
mdiLink,
mdiRobot,
mdiLinkVariant,
mdiViewModule,
mdiViewDashboard,
mdiTools,
mdiCalendarWeek,
mdiCalendarToday,
mdiCalendarMultiselect,
mdiFormatListChecks,
mdiLogout,
mdiContentCopy,
mdiClipboardCheck,
mdiCloudUpload,
mdiDatabase,
mdiGithub,
mdiFolderOutline,
mdiApi,
mdiTestTube,
mdiDevTo,
mdiBackupRestore,
mdiNotificationClearAll,
mdiFood,
mdiWebhook,
mdiFilter,
mdiAccountPlusOutline,
mdiDesktopTowerMonitor,
mdiFormatColorFill,
mdiFormSelect,
mdiPageLayoutBody,
mdiCalendarWeekBegin,
mdiOpenInNew,
mdiCheck,
mdiBroom,
mdiCartCheck,
mdiArrowLeftBold,
mdiMinus,
mdiWindowClose,
} from "@mdi/js";
const icons = {
primary: "mdi-silverware-variant",
// Primary
primary: mdiSilverwareVariant,
// General
alert: mdiAlert,
alertCircle: mdiAlertCircle,
api: mdiApi,
arrowLeftBold: mdiArrowLeftBold,
arrowUpDown: mdiArrowUpDown,
backupRestore: mdiBackupRestore,
bellAlert: mdiBellAlert,
broom: mdiBroom,
calendar: mdiCalendar,
calendarMinus: mdiCalendarMinus,
calendarMultiselect: mdiCalendarMultiselect,
calendarToday: mdiCalendarToday,
calendarWeek: mdiCalendarWeek,
calendarWeekBegin: mdiCalendarWeekBegin,
cartCheck: mdiCartCheck,
check: mdiCheck,
checkboxBlankOutline: mdiCheckboxBlankOutline,
checkboxMarkedCircle: mdiCheckboxMarkedCircle,
clipboardCheck: mdiClipboardCheck,
clockOutline: mdiClockTimeFourOutline,
codeBraces: mdiCodeJson,
codeJson: mdiCodeJson,
cog: mdiCog,
commentTextMultipleOutline: mdiCommentTextMultipleOutline,
contentCopy: mdiContentCopy,
database: mdiDatabase,
desktopTowerMonitor: mdiDesktopTowerMonitor,
devTo: mdiDevTo,
diceMultiple: mdiDiceMultiple,
dotsHorizontal: mdiDotsHorizontal,
dotsVertical: mdiDotsVertical,
download: mdiDownload,
email: mdiEmail,
externalLink: mdiLinkVariant,
eye: mdiEye,
eyeOff: mdiEyeOff,
file: mdiFile,
fileImage: mdiFileImage,
filePDF: mdiFilePdfBox,
filter: mdiFilter,
folderOutline: mdiFolderOutline,
food: mdiFood,
formatColorFill: mdiFormatColorFill,
formatListCheck: mdiFormatListChecks,
formSelect: mdiFormSelect,
github: mdiGithub,
heart: mdiHeart,
heartOutline: mdiHeartOutline,
home: mdiHome,
import: mdiImport,
information: mdiInformation,
link: mdiLink,
lock: mdiLock,
logout: mdiLogout,
menu: mdiMenu,
newBox: mdiNewBox,
notificationClearAll: mdiNotificationClearAll,
openInNew: mdiOpenInNew,
orderAlphabeticalAscending: mdiOrderAlphabeticalAscending,
pageLayoutBody: mdiPageLayoutBody,
printer: mdiPrinter,
refreshCircle: mdiRefreshCircle,
robot: mdiRobot,
search: mdiMagnify,
shareVariant: mdiShareVariant,
shuffleVariant: mdiShuffleVariant,
sort: mdiSort,
star: mdiStar,
testTube: mdiTestTube,
tools: mdiTools,
translate: mdiTranslate,
upload: mdiCloudUpload,
viewDashboard: mdiViewDashboard,
viewModule: mdiViewModule,
weatherNight: mdiWeatherNight,
weatherSunny: mdiWeatherSunny,
webhook: mdiWebhook,
windowClose: mdiWindowClose,
// Crud
createAlt: "mdi-plus",
create: "mdi-plus-circle",
delete: "mdi-delete",
save: "mdi-content-save",
update: "mdi-content-save-edit",
edit: "mdi-square-edit-outline",
close: "mdi-close",
createAlt: mdiPlus,
create: mdiPlusCircle,
delete: mdiDelete,
save: mdiContentSave,
update: mdiContentSaveEdit,
edit: mdiSquareEditOutline,
close: mdiClose,
minus: mdiMinus,
// Organization
tags: "mdi-tag-multiple-outline",
pages: "mdi-book-outline",
tags: mdiTagMultipleOutline,
pages: mdiBookOutline,
// Admin
user: "mdi-account",
admin: "mdi-admin",
group: "mdi-account-group",
user: mdiAccount,
admin: mdiAccountCog,
group: mdiAccountGroup,
accountPlusOutline: mdiAccountPlusOutline,
};
export const globals = {

3
frontend/vue.config.js
View file

@ -19,6 +19,9 @@ module.exports = {
localeDir: "locales",
enableInSFC: true,
},
webpackBundleAnalyzer: {
openAnalyzer: process.env.PREVIEW_BUNDLE,
},
},
configureWebpack: {
resolve: {