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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * changelog v0.4.1 * bug/backup-download (#245) * fix blocked download * + download blocked Co-authored-by: hay-kot <[email protected]> * 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 <[email protected]> * Nextcloud Import Bugs - #248 (#250) * parses datetime properly + clean category - #248 * add default credentials to docs Co-authored-by: hay-kot <[email protected]> * 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 <[email protected]> * env setup fixes * Feature/about api (#253) * fix settings * app info cleanup Co-authored-by: hay-kot <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * add pillow dependencies (#258) Co-authored-by: hay-kot <[email protected]> * 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 <[email protected]> * 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 <[email protected]> * bug-fixes/category-tag-creator (#266) * fix category labels * set loader for migration * v0.4.1 Co-authored-by: hay-kot <[email protected]> Co-authored-by: hay-kot <[email protected]> Co-authored-by: Nat <[email protected]> Co-authored-by: sephrat <[email protected]>
mealie-recipes · Apr 8, 2021 · 9c379df · 9c379df
1 parent b8cddfd
commit 9c379df
Show file tree

Hide file tree

Showing 89 changed files with 1,996 additions and 705 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -7,14 +7,25 @@ RUN npm run build
 
 FROM python:3.9-alpine
 
-RUN apk add --no-cache libxml2-dev libxslt-dev libxml2 caddy libffi-dev
-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/
 
 COPY ./pyproject.toml /app/
 
-
 RUN apk add --update --no-cache --virtual .build-deps \
     curl \
     g++ \

diff --git a/Dockerfile.dev b/Dockerfile.dev
@@ -12,10 +12,11 @@ RUN curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-
     poetry config virtualenvs.create false
 
 # Copy poetry.lock* in case it doesn't exist in the repo
-COPY ./pyproject.toml ./poetry.lock* /app/
-
-RUN poetry install 
+COPY ./pyproject.toml /app/
 
 COPY ./mealie /app/mealie
 
-CMD ["uvicorn", "mealie.app:app", "--host", "0.0.0.0", "--port", "9000", "--reload"]
+RUN poetry install 
+
+RUN chmod +x /app/mealie/run.sh
+CMD ["/app/mealie/run.sh", "reload"]
diff --git a/dev/data/templates/recipes.md b/dev/data/templates/recipes.md
@@ -1,6 +1,6 @@
 
 
-![Recipe Image](../../images/{{ recipe.image }})
+![Recipe Image](../../images/{{ recipe.slug }}/original.jpg)
 
 # {{ recipe.name }}
 {{ recipe.description }}

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -29,8 +29,8 @@ 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:

diff --git a/docs/docs/changelog/v0.4.1.md b/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. 
+
+
diff --git a/docs/docs/getting-started/api-usage.md b/docs/docs/getting-started/api-usage.md
@@ -10,5 +10,94 @@ For example you could add `{"message": "Remember to thaw the chicken"}` to a rec
 
 
 ## 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.
 
-Have Ideas? Submit a PR!
+#### 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="[email protected]"
+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="[email protected]"
+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!
diff --git a/docs/docs/getting-started/install.md b/docs/docs/getting-started/install.md
@@ -23,6 +23,11 @@ docker run \
 
 ```
 
+!!! tip "Default Credentials"
+    **Username:** [email protected] 
+
+    **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 `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. 
 

diff --git a/docs/docs/overrides/api.html b/docs/docs/overrides/api.html
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -74,6 +74,7 @@ nav:
           - Guidelines: "contributors/developers-guide/general-guidelines.md"
   - Development Road Map: "roadmap.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"

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,35 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
-      <router-link v-if="!(isMobile && search)" to="/">
-        <v-btn icon>
-          <v-icon size="40"> mdi-silverware-variant </v-icon>
-        </v-btn>
-      </router-link>
-
-      <div v-if="!isMobile" 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"
-          v-if="search"
-          :show-results="true"
-          @selected="navigateFromSearch"
-          :max-width="isMobile ? '100%' : '450px'"
-        />
-      </v-expand-x-transition>
-      <v-btn icon @click="search = !search">
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
-
-      <SiteMenu />
-      <LanguageMenu />
-    </v-app-bar>
+    <TheAppBar />
     <v-main>
       <v-banner v-if="demo" sticky
         ><div class="text-center">
@@ -47,34 +18,25 @@
 </template>
 
 <script>
-import SiteMenu from "@/components/UI/SiteMenu";
-import SearchBar from "@/components/UI/Search/SearchBar";
+import TheAppBar from "@/components/UI/TheAppBar";
 import AddRecipeFab from "@/components/UI/AddRecipeFab";
-import LanguageMenu from "@/components/UI/LanguageMenu";
 import Vuetify from "./plugins/vuetify";
 import { user } from "@/mixins/user";
-import { api } from "./api";
 
 export default {
   name: "App",
 
   components: {
-    SiteMenu,
+    TheAppBar,
     AddRecipeFab,
-    SearchBar,
-    LanguageMenu,
   },
 
   mixins: [user],
 
-  watch: {
-    $route() {
-      this.search = false;
-    },
-  },
   computed: {
-    isMobile() {
-      return this.$vuetify.breakpoint.name === "xs";
+    demo() {
+      const appInfo = this.$store.getters.getAppInfo;
+      return appInfo.demoStatus;
     },
   },
 
@@ -96,15 +58,9 @@ export default {
     this.$store.dispatch("requestTags");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();
-
-    const api_status = await api.meta.getIsDemo();
-    this.demo = api_status.demoStatus;
+    this.$store.dispatch("requestAppInfo");
   },
 
-  data: () => ({
-    search: false,
-    demo: false,
-  }),
   methods: {
     // For Later!
 
@@ -126,9 +82,6 @@ export default {
         this.darkModeSystemCheck();
       });
     },
-    navigateFromSearch(slug) {
-      this.$router.push(`/recipe/${slug}`);
-    },
   },
 };
 </script>
@@ -160,6 +113,7 @@ export default {
 
 .notify-base {
   color: white !important;
+  /* min-height: 50px; */
   margin-right: 60px;
   margin-bottom: -5px;
   opacity: 0.9 !important;
@@ -176,11 +130,4 @@ export default {
 *::-webkit-scrollbar-thumb {
   background: grey;
 }
-
-.notify-base {
-  color: white !important;
-  margin-right: 60px;
-  margin-bottom: -5px;
-  opacity: 0.9 !important;
-}
 </style>
diff --git a/frontend/src/api/category.js b/frontend/src/api/category.js
@@ -5,27 +5,27 @@ 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 const categoryAPI = {
   async getAll() {
-    let response = await apiReq.get(categoryURLs.get_all);
+    let response = await apiReq.get(categoryURLs.getAll);
     return response.data;
   },
   async create(name) {
-    let response = await apiReq.post(categoryURLs.get_all, { name: 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.get_category(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;
   },
@@ -44,6 +44,11 @@ export const tagAPI = {
     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;