v0.4.1 - Frontend/UI Improvements (#267)

* fix links

* actually fix #238

* Feature/mkdocs version bump (#240)

* fix links (#239)

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

* fix #238

* bump mkdocs version

* light/dark toggle

* light/dark mode css

* API_DOCS defaults to True

* disable build on push for master

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

* Feature/recipe viewer (#244)

* fix dialog placement

* markdown support in ingredients

* fix line render issue

* fix tag rendering bug

* change ingredients to text area

* no slug error

* add tag pages

* remove console.logs

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

* changelog v0.4.1

* bug/backup-download (#245)

* fix blocked download

* + download blocked

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

* Feature/meal planner (#246)

* fixes duplicate recipes in meal-plan #221

* add quick week option

* scope css

* add mealplanner info

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

* Nextcloud Import Bugs - #248 (#250)

* parses datetime properly + clean category - #248

* add default credentials to docs

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

* Add bulk import examples to docs. (#252)

* Add bulk import examples to docs.

* Update api-usage.md

* Add Python example for bulk import.

* Change IP address in API example.

* Refactor/app settings (#251)

* fix env setup bugs

* remove unused import

* fix layout issues

* changelog

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

* env setup fixes

* Feature/about api (#253)

* fix settings

* app info cleanup

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

* Feature/image minify (#256)

* fix settings

* app info cleanup

* bottom-bar experiment

* remove dup key

* type hints

* add dependency

* updated image with query parameters

* read image options

* add image minification

* add image minification step

* alt image routes

* add image minification

* set mobile bar to top

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

* Feature/additional endpoints (#257)

* new recipe summary route

* add categories to cards

* add pillow

* show tags instead of categories

* additional debug info

* add todays meal image url

* about page

* fix reactive tag

* changelog + docs

* bump version

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

* add pillow dependencies (#258)

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

* Feature/search page (#259)

* add pillow dependencies

* advanced search page

* advanced search apge

* remove extra dependencies

* add pre-run script

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

* no image assignment

* advanced search

* fix docker dev build

* Do not force theme settings on login form (#260)

* Fix docker dev db persistence (#264)

* Fix docker dev db persistence

* Make run.sh the only startup script for prod + dev

Credits to @hay-kot for run.sh script logic

* Restore dev backend initialization in non-docker setup

* Make run.sh POSIX-friendly

* Allow dev backend to auto-reload in Docker

* Frontend Refactor + Bug Fixes

* merge category and tag selector

* unifiy category selector

* add hint

* spacing

* fix nextcloud migration

* simplify email validator #261

* formatting

* cleanup

* auto-gen

* format

* update run script

* unified category/tag selector

* rename component

* Add advanced search link

* remove old code

* convert keywords to tags

* add proper behavior on rename

* proper image name association on rename

* fix test cleanup

* changelog

* set docker comppand

* minify on migration

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

* bug-fixes/category-tag-creator (#266)

* fix category labels

* set loader for migration

* v0.4.1

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

Co-authored-by: hay-kot <hay-kot@pm.me>
Co-authored-by: Nat <nathanynath@yahoo.fr>
Co-authored-by: sephrat <34862846+sephrat@users.noreply.github.com>

.dockerignore

@@ -1,3 +1,5 @@
 */node_modules
 */dist
-*/data/db
+*/data/db
+*/mealie/test 
+*/mealie/.temp

.flake8

@@ -0,0 +1,6 @@
+[flake8]
+ignore = [
+    E501 # Line Length - See Black Config in pyproject.toml
+    E722 # Bare Exception | Temporary
+]
+exclude = _all_models.py

.github/workflows/dockerbuild.prod.yml

@@ -1,9 +1,8 @@
 name: Docker Build Production
 
 on:
-  push:
-    branches:
-      - master
+  release:
+    types: [published]
 
 jobs:
   build:

.github/workflows/dockerbuild.release.yml

@@ -0,0 +1,56 @@
+name: Docker Build Production
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      #
+      # Get Release Version
+      #
+      - uses: oprypin/find-latest-tag@v1
+        with:
+          repository: hay-kot/mealie # The repository to scan.
+          releases-only: true # We know that all relevant tags have a GitHub release for them.
+        id: mealie_version # The step ID to refer to later.
+      #
+      # 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:${{ steps.mealie_version.outputs.tag }} \
+            --platform linux/amd64,linux/arm/v7,linux/arm64 .

.github/workflows/pytest.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up python
         uses: actions/setup-python@v2
         with:
-          python-version: 3.8
+          python-version: 3.9
       #----------------------------------------------
       #  -----  install & configure poetry  -----
       #----------------------------------------------
@@ -31,7 +31,7 @@ jobs:
           virtualenvs-create: true
           virtualenvs-in-project: true
       # #----------------------------------------------
-      # #       load cached venv if cache exists
+      # #       load cached venv if cache exists #! This Breaks Stuff
       # #----------------------------------------------
       # - name: Load cached venv
       #   id: cached-poetry-dependencies
@@ -50,5 +50,4 @@ jobs:
       #----------------------------------------------
       - name: Run tests
         run: |
-          source .venv/bin/activate
-          pytest mealie/tests/
+          poetry run pytest

.gitignore

@@ -1,6 +1,6 @@
 # Byte-compiled / optimized / DLL files
 .env
-__pycache__/
+*__pycache__/
 *.py[cod]
 *$py.class
 # frontend/.env.development
@@ -8,20 +8,22 @@ docs/site/
 mealie/temp/*
 mealie/temp/api.html
 .temp/
+.secret
 
 
-app_data/backups/*
-app_data/debug/*
-app_data/img/*
-app_data/migration/*
+dev/data/backups/*
+dev/data/debug/*
+dev/data/img/*
+dev/data/migration/*
+dev/data/users/*
 
 #Exception to keep folders
 !mealie/dist/.gitkeep
-!app_data/backups/.gitkeep
-!app_data/backups/dev_sample_data*
-!app_data/debug/.gitkeep
-!app_data/migration/.gitkeep
-!app_data/img/.gitkeep
+!dev/data/backups/.gitkeep
+!dev/data/backups/dev_sample_data*
+!dev/data/debug/.gitkeep
+!dev/data/migration/.gitkeep
+!dev/data/img/.gitkeep
 
 .DS_Store
 node_modules
@@ -90,6 +92,7 @@ coverage.xml
 *.cover
 .hypothesis/
 .pytest_cache/
+test.db
 
 # Translations
 *.mo
@@ -152,4 +155,41 @@ ENV/
 node_modules/
 mealie/data/debug/last_recipe.json
 *.sqlite
-app_data/db/test.db
+dev/data/db/test.db
+scratch.py
+frontend/dist/favicon.ico
+frontend/dist/index.html
+frontend/dist/css/app.29fe0155.css
+frontend/dist/css/chunk-vendors.db944396.css
+frontend/dist/fonts/materialdesignicons-webfont.7a44ea19.woff2
+frontend/dist/fonts/materialdesignicons-webfont.64d4cf64.eot
+frontend/dist/fonts/materialdesignicons-webfont.147e3378.woff
+frontend/dist/fonts/materialdesignicons-webfont.174c02fc.ttf
+frontend/dist/fonts/roboto-latin-100.5cb7edfc.woff
+frontend/dist/fonts/roboto-latin-100.7370c367.woff2
+frontend/dist/fonts/roboto-latin-100italic.f8b1df51.woff2
+frontend/dist/fonts/roboto-latin-100italic.f9e8e590.woff
+frontend/dist/fonts/roboto-latin-300.b00849e0.woff
+frontend/dist/fonts/roboto-latin-300.ef7c6637.woff2
+frontend/dist/fonts/roboto-latin-300italic.4df32891.woff
+frontend/dist/fonts/roboto-latin-300italic.14286f3b.woff2
+frontend/dist/fonts/roboto-latin-400.60fa3c06.woff
+frontend/dist/fonts/roboto-latin-400.479970ff.woff2
+frontend/dist/fonts/roboto-latin-400italic.51521a2a.woff2
+frontend/dist/fonts/roboto-latin-400italic.fe65b833.woff
+frontend/dist/fonts/roboto-latin-500.020c97dc.woff2
+frontend/dist/fonts/roboto-latin-500.87284894.woff
+frontend/dist/fonts/roboto-latin-500italic.288ad9c6.woff
+frontend/dist/fonts/roboto-latin-500italic.db4a2a23.woff2
+frontend/dist/fonts/roboto-latin-700.2735a3a6.woff2
+frontend/dist/fonts/roboto-latin-700.adcde98f.woff
+frontend/dist/fonts/roboto-latin-700italic.81f57861.woff
+frontend/dist/fonts/roboto-latin-700italic.da0e7178.woff2
+frontend/dist/fonts/roboto-latin-900.9b3766ef.woff2
+frontend/dist/fonts/roboto-latin-900.bb1e4dc6.woff
+frontend/dist/fonts/roboto-latin-900italic.28f91510.woff
+frontend/dist/fonts/roboto-latin-900italic.ebf6d164.woff2
+frontend/dist/js/app.36f2760c.js
+frontend/dist/js/app.36f2760c.js.map
+frontend/dist/js/chunk-vendors.c93761e4.js
+frontend/dist/js/chunk-vendors.c93761e4.js.map

.vscode/settings.json

@@ -3,19 +3,16 @@
   "python.pythonPath": ".venv/bin/python3.9",
   "python.linting.pylintEnabled": true,
   "python.linting.enabled": true,
-  "python.autoComplete.extraPaths": ["mealie", "mealie/mealie"],
-  "python.analysis.extraPaths": ["mealie", "mealie/mealie"],
-
   "python.testing.unittestEnabled": false,
   "python.testing.nosetestsEnabled": false,
   "python.testing.pytestEnabled": true,
   "python.testing.autoTestDiscoverOnSaveEnabled": false,
+  "python.testing.pytestArgs": ["tests"],
   "cSpell.enableFiletypes": ["!javascript", "!python"],
-  "python.testing.pytestArgs": ["mealie"],
-  "i18n-ally.localesPaths": "frontend/src/locales",
+  "i18n-ally.localesPaths": "frontend/src/locales/messages",
+  "i18n-ally.sourceLanguage": "en",
   "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.keystyle": "nested",
-  "cSpell.words": [
-    "performant"
-  ]
+  "cSpell.words": ["performant"],
+  "search.mode": "reuseEditor"
 }

.vscode/tasks.json

@@ -3,7 +3,7 @@
   "tasks": [
     {
       "label": "DEV: Build and Start Docker Compose",
-      "command": "./dev/scripts/docker-compose.dev.sh",
+      "command": "make docker-dev",
       "type": "shell",
       "args": [],
       "problemMatcher": ["$tsc"],
@@ -14,7 +14,7 @@
     },
     {
       "label": "Production: Build and Start Docker Compose",
-      "command": "./dev/scripts/docker-compose.sh",
+      "command": "make docker-prod",
       "type": "shell",
       "args": [],
       "problemMatcher": ["$tsc"],
@@ -24,31 +24,34 @@
       "group": "test"
     },
     {
-      "label": "Dev: Start local Backend",
-      "command": "../${config:python.pythonPath}",
-      "args": ["app.py"],
-      "options": {
-        "cwd": "${workspaceFolder}/mealie/"
-      },
+      "label": "Dev: Start Backend",
+      "command": "make backend",
       "type": "shell",
-      "problemMatcher": [],
       "presentation": {
         "reveal": "always",
         "group": "groupA"
-      }
+      },
+      "problemMatcher": []
     },
     {
-      "label": "Dev: Start local Frontend",
-      "command": "npm run serve",
+      "label": "Dev: Start Frontend",
+      "command": "make frontend",
       "type": "shell",
-      "options": {
-        "cwd": "${workspaceFolder}/frontend/"
-      },
-      "problemMatcher": [],
       "presentation": {
         "reveal": "always",
         "group": "groupA"
-      }
+      },
+      "problemMatcher": []
+    },
+    {
+      "label": "Dev: Start Docs Server",
+      "command": "make docs",
+      "type": "shell",
+      "presentation": {
+        "reveal": "always",
+        "group": "groupA"
+      },
+      "problemMatcher": []
     }
   ]
 }

Caddyfile

@@ -0,0 +1,22 @@
+{
+	auto_https off
+  admin off
+}
+
+:80 {
+  @proxied path /api/* /docs /openapi.json
+
+  root * /app/dist
+  encode gzip
+  uri strip_suffix /
+  
+  handle @proxied {
+    reverse_proxy http://127.0.0.1:9000 
+  }
+
+  handle {
+    try_files {path}.html {path} /
+    file_server 
+  }
+
+}

Dockerfile

@@ -7,10 +7,22 @@ RUN npm run build
 
 FROM python:3.9-alpine
 
-RUN apk add --no-cache  libxml2-dev libxslt-dev libxml2 
-ENV ENV prod
+
+RUN apk add --no-cache libxml2-dev \
+    libxslt-dev \
+    libxml2 caddy \
+    libffi-dev \
+    python3 \
+    python3-dev \
+    jpeg-dev \
+    lcms2-dev \
+    openjpeg-dev \
+    zlib-dev
+
+
+ENV ENV True
 EXPOSE 80
-WORKDIR /app
+WORKDIR /app/
 
 COPY ./pyproject.toml /app/
 
@@ -29,10 +41,13 @@ RUN apk add --update --no-cache --virtual .build-deps \
     apk --purge del .build-deps
 
 
-COPY ./mealie /app
+COPY ./mealie /app/mealie
+RUN poetry install --no-dev 
+COPY ./Caddyfile /app
+COPY ./dev/data/templates /app/data/templates
 COPY --from=build-stage /app/dist /app/dist
-RUN rm -rf /app/test /app/.temp
-
 
 VOLUME [ "/app/data/" ]
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "80"]
+RUN chmod +x /app/mealie/run.sh
+CMD /app/mealie/run.sh
+

Dockerfile.dev

@@ -1,21 +1,22 @@
 FROM python:3
 
+WORKDIR /app/
+
 RUN apt-get update -y && \
     apt-get install -y python-pip python-dev
 
+# Install Poetry
 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 ./poetry.lock* /app/
+# Copy poetry.lock* in case it doesn't exist in the repo
+COPY ./pyproject.toml /app/
 
-WORKDIR /app
+COPY ./mealie /app/mealie
 
-RUN poetry install --no-root
+RUN poetry install 
 
-COPY ./mealie /app
-
-ENTRYPOINT [ "python" ]
-
-CMD [ "app.py" ]
+RUN chmod +x /app/mealie/run.sh
+CMD ["/app/mealie/run.sh", "reload"]

README.md

@@ -23,7 +23,7 @@
   <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://mealie-demo.hay-kot.dev/">View Demo</a>
     ·
     <a href="https://github.com/hay-kot/mealie/issues">Report Bug</a>    
     ·
@@ -39,40 +39,51 @@
 
 
 
-<!-- ABOUT THE PROJECT -->
-## About The Project
-
 
 [![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 relevant data or add a family recipe with the UI editor.  
+# About The Project
 
-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. 
+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 an API for interactions from 3rd party applications. 
+
+[Remember to join the Discord](https://discord.gg/R6QDyJgbD2)! 
 
 
 
-### Main Features
-#### 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
-#### 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 into custom files using Jinja2 templates
+## Key Features
+- 🔍 Fuzzy search
+- 🏷️ Tag recipes with categories or tags to flexible sorting
+- 🕸 Import recipes from around the web by URL
+- 📱 Beautiful Mobile Views
+- 📆 Create Meal Plans
+- 🛒 Generate shopping lists
+- 🐳 Easy setup with Docker
+- 🎨 Customize your interface with color themes layouts
+- 💾 Export all your data in any format with Jinja2 Templates, with easy data restoration from the user interface.
+- 🌍 localized in many languages
+- ➕ Plus tons more!
+    - Flexible API
+        - Custom key/value pairs for recipes
+        - Webhook support
+        - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
+    - Raw JSON Recipe Editor
+    - Migration from other platforms
+        - Chowdown
+        - Nextcloud Cookbook
+    - Random meal plan generation
 
-### Built With
+## FAQ
 
-* [Vue.js](https://vuejs.org/)
-* [Vuetify](https://vuetifyjs.com/en/)
-* [FastAPI](https://fastapi.tiangolo.com/)
-* [Docker](https://www.docker.com/)
+### Why An API?
+An API allows integration into applications like [Home Assistant](https://www.home-assistant.io/) 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. Additionally, you can access nearly any backend service via the API giving you total control to extend the application. To explore the API spin up your server and navigate to http://yourserver.com/docs for interactive API documentation. 
+
+### Why a Database?
+Some users of static-site generator applications like ChowDown have expressed concerns about their data being stuck in a database. Considering this is a new project it is a valid concern to be worried about your data. Mealie specifically addresses this concern by provided automatic daily backups that export your data in json, plain-text markdown files, and/or custom Jinja2 templates. **This puts you in controls of how your data is represented** when exported from Mealie, which means you can easily migrate to any other service provided Mealie doesn't work for you. 
+
+As to why we need a database?
+
+- **Developer Experience:** Without a database a lot of the work to maintain your data is taken on by the developer instead of a battle tested platform for storing data. 
+- **Multi User Support:** With a solid database as backend storage for your data Mealie can better support multi-user sites and avoid read/write access errors when multiple actions are taken at the same time. 
 
 
 <!-- CONTRIBUTING -->
@@ -82,11 +93,10 @@ Contributions are what make the open source community such an amazing place to b
 
 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>
+<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: 30px !important;width: 107px !important;" ></a>
 
 <!-- LICENSE -->
 ## License
-
 Distributed under the MIT License. See `LICENSE` for more information.
 
 
@@ -96,16 +106,6 @@ Project Link: [https://github.com/hay-kot/mealie](https://github.com/hay-kot/mea
 
 
 
-<!-- ACKNOWLEDGEMENTS -->
-## Acknowledgements
-
-* [Talk Python Training for helping me learn python](https://training.talkpython.fm/)
-* [Academind for helping me learn Javascript and Vue.js](https://academind.com/)
-
-
-
-
-
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 [contributors-shield]: https://img.shields.io/github/contributors/hay-kot/mealie.svg?style=flat-square
@@ -121,4 +121,4 @@ Project Link: [https://github.com/hay-kot/mealie](https://github.com/hay-kot/mea
 [license-url]: https://github.com/hay-kot/mealie/blob/master/LICENSE.txt
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
 [linkedin-url]: https://linkedin.com/in/hay-kot
-[product-screenshot]: docs/docs/img/home_screenshot.png
+[product-screenshot]: docs/docs/assets/img/home_screenshot.png

app_data/templates/recipes.md

@@ -1,26 +0,0 @@
-
-
-![Recipe Image](../images/{{ recipe.image }})
-
-# {{ recipe.name }}
-{{ recipe.description }}
-
-## Ingredients
-{% for ingredient in recipe.recipeIngredient %}
-- [ ] {{ ingredient }}
-{% endfor %}
-
-## Instructions
-{% for step in recipe.recipeInstructions %}
-- [ ] {{ step.text }}
-{% endfor %}
-
-{% for note in recipe.notes %}
-**{{ note.title }}:** {{ note.text }}
-{% endfor %}
-
----
-
-Tags: {{ recipe.tags }}
-Categories: {{ recipe.categories }}
-Original URL: {{ recipe.orgURL }}

dev/data/templates/recipes.md

@@ -0,0 +1,24 @@
+
+
+![Recipe Image](../../images/{{ recipe.slug }}/original.jpg)
+
+# {{ recipe.name }}
+{{ recipe.description }}
+
+## Ingredients
+{% for ingredient in recipe.recipeIngredient %} 
+- [ ] {{ ingredient }} {% endfor %}
+
+## Instructions
+{% for step in recipe.recipeInstructions %} 
+- [ ] {{ step.text }} {% endfor %}
+
+{% for note in recipe.notes %}
+**{{ note.title }}:** {{ note.text }}
+{% endfor %}
+
+---
+
+Tags: {{ recipe.tags }}
+Categories: {{ recipe.categories }}
+Original URL: {{ recipe.orgURL }}

dev/dev-notes.md

@@ -1,48 +0,0 @@
-# Getting A Developer Instance Started
-For the best experience developing I recommend using docker. I've used both WSL2 and Ubuntu to develop mealie and have had no issues with cross compatibility with docker. 2 Scripts are available along ith docker-compose files to make development instances easier. After cloning the repo you can set the scripts in /dev/scripts/ as executable and then use VSCode tasks to execute the scripts or execute them from the CLI. 
-
-`docker-compose.dev.sh` Will spin up a development stack with hot-reloading enabled. 
-`docker-compose.sh` Will spin up a production version of the stack.  
-
-After the stack is running navigate to the [admin page localhost:9090/settings/site](http://localhost:9090/settings/site). On the Backups and Exports section import the backup labeled dev_sample_data_{DATE}.zip. This will give you some recipe data to work with. 
-
-Once you're up and running you should be able to make changes and see them reflected on the frontend/backend. If you're not sure what to work on you can check:
-
-- The Todo's below.
-- The [Development Road Map](https://hay-kot.github.io/mealie/2.0%20-%20roadmap/)
-- The [Current Open Issues](https://github.com/hay-kot/mealie/issues)
-
-Don't forget to [join the Discord](https://discord.gg/R6QDyJgbD2)! 
-
-# Todo's
-
-Test
-- [ ] Image Upload Test
-- [ ] Rename and Upload Image Test
-- [x] Chowdown Migration End Point Test
-
-Frontend
-- [ ] No Meal Today Page instead of Null 
-- [ ] Recipe Print Page 
-- [ ] Recipe Editor Data Validation Client Side
-- [ ] Organize Home Page my Category, ideally user selectable.
-- [ ] Advanced Search Page, draft started
-  - [ ] Filter by Category
-  - [ ] Filter by Tags
-- [ ] Search Bar Results Redesign
-
-Backend
-- [ ] Database Import
-  - [x] Recipes
-  - [x] Images
-  - [ ] Meal Plans
-  - [x] Settings
-  - [x] Themes
-- [ ] Remove Print / Debug Code
-- [ ] Support how to sections and how to steps
-- [ ] Recipe request by category/tags
-
-SQL
-- [ ] Setup Database Migrations
-
-# Draft Changelog

dev/non-working-links.txt

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

dev/scratch/build.py

@@ -1,32 +0,0 @@
-import requests
-import json
-
-POST_URL = "http://localhost:9921/api/recipe/create-url"
-URL_LIST = [
-    "https://www.bonappetit.com/recipe/hallacas"
-    "https://www.bonappetit.com/recipe/oat-and-pecan-brittle-cookies",
-    "https://www.bonappetit.com/recipe/tequila-beer-and-citrus-cocktail",
-    "https://www.bonappetit.com/recipe/corn-and-crab-beignets-with-yaji-aioli",
-    "https://www.bonappetit.com/recipe/nan-e-berenji",
-    "https://www.bonappetit.com/recipe/ginger-citrus-cookies",
-    "https://www.bonappetit.com/recipe/chocolate-pizzettes-cookies",
-    "https://www.bonappetit.com/recipe/swedish-glogg",
-    "https://www.bonappetit.com/recipe/roasted-beets-with-dukkah-and-sage",
-    "https://www.bonappetit.com/recipe/collard-greens-salad-with-pickled-fennel-and-coconut"
-    "https://www.bonappetit.com/recipe/sparkling-wine-cocktail",
-    "https://www.bonappetit.com/recipe/pretzel-and-potato-chip-moon-pies",
-    "https://www.bonappetit.com/recipe/coffee-hazlenut-biscotti",
-    "https://www.bonappetit.com/recipe/curry-cauliflower-rice",
-    "https://www.bonappetit.com/recipe/life-of-the-party-layer-cake",
-    "https://www.bonappetit.com/recipe/marranitos-enfiestados",
-]
-
-
-if __name__ == "__main__":
-    for url in URL_LIST:
-        data = {"url": url}
-        data = json.dumps(data)
-        try:
-            response = requests.post(POST_URL, data)
-        except:
-            continue

dev/scratch/write_settings.py

@@ -1,39 +0,0 @@
-import json
-
-import requests
-
-POST_URL = "http://localhost:9921/api/site-settings/themes/create/"
-GET_URL = "http://localhost:9921/api/site-settings/themes/"
-
-SITE_SETTINGS = [
-    {
-        "name": "default",
-        "colors": {
-            "primary": "#E58325",
-            "accent": "#00457A",
-            "secondary": "#973542",
-            "success": "#5AB1BB",
-            "info": "#FFFD99",
-            "warning": "#FF4081",
-            "error": "#EF5350",
-        },
-    },
-    {
-        "name": "purple",
-        "colors": {
-            "accent": "#4527A0",
-            "primary": "#FF4081",
-            "secondary": "#26C6DA",
-            "success": "#4CAF50",
-            "info": "#2196F3",
-            "warning": "#FB8C00",
-            "error": "#FF5252",
-        },
-    },
-]
-
-if __name__ == "__main__":
-    for theme in SITE_SETTINGS:
-        data = json.dumps(theme)
-        response = requests.post(POST_URL, data)
-        response = requests.get(GET_URL)

dev/scripts/api_docs_gen.py

@@ -0,0 +1,44 @@
+import json
+
+from mealie.app import app
+from mealie.core.config import DATA_DIR
+
+"""Script to export the ReDoc documentation page into a standalone HTML file."""
+
+HTML_TEMPLATE = """<!-- Custom HTML site displayed as the Home chapter -->
+{% extends "main.html" %}
+{% block tabs %}
+{{ super() }}
+
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+</style>
+
+
+<div id="redoc-container"></div>
+<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script>
+<script>
+    var spec = MY_SPECIFIC_TEXT;
+    Redoc.init(spec, {}, document.getElementById("redoc-container"));
+</script>
+
+
+{% endblock %}
+{% block content %}{% endblock %}
+{% block footer %}{% endblock %}
+"""
+
+HTML_PATH = DATA_DIR.parent.parent.joinpath("docs/docs/overrides/api.html")
+
+
+def generate_api_docs(my_app):
+    with open(HTML_PATH, "w") as fd:
+        text = HTML_TEMPLATE.replace("MY_SPECIFIC_TEXT", json.dumps(my_app.openapi()))
+        fd.write(text)
+
+
+if __name__ == "__main__":
+    generate_api_docs(app)

dev/scripts/app_routes_gen.py

@@ -0,0 +1,83 @@
+import json
+import re
+from pathlib import Path
+from typing import Optional
+
+import slugify
+from jinja2 import Template
+from mealie.app import app
+from pydantic import BaseModel
+
+CWD = Path(__file__).parent
+OUT_FILE = CWD.joinpath("output", "app_routes.py")
+
+code_template = """
+class AppRoutes:
+    def __init__(self) -> None:
+        self.prefix = '{{paths.prefix}}'
+{% for path in paths.static_paths %}
+        self.{{ path.router_slug }} = "{{path.prefix}}{{ path.route }}"{% endfor %}
+{% for path in paths.function_paths  %}
+    def {{path.router_slug}}(self, {{path.var|join(", ")}}):
+        return f"{self.prefix}{{ path.route }}"
+{% endfor %}
+"""
+
+
+def get_variables(path):
+    path = path.replace("/", " ")
+    print(path)
+    var = re.findall(r" \{.*\}", path)
+    print(var)
+    if var:
+        return [v.replace("{", "").replace("}", "") for v in var]
+    else:
+        return None
+
+
+class RouteObject:
+    def __init__(self, route_string) -> None:
+        self.prefix = "/" + route_string.split("/")[1]
+        self.route = route_string.replace(self.prefix, "")
+        self.parts = route_string.split("/")[1:]
+        self.var = re.findall(r"\{(.*?)\}", route_string)
+        self.is_function = "{" in self.route
+        self.router_slug = slugify.slugify("_".join(self.parts[1:]), separator="_")
+
+    def __repr__(self) -> str:
+        return f"""Route: {self.route}
+Parts: {self.parts}
+Function: {self.is_function}
+Var: {self.var}
+Slug: {self.router_slug}
+"""
+
+
+def get_paths(app):
+    paths = []
+    print(json.dumps(app.openapi()))
+    for key, value in app.openapi().items():
+        if key == "paths":
+            for key, value in value.items():
+                paths.append(key)
+
+    return paths
+
+
+def generate_template(app):
+    paths = get_paths(app)
+    new_paths = [RouteObject(path) for path in paths]
+
+    static_paths = [p for p in new_paths if not p.is_function]
+    function_paths = [p for p in new_paths if p.is_function]
+
+    template = Template(code_template)
+
+    content = template.render(paths={"prefix": "/api", "static_paths": static_paths, "function_paths": function_paths})
+
+    with open(OUT_FILE, "w") as f:
+        f.write(content)
+
+
+if __name__ == "__main__":
+    generate_template(app)

dev/scripts/docker-compose.dev.sh

@@ -1 +0,0 @@
-docker-compose -f docker-compose.dev.yml -p dev-mealie up --build

dev/scripts/docker-compose.sh

@@ -1 +0,0 @@
-docker-compose -p mealie up --build

dev/scripts/output/app_routes.py

@@ -0,0 +1,97 @@
+class AppRoutes:
+    def __init__(self) -> None:
+        self.prefix = "/api"
+
+        self.users_sign_ups = "/api/users/sign-ups"
+        self.auth_token = "/api/auth/token"
+        self.auth_token_long = "/api/auth/token/long"
+        self.auth_refresh = "/api/auth/refresh"
+        self.users = "/api/users"
+        self.users_self = "/api/users/self"
+        self.groups = "/api/groups"
+        self.groups_self = "/api/groups/self"
+        self.recipes = "/api/recipes"
+        self.recipes_category = "/api/recipes/category"
+        self.recipes_tag = "/api/recipes/tag"
+        self.categories = "/api/categories"
+        self.recipes_tags = "/api/recipes/tags/"
+        self.recipes_create = "/api/recipes/create"
+        self.recipes_create_url = "/api/recipes/create-url"
+        self.meal_plans_all = "/api/meal-plans/all"
+        self.meal_plans_create = "/api/meal-plans/create"
+        self.meal_plans_this_week = "/api/meal-plans/this-week"
+        self.meal_plans_today = "/api/meal-plans/today"
+        self.site_settings_custom_pages = "/api/site-settings/custom-pages"
+        self.site_settings = "/api/site-settings"
+        self.site_settings_webhooks_test = "/api/site-settings/webhooks/test"
+        self.themes = "/api/themes"
+        self.themes_create = "/api/themes/create"
+        self.backups_available = "/api/backups/available"
+        self.backups_export_database = "/api/backups/export/database"
+        self.backups_upload = "/api/backups/upload"
+        self.migrations = "/api/migrations"
+        self.debug_version = "/api/debug/version"
+        self.debug_last_recipe_json = "/api/debug/last-recipe-json"
+
+    def users_sign_ups_token(self, token):
+        return f"{self.prefix}/users/sign-ups/{token}"
+
+    def users_id(self, id):
+        return f"{self.prefix}/users/{id}"
+
+    def users_id_reset_password(self, id):
+        return f"{self.prefix}/users/{id}/reset-password"
+
+    def users_id_image(self, id):
+        return f"{self.prefix}/users/{id}/image"
+
+    def users_id_password(self, id):
+        return f"{self.prefix}/users/{id}/password"
+
+    def groups_id(self, id):
+        return f"{self.prefix}/groups/{id}"
+
+    def categories_category(self, category):
+        return f"{self.prefix}/categories/{category}"
+
+    def recipes_tags_tag(self, tag):
+        return f"{self.prefix}/recipes/tags/{tag}"
+
+    def recipes_recipe_slug(self, recipe_slug):
+        return f"{self.prefix}/recipes/{recipe_slug}"
+
+    def recipes_recipe_slug_image(self, recipe_slug):
+        return f"{self.prefix}/recipes/{recipe_slug}/image"
+
+    def meal_plans_plan_id(self, plan_id):
+        return f"{self.prefix}/meal-plans/{plan_id}"
+
+    def meal_plans_id_shopping_list(self, id):
+        return f"{self.prefix}/meal-plans/{id}/shopping-list"
+
+    def site_settings_custom_pages_id(self, id):
+        return f"{self.prefix}/site-settings/custom-pages/{id}"
+
+    def themes_theme_name(self, theme_name):
+        return f"{self.prefix}/themes/{theme_name}"
+
+    def backups_file_name_download(self, file_name):
+        return f"{self.prefix}/backups/{file_name}/download"
+
+    def backups_file_name_import(self, file_name):
+        return f"{self.prefix}/backups/{file_name}/import"
+
+    def backups_file_name_delete(self, file_name):
+        return f"{self.prefix}/backups/{file_name}/delete"
+
+    def migrations_type_file_name_import(self, type, file_name):
+        return f"{self.prefix}/migrations/{type}/{file_name}/import"
+
+    def migrations_type_file_name_delete(self, type, file_name):
+        return f"{self.prefix}/migrations/{type}/{file_name}/delete"
+
+    def migrations_type_upload(self, type):
+        return f"{self.prefix}/migrations/{type}/upload"
+
+    def debug_log_num(self, num):
+        return f"{self.prefix}/debug/log/{num}"

docker-compose.dev.yml

@@ -29,14 +29,14 @@ services:
       db_type: sqlite
       TZ: America/Anchorage # Specify Correct Timezone for Date/Time to line up correctly.
     volumes:
-      - ./app_data:/app_data
-      - ./mealie:/app
+      - ./dev/data:/app/dev/data
+      - ./mealie:/app/mealie
 
+  # Mkdocs
   mealie-docs:
     image: squidfunk/mkdocs-material
     restart: always
     ports:
-      - 9923:8000
+      - 9922:8000
     volumes:
       - ./docs:/docs
-

docs/docs/api/api-usage.md

@@ -1,14 +0,0 @@
-# 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/api/redoc.md

@@ -0,0 +1,4 @@
+---
+title: API
+template: api.html
+---

docs/docs/assets/img/app_diagram.drawio.svg

@@ -0,0 +1,233 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="672px" height="802px" viewBox="-0.5 -0.5 672 802" content="&lt;mxfile host=&quot;23d2e92c-1798-4628-b714-afc635cb8bb4&quot; modified=&quot;2021-02-25T18:35:08.654Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.54.0-insider Chrome/87.0.4280.141 Electron/11.3.0 Safari/537.36&quot; etag=&quot;VkjSc3HAwyf7iAB2Toef&quot; version=&quot;14.2.4&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;3j9sfWdaUOHFNAte1u_k&quot; name=&quot;Page-1&quot;&gt;7VvbcuM2Ev0aVW0e7KJ4keRH3zK7VU6tKzOpPKYgEiKxJgkuCVlyvj7duJAgCVnyhJqZeMYPtgg0cenuc7rRkGfBbbH/UJMq+4UnNJ/5XrKfBXcz35/74RL+YMuLbvGuQtWS1izRbV3DR/YnNYK6dcsS2vQEBee5YFW/MeZlSWPRayN1zXd9sQ3P+7NWJKWjho8xycetv7NEZKp1FXld+78pSzMz89zTPWsSP6U135Z6vpkf/Cx/VHdBzFhavslIwndWU3A/C25rzoX6VOxvaY7KNWpT7/18oLddd01LccoLoX7jmeRbapYsFyZejDJwP5UWo7Wge5cJyNqIe+M1zNudgctQXlBRv4DIvm904yzBSj3vOs2HRiaztH6l24g2dtqO3G0YPug9u/cfeMf3X3FWClrfP8N+cKr5LLhp7ebBQ0KajCb6IRNFboREzZ/oLc95DS0lL2HAm5ysaf7IGyYYL6E5pjg4dKBuGbjgw0BgzYXghSVwnbMUOwSvoJXop3YcWFqFKy/2KaLzsmhiQi9hC9uSXm4bWv+hDBrcbFiem9WBo95Hq8CPoH1swNZNhvYfG9Wy2tJhtMUURls6jLbIBWp/3rPd4v9bRNLNhpfiopE0cw0C81W17zrhU4p/fwPdQOcH1E5jBoS14JhKwjRWg1dS/Qqs3OPYYM1MCpa/2JO10sBUFH9LEOU5gAgNDiNs4BcaCmVERkQn2jQ8ZkSAsyEhplRktL6Ez79pafAcXqasTGW/PdeOSRVm5FkOFMe0aYwQjMLq4fAFJXmVk1IutEyG3UiBDU79KWMoIn/F2xp9BveLg+JeSvmwoURs5Rbk5tSq4O0FKdARy3VTWeoFnVedygdoBP8TJ8DM9m3d1FQkRtUEd1H39AlBdHfhI3R3GRP0I7TjVDsAD7RxcPlNLqGesSShALUbye8t4A8y4xhABynQIMUCTxCeifJC/9uj/PH2nYw/9yfYv+9ij/NQPpBqsrxae94ZeJ9vRc5KmMpkQN4pwYBvNixWYaC5JEnBSgZLJgKX+5Z44B9wjq8TDxZniQfXqJ4TA8EvwJZMMqt+STN2s61khBjQuZOGidzUVoWUhAgMDP+i+zjfJorRK2DgHa+T5ick3kcgJl4XZk5lRybHFaR5wmFz9qTWpAfQq8AwVdOGCtE128MrCUxldX/V8jkua00aqkQKluKcUkgt+LaNFgUpiY5E4NJSF2pCGTWubdeToYOUUgUNt/UCqxQ1i1XIqWnMKjoKigWpn2S/5mcdgiHbSZjiKNhLF5Fws99V5PEniTyTUG8YfP3Q4/dDjx86Yo93rtPGCaetb/u0MUHUkWxzLNgcc+rgaLBZnCvYXJ3t8NG8QkuvxJ5rSbFlmht6Q5zUVCfqkvokuUrOtWOQPDGQhsWo3Zo955jTm2iE7DnrzgZVzcFimvfV6C3Va1GbnynOynclcv39uNui75ILm7v1UaPP7IbJXbz93fD4AZff9137i5wgouM0ZiggfgG+SGgdHNCOZYW1UsrDum1oi2n/VbRjzKXqhfPo79LImyJF4FCxi2RWU2j4PBntXZu9eb/SnCDlNxmrPpN3Psl8yhBIbQ3Y4hgYAGhNtcgKQcIIhIRCMRMFVCBB/AeB32S8Fl2OqilADTDTdYOOQtTwg0qKLjn0XsEyxoWsY+BMN2jehG7INpcM1GbcVolkrVNmXWRpx+3U2Q4wLOrIzeCspF2s2Xg7YAaCaaZldALN26y1340AkMn3LqOaLDuKp3vIn5uBku09QL7d30G3cRkKLt8xW76O7FV0FNnuJDiYANvmEsHC9q/aVYYcumMFeC7qMs5YnjyQF8i/oK8R4Bjm6QaAw/4E+JPOQKQW+lIl8HoSH/FNrchOrXNNIPqd+co867V0Vje3IT6+T5FvHo3WvbbpgTTiaOY6ShodHjSBqeeLPosvVmNbz100PsmBJxon/BcdRUmmzgHFs0jnfxEyOoSxOWrowsp8lOya85xiLteTMTjpSQxcyWg7pxvxdgg/yLfuwoGbLA4eE6Qf6EOacjVBhPUM9jMecpKNI89tZAPgE206RfIThSOTqluAH+CdHLxhH7uR77Czq6g4DXbHWe7FTBfbXoOjvl2zsC1vlMbYNtmMLaojQU/23YE5fDOYXUaeBMzjuwCs5D7mDgr9Aei/D+jI/6rReOVEtAXYD13x8R3hbfnNBM+FP7KAW+U/wDZB9PSPh0/fVeqeBGyLca3/oj1sn5D52t8/0JItNUd37w2jiwO3NIcx6rTcJBgd157QRJf6YkaVM7Aygeq0Ssyz7qszHl//D68HpqsljCAzNEsBhyCcxllU6BcQbAv700CtLfoZqEUOUnUZLJzAYMsTbtX6GjhSiB0qyGmkKQgq7CcD5h6/pzQHPU3h5K5bnIHOaJJSEwYamhawq/uu6YaWyTV+1RS9MicNVkEPatFEFVelevSVkUGPHXfUGnFhb1W5pdPIoVPTpqq4z/3hXYrWMzzibaVl0au+ReeDERq+rWOqX+qsNRpnPhho6Q1sDmE+pWI0EBiEvFhi8jK1OXm9ZprOidSAnUu1Gj0NmSdclHyTyPS9foUUPPKLQXN5wiX5xNB8TxCcr8KB6Vafh8Fw8CW9aBirJsJgW1EbLPjQukbyofdZ+5gM5K67un8CyEN/GH/DLwfyE753/wPkh+OW3w9c0dVnBtpoAI6zBVr/1Ug7XpfnXtdkoB0X/uQhp7thPnDMMVd1+ojTjLz23Z5xBtn60vGl7fMdccaVO3nWvDRVgsMG6+q536HJhug+o83gsfu3NYXI7p8Dg/u/AA==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
+    <defs/>
+    <g>
+        <rect x="0" y="138" width="70" height="60" fill="none" stroke="none" pointer-events="all"/>
+        <path d="M 0 190.12 C 0.33 185.06 0.82 180.02 1.48 175 C 1.8 173.47 2.19 171.97 2.66 170.5 C 3.13 168.98 4 167.67 5.14 166.72 C 6.56 165.61 8.15 164.81 9.83 164.35 C 10.51 164.04 11.26 164.04 11.94 164.35 C 16.84 169.6 24.48 169.6 29.38 164.35 C 29.98 164.08 30.64 164.08 31.24 164.35 C 33.19 165.09 35.06 166.07 36.82 167.27 C 34.65 167.54 32.55 168.25 30.62 169.39 C 27.64 171.19 25.41 174.27 24.43 177.95 L 22.92 190.14 Z M 20.17 161.73 C 17.61 161.8 15.14 160.56 13.36 158.3 C 11.58 156.05 10.65 152.98 10.79 149.85 C 10.72 146.76 11.68 143.77 13.45 141.58 C 15.23 139.39 17.66 138.19 20.17 138.26 C 22.78 138 25.35 139.12 27.25 141.33 C 29.14 143.54 30.18 146.64 30.09 149.85 C 30.25 153.1 29.25 156.28 27.34 158.56 C 25.44 160.84 22.83 162 20.17 161.73 Z M 25.84 198 C 26.15 193.52 26.59 189.05 27.17 184.6 C 27.42 182.59 27.8 180.6 28.32 178.66 C 28.64 176.59 29.65 174.75 31.15 173.52 C 32.85 172.3 34.66 171.28 36.55 170.5 C 37.4 170.21 38.32 170.4 39.03 171 C 40.08 172.2 41.31 173.19 42.66 173.92 C 46.02 175.58 49.83 175.58 53.19 173.92 C 54.53 173.16 55.78 172.22 56.9 171.1 C 57.79 170.31 59.01 170.19 60 170.8 C 61.6 171.42 63.13 172.3 64.51 173.42 C 65.8 174.41 66.77 175.86 67.26 177.55 C 68.13 180.7 68.72 183.94 69.03 187.22 C 69.43 190.81 69.76 194.4 70 198 Z M 48.5 167.98 C 42.29 168.13 37.15 161.83 36.99 153.87 C 37.03 150.02 38.26 146.34 40.42 143.65 C 42.58 140.97 45.49 139.5 48.5 139.57 C 54.38 140.09 58.97 146.32 59.02 153.87 C 58.89 161.35 54.33 167.47 48.5 167.98 Z" fill="#e58325" stroke="none" pointer-events="all"/>
+        <rect x="70" y="138" width="340" height="90" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 128px; margin-left: 75px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 100px; overflow: hidden; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                <h1 style="font-size: 18px">
+                                    User Groups
+                                </h1>
+                                <p>
+                                    User groups, or "family" groups are a collection of users that are associated together. Users belonging to groups will have access to their associated mealplans and associated pages. This is currently the only feature of groups.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="75" y="140" fill="#000000" font-family="Helvetica" font-size="12px">
+                    User Groups...
+                </text>
+            </switch>
+        </g>
+        <rect x="0" y="10" width="70" height="60" fill="none" stroke="none" pointer-events="all"/>
+        <path d="M 63.22 68.4 C 63.82 68.4 64.58 67.93 64.58 67.14 C 64.58 66.64 64.03 65.99 63.22 65.99 C 62.34 65.99 61.86 66.7 61.86 67.14 C 61.86 67.83 62.49 68.4 63.22 68.4 Z M 66.39 67.22 C 66.39 68.69 64.91 70 63.27 70 C 61.44 70 60.07 68.65 60.07 67.25 L 60.07 50.06 C 58.43 49.33 56.45 47.65 56.45 44.65 C 56.55 42.25 58.13 40.43 60.07 39.51 L 60.07 44.39 L 63.22 45.99 L 66.39 44.39 L 66.39 39.5 C 68.29 40.34 70 42.32 70 44.78 C 69.95 47.1 68.53 49.03 66.39 50.06 Z M 49.19 69.99 C 48.73 69.99 48.32 69.65 48.32 69.19 L 48.32 57.17 C 48.32 56.81 48.7 56.39 49.17 56.39 L 50.12 56.39 L 50.13 45.21 L 49.77 42.55 L 49.77 38.79 L 52.29 38.79 L 52.3 42.55 L 51.94 45.21 L 51.94 56.39 L 52.85 56.39 C 53.37 56.39 53.74 56.68 53.74 57.21 L 53.74 69.22 C 53.74 69.68 53.33 69.99 52.88 69.99 Z M 27.78 36.63 C 20.5 36.63 14 31.25 14 22.98 C 14 16.57 19.5 10 27.52 10 C 35.36 10 41.1 16.36 41.1 23.29 C 41.1 31.31 34.33 36.63 27.78 36.63 Z M 0 63.51 C 0.63 57.61 1.47 49.54 3.07 45.46 C 3.81 43.61 4.88 42.28 6.61 41.17 C 7.73 40.43 11.72 38.48 12.45 38.16 C 13.73 37.57 15.05 37.26 16.18 38.16 C 22.94 43.46 32.3 43.3 39.15 38.18 C 39.94 37.46 41.21 37.65 42.04 37.94 C 42.97 38.26 45.37 39.46 46.96 40.29 L 46.96 42.69 L 47.32 45.36 L 47.32 54.39 C 46.31 54.92 45.52 55.93 45.52 57.17 L 45.51 63.51 Z" fill="#e58325" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="70" y="10" width="340" height="120" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 0px; margin-left: 75px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 130px; overflow: hidden; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                <h1 style="font-size: 18px">
+                                    Admins
+                                </h1>
+                                <p>
+                                    Mealie admins are super users that have access to all user data (excluding passwords). Perform administrative tasks like adding users, resetting user passwords, backing up the database, migrating data, and managing site settings. Administrators can also access restricted recipes that are marked hidden or uneditable by the user.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="75" y="12" fill="#000000" font-family="Helvetica" font-size="12px">
+                    Admins...
+                </text>
+            </switch>
+        </g>
+        <rect x="10" y="240" width="60" height="60" fill="none" stroke="none" pointer-events="all"/>
+        <path d="M 40.01 269.86 C 32.14 269.86 25.13 263.82 25.13 254.55 C 25.13 247.37 31.06 240 39.72 240 C 48.19 240 54.39 247.13 54.39 254.9 C 54.39 263.89 47.08 269.86 40.01 269.86 Z M 10 300 C 10.68 293.37 11.59 284.33 13.32 279.75 C 14.11 277.68 15.27 276.19 17.14 274.95 C 18.35 274.12 22.66 271.93 23.45 271.57 C 24.83 270.91 26.26 270.57 27.48 271.57 C 34.78 277.52 44.88 277.34 52.28 271.6 C 53.14 270.78 54.51 271 55.41 271.32 C 56.82 271.82 61.36 274.29 62.22 274.79 C 64.73 276.3 66.08 278.32 67.09 282.11 C 68.37 287.23 69.13 293.75 70 300 Z" fill="#e58325" stroke="none" pointer-events="all"/>
+        <rect x="70" y="240" width="340" height="90" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 230px; margin-left: 75px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 100px; overflow: hidden; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                <h1 style="font-size: 18px">
+                                    Users
+                                </h1>
+                                <p>
+                                    A single user created by an Admin that has basic privlages to edit their profile, create and edit recipes they own. Edit recipes that are not hidden and are marked editable.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="75" y="242" fill="#000000" font-family="Helvetica" font-size="12px">
+                    Users...
+                </text>
+            </switch>
+        </g>
+        <path d="M 10 375 C 10 366.72 23.43 360 40 360 C 47.96 360 55.59 361.58 61.21 364.39 C 66.84 367.21 70 371.02 70 375 L 70 425 C 70 433.28 56.57 440 40 440 C 23.43 440 10 433.28 10 425 Z" fill="#e58325" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 70 375 C 70 383.28 56.57 390 40 390 C 23.43 390 10 383.28 10 375" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="75" y="360" width="340" height="130" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 350px; margin-left: 80px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 140px; overflow: hidden; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
+                                <h1 style="font-size: 18px">
+                                    Database Relationships
+                                </h1>
+                                <p>
+                                    The basic relationship and ownership is diagramed below. In short users are owners of recipes and groups are the owners of meal-plans. By default all users will be added to the "default" group. If a recipe is added through a migration or through a backup where no user exists ownership will be set to the default Admin.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="80" y="362" fill="#000000" font-family="Helvetica" font-size="12px">
+                    Database Relationships...
+                </text>
+            </switch>
+        </g>
+        <path d="M 310 710 L 310 693.5 Q 310 680 296.5 680 L 163.5 680 Q 150 680 150 693.5 L 150 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 150 710 L 150 786.5 Q 150 800 163.5 800 L 296.5 800 Q 310 800 310 786.5 L 310 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 150 710 L 310 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
+            <text x="229.5" y="702.5">
+                Recipe
+            </text>
+        </g>
+        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
+            <text x="155.5" y="731.5">
+                - owners: list[Users]
+            </text>
+            <text x="155.5" y="750.5">
+                - editable: boolean
+            </text>
+            <text x="155.5" y="769.5">
+                - hidden: boolean
+            </text>
+        </g>
+        <path d="M 200 550 L 200 533.5 Q 200 520 186.5 520 L 43.5 520 Q 30 520 30 533.5 L 30 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 30 550 L 30 626.5 Q 30 640 43.5 640 L 186.5 640 Q 200 640 200 626.5 L 200 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 30 550 L 200 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
+            <text x="114.5" y="542.5">
+                User
+            </text>
+        </g>
+        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
+            <text x="35.5" y="571.5">
+                - admin: boolean
+            </text>
+            <text x="35.5" y="590.5">
+                - group: list[Group]
+            </text>
+            <text x="35.5" y="609.5">
+                - recipes: list[Recipe]
+            </text>
+        </g>
+        <path d="M 670 710 L 670 693.5 Q 670 680 656.5 680 L 523.5 680 Q 510 680 510 693.5 L 510 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 510 710 L 510 786.5 Q 510 800 523.5 800 L 656.5 800 Q 670 800 670 786.5 L 670 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 510 710 L 670 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
+            <text x="589.5" y="702.5">
+                MealPlan
+            </text>
+        </g>
+        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
+            <text x="515.5" y="731.5">
+                - group: Group
+            </text>
+        </g>
+        <path d="M 610 550 L 610 533.5 Q 610 520 596.5 520 L 423.5 520 Q 410 520 410 533.5 L 410 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 410 550 L 410 626.5 Q 410 640 423.5 640 L 596.5 640 Q 610 640 610 626.5 L 610 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 410 550 L 610 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
+            <text x="509.5" y="542.5">
+                Group
+            </text>
+        </g>
+        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
+            <text x="415.5" y="571.5">
+                - users: list[Users]
+            </text>
+            <text x="415.5" y="590.5">
+                - mealplans list[MealPlan]
+            </text>
+        </g>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 570px; margin-left: 271px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
+                                User.group is backfilled by a Groups object
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="320" y="574" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    User.group is bac...
+                </text>
+            </switch>
+        </g>
+        <rect x="34" y="636" width="10" height="10" fill="#ffffff" stroke="none" pointer-events="none"/>
+        <path d="M 39 611 L 39 690 Q 39 700 49 700 L 130.76 700" fill="none" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 136.76 700 L 128.76 704 L 130.76 700 L 128.76 696 Z" fill="#e58325" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <rect x="195" y="583" width="10" height="10" fill="#ffffff" stroke="none" pointer-events="none"/>
+        <path d="M 174 588 L 234 588 Q 244 588 244 578 L 244 550 Q 244 540 254 540 L 391.76 540" fill="none" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 397.76 540 L 389.76 544 L 391.76 540 L 389.76 536 Z" fill="#e58325" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <rect x="414" y="634" width="10" height="10" fill="#ffffff" stroke="none" pointer-events="none"/>
+        <path d="M 419 591 L 419 690 Q 419 700 429 700 L 480 700 Q 490 700 490.88 700 L 491.76 700" fill="none" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <path d="M 497.76 700 L 489.76 704 L 491.76 700 L 489.76 696 Z" fill="#e58325" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 730px; margin-left: 35px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
+                                User.recipes is backfilled by Recipe objects
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="84" y="734" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    User.recipes is b...
+                </text>
+            </switch>
+        </g>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 730px; margin-left: 401px;">
+                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
+                                Group.mealplan is backfilled by MealPlan objects
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="450" y="734" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Group.mealplan is...
+                </text>
+            </switch>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Viewer does not support full SVG 1.1
+            </text>
+        </a>
+    </switch>
+</svg>

docs/docs/assets/stylesheets/custom.css

@@ -0,0 +1,47 @@
+[data-md-color-scheme="mealie"] {
+  --md-primary-fg-color: #e58325;
+  --md-primary-fg-color--light: #e58325;
+  --md-accent-fg-color: #e58325;
+  --md-custom-h2-color: #333;
+  --md-accent-fg-color--light: #e58325;
+  --md-default-accent-bg-color: #f7fafc;
+}
+
+[data-md-color-scheme="slate"] {
+  --md-primary-fg-color: #e58325;
+  --md-primary-fg-color--dark: #e58325;
+  --md-accent-fg-color: #e58325;
+  --md-accent-fg-color--dark: #e58325;
+  --md-custom-h2-color: rgb(167, 167, 167);
+  --md-default-bg-color: #1a1b1b;
+  --md-default-accent-bg-color: #1f1e1e;
+}
+
+/* frontpage elements */
+.tx-hero h1 {
+  font-size: 2.41rem !important;
+}
+a.md-button.md-button--primary {
+  background-color: var(--md-accent-fg-color);
+  border-color: var(--md-accent-fg-color);
+  color: #ffffff;
+}
+a.md-button.md-button--primary:hover {
+  color: #000000;
+}
+a.md-button.md-button:hover {
+  color: #ffffff;
+}
+
+/* Site width etc.*/
+.md-grid {
+  max-width: 64rem !important;
+}
+
+.md-typeset table:not([class]) th {
+  background-color: #e58325;
+}
+
+th {
+  font-weight: bold;
+}

docs/docs/changelog/v0.1.0.md

@@ -1,79 +1,5 @@
-# Release Notes
+# v0.1.0 - Initial Beta
 
-## v0.3.0 - Draft!
-
-### Features and Improvements
-  - Open search with `/` hotkey! 
-  - Unified and improved snackbar notifications
-  - Recipe Viewer
-    - Categories, Tags, and Notes will not be displayed below the steps on smaller screens
-  - Recipe Editor
-    - Text areas now auto grow to fit content
-    - Description, Steps, and Notes support Markdown! This includes inline html in Markdown. 
-
-### Development / Misc
-  - Added async file response for images, downloading files.
-  - Breakup recipe view component
-
-## v0.2.0 - Now with Test!
-This is, what I think, is a big release! Tons of new features and some great quality of life improvements with some additional features. You may find that I made promises to include some fixes/features in v0.2.0. The short of is I greatly underestimated the work needed to refactor the database to a usable state and integrate categories in a way that is useful for users. This shouldn't be taken as a sign that I'm dropping those feature requests or ignoring them. I felt it was better to push a release in the current state rather than drag on development to try and fulfil all of the promises I made. 
-
-!!! warning "Upgrade Process"
-    Database Breaks! I have not yet implemented a database migration service. As such, upgrades cannot be done by simply pulling the image. You must first export your recipes, update your deployment, and then import your recipes. This pattern is likely to be how upgrades take place prior to v1.0. After v1.0 migrations will be done automatically.
-
-### Bug Fixes
-  - Remove ability to save recipe with no name
-  - Fixed data validation error on missing parameters
-  - Fixed failed database initialization at startup - Closes #98
-  - Fixed misaligned text on various cards
-  - Fixed bug that blocked opening links in new tabs - Closes #122
-  - Fixed router link bugs - Closes #122
-  - Fixed navigation on keyboard selection - Closes #139
-
-### Features and Improvements
-  - 🐳 Dockerfile now 1/5 of the size!
-  - 🌎 UI Language Selection + Additional Supported Language
-  - **Home Page**
-    - By default your homepage will display only the recently added recipes. You can configured sections to show on the home-screen based of categories on the settings page. 
-    - A new sidebar is now shown on the main page that lists all the categories in the database. Clicking on them navigates into a page that shows only recipes. 
-    - Basic Sort functionality has been added. More options are on the way! 
-  - **Meal Planner**
-    - Improved Search (Fuzzy Search)
-    - New Scheduled card support 
-  - **Recipe Editor**
-    - Ingredients are now sortable via drag-and-drop
-    - Known categories now show up in the dropdown - Closes 83
-    - Initial code for data validation to prevent errors
-  - **Migrations**
-    - Card based redesign
-    - Upload from the UI
-    - Unified Chowdown / Nextcloud import process. (Removed Git as a dependency)
-  - **API**
-    - Category and Tag endpoints added
-    - Major Endpoint refactor
-    - Improved API documentation
-    - Link to your Local API is now on your `/settings/site`. You can use it to explore your API. 
-
-  - **Style**
-    - Continued work on button/style unification
-    - Adding icons to buttons
-    - New Color Theme Picker UI
-
-### Development
-  - Fixed Vetur config file. Autocomplete in VSCode works!
-  - File/Folder restructuring 
-  - Added Prettier config
-  - Fixed incorrect layout code
-  - FastAPI Route tests for major operations - WIP (shallow testing)
-
-### Breaking Changes 
-
-!!! error "Breaking Changes"
-    - API endpoints have been refactored to adhear to a more consistent standard. This is a WIP and more changes are likely to occur. 
-    - Officially Dropped MongoDB Support
-    - Database Breaks! We have not yet implemented a database migration service. As such, upgrades cannot be done by simply pulling the image. You must first export your recipes, update your deployment, and then import your recipes. This pattern is likely to be how upgrades take place prior to v1.0. After v1.0 migrations will be done automatically. 
-
-## v0.1.0 - Initial Beta
 ### Bug Fixes
   - Fixed Can't delete recipe after changing name - Closes Closes #67
   - Fixed No image when added by URL, and can't add an image - Closes Closes #66

docs/docs/changelog/v0.2.0.md

@@ -0,0 +1,72 @@
+# v0.2.1 - Hot Fixes!
+
+### Features and Improvements
+  - Fixes upload image error when no photo was scrapped
+  - Fixes no last_recipe.json not updating
+  - Added markdown rendering for notes
+  - New notifications
+  - Minor UI improvements
+  - Recipe editor refactor
+  - Settings/Theme models refactor
+
+### Development / Misc
+  - Added async file response for images, downloading files.
+  - Breakup recipe view component
+
+# v0.2.0 - Now with Test!
+This is, what I think, is a big release! Tons of new features and some great quality of life improvements with some additional features. You may find that I made promises to include some fixes/features in v0.2.0. The short of is I greatly underestimated the work needed to refactor the database to a usable state and integrate categories in a way that is useful for users. This shouldn't be taken as a sign that I'm dropping those feature requests or ignoring them. I felt it was better to push a release in the current state rather than drag on development to try and fulfil all of the promises I made. 
+
+!!! warning "Upgrade Process"
+    Database Breaks! I have not yet implemented a database migration service. As such, upgrades cannot be done by simply pulling the image. You must first export your recipes, update your deployment, and then import your recipes. This pattern is likely to be how upgrades take place prior to v1.0. After v1.0 migrations will be done automatically.
+
+### Bug Fixes
+  - Remove ability to save recipe with no name
+  - Fixed data validation error on missing parameters
+  - Fixed failed database initialization at startup - Closes #98
+  - Fixed misaligned text on various cards
+  - Fixed bug that blocked opening links in new tabs - Closes #122
+  - Fixed router link bugs - Closes #122
+  - Fixed navigation on keyboard selection - Closes #139
+
+### Features and Improvements
+  - 🐳 Dockerfile now 1/5 of the size!
+  - 🌎 UI Language Selection + Additional Supported Language
+  - **Home Page**
+    - By default your homepage will display only the recently added recipes. You can configured sections to show on the home-screen based of categories on the settings page. 
+    - A new sidebar is now shown on the main page that lists all the categories in the database. Clicking on them navigates into a page that shows only recipes. 
+    - Basic Sort functionality has been added. More options are on the way! 
+  - **Meal Planner**
+    - Improved Search (Fuzzy Search)
+    - New Scheduled card support 
+  - **Recipe Editor**
+    - Ingredients are now sortable via drag-and-drop
+    - Known categories now show up in the dropdown - Closes 83
+    - Initial code for data validation to prevent errors
+  - **Migrations**
+    - Card based redesign
+    - Upload from the UI
+    - Unified Chowdown / Nextcloud import process. (Removed Git as a dependency)
+  - **API**
+    - Category and Tag endpoints added
+    - Major Endpoint refactor
+    - Improved API documentation
+    - Link to your Local API is now on your `/settings/site`. You can use it to explore your API. 
+
+  - **Style**
+    - Continued work on button/style unification
+    - Adding icons to buttons
+    - New Color Theme Picker UI
+
+### Development
+  - Fixed Vetur config file. Autocomplete in VSCode works!
+  - File/Folder restructuring 
+  - Added Prettier config
+  - Fixed incorrect layout code
+  - FastAPI Route tests for major operations - WIP (shallow testing)
+
+### Breaking Changes 
+
+!!! error "Breaking Changes"
+    - API endpoints have been refactored to adhear to a more consistent standard. This is a WIP and more changes are likely to occur. 
+    - Officially Dropped MongoDB Support
+    - Database Breaks! We have not yet implemented a database migration service. As such, upgrades cannot be done by simply pulling the image. You must first export your recipes, update your deployment, and then import your recipes. This pattern is likely to be how upgrades take place prior to v1.0. After v1.0 migrations will be done automatically. 

docs/docs/changelog/v0.3.0.md

@@ -0,0 +1,29 @@
+# v0.3.0
+
+### Bug Fixes
+  - Fixed open search on `/` when in input. - Closes #174
+  - Error when importing recipe: KeyError: '@type' - Closes #145
+  - Fixed Import Issue - bhg.com - Closes #138
+  - Scraper not working with recipe containing HowToSection - Closes #73
+
+### Features and Improvements
+  - Improved Nextcloud Imports
+  - Improved Recipe Parser!
+  - Open search with `/` hotkey! 
+  - Database and App version are now split
+  - Unified and improved snackbar notifications
+  - New Category/Tag endpoints to filter all recipes by Category or Tag
+  - Category sidebar now has show/hide behavior on mobile
+  - Settings menu on mobile is improved
+  - **Meal Planner**
+    - You can now restrict recipe categories used for random meal-plan creation in the settings menu
+    - Recipe picker dialog will now display recipes when the search bar is empty
+    - Minor UI improvements
+    - **Shopping lists!** Shopping list can now be generated from a meal plan. Currently ingredients are split by recipes or there is a beta feature that attempts to sort them by similarity.
+  - **Recipe Viewer**
+    - Categories, Tags, and Notes will now be displayed below the steps on smaller screens
+  - **Recipe Editor**
+    - Text areas now auto grow to fit content
+    - Description, Steps, and Notes support Markdown! This includes inline html in Markdown. 
+  - **Imports**
+    - A revamped dialog has been created to provide more information on restoring backups. Exceptions on the backend are now sent to the frontend and are easily viewable to see what went wrong when you restored a backup. This functionality will be ported over to the migrations in a future release. 

docs/docs/changelog/v0.4.0.md

@@ -0,0 +1,86 @@
+# v0.4.0 Whoa, What a Release!
+
+**App Version: v0.4.0**
+
+**Database Version: v0.4.0**
+
+## Breaking Changes
+
+!!! error "Breaking Changes"
+
+    #### Database
+    A new database will be created. You must export your data and then import it after upgrading.
+
+    #### Site Settings
+    With the addition of group settings and a re-write of the database layer of the application backend, there is no migration path for your current site settings. Webhooks Settings, Meal Plan Categories are now managed by groups. Site settings, mainly homepage settings, are now site specific and managed by administrators. When upgrading be sure to uncheck the settings when importing your old data. 
+
+    #### ENV Variables
+    Names have been changed to be more consistent with industry standards. See the [Installation Page](/mealie/getting-started/install/) for new parameters.  
+
+## Bug Fixes
+- Fixed Search Results Limited to 100 - #198
+- Fixed recipes from marmiton.org not fully scrapped  - #196
+- Fixed Unable to get a page to load - #194
+- Fixed Recipe's from Epicurious don't upload. - #193
+- Fixed Edited blank recipe in meal plan is not saved - #184
+- Fixed Create a new meal plan allows selection of an end date that is prior to the start date - #183
+- Fixed Original URL not saved to imported recipe in 0.3.0-dev - #183
+- Fixed "IndexError: list index out of range" when viewing shopping list for meal plan containing days without a recipe selected - #178
+
+## Features and Improvements
+
+### General
+  - Documentation Rewrite
+  - [New Demo Site!](https://mealie-demo.hay-kot.dev/)
+  - New Documentation
+    - Landing Page
+    - Custom Caddy Configuration
+    - User Management 
+    - Introduction
+  - Updated Documentation
+    - Everything!
+  - The API Reference is now better embedded inside of the docs
+  - New default external port in documentation (Port 9000 -> 9925). This is only the port exposed by the host to the docker image. It doesn't change any existing functionality. 
+
+### User Authentication 
+  - Authentication! Tons of stuff went into creating a flexible authentication platform for a lot of different use cases. Review the documentation for more information on how to use the authentication, and how everything works together. More complex management of recipes and user restrictions are in the works, but this is a great start! Some key features include
+    - Sign Up Links
+    - Admin and User Roles
+    - Password Change
+    - Group Management
+    - Create/Edit/Delete Restrictions
+
+### Custom Pages
+  - You can now create custom pages that are displayed on the homepage sidebar to organize categories of recipes into pages. For example, if you have several categories that encompass "Entrée" you can group all those categories together under the "Entrée" page. See [Building Pages](/mealie/site-administration/building-pages/) for more information.
+!!! tip 
+    Note that this replaces the behavior of automatically adding categories to the sidebar.
+
+### UI Improvements
+  - Completed Redesign of the Admin Panel
+    - Profile Pages
+    - Side Panel Menu
+  - Improved UI for Recipe Search
+  - Language selector is now displayed on all pages and does not require an account
+
+### Recipe Data
+  - Recipe Database Refactoring. Tons of new information is now stored for recipes in the database. Not all is accessible via the UI, but it's coming.
+    - Nutrition Information
+      - calories
+      - fatContent
+      - fiberContent
+      - proteinContent
+      - sodiumContent
+      - sugarContent
+    - recipeCuisine has been added
+    - "categories" has been migrated to "recipeCategory" to adhere closer to the standard schema
+    - "tool" - a list of tools used for the recipe
+
+### Behind the Scenes
+  - Removed CDN dependencies
+  - Database Model Refactoring
+  - Import/Export refactoring
+  - File/Folder Name Refactoring
+  - Development is now easier with a makefile
+  - Mealie is now a proper package using poetry 
+  - Test refactoring
+  - Test Coverage 83% up from 75%!

docs/docs/changelog/v0.4.1.md

@@ -0,0 +1,35 @@
+# v0.4.1
+
+**App Version: v0.4.1**
+
+**Database Version: v0.4.0**
+
+!!! error "Breaking Changes"
+
+    #### Recipe Images
+    While it *shouldn't* be a breaking change, I feel it is important to note that you may experience issues with the new image migration. Recipe images are now minified, this is done on start-up, import, migration, and when a new recipe is created. The initial boot or load may be a bit slow if you have lots of recipes but you likely won't notice. What you may notice is that if your recipe slug and the image name do not match, you will encounter issues with your images showing up. This can be resolved by finding the image directory and rename it to the appropriate slug. I did fix multiple edge cases, but it is likely more exists. As always make a backup before you update! 
+
+    On the plus side, this comes with a huge performance increase! 🎉
+
+- Add markdown support for ingredients - Resolves #32
+- Ingredients editor improvements
+- Fix Tags/Categories render problems on recipes
+- Tags redirect to new tag pages
+- Categories redirect to category pages
+- Fix Backup download blocked by authentication
+- Random meal-planner will no longer duplicate recipes unless no other options
+- New Quick Week button to generate next 5 day week of recipe slots.
+- Minor UI tweaks
+- Recipe Cards now display 2 recipe tags
+- Recipe images are now minified. This comes with a serious performance improvement. On initial startup you may experience some delays. Images are migrated to the new structure on startup, depending on the size of your database this can take some time. 
+    - Note that original images are still kept for large displays like on the individual recipe pages.
+    - A smaller image is used for recipe cards
+    - A 'tiny' image is used for search images. 
+- Advanced Search Page. You can now use the search page to filter recipes to include/exclude tags and categories as well as select And/Or matching criteria. 
+- Added link to advanced search on quick search
+- Better support for NextCloud imports
+    - Translate keywords to tags
+    - Fix rollback on failure
+- Recipe Tag/Category Input components have been unified and now share a single way to interact. To add a new category in the recipe editor you need to click to '+' icon next to the input and fill out the form. This is the same for adding a Tag. 
+
+

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

@@ -1,8 +1,5 @@
 # Contributing to Mealie
 
-!!! 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. 
-
 [Please Join the Discord](https://discord.gg/R6QDyJgbD2). We are building a community of developers working on the project.
 
 ## We Develop with Github

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

@@ -3,27 +3,36 @@
 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. 
+Prerequisites
 
-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.
+- Docker
+- docker-compose
 
+You can easily start the development stack by running `make docker-dev` in the root of the project directory. This will run and build the docker-compose.dev.yml file. 
 
 ## Without Docker
 Prerequisites
 
-- Python 3.8+
+- Python 3.9+
 - Poetry
 - Nodejs
 - npm
 
-change directories into the mealie directory and run poetry install. cd into the frontend directory and run npm install. After installing dependencies, you can use vscode tasks to run the front and backend server. Use the command pallette to access the tasks. 
+Once the prerequisites are installed you can cd into the project base directory and run `make setup` to install the python and node dependencies. Once that is complete you can run `make backend` and `make vue` to start the backend and frontend servers. 
+
+## Make File Reference 
+`make setup` installs python and node dependencies
+
+`make backend` Starts the backend server on port `9000`
+
+`make vue` Starts the frontend server on port `8080`
+
+`make mdocs` Starts the documentation server on port `8000`
+
+`make docker-dev` Builds docker-compose.dev.yml 
+
+`make docker-prod` Builds docker-compose.yml to test for production
 
-Alternatively you can run `npm run serve` in the frontend directory and `python app.py` in the mealie directory to get everything up and running for development. 
 
 ## Trouble Shooting
 

docs/docs/contributors/non-coders.md

@@ -7,7 +7,7 @@ We love your input! We want to make contributing to this project as easy and tra
 - Submitting a fix
 - Proposing new features
 - Becoming a maintainer
-- [Help translate to a new language or improve current translations](../translating)
+- Help translate to a new language or improve current translations
 
 [Remember to join the Discord and stay in touch with other developers working on the project](https://discord.gg/R6QDyJgbD2)! 
 

docs/docs/contributors/translating.md

@@ -1,15 +1,16 @@
-# Contributing with translations
+# 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.
+Mealie supports a framework for the community to contribute different translations. Translations can be a great way for non-coders to contribute to project.
 
-## Is Mealie missing in your language?
+## My Language Is Missing
 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
+## 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/api-usage.md

@@ -0,0 +1,103 @@
+# 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](../assets/gifs/api-extras.gif)
+
+
+## Examples
+### Bulk import
+Recipes can be imported in bulk from a file containing a list of URLs. This can be done using the following bash or python scripts with the `list` file containing one URL per line.
+
+#### Bash
+```bash
+#!/bin/bash
+
+function authentification () {
+  auth=$(curl -X 'POST' \
+    "$3/api/auth/token" \
+    -H 'accept: application/json' \
+    -H 'Content-Type: application/x-www-form-urlencoded' \
+    -d 'grant_type=&username='$1'&password='$2'&scope=&client_id=&client_secret=')
+
+    echo $auth |  sed -e 's/.*token":"\(.*\)",.*/\1/'
+}
+
+function import_from_file () {
+  while IFS= read -r line
+  do
+    echo $line
+    curl -X 'POST' \
+      "$3/api/recipes/create-url" \
+      -H "Authorization: Bearer $2" \
+      -H 'accept: application/json' \
+      -H 'Content-Type: application/json' \
+      -d '{"url": "'$line'" }'
+    echo
+  done < "$1"
+}
+
+input="list"
+mail="changeme@email.com"
+password="MyPassword"
+mealie_url=http://localhost:9000
+
+
+token=$(authentification $mail $password $mealie_url)
+import_from_file $input $token $mealie_url
+
+```
+
+#### Python
+```python
+import requests
+import re
+
+def authentification(mail, password, mealie_url):
+  headers = {
+    'accept': 'application/json',
+    'Content-Type': 'application/x-www-form-urlencoded',
+  }
+  data = {
+    'grant_type': '',
+    'username': mail,
+    'password': password,
+    'scope': '',
+    'client_id': '',
+    'client_secret': ''
+  }
+  auth = requests.post(mealie_url + "/api/auth/token", headers=headers, data=data)
+  token = re.sub(r'.*token":"(.*)",.*', r'\1', auth.text)
+  return token
+
+def import_from_file(input_file, token, mealie_url):
+  with open(input_file) as fp:
+    for l in fp:
+      line = re.sub(r'(.*)\n', r'\1', l)
+      print(line)
+      headers = {
+        'Authorization': "Bearer " + token,
+        'accept': 'application/json',
+        'Content-Type': 'application/json'
+      }
+      data = {
+        'url': line
+      }
+      response = requests.post(mealie_url + "/api/recipes/create-url", headers=headers, json=data)
+      print(response.text)
+
+input_file="list"
+mail="changeme@email.com"
+password="MyPassword"
+mealie_url="http://localhost:9000"
+
+
+token = authentification(mail, password, mealie_url)
+import_from_file(input_file, token, mealie_url)
+```
+
+Have Ideas? Submit a PR!

docs/docs/getting-started/install.md

@@ -4,23 +4,32 @@ To deploy docker on your local network it is highly recommended to use docker to
 
 [Get Docker](https://docs.docker.com/get-docker/)
 
-[Mealie Docker Image](https://hub.docker.com/r/hkotel/mealie)
+[Mealie on Dockerhub](https://hub.docker.com/r/hkotel/mealie) 
+
+ - linux/amd64 
+ - linux/arm/v7
+ - linux/arm64
 
 
 ## 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!
+Deployment with the Docker CLI can be done with `docker run` and specify the database type, in this case `sqlite`, setting the exposed port `9925`, mounting the current directory, and pull the latest image. After the image is up an running you can navigate to http://your.ip.addres:9925 and you'll should see mealie up and running!
 
 ```shell
 docker run \
-    -e db_type='sqlite' \
-    -p 9000:80 \
+    -e DB_TYPE='sqlite' \
+    -p 9925:80 \
     -v `pwd`:'/app/data/' \
     hkotel/mealie:latest
 
 ```
 
+!!! tip "Default Credentials"
+    **Username:** changeme@email.com 
+
+    **Password:** MyPassword
+
 ## 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. 
+Deployment with docker-compose is the recommended method for deployment. The example below will create an instance of mealie available on port `9925` 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"
@@ -30,9 +39,9 @@ services:
     image: hkotel/mealie:latest
     restart: always
     ports:
-      - 9000:80
+      - 9925:80
     environment:
-      db_type: sqlite
+      DB_TYPE: sqlite
       TZ: America/Anchorage
     volumes:
       - ./mealie/data/:/app/data
@@ -41,13 +50,71 @@ services:
 
 ## Env Variables
 
-| Variables   | default | description                                                                                                                                             |
-| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| db_type     | sqlite  | The database type to be used. Current Options 'sqlite'                                                                                                  |
-| 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. |
-| api_docs    | True    | Turns on/off access to the API documentation locally.                                                                                                   |
-| TZ          | UTC     | You should set your time zone accordingly so the date/time features work correctly                                                                      |
+| Variables        | Default    | Description                                                                         |
+| ---------------- | ---------- | ----------------------------------------------------------------------------------- |
+| DB_TYPE          | sqlite     | The database type to be used. Current Options 'sqlite'                              |
+| DEFAULT_GROUP    | Home       | The default group for users                                                         |
+| DEFAULT_PASSWORD | MyPassword | The default password for all users created in Mealie                                |
+| API_PORT         | 9000       | The port exposed by backend API. **do not change this if you're running in docker** |
+| API_DOCS         | True       | Turns on/off access to the API documentation locally.                               |
+| TZ               | UTC        | Must be set to get correct date/time on the server                                  |
 
 
-## Deployed as a Python Application
-Alternatively, this project is built on Python and SQLite. If you are dead set on deploying on a linux machine you can run this in an python virtual env. 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. 
+
+
+## Advanced 
+!!! warning "Not Required"
+    The items below are completely optional and are not required to manage or install your Mealie instance. 
+
+### Custom Caddy File
+The Docker image provided by Mealie contains both the API and the html bundle in one convenient image. This is done by using a proxy server to serve different parts of the application depending on the URL/URI. Requests sent to `/api/*` or `/docs` will be directed to the API, anything else will be served the static web files. Below is the default Caddyfile that is used to proxy requests. You can override this file by mounting an alternative Caddyfile to `/app/Caddyfile`. 
+
+```
+{
+  auto_https off
+  admin off
+}
+
+:80 {
+  @proxied path /api/* /docs /openapi.json
+
+  root * /app/dist
+  encode gzip
+  uri strip_suffix /
+  
+  handle @proxied {
+    reverse_proxy http://127.0.0.1:9000 
+  }
+
+  handle {
+    try_files {path}.html {path} /
+    file_server 
+  }
+
+}
+```
+
+## Deployed without Docker
+!!! error "Unsupported Deployment"
+    If you are experiencing a problem with manual deployment, please do not submit a github issue unless it is related to an aspect of the application. For deployment help, the [discord server](https://discord.gg/R6QDyJgbD2) is a better place to find support. 
+
+Alternatively, this project is built on Python and SQLite so you may run it as a python application on your server. This is not a supported options for deployment and is only here as a reference for those who would like to do this on their own. To get started you can clone this repository into a directory of your choice and use the instructions below as a reference for how to get started. 
+
+There are three parts to the Mealie application
+
+- Frontend/Static Files
+- Backend API
+- Proxy Server
+
+### Frontend/ Static Files
+The frontend static files are generated with `npm run build`. This is done during the build process with docker. If you choose to deploy this as a system application you must do this process yourself. In the project directory run `cd frontend` to change directories into the frontend directory and run `npm install` and then `npm run build`. This will generate the static files in a `dist` folder in the frontend directory.
+
+### Backend API
+The backend API is build with Python, FastAPI, and SQLite and requires Python 3.9, and Poetry. Once the requirements are installed, in the project directory you can run the command `poetry install` to create a python virtual environment and install the python dependencies.
+
+Once the dependencies are installed you should be ready to run the server. To initialize that database you need to first run	`python mealie/db/init_db.py`. Then to start The web server, you run the command `uvicorn mealie.app:app --host 0.0.0.0 --port 9000`
+
+
+### Proxy Server
+You must use a proxy server to server up the static files created with `npm run build` and proxy requests to the API. In the docker build this is done with Caddy. You can use the CaddyFile in the section above as a reference. One important thing to keep in mind is that you should drop any trailing `/` in the url. Not doing this may result in failed API requests. 
+

docs/docs/getting-started/introduction.md

@@ -0,0 +1,71 @@
+# About The Project
+
+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 an API for interactions from 3rd party applications. 
+
+[Remember to join the Discord](https://discord.gg/R6QDyJgbD2)! 
+
+!!! note
+    In some of the demo gifs the styling may be different than the finale application. demos were done during development prior to finale styling.
+
+!!! warning
+    This is a **BETA** release and that means things may break and or change down the line. I'll do my best to make sure that any API changes are thoughtful and necessary in order not to break things. Additionally, I'll do my best to provide a migration path if the database schema ever changes. Do not use programs like watchtower to auto update your container. You **WILL** run into issues if you do this,
+
+
+## Key Features
+- 🔍 Fuzzy search
+- 🏷️ Tag recipes with categories or tags to flexible sorting
+- 🕸 Import recipes from around the web by URL
+- 📱 Beautiful Mobile Views
+- 📆 Create Meal Plans
+- 🛒 Generate shopping lists
+- 🐳 Easy setup with Docker
+- 🎨 Customize your interface with color themes layouts
+- 💾 Export all your data in any format with Jinja2 Templates, with easy data restoration from the user interface.
+- 🌍 localized in many languages
+- ➕ Plus tons more!
+    - Flexible API
+        - Custom key/value pairs for recipes
+        - Webhook support
+        - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
+    - Raw JSON Recipe Editor
+    - Migration from other platforms
+        - Chowdown
+        - Nextcloud Cookbook
+    - Random meal plan generation
+
+## FAQ
+
+### Why An API?
+An API allows integration into applications like [Home Assistant](https://www.home-assistant.io/) 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. Additionally, you can access nearly any backend service via the API giving you total control to extend the application. To explore the API spin up your server and navigate to http://yourserver.com/docs for interactive API documentation. 
+
+### Why a Database?
+Some users of static-site generator applications like ChowDown have expressed concerns about their data being stuck in a database. Considering this is a new project it is a valid concern to be worried about your data. Mealie specifically addresses this concern by provided automatic daily backups that export your data in json, plain-text markdown files, and/or custom Jinja2 templates. **This puts you in controls of how your data is represented** when exported from Mealie, which means you can easily migrate to any other service provided Mealie doesn't work for you. 
+
+As to why we need a database?
+
+- **Developer Experience:** Without a database a lot of the work to maintain your data is taken on by the developer instead of a battle tested platform for storing data. 
+- **Multi User Support:** With a solid database as backend storage for your data Mealie can better support multi-user sites and avoid read/write access errors when multiple actions are taken at the same time. 
+
+## Built With
+
+* [Vue.js](https://vuejs.org/)
+* [Vuetify](https://vuetifyjs.com/en/)
+* [FastAPI](https://fastapi.tiangolo.com/)
+* [Docker](https://www.docker.com/)
+
+<!-- ROADMAP -->
+## Road Map
+
+[See Roadmap](/roadmap)
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, develop, and create. Any contributions you make are **greatly appreciated**. 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>
+
+

docs/docs/getting-started/ios.md

@@ -0,0 +1,35 @@
+# Using iOS Shortcuts with Mealie
+![](../assets/img/iphone-image.png){: align=right style="height:400px;width:400px"}
+
+
+User  [brasilikum](https://github.com/brasilikum) opened an issue on the main repo about how they had created an [iOS shortcut](https://github.com/hay-kot/mealie/issues/103) for interested users. This is a useful utility for iOS users who browse for recipes in their web browser from their devices.
+
+Don't know what an iOS shortcut is? Neither did I! Experienced iOS users may already be familiar with this utility but for the uninitiated, here is the official Apple explanation:
+
+
+> A shortcut is a quick way to get one or more tasks done with your apps. The Shortcuts app lets you create your own shortcuts with multiple steps. For example, build a “Surf Time” shortcut that grabs the surf report, gives an ETA to the beach, and launches your surf music playlist.
+
+
+Basically it is a visual scripting language that lets a user build an automation in a guided fashion. The automation can be [shared with anyone](https://www.icloud.com/shortcuts/6ae356d5fc644cfa8983a3c90f242fbb) but if it is a user creation, you'll have to jump through a few hoops to make an untrusted automation work on your device. In brasilikum's shortcut, you need to make changes for it to work. Recent updates to the project have changed some of the syntax and folder structure since its original creation.
+
+
+![screenshot](../assets/img/ios-shortcut-image.jpg){: align=right style="height:500;width:400px"}
+
+
+
+!!! tip
+    You may need to change the url depending on which version you're using. Recipe is now plural and there is no trailing "/" at the end of the string.
+    
+    ```
+    api/recipe/create-url/
+    ```
+
+    to
+
+    ```
+    api/recipes/create-url
+    ```
+
+    
+
+Having made those changes, you should now be able to share a website to the shortcut and have mealie grab all the necessary information!

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

@@ -1,11 +1,13 @@
 # Meal Planner
 
 ## Working with Meal Plans
-In Mealie you can create a mealplan based off the calendar inputs on the meal planner page. There is no limit to how long or how short a meal plan is. You may also create duplicate meal plans for the same date range. After selecting your date range, click on the card for each day and search through recipes to find your choice. After selecting a recipe for all meals save the plan. You can also randomly generate meal plans.
+In Mealie you can create a meal plan based off the calendar inputs on the meal planner page. There is no limit to how long or how short a meal plan is. You may also create duplicate meal plans for the same date range. After selecting your date range, click on the card for each day and search through recipes to find your choice. After selecting a recipe for all meals save the plan. You can also randomly generate meal plans.
 
-To edit the meal in a meal plan simply select the edit button on the card in the timeline. Similarly, to delete a mealplan click the delete button on the card in the timeline. Currently there is no support to change the date range in a meal plan.
+To edit the meal in a meal plan simply select the edit button on the card in the timeline. Similarly, to delete a meal plan click the delete button on the card in the timeline. Currently there is no support to change the date range in a meal plan.
 
-!!! warning
-    In coming a future release recipes for meals will be restricted to specific categories. 
 
-![](../gifs/meal-plan-demo-v2.gif)
+## Shopping Lists
+For any meal plan created you can view a breakdown of all the ingredients and use an experimental sort function to sort similarly ingredients. This is a very new feature and results of the auto sort may vary. 
+
+![](../assets/gifs/meal-plan-demo-v2.gif)
+

docs/docs/getting-started/organizing-recipes.md

@@ -0,0 +1,8 @@
+# Organizing Recipes
+
+!!! tip
+    Below is a suggestion of guidelines my wife and I use for organizing our recipes within Mealie. Mealie is fairly flexible, so feel free to utilize how you'd like! 👍
+
+In the diagram below you will see what we came up with using the new custom pages feature. The large circles indicate pages, and the rectangles indicate categories. We've grouped several 'like' categories with each other as a way to quickly find similar items. 
+
+![Mealie Diagram](../../assets/img/MealieDiagram.png)

docs/docs/getting-started/recipes.md

@@ -4,20 +4,15 @@
 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)
-
-
 ## Recipe Editor
 Recipes can be edited and created via the UI. This is done with both a form based approach where you have a UI to work with as well as with a in browser JSON Editor. The JSON editor allows you to easily copy and paste data from other sources. 
 
 You can also add a custom recipe with the UI editor built into the web view.
 
-![](../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)
+![](../assets/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

@@ -1,25 +0,0 @@
-# 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)
-
-## General Settings
-In your site settings page you can select several options to change the layout of your homepage. You can choose to display the recent recipes, how many cards to show for each section, and which category sections to display. You can additionally select which language to use by default. Note the currently homepage settings are saved in your browser. In the future a database entry will be made for site settings so the homepage is consistent across users.
-
-![](../gifs/homepage-settings-v1.gif)
-
-## 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-v2.gif)
-
-!!! note
-    Theme data is stored in localstorage in the browser. Calling "Save colors and apply theme will refresh the local storage with the selected theme as well save the theme to the database. 
-
-
-## Backups 
-Site backups can easily be taken and download from the UI. To import, simply select the backup you'd like to restore and check which items you'd like to import. 
-
-## 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/getting-started/updating.md

@@ -0,0 +1,21 @@
+# Updating Mealie
+
+!!! warning "Read The Release Notes"
+    You MUST read the release notes prior to upgrading your container. Currently Mealie provides no database migrations as doing such would slow down development and hinder major changes that may need to happen prior to v1.0.0. Mealie has a robust backup and restore system for managing your data.
+
+    ### Before Upgrading
+     - Read The Release Notes
+     - Identify Breaking Changes
+     - Create a Backup and Download from the UI
+     - Upgrade
+
+## Backing Up Your Data
+
+[See Backups and Restore Section](/mealie/site-administration/backups-and-exports/) for details on backing up your data
+
+## Docker
+For all setups using Docker the updating process look something like this
+
+- Stop the container using docker-compose down
+- Pull the latest image using docker-compose pull
+- Start the container again using docker-compose up -d

docs/docs/index.md

@@ -1,116 +1,4 @@
-# About The Project
-
-<p align="center">
-  <a href="https://github.com/hay-kot/mealie">
-  </a>
-  <p align="center">
-    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">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>
-
-<!-- ABOUT THE PROJECT -->
-
-![Product Name Screen Shot][product-screenshot]
-
-**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 an API for interactions from 3rd party applications. 
-
-**Why does my recipe manager need an API?** An API allows integration into applications like [Home Assistant](https://www.home-assistant.io/) 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. 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. 
-
-[Remember to join the Discord](https://discord.gg/R6QDyJgbD2)! 
-
-!!! note
-    In some of the demo gifs the styling may be different than the finale application. demos were done during development prior to finale styling.
-
-!!! warning
-    Note that this is a **BETA** release and that means things may break and or change down the line. I'll do my best to make sure that any API changes are thoughtful and necessary in order not to break things. Additionally, I'll do my best to provide a migration path if the database schema ever changes. Do not use programs like watchtower to auto update your container. You **WILL** run into issues if you do this,
-
-
-
-### Main Features
-#### Recipes
-  - Automatic web scrapping for common recipe platforms
-  - UI recipe editor
-  - JSON recipe editor
-  - Additional recipe data
-    - custom notes
-    - ratings
-    - categories and tags
-    - total, cook, and prep time indicators
-  - View recipes by category
-  - Basic fuzzy search
-  - Migration from other platforms
-    - Chowdown
-    - Nextcloud Cookbook
-#### Meal Planner
-  - Random meal plan generation
-
-#### API
-  - The entire application is built on a restful API and can be accessed by the user
-  - Scheduled Webhooks
-  - Interactive API Documentation thanks to [FastAPI](https://fastapi.tiangolo.com/) and [Swagger](https://petstore.swagger.io/)
-  - Custom "API Extras" in recipes for custom key/value pairs to extendable API uses
-  
-#### Database Import / Export
-  - Easily import / export your recipes from the UI
-  - Export recipes in any format for universal access using Jinja2
-    - Use the default or a custom jinja2 template
-
-### Built With
-
-* [Vue.js](https://vuejs.org/)
-* [Vuetify](https://vuetifyjs.com/en/)
-* [FastAPI](https://fastapi.tiangolo.com/)
-* [Docker](https://www.docker.com/)
-
-
-
-<!-- ROADMAP -->
-## Road Map
-
-[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. 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>
-
-<!-- LICENSE -->
-## License
-
-Distributed under the MIT License. See `LICENSE` for more information.
-
-
-<!-- CONTACT -->
-## Contact
-Project Link: [https://github.com/hay-kot/mealie](https://github.com/hay-kot/mealie)
-
-
-
-<!-- ACKNOWLEDGEMENTS -->
-## Acknowledgements
-
-* [Talk Python Training for helping me learn python](https://training.talkpython.fm/)
-* [Academind for helping me learn Javascript and Vue.js](https://academind.com/)
-
-
-<!-- MARKDOWN LINKS & IMAGES -->
-[product-screenshot]: img/home_screenshot.png
+---
+title: Home
+template: home.html
+---

docs/docs/overrides/home.html

@@ -0,0 +1,355 @@
+<!-- Custom HTML site displayed as the Home chapter -->
+
+{% extends "main.html" %}
+{% block tabs %}
+{{ super() }}
+<style>
+
+.md-main {
+        flex-grow: 0
+    }
+
+    .md-main__inner {
+        display: flex;
+        height: 100%;
+    }
+
+    .tx-container {
+        padding-top: .0rem;
+    }
+
+    .tx-hero {
+        margin: 12px 2.8rem;
+        justify-content: center;
+    }
+
+    .tx-hero h1 {
+        margin-bottom: 1rem;
+        font-family: "Roboto";
+        color: var(--md-custom-h2-color);
+        font-weight: 500
+    }
+
+    .tx-hero__content {
+        padding-bottom: 1rem;
+        margin: 0 auto;
+    }
+
+    .tx-hero__image{
+
+        order:1;
+        padding-right: 2.5rem;
+    }
+
+    .tx-hero .md-button {
+        margin-top: .5rem;
+        margin-right: .5rem;
+        color: var(--md-primary-fg-color)
+    }
+
+    .tx-hero .md-button--primary {
+        background-color: var(--md-primary--color);
+        border-color: var(--md-primary-bg-color)
+    }
+
+    .tx-hero .md-button:focus,
+    .tx-hero .md-button:hover {
+        background-color: var(--md-accent-fg-color);
+        color: var(--md-default-bg-color);
+        border-color: var(--md-accent-fg-color)
+    }
+
+    .feature-item h2 svg {
+        height: 30px;
+        float: left;
+        margin-right: 10px;
+        transform: translateY(10%);
+    }
+
+    .feature-container {
+        background-color: var(--md-default-accent-bg-color);
+    }
+
+    .top-hr {
+        margin-top: 42px;
+        margin-bottom: 42px;
+    }
+
+    .feature-item {
+        font-family: 'Lato', sans-serif;
+        font-weight: 300;
+        box-sizing: border-box;
+        padding: 0 15px;
+        word-break: break-word
+    }
+
+    .feature-item h2 {
+        color: var(--md-custom-h2-color);
+        font-weight: 300;
+        font-size: 25px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: normal;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        font-family: inherit;
+    }
+
+    .feature-item p {
+        font-size: 16px;
+        line-height: 1.8em;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        color: var(--webkit-print-color-adjust);
+        margin: 0 0 10px;
+        display: block;
+    }
+
+    @media screen and (max-width:30em) {
+        .tx-hero h1 {
+            font-size: 1.4rem
+        }
+    }
+
+    @media screen and (min-width:60em) {
+        .md-sidebar--secondary {
+            display: none
+        }
+
+        .tx-hero {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .tx-hero__content {
+            max-width: 22rem;
+            margin-top: 3.5rem;
+            margin-bottom: 3.5rem;
+            margin-left: 1.0rem;
+            margin-right: 4.0rem;
+            align-items: center;
+        }
+    }
+
+    @media screen and (min-width:76.25em) {
+        .md-sidebar--primary {
+            display: none
+        }
+
+        .top-hr {
+            width: 100%;
+            display: flex;
+            max-width: 61rem;
+            margin-right: auto;
+            margin-left: auto;
+            padding: 0 .2rem;
+        }
+
+        .bottom-hr {
+            margin-top: 10px;
+            width: 100%;
+            display: flex;
+            max-width: 61rem;
+            margin-right: auto;
+            margin-left: auto;
+            padding: 0 .2rem;
+        }
+
+        .feature-item {
+            flex: 1;
+            min-width: 0;
+        }
+    }
+
+    .hr {
+        border-bottom: 1px solid #eee;
+        width: 100%;
+        margin: 20px 0;
+    }
+
+    .text-center {
+        text-align: center;
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;
+        margin-top: 15px;
+        font-family: 'Lato', sans-serif;
+        font-size: 23px;
+        font-weight: 300;
+        padding-bottom: 10px;
+    }
+
+    .logos {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-flow: row wrap;
+        margin: 0 auto;
+    }
+
+    .logos img {
+        flex: 1 1 auto;
+        padding: 25px;
+        max-height: 130px;
+        vertical-align: middle;
+    }
+
+    .hr-logos {
+        margin-top: 0;
+        margin-bottom: 30px;
+    }
+
+    .md-footer-meta__inner {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-top: 1.0rem;
+    }
+
+    .md-footer-social {
+        padding-top: 20px;
+    }
+</style>
+
+<!-- Main site Entry button descriptions -->
+<section class="tx-container">
+    <div class="md-grid md-typeset">
+      <div class="tx-hero">
+        <div class="tx-hero__image">
+          <img src="assets/img/home_screenshot.png" draggable="false">
+        </div>
+        <div class="tx-hero__content">
+          <h1> 
+            Mealie 
+        </h1>
+          <p>
+            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.
+          </p>
+          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
+            Get started
+          </a>
+          <a href="{{ config.demo_url }}" title="{{ lang.t('source.link.title') }}" target="_blank" class="md-button">
+            View the Demo
+          </a>
+        </div>
+      </div>
+    </div>
+</section>
+
+<!-- Main site box descriptions -->
+<!-- Row 1 -->
+<section class="feature-container">
+
+<div class="top-hr">
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
+            </svg>
+            Import Recipes
+        </h2>
+        <p>
+            Quickly and easily import recipes from sites around the web using the built in <b>recipe scrapper</b>.
+        </p>
+    </div>
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12,3A9,9 0 0,0 3,12H0L4,16L8,12H5A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19C10.5,19 9.09,18.5 7.94,17.7L6.5,19.14C8.04,20.3 9.94,21 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3M14,12A2,2 0 0,0 12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12Z" />
+            </svg>
+            Automatic Backups
+        </h2>
+        <p>
+            Keep your data safe with automatic backups in any format supported by <b>Jinja2</b> templates
+        </p>
+    </div>
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M19,4C20.11,4 21,4.9 21,6V18A2,2 0 0,1 19,20H5C3.89,20 3,19.1 3,18V6A2,2 0 0,1 5,4H19M19,18V8H5V18H19Z" />
+            </svg>
+            Rich User Interface
+        </h2>
+        <p> Use a beautiful and intuitive user interface to create, edit, and delete recipes. Recipe editor supports <b>markdown syntax</b> </p>
+    </div>
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" />
+            </svg>
+            Meal Planner
+        </h2>
+        <p>Create Meal Plans for the week, month, or year! </p>
+    </div>
+</div>
+<!-- Row 2 -->
+
+<div class="top-hr">
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
+            </svg>
+            Users
+        </h2>
+        <p>
+            Add new users with sign-up links or simply create a new user in the admin panel. 
+        </p>
+    </div>
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" />
+            </svg>
+            Groups
+        </h2>
+        <p>
+            Sort users into groups to share recipes with the whole family, but keep your Meal Plans separate.
+        </p>
+    </div>
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M10.46,19C9,21.07 6.15,21.59 4.09,20.15C2.04,18.71 1.56,15.84 3,13.75C3.87,12.5 5.21,11.83 6.58,11.77L6.63,13.2C5.72,13.27 4.84,13.74 4.27,14.56C3.27,16 3.58,17.94 4.95,18.91C6.33,19.87 8.26,19.5 9.26,18.07C9.57,17.62 9.75,17.13 9.82,16.63V15.62L15.4,15.58L15.47,15.47C16,14.55 17.15,14.23 18.05,14.75C18.95,15.27 19.26,16.43 18.73,17.35C18.2,18.26 17.04,18.58 16.14,18.06C15.73,17.83 15.44,17.46 15.31,17.04L11.24,17.06C11.13,17.73 10.87,18.38 10.46,19M17.74,11.86C20.27,12.17 22.07,14.44 21.76,16.93C21.45,19.43 19.15,21.2 16.62,20.89C15.13,20.71 13.9,19.86 13.19,18.68L14.43,17.96C14.92,18.73 15.75,19.28 16.75,19.41C18.5,19.62 20.05,18.43 20.26,16.76C20.47,15.09 19.23,13.56 17.5,13.35C16.96,13.29 16.44,13.36 15.97,13.53L15.12,13.97L12.54,9.2H12.32C11.26,9.16 10.44,8.29 10.47,7.25C10.5,6.21 11.4,5.4 12.45,5.44C13.5,5.5 14.33,6.35 14.3,7.39C14.28,7.83 14.11,8.23 13.84,8.54L15.74,12.05C16.36,11.85 17.04,11.78 17.74,11.86M8.25,9.14C7.25,6.79 8.31,4.1 10.62,3.12C12.94,2.14 15.62,3.25 16.62,5.6C17.21,6.97 17.09,8.47 16.42,9.67L15.18,8.95C15.6,8.14 15.67,7.15 15.27,6.22C14.59,4.62 12.78,3.85 11.23,4.5C9.67,5.16 8.97,7 9.65,8.6C9.93,9.26 10.4,9.77 10.97,10.11L11.36,10.32L8.29,15.31C8.32,15.36 8.36,15.42 8.39,15.5C8.88,16.41 8.54,17.56 7.62,18.05C6.71,18.54 5.56,18.18 5.06,17.24C4.57,16.31 4.91,15.16 5.83,14.67C6.22,14.46 6.65,14.41 7.06,14.5L9.37,10.73C8.9,10.3 8.5,9.76 8.25,9.14Z" />
+            </svg>
+            Webhooks
+        </h2>
+        <p> Schedule webhooks to send notifications to 3rd party services with todays Meal Plan data. </p>
+    </div>
+    <div class="feature-item">
+        <h2>
+            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M7 7H5A2 2 0 0 0 3 9V17H5V13H7V17H9V9A2 2 0 0 0 7 7M7 11H5V9H7M14 7H10V17H12V13H14A2 2 0 0 0 16 11V9A2 2 0 0 0 14 7M14 11H12V9H14M20 9V15H21V17H17V15H18V9H17V7H21V9Z" />
+            </svg>
+            Open API
+        </h2>
+        <p> <b>API Driven</b> application gives you full control of the backend server with interactive documentation</p>
+    </div>
+</div>
+</section>
+
+
+<!-- Custom narrow footer -->
+<div class="md-footer-meta__inner md-grid">
+    <div class="md-footer-social">
+    <a class="md-footer-social__link" href="https://github.com/hay-kot/mealie" rel="noopener" target="_blank" title="github.com">
+        <svg viewBox="0 0 480 512" xmlns="http://www.w3.org/2000/svg"><path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"></path></svg>
+    </a>
+    <a class="md-footer-social__link" href="https://twitter.com/kot_hay" rel="noopener" target="_blank" title="twitter.com">
+        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
+    </a>
+    <a class="md-footer-social__link" href="https://www.linkedin.com/in/hay-kot" rel="noopener" target="_blank" title="www.linkedin.com">
+        <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>
+    </a>
+
+    </div>
+</div>
+
+{% endblock %}
+{% block content %}{% endblock %}
+{% block footer %}{% endblock %}

docs/docs/roadmap.md

@@ -1,4 +1,7 @@
 # Development Road Map
 
+## Feature Requests
+See the [Github META issue for tracking feature requests](https://github.com/hay-kot/mealie/issues/122)
 
-See the [Github META issue for tracking the Road Map](https://github.com/hay-kot/mealie/issues/122)
+## Progress 
+See the [Github Projects](https://github.com/hay-kot/mealie/projects) to see what is currently being worked on

docs/docs/site-administration/backups-and-exports.md

@@ -2,13 +2,56 @@
 
 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 available variables, open a recipe in the json editor.
+!!! 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). Prior to upgrading you **should** perform a backup to limit any data loss.
 
-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. 
+!!! tip "Mealie data that is saved on backups"
+    - [x] Recipe Data
+    - [ ] Meal Plan
+    - [x] Site Settings
+    - [x] Custom Pages
+    - [x] User Data
+    - [x] Group Data
 
-![](../gifs/backup-demo-v1.gif)
+To create an export simply add the tag and the markdown template and click "Create" and your backup will be created on the server. The backup is a standard zipfile containing all the images, json files, and rendered jinaj2 templates for each recipe. To view the available variables, open a recipe in the json editor.
 
-## Custom Templating
+To import a backup it must be in your backups folder. If it is in the backup folder it will automatically show up as a source to restore from. Selected the desired backup and import the backup file. Backups can be uploaded from the UI as well as added on the file system
+
+## Demo
+
+![](../assets/gifs/backup-demo-v1.gif)
+
+## API Examples
+You can use the API to create and retrieve backups remotely from any server that can access the Mealie instance. This is useful for easily managing off-site backups via cron-job or other scheduled tasks. You can find interactive documentation for your API at https://your-mealie-instance.com/docs
+
+### curl Example
+Create a backup with curl
+```bash
+curl -X 'POST' \
+  'http://localhost:9000/api/backups/export/database' \
+  -H 'accept: application/json' \
+  -H 'Content-Type: application/json' \
+  -d '{
+  "tag": "July 23rd 2021",
+  "options": {
+    "recipes": true,
+    "settings": true,
+    "themes": true
+  },
+  "template": [
+    "recipes.md"
+  ]
+}'
+```
+
+### wget Example
+Download a backup with `wget`
+```bash
+wget http://localhost:9000/api/backups/{file_name}/download
+```
+
+
+## Jinja2 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

docs/docs/site-administration/building-pages.md

@@ -0,0 +1,11 @@
+# Building Pages
+
+!!! warning
+    The page building is still experimental and may change. You can provide feedback on any changes you'd like to see on [github](https://github.com/hay-kot/mealie/discussions/229)
+
+Custom pages can be created to organize multiple categories into a single page. Links to your custom pages are displayed on the home page sidebar and accessible by all users, however only Administrators can create or update pages. 
+
+To create a new page. Navigate to the settings page at `/admin/settings` and scroll down to the custom pages section. Here you can create, view, and edit your custom pages. To reorder how they are displayed on the sidebar you can drag and drop the pages into the preferred order.
+
+!!! tip
+    To save the order of pages you must click the save button displayed on the bottom of the Custom Page section. This is not necessary for updating individual page data. 

docs/docs/site-administration/migration-imports.md

@@ -1,7 +1,8 @@
 # Migration
 
 ## Chowdown
-To migrate recipes from a Chowdown 
+To migrate recipes from a Chowdown
+ 
   1. Download the code repository as a .zip file
   2. Upload the .zip file in the Chowdown section in Mealie
   3. Select import on the newly available migration. 

docs/docs/site-administration/site-settings.md

@@ -0,0 +1,18 @@
+# Site Settings 
+Your sites settings panel can only be accessed by administrators. This where you can customize your site for all users. 
+
+
+## Home Page Settings
+| Option             | Description                                                    |
+| ------------------ | -------------------------------------------------------------- |
+| Language           | The default site language                                      |
+| Show Recent        | To display the recent recipes section on the home page         |
+| Card Per Section   | The amount of cards displayed in each section on the home page |
+| Home Page Sections | Category sections to include on the home page                  |
+
+![Site Settings Image](../assets/img/site-settings.png)
+
+
+
+
+

docs/docs/site-administration/user-management.md

@@ -0,0 +1,86 @@
+# User Managemenet
+
+As of version v0.4.0 users have limited functionality, but they will offer more permissions and structure as time goes on. To understand the different systems, see each section below. Note, that by default all users will be assigned the default group. If you're only managing one household you won't need to do anything to set up a new group.
+
+!!! summary "Users and Groups"
+    === ":fontawesome-solid-user-cog: Admins"
+
+        Mealie admins are super users that have access to all user data (excluding passwords). All admins can perform administrative tasks like adding users, resetting user passwords, backing up the database, migrating data, and managing site settings. 
+
+        **Admins Can**
+        
+        - All User Actions
+        - Adjust Site Settings
+        - Create and Update Users
+        - Create and Update Groups
+        - Generate User Sign-up Links
+        - Migrate Data from other Services
+        - Backup Site Data
+
+    === ":fontawesome-solid-user: Users"
+
+        A single user created by an Admin that has basic privileges to edit their profile, create and edit recipes.
+
+        **Users Can**
+
+        - Manage Their Profile
+        - Create, Edit, and Update Recipes
+        - Create, Edit, and Update Mealplans *(By Group)*
+        - Set Mealplan Categories
+        - Create and Schedule Webhooks *(By Group)*
+
+    === ":fontawesome-solid-users: Groups"
+
+        User groups are a collection of users that are associated together. Typically used for separate households sharing a single instance.
+        
+        **Groups Share**
+
+        - Mealplans
+        - Mealplan Settings
+        - Webhooks 
+
+!!! warning
+    As of v0.4.0 any authenticated user is able to perform any action on the backend server through the API. To limit a standard users scope, the pages on the frontend are limited. Proper support for permission structures on the backend API will come in a later version. 
+
+
+## Startup
+On the first startup you'll need to login to Mealie using the default username and password `changeme@email.com` and `MyPassword` or the default set through the env variable. On first login you'll be required to reset your password. After resetting your password you should also change your email address as appropriate. This will be used for logins on all future requests. 
+
+!!! tip 
+    Your default password environmental variable will be the default password for all new users that are created. This is stored in plain text and should not be used **any where** else.
+    
+
+## Creating and Editing Users
+There are two ways to create users in Mealie. 
+
+### Manually Creating a User
+In the Manage Users section you are able to create a user by providing the necessary information in the pop-up dialog. 
+
+![Create User Image](../assets/img/add-user.png){: align=right style="height:50%;width:50%"}
+
+- User Name
+- Email
+- User Group
+- If they are an Admin
+
+
+When creating users manually, their password will be set from the default assigned by the ENV variable.
+
+### Sign Up Links
+You can generate sign-up links in the Manage Users section. Select the "create link" button and provide the name of the link and if the user will be an administrator. Once a link is created it will populate in the table where you'll be able to see all active links, delete a link, and copy the link as needed. 
+
+![Sign Up Links Image](../assets/img/sign-up-links.png)
+
+!!! tip 
+    When a link is used it is automatically removed from the database.
+
+## Creating Groups
+You can easily create and manage groups via the frontend in the admin panel under "Manage Users". Navigate to the groups tab and you'll find a "create group" button as well as a list of all groups in your database. To create a group, select the "create group" button and provide a name for the new group. Once created you can now assign users to the new group.
+
+![Group Management Panel](../assets/img/group-manager.png)
+
+!!! tip
+    User Groups can only be deleted if no users are apart of the group. If you want to delete a group, you must assign the users to another group before removing. 
+
+## Password Reset
+If a user forgets their password an administrator is able to reset their password through the user management page. In the user table, select edit. In the popup windows click the "Reset Password" to reset a users password to the default. This is either 'MyPassword' or set through an environment variable. See the [Installation Page](/mealie/getting-started/install/) for more details on environmental variables 

docs/docs/site-administration/user-settings.md

@@ -0,0 +1,25 @@
+# User Settings
+
+A user will be able to access 3 sections in their admin panel. The user profile, themes, group/meal-plan settings section. 
+
+## Profile Settings
+In as users profile they are able to
+
+- Change Display Name
+- Change Email
+- Update Password
+- View Their Group
+- Upgrade Profile Picture (Experimental)
+
+## Themes
+Color themes can be created and set from the UI in the users 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.
+
+![](../assets/gifs/theme-demo-v2.gif)
+
+!!! tip
+    Theme data is stored in local storage in the browser. Calling "Save colors and apply theme will refresh the local storage with the selected theme as well save the theme to the database. 
+
+## Group & Meal Plan
+In the meal planner section a user can select categories to be used as apart of the random recipe selector in the meal plan creator. If no categories are selected, all recipes will be used
+
+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" prior to any changes taking affect server side. 

docs/docs/stylesheets/custom.css

@@ -1,8 +0,0 @@
-:root {
-  --md-primary-fg-color: #e58325;
-  --md-primary-fg-color--light: #e58325;
-  --md-primary-fg-color--dark: #e58325;
-  --md-accent-fg-color: #e58325;
-  --md-accent-fg-color--light: #e58325;
-  --md-accent-fg-color--dark: #e58325;
-}

docs/mkdocs.yml

@@ -1,9 +1,28 @@
-site_name: Mealie Docs
-
+site_name: Mealie
+demo_url: https://mealie-demo.hay-kot.dev/
 theme:
+  palette:
+    # Light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: mealie
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
+  custom_dir: docs/overrides
   features:
+    - navigation.top
+    - navigation.instant
     - navigation.expand
-  favicon: img/favicon.png
+    - navigation.sections
+    - navigation.tabs
+    - navigation.tabs.sticky
+  favicon: assets/img/favicon.png
   name: material
   icon:
     logo: material/silverware-variant
@@ -18,24 +37,34 @@ markdown_extensions:
   - pymdownx.tasklist:
       custom_checkbox: true
   - admonition
+  - attr_list
+  - pymdownx.tabbed
+  - pymdownx.superfences
 
 extra_css:
-  - stylesheets/custom.css
+  - assets/stylesheets/custom.css
 repo_url: https://github.com/hay-kot/mealie
 repo_name: hay-kot/mealie
 
 nav:
-  - About The Project: "index.md"
+  - Home: "index.md"
   - Getting Started:
+      - Introduction: "getting-started/introduction.md"
       - Installation: "getting-started/install.md"
+      - Updating: "getting-started/updating.md"
       - Working With Recipes: "getting-started/recipes.md"
+      - Organizing Recipes: "getting-started/organizing-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"
+      - iOS Shortcuts: "getting-started/ios.md"
+      - API Usage: "getting-started/api-usage.md"
+      - Site Administration:
+          - User Settings: "site-administration/user-settings.md"
+          - Site Settings: "site-administration/site-settings.md"
+          - Building Pages: "site-administration/building-pages.md"
+          - User Management: "site-administration/user-management.md"
+          - Backups and Restore: "site-administration/backups-and-exports.md"
+          - Recipe Migration: "site-administration/migration-imports.md"
+  - API Reference: "api/redoc.md"
   - Contributors Guide:
       - Non-Code: "contributors/non-coders.md"
       - Translating: "contributors/translating.md"
@@ -44,4 +73,9 @@ nav:
           - 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"
+  - Change Log:
+      - v0.4.1 Frontend/UI: "changelog/v0.4.1.md"
+      - v0.4.0 Authentication: "changelog/v0.4.0.md"
+      - v0.3.0 Improvements: "changelog/v0.3.0.md"
+      - v0.2.0 Now With Tests!: "changelog/v0.2.0.md"
+      - v0.1.0 Beta: "changelog/v0.1.0.md"

frontend/frontend.Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-alpine
+FROM node:latest
 
 # # install simple http server for serving static content
 # RUN npm install -g http-server

frontend/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

frontend/package.json

@@ -9,35 +9,38 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@adapttive/vue-markdown": "^3.0.3",
+    "@adapttive/vue-markdown": "^4.0.1",
     "@smartweb/vue-flash-message": "^0.6.10",
     "axios": "^0.21.1",
-    "core-js": "^3.8.2",
+    "core-js": "^3.9.1",
+    "fast-levenshtein": "^3.0.0",
     "fuse.js": "^6.4.6",
     "qs": "^6.9.6",
+    "typeface-roboto": "^1.1.13",
     "v-jsoneditor": "^1.4.2",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.22.4",
-    "vue-router": "^3.4.9",
+    "vue-i18n": "^8.24.1",
+    "vue-router": "^3.5.1",
     "vuedraggable": "^2.24.3",
-    "vuetify": "^2.4.2",
-    "vuex": "^3.6.0",
+    "vuetify": "^2.4.6",
+    "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
-    "@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",
+    "@intlify/vue-i18n-loader": "^1.1.0",
+    "@mdi/font": "^5.9.55",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.32.4",
-    "sass-loader": "^8.0.0",
+    "sass": "^1.32.8",
+    "sass-loader": "^8.0.2",
     "vue-cli-plugin-i18n": "~1.0.1",
-    "vue-cli-plugin-vuetify": "^2.0.8",
+    "vue-cli-plugin-vuetify": "^2.2.2",
     "vue-template-compiler": "^2.6.11",
-    "vuetify-loader": "^1.3.0"
+    "vuetify-loader": "^1.7.2"
   },
   "eslintConfig": {
     "root": true,

frontend/public/index.html

@@ -6,9 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title> Mealie </title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-    <link rel="stylesheet" href="./styles/global.css">
+    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> -->
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> -->
   </head>
   <body>
     <noscript>

frontend/public/styles/global.css

@@ -1,11 +0,0 @@
-*::-webkit-scrollbar {
-  width: 0.25rem;
-}
-
-*::-webkit-scrollbar-track {
-  background: lightgray;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: grey;
-}

frontend/src/App.vue

@@ -1,87 +1,69 @@
 <template>
   <v-app>
-    <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
-      <router-link to="/">
-        <v-btn icon>
-          <v-icon size="40"> mdi-silverware-variant </v-icon>
-        </v-btn>
-      </router-link>
-
-      <div btn class="pl-2">
-        <v-toolbar-title style="cursor: pointer" @click="$router.push('/')"
-          >Mealie
-        </v-toolbar-title>
-      </div>
-
-      <v-spacer></v-spacer>
-      <v-expand-x-transition>
-        <SearchBar
-          ref="mainSearchBar"
-          class="mt-7"
-          v-if="search"
-          :show-results="true"
-          @selected="navigateFromSearch"
-        />
-      </v-expand-x-transition>
-      <v-btn icon @click="search = !search">
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <Menu />
-    </v-app-bar>
+    <TheAppBar />
     <v-main>
-      <v-container>
-        <AddRecipeFab />
-        <SnackBar />
-        <router-view></router-view>
-      </v-container>
-      <FlashMessage :position="'right bottom'"></FlashMessage>
+      <v-banner v-if="demo" sticky
+        ><div class="text-center">
+          <b> This is a Demo</b> | Username: changeme@email.com | Password: demo
+        </div></v-banner
+      >
+
+      <v-slide-x-reverse-transition>
+        <AddRecipeFab v-if="loggedIn" />
+      </v-slide-x-reverse-transition>
+      <router-view></router-view>
     </v-main>
+    <FlashMessage :position="'right bottom'"></FlashMessage>
   </v-app>
 </template>
 
 <script>
-import Menu from "./components/UI/Menu";
-import SearchBar from "./components/UI/SearchBar";
-import AddRecipeFab from "./components/UI/AddRecipeFab";
-import SnackBar from "./components/UI/SnackBar";
+import TheAppBar from "@/components/UI/TheAppBar";
+import AddRecipeFab from "@/components/UI/AddRecipeFab";
 import Vuetify from "./plugins/vuetify";
+import { user } from "@/mixins/user";
+
 export default {
   name: "App",
 
   components: {
-    Menu,
+    TheAppBar,
     AddRecipeFab,
-    SnackBar,
-    SearchBar,
   },
 
-  watch: {
-    $route() {
-      this.search = false;
+  mixins: [user],
+
+  computed: {
+    demo() {
+      const appInfo = this.$store.getters.getAppInfo;
+      return appInfo.demoStatus;
     },
   },
+
   created() {
     window.addEventListener("keyup", e => {
-      if (e.key == "/") {
+      if (e.key == "/" && !document.activeElement.id.startsWith("input")) {
         this.search = !this.search;
       }
     });
+    this.$store.dispatch("initLang", { currentVueComponent: this });
   },
 
-  mounted() {
+  async mounted() {
     this.$store.dispatch("initTheme");
     this.$store.dispatch("requestRecentRecipes");
-    this.$store.dispatch("requestHomePageSettings");
-    this.$store.dispatch("initLang");
+    this.$store.dispatch("refreshToken");
+    this.$store.dispatch("requestCurrentGroup");
+    this.$store.dispatch("requestCategories");
+    this.$store.dispatch("requestTags");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();
+    this.$store.dispatch("requestAppInfo");
   },
 
-  data: () => ({
-    search: false,
-  }),
   methods: {
+    // For Later!
+
     /**
      * Checks if 'system' is set for dark mode and then sets the corrisponding value for vuetify
      */
@@ -100,9 +82,6 @@ export default {
         this.darkModeSystemCheck();
       });
     },
-    navigateFromSearch(slug) {
-      this.$router.push(`/recipe/${slug}`);
-    },
   },
 };
 </script>
@@ -134,8 +113,21 @@ export default {
 
 .notify-base {
   color: white !important;
+  /* min-height: 50px; */
   margin-right: 60px;
   margin-bottom: -5px;
   opacity: 0.9 !important;
 }
+
+*::-webkit-scrollbar {
+  width: 0.25rem;
+}
+
+*::-webkit-scrollbar-track {
+  background: lightgray;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: grey;
+}
 </style>

frontend/src/api.js

@@ -1,23 +0,0 @@
-import backup from "./api/backup";
-import recipe from "./api/recipe";
-import mealplan from "./api/mealplan";
-import settings from "./api/settings";
-import themes from "./api/themes";
-import migration from "./api/migration";
-import myUtils from "./api/upload";
-import category from "./api/category";
-import meta from "./api/meta";
-
-// import api from "@/api";
-
-export default {
-  recipes: recipe,
-  backups: backup,
-  mealPlans: mealplan,
-  settings: settings,
-  themes: themes,
-  migrations: migration,
-  utils: myUtils,
-  categories: category,
-  meta: meta,
-};

frontend/src/api/api-utils.js

@@ -1,6 +1,11 @@
 const baseURL = "/api/";
 import axios from "axios";
 import utils from "@/utils";
+import { store } from "../store";
+
+axios.defaults.headers.common[
+  "Authorization"
+] = `Bearer ${store.getters.getToken}`;
 
 function processResponse(response) {
   try {
@@ -42,7 +47,7 @@ const apiReq = {
         return response;
       } else return;
     });
-    // processResponse(response);
+    processResponse(response);
     return response;
   },
 
@@ -58,5 +63,7 @@ const apiReq = {
   },
 };
 
+
+
 export { apiReq };
 export { baseURL };

frontend/src/api/backup.js

@@ -1,6 +1,6 @@
 import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
-import { store } from "../store/store";
+import { store } from "@/store";
 
 const backupBase = baseURL + "backups/";
 
@@ -8,31 +8,52 @@ const backupURLs = {
   // Backup
   available: `${backupBase}available`,
   createBackup: `${backupBase}export/database`,
-  importBackup: (fileName) => `${backupBase}${fileName}/import`,
-  deleteBackup: (fileName) => `${backupBase}${fileName}/delete`,
-  downloadBackup: (fileName) => `${backupBase}${fileName}/download`,
+  importBackup: fileName => `${backupBase}${fileName}/import`,
+  deleteBackup: fileName => `${backupBase}${fileName}/delete`,
+  downloadBackup: fileName => `${backupBase}${fileName}/download`,
 };
 
-export default {
+export const backupAPI = {
+  /**
+   * Request all backups available on the server
+   * @returns {Array} List of Available Backups
+   */
   async requestAvailable() {
     let response = await apiReq.get(backupURLs.available);
     return response.data;
   },
-
+  /**
+   * Calls for importing a file on the server
+   * @param {string} fileName
+   * @param {object} data
+   * @returns A report containing status of imported items
+   */
   async import(fileName, data) {
     let response = await apiReq.post(backupURLs.importBackup(fileName), data);
     store.dispatch("requestRecentRecipes");
     return response;
   },
-
+  /**
+   * Removes a file from the server
+   * @param {string} fileName
+   */
   async delete(fileName) {
     await apiReq.delete(backupURLs.deleteBackup(fileName));
   },
-
-  async create(data) {
-    let response = apiReq.post(backupURLs.createBackup, data);
+  /**
+   * Creates a backup on the serve given a set of options
+   * @param {object} data
+   * @returns 
+   */
+  async create(options) {
+    let response = apiReq.post(backupURLs.createBackup, options);
     return response;
   },
+  /**
+   * Downloads a file from the server. I don't actually think this is used? 
+   * @param {string} fileName 
+   * @returns Download URL
+   */
   async download(fileName) {
     let response = await apiReq.get(backupURLs.downloadBackup(fileName));
     return response.data;

frontend/src/api/category.js

@@ -1,25 +1,61 @@
 import { baseURL } from "./api-utils";
 import { apiReq } from "./api-utils";
+import { store } from "@/store";
 
 const prefix = baseURL + "categories";
 
 const categoryURLs = {
-  get_all: `${prefix}`,
-  get_category: (category) => `${prefix}/${category}`,
-  delete_category: (category) => `${prefix}/${category}`,
+  getAll: `${prefix}`,
+  getCategory: category => `${prefix}/${category}`,
+  deleteCategory: category => `${prefix}/${category}`,
 };
 
-export default {
-  async get_all() {
-    let response = await apiReq.get(categoryURLs.get_all);
+export const categoryAPI = {
+  async getAll() {
+    let response = await apiReq.get(categoryURLs.getAll);
     return response.data;
   },
-  async get_recipes_in_category(category) {
-    let response = await apiReq.get(categoryURLs.get_category(category));
+  async create(name) {
+    let response = await apiReq.post(categoryURLs.getAll, { name: name });
+    store.dispatch("requestCategories");
+    return response.data;
+  },
+  async getRecipesInCategory(category) {
+    let response = await apiReq.get(categoryURLs.getCategory(category));
     return response.data;
   },
   async delete(category) {
-    let response = await apiReq.delete(categoryURLs.delete_category(category));
+    let response = await apiReq.delete(categoryURLs.deleteCategory(category));
+    store.dispatch("requestCategories");
+    return response.data;
+  },
+};
+
+const tagPrefix = baseURL + "tags";
+
+const tagURLs = {
+  getAll: `${tagPrefix}`,
+  getTag: tag => `${tagPrefix}/${tag}`,
+  deleteTag: tag => `${tagPrefix}/${tag}`,
+};
+
+export const tagAPI = {
+  async getAll() {
+    let response = await apiReq.get(tagURLs.getAll);
+    return response.data;
+  },
+  async create(name) {
+    let response = await apiReq.post(tagURLs.getAll, { name: name });
+    store.dispatch("requestTags");
+    return response.data;
+  },
+  async getRecipesInTag(tag) {
+    let response = await apiReq.get(tagURLs.getTag(tag));
+    return response.data;
+  },
+  async delete(tag) {
+    let response = await apiReq.delete(tagURLs.deleteTag(tag));
+    store.dispatch("requestTags");
     return response.data;
   },
 };

frontend/src/api/groups.js

@@ -0,0 +1,34 @@
+import { baseURL } from "./api-utils";
+import { apiReq } from "./api-utils";
+const groupPrefix = baseURL + "groups";
+
+const groupsURLs = {
+  groups: `${groupPrefix}`,
+  create: `${groupPrefix}`,
+  delete: id => `${groupPrefix}/${id}`,
+  current: `${groupPrefix}/self`,
+  update: id => `${groupPrefix}/${id}`,
+};
+
+export const groupAPI = {
+  async allGroups() {
+    let response = await apiReq.get(groupsURLs.groups);
+    return response.data;
+  },
+  async create(name) {
+    let response = await apiReq.post(groupsURLs.create, { name: name });
+    return response.data;
+  },
+  async delete(id) {
+    let response = await apiReq.delete(groupsURLs.delete(id));
+    return response.data;
+  },
+  async current() {
+    let response = await apiReq.get(groupsURLs.current);
+    return response.data;
+  },
+  async update(data) {
+    let response = await apiReq.put(groupsURLs.update(data.id), data);
+    return response.data;
+  },
+};

frontend/src/api/index.js

@@ -0,0 +1,33 @@
+import { backupAPI } from "./backup";
+import { recipeAPI } from "./recipe";
+import { mealplanAPI } from "./mealplan";
+import { settingsAPI } from "./settings";
+import { themeAPI } from "./themes";
+import { migrationAPI } from "./migration";
+import { utilsAPI } from "./upload";
+import { categoryAPI, tagAPI } from "./category";
+import { metaAPI } from "./meta";
+import { userAPI } from "./users";
+import { signupAPI } from "./signUps";
+import { groupAPI } from "./groups";
+import { siteSettingsAPI } from "./siteSettings";
+
+/**
+ * The main object namespace for interacting with the backend database
+ */
+export const api = {
+  recipes: recipeAPI,
+  siteSettings: siteSettingsAPI,
+  backups: backupAPI,
+  mealPlans: mealplanAPI,
+  settings: settingsAPI,
+  themes: themeAPI,
+  migrations: migrationAPI,
+  utils: utilsAPI,
+  categories: categoryAPI,
+  tags: tagAPI,
+  meta: metaAPI,
+  users: userAPI,
+  signUps: signupAPI,
+  groups: groupAPI,
+};

frontend/src/api/mealplan.js

@@ -8,12 +8,13 @@ const mealPlanURLs = {
   all: `${prefix}all`,
   create: `${prefix}create`,
   thisWeek: `${prefix}this-week`,
-  update: (planID) => `${prefix}${planID}`,
-  delete: (planID) => `${prefix}${planID}`,
+  update: planID => `${prefix}${planID}`,
+  delete: planID => `${prefix}${planID}`,
   today: `${prefix}today`,
+  shopping: planID => `${prefix}${planID}/shopping-list`,
 };
 
-export default {
+export const mealplanAPI = {
   async create(postBody) {
     let response = await apiReq.post(mealPlanURLs.create, postBody);
     return response;
@@ -43,4 +44,9 @@ export default {
     let response = await apiReq.put(mealPlanURLs.update(id), body);
     return response;
   },
+
+  async shoppingList(id) {
+    let response = await apiReq.get(mealPlanURLs.shopping(id));
+    return response.data;
+  },
 };