Release v0.1.0 Candidate (#85)

* Changed uvicorn port to 80

* Changed port in docker-compose to match dockerfile

* Readded environment variables in docker-compose

* production image rework

* Use opengraph metadata to make basic recipe cards when full recipe metadata is not available

* fixed instrucitons on parse

* add last_recipe

* automated testing

* roadmap update

* Sqlite (#75)

* file structure

* auto-test

* take 2

* refactor ap scheduler and startup process

* fixed scraper error

* database abstraction

* database abstraction

* port recipes over to new schema

* meal migration

* start settings migration

* finale mongo port

* backup improvements

* migration imports to new DB structure

* unused import cleanup

* docs strings

* settings and theme import logic

* cleanup

* fixed tinydb error

* requirements

* fuzzy search

* remove scratch file

* sqlalchemy models

* improved search ui

* recipe models almost done

* sql modal population

* del scratch

* rewrite database model mixins

* mostly grabage

* recipe updates

* working sqllite

* remove old files and reorganize

* final cleanup

Co-authored-by: Hayden <hay-kot@pm.me>

* Backup card (#78)

* backup / import dialog

* upgrade to new tag method

* New import card

* rename settings.py to app_config.py

* migrate to poetry for development

* fix failing test

Co-authored-by: Hayden <hay-kot@pm.me>

* added mkdocs to docker-compose

* Translations (#72)

* Translations + danish

* changed back proxy target to use ENV

* Resolved more merge conflicts

* Removed test in translation

* Documentation of translations

* Updated translations

* removed old packages

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

* fail to start bug fixes

* feature: prep/cook/total time slots (#80)

Co-authored-by: Hayden <hay-kot@pm.me>

* missing bind attributes

* Bug fixes (#81)

* fix: url remains after succesful import

* docs: changelog + update todos

* arm image

* arm compose

* compose updates

* update poetry

* arm support

Co-authored-by: Hayden <hay-kot@pm.me>

* dockerfile hotfix

* dockerfile hotfix

* Version Release Final Touches (#84)

* Remove slim

* bug: opacity issues

* bug: startup failure with no database

* ci/cd on dev branch

* formatting

* v0.1.0 documentation

Co-authored-by: Hayden <hay-kot@pm.me>

* db init hotfix

* bug: fix crash in mongo

* fix mongo bug

* fixed version notifier

* finale changelog

Co-authored-by: kentora <=>
Co-authored-by: Hayden <hay-kot@pm.me>
Co-authored-by: Richard Mitic <richard.h.mitic@gmail.com>
Co-authored-by: kentora <kentora@kentora.dk>

.dockerignore

@@ -1,2 +1,3 @@
 */node_modules
-*/dist
+*/dist
+*/data/db

.github/workflows/build-docs.yml

@@ -0,0 +1,20 @@
+name: Publish docs via GitHub Pages
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v1
+
+      - name: Deploy docs
+        uses: mhausenblas/mkdocs-deploy-gh-pages@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CONFIG_FILE: docs/mkdocs.yml
+          EXTRA_PACKAGES: build-base

.github/workflows/dockerbuild.dev.yml

@@ -0,0 +1,49 @@
+name: Docker Build Dev
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      #
+      # Checkout
+      #
+      - name: checkout code
+        uses: actions/checkout@v2
+      #
+      # Setup QEMU
+      #
+      - name: Set up QEMU
+        id: qemu
+        uses: docker/setup-qemu-action@v1
+        with:
+          image: tonistiigi/binfmt:latest
+          platforms: all
+      #
+      # Setup Buildx
+      #
+      - name: install buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          install: true
+      #
+      # Login to Docker Hub
+      #
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      #
+      # Build
+      #
+      - name: build the image
+        run: |
+          docker build --push \
+            --tag hkotel/mealie:dev \
+            --platform linux/amd64,linux/arm/v7,linux/arm64 .

.github/workflows/pytest.yml

@@ -0,0 +1,55 @@
+name: Project Tests
+on:
+  push:
+    branches:
+      - master
+      - dev
+      - cd/cd
+  pull_request:
+    branches:
+      - master
+      - dev
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      #----------------------------------------------
+      #       check-out repo and set-up python
+      #----------------------------------------------
+      - name: Check out repository
+        uses: actions/checkout@v2
+      - name: Set up python
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.8
+      #----------------------------------------------
+      #  -----  install & configure poetry  -----
+      #----------------------------------------------
+      - name: Install Poetry
+        uses: snok/install-poetry@v1.1.1
+        with:
+          virtualenvs-create: true
+          virtualenvs-in-project: true
+      #----------------------------------------------
+      #       load cached venv if cache exists
+      #----------------------------------------------
+      - name: Load cached venv
+        id: cached-poetry-dependencies
+        uses: actions/cache@v2
+        with:
+          path: .venv
+          key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}
+      #----------------------------------------------
+      # install dependencies if cache does not exist
+      #----------------------------------------------
+      - name: Install dependencies
+        run: poetry install
+        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
+      #----------------------------------------------
+      #              run test suite
+      #----------------------------------------------
+      - name: Run tests
+        run: |
+          source .venv/bin/activate
+          pytest mealie/tests/

.gitignore

@@ -3,27 +3,35 @@
 __pycache__/
 *.py[cod]
 *$py.class
-frontend/.env.development
+# frontend/.env.development
 docs/site/
+mealie/temp/*
+mealie/temp/api.html
+.temp/
+
 
 mealie/data/backups/*
 mealie/data/debug/*
 mealie/data/img/*
+mealie/data/migration/*
+!mealie/dist/*
 
 #Exception to keep folders
+!mealie/dist/.gitkeep
 !mealie/data/backups/.gitkeep
 !mealie/data/backups/dev_sample_data*
 !mealie/data/debug/.gitkeep
+!mealie/data/migration/.gitkeep
 !mealie/data/img/.gitkeep
 
 .DS_Store
 node_modules
-/dist
+
 
 # local env files
 .env.local
 .env.*.local
-.env.development
+
 
 # Log files
 npm-debug.log*
@@ -48,7 +56,7 @@ pnpm-debug.log*
 env/
 build/
 develop-eggs/
-dist/
+
 downloads/
 eggs/
 .eggs/
@@ -143,5 +151,5 @@ ENV/
 
 # Node Modules
 node_modules/
-
-/*.env.development*
+mealie/data/debug/last_recipe.json
+*.sqlite

.pylintrc

@@ -0,0 +1,588 @@
+[MASTER]
+
+# A comma-separated list of package or module names from where C extensions may
+# be loaded. Extensions are loading into the active Python interpreter and may
+# run arbitrary code.
+extension-pkg-whitelist=
+
+# Specify a score threshold to be exceeded before program exits with error.
+fail-under=10.0
+
+# Add files or directories to the blacklist. They should be base names, not
+# paths.
+ignore=CVS
+
+# Add files or directories matching the regex patterns to the blacklist. The
+# regex matches against base names, not paths.
+ignore-patterns=
+
+# Python code to execute, usually for sys.path manipulation such as
+# pygtk.require().
+#init-hook=
+
+# Use multiple processes to speed up Pylint. Specifying 0 will auto-detect the
+# number of processors available to use.
+jobs=1
+
+# Control the amount of potential inferred values when inferring a single
+# object. This can help the performance when dealing with large functions or
+# complex, nested conditions.
+limit-inference-results=100
+
+# List of plugins (as comma separated values of python module names) to load,
+# usually to register additional checkers.
+load-plugins=
+
+# Pickle collected data for later comparisons.
+persistent=yes
+
+# When enabled, pylint would attempt to guess common misconfiguration and emit
+# user-friendly hints instead of false-positive error messages.
+suggestion-mode=yes
+
+# Allow loading of arbitrary C extensions. Extensions are imported into the
+# active Python interpreter and may run arbitrary code.
+unsafe-load-any-extension=no
+
+
+[MESSAGES CONTROL]
+
+# Only show warnings with the listed confidence levels. Leave empty to show
+# all. Valid levels: HIGH, INFERENCE, INFERENCE_FAILURE, UNDEFINED.
+confidence=
+
+# Disable the message, report, category or checker with the given id(s). You
+# can either give multiple identifiers separated by comma (,) or put this
+# option multiple times (only on the command line, not in the configuration
+# file where it should appear only once). You can also use "--disable=all" to
+# disable everything first and then reenable specific checks. For example, if
+# you want to run only the similarities checker, you can use "--disable=all
+# --enable=similarities". If you want to run only the classes checker, but have
+# no Warning level messages displayed, use "--disable=all --enable=classes
+# --disable=W".
+disable=print-statement,
+        parameter-unpacking,
+        unpacking-in-except,
+        old-raise-syntax,
+        backtick,
+        long-suffix,
+        old-ne-operator,
+        old-octal-literal,
+        import-star-module-level,
+        non-ascii-bytes-literal,
+        raw-checker-failed,
+        bad-inline-option,
+        locally-disabled,
+        file-ignored,
+        suppressed-message,
+        useless-suppression,
+        deprecated-pragma,
+        use-symbolic-message-instead,
+        apply-builtin,
+        basestring-builtin,
+        buffer-builtin,
+        cmp-builtin,
+        coerce-builtin,
+        execfile-builtin,
+        file-builtin,
+        long-builtin,
+        raw_input-builtin,
+        reduce-builtin,
+        standarderror-builtin,
+        unicode-builtin,
+        xrange-builtin,
+        coerce-method,
+        delslice-method,
+        getslice-method,
+        setslice-method,
+        no-absolute-import,
+        old-division,
+        dict-iter-method,
+        dict-view-method,
+        next-method-called,
+        metaclass-assignment,
+        indexing-exception,
+        raising-string,
+        reload-builtin,
+        oct-method,
+        hex-method,
+        nonzero-method,
+        cmp-method,
+        input-builtin,
+        round-builtin,
+        intern-builtin,
+        unichr-builtin,
+        map-builtin-not-iterating,
+        zip-builtin-not-iterating,
+        range-builtin-not-iterating,
+        filter-builtin-not-iterating,
+        using-cmp-argument,
+        eq-without-hash,
+        div-method,
+        idiv-method,
+        rdiv-method,
+        exception-message-attribute,
+        invalid-str-codec,
+        sys-max-int,
+        bad-python3-import,
+        deprecated-string-function,
+        deprecated-str-translate-call,
+        deprecated-itertools-function,
+        deprecated-types-field,
+        next-method-defined,
+        dict-items-not-iterating,
+        dict-keys-not-iterating,
+        dict-values-not-iterating,
+        deprecated-operator-function,
+        deprecated-urllib-function,
+        xreadlines-attribute,
+        deprecated-sys-function,
+        exception-escape,
+        comprehension-escape
+
+# Enable the message, report, category or checker with the given id(s). You can
+# either give multiple identifier separated by comma (,) or put this option
+# multiple time (only on the command line, not in the configuration file where
+# it should appear only once). See also the "--disable" option for examples.
+enable=c-extension-no-member
+
+
+[REPORTS]
+
+# Python expression which should return a score less than or equal to 10. You
+# have access to the variables 'error', 'warning', 'refactor', and 'convention'
+# which contain the number of messages in each category, as well as 'statement'
+# which is the total number of statements analyzed. This score is used by the
+# global evaluation report (RP0004).
+evaluation=10.0 - ((float(5 * error + warning + refactor + convention) / statement) * 10)
+
+# Template used to display messages. This is a python new-style format string
+# used to format the message information. See doc for all details.
+#msg-template=
+
+# Set the output format. Available formats are text, parseable, colorized, json
+# and msvs (visual studio). You can also give a reporter class, e.g.
+# mypackage.mymodule.MyReporterClass.
+output-format=text
+
+# Tells whether to display a full report or only the messages.
+reports=no
+
+# Activate the evaluation score.
+score=yes
+
+
+[REFACTORING]
+
+# Maximum number of nested blocks for function / method body
+max-nested-blocks=5
+
+# Complete name of functions that never returns. When checking for
+# inconsistent-return-statements if a never returning function is called then
+# it will be considered as an explicit return statement and no message will be
+# printed.
+never-returning-functions=sys.exit
+
+
+[STRING]
+
+# This flag controls whether inconsistent-quotes generates a warning when the
+# character used as a quote delimiter is used inconsistently within a module.
+check-quote-consistency=no
+
+# This flag controls whether the implicit-str-concat should generate a warning
+# on implicit string concatenation in sequences defined over several lines.
+check-str-concat-over-line-jumps=no
+
+
+[MISCELLANEOUS]
+
+# List of note tags to take in consideration, separated by a comma.
+notes=FIXME,
+      XXX,
+      TODO
+
+# Regular expression of note tags to take in consideration.
+#notes-rgx=
+
+
+[SPELLING]
+
+# Limits count of emitted suggestions for spelling mistakes.
+max-spelling-suggestions=4
+
+# Spelling dictionary name. Available dictionaries: none. To make it work,
+# install the python-enchant package.
+spelling-dict=
+
+# List of comma separated words that should not be checked.
+spelling-ignore-words=
+
+# A path to a file that contains the private dictionary; one word per line.
+spelling-private-dict-file=
+
+# Tells whether to store unknown words to the private dictionary (see the
+# --spelling-private-dict-file option) instead of raising a message.
+spelling-store-unknown-words=no
+
+
+[BASIC]
+
+# Naming style matching correct argument names.
+argument-naming-style=snake_case
+
+# Regular expression matching correct argument names. Overrides argument-
+# naming-style.
+#argument-rgx=
+
+# Naming style matching correct attribute names.
+attr-naming-style=snake_case
+
+# Regular expression matching correct attribute names. Overrides attr-naming-
+# style.
+#attr-rgx=
+
+# Bad variable names which should always be refused, separated by a comma.
+bad-names=foo,
+          bar,
+          baz,
+          toto,
+          tutu,
+          tata
+
+# Bad variable names regexes, separated by a comma. If names match any regex,
+# they will always be refused
+bad-names-rgxs=
+
+# Naming style matching correct class attribute names.
+class-attribute-naming-style=any
+
+# Regular expression matching correct class attribute names. Overrides class-
+# attribute-naming-style.
+#class-attribute-rgx=
+
+# Naming style matching correct class names.
+class-naming-style=PascalCase
+
+# Regular expression matching correct class names. Overrides class-naming-
+# style.
+#class-rgx=
+
+# Naming style matching correct constant names.
+const-naming-style=UPPER_CASE
+
+# Regular expression matching correct constant names. Overrides const-naming-
+# style.
+#const-rgx=
+
+# Minimum line length for functions/classes that require docstrings, shorter
+# ones are exempt.
+docstring-min-length=-1
+
+# Naming style matching correct function names.
+function-naming-style=snake_case
+
+# Regular expression matching correct function names. Overrides function-
+# naming-style.
+#function-rgx=
+
+# Good variable names which should always be accepted, separated by a comma.
+good-names=i,
+           j,
+           k,
+           ex,
+           Run,
+           _
+
+# Good variable names regexes, separated by a comma. If names match any regex,
+# they will always be accepted
+good-names-rgxs=
+
+# Include a hint for the correct naming format with invalid-name.
+include-naming-hint=no
+
+# Naming style matching correct inline iteration names.
+inlinevar-naming-style=any
+
+# Regular expression matching correct inline iteration names. Overrides
+# inlinevar-naming-style.
+#inlinevar-rgx=
+
+# Naming style matching correct method names.
+method-naming-style=snake_case
+
+# Regular expression matching correct method names. Overrides method-naming-
+# style.
+#method-rgx=
+
+# Naming style matching correct module names.
+module-naming-style=snake_case
+
+# Regular expression matching correct module names. Overrides module-naming-
+# style.
+#module-rgx=
+
+# Colon-delimited sets of names that determine each other's naming style when
+# the name regexes allow several styles.
+name-group=
+
+# Regular expression which should only match function or class names that do
+# not require a docstring.
+no-docstring-rgx=^_
+
+# List of decorators that produce properties, such as abc.abstractproperty. Add
+# to this list to register other decorators that produce valid properties.
+# These decorators are taken in consideration only for invalid-name.
+property-classes=abc.abstractproperty
+
+# Naming style matching correct variable names.
+variable-naming-style=snake_case
+
+# Regular expression matching correct variable names. Overrides variable-
+# naming-style.
+#variable-rgx=
+
+
+[LOGGING]
+
+# The type of string formatting that logging methods do. `old` means using %
+# formatting, `new` is for `{}` formatting.
+logging-format-style=old
+
+# Logging modules to check that the string format arguments are in logging
+# function parameter format.
+logging-modules=logging
+
+
+[VARIABLES]
+
+# List of additional names supposed to be defined in builtins. Remember that
+# you should avoid defining new builtins when possible.
+additional-builtins=
+
+# Tells whether unused global variables should be treated as a violation.
+allow-global-unused-variables=yes
+
+# List of strings which can identify a callback function by name. A callback
+# name must start or end with one of those strings.
+callbacks=cb_,
+          _cb
+
+# A regular expression matching the name of dummy variables (i.e. expected to
+# not be used).
+dummy-variables-rgx=_+$|(_[a-zA-Z0-9_]*[a-zA-Z0-9]+?$)|dummy|^ignored_|^unused_
+
+# Argument names that match this expression will be ignored. Default to name
+# with leading underscore.
+ignored-argument-names=_.*|^ignored_|^unused_
+
+# Tells whether we should check for unused import in __init__ files.
+init-import=no
+
+# List of qualified module names which can have objects that can redefine
+# builtins.
+redefining-builtins-modules=six.moves,past.builtins,future.builtins,builtins,io
+
+
+[TYPECHECK]
+
+# List of decorators that produce context managers, such as
+# contextlib.contextmanager. Add to this list to register other decorators that
+# produce valid context managers.
+contextmanager-decorators=contextlib.contextmanager
+
+# List of members which are set dynamically and missed by pylint inference
+# system, and so shouldn't trigger E1101 when accessed. Python regular
+# expressions are accepted.
+generated-members=pydantic.*
+
+# Tells whether missing members accessed in mixin class should be ignored. A
+# mixin class is detected if its name ends with "mixin" (case insensitive).
+ignore-mixin-members=yes
+
+# Tells whether to warn about missing members when the owner of the attribute
+# is inferred to be None.
+ignore-none=yes
+
+# This flag controls whether pylint should warn about no-member and similar
+# checks whenever an opaque object is returned when inferring. The inference
+# can return multiple potential results while evaluating a Python object, but
+# some branches might not be evaluated, which results in partial inference. In
+# that case, it might be useful to still emit no-member and other checks for
+# the rest of the inferred objects.
+ignore-on-opaque-inference=yes
+
+# List of class names for which member attributes should not be checked (useful
+# for classes with dynamically set attributes). This supports the use of
+# qualified names.
+ignored-classes=optparse.Values,thread._local,_thread._local
+
+# List of module names for which member attributes should not be checked
+# (useful for modules/projects where namespaces are manipulated during runtime
+# and thus existing member attributes cannot be deduced by static analysis). It
+# supports qualified module names, as well as Unix pattern matching.
+ignored-modules=
+
+# Show a hint with possible names when a member name was not found. The aspect
+# of finding the hint is based on edit distance.
+missing-member-hint=yes
+
+# The minimum edit distance a name should have in order to be considered a
+# similar match for a missing member name.
+missing-member-hint-distance=1
+
+# The total number of similar names that should be taken in consideration when
+# showing a hint for a missing member.
+missing-member-max-choices=1
+
+# List of decorators that change the signature of a decorated function.
+signature-mutators=
+
+
+[FORMAT]
+
+# Expected format of line ending, e.g. empty (any line ending), LF or CRLF.
+expected-line-ending-format=
+
+# Regexp for a line that is allowed to be longer than the limit.
+ignore-long-lines=^\s*(# )?<?https?://\S+>?$
+
+# Number of spaces of indent required inside a hanging or continued line.
+indent-after-paren=4
+
+# String used as indentation unit. This is usually "    " (4 spaces) or "\t" (1
+# tab).
+indent-string='    '
+
+# Maximum number of characters on a single line.
+max-line-length=100
+
+# Maximum number of lines in a module.
+max-module-lines=1000
+
+# Allow the body of a class to be on the same line as the declaration if body
+# contains single statement.
+single-line-class-stmt=no
+
+# Allow the body of an if to be on the same line as the test if there is no
+# else.
+single-line-if-stmt=no
+
+
+[SIMILARITIES]
+
+# Ignore comments when computing similarities.
+ignore-comments=yes
+
+# Ignore docstrings when computing similarities.
+ignore-docstrings=yes
+w54
+# Ignore imports when computing similarities.
+ignore-imports=no
+
+# Minimum lines number of a similarity.
+min-similarity-lines=4
+
+
+[DESIGN]
+
+# Maximum number of arguments for function / method.
+max-args=5
+
+# Maximum number of attributes for a class (see R0902).
+max-attributes=7
+
+# Maximum number of boolean expressions in an if statement (see R0916).
+max-bool-expr=5
+
+# Maximum number of branch for function / method body.
+max-branches=12
+
+# Maximum number of locals for function / method body.
+max-locals=15
+
+# Maximum number of parents for a class (see R0901).
+max-parents=7
+
+# Maximum number of public methods for a class (see R0904).
+max-public-methods=20
+
+# Maximum number of return / yield for function / method body.
+max-returns=6
+
+# Maximum number of statements in function / method body.
+max-statements=50
+
+# Minimum number of public methods for a class (see R0903).
+min-public-methods=2
+
+
+[IMPORTS]
+
+# List of modules that can be imported at any level, not just the top level
+# one.
+allow-any-import-level=
+
+# Allow wildcard imports from modules that define __all__.
+allow-wildcard-with-all=no
+
+# Analyse import fallback blocks. This can be used to support both Python 2 and
+# 3 compatible code, which means that the block might have code that exists
+# only in one or another interpreter, leading to false positives when analysed.
+analyse-fallback-blocks=no
+
+# Deprecated modules which should not be used, separated by a comma.
+deprecated-modules=optparse,tkinter.tix
+
+# Create a graph of external dependencies in the given file (report RP0402 must
+# not be disabled).
+ext-import-graph=
+
+# Create a graph of every (i.e. internal and external) dependencies in the
+# given file (report RP0402 must not be disabled).
+import-graph=
+
+# Create a graph of internal dependencies in the given file (report RP0402 must
+# not be disabled).
+int-import-graph=
+
+# Force import order to recognize a module as part of the standard
+# compatibility libraries.
+known-standard-library=
+
+# Force import order to recognize a module as part of a third party library.
+known-third-party=enchant
+
+# Couples of modules and preferred modules, separated by a comma.
+preferred-modules=
+
+
+[CLASSES]
+
+# List of method names used to declare (i.e. assign) instance attributes.
+defining-attr-methods=__init__,
+                      __new__,
+                      setUp,
+                      __post_init__
+
+# List of member names, which should be excluded from the protected access
+# warning.
+exclude-protected=_asdict,
+                  _fields,
+                  _replace,
+                  _source,
+                  _make
+
+# List of valid names for the first argument in a class method.
+valid-classmethod-first-arg=cls
+
+# List of valid names for the first argument in a metaclass class method.
+valid-metaclass-classmethod-first-arg=cls
+
+
+[EXCEPTIONS]
+
+# Exceptions that will emit a warning when being caught. Defaults to
+# "BaseException, Exception".
+overgeneral-exceptions=BaseException,
+                       Exception

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "python.formatting.provider": "black",
-  "python.pythonPath": "venv/bin/python",
+  "python.pythonPath": ".venv/bin/python3.8",
   "python.linting.pylintEnabled": true,
   "python.linting.enabled": true,
   "python.autoComplete.extraPaths": ["mealie", "mealie/mealie"],
@@ -8,9 +8,12 @@
 
   "python.testing.unittestEnabled": false,
   "python.testing.nosetestsEnabled": false,
-  "python.testing.pytestEnabled": false,
-  "python.testing.promptToConfigure": false,
-  "cSpell.enableFiletypes": [
-    "!python"
-  ]
+  "python.testing.pytestEnabled": true,
+  "cSpell.enableFiletypes": ["!javascript", "!python"],
+  "python.testing.pytestArgs": ["mealie"],
+  "i18n-ally.localesPaths": "frontend/src/locales",
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "i18n-ally.keystyle": "nested"
 }

Dockerfile

@@ -1,24 +1,32 @@
-FROM node:alpine as build-stage
+FROM node:lts-alpine as build-stage
 WORKDIR /app
 COPY ./frontend/package*.json ./
 RUN npm install
 COPY ./frontend/ .
 RUN npm run build
 
-FROM tiangolo/uvicorn-gunicorn-fastapi:python3.8
+# FROM tiangolo/uvicorn-gunicorn-fastapi:python3.8-slim
+FROM mrnr91/uvicorn-gunicorn-fastapi:python3.8
 
-RUN apt-get update -y && \
-    apt-get install -y python-pip python-dev
-
-# We copy just the requirements.txt first to leverage Docker cache
-COPY ./requirements.txt /app/requirements.txt
 
 WORKDIR /app
 
-RUN pip install -r requirements.txt
+RUN apt-get update -y && \
+    apt-get install -y python-pip python-dev git curl python3-dev libxml2-dev libxslt1-dev zlib1g-dev --no-install-recommends && \
+    rm -rf /var/lib/apt/lists/* && \
+    curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | POETRY_HOME=/opt/poetry python && \
+    cd /usr/local/bin && \
+    ln -s /opt/poetry/bin/poetry && \
+    poetry config virtualenvs.create false
+
+COPY ./pyproject.toml /app/
 
 COPY ./mealie /app
-COPY ./mealie/data/templates/recipes.md /app/data/templates/
+RUN poetry install --no-root --no-dev
 COPY --from=build-stage /app/dist /app/dist
+RUN rm -rf /app/test /app/.temp
 
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "9000"]
+ENV ENV prod
+ENV APP_MODULE "app:app"
+
+VOLUME [ "/app/data" ]

Dockerfile.arm

@@ -0,0 +1,33 @@
+FROM node:lts-alpine as build-stage
+WORKDIR /app
+COPY ./frontend/package*.json ./
+RUN npm install
+COPY ./frontend/ .
+RUN npm run build
+
+FROM mrnr91/uvicorn-gunicorn-fastapi:python3.8
+
+
+COPY ./requirements.txt /app/requirements.txt
+
+WORKDIR /app
+
+RUN apt-get update -y && \
+    apt-get install -y python-pip python-dev git curl --no-install-recommends 
+
+RUN curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | POETRY_HOME=/opt/poetry python && \
+    cd /usr/local/bin && \
+    ln -s /opt/poetry/bin/poetry && \
+    poetry config virtualenvs.create false
+
+COPY ./pyproject.toml ./app/poetry.lock* /app/
+
+COPY ./mealie /app
+RUN poetry install --no-root --no-dev
+COPY --from=build-stage /app/dist /app/dist
+RUN rm -rf /app/test /app/.temp
+
+ENV ENV prod
+ENV APP_MODULE "app:app"
+
+VOLUME [ "/app/data" ]

Dockerfile.dev

@@ -3,18 +3,21 @@ FROM python:3
 RUN apt-get update -y && \
     apt-get install -y python-pip python-dev
 
-# We copy just the requirements.txt first to leverage Docker cache
+RUN curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | POETRY_HOME=/opt/poetry python && \
+    cd /usr/local/bin && \
+    ln -s /opt/poetry/bin/poetry && \
+    poetry config virtualenvs.create false
 
-COPY ./requirements.txt /app/requirements.txt
+RUN mkdir /app/
+COPY ./pyproject.toml ./app/poetry.lock* /app/
 
 WORKDIR /app
 
-RUN pip install -r requirements.txt
+RUN poetry install --no-root
 
-# COPY ./mealie /app
+COPY ./mealie /app
 
 
 ENTRYPOINT [ "python" ]
 
-# TODO Reconfigure Command to start a Gunicorn Server that managed the Uvicorn Server. Also Learn how to do that :-/
-CMD [ "app.py" ] 
+CMD [ "app.py" ]

README.md

@@ -3,7 +3,6 @@
 [![Stargazers][stars-shield]][stars-url]
 [![Issues][issues-shield]][issues-url]
 [![MIT License][license-shield]][license-url]
-[![LinkedIn][linkedin-shield]][linkedin-url]
 [![Docker Pulls][docker-pull]][docker-pull]
 
 <!-- PROJECT LOGO -->
@@ -21,14 +20,21 @@
     A Place for All Your Recipes
     <br />
     <a href="https://hay-kot.github.io/mealie/"><strong>Explore the docs »</strong></a>
-    <br />
+  <a href="https://github.com/hay-kot/mealie">
+  </a>
     <br />
     <a href="https://github.com/hay-kot/mealie"><s>View Demo</s></a>
     ·
-    <a href="https://github.com/hay-kot/mealie/issues">Report Bug</a>
+    <a href="https://github.com/hay-kot/mealie/issues">Report Bug</a>    
     ·
-    <a href="https://github.com/hay-kot/mealie/issues">Request Feature</a>
-  </p>
+    <a href="https://hay-kot.github.io/mealie/api/docs/">API</a>
+    ·
+    <a href="https://github.com/hay-kot/mealie/issues">
+    Request Feature
+    </a>    
+    ·
+    <a href="https://hub.docker.com/repository/docker/hkotel/mealie"> Docker Hub
+    </a>
 </p>
 
 
@@ -39,7 +45,7 @@
 
 [![Product Name Screen Shot][product-screenshot]](https://example.com)
 
-**Mealie** is a self hosted recipe manager and meal planner with a RestAPI backend and a reactive frontend application built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the url and mealie will automatically import the relavent data or add a family recipe with the UI editor.  
+**Mealie** is a self hosted recipe manager and meal planner with a RestAPI backend and a reactive frontend application built in Vue for a pleasant user experience for the whole family. Easily add recipes into your database by providing the url and mealie will automatically import the relevant data or add a family recipe with the UI editor.  
 
 Mealie also provides a secure API for interactions from 3rd party applications. **Why does my recipe manager need an API?** An API allows integration into applications like [Home Assistant]() that can act as notification engines to provide custom notifications based of Meal Plan data to remind you to defrost the chicken, marinade the steak, or start the CrockPot. See the section on [Meal Plan hooks](#hooks) for more information. Additionally, you can access any available API from the backend server. To explore the API spin up your server and navigate to http://yourserver.com/docs for interactive API documentation. 
 
@@ -56,7 +62,7 @@ Mealie also provides a secure API for interactions from 3rd party applications.
   - Add notes to recipes
 #### Meal Planner
   - Random Meal plan generation based off categories
-  - Expose notes in the API to allow external applications to access relavent information for meal plans
+  - Expose notes in the API to allow external applications to access relevant information for meal plans
 #### Database Import / Export
   - Easily Import / Export your recipes from the UI
   - Export recipes in into custom files using Jinja2 templates
@@ -73,7 +79,9 @@ Mealie also provides a secure API for interactions from 3rd party applications.
 <!-- CONTRIBUTING -->
 ## Contributing
 
-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. Especially test. Literally any tests. See the [Contributors Guide](https://hay-kot.github.io/mealie/contributors/developers-guide/code-contributions/) for help getting started.
+
+If you are not a coder, you can still contribute financially. financial contributions help me prioritize working on this project over others and helps me know that there is a real demand for project development. 
 
 <a href="https://www.buymeacoffee.com/haykot" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 

dev/dev-notes.md

@@ -16,40 +16,42 @@ Don't forget to [join the Discord](https://discord.gg/R6QDyJgbD2)!
 
 # Todo's
 
+Documentation
+- [ ] V0.1.0 Release Notes
+- [ ] Nextcloud Migration How To
+- [ ] New Docker Setup with Sqlite
+- [ ] Update Env Variables
+- [ ] New Roadmap / Milestones
+
 Frontend
-- [ ] .Vue file reorganized into something that makes sense
+- [x] Prep / Cook / Total Time Indicator + Editor
+- [ ] No Meal Today Page instead of Null 
 - [ ] Recipe Print Page 
-- [x] Catch 400 / bad response on create from URL
 - [ ] Recipe Editor Data Validation Client Side
-- [x] Favicon
-- [x] Rename Window
-- [ ] Add version indicator and notification for new version available
-- [ ] Enhanced Search Functionality
 - [ ] Organize Home Page my Category, ideally user selectable.
+- [ ] Advanced Search Page, draft started
+  - [ ] Filter by Category
+  - [ ] Filter by Tags
+- [ ] Search Bar redesign
+  - [x] Initial
+  - [ ] Results redesign
+- [ ] Replace Backups card with something like Home Assistant
+- [x] Replace import card with something like Home Assistant
+  - [x] Select which imports to do
 
 Backend
-- [x] Add Debug folder for writing the last pulled recipe data to. 
-- [x] Recipe Editor Data Validation Server Side
-- [ ] Normalize Recipe data on scrape
-- [ ] Support how to Sections and how to steps
-- [ ] Export Markdown on Auto backups
+- [ ] Database Import
+  - [x] Recipes
+  - [x] Images
+  - [ ] Meal Plans
+  - [x] Settings
+  - [x] Themes
+- [x] Remove Print / Debug Code
+- [ ] Support how to sections and how to steps
 - [ ] Recipe request by category/tags
-- [ ] Add Additional Migrations, See mealie/services/migrations/chowdown.py for examples of how to do this.
-  - [ ] Open Eats [See Issue #4](https://github.com/hay-kot/mealie/issues/4)
-  - [ ] NextCloud [See Issue #14](https://github.com/hay-kot/mealie/issues/14)
+
+
+SQL
+- [ ] Setup Database Migrations
 
 # Draft Changelog
-## v0.0.2
-
-General
-- Fixed opacity issues with marked steps - [mtoohey31](https://github.com/mtoohey31)
-- Updated Favicon
-- Renamed Frontend Window
-- Added Debug folder to dump scraper data prior to processing. 
-- Improved documentation
-- Added version tag / relevant links, and new version notifier 
-
-Recipes
-- Added user feedback on bad URL. 
-- Better backend data validation for updating recipes, avoid small syntax errors corrupting database entry. [Issue #8](https://github.com/hay-kot/mealie/issues/8)
-- Fixed spacing issue while editing new recipes in JSON

dev/non-working-links.txt

@@ -0,0 +1 @@
+http://www.cookingforkeeps.com/2013/02/05/blue-cheese-stuffed-turkey-meatballs-with-raspberry-balsamic-glaze-2/

dev/scratch/write_settings.py

@@ -37,4 +37,3 @@ if __name__ == "__main__":
         data = json.dumps(theme)
         response = requests.post(POST_URL, data)
         response = requests.get(GET_URL)
-        print(response.text)

dev/scripts/docker-compose.dev.sh

@@ -1 +1 @@
-docker-compose -f docker-compose.dev.yml build && docker-compose -f docker-compose.dev.yml -p dev-mealie up -d 
+docker-compose -f docker-compose.dev.yml -p dev-mealie up --build

dev/scripts/docker-compose.sh

@@ -1 +1 @@
-docker-compose build && docker-compose -p mealie up -d 
+docker-compose -p mealie up --build

dev/scripts/scrape_recipe.py

@@ -0,0 +1,27 @@
+"""
+Helper script to download raw recipe data from a URL and dump it to disk.
+The resulting files can be used as test input data.
+"""
+
+import sys, json, pprint
+import requests
+import extruct
+from scrape_schema_recipe import scrape_url
+from w3lib.html import get_base_url
+
+for url in sys.argv[1:]:
+    try:
+        data = scrape_url(url)[0]
+        slug = list(filter(None, url.split("/")))[-1]
+        filename = f"{slug}.json"
+        with open(filename, "w") as f:
+            json.dump(data, f, indent=4, default=str)
+        print(f"Saved {filename}")
+    except Exception as e:
+        print(f"Error for {url}: {e}")
+        print("Trying extruct instead")
+        pp = pprint.PrettyPrinter(indent=2)
+        r = requests.get(url)
+        base_url = get_base_url(r.text, r.url)
+        data = extruct.extract(r.text, base_url=base_url)
+        pp.pprint(data)

docker-compose.arm.yml

@@ -0,0 +1,16 @@
+# Use root/example as user/password credentials
+# Frontend/Backend Served via the same Uvicorn Server
+version: "3.1"
+services:
+  mealie:
+    build:
+      context: ./
+      dockerfile: Dockerfile.arm
+    container_name: mealie
+    restart: always
+    ports:
+      - 9090:80
+    environment:
+      db_type: sql
+    volumes:
+      - ./mealie/data/:/app/data

docker-compose.dev.yml

@@ -2,23 +2,26 @@
 version: "3.1"
 services:
   # Vue Frontend
-  mealie:
+  mealie-frontend:
+    image: mealie-frontend:dev
     build:
       context: ./frontend
       dockerfile: frontend.Dockerfile
-    container_name: mealie_frontend
     restart: always
     ports:
       - 9920:8080
+    environment:
+      VUE_APP_API_BASE_URL: "http://mealie-api:9000"
     volumes:
-      - ./frontend:/app
+      - ./frontend/:/app
+      - /app/node_modules
 
   # Fast API
   mealie-api:
+    image: mealie-api:dev
     build:
       context: ./
       dockerfile: Dockerfile.dev
-    container_name: mealie-api
     restart: always
     ports:
       - 9921:9000
@@ -31,6 +34,14 @@ services:
     volumes:
       - ./mealie:/app
 
+  mealie-docs:
+    image: squidfunk/mkdocs-material
+    restart: always
+    ports:
+      - 9924:8000
+    volumes:
+      - ./docs:/docs
+
   # Database
   mongo:
     image: mongo

docker-compose.yml

@@ -1,5 +1,3 @@
-# Use root/example as user/password credentials
-# Frontend/Backend Served via the same Uvicorn Server
 version: "3.1"
 services:
   mealie:
@@ -9,26 +7,26 @@ services:
     container_name: mealie
     restart: always
     ports:
-      - 9090:9000
+      - 9090:80
     environment:
+      db_type: sql
       db_username: root
       db_password: example
       db_host: mongo
       db_port: 27017
-    volumes:
-      - ./mealie/data/img:/app/data/img
-      - ./mealie/data/backups:/app/data/backups
-  mongo:
-    image: mongo
-    restart: always
-    environment:
-      MONGO_INITDB_ROOT_USERNAME: root
-      MONGO_INITDB_ROOT_PASSWORD: example
-  mongo-express: # Optional Mongo GUI
-    image: mongo-express
-    restart: always
-    ports:
-      - 9091:8081
-    environment:
-      ME_CONFIG_MONGODB_ADMINUSERNAME: root
-      ME_CONFIG_MONGODB_ADMINPASSWORD: example
+    # volumes:
+    #   - ./mealie/data/:/app/data
+  # mongo:
+  #   image: mongo
+  #   restart: always
+  #   environment:
+  #     MONGO_INITDB_ROOT_USERNAME: root
+  #     MONGO_INITDB_ROOT_PASSWORD: example
+  # mongo-express: # Optional Mongo GUI
+  #   image: mongo-express
+  #   restart: always
+  #   ports:
+  #     - 9091:8081
+  #   environment:
+  #     ME_CONFIG_MONGODB_ADMINUSERNAME: root
+  #     ME_CONFIG_MONGODB_ADMINPASSWORD: example

docs/docs/1.9 - release-notes.md

@@ -1,34 +0,0 @@
-# Release Notes
-
-## v0.0.1 - Pre-release Patch
-General
-- Updated Favicon
-- Renamed Frontend Window
-- Added Debug folder to dump scraper data prior to processing. 
-
-Recipes
-- Added user feedback on bad URL
-- Better backend data validation for updating recipes, avoid small syntax errors corrupting database entry. [Issue #8](https://github.com/hay-kot/mealie/issues/8)
-- Fixed spacing issue while editing new recipes in JSON
-
-## v0.0.0 - Initial Pre-release
-The initial pre-release. It should be semi-functional but does not include a lot of user feedback You may notice errors that have no user feedback and have no idea what went wrong. 
-
-### Recipes
-  - Automatic web scrapping for common recipe platforms
-  - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
-  - UI Recipe Editor
-  - JSON Recipe Editor in browser
-  - Custom tags and categories
-  - Rate recipes
-  - Add notes to recipes
-  - Migration From Other Platforms
-    - Chowdown
-### Meal Planner
-  - Random Meal plan generation based off categories
-  - Expose notes in the API to allow external applications to access relevant information for meal plans
-  
-### Database Import / Export
-  - Easily Import / Export your recipes from the UI
-  - Export recipes in markdown format for universal access
-    - Use the default or a custom jinja2 template

docs/docs/2.0 - roadmap.md

@@ -1,46 +0,0 @@
-# Development Road Map
-
-!!! Current Release
-    v0.0.0 ALPHA - This is technically a pre-release, as such there are no release notes and no version. The first version will be version v0.1.0 and will provide a list of release notes with any breaking changes
-
-
-Feature placement is not set in stone. This is much more of a guideline than anything else.
-
-## v1.0 Road Map
-
-### Frontend
-- [ ] Login / Logout Navigation
-    * [ ] Initial Page
-    * [ ] Logic / Function Calls
-    * [ ] Password Reset
-### Backend
-- [ ] User Setup
-    * [ ] Authentication
-    * [ ] Default Admin/Superuser Account
-    * [ ] Password Reset
-    * [ ] User Accounts
-    * [ ] Edit / Delete
-
-## v0.1.0
-### Front End
-
-- [ ] Recipe Editor
-    * [ ] Basic Form Validation
-- [ ] Recipe Viewer
-    * [ ] Print Page View - Like King Arthur Website
-    * [ ] Notes Hidden/Not Hidden
-    * [ ] Total Time Indicator
-    * [ ] Bake Time
-
-
-### Backend
-- [ ] Recipe Data
-    * [ ] Better Scraper
-    * [ ] Image Minification
-    * [ ] Scraper Data Validation
-- [ ] Category Management
-    * [ ] Lunch / Dinner / Breakfast <- Meal Generation 
-    * [ ] Dessert / Side / Appetizer / Bread / Drinks / 
-- [ ] Backup Options
-    * [ ] Force Update
-    * [ ] Rebuild

docs/docs/api/api-usage.md

@@ -0,0 +1,14 @@
+# Usage
+
+## Key Components
+### Recipe Extras
+Recipes extras are a key feature of the Mealie API. They allow you to create custom json key/value pairs within a recipe to reference from 3rd part applications. You can use these keys to contain information to trigger automation or custom messages to relay to your desired device. 
+
+For example you could add `{"message": "Remember to thaw the chicken"}` to a recipe and use the webhooks built into mealie to send that message payload to a destination to be processed.
+
+![api-extras-gif](../gifs/api-extras.gif)
+
+
+## Examples
+
+Have Ideas? Submit a PR!

docs/docs/changelog.md

@@ -0,0 +1,89 @@
+# Release Notes
+
+## v0.1.0 - Initial Beta
+### Bug Fixes
+  - Fixed Can't delete recipe after changing name - Closes Issue #67
+  - Fixed No image when added by URL, and can;t add an image - Closes Issue #66
+  - Fixed Images saved with no way to delete when add recipe via URL fails - Closes Issue #43
+
+### Features
+  - Additional Language Support
+  - Improved deployment documentation
+  - Additional database! SQlite is now supported! - Closes #48
+  - All site data is now backed up.
+  - Support for Prep Time, Total Time, and Cook Time field - Closes #63
+  - New backup import process with support for themes and site settings
+  - **BETA** ARM support! - Closes #69
+
+### Code / Developer Improvements
+  - Unified Database Access Layers
+  - Poetry / pyproject.toml support over requirements.txt
+  - Local development without database is now possible!
+  - Local mkdocs server added to docker-compose.dev.yml
+  - Major code refactoring to support new database layer
+  - Global variable refactor
+
+### Break Changes
+
+- Internal docker port is now 80 instead of 9000. You MUST remap the internal port to connect to the UI. 
+
+!!! error "Breaking Changes"
+    As I've adopted the SQL database model I find that using 2 different types of databases will inevitably hinder development. As such after release v0.1.0 support for mongoDB will no longer be available. Prior to upgrading to v0.2.0 you will need to export your site and import after updating. This should be a painless process and require minimal intervention on the users part. Moving forward we will do our best to minimize changes that require user intervention like this and make updates a smooth process. 
+
+
+## v0.0.2 - Pre-release Second Patch
+A quality update with major props to [zackbcom](https://github.com/zackbcom) for working hard on making the theming just that much better!
+
+### Bug Fixes
+  - Fixed empty backup failure without markdown template
+  - Fixed opacity issues with marked steps - [mtoohey31](https://github.com/mtoohey31)
+  - Fixed hot-reloading development environment - [grssmnn](https://github.com/grssmnn)
+  - Fixed recipe not saving without image - Issue #7 + Issue #54
+  - Fixed parsing error on image property null - Issue #43
+
+### General Improvements
+  - Added Confirmation component to deleting recipes - [zackbcom](https://github.com/zackbcom)
+  - Updated Theme backend - [zackbcom](https://github.com/zackbcom)
+  - Added Persistent storage to vuex - [zackbcom](https://github.com/zackbcom)
+  - General Color/Theme Improvements
+      - More consistent UI
+      - More minimalist coloring
+  - Added API key extras to Recipe Data - [See Documentation](/api/api-usage/)
+      - Users can now add custom json key/value pairs to all recipes via the editor for access in 3rd part applications. For example users can add a "message" field in the extras that can be accessed on API calls to play a message over google home. 
+  - Improved image rendering (nearly x2 speed)
+  - Improved documentation + API Documentation
+  - Improved recipe parsing - Issue #51
+  - User feedback on backup importing
+
+## v0.0.1 - Pre-release Patch
+### General
+  - Updated Favicon
+  - Renamed Frontend Window
+  - Added Debug folder to dump scraper data prior to processing. 
+
+### Recipes
+  - Added user feedback on bad URL
+  - Better backend data validation for updating recipes, avoid small syntax errors corrupting database entry. [Issue #8](https://github.com/hay-kot/mealie/issues/8)
+  - Fixed spacing issue while editing new recipes in JSON
+
+## v0.0.0 - Initial Pre-release
+The initial pre-release. It should be semi-functional but does not include a lot of user feedback You may notice errors that have no user feedback and have no idea what went wrong. 
+
+### Recipes
+  - Automatic web scrapping for common recipe platforms
+  - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
+  - UI Recipe Editor
+  - JSON Recipe Editor in browser
+  - Custom tags and categories
+  - Rate recipes
+  - Add notes to recipes
+  - Migration From Other Platforms
+    - Chowdown
+### Meal Planner
+  - Random Meal plan generation based off categories
+  - Expose notes in the API to allow external applications to access relevant information for meal plans
+  
+### Database Import / Export
+  - Easily Import / Export your recipes from the UI
+  - Export recipes in markdown format for universal access
+    - Use the default or a custom jinja2 template

docs/docs/contributors/developers-guide/code-contributions.md

@@ -1,26 +1,22 @@
 # Contributing to Mealie
-We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
 
-- Reporting a bug
-- Discussing the current state of the code
-- Submitting a fix
-- Proposing new features
-- Becoming a maintainer
+!!! Warning
+    It should be known going into this that this is my first open source project, and my first public github repo I'm actively managing. If something does not make sense, or is not best practice. PLEASE feel free to reach out and let me know. I'm all about improving workflow and making it easier for contributors. 
 
-[Remember to join the Discord and stay in touch with other developers working on the project](https://discord.gg/R6QDyJgbD2)! 
+[Please Join the Discord](https://discord.gg/R6QDyJgbD2). We are building a community of developers working on the project.
 
 ## We Develop with Github
 We use github to host code, to track issues and feature requests, as well as accept pull requests.
 
 ## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests
-Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests:
+Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests: 
 
-1. Fork the repo and create your branch from `master`.
+1. Fork the repo and create your branch from `dev`.
 2. Read the page in in [dev/dev-notes.md](https://github.com/hay-kot/mealie/blob/0.1.0/dev/dev-notes.md) to get an idea on where the project is at.
-3. If you've changed APIs, update the documentation.
-4. Make sure your code lints.
+3. If you're interested on working on major changes please get in touch on discord and coordinate with other developers. No sense in doubling up on work if someones already on it. 
+4. If you've changed APIs, update the documentation.
 5. Issue that pull request!
-6. If you make changes to the dev/0.1.0 branch reflect those changes in the dev/dev-notes.md to keep track of changes. 
+6. If you make changes to the dev branch reflect those changes in the dev/dev-notes.md to keep track of changes. Don't forget to add your name/handle/identifier! 
 
 ## Any contributions you make will be under the MIT Software License
 In short, when you submit code changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern.

docs/docs/contributors/developers-guide/general-guidelines.md

@@ -0,0 +1,3 @@
+# Guidelines
+
+TODO

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -0,0 +1,31 @@
+# Development: Getting Started
+
+After reading through the [Code Contributions Guide](https://hay-kot.github.io/mealie/contributors/developers-guide/code-contributions/) and forking the repo you can start working. This project is developed with :whale: docker and as such you will be greatly aided by using docker for development. It's not necessary but it is helpful.
+
+## With Docker
+`cd` into frontend directory and run `npm install` to install the node modules. 
+
+There are 2 scripts to help set up the docker containers in dev/scripts/. 
+
+`docker-compose.dev.sh` - Will spin up a docker development server
+`docker-compose.sh` - Will spin up a docker production server
+
+There are VSCode tasks created in the .vscode folder. You can use these to quickly execute the scripts above using the command palette.
+
+
+## Without Docker
+?? TODO
+
+## Trouble Shooting
+
+!!! Error "Symptom: Vue Development Server Wont Start"
+    **Error:** `TypeError: Cannot read property 'upgrade' of undefined`
+
+    **Solution:** You may be missing the `/frontend/.env.development.` The contents should be `VUE_APP_API_BASE_URL=http://127.0.0.1:9921`. This is a reference to proxy the the API requests from Vue to 127.0.0.1 at port 9921 where FastAPI should be running.
+
+!!! Error "Symptom: FastAPI Development Server Wont Start"
+    **Error:** `RuntimeError: Directory '/app/dist' does not exist`
+
+    **Solution:** Create an empty /mealie/dist directory. This directory is served as static content by FastAPI. It is provided during the build process and may be missing in development. 
+
+Run into another issue? [Ask for help on discord](https://discord.gg/R6QDyJgbD2)

docs/docs/contributors/non-coders.md

@@ -0,0 +1,16 @@
+# Non-Code Contributions
+
+We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
+
+- Reporting a bug
+- Discussing the current state of the code
+- Submitting a fix
+- Proposing new features
+- Becoming a maintainer
+- [Help translate to a new language or improve current translations](../translating)
+
+[Remember to join the Discord and stay in touch with other developers working on the project](https://discord.gg/R6QDyJgbD2)! 
+
+Additionally, you can buy me a coffee and support the project. When I get financial support it helps me know that there's real interest in the project and that it's worth the time to keep developing. 
+
+<a href="https://www.buymeacoffee.com/haykot" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

docs/docs/contributors/translating.md

@@ -0,0 +1,15 @@
+# Contributing with translations
+
+Having Mealie in different language could help the adaption of Mealie. Translations can be a great way for non-coders to contribute to Mealie.
+
+## Is Mealie missing in your language?
+If your language is missing, you can add it, by beginning to translate. We use a Vue-i18n in json files. Copy frontend/src/locales/en.json to get started.
+
+## Improving translations
+If your language is missing the translation for some strings, you can help out by adding a translation for that string. If you find a string you think could be improved, please feel free to do so. 
+
+## Tooling
+Currently we use Vue-i18n for translations. Translations are stored in json format located in [frontend/src/locales](https://github.com/hay-kot/mealie/tree/master/frontend/src/locales).
+If you have experience with a good Translation Management System, please feel free to chime in on the [Discord](https://discord.gg/R6QDyJgbD2), as such a system could be helpful as the projects grow.
+Until then, [i18n Ally for VScode](https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) is recommended to aid in translating. It also has a nice feature, which shows translations in-place when editing code.
+i18n Ally will also show which languages is missing translations.

docs/docs/getting-started/backups-and-exports.md

@@ -1,30 +1,16 @@
-# Site Settings Panel
-!!! danger
-    As this is still a **BETA** It is recommended that you backup your data often and store in more than one place. Ad-hear to backup best practices with the [3-2-1 Backup Rule](https://en.wikipedia.org/wiki/Backup)
-
-
-## Theme Settings
-Color themes can be created and set from the UI in the settings page. You can select an existing color theme or create a new one. On creation of a new color theme random colors will first be generated, then you can select and save as you'd like. By default the "default" theme will be loaded for all new users visiting the site. All created color themes are available to all users of the site. Separate color themes can be set for both Light and Dark modes.
-
-![](gifs/theme-demo.gif)
-
-!!! note
-    Theme data is stored in cookies in the browser. Calling "Save Theme" will refresh the cookie with the selected theme as well save the theme to the database. 
-
-
-## Backup and Export
-![](img/admin-backup.png)
+# Backup and Export
+![](../img/admin-backup.png)
 
 All recipe data can be imported and exported as necessary from the UI. Under the admin page you'll find the section for using Backups and Exports. 
 
-To create an export simple add the tag and the markdown template and click Backup Recipes and your backup will be created on the server. The backup is a standard zipfile containing all the images, json files, and rendered markdown files for each recipe. Markdown files are rendered from jinja2 templates. Adding your own markdown file into the templates folder will automatically show up as an option to select when creating a backup. To view the availible variables, open a recipe in the json editor.
+To create an export simple add the tag and the markdown template and click Backup Recipes and your backup will be created on the server. The backup is a standard zipfile containing all the images, json files, and rendered markdown files for each recipe. Markdown files are rendered from jinja2 templates. Adding your own markdown file into the templates folder will automatically show up as an option to select when creating a backup. To view the available variables, open a recipe in the json editor.
 
 To import a backup it must be in your backups folder. If it is in the backup folder it will automatically show up as an source to restore from. Selected the desired backup and import the backup file. 
 
-### Custom Templating
+## Custom Templating
 On export you can select a template to use to render files using the jinja2 syntax. This can be done to export recipes in other formats besides regular .json.Look at this example for rendering a markdown recipe using the jinja2 syntax. 
 
-#### Input
+### Input
 ```jinja2
 ![Recipe Image](../images/{{ recipe.image }})
 
@@ -52,7 +38,7 @@ Categories: {{ recipe.categories }}
 Original URL: {{ recipe.orgURL }}
 ```
 
-#### Output
+### Output
 ```markdown
 ![Recipe Image](../images/five-spice-popcorn-chicken.jpg)
 
@@ -90,14 +76,4 @@ Categories: []
 Original URL: https://www.bonappetit.com/recipe/five-spice-popcorn-chicken#intcid=_bon-appetit-recipe-bottom-recirc_3cad5ce9-734a-46f8-b503-78c33d2e7279_similar2-3
 ```
 
-If you decide you don't like mealie. This is a good way to export into a format that can be imported into another. 
-
-
-## Meal Planner Webhooks
-Meal planner webhooks are post requests sent from Mealie to an external endpoint. The body of the message is the Recipe JSON of the scheduled meal. If no meal is schedule, no request is sent. The webhook functionality can be enabled or disabled as well as scheduled. Note that you must "Save Webhooks" prior to any changes taking affect server side. 
-
-## Migration
-
-### Chowdown
-
-In the Admin page on the in the Migration section you can provide a URL for a repo hosting a Chowdown site and Mealie will pull the images and recipes from the instance and automatically import them into the database. Due to the nature of the yaml format you may have mixed results but you should get an error report of the recipes that had errors and will need to be manually added. Note that you can only import the repo as a whole. You cannot import individual recipes. 
+If you decide you don't like mealie. This is a good way to export into a format that can be imported into another. 

docs/docs/getting-started/install.md

@@ -1,25 +1,46 @@
-# Getting Started
-To deploy docker on your local network it is highly recommended to use docker to deploy the image straight from dockerhub. Using the docker-compose below you should be able to get a stack up and running easily by changing a few default values and deploying. Currently the only supported database is Mongo. Mealie is looking for contributors to support additional databases. 
+# Installation
+To deploy docker on your local network it is highly recommended to use docker to deploy the image straight from dockerhub. Using the docker-compose below you should be able to get a stack up and running easily by changing a few default values and deploying. Currently MongoDB and SQLite are supported. MongoDB support will be dropped in v0.2.0 so it is recommended to go with SQLite for new deployments. Postrgres support is planned for the next release, however for most loads you may find SQLite performant enough.  
 
 
 [Get Docker](https://docs.docker.com/get-docker/)
 
 [Mealie Docker Image](https://hub.docker.com/r/hkotel/mealie)
 
-## Env Variables
 
-| Variables      | default | description                                                                                                                                             |
-| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| mealie_db_name | mealie  | The name of the database to be created in Mongodb                                                                                                       |
-| mealie_port    | 9000    | The port exposed by mealie. **do not change this if you're running in docker** If you'd like to use another port, map 9000 to another port of the host. |
-| db_username    | root    | The Mongodb username you specified in your mongo container                                                                                              |
-| db_password    | example | The Mongodb password you specified in your mongo container                                                                                              |
-| db_host        | mongo   | The host address of MongoDB if you're in docker and using the same network you can use mongo as the host name                                           |
-| db_port        | 27017   | the port to access MongoDB 27017 is the default for mongo                                                                                               |
-| TZ             |         | You should set your time zone accordingly so the date/time features work correctly                                                                      |
+## Quick Start - Docker CLI
+Deployment with the Docker CLI can be done with `docker run` and specify the database type, in this case `sqlite`, setting the exposed port `9000`, mounting the current directory, and pull the latest image. After the image is up an running you can navigate to http://your.ip.addres:9000 and you'll should see mealie up and running!
+
+```shell
+docker run \
+    -e db_type='sqlite' \
+    -p 9000:80 \
+    -v `pwd`:'/app/data/' \
+    hkotel/mealie:latest
+
+```
+
+## Docker Compose with SQLite
+Deployment with docker-compose is the recommended method for deployment. The example below will create an instance of mealie available on port `9000` with the data volume mounted from the local directory. To use, create a docker-compose.yml file, paste the contents below and save. In the terminal run `docker-compose up -d` to start the container. 
+
+```yaml
+version: "3.1"
+services:
+  mealie:
+    container_name: mealie
+    image: hkotel/mealie:latest
+    restart: always
+    ports:
+      - 9000:80
+    environment:
+      db_type: sqlite
+      TZ: America/Anchorage
+    volumes:
+      - ./mealie/data/:/app/data
+
+```
 
 
-## Docker Compose
+## Docker Compose with Mongo - DEPRECIATED
 
 ```yaml
 # docker-compose.yml
@@ -30,7 +51,7 @@ services:
     image: hkotel/mealie:latest
     restart: always
     ports:
-      - 9000:9000
+      - 9000:80
     environment:
       db_username: root     # Your Mongo DB Username - Please Change
       db_password: example  # Your Mongo DB Password - Please Change
@@ -38,12 +59,13 @@ services:
       db_port: 27017    # The Default port for Mongo DB
       TZ: America/Anchorage
     volumes:
-      - ./data/img:/app/data/img
-      - ./data/backups:/app/data/backups
+      - ./mealie/data/:/app/data/
       
   mongo:
     image: mongo
     restart: always
+    volumes:
+      - ./mongo:/data/db  
     environment:
       MONGO_INITDB_ROOT_USERNAME: root  # Change!
       MONGO_INITDB_ROOT_PASSWORD: example   # Change!
@@ -56,57 +78,24 @@ services:
     environment:
       ME_CONFIG_MONGODB_ADMINUSERNAME: root
       ME_CONFIG_MONGODB_ADMINPASSWORD: example
-```
-
-## Ansible Tasks Template
-
-```yaml
-- name: ensures Mealie directory dir exists
-  file:
-    path: "{{ docker_dir }}/mealie/"
-    state: directory
-    owner: "{{ main_user}}"
-    group: "{{ main_group }}"
-
-- name: ensures Mealie directory dir exists
-  file:
-    path: "{{ docker_dir }}/mealie/"
-    state: directory
-    owner: "{{ main_user}}"
-    group: "{{ main_group }}"
-
-- name: Deploy Monogo Database
-  docker_container:
-    name: mealie-mongo
-    image: mongo
-    restart_policy: unless-stopped
-    networks:
-      - name: web
-    env:
-      MONGO_INITDB_ROOT_USERNAME: root
-      MONGO_INITDB_ROOT_PASSWORD: example
-
-
-- name: deploy Mealie Docker Container
-  docker_container:
-    name: mealie
-    image: hkotel/mealie:latest
-    restart_policy: unless-stopped
-    ports:
-      - 9090:9000
-    networks:
-      - name: web
-    mounts:
-      - type: bind
-        source: "{{ docker_dir }}/mealie"
-        target: /app/data
-    env:
-      db_username: root
-      db_password: example
-      db_host: mealie-mongo
-      db_port: "27017"
 
 ```
 
+
+## Env Variables
+
+| Variables      | default | description                                                                                                                                             |
+| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| db_type        | sqlite  | The database type to be used. Current Options 'sqlite' and 'mongo'                                                                                      |
+| mealie_db_name | mealie  | The name of the database to be created in Mongodb                                                                                                       |
+| mealie_port    | 9000    | The port exposed by mealie. **do not change this if you're running in docker** If you'd like to use another port, map 9000 to another port of the host. |
+| db_username    | root    | The Mongodb username you specified in your mongo container                                                                                              |
+| db_password    | example | The Mongodb password you specified in your mongo container                                                                                              |
+| db_host        | mongo   | The host address of MongoDB if you're in docker and using the same network you can use mongo as the host name                                           |
+| db_port        | 27017   | the port to access MongoDB 27017 is the default for mongo                                                                                               |
+| api_docs       | True    | Turns on/off access to the API documentation locally.                                                                                                   |
+| TZ             |         | You should set your time zone accordingly so the date/time features work correctly                                                                      |
+
+
 ## Deployed as a Python Application
 Alternatively, this project is built on Python and Mongodb. If you are dead set on deploying on a linux machine you can run this in an python environment with a dedicated MongoDatabase. Provided that you know thats how you want to host the application, I'll assume you know how to do that. I may or may not get around to writing this guide. I'm open to pull requests if anyone has a good guide on it. 

docs/docs/getting-started/meal-planner.md

@@ -8,4 +8,4 @@ To edit the meal in a meal plan simply select the edit button on the card in the
 !!! warning
     In coming a future release recipes for meals will be restricted to specific categories. 
 
-![](gifs/meal-plan-demo.gif)
+![](../gifs/meal-plan-demo.gif)

docs/docs/getting-started/migration-imports.md

@@ -0,0 +1,26 @@
+# Migration
+
+### Chowdown
+
+In the Admin page on the in the Migration section you can provide a URL for a repo hosting a [Chowdown](https://github.com/clarklab/chowdown) repository and Mealie will pull the images and recipes from the instance and automatically import them into the database. Due to the nature of the yaml format you may have mixed results but you should get an error report of the recipes that had errors and will need to be manually added. Note that you can only import the repo as a whole. You cannot import individual recipes. 
+
+We'd like to support additional migration paths. [See open issues.](https://github.com/hay-kot/mealie/issues)
+
+### Nextcloud Recipes
+Nextcloud recipes can be imported from either a zip file the contains the data stored in Nextcloud. The zip file can be uploaded from the frontend or placed in the data/migrations/Nextcloud directory. See the example folder structure below to ensure your recipes are able to be imported. 
+
+```
+nextcloud_recipes.zip
+  ├── recipe_1
+  │   ├── recipe.json
+  │   ├── full.jpg
+  │   └── thumb.jpg
+  ├── recipe_2
+  │   ├── recipe.json
+  │   └── full.jpg
+  └── recipe_3
+      └── recipe.json
+```
+
+**Currently Proposed Are:**
+- Open Eats

docs/docs/getting-started/recipes.md

@@ -4,7 +4,7 @@
 Adding a recipe can be as easy as copying the recipe URL into mealie and letting the web scrapper try to pull down the information. Currently this scraper is implemented with [scrape-schema-recipe package](https://pypi.org/project/scrape-schema-recipe/). You may have mixed results on some websites, especially with blogs or non specific recipe websites. See the bulk import Option below for another a convenient way to add blog style recipes into Mealie.
 
 
-![](gifs/url-demo.gif)
+![](../gifs/url-demo.gif)
 
 
 ## Recipe Editor
@@ -12,12 +12,12 @@ Recipes can be edited and created via the UI. This is done with both a form base
 
 You can also add a custom recipe with the UI editor built into the web view. After logging in as a user you'll have access to the editor to make changes to all the content in the recipe. 
 
-![](gifs/editor-demo.gif)
+![](../gifs/editor-demo.gif)
 
 ## Bulk Import
 Mealie also supports bulk import of recipe instructions and ingredients. Select "Bulk Add" in the editor and paste in your plain text data to be parsed. Each line is treated as one entry and will be appended to the existing ingredients or instructions if they exist. Empty lines will be stripped from the text.
 
-![](gifs/bulk-add-demo.gif)
+![](../gifs/bulk-add-demo.gif)
 
 ## Schema 
 Recipes are stored in the json-like format in mongoDB and then sent and edited in json format on the frontend. Each recipes uses [Recipe Schema](https://schema.org/Recipe) as a general guide with some additional properties specific to Mealie.

docs/docs/getting-started/site-settings.md

@@ -0,0 +1,21 @@
+# Site Settings Panel
+!!! danger
+    As this is still a **BETA** It is recommended that you backup your data often and store in more than one place. Ad-hear to backup best practices with the [3-2-1 Backup Rule](https://en.wikipedia.org/wiki/Backup)
+
+
+## Theme Settings
+Color themes can be created and set from the UI in the settings page. You can select an existing color theme or create a new one. On creation of a new color theme, the default colors will be used, then you can select and save as you'd like. By default the "default" theme will be loaded for all new users visiting the site. All created color themes are available to all users of the site. Theme Colors will be set for both light and dark modes.
+
+![](../gifs/theme-demo.gif)
+
+!!! note
+    Theme data is stored in localstorage in the browser. Calling "Save colors and apply theme will refresh the localstorage with the selected theme as well save the theme to the database. 
+
+
+
+
+
+## Meal Planner Webhooks
+Meal planner webhooks are post requests sent from Mealie to an external endpoint. The body of the message is the Recipe JSON of the scheduled meal. If no meal is schedule, no request is sent. The webhook functionality can be enabled or disabled as well as scheduled. Note that you must "Save Webhooks" prior to any changes taking affect server side. 
+
+

docs/docs/index.md

@@ -4,9 +4,20 @@
   <a href="https://github.com/hay-kot/mealie">
   </a>
   <p align="center">
-    <a href="https://github.com/hay-kot/mealie/issues">Report Bug</a>
+    A Place for All Your Recipes
+    <br />
+    <a href="https://github.com/hay-kot/mealie"><s>View Demo</s></a>
     ·
-    <a href="https://github.com/hay-kot/mealie/issues">Request Feature</a>
+    <a href="https://github.com/hay-kot/mealie/issues">Report Bug</a>    
+    ·
+    <a href="https://hay-kot.github.io/mealie/api/docs/">API</a>
+    ·
+    <a href="https://github.com/hay-kot/mealie/issues">
+    Request Feature
+    </a>    
+    ·
+    <a href="https://hub.docker.com/repository/docker/hkotel/mealies"> Docker Hub
+    </a>
   </p>
 </p>
 
@@ -62,16 +73,16 @@ Mealie also provides an API for interactions from 3rd party applications. **Why
 <!-- ROADMAP -->
 ## Road Map
 
-[See Roadmap](2.0 - roadmap)
+[See Roadmap](roadmap.md)
 
 
 
 <!-- CONTRIBUTING -->
 ## Contributing
 
-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. Especially test. Literally any tests.
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. Especially test. Literally any tests. See the [Contributors Guide](https://hay-kot.github.io/mealie/contributors/developers-guide/code-contributions/) for help getting started.
 
-If you are not a coder, you can still contribute financially. financial contributions help me prioritize working on this project over others and helps me know that there is a real demand for the project. 
+If you are not a coder, you can still contribute financially. financial contributions help me prioritize working on this project over others and helps me know that there is a real demand for project development. 
 
 <a href="https://www.buymeacoffee.com/haykot" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 

docs/docs/roadmap.md

@@ -0,0 +1,52 @@
+# Development Road Map
+
+!!! Current Release
+    v0.1.0 BETA - This is technically a pre-release, as such take care to backup data and be aware that breaking changes in future releases are a real possibility.
+
+
+Feature placement is not set in stone. This is much more of a guideline than anything else.
+
+## v x.x.x - No planned target, but eventually...
+
+### Frontend
+- [ ] Login / Logout Navigation
+    * [ ] Initial Page
+    * [ ] Logic / Function Calls
+    * [ ] Password Reset
+### Backend
+- [ ] Image Minification
+- [ ] User Setup
+    * [ ] Authentication
+    * [ ] Default Admin/Superuser Account
+    * [ ] Password Reset
+    * [ ] User Accounts
+    * [ ] Edit / Delete
+
+## v0.2.0 - Targets
+
+
+!!! error "MAJOR BREAKING CHANGE"
+        MongoDB will no longer be supported as of v0.2.0. Review the database migration page for details on migration to SQL (It's very easy)
+
+## New Features
+### Frontend
+- [ ] Advanced search
+    - [ ] Category Filter
+    - [ ] Tag Filter
+    - [x] Fuzzy Search
+- [ ] Backup card redesign
+- [ ] Additional Backup / Import Features
+    - [ ] Import Recipes Force/Rebase options
+    - [ ] Upload .zip file
+- [ ] Improved Color Picker
+- [ ] Meal Plan redesign
+### Backend
+- [ ] PostgreSQL Support
+- [ ] Setup SQL Migrations
+
+## Breaking Changes
+- Internal port 9000 changed to port 80 for better Traefik support
+- MongoDB support dropped
+## Code Chores
+- [ ] Remove MongoDB Interface Code
+- [ ] Dockerfile Trim

docs/mkdocs.yml

@@ -1,19 +1,47 @@
 site_name: Mealie Docs
+
 theme:
+  features:
+    - navigation.expand
   favicon: img/favicon.png
   name: material
   icon:
     logo: material/silverware-variant
-  features:
-    - navigation.instant
+
 markdown_extensions:
+  - pymdownx.emoji:
+      emoji_index: !!python/name:materialx.emoji.twemoji
+      emoji_generator: !!python/name:materialx.emoji.to_svg
   - def_list
   - pymdownx.highlight
   - pymdownx.superfences
   - pymdownx.tasklist:
       custom_checkbox: true
   - admonition
+
 extra_css:
   - stylesheets/custom.css
 repo_url: https://github.com/hay-kot/mealie
 repo_name: hay-kot/mealie
+
+nav:
+  - About The Project: "index.md"
+  - Getting Started:
+      - Installation: "getting-started/install.md"
+      - Working With Recipes: "getting-started/recipes.md"
+      - Planning Meals: "getting-started/meal-planner.md"
+      - Site Settings: "getting-started/site-settings.md"
+      - Backups and Exports: "getting-started/backups-and-exports.md"
+      - Recipe Migration: "getting-started/migration-imports.md"
+  - API Reference:
+      - API Usage: "api/api-usage.md"
+      - API Documentation: "api/docs/index.html"
+  - Contributors Guide:
+      - Non-Code: "contributors/non-coders.md"
+      - Translating: "contributors/translating"
+      - Developers Guide:
+          - Code Contributions: "contributors/developers-guide/code-contributions.md"
+          - Dev Getting Started: "contributors/developers-guide/starting-dev-server.md"
+          - Guidelines: "contributors/developers-guide/general-guidelines.md"
+  - Development Road Map: "roadmap.md"
+  - Change Log: "changelog.md"

frontend/.env.development

@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL=http://10.10.10.12:9921

frontend/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.enableFiletypes": [
+        "!javascript"
+    ]
+}

frontend/frontend.Dockerfile

@@ -13,7 +13,7 @@ COPY package*.json ./
 RUN npm install
 
 # copy project files and folders to the current working directory (i.e. 'app' folder)
-# COPY . .
+COPY . .
 
 # build app for production with minification
 # RUN npm run build

frontend/package.json

@@ -5,29 +5,33 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "axios": "^0.21.0",
-    "core-js": "^3.8.1",
-    "qs": "^6.9.4",
+    "axios": "^0.21.1",
+    "core-js": "^3.8.2",
+    "fuse.js": "^6.4.6",
+    "qs": "^6.9.6",
     "v-jsoneditor": "^1.4.2",
     "vue": "^2.6.11",
-    "vue-cookies": "^1.7.4",
-    "vue-html-to-paper": "^1.3.1",
+    "vue-i18n": "^8.22.4",
     "vue-router": "^3.4.9",
-    "vuetify": "^2.3.21",
-    "vuex": "^3.6.0"
+    "vuetify": "^2.4.2",
+    "vuex": "^3.6.0",
+    "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@intlify/vue-i18n-loader": "^1.0.0",
+    "@vue/cli-plugin-babel": "^4.5.10",
+    "@vue/cli-plugin-eslint": "^4.5.10",
+    "@vue/cli-service": "^4.5.10",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.30.0",
+    "sass": "^1.32.4",
     "sass-loader": "^8.0.0",
+    "vue-cli-plugin-i18n": "~1.0.1",
     "vue-cli-plugin-vuetify": "^2.0.8",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"

frontend/src/App.vue

@@ -1,17 +1,22 @@
 <template>
   <v-app>
     <v-app-bar dense app color="primary" dark class="d-print-none">
-      <v-btn @click="$router.push('/')" icon class="d-flex align-center">
-        <v-icon size="40" >
-          mdi-silverware-variant
-        </v-icon>
+      <v-btn @click="$router.push('/')" icon>
+        <v-icon size="40"> mdi-silverware-variant </v-icon>
       </v-btn>
       <div btn class="pl-2">
         <v-toolbar-title @click="$router.push('/')">Mealie</v-toolbar-title>
       </div>
 
       <v-spacer></v-spacer>
-
+      <v-expand-x-transition>
+        <SearchBar
+          class="mt-7"
+          v-if="search"
+          :show-results="true"
+          @selected="navigateFromSearch"
+        />
+      </v-expand-x-transition>
       <v-btn icon @click="toggleSearch">
         <v-icon>mdi-magnify</v-icon>
       </v-btn>
@@ -20,12 +25,8 @@
     </v-app-bar>
     <v-main>
       <v-container>
-        <AddRecipe />
+        <AddRecipeFab />
         <SnackBar />
-        <v-expand-transition>
-          <SearchHeader v-show="search" />
-        </v-expand-transition>
-
         <router-view></router-view>
       </v-container>
     </v-main>
@@ -34,17 +35,18 @@
 
 <script>
 import Menu from "./components/UI/Menu";
-import SearchHeader from "./components/UI/SearchHeader";
-import AddRecipe from "./components/AddRecipe";
+import SearchBar from "./components/UI/SearchBar";
+import AddRecipeFab from "./components/UI/AddRecipeFab";
 import SnackBar from "./components/UI/SnackBar";
+import Vuetify from "./plugins/vuetify";
 export default {
   name: "App",
 
   components: {
     Menu,
-    AddRecipe,
-    SearchHeader,
+    AddRecipeFab,
     SnackBar,
+    SearchBar,
   },
 
   watch: {
@@ -54,14 +56,35 @@ export default {
   },
 
   mounted() {
-    this.$store.dispatch("initCookies");
+    this.$store.dispatch("initTheme");
     this.$store.dispatch("requestRecentRecipes");
+    this.darkModeSystemCheck();
+    this.darkModeAddEventListener();
   },
 
   data: () => ({
     search: false,
   }),
   methods: {
+    /**
+     * Checks if 'system' is set for dark mode and then sets the corrisponding value for vuetify
+     */
+    darkModeSystemCheck() {
+      if (this.$store.getters.getDarkMode === "system")
+        Vuetify.framework.theme.dark = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        ).matches;
+    },
+    /**
+     * This will monitor the OS level darkmode and call to update dark mode.
+     */
+    darkModeAddEventListener() {
+      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      darkMediaQuery.addEventListener("change", () => {
+        this.darkModeSystemCheck();
+      });
+    },
+
     toggleSearch() {
       if (this.search === true) {
         this.search = false;
@@ -69,6 +92,9 @@ export default {
         this.search = true;
       }
     },
+    navigateFromSearch(slug) {
+      this.$router.push(`/recipe/${slug}`);
+    },
   },
 };
 </script>

frontend/src/api/backup.js

@@ -18,9 +18,10 @@ export default {
     return response.data;
   },
 
-  async import(fileName) {
-    apiReq.post(backupURLs.importBackup(fileName));
+  async import(fileName, data) {
+    let response = await apiReq.post(backupURLs.importBackup(fileName), data);
     store.dispatch("requestRecentRecipes");
+    return response;
   },
 
   async delete(fileName) {
@@ -28,6 +29,10 @@ export default {
   },
 
   async create(tag, template) {
+    if (typeof template == String) {
+      template = [template];
+    }
+    console.log(tag, template);
     let response = apiReq.post(backupURLs.createBackup, {
       tag: tag,
       template: template,

frontend/src/api/migration.js

@@ -5,15 +5,39 @@ import { store } from "../store/store";
 const migrationBase = baseURL + "migration/";
 
 const migrationURLs = {
+  upload: migrationBase + "upload/",
+  delete: (file) => `${migrationBase}${file}/delete/`,
   chowdownURL: migrationBase + "chowdown/repo/",
+  nextcloudAvaiable: migrationBase + "nextcloud/available/",
+  nextcloudImport: (selection) =>
+    `${migrationBase}nextcloud/${selection}/import/`,
 };
 
 export default {
   async migrateChowdown(repoURL) {
     let postBody = { url: repoURL };
     let response = await apiReq.post(migrationURLs.chowdownURL, postBody);
-    console.log(response);
     store.dispatch("requestRecentRecipes");
     return response.data;
   },
+  async getNextcloudImports() {
+    let response = await apiReq.get(migrationURLs.nextcloudAvaiable);
+    return response.data;
+  },
+  async importNextcloud(selected) {
+    let response = await apiReq.post(migrationURLs.nextcloudImport(selected));
+    return response.data;
+  },
+  async uploadFile(form_data) {
+    let response = await apiReq.post(migrationURLs.upload, form_data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+    return response.data;
+  },
+  async delete(file_folder_name) {
+    let response = await apiReq.delete(migrationURLs.delete(file_folder_name));
+    return response.data;
+  },
 };

frontend/src/api/recipe.js

@@ -23,7 +23,7 @@ export default {
     let response = await apiReq.post(recipeURLs.createByURL, {
       url: recipeURL,
     });
-    
+
     store.dispatch("requestRecentRecipes");
     return response;
   },
@@ -51,8 +51,9 @@ export default {
   async update(data) {
     const recipeSlug = data.slug;
 
-    apiReq.post(recipeURLs.update(recipeSlug), data);
+    let response = await apiReq.post(recipeURLs.update(recipeSlug), data);
     store.dispatch("requestRecentRecipes");
+    return response.data;
   },
 
   async delete(recipeSlug) {

frontend/src/api/themes.js

@@ -19,7 +19,6 @@ export default {
 
   async requestByName(name) {
     let response = await apiReq.get(settingsURLs.specificTheme(name));
-    console.log(response);
     return response.data;
   },
 

frontend/src/components/Admin/Backup.vue

@@ -1,124 +0,0 @@
-<template>
-  <v-card :loading="backupLoading" class="mt-3" min-height="410px">
-    <v-card-title class="secondary white--text">
-      Backup and Exports
-    </v-card-title>
-
-    <v-card-text>
-      <p>
-        Backups are exported in standard JSON format along with all the images
-        stored on the file system. In your backup folder you'll find a .zip file
-        that contains all of the recipe JSON and images from the database.
-        Additionally, if you selected a markdown file, those will also be stored
-        in the .zip file. To import a backup, it must be located in your backups
-        folder. Automated backups are done each day at 3:00 AM.
-      </p>
-
-      <v-row dense align="center">
-        <v-col dense cols="12" sm="12" md="4">
-          <v-text-field v-model="backupTag" label="Backup Tag"></v-text-field>
-        </v-col>
-        <v-col cols="12" sm="12" md="3">
-          <v-combobox
-            auto-select-first
-            label="Markdown Template"
-            :items="availableTemplates"
-            v-model="selectedTemplate"
-          ></v-combobox>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="2">
-          <v-btn block color="accent" @click="createBackup" width="165">
-            Backup Recipes
-          </v-btn>
-        </v-col>
-      </v-row>
-
-      <v-row dense align="center">
-        <v-col dense cols="12" sm="12" md="4">
-          <v-form ref="form">
-            <v-combobox
-              auto-select-first
-              label="Select a Backup for Import"
-              :items="availableBackups"
-              v-model="selectedBackup"
-              :rules="[(v) => !!v || 'Backup Selection is Required']"
-              required
-            ></v-combobox>
-          </v-form>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="3" lg="2">
-          <v-btn block color="accent" @click="importBackup">
-            Import Backup
-          </v-btn>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="2" lg="2">
-          <v-btn block color="error" @click="deleteBackup">
-            Delete Backup
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import api from "../../api";
-export default {
-  data() {
-    return {
-      backupLoading: false,
-      backupTag: null,
-      selectedBackup: null,
-      selectedTemplate: null,
-      availableBackups: [],
-      availableTemplates: [],
-    };
-  },
-  mounted() {
-    this.getAvailableBackups();
-  },
-  methods: {
-    async getAvailableBackups() {
-      let response = await api.backups.requestAvailable();
-      this.availableBackups = response.imports;
-      this.availableTemplates = response.templates;
-    },
-    importBackup() {
-      if (this.$refs.form.validate()) {
-        this.backupLoading = true;
-
-        api.backups.import(this.selectedBackup);
-        this.backupLoading = false;
-      }
-    },
-    deleteBackup() {
-      if (this.$refs.form.validate()) {
-        this.backupLoading = true;
-
-        api.backups.delete(this.selectedBackup);
-        this.getAvailableBackups();
-
-        this.selectedBackup = null;
-        this.backupLoading = false;
-      }
-    },
-    async createBackup() {
-      this.backupLoading = true;
-
-      let response = await api.backups.create(
-        this.backupTag,
-        this.selectedTemplate
-      );
-
-      if (response.status == 201) {
-        this.selectedBackup = null;
-        this.getAvailableBackups();
-        this.backupLoading = false;
-      }
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Admin/Migration.vue

@@ -1,69 +0,0 @@
-<template>
-  <v-card :loading="loading">
-    <v-card-title class="secondary white--text mt-1">
-      Recipe Migration
-    </v-card-title>
-    <v-card-text>
-      <p>
-        Currently Chowdown via public Repo URL is the only supported type of
-        migration
-      </p>
-      <v-form>
-        <v-row dense align="center">
-          <v-col cols="12" md="5" sm="5">
-            <v-text-field v-model="repo" label="Chowdown Repo URL">
-            </v-text-field>
-          </v-col>
-          <v-col cols="12" md="4" sm="5">
-            <v-btn text color="info" @click="importRepo"> Migrate </v-btn>
-          </v-col>
-        </v-row>
-      </v-form>
-      <v-alert v-if="failedRecipes[1]" outlined dense type="error">
-        <h4>Failed Recipes</h4>
-        <v-list dense>
-          <v-list-item v-for="fail in this.failedRecipes" :key="fail">
-            {{ fail }}
-          </v-list-item>
-        </v-list>
-      </v-alert>
-      <v-alert v-if="failedImages[1]" outlined dense type="error">
-        <h4>Failed Images</h4>
-        <v-list dense>
-          <v-list-item v-for="fail in this.failedImages" :key="fail">
-            {{ fail }}
-          </v-list-item>
-        </v-list>
-      </v-alert>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import api from "../../api";
-// import TimePicker from "./Webhooks/TimePicker";
-export default {
-  data() {
-    return {
-      processRan: false,
-      loading: false,
-      failedImages: [],
-      failedRecipes: [],
-      repo: "",
-    };
-  },
-  methods: {
-    async importRepo() {
-      this.loading = true;
-      let response = await api.migrations.migrateChowdown(this.repo);
-      this.failedImages = response.failedImages;
-      this.failedRecipes = response.failedRecipes;
-      this.loading = false;
-      this.processRan = true;
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Admin/SFTP.vue

@@ -1,12 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title class="card-title mt-1"> SFTP Settings </v-card-title>
-  </v-card>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style>
-</style>

frontend/src/components/Admin/Theme.vue

@@ -1,159 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title class="secondary white--text"> Theme Settings </v-card-title>
-    <v-card-text>
-      <p>
-        Select a theme from the dropdown or create a new theme. Note that the
-        default theme will be served to all users who have not set a theme
-        preference.
-      </p>
-      <v-row dense align="center">
-        <v-col cols="12" md="2" sm="5">
-          <v-switch
-            v-model="darkMode"
-            inset
-            label="Dark Mode"
-            class="my-n3"
-            @change="toggleDarkMode"
-          ></v-switch>
-        </v-col>
-        <v-col cols="12" md="4" sm="3">
-          <v-form ref="form" lazy-validation>
-            <v-select
-              label="Saved Color Schemes"
-              :items="availableThemes"
-              item-text="name"
-              item-value="colors"
-              return-object
-              v-model="selectedScheme"
-              @change="themeSelected"
-              :rules="[(v) => !!v || 'Theme is required']"
-              required
-            >
-            </v-select>
-          </v-form>
-        </v-col>
-        <v-col cols="12" sm="1">
-          <NewTheme @new-theme="appendTheme" />
-        </v-col>
-        <v-col cols="12" sm="1">
-          <v-btn text color="error" @click="deleteSelected"> Delete </v-btn>
-        </v-col>
-      </v-row>
-      <v-row dense align-content="center" v-if="activeTheme">
-        <v-col>
-          <ColorPicker button-text="Primary" v-model="activeTheme.primary" />
-        </v-col>
-        <v-col>
-          <ColorPicker
-            button-text="Secondary"
-            v-model="activeTheme.secondary"
-          />
-        </v-col>
-        <v-col>
-          <ColorPicker button-text="Accent" v-model="activeTheme.accent" />
-        </v-col>
-        <v-col>
-          <ColorPicker button-text="Success" v-model="activeTheme.success" />
-        </v-col>
-        <v-col>
-          <ColorPicker button-text="Info" v-model="activeTheme.info" />
-        </v-col>
-        <v-col>
-          <ColorPicker button-text="Warning" v-model="activeTheme.warning" />
-        </v-col>
-        <v-col>
-          <ColorPicker button-text="Error" v-model="activeTheme.error" />
-        </v-col>
-      </v-row>
-    </v-card-text>
-
-    <v-card-actions>
-      <v-row>
-        <v-col> </v-col>
-        <v-col></v-col>
-        <v-col align="end">
-          <v-btn text color="success" @click="saveThemes"> Save Theme </v-btn>
-        </v-col>
-      </v-row>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script>
-import api from "../../api";
-import ColorPicker from "./ThemeUI/ColorPicker";
-import NewTheme from "./ThemeUI/NewTheme";
-
-export default {
-  components: {
-    ColorPicker,
-    NewTheme,
-  },
-  data() {
-    return {
-      themes: null,
-      activeTheme: {},
-      darkMode: false,
-      availableThemes: [],
-      selectedScheme: "",
-      selectedLight: "",
-    };
-  },
-  async mounted() {
-    this.availableThemes = await api.themes.requestAll();
-    this.darkMode = this.$store.getters.getDarkMode;
-    this.themes = this.$store.getters.getThemes;
-    this.setThemeEditor();
-  },
-
-  methods: {
-    async deleteSelected() {
-      if (this.$refs.form.validate()) {
-        if (this.selectedScheme === "default") {
-          // Notify User Can't Delete Default
-        } else if (this.selectedScheme !== "") {
-          api.themes.delete(this.selectedScheme.name);
-        }
-        this.availableThemes = await api.themes.requestAll();
-      }
-    },
-    async appendTheme(newTheme) {
-      api.themes.create(newTheme);
-      this.availableThemes.push(newTheme);
-    },
-    themeSelected() {
-      this.activeTheme = this.selectedScheme.colors;
-    },
-    setThemeEditor() {
-      if (this.darkMode) {
-        this.activeTheme = this.themes.dark;
-      } else {
-        this.activeTheme = this.themes.light;
-      }
-    },
-    toggleDarkMode() {
-      this.$store.commit("setDarkMode", this.darkMode);
-      this.selectedScheme = "";
-
-      this.setThemeEditor();
-    },
-    saveThemes() {
-      if (this.$refs.form.validate()) {
-        if (this.darkMode) {
-          this.themes.dark = this.activeTheme;
-        } else {
-          this.themes.light = this.activeTheme;
-        }
-        this.$store.commit("setThemes", this.themes);
-        this.$store.dispatch("initCookies");
-        api.themes.update(this.selectedScheme.name, this.activeTheme);
-      } else;
-    },
-  },
-};
-</script>
-
-<style>
-</style>
-

frontend/src/components/Admin/ThemeUI/NewTheme.vue

@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <v-btn text color="success" @click="dialog = true"> New </v-btn>
-    <v-dialog v-model="dialog" width="400">
-      <v-card>
-        <v-card-title> Add a New Theme </v-card-title>
-        <v-card-text>
-          <v-text-field label="Theme Name" v-model="themeName"></v-text-field>
-        </v-card-text>
-        <v-card-actions>
-          <v-btn color="success" text @click="Select"> Create </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    buttonText: String,
-    value: String,
-  },
-  data() {
-    return {
-      dialog: false,
-      themeName: "",
-    };
-  },
-
-  watch: {
-    color() {
-      this.updateColor();
-    },
-  },
-  methods: {
-    randomColor() {
-      return "#" + Math.floor(Math.random() * 16777215).toString(16);
-    },
-    Select() {
-      const newTheme = {
-        name: this.themeName,
-        colors: {
-          primary: this.randomColor(),
-          accent: this.randomColor(),
-          secondary: this.randomColor(),
-          success: this.randomColor(),
-          info: this.randomColor(),
-          warning: this.randomColor(),
-          error: this.randomColor(),
-        },
-      };
-
-      this.$emit("new-theme", newTheme);
-      this.dialog = false;
-    },
-  },
-};
-</script>
-
-<style>
-</style>

frontend/src/components/Admin/Users.vue

@@ -1,12 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title class="card-title mt-1"> User Settings </v-card-title>
-  </v-card>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style>
-</style>

frontend/src/components/MealPlan/MealPlanEditor.vue

@@ -1,13 +1,13 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text"> Edit Meal Plan </v-card-title>
-    <v-card-text> </v-card-text>
+    <v-card-title class="headline"> {{$t('meal-plan.edit-meal-plan')}} </v-card-title>
+    <v-divider></v-divider>
 
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">
         <v-card-actions>
-          <v-btn color="success" text @click="update"> Update </v-btn>
+          <v-btn color="success" text @click="update"> {{$t('general.update')}} </v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-row>

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -1,8 +1,9 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text">
-      Create a New Meal Plan
+    <v-card-title class="headline">
+      {{$t('meal-plan.create-a-new-meal-plan')}}
     </v-card-title>
+    <v-divider></v-divider>
     <v-card-text>
       <v-row dense>
         <v-col cols="12" lg="6" md="6" sm="12">
@@ -18,7 +19,7 @@
             <template v-slot:activator="{ on, attrs }">
               <v-text-field
                 v-model="startComputedDateFormatted"
-                label="Start Date"
+                :label="$t('meal-plan.start-date')"
                 persistent-hint
                 prepend-icon="mdi-calendar"
                 readonly
@@ -46,7 +47,7 @@
             <template v-slot:activator="{ on, attrs }">
               <v-text-field
                 v-model="endComputedDateFormatted"
-                label="End Date"
+                :label="$t('meal-plan.end-date')"
                 persistent-hint
                 prepend-icon="mdi-calendar"
                 readonly
@@ -70,9 +71,9 @@
     <v-row align="center" justify="end">
       <v-card-actions>
         <v-btn color="success" @click="random" v-if="meals[1]" text>
-          Random
+          {{$t('general.random')}}
         </v-btn>
-        <v-btn color="success" @click="save" text> Save </v-btn>
+        <v-btn color="success" @click="save" text> {{$t('general.save')}} </v-btn>
 
         <v-spacer></v-spacer>
         <v-btn icon @click="show = !show"> </v-btn>
@@ -107,7 +108,7 @@ export default {
       this.meals = [];
       for (let i = 0; i < this.dateDif; i++) {
         this.meals.push({
-          slug: "",
+          slug: "empty",
           date: this.getDate(i),
           dateText: this.getDayText(i),
         });

frontend/src/components/MealPlan/MealSelect.vue

@@ -2,7 +2,7 @@
   <v-row justify="center">
     <v-dialog v-model="dialog" persistent max-width="800">
       <v-card>
-        <v-card-title class="headline"> Choose a Recipe </v-card-title>
+        <v-card-title class="headline"> {{$t('meal-plan.choose-a-recipe')}} </v-card-title>
         <v-card-text>
           <v-autocomplete
             :items="availableRecipes"
@@ -13,14 +13,12 @@
             hide-details
             hide-selected
             item-text="slug"
-            label="Search for a Recipe"
+            :label="$t('search.search-for-a-recipe')"
             single-line
           >
             <template v-slot:no-data>
               <v-list-item>
-                <v-list-item-title>
-                  Search for your Favorite
-                  <strong>Recipe</strong>
+                <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
                 </v-list-item-title>
               </v-list-item>
             </template>
@@ -44,8 +42,8 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="secondary" text @click="dialog = false"> Close </v-btn>
-          <v-btn color="secondary" text @click="dialog = false"> Select </v-btn>
+          <v-btn color="secondary" text @click="dialog = false"> {{$t('general.close')}} </v-btn>
+          <v-btn color="secondary" text @click="dialog = false"> {{$t('general.select')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

frontend/src/components/Recipe/RecipeEditor/BulkAdd.vue

@@ -10,17 +10,16 @@
           v-on="on"
           @click="inputText = ''"
         >
-          Bulk Add
+          {{$t('new-recipe.bulk-add')}}
         </v-btn>
       </template>
 
       <v-card>
-        <v-card-title class="headline"> Bulk Add </v-card-title>
+        <v-card-title class="headline"> {{$t('new-recipe.bulk-add')}} </v-card-title>
 
         <v-card-text>
           <p>
-            Paste in your recipe data. Each line will be treated as an item in a
-            list
+            {{$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')}}
           </p>
           <v-textarea v-model="inputText"> </v-textarea>
         </v-card-text>
@@ -29,7 +28,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="success" text @click="save"> Save </v-btn>
+          <v-btn color="success" text @click="save"> {{$t('general.save')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

frontend/src/components/Recipe/RecipeEditor/ExtrasEditor.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="700">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="accent" dark v-bind="attrs" v-on="on"> API Extras </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title> API Extras </v-card-title>
+
+        <v-card-text :key="formKey">
+          <v-row
+            align="center"
+            v-for="(value, key, index) in extras"
+            :key="index"
+          >
+            <v-col cols="12" sm="1">
+              <v-btn
+                fab
+                text
+                x-small
+                color="white"
+                elevation="0"
+                @click="removeExtra(key)"
+              >
+                <v-icon color="error">mdi-delete</v-icon>
+              </v-btn>
+            </v-col>
+            <v-col cols="12" md="3" sm="6">
+              <v-text-field
+                label="Object Key"
+                :value="key"
+                @input="updateKey(index)"
+              >
+              </v-text-field>
+            </v-col>
+            <v-col cols="12" md="8" sm="6">
+              <v-text-field label="Object Value" v-model="extras[key]">
+              </v-text-field>
+            </v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-form ref="addKey">
+            <v-text-field
+              label="New Key Name"
+              v-model="newKeyName"
+              class="pr-4"
+              :rules="[rules.required, rules.whiteSpace]"
+            ></v-text-field>
+          </v-form>
+          <v-btn color="info" text @click="append"> Add Key</v-btn>
+
+          <v-spacer></v-spacer>
+
+          <v-btn color="success" text @click="save"> Save </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    extras: Object,
+  },
+  data() {
+    return {
+      newKeyName: null,
+      dialog: false,
+      formKey: 1,
+      rules: {
+        required: (v) => !!v || "Key Name Required",
+        whiteSpace: (v) =>
+          !v || v.split(" ").length <= 1 || "No White Space Allowed",
+      },
+    };
+  },
+
+  methods: {
+    save() {
+      this.$emit("save", this.extras);
+      this.dialog = false;
+    },
+    append() {
+      if (this.$refs.addKey.validate()) {
+        this.extras[this.newKeyName] = "value";
+        this.formKey += 1;
+      }
+    },
+    removeExtra(key) {
+      delete this.extras[key];
+      this.formKey += 1;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Recipe/RecipeEditor/index.vue

@@ -6,21 +6,41 @@
         <v-col>
           <v-file-input
             v-model="fileObject"
-            label="Image File"
+            :label="$t('general.image-file')"
             truncate-length="30"
             @change="uploadImage"
           ></v-file-input>
         </v-col>
         <v-col cols="3"></v-col>
+        <v-row>
+          <v-col>
+            <v-text-field
+              label="Total Time"
+              v-model="value.totalTime"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            ><v-text-field
+              label="Prep Time"
+              v-model="value.prepTime"
+            ></v-text-field
+          ></v-col>
+          <v-col
+            ><v-text-field
+              label="Cook Time / Perform Time"
+              v-model="value.performTime"
+            ></v-text-field
+          ></v-col>
+        </v-row>
       </v-row>
-      <v-text-field class="my-3" label="Recipe Name" v-model="value.name">
+      <v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name">
       </v-text-field>
-      <v-textarea height="100" label="Description" v-model="value.description">
+      <v-textarea height="100" :label="$t('recipe.description')" v-model="value.description">
       </v-textarea>
       <div class="my-2"></div>
       <v-row dense disabled>
         <v-col sm="5">
-          <v-text-field label="Servings" v-model="value.recipeYield">
+          <v-text-field :label="$t('recipe.servings')" v-model="value.recipeYield">
           </v-text-field>
         </v-col>
         <v-col></v-col>
@@ -34,7 +54,7 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">Ingredients</h2>
+          <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
           <div
             v-for="(ingredient, index) in value.recipeIngredient"
             :key="generateKey('ingredient', index)"
@@ -51,7 +71,7 @@
                 <v-icon color="error">mdi-delete</v-icon>
               </v-btn>
               <v-text-field
-                label="Ingredient"
+                :label="$t('recipe.ingredient')"
                 v-model="value.recipeIngredient[index]"
               ></v-text-field>
             </v-row>
@@ -61,7 +81,7 @@
           </v-btn>
           <BulkAdd @bulk-data="appendIngredients" />
 
-          <h2 class="mt-6">Categories</h2>
+          <h2 class="mt-6">{{$t('recipe.categories')}}</h2>
           <v-combobox
             dense
             multiple
@@ -83,7 +103,7 @@
             </template>
           </v-combobox>
 
-          <h2 class="mt-4">Tags</h2>
+          <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
           <v-combobox dense multiple chips deletable-chips v-model="value.tags">
             <template v-slot:selection="data">
               <v-chip
@@ -98,7 +118,7 @@
             </template>
           </v-combobox>
 
-          <h2 class="my-4">Notes</h2>
+          <h2 class="my-4">{{$t('recipe.notes')}}</h2>
           <v-card
             class="mt-1"
             v-for="(note, index) in value.notes"
@@ -122,19 +142,20 @@
                 ></v-text-field>
               </v-row>
 
-              <v-textarea label="Note" v-model="value.notes[index]['text']">
+              <v-textarea :label="$t('recipe.note')" v-model="value.notes[index]['text']">
               </v-textarea>
             </v-card-text>
           </v-card>
           <v-btn class="mt-1" color="secondary" fab dark small @click="addNote">
             <v-icon>mdi-plus</v-icon>
           </v-btn>
+          <ExtrasEditor :extras="value.extras" @save="saveExtras" />
         </v-col>
 
         <v-divider class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <h2 class="mb-4">Instructions</h2>
+          <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
           <div v-for="(step, index) in value.recipeInstructions" :key="index">
             <v-hover v-slot="{ hover }">
               <v-card
@@ -152,7 +173,7 @@
                     @click="removeStep(index)"
                   >
                     <v-icon color="error">mdi-delete</v-icon> </v-btn
-                  >Step: {{ index + 1 }}</v-card-title
+                  >{{ $t('recipe.step-index', {step: index + 1}) }}</v-card-title
                 >
                 <v-card-text>
                   <v-textarea
@@ -175,12 +196,14 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
+import api from "../../../api";
+import utils from "../../../utils";
 import BulkAdd from "./BulkAdd";
+import ExtrasEditor from "./ExtrasEditor";
 export default {
   components: {
     BulkAdd,
+    ExtrasEditor,
   },
   props: {
     value: Object,
@@ -188,13 +211,6 @@ export default {
   data() {
     return {
       fileObject: null,
-      content: this.value,
-      disabledSteps: [],
-      description: String,
-      ingredients: Array,
-      instructions: Array,
-      categories: Array,
-      tags: Array,
     };
   },
   methods: {
@@ -270,6 +286,9 @@ export default {
     removeTags(index) {
       this.value.tags.splice(index, 1);
     },
+    saveExtras(extras) {
+      this.value.extras = extras;
+    },
   },
 };
 </script>

frontend/src/components/Recipe/RecipePrint.vue

@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <v-card flat class="d-print-none">
+      <v-card-text>
+        <v-row align="center" justify="center">
+          <v-btn
+            left
+            color="accent lighten-1 "
+            class="ma-1 image-action"
+            @click="$emit('exit')"
+          >
+            <v-icon> mdi-arrow-left </v-icon>
+          </v-btn>
+          <v-card flat class="text-center" align-center>
+            <v-card-text>Font Size</v-card-text>
+            <v-card-text>
+              <v-btn
+                class="mx-2"
+                fab
+                dark
+                x-small
+                color="primary"
+                @click="subtractFontSize"
+              >
+                <v-icon dark> mdi-minus </v-icon>
+              </v-btn>
+              <v-btn
+                class="mx-2"
+                fab
+                dark
+                x-small
+                color="primary"
+                @click="addFontSize"
+              >
+                <v-icon dark> mdi-plus </v-icon>
+              </v-btn>
+            </v-card-text>
+          </v-card>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <v-card flat>
+      <v-row dense align="center">
+        <v-col md="10" sm="10">
+          <v-card flat>
+            <v-card-title> {{ recipe.name }} </v-card-title>
+
+            <v-card-text> {{ recipe.description }} </v-card-text>
+
+            <v-divider></v-divider>
+          </v-card>
+        </v-col>
+        <v-col md="1" sm="1" justify-end>
+          <v-img :src="getImage(recipe.image)" max-height="200" max-width="300">
+          </v-img>
+        </v-col>
+      </v-row>
+    </v-card>
+    <v-card flat align>
+      <v-card-text>
+        <v-row class="mt-n6">
+          <v-col>
+            <v-btn
+              v-if="recipe.recipeYield"
+              dense
+              small
+              :hover="false"
+              type="label"
+              :ripple="false"
+              elevation="0"
+              color="secondary darken-1"
+              class="rounded-sm static"
+            >
+              {{ recipe.recipeYield }}
+            </v-btn>
+          </v-col>
+          <v-rating
+            class="mr-2 align-end static"
+            color="secondary darken-1"
+            background-color="secondary lighten-3"
+            length="5"
+            :value="recipe.rating"
+          ></v-rating>
+        </v-row>
+        <h2 class="mt-1">Ingredients</h2>
+        <v-row>
+          <v-list dense class="column-wrapper align-start">
+            <v-list-item
+              v-for="(ingredient, index) in recipe.recipeIngredient"
+              :key="generateKey('ingredient', index)"
+              hide-details
+              class="mb-n3 print-text"
+              :label="ingredient"
+            >
+              <v-list-item-icon class="mr-1">
+                <v-icon> mdi-minus </v-icon>
+              </v-list-item-icon>
+              {{ ingredient }}
+            </v-list-item>
+          </v-list>
+        </v-row>
+        <v-row dense>
+          <v-col cols="12">
+            <div v-if="recipe.categories[0]">
+              <h2 class="mt-4">Categories</h2>
+              <v-chip
+                class="ma-1"
+                color="primary"
+                dark
+                v-for="category in recipe.categories"
+                :key="category"
+              >
+                {{ category }}
+              </v-chip>
+            </div>
+
+            <div v-if="recipe.tags[0]">
+              <h2 class="mt-4">Tags</h2>
+              <v-chip
+                class="ma-1"
+                color="primary"
+                dark
+                v-for="tag in recipe.tags"
+                :key="tag"
+              >
+                {{ tag }}
+              </v-chip>
+            </div>
+
+            <h2 v-if="recipe.notes[0]" class="my-2">Notes</h2>
+            <v-card
+              flat
+              class="mt-1"
+              v-for="(note, index) in recipe.notes"
+              :key="generateKey('note', index)"
+            >
+              <v-card-title> {{ note.title }}</v-card-title>
+              <v-card-text>
+                {{ note.text }}
+              </v-card-text>
+            </v-card>
+          </v-col>
+          <v-col cols="12">
+            <h2 class="mb-4">Instructions</h2>
+
+            <v-card
+              v-for="(step, index) in recipe.recipeInstructions"
+              :key="generateKey('step', index)"
+              class="my-n4"
+              flat
+            >
+              <v-card-title class="my-n4">Step: {{ index + 1 }}</v-card-title>
+              <v-card-text class="my-n4">{{ step.text }}</v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import utils from "../../utils";
+
+export default {
+  props: {
+    recipe: Object,
+  },
+  data() {
+    return {
+      fontSize: 1.0,
+    };
+  },
+  methods: {
+    getImage(image) {
+      if (image) {
+        return utils.getImageURL(image) + "?rnd=" + this.imageKey;
+      }
+    },
+    generateKey(item, index) {
+      return utils.generateUniqueKey(item, index);
+    },
+    addFontSize() {
+      this.fontSize += 0.2;
+    },
+    subtractFontSize() {
+      this.fontSize -= 0.2;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.column-wrapper {
+  column-count: 2;
+}
+</style>

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-card
+    color="accent"
+    class="custom-transparent"
+    tile
+    :width="`${timeCardWidth}`"
+  >
+    <v-card-text
+      class="text-caption white--text"
+      v-if="totalTime || prepTime || performTime"
+    >
+      <v-row align="center" dense>
+        <v-col :cols="iconColumn">
+          <v-icon large color="white"> mdi-clock-outline </v-icon>
+        </v-col>
+        <v-divider
+          vertical
+          color="white"
+          class="my-1"
+          v-if="totalTime"
+        ></v-divider>
+        <v-col v-if="totalTime">
+          <div><strong> Total Time </strong></div>
+          <div>{{ totalTime }}</div>
+        </v-col>
+        <v-divider
+          vertical
+          color="white"
+          class="my-1"
+          v-if="prepTime"
+        ></v-divider>
+        <v-col v-if="prepTime">
+          <div><strong> Prep Time </strong></div>
+          <div>{{ prepTime }}</div>
+        </v-col>
+        <v-divider
+          vertical
+          color="white"
+          class="my-1"
+          v-if="performTime"
+        ></v-divider>
+        <v-col v-if="performTime">
+          <div><strong> Cook Time </strong></div>
+          <div>{{ performTime }}</div>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    prepTime: String,
+    totalTime: String,
+    performTime: String,
+  },
+  computed: {
+    timeLength() {
+      let times = [];
+      let timeArray = [this.totalTime, this.prepTime, this.performTime];
+      timeArray.forEach((element) => {
+        if (element) {
+          times.push(element);
+        }
+      });
+
+      return times.length;
+    },
+    iconColumn() {
+      switch (this.timeLength) {
+        case 0:
+          return null;
+        case 1:
+          return 4;
+        case 2:
+          return 3;
+        case 3:
+          return 2;
+        default:
+          return 1;
+      }
+    },
+    timeCardWidth() {
+      let timeArray = [this.totalTime, this.prepTime, this.performTime];
+      let width = 120;
+      timeArray.forEach((element) => {
+        if (element) {
+          width += 70;
+        }
+      });
+
+      if (this.$vuetify.breakpoint.name === "xs") {
+        return "100%";
+      }
+
+      return `${width}px`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-transparent {
+  opacity: 0.7;
+}
+</style>

frontend/src/components/Recipe/RecipeViewer.vue

@@ -32,7 +32,7 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">Ingredients</h2>
+          <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
           <div
             v-for="(ingredient, index) in ingredients"
             :key="generateKey('ingredient', index)"
@@ -47,10 +47,10 @@
           </div>
 
           <div v-if="categories[0]">
-            <h2 class="mt-4">Categories</h2>
+            <h2 class="mt-4">{{$t('recipe.categories')}}</h2>
             <v-chip
               class="ma-1"
-              color="primary"
+              color="accent"
               dark
               v-for="category in categories"
               :key="category"
@@ -60,10 +60,10 @@
           </div>
 
           <div v-if="tags[0]">
-            <h2 class="mt-4">Tags</h2>
+            <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
             <v-chip
               class="ma-1"
-              color="primary"
+              color="accent"
               dark
               v-for="tag in tags"
               :key="tag"
@@ -72,7 +72,7 @@
             </v-chip>
           </div>
 
-          <h2 v-if="notes[0]" class="my-4">Notes</h2>
+          <h2 v-if="notes[0]" class="my-4">{{$t('recipe.notes')}}</h2>
           <v-card
             class="mt-1"
             v-for="(note, index) in notes"
@@ -87,7 +87,7 @@
         <v-divider class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <h2 class="mb-4">Instructions</h2>
+          <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
           <v-hover
             v-for="(step, index) in instructions"
             :key="generateKey('step', index)"
@@ -99,7 +99,7 @@
               :elevation="hover ? 12 : 2"
               @click="toggleDisabled(index)"
             >
-              <v-card-title>Step: {{ index + 1 }}</v-card-title>
+              <v-card-title>{{ $t('recipe.step-index', {step: index + 1}) }}</v-card-title>
               <v-card-text>{{ step.text }}</v-card-text>
             </v-card>
           </v-hover>
@@ -121,7 +121,7 @@
           target="_blank"
           class="rounded-sm mr-4"
         >
-          Original Recipe
+          {{$t('recipe.original-recipe')}}
         </v-btn>
       </v-row>
     </v-card-text>

frontend/src/components/RecipeEditor/DetailsView.vue

@@ -1,128 +0,0 @@
-<template>
-  <v-card-text>
-    <v-row>
-      <v-col cols="4">
-        <h2 class="mb-4">Ingredients</h2>
-        <div v-for="ingredient in ingredients" :key="ingredient">
-          <v-row align="center">
-            <v-checkbox hide-details class="shrink mr-2 mt-0"></v-checkbox>
-            <v-text-field :value="ingredient"></v-text-field>
-          </v-row>
-        </div>
-        <v-btn
-          class="ml-n5"
-          color="primary"
-          fab`
-          dark
-          small
-          @click="addIngredient"
-        >
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
-
-        <h2 class="mt-6">Categories</h2>
-        <v-combobox
-          dense
-          multiple
-          chips
-          item-color="primary"
-          deletable-chips
-          :value="categories"
-        >
-          <template v-slot:selection="data">
-            <v-chip :selected="data.selected" close color="primary" dark>
-              {{ data.item }}
-            </v-chip>
-          </template>
-        </v-combobox>
-
-        <h2 class="mt-4">Tags</h2>
-        <v-combobox dense multiple chips deletable-chips :value="tags">
-          <template v-slot:selection="data">
-            <v-chip :selected="data.selected" close color="primary" dark>
-              {{ data.item }}
-            </v-chip>
-          </template>
-        </v-combobox>
-      </v-col>
-
-      <v-divider :vertical="true"></v-divider>
-
-      <v-col>
-        <h2 class="mb-4">Instructions</h2>
-        <div v-for="(step, index) in instructions" :key="step.text">
-          <v-hover v-slot="{ hover }">
-            <v-card
-              class="ma-1"
-              :class="[{ 'on-hover': hover }]"
-              :elevation="hover ? 12 : 2"
-            >
-              <v-card-title>Step: {{ index + 1 }}</v-card-title>
-              <v-card-text>
-                <v-textarea dense :value="step.text"></v-textarea>
-              </v-card-text>
-            </v-card>
-          </v-hover>
-        </div>
-        <v-btn color="primary" fab dark small @click="addStep">
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-card-text>
-</template>
-
-<script>
-export default {
-  props: {
-    form: Boolean,
-    ingredients: Array,
-    instructions: Array,
-    categories: Array,
-    tags: Array,
-  },
-  data() {
-    return {
-      disabledSteps: [],
-    };
-  },
-
-  methods: {
-    toggleDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex)) {
-        let index = this.disabledSteps.indexOf(stepIndex);
-        if (index !== -1) {
-          this.disabledSteps.splice(index, 1);
-        }
-      } else {
-        this.disabledSteps.push(stepIndex);
-      }
-    },
-    isDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex)) {
-        return "disabled-card";
-      } else {
-        return;
-      }
-    },
-    saveRecipe() {
-      this.$emit("save");
-    },
-    deleteRecipe() {
-      this.$emit("delete");
-    },
-    addIngredient() {
-      this.$emit("addingredient");
-    },
-    addStep() {
-      this.$emit("addstep");
-    },
-  },
-};
-</script>
-
-<style>
-.disabled-card {
-  opacity: 0.5;
-}
-</style>

frontend/src/components/Settings/Backup/BackupCard.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <ImportDialog
+      :name="selectedName"
+      :date="selectedDate"
+      ref="import_dialog"
+      @import="importBackup"
+      @delete="deleteBackup"
+    />
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="4"
+        v-for="backup in backups"
+        :key="backup.name"
+      >
+        <v-card @click="openDialog(backup)">
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="12" sm="2">
+                <v-icon color="primary"> mdi-backup-restore </v-icon>
+              </v-col>
+              <v-col cols="12" sm="10">
+                <div>
+                  <strong>{{ backup.name }}</strong>
+                </div>
+                <div>{{ readableTime(backup.date) }}</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import ImportDialog from "./ImportDialog";
+import api from "../../../api";
+import utils from "../../../utils";
+export default {
+  props: {
+    backups: Array,
+  },
+  components: {
+    ImportDialog,
+  },
+  data() {
+    return {
+      selectedName: "",
+      selectedDate: "",
+      loading: false,
+    };
+  },
+  methods: {
+    openDialog(backup) {
+      this.selectedDate = this.readableTime(backup.date);
+      this.selectedName = backup.name;
+      this.$refs.import_dialog.open();
+    },
+    readableTime(timestamp) {
+      let date = new Date(timestamp);
+      return utils.getDateAsText(date);
+    },
+    async importBackup(data) {
+      this.$emit("loading");
+      let response = await api.backups.import(data.name, data);
+
+      let failed = response.data.failed;
+      let succesful = response.data.successful;
+
+      this.$emit("finished", succesful, failed);
+    },
+    deleteBackup(data) {
+      this.$emit("loading");
+
+      api.backups.delete(data.name);
+      this.selectedBackup = null;
+      this.backupLoading = false;
+
+      this.$emit("finished");
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/ImportDialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <v-card>
+        <v-card-title> {{ name }} </v-card-title>
+        <v-card-subtitle class="mb-n3"> {{ date }} </v-card-subtitle>
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-checkbox
+                class="mb-n4 mt-1"
+                dense
+                :label="$t('settings.backup.import-recipes')"
+                v-model="importRecipes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                :label="$t('settings.backup.import-themes')"
+                v-model="importThemes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                :label="$t('settings.backup.import-settings')"
+                v-model="importSettings"
+              ></v-checkbox>
+            </v-col>
+            <!-- <v-col>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Force"
+                      v-model="forceImport"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span>Force update existing recipes</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Rebase"
+                      v-model="rebaseImport"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span
+                  >Removes all recipes, and then imports recipes from the
+                  backup</span
+                >
+              </v-tooltip>
+            </v-col> -->
+          </v-row>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-btn disabled color="success" text @click="raiseEvent('download')">
+            {{$t('general.download')}}
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn color="error" text @click="raiseEvent('delete')">
+            {{$t('general.delete')}}
+          </v-btn>
+          <v-btn color="success" text @click="raiseEvent('import')">
+            {{$t('general.import')}}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    name: {
+      default: "Backup Name",
+    },
+    date: {
+      default: "Backup Date",
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      importRecipes: true,
+      forceImport: false,
+      rebaseImport: false,
+      importThemes: false,
+      importSettings: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+    close() {
+      this.dialog = false;
+    },
+    raiseEvent(event) {
+      let eventData = {
+        name: this.name,
+        recipes: this.importRecipes,
+        force: this.forceImport,
+        rebase: this.rebaseImport,
+        themes: this.importThemes,
+        settings: this.importSettings,
+      };
+      this.close();
+      this.$emit(event, eventData);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <v-card :loading="backupLoading" class="mt-3">
+    <v-card-title class="headline">
+      {{$t('settings.backup-and-exports')}}
+    </v-card-title>
+    <v-divider></v-divider>
+
+    <v-card-text>
+      <p>
+        {{$t('settings.backup-info')}}
+      </p>
+
+      <v-row dense align="center">
+        <v-col dense cols="12" sm="12" md="4">
+          <v-text-field v-model="backupTag" :label="$t('settings.backup-tag')"></v-text-field>
+        </v-col>
+        <v-col cols="12" sm="12" md="3">
+          <v-combobox
+            auto-select-first
+            :label="$t('settings.markdown-template')"
+            :items="availableTemplates"
+            v-model="selectedTemplate"
+          ></v-combobox>
+        </v-col>
+        <v-col dense cols="12" sm="12" md="2">
+          <v-btn block text color="accent" @click="createBackup" width="165">
+            {{$t('settings.backup-recipes')}}
+          </v-btn>
+        </v-col>
+      </v-row>
+      <BackupCard
+        @loading="backupLoading = true"
+        @finished="processFinished"
+        :backups="availableBackups"
+      />
+      <SuccessFailureAlert
+        success-header="Successfully Imported"
+        :success="successfulImports"
+        failed-header="Failed Imports"
+        :failed="failedImports"
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import api from "../../../api";
+import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import BackupCard from "./BackupCard";
+
+export default {
+  components: {
+    SuccessFailureAlert,
+    BackupCard,
+  },
+  data() {
+    return {
+      failedImports: [],
+      successfulImports: [],
+      backupLoading: false,
+      backupTag: null,
+      selectedBackup: null,
+      selectedTemplate: null,
+      availableBackups: [],
+      availableTemplates: [],
+    };
+  },
+  mounted() {
+    this.getAvailableBackups();
+  },
+  methods: {
+    async getAvailableBackups() {
+      let response = await api.backups.requestAvailable();
+      this.availableBackups = response.imports;
+      this.availableTemplates = response.templates;
+    },
+    deleteBackup() {
+      if (this.$refs.form.validate()) {
+        this.backupLoading = true;
+
+        api.backups.delete(this.selectedBackup);
+        this.getAvailableBackups();
+
+        this.selectedBackup = null;
+        this.backupLoading = false;
+      }
+    },
+    async createBackup() {
+      this.backupLoading = true;
+
+      let response = await api.backups.create(this.backupTag, this.templates);
+
+      if (response.status == 201) {
+        this.selectedBackup = null;
+        this.getAvailableBackups();
+        this.backupLoading = false;
+      }
+    },
+    processFinished(successful = null, failed = null) {
+      this.getAvailableBackups();
+      this.backupLoading = false;
+      this.successfulImports = successful;
+      this.failedImports = failed;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Migration/ChowdownCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-card-text>
+    <p>
+      {{$t('migration.currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration')}}
+    </p>
+    <v-form ref="form">
+      <v-row dense align="center">
+        <v-col cols="12" md="5" sm="5">
+          <v-text-field
+            v-model="repo"
+            :label="$t('migration.chowdown-repo-url')"
+            :rules="[rules.required]"
+          >
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" md="4" sm="5">
+          <v-btn text color="info" @click="importRepo"> {{$t('migration.migrate')}} </v-btn>
+        </v-col>
+      </v-row>
+    </v-form>
+    <v-alert v-if="failedRecipes[1]" outlined dense type="error">
+      <h4>{{$t('migration.failed-recipes')}}</h4>
+      <v-list dense>
+        <v-list-item v-for="fail in this.failedRecipes" :key="fail">
+          {{ fail }}
+        </v-list-item>
+      </v-list>
+    </v-alert>
+    <v-alert v-if="failedImages[1]" outlined dense type="error">
+      <h4>{{$t('migration.failed-images')}}</h4>
+      <v-list dense>
+        <v-list-item v-for="fail in this.failedImages" :key="fail">
+          {{ fail }}
+        </v-list-item>
+      </v-list>
+    </v-alert>
+  </v-card-text>
+</template>
+
+<script>
+import api from "../../../api";
+// import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+// import TimePicker from "./Webhooks/TimePicker";
+export default {
+  data() {
+    return {
+      processRan: false,
+      failedImages: [],
+      failedRecipes: [],
+      repo: "",
+      rules: {
+        required: (v) => !!v || "Selection Required",
+      },
+    };
+  },
+  methods: {
+    async importRepo() {
+      if (this.$refs.form.validate()) {
+        this.$emit("loading");
+        let response = await api.migrations.migrateChowdown(this.repo);
+        this.failedImages = response.failedImages;
+        this.failedRecipes = response.failedRecipes;
+        this.$emit("finished");
+        this.processRan = true;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Migration/NextcloudCard.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-card-text>
+    <p>
+      {{$t('migration.you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected')}}
+    </p>
+    <v-form ref="form">
+      <v-row align="center">
+        <v-col cols="12" md="5" sm="12">
+          <v-select
+            :items="availableImports"
+            v-model="selectedImport"
+            :label="$t('migration.nextcloud-data')"
+            :rules="[rules.required]"
+          ></v-select>
+        </v-col>
+        <v-col cols="12" md="2" sm="12">
+          <v-btn text color="info" @click="importRecipes"> {{$t('migration.migrate')}} </v-btn>
+        </v-col>
+        <v-col cols="12" md="1" sm="12">
+          <v-btn text color="error" @click="deleteImportValidation">
+            {{$t('general.delete')}}
+          </v-btn>
+          <Confirmation
+            :title="$t('general.delete-data')"
+            :message="$t('migration.delete-confirmation')"
+            color="error"
+            icon="mdi-alert-circle"
+            ref="deleteThemeConfirm"
+            v-on:confirm="deleteImport()"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" md="5" sm="12">
+          <UploadMigrationButton @uploaded="getAvaiableImports" />
+        </v-col>
+      </v-row>
+    </v-form>
+    <SuccessFailureAlert
+      :success-header="$t('migration.successfully-imported-from-nextcloud')"
+      :success="successfulImports"
+      failed-header="$t('migration.failed-imports')"
+      :failed="failedImports"
+    />
+  </v-card-text>
+</template>
+
+<script>
+import api from "../../../api";
+import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import UploadMigrationButton from "./UploadMigrationButton";
+import Confirmation from "../../UI/Confirmation";
+export default {
+  components: {
+    SuccessFailureAlert,
+    UploadMigrationButton,
+    Confirmation,
+  },
+  data() {
+    return {
+      successfulImports: [],
+      failedImports: [],
+      availableImports: [],
+      selectedImport: null,
+      rules: {
+        required: (v) => !!v || "Selection Required",
+      },
+    };
+  },
+  async mounted() {
+    this.getAvaiableImports();
+  },
+  methods: {
+    async getAvaiableImports() {
+      this.availableImports = await api.migrations.getNextcloudImports();
+    },
+    async importRecipes() {
+      if (this.$refs.form.validate()) {
+        this.$emit("loading");
+        let data = await api.migrations.importNextcloud(this.selectedImport);
+
+        this.successfulImports = data.successful;
+        this.failedImports = data.failed;
+        this.$emit("finished");
+      }
+    },
+    deleteImportValidation() {
+      if (this.$refs.form.validate()) {
+        this.$refs.deleteThemeConfirm.open();
+      }
+    },
+    async deleteImport() {
+      await api.migrations.delete(this.selectedImport);
+      this.getAvaiableImports();
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Migration/UploadMigrationButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-form ref="file">
+    <v-file-input
+      :loading="loading"
+      :label="$t('migration.upload-an-archive')"
+      v-model="file"
+      accept=".zip"
+      @change="upload"
+      :prepend-icon="icon"
+      class="file-icon"
+    >
+    </v-file-input>
+  </v-form>
+</template>
+
+<script>
+import api from "../../../api";
+export default {
+  data() {
+    return {
+      file: null,
+      loading: false,
+      icon: "mdi-paperclip",
+    };
+  },
+  methods: {
+    async upload() {
+      if (this.file != null) {
+        this.loading = true;
+        let formData = new FormData();
+        formData.append("archive", this.file);
+
+        await api.migrations.uploadFile(formData);
+
+        this.loading = false;
+        this.$emit("uploaded");
+        this.file = null;
+        this.icon = "mdi-check";
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.file-icon {
+  transition-duration: 5s;
+}
+</style>

frontend/src/components/Settings/Migration/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card :loading="loading">
+    <v-card-title class="headline"> {{$t('migration.recipe-migration')}} </v-card-title>
+    <v-divider></v-divider>
+
+    <v-tabs v-model="tab">
+      <v-tab>Chowdown</v-tab>
+      <v-tab>Nextcloud Recipes</v-tab>
+
+      <v-tab-item>
+        <ChowdownCard @loading="loading = true" @finished="finished" />
+      </v-tab-item>
+      <v-tab-item>
+        <NextcloudCard @loading="loading = true" @finished="finished" />
+      </v-tab-item>
+    </v-tabs>
+  </v-card>
+</template>
+
+
+<script>
+import ChowdownCard from "./ChowdownCard";
+import NextcloudCard from "./NextcloudCard";
+// import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+// import TimePicker from "./Webhooks/TimePicker";
+export default {
+  components: {
+    ChowdownCard,
+    NextcloudCard,
+  },
+  data() {
+    return {
+      tab: null,
+      loading: false,
+    };
+  },
+  methods: {
+    finished() {
+      this.loading = false;
+      this.$store.dispatch("requestRecentRecipes");
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Theme/ColorPickerDialog.vue

@@ -5,7 +5,7 @@
     </v-btn>
     <v-dialog v-model="dialog" width="400">
       <v-card>
-        <v-card-title> {{ buttonText }} Color </v-card-title>
+        <v-card-title> {{ buttonText }} {{$t('settings.color')}} </v-card-title>
         <v-card-text>
           <v-text-field v-model="color"> </v-text-field>
           <v-row>
@@ -26,8 +26,8 @@
           </v-row>
         </v-card-text>
         <v-card-actions>
-          <v-btn text @click="toggleSwatches"> Swatches </v-btn>
-          <v-btn text @click="dialog = false"> Select </v-btn>
+          <v-btn text @click="toggleSwatches"> {{$t('settings.swatches')}} </v-btn>
+          <v-btn text @click="dialog = false"> {{$t('general.select')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>

frontend/src/components/Settings/Theme/NewThemeDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <v-btn text color="info" @click="dialog = true"> {{$t('general.new')}} </v-btn>
+    <v-dialog v-model="dialog" width="400">
+      <v-card>
+        <v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
+        <v-card-text>
+          <v-text-field
+            label="Theme Name"
+            v-model="themeName"
+            :rules="[rules.required]"
+          ></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="grey" text @click="dialog = false"> {{$t('general.cancel')}} </v-btn>
+          <v-btn color="success" text @click="Select" :disabled="!themeName">
+            {{$t('general.create')}}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    buttonText: String,
+    value: String,
+  },
+  data() {
+    return {
+      dialog: false,
+      themeName: "",
+      rules: {
+        required: (val) => !!val || "Required.",
+      },
+    };
+  },
+
+  watch: {
+    color() {
+      this.updateColor();
+    },
+  },
+  methods: {
+    randomColor() {
+      return "#" + Math.floor(Math.random() * 16777215).toString(16);
+    },
+    Select() {
+      const newTheme = {
+        name: this.themeName,
+        colors: {
+          primary: "#E58325",
+          accent: "#00457A",
+          secondary: "#973542",
+          success: "#5AB1BB",
+          info: "#4990BA",
+          warning: "#FF4081",
+          error: "#EF5350",
+        },
+      };
+
+      this.$emit("new-theme", newTheme);
+      this.dialog = false;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Theme/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <v-card>
+    <v-card-title class="headline">
+      {{ $t("settings.theme.theme-settings") }}
+    </v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <h2 class="mt-4 mb-1">{{ $t("settings.theme.dark-mode") }}</h2>
+      <p>
+        {{
+          $t(
+            "settings.theme.choose-how-mealie-looks-to-you-set-your-theme-preference-to-follow-your-system-settings-or-choose-to-use-the-light-or-dark-theme"
+          )
+        }}
+      </p>
+      <v-row dense align="center">
+        <v-col cols="12">
+          <v-btn-toggle
+            v-model="selectedDarkMode"
+            color="primary "
+            mandatory
+            @change="setStoresDarkMode"
+          >
+            <v-btn value="system"> Default to system </v-btn>
+
+            <v-btn value="light"> {{ $t("settings.theme.light") }} </v-btn>
+
+            <v-btn value="dark"> {{ $t("settings.theme.dark") }} </v-btn>
+          </v-btn-toggle>
+        </v-col>
+      </v-row></v-card-text
+    >
+    <v-divider></v-divider>
+    <v-card-text>
+      <h2 class="mt-1 mb-1">{{ $t("settings.theme.theme") }}</h2>
+      <p>
+        {{
+          $t(
+            "settings.theme.select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference"
+          )
+        }}
+      </p>
+
+      <v-form ref="form" lazy-validation>
+        <v-row dense align="center">
+          <v-col cols="12" md="4" sm="3">
+            <v-select
+              :label="$t('settings.theme.saved-color-theme')"
+              :items="availableThemes"
+              item-text="name"
+              return-object
+              v-model="selectedTheme"
+              @change="themeSelected"
+              :rules="[(v) => !!v || $t('settings.theme.theme-is-required')]"
+              required
+            >
+            </v-select>
+          </v-col>
+          <v-col cols="12" sm="1">
+            <NewThemeDialog @new-theme="appendTheme" />
+          </v-col>
+          <v-col cols="12" sm="1">
+            <v-btn text color="error" @click="deleteSelectedThemeValidation">
+              Delete
+            </v-btn>
+            <Confirmation
+              :title="$t('settings.theme.delete-theme')"
+              :message="
+                $t('settings.theme.are-you-sure-you-want-to-delete-this-theme')
+              "
+              color="error"
+              icon="mdi-alert-circle"
+              ref="deleteThemeConfirm"
+              v-on:confirm="deleteSelectedTheme()"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+      <v-row dense align-content="center" v-if="selectedTheme.colors">
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.primary')"
+            v-model="selectedTheme.colors.primary"
+          />
+        </v-col>
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.secondary')"
+            v-model="selectedTheme.colors.secondary"
+          />
+        </v-col>
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.accent')"
+            v-model="selectedTheme.colors.accent"
+          />
+        </v-col>
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.success')"
+            v-model="selectedTheme.colors.success"
+          />
+        </v-col>
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.info')"
+            v-model="selectedTheme.colors.info"
+          />
+        </v-col>
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.warning')"
+            v-model="selectedTheme.colors.warning"
+          />
+        </v-col>
+        <v-col>
+          <ColorPickerDialog
+            :button-text="$t('settings.theme.error')"
+            v-model="selectedTheme.colors.error"
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+
+    <v-card-actions>
+      <v-row>
+        <v-col> </v-col>
+        <v-col></v-col>
+        <v-col align="end">
+          <v-btn text color="success" @click="saveThemes">
+            {{ $t("settings.theme.save-colors-and-apply-theme") }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import api from "../../../api";
+import ColorPickerDialog from "./ColorPickerDialog";
+import NewThemeDialog from "./NewThemeDialog";
+import Confirmation from "../../UI/Confirmation";
+
+export default {
+  components: {
+    ColorPickerDialog,
+    Confirmation,
+    NewThemeDialog,
+  },
+  data() {
+    return {
+      selectedTheme: {},
+      selectedDarkMode: "system",
+      availableThemes: [],
+    };
+  },
+  async mounted() {
+    this.availableThemes = await api.themes.requestAll();
+    this.selectedTheme = this.$store.getters.getActiveTheme;
+    this.selectedDarkMode = this.$store.getters.getDarkMode;
+  },
+
+  methods: {
+    /**
+     * Open the delete confirmation.
+     */
+    deleteSelectedThemeValidation() {
+      if (this.$refs.form.validate()) {
+        if (this.selectedTheme.name === "default") {
+          // Notify User Can't Delete Default
+        } else if (this.selectedTheme !== {}) {
+          this.$refs.deleteThemeConfirm.open();
+        }
+      }
+    },
+    /**
+     * Delete the selected Theme
+     */
+    async deleteSelectedTheme() {
+      //Delete Theme from DB
+      await api.themes.delete(this.selectedTheme.name);
+
+      //Get the new list of available from DB
+      this.availableThemes = await api.themes.requestAll();
+
+      //Change to default if deleting current theme.
+      if (
+        !this.availableThemes.some(
+          (theme) => theme.name === this.selectedTheme.name
+        )
+      ) {
+        await this.$store.dispatch("resetTheme");
+        this.selectedTheme = this.$store.getters.getActiveTheme;
+      }
+    },
+    /**
+     * Create the new Theme and select it.
+     */
+    async appendTheme(NewThemeDialog) {
+      await api.themes.create(NewThemeDialog);
+      this.availableThemes.push(NewThemeDialog);
+      this.selectedTheme = NewThemeDialog;
+    },
+
+    themeSelected() {
+      //TODO Revamp Theme selection.
+      //console.log("this.activeTheme", this.selectedTheme);
+    },
+
+    setStoresDarkMode() {
+      this.$store.commit("setDarkMode", this.selectedDarkMode);
+    },
+    /**
+     * This will save the current colors and make the selected theme live.
+     */
+    async saveThemes() {
+      if (this.$refs.form.validate()) {
+        this.$store.commit("setTheme", this.selectedTheme);
+        await api.themes.update(
+          this.selectedTheme.name,
+          this.selectedTheme.colors
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>
+

frontend/src/components/Settings/Webhook/TimePickerDialog.vue

@@ -9,7 +9,7 @@
     <template v-slot:activator="{ on, attrs }">
       <v-text-field
         v-model="time"
-        label="Set New Time"
+        :label="$t('settings.set-new-time')"
         prepend-icon="mdi-clock-time-four-outline"
         readonly
         v-bind="attrs"
@@ -18,8 +18,8 @@
     </template>
     <v-time-picker v-if="modal2" v-model="time" full-width>
       <v-spacer></v-spacer>
-      <v-btn text color="primary" @click="modal2 = false"> Cancel </v-btn>
-      <v-btn text color="primary" @click="saveTime"> OK </v-btn>
+      <v-btn text color="primary" @click="modal2 = false"> {{$t('general.cancel')}} </v-btn>
+      <v-btn text color="primary" @click="saveTime"> {{$t('general.ok')}} </v-btn>
     </v-time-picker>
   </v-dialog>
 </template>

frontend/src/components/Settings/Webhook/index.vue

@@ -1,29 +1,25 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text mt-1">
-      Meal Planner Webhooks
+    <v-card-title class="headline">
+      {{$t('settings.webhooks.meal-planner-webhooks')}}
     </v-card-title>
     <v-card-text>
-      <p>
-        The URLs listed below will recieve webhooks containing the recipe data
-        for the meal plan on it's scheduled day. Currently Webhooks will execute
-        at <strong>{{ time }}</strong>
-      </p>
+      <p v-html="$t('settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at', {time: time})"></p>
 
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
           <v-switch
             v-model="enabled"
             inset
-            label="Enabled"
+            :label="$t('general.enabled')"
             class="my-n3"
           ></v-switch>
         </v-col>
         <v-col cols="12" md="3" sm="5">
-          <TimePicker @save-time="saveTime" />
+          <TimePickerDialog @save-time="saveTime" />
         </v-col>
         <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="testWebhooks"> Test Webhooks </v-btn>
+          <v-btn text color="info" @click="testWebhooks"> {{$t('settings.webhooks.test-webhooks')}} </v-btn>
         </v-col>
       </v-row>
 
@@ -36,7 +32,7 @@
         <v-col>
           <v-text-field
             v-model="webhooks[index]"
-            label="Webhook URL"
+            :label="$t('settings.webhooks.webhook-url')"
           ></v-text-field>
         </v-col>
       </v-row>
@@ -51,7 +47,7 @@
         <v-col> </v-col>
         <v-col align="end">
           <v-btn text color="success" @click="saveWebhooks">
-            Save Webhooks
+            {{$t('settings.webhooks.save-webhooks')}}
           </v-btn>
         </v-col>
       </v-row>
@@ -60,11 +56,11 @@
 </template>
 
 <script>
-import api from "../../api";
-import TimePicker from "./Webhooks/TimePicker";
+import api from "../../../api";
+import TimePickerDialog from "./TimePickerDialog";
 export default {
   components: {
-    TimePicker,
+    TimePickerDialog,
   },
   data() {
     return {

frontend/src/components/UI/AddRecipeFab.vue

@@ -2,16 +2,20 @@
   <div class="text-center">
     <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
       <v-card :loading="processing">
-        <v-card-title class="headline"> From URL </v-card-title>
+        <v-card-title class="headline"
+          >{{ $t("new-recipe.from-url") }}
+        </v-card-title>
 
         <v-card-text>
           <v-form>
-            <v-text-field v-model="recipeURL" label="Recipe URL"></v-text-field>
+            <v-text-field
+              v-model="recipeURL"
+              :label="$t('new-recipe.recipe-url')"
+            ></v-text-field>
           </v-form>
 
           <v-alert v-if="error" color="red" outlined type="success">
-            Looks like there was an error parsing the URL. Check the log and
-            debug/last_recipe.json to see what went wrong.
+            {{ $t("new-recipe.error-message") }}
           </v-alert>
         </v-card-text>
 
@@ -19,25 +23,33 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" text @click="createRecipe"> Submit </v-btn>
+          <v-btn color="grey" text @click="reset">
+            {{ $t("general.close") }}
+          </v-btn>
+          <v-btn color="success" text @click="createRecipe">
+            {{ $t("general.submit") }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
     <v-speed-dial v-model="fab" fixed right bottom open-on-hover>
       <template v-slot:activator>
-        <v-btn v-model="fab" color="accent" dark fab @click="navCreate">
+        <v-btn v-model="fab" color="accent" dark fab>
           <v-icon> mdi-plus </v-icon>
         </v-btn>
       </template>
       <v-btn fab dark small color="primary" @click="addRecipe = true">
         <v-icon>mdi-link</v-icon>
       </v-btn>
+      <v-btn fab dark small color="accent" @click="navCreate">
+        <v-icon>mdi-square-edit-outline</v-icon>
+      </v-btn>
     </v-speed-dial>
   </div>
 </template>
 
 <script>
-import api from "../api";
+import api from "../../api";
 
 export default {
   data() {
@@ -62,6 +74,7 @@ export default {
 
       this.addRecipe = false;
       this.processing = false;
+      this.recipeURL = "";
       this.$router.push(`/recipe/${response.data}`);
     },
 
@@ -70,10 +83,11 @@ export default {
     },
 
     reset() {
-      (this.fab = false),
-        (this.addRecipe = false),
-        (this.recipeURL = ""),
-        (this.processing = false);
+      this.fab = false;
+      this.error = false;
+      this.addRecipe = false;
+      this.recipeURL = "";
+      this.processing = false;
     },
   },
 };

frontend/src/components/UI/ButtonRow.vue

@@ -3,9 +3,25 @@
     <template v-slot:extension>
       <v-col></v-col>
       <div v-if="open">
-        <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipe">
+        <v-btn
+          class="mr-2"
+          fab
+          dark
+          small
+          color="error"
+          @click="deleteRecipeConfrim"
+        >
           <v-icon>mdi-delete</v-icon>
         </v-btn>
+        <Confirmation
+          title="Delete Recpie"
+          message="Are you sure you want to delete this recipie?"
+          color="error"
+          icon="mdi-alert-circle"
+          ref="deleteRecipieConfirm"
+          v-on:confirm="deleteRecipe()"
+        />
+
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
         </v-btn>
@@ -21,12 +37,20 @@
 </template>
 
 <script>
+import Confirmation from "./Confirmation";
+
 export default {
   props: {
     open: {
-      default: true,
-    },
+      type: Boolean,
+      default: true
+    }
   },
+
+  components: {
+    Confirmation
+  },
+
   methods: {
     editor() {
       this.$emit("editor");
@@ -34,13 +58,16 @@ export default {
     save() {
       this.$emit("save");
     },
+    deleteRecipeConfrim() {
+      this.$refs.deleteRecipieConfirm.open();
+    },
     deleteRecipe() {
       this.$emit("delete");
     },
     json() {
       this.$emit("json");
-    },
-  },
+    }
+  }
 };
 </script>
 

frontend/src/components/UI/Confirmation.vue

@@ -0,0 +1,129 @@
+
+<template>
+  <v-dialog
+    v-model="dialog"
+    :max-width="width"
+    :style="{ zIndex: zIndex }"
+    @click:outside="cancel"
+    @keydown.esc="cancel"
+  >
+    <v-card>
+      <v-toolbar v-if="Boolean(title)" :color="color" dense flat dark>
+        <v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
+        <v-toolbar-title v-text="title" />
+      </v-toolbar>
+
+      <v-card-text
+        v-show="!!message"
+        class="pa-4 text--primary"
+        v-html="message"
+      />
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="grey" text @click="cancel"> Cancel </v-btn>
+        <v-btn :color="color" text @click="confirm"> Confirm </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+/**
+ * Confirmation Component used to add a second validaion step to an action.
+ * @version 1.0.1
+ * @author [zackbcom](https://github.com/zackbcom)
+ * @since Version 1.0.0
+ */
+export default {
+  name: "Confirmation",
+  props: {
+    /**
+     * Message to be in body.
+     */
+    message: String,
+    /**
+     * Optional Title message to be used in title.
+     */
+    title: String,
+    /**
+     * Optional Icon to be used in title.
+     */
+    icon: {
+      type: String,
+      default: "mid-alert-circle"
+    },
+    /**
+     * Color theme of the component. Chose one of the defined theme colors.
+     * @values primary, secondary, accent, success, info, warning, error
+     */
+    color: {
+      type: String,
+      default: "error"
+    },
+    /**
+     * Define the max width of the component.
+     */
+    width: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * zIndex of the component.
+     */
+    zIndex: {
+      type: Number,
+      default: 200
+    }
+  },
+  data: () => ({
+    /**
+     * Keep state of open or closed
+     */
+    dialog: false
+  }),
+  methods: {
+    /**
+     * Sets the modal to be visiable.
+     */
+    open() {
+      this.dialog = true;
+    },
+
+    /**
+     * Cancel button handler.
+     */
+    cancel() {
+      /**
+       * Cancel event.
+       *
+       * @event Cancel
+       * @property {string} content content of the first prop passed to the event
+       */
+      this.$emit("cancel");
+
+      //Hide Modal
+      this.dialog = false;
+    },
+
+    /**
+     * confirm button handler.
+     */
+    confirm() {
+      /**
+       * confirm event.
+       *
+       * @event confirm
+       * @property {string} content content of the first prop passed to the event
+       */
+      this.$emit("confirm");
+
+      //Hide Modal
+      this.dialog = false;
+    }
+  }
+};
+</script>
+
+<style>
+</style>

frontend/src/components/UI/Login.vue

@@ -13,20 +13,20 @@
                 v-model="user.name"
                 light="light"
                 prepend-icon="person"
-                label="Name"
+                :label="$t('general.name')"
               ></v-text-field>
               <v-text-field
                 v-model="user.email"
                 light="light"
                 prepend-icon="mdi-email"
-                label="Email"
+                :label="$t('login.email')"
                 type="email"
               ></v-text-field>
               <v-text-field
                 v-model="user.password"
                 light="light"
                 prepend-icon="mdi-lock"
-                label="Password"
+                :label="$t('login.password')"
                 type="password"
               ></v-text-field>
               <v-checkbox
@@ -34,7 +34,7 @@
                 v-if="options.isLoggingIn"
                 v-model="options.shouldStayLoggedIn"
                 light="light"
-                label="Stay logged in?"
+                :label="$t('login.stay-logged-in')"
                 hide-details="hide-details"
               ></v-checkbox>
               <v-btn
@@ -44,14 +44,14 @@
                 color="primary"
                 block="block"
                 type="submit"
-                >Sign in</v-btn
+                >{{$t('login.sign-in')}}</v-btn
               >
               <v-btn
                 v-else
                 block="block"
                 type="submit"
                 @click.prevent="options.isLoggingIn = true"
-                >Sign up</v-btn
+                >{{$t('login.sign-up')}}</v-btn
               >
             </v-form>
           </v-card-text>

frontend/src/components/UI/Menu.vue

@@ -32,26 +32,32 @@
 
 <script>
 export default {
-  data: () => ({
-    items: [
-      {
-        icon: "mdi-calendar-week",
-        title: "Dinner This Week",
-        nav: "/meal-plan/this-week",
-      },
-      {
-        icon: "mdi-calendar-today",
-        title: "Dinner Today",
-        nav: "/meal-plan/today",
-      },
-      {
-        icon: "mdi-calendar-multiselect",
-        title: "Planner",
-        nav: "/meal-plan/planner",
-      },
-      { icon: "mdi-cog", title: "Settings", nav: "/settings/site" },
-    ],
-  }),
+  data: function () {
+    return {
+      items: [
+        {
+          icon: "mdi-calendar-week",
+          title: this.$i18n.t("meal-plan.dinner-this-week"),
+          nav: "/meal-plan/this-week",
+        },
+        {
+          icon: "mdi-calendar-today",
+          title: this.$i18n.t("meal-plan.dinner-today"),
+          nav: "/meal-plan/today",
+        },
+        {
+          icon: "mdi-calendar-multiselect",
+          title: this.$i18n.t("meal-plan.planner"),
+          nav: "/meal-plan/planner",
+        },
+        {
+          icon: "mdi-cog",
+          title: this.$i18n.t("general.settings"),
+          nav: "/settings/site",
+        },
+      ],
+    };
+  },
   methods: {
     navRouter(route) {
       this.$router.push(route);

frontend/src/components/UI/RecentRecipes.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import RecipeCard from "./UI/RecipeCard";
+import RecipeCard from "./RecipeCard";
 
 export default {
   components: {

frontend/src/components/UI/RecipeCard.vue

@@ -26,7 +26,7 @@
             <v-tooltip top color="secondary" max-width="400" open-delay="50">
               <template v-slot:activator="{ on, attrs }">
                 <v-btn color="secondary" v-on="on" v-bind="attrs" text
-                  >Description</v-btn
+                  >{{$t('recipe.description')}}</v-btn
                 >
               </template>
               <span>{{ description }}</span>

frontend/src/components/UI/Search.vue

@@ -9,15 +9,13 @@
     hide-details
     hide-selected
     item-text="slug"
-    label="Search for a Recipe"
+    :label="$t('search.search-for-a-recipe')"
     single-line
     @keyup.enter.native="moreInfo(selected)"
   >
     <template v-slot:no-data>
       <v-list-item>
-        <v-list-item-title>
-          Search for your Favorite
-          <strong>Recipe</strong>
+        <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
         </v-list-item-title>
       </v-list-item>
     </template>

frontend/src/components/UI/SearchBar.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <v-autocomplete
+      :items="autoResults"
+      item-value="item.slug"
+      item-text="item.name"
+      dense
+      light
+      label="Search Mealie"
+      :search-input.sync="search"
+      hide-no-data
+      cache-items
+      solo
+    >
+      <template
+        v-if="showResults"
+        v-slot:item="{ item }"
+        style="max-width: 750px"
+      >
+        <v-list-item-avatar>
+          <v-img :src="getImage(item.item.image)"></v-img>
+        </v-list-item-avatar>
+        <v-list-item-content @click="selected(item.item.slug)">
+          <v-list-item-title>
+            {{ item.item.name }}
+            <v-rating
+              dense
+              v-if="item.item.rating"
+              :value="item.item.rating"
+              size="12"
+            >
+            </v-rating>
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ item.item.description }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </template>
+    </v-autocomplete>
+  </div>
+</template>
+
+<script>
+import Fuse from "fuse.js";
+import utils from "../../utils";
+
+export default {
+  props: {
+    showResults: {
+      default: false,
+    },
+  },
+  data() {
+    return {
+      search: "",
+      result: [],
+      autoResults: [],
+      isDark: false,
+      options: {
+        shouldSort: true,
+        threshold: 0.6,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: ["name", "slug"],
+      },
+    };
+  },
+  mounted() {
+    this.isDark = this.$store.getters.getIsDark;
+  },
+  computed: {
+    data() {
+      return this.$store.getters.getRecentRecipes;
+    },
+    fuse() {
+      return new Fuse(this.data, this.options);
+    },
+  },
+  watch: {
+    search() {
+      if (this.search.trim() === "") this.result = this.list;
+      else this.result = this.fuse.search(this.search.trim());
+      console.log("test");
+
+      this.$emit("results", this.result);
+      if (this.showResults === true) {
+        this.autoResults = this.result;
+      }
+    },
+  },
+  methods: {
+    getImage(image) {
+      return utils.getImageURL(image);
+    },
+    selected(slug) {
+      this.$emit("selected", slug);
+    },
+  },
+};
+</script>
+
+<style>
+.color-transition {
+  transition: background-color 0.3s ease;
+}
+</style>

frontend/src/components/UI/SnackBar.vue

@@ -5,7 +5,7 @@
 
       <template v-slot:action="{ attrs }">
         <v-btn color="white" text v-bind="attrs" @click="close(false)">
-          Close
+          {{$t('general.close')}}
         </v-btn>
       </template>
     </v-snackbar>

frontend/src/components/UI/SuccessFailureAlert.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <v-alert v-if="success[0]" outlined dense type="success">
+      <h4>{{ successHeader }}</h4>
+      <v-list dense>
+        <v-list-item v-for="success in this.success" :key="success">
+          {{ success }}
+        </v-list-item>
+      </v-list>
+    </v-alert>
+    <v-alert v-if="failed[0]" outlined dense type="error">
+      <h4>{{ failedHeader }}</h4>
+      <v-list dense>
+        <v-list-item v-for="fail in this.failed" :key="fail">
+          {{ fail }}
+        </v-list-item>
+      </v-list>
+    </v-alert>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    successHeader: String,
+    success: Array,
+    failedHeader: String,
+    failed: Array,
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/i18n.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages()
+})

frontend/src/locales/da.json

@@ -0,0 +1,134 @@
+{
+  "404": {
+    "page-not-found": "404 side blev ikke fundet",
+    "take-me-home": "Tag mig hjem"
+  },
+  "new-recipe": {
+    "from-url": "Fra URL",
+    "recipe-url": "URL på opskrift",
+    "error-message": "Der opstod en fejl under indlæsning af opskriften. Tjek loggen og debug/last_recipe.json for at fejlsøge problemet.",
+    "bulk-add": "Bulk Tilføj",
+    "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Indsæt dine opskriftsdata. \nHver linje behandles som et element på en liste"
+  },
+  "general": {
+    "submit": "Indsend",
+    "name": "Navn",
+    "settings": "Indstillinger",
+    "cancel": "Annuller",
+    "close": "Luk",
+    "create": "Opret",
+    "delete": "Slet",
+    "edit": "Rediger",
+    "enabled": "Aktiveret",
+    "image-file": "Billedfil",
+    "new": "Ny",
+    "ok": "Ok",
+    "random": "Tilfældig",
+    "save": "Gem",
+    "select": "Vælg",
+    "update": "Opdater",
+    "delete-data": "Slet data",
+    "download": "Hent",
+    "import": "Importere"
+  },
+  "login": {
+    "email": "E-mail",
+    "password": "Adgangskode",
+    "sign-in": "Log ind",
+    "sign-up": "Opret bruger",
+    "stay-logged-in": "Forbliv logget ind"
+  },
+  "meal-plan": {
+    "dinner-this-week": "Madplan denne uge",
+    "dinner-today": "Madplan i dag",
+    "planner": "Planlægger",
+    "choose-a-recipe": "Vælg en opskrift",
+    "create-a-new-meal-plan": "Opret en ny måltidsplan",
+    "edit-meal-plan": "Rediger måltidsplan",
+    "end-date": "Slutdato",
+    "meal-plans": "Måltidsplaner",
+    "start-date": "Start dato"
+  },
+  "recipe": {
+    "description": "Beskrivelse",
+    "categories": "Kategorier",
+    "ingredient": "Ingrediens",
+    "ingredients": "Ingredienser",
+    "instructions": "Instruktioner",
+    "note": "Bemærk",
+    "notes": "Bemærkninger",
+    "original-recipe": "Oprindelig opskrift",
+    "recipe-name": "Opskriftens navn",
+    "servings": "Portioner",
+    "step-index": "Trin: {step}",
+    "tags": "Mærker",
+    "view-recipe": "Se opskrift"
+  },
+  "search": {
+    "search-for-a-recipe": "Søg efter en opskrift",
+    "search-for-your-favorite-recipe": "Søg efter din foretrukne <strong>opskrift</strong>"
+  },
+  "migration": {
+    "chowdown-repo-url": "Chowdown Repo URL",
+    "currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration": "I øjeblikket er Chowdown via offentlig Repo URL den eneste understøttede migreringstype",
+    "failed-images": "Mislykkede billeder",
+    "failed-recipes": "Mislykkede opskrifter",
+    "migrate": "Migrere",
+    "recipe-migration": "Migrering af opskrifter",
+    "delete-confirmation": "Er du sikker på, at du vil slette disse migrationsdata?",
+    "failed-imports": "Mislykket import",
+    "nextcloud-data": "Nextcloud data",
+    "successfully-imported-from-nextcloud": "Importeret fra Nextcloud",
+    "upload-an-archive": "Upload et arkiv",
+    "you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected": "Du kan importere opskrifter fra enten en zip-fil eller et bibliotek i /app/data/migraiton/ folderen. \nGennemse dokumentationen for at sikre, at din bibliotekstruktur svarer til det, der forventes"
+  },
+  "settings": {
+    "add-a-new-theme": "Tilføj et nyt tema",
+    "backup-and-exports": "Backup og eksport",
+    "backup-info": "Sikkerhedskopier eksporteres i standard JSON-format sammen med alle de billeder, der er gemt på filsystemet. \nI din sikkerhedskopimappe finder du en .zip-fil, der indeholder alle opskrifterne JSON og billeder fra databasen. \nDerudover, hvis du valgte en markdown-fil, gemmes disse også i .zip-filen. \nFor at importere en sikkerhedskopi skal den være placeret i din sikkerhedskopimappe. \nAutomatiske sikkerhedskopier udføres hver dag kl. 3:00.",
+    "backup-recipes": "Sikkerhedskopier opksrifter",
+    "backup-tag": "Sikkerhedskopier tags",
+    "color": "Farve",
+    "contribute": "Bidrag",
+    "explore-the-docs": "Udforsk dokumentation",
+    "markdown-template": "Markdown skabelon",
+    "new-version-available": "En ny version af Mealie er tilgængelig. <a {aContents}> Besøg repoen </a>",
+    "set-new-time": "Indstil ny tid",
+    "swatches": "Prøver",
+    "current": "Version:",
+    "latest": "Seneste:",
+    "theme": {
+      "accent": "Accent",
+      "dark-mode": "Mørk tilstand",
+      "error": "Fejl",
+      "info": "Info",
+      "primary": "Primær",
+      "secondary": "Sekundær",
+      "select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference": "Vælg et tema i rullemenuen, eller opret et nyt tema. \nBemærk, at standardtemaet serveres til alle brugere, der ikke har angivet en temapræference.",
+      "success": "Succes",
+      "theme-is-required": "Tema er påkrævet",
+      "theme-settings": "Temaindstillinger",
+      "warning": "Advarsel",
+      "are-you-sure-you-want-to-delete-this-theme": "Er du sikker på, at du vil slette dette tema?",
+      "choose-how-mealie-looks-to-you-set-your-theme-preference-to-follow-your-system-settings-or-choose-to-use-the-light-or-dark-theme": "Vælg, hvordan Mealie ser ud for dig. \nIndstil dit tema til at følge dine systemindstillinger, eller vælg at bruge det lyse eller mørke tema.",
+      "dark": "Mørkt",
+      "delete-theme": "Slet tema",
+      "light": "Lyst",
+      "save-colors-and-apply-theme": "Gem farver og anvend tema",
+      "saved-color-theme": "Gemt farvetema",
+      "theme": "Tema"
+    },
+    "webhooks": {
+      "meal-planner-webhooks": "Måltidsplanlægning Webhooks",
+      "save-webhooks": "Gem Webhooks",
+      "test-webhooks": "Test Webhooks",
+      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "Webadresserne, der er anført nedenfor, modtager webhooks, der indeholder opskriftsdataene for måltidsplanen på den planlagte dag. \nWebhooks udføres i øjeblikket på <strong> {time} </strong>",
+      "webhook-url": "Webhook adresse"
+    },
+    "backup": {
+      "import-recipes": "Importer opskrifter",
+      "import-settings": "Importindstillinger",
+      "import-themes": "Importer temaer"
+    }
+  }
+}

frontend/src/locales/en.json

@@ -0,0 +1,134 @@
+{
+  "404": {
+    "page-not-found": "404 Page Not Found",
+    "take-me-home": "Take me Home"
+  },
+  "new-recipe": {
+    "from-url": "From URL",
+    "recipe-url": "Recipe URL",
+    "error-message": "Looks like there was an error parsing the URL. Check the log and debug/last_recipe.json to see what went wrong.",
+    "bulk-add": "Bulk Add",
+    "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Paste in your recipe data. Each line will be treated as an item in a list"
+  },
+  "general": {
+    "submit": "Submit",
+    "name": "Name",
+    "settings": "Settings",
+    "close": "Close",
+    "save": "Save",
+    "image-file": "Image File",
+    "update": "Update",
+    "edit": "Edit",
+    "delete": "Delete",
+    "select": "Select",
+    "random": "Random",
+    "new": "New",
+    "create": "Create",
+    "cancel": "Cancel",
+    "ok": "OK",
+    "enabled": "Enabled",
+    "download": "Download",
+    "import": "Import",
+    "delete-data": "Delete Data"
+  },
+  "login": {
+    "stay-logged-in": "Stay logged in?",
+    "email": "Email",
+    "password": "Password",
+    "sign-in": "Sign in",
+    "sign-up": "Sign up"
+  },
+  "meal-plan": {
+    "dinner-this-week": "Dinner This Week",
+    "dinner-today": "Dinner Today",
+    "planner": "Planner",
+    "edit-meal-plan": "Edit Meal Plan",
+    "meal-plans": "Meal Plans",
+    "choose-a-recipe": "Choose a Recipe",
+    "create-a-new-meal-plan": "Create a New Meal Plan",
+    "start-date": "Start Date",
+    "end-date": "End Date"
+  },
+  "recipe": {
+    "description": "Description",
+    "ingredients": "Ingredients",
+    "categories": "Categories",
+    "tags": "Tags",
+    "instructions": "Instructions",
+    "step-index": "Step: {step}",
+    "recipe-name": "Recipe Name",
+    "servings": "Servings",
+    "ingredient": "Ingredient",
+    "notes": "Notes",
+    "note": "Note",
+    "original-recipe": "Original Recipe",
+    "view-recipe": "View Recipe"
+  },
+  "search": {
+    "search-for-a-recipe": "Search for a Recipe",
+    "search-for-your-favorite-recipe": "Search for your Favorite <strong>Recipe</strong>"
+  },
+  "settings": {
+    "color": "Color",
+    "swatches": "Swatches",
+    "add-a-new-theme": "Add a New Theme",
+    "set-new-time": "Set New Time",
+    "current": "Version:",
+    "latest": "Latest",
+    "explore-the-docs": "Explore the Docs",
+    "contribute": "Contribute",
+    "backup-and-exports": "Backup and Exports",
+    "backup-info": "Backups are exported in standard JSON format along with all the images stored on the file system. In your backup folder you'll find a .zip file that contains all of the recipe JSON and images from the database. Additionally, if you selected a markdown file, those will also be stored in the .zip file. To import a backup, it must be located in your backups folder. Automated backups are done each day at 3:00 AM.",
+    "backup-tag": "Backup Tag",
+    "markdown-template": "Markdown Template",
+    "backup-recipes": "Backup Recipes",
+    "theme": {
+      "theme-settings": "Theme Settings",
+      "select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference": "Select a theme from the dropdown or create a new theme. Note that the default theme will be served to all users who have not set a theme preference.",
+      "dark-mode": "Dark Mode",
+      "theme-is-required": "Theme is required",
+      "primary": "Primary",
+      "secondary": "Secondary",
+      "accent": "Accent",
+      "success": "Success",
+      "info": "Info",
+      "warning": "Warning",
+      "error": "Error",
+      "light": "Light",
+      "dark": "Dark",
+      "theme": "Theme",
+      "saved-color-theme": "Saved Color Theme",
+      "delete-theme": "Delete Theme",
+      "are-you-sure-you-want-to-delete-this-theme": "Are you sure you want to delete this theme?",
+      "save-colors-and-apply-theme": "Save Colors and Apply Theme",
+      "choose-how-mealie-looks-to-you-set-your-theme-preference-to-follow-your-system-settings-or-choose-to-use-the-light-or-dark-theme": "Choose how Mealie looks to you. Set your theme preference to follow your system settings, or choose to use the light or dark theme."
+    },
+    "webhooks": {
+      "meal-planner-webhooks": "Meal Planner Webhooks",
+      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "The URLs listed below will recieve webhooks containing the recipe data for the meal plan on it's scheduled day. Currently Webhooks will execute at <strong>{ time }</strong>",
+      "test-webhooks": "Test Webhooks",
+      "webhook-url": "Webhook URL",
+      "save-webhooks": "Save Webhooks"
+    },
+    "new-version-available": "A New Version of Mealie is Avaiable, <a {aContents}> Visit the Repo </a>",
+    "backup": {
+      "import-recipes": "Import Recipes",
+      "import-themes": "Import Themes",
+      "import-settings": "Import Settings"
+    }
+  },
+  "migration": {
+    "recipe-migration": "Recipe Migration",
+    "currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration": "Currently Chowdown via public Repo URL is the only supported type of migration",
+    "chowdown-repo-url": "Chowdown Repo URL",
+    "migrate": "Migrate",
+    "failed-recipes": "Failed Recipes",
+    "failed-images": "Failed Images",
+    "you-can-import-recipes-from-either-a-zip-file-or-a-directory-located-in-the-app-data-migraiton-folder-please-review-the-documentation-to-ensure-your-directory-structure-matches-what-is-expected": "You can import recipes from either a zip file or a directory located in the /app/data/migraiton/ folder. Please review the documentation to ensure your directory structure matches what is expected",
+    "nextcloud-data": "Nextcloud Data",
+    "delete-confirmation": "Are you sure you want to delete this migration data?",
+    "successfully-imported-from-nextcloud": "Successfully Imported from Nextcloud",
+    "failed-imports": "Failed Imports",
+    "upload-an-archive": "Upload an Archive"
+  }
+}

frontend/src/main.js

@@ -4,11 +4,10 @@ import vuetify from "./plugins/vuetify";
 import store from "./store/store";
 import VueRouter from "vue-router";
 import { routes } from "./routes";
-import VueCookies from "vue-cookies";
+import i18n from './i18n'
 
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
-Vue.use(VueCookies);
 
 const router = new VueRouter({
   routes,
@@ -19,7 +18,8 @@ new Vue({
   vuetify,
   store,
   router,
-  render: (h) => h(App),
+  i18n,
+  render: (h) => h(App)
 }).$mount("#app");
 
 // Truncate
@@ -34,5 +34,3 @@ let filter = function(text, length, clamp) {
 Vue.filter("truncate", filter);
 
 export { router };
-
-

frontend/src/pages/404Page.vue

@@ -5,9 +5,9 @@
       <v-col>
         <v-card height="">
           <v-card-text>
-            <h1>404 No Page Found</h1>
+            <h1>{{$t('404.page-not-found')}}</h1>
           </v-card-text>
-          <v-btn text block @click="$router.push('/')"> Take me Home </v-btn>
+          <v-btn text block @click="$router.push('/')"> {{$t('404.take-me-home')}} </v-btn>
         </v-card>
       </v-col>
       <v-col cols="2"></v-col>

frontend/src/pages/HomePage.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import RecentRecipes from "./RecentRecipes";
+import RecentRecipes from "../components/UI/RecentRecipes";
 
 export default {
   components: {

frontend/src/pages/MealPlanPage.vue

@@ -8,7 +8,8 @@
     <NewMeal v-else @created="requestMeals" />
 
     <v-card class="my-1">
-      <v-card-title class="secondary white--text"> Meal Plans </v-card-title>
+      <v-card-title class="headline"> {{$t('meal-plan.meal-plans')}} </v-card-title>
+      <v-divider></v-divider>
 
       <v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
         <v-timeline-item
@@ -33,7 +34,7 @@
                   :key="generateKey(meal.slug, index)"
                 >
                   <v-img
-                    class="rounded-lg"
+                    class="rounded-lg info"
                     :src="getImage(meal.image)"
                     height="80"
                     width="80"
@@ -49,7 +50,7 @@
                   text
                   @click="editPlan(mealplan.uid)"
                 >
-                  Edit
+                  {{$t('general.edit')}}
                 </v-btn>
                 <v-btn
                   color="error lighten-2"
@@ -57,7 +58,7 @@
                   text
                   @click="deletePlan(mealplan.uid)"
                 >
-                  Delete
+                  {{$t('general.delete')}}
                 </v-btn>
               </v-row>
             </v-card-text>
@@ -69,10 +70,10 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
-import NewMeal from "./NewMeal";
-import EditPlan from "./EditPlan";
+import api from "../api";
+import utils from "../utils";
+import NewMeal from "../components/MealPlan/MealPlanNew";
+import EditPlan from "../components/MealPlan/MealPlanEditor";
 
 export default {
   components: {
@@ -105,7 +106,6 @@ export default {
     editPlan(id) {
       this.plannedMeals.forEach((element) => {
         if (element.uid === id) {
-          console.log(element);
           this.editMealPlan = element;
         }
       });

frontend/src/pages/MealPlanThisWeekPage.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container fill-height>
-    <v-row justify="center" align="center">
+    <v-row>
       <v-col sm="12">
         <v-card
           v-for="(meal, index) in mealPlan.meals"
@@ -9,19 +9,27 @@
         >
           <v-row dense no-gutters align="center" justify="center">
             <v-col order="1" md="6" sm="12">
-              <v-card flat>
-                <v-card-title> {{ meal.name }} </v-card-title>
+              <v-card
+                flat
+                class="align-center justify-center"
+                align="center"
+                justify="center"
+              >
+                <v-card-title class="justify-center">
+                  {{ meal.name }}
+                </v-card-title>
                 <v-card-subtitle> {{ meal.dateText }}</v-card-subtitle>
 
                 <v-card-text> {{ meal.description }} </v-card-text>
 
                 <v-card-actions>
                   <v-btn
+                    align="center"
                     color="secondary"
                     text
                     @click="$router.push(`/recipe/${meal.slug}`)"
                   >
-                    View Recipe
+                    {{$t('recipe.view-recipe')}}
                   </v-btn>
                 </v-card-actions>
               </v-card>
@@ -39,8 +47,8 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
+import api from "../api";
+import utils from "../utils";
 export default {
   data() {
     return {
@@ -49,7 +57,6 @@ export default {
   },
   async mounted() {
     this.mealPlan = await api.mealPlans.thisWeek();
-    console.log(this.mealPlan);
   },
   methods: {
     getOrder(index) {

frontend/src/pages/RecipeNewPage.vue

@@ -29,20 +29,20 @@
       />
     </div>
 
-    <EditRecipe v-else v-model="recipeDetails" @upload="getImage" />
+    <RecipeEditor v-else v-model="recipeDetails" @upload="getImage" />
   </v-card>
 </template>
 
 <script>
 import api from "../api";
 
-import EditRecipe from "./RecipeEditor/EditRecipe";
+import RecipeEditor from "../components/Recipe/RecipeEditor";
 import VJsoneditor from "v-jsoneditor";
-import ButtonRow from "./UI/ButtonRow";
+import ButtonRow from "../components/UI/ButtonRow";
 export default {
   components: {
     VJsoneditor,
-    EditRecipe,
+    RecipeEditor,
     ButtonRow,
   },
   data() {
@@ -83,12 +83,19 @@ export default {
     onFileChange() {
       this.image = URL.createObjectURL(this.fileObject);
     },
+
     async createRecipe() {
       this.isLoading = true;
-      this.recipeDetails.image = this.fileObject.name;
+
+      if (this.fileObject) {
+        this.recipeDetails.image = this.fileObject.name;
+      }
       let slug = await api.recipes.create(this.recipeDetails);
 
-      await api.recipes.updateImage(slug, this.fileObject);
+      if (this.fileObject) {
+        await api.recipes.updateImage(slug, this.fileObject);
+      }
+
       this.isLoading = false;
 
       this.$router.push(`/recipe/${slug}`);