fix recipe static routes

frontend/Dockerfile

@@ -4,17 +4,6 @@ WORKDIR /app
 
 COPY . .
 
-# Install Caddy
-RUN apt-get update \
-    && apt-get install --no-install-recommends -y \
-    curl \
-    apt-transport-https \
-    && curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | apt-key add - \
-    && curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list \
-    && apt-get update \
-    && apt-get install --no-install-recommends -y \
-    caddy 
-
 RUN yarn install \
   --prefer-offline \
   --frozen-lockfile \
@@ -35,13 +24,9 @@ FROM node:15-alpine
 WORKDIR /app
 
 # copying caddy into image
-COPY --from=builder /usr/bin/caddy /usr/bin/caddy
-COPY ./Caddyfile /app
 COPY --from=builder /app  .
 
 ENV HOST 0.0.0.0
 EXPOSE 3000
 
-RUN ["caddy", "start", "--config", "/app/Caddyfile"]
-
 CMD [ "yarn", "start" ]

frontend/components/Domain/Recipe/RecipeCardImage.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { useStaticRoutes } from "~/composables/api";
 import { useApiSingleton } from "~/composables/use-api";
 export default {
   props: {
@@ -53,7 +54,9 @@ export default {
   setup() {
     const api = useApiSingleton();
 
-    return { api };
+    const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
+
+    return { api, recipeImage, recipeSmallImage, recipeTinyImage };
   },
   data() {
     return {
@@ -77,11 +80,11 @@ export default {
     getImage(slug) {
       switch (this.imageSize) {
         case "tiny":
-          return this.api.recipes.recipeTinyImage(slug, this.imageVersion);
+          return this.recipeTinyImage(slug, this.imageVersion);
         case "small":
-          return this.api.recipes.recipeSmallImage(slug, this.imageVersion);
+          return this.recipeSmallImage(slug, this.imageVersion);
         case "large":
-          return this.api.recipes.recipeImage(slug, this.imageVersion);
+          return this.recipeImage(slug, this.imageVersion);
       }
     },
   },

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="recipes">
+  <div>
     <v-app-bar v-if="!disableToolbar" color="transparent" flat class="mt-n1 flex-sm-wrap rounded">
       <v-icon v-if="title" large left>
         {{ displayTitleIcon }}
@@ -139,7 +139,7 @@ export default {
     },
     recipes: {
       type: Array,
-      required: true,
+      default: () => [],
     },
   },
   data() {

frontend/composables/api/index.ts

@@ -0,0 +1 @@
+export { useStaticRoutes } from "./static-routes";

frontend/composables/api/static-routes.ts

@@ -0,0 +1,31 @@
+import { useContext } from "@nuxtjs/composition-api";
+
+export const useStaticRoutes = () => {
+  const { $config } = useContext();
+
+  const prefix = `${$config.SUB_PATH}/api`.replace("//", "/");
+
+  // Methods to Generate reference urls for assets/images *
+  function recipeImage(recipeSlug: string, version = null, key = null) {
+    return `${prefix}/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
+  }
+
+  function recipeSmallImage(recipeSlug: string, version = null, key = null) {
+    return `${prefix}/media/recipes/${recipeSlug}/images/min-original.webp?&rnd=${key}&version=${version}`;
+  }
+
+  function recipeTinyImage(recipeSlug: string, version = null, key = null) {
+    return `${prefix}/media/recipes/${recipeSlug}/images/tiny-original.webp?&rnd=${key}&version=${version}`;
+  }
+
+  function recipeAssetPath(recipeSlug: string, assetName: string) {
+    return `${prefix}/media/recipes/${recipeSlug}/assets/${assetName}`;
+  }
+
+  return {
+    recipeImage,
+    recipeSmallImage,
+    recipeTinyImage,
+    recipeAssetPath,
+  };
+};

frontend/layouts/default.vue

@@ -28,7 +28,7 @@ import AppFloatingButton from "@/components/Layout/AppFloatingButton.vue";
 export default defineComponent({
   components: { AppHeader, AppSidebar, AppFloatingButton },
   // @ts-ignore
-  middleware: process.env.GLOBAL_MIDDLEWARE,
+  // middleware: process.env.GLOBAL_MIDDLEWARE,
   setup() {
     return {};
   },

frontend/nuxt.config.js

@@ -198,6 +198,7 @@ export default {
   publicRuntimeConfig: {
     GLOBAL_MIDDLEWARE: process.env.GLOBAL_MIDDLEWARE || null,
     ALLOW_SIGNUP: process.env.ALLOW_SIGNUP || true,
+    SUB_PATH: process.env.SUB_PATH || "",
     axios: {
       browserBaseURL: process.env.SUB_PATH || "",
     },
@@ -208,9 +209,9 @@ export default {
   proxy: {
     // "http://localhost:9000/*/api",
     // See Proxy section
-    [`${process.env.SUB_PATH}api`]: {
+    [`${process.env.SUB_PATH || ""}api`]: {
       pathRewrite: {
-        [`${process.env.SUB_PATH}api`]: "/api", // rewrite path
+        [`${process.env.SUB_PATH || ""}api`]: "/api", // rewrite path
       },
       changeOrigin: true,
       target: process.env.API_URL || "http://localhost:9000",
@@ -268,7 +269,7 @@ export default {
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     // https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build
-    analyze: true,
+    analyze: process.env.NODE_ENV !== "production",
     babel: {
       plugins: [["@babel/plugin-proposal-private-property-in-object", { loose: true }]],
     },

frontend/pages/index.vue

@@ -1,7 +1,6 @@
 <template>
   <v-container>
     <RecipeCardSection
-      v-if="recentRecipes"
       :icon="$globals.icons.primary"
       :title="$t('general.recent')"
       :recipes="recentRecipes"
@@ -13,12 +12,15 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useRecipes, recentRecipes } from "~/composables/use-recipes";
+import { useStaticRoutes } from "~/composables/api";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
     const { assignSorted } = useRecipes(false);
 
+    useStaticRoutes();
+
     return { recentRecipes, assignSorted };
   },
 });

frontend/pages/recipe/_slug.vue

@@ -33,7 +33,7 @@
           :key="imageKey"
           :max-width="recipe.settings.landscapeView ? null : '50%'"
           :height="hideImage ? '50' : imageHeight"
-          :src="api.recipes.recipeImage(recipe.slug, imageKey)"
+          :src="recipeImage(recipe.slug, imageKey)"
           class="d-print-none"
           @error="hideImage = true"
         >
@@ -183,6 +183,7 @@ import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
 import RecipeImageUploadBtn from "~/components/Domain/Recipe/RecipeImageUploadBtn.vue";
 import RecipeSettingsMenu from "~/components/Domain/Recipe/RecipeSettingsMenu.vue";
 import { Recipe } from "~/types/api-types/admin";
+import { useStaticRoutes } from "~/composables/api";
 
 export default defineComponent({
   components: {
@@ -208,6 +209,8 @@ export default defineComponent({
 
     const { getBySlug, loading } = useRecipeContext();
 
+    const { recipeImage } = useStaticRoutes();
+
     const recipe = getBySlug(slug);
 
     const form = ref<boolean>(false);
@@ -250,6 +253,7 @@ export default defineComponent({
       updateRecipe,
       uploadImage,
       validators,
+      recipeImage,
     };
   },
   data() {

frontend/pages/recipes/all.vue

@@ -1,7 +1,6 @@
 <template>
   <v-container>
     <RecipeCardSection
-      v-if="allRecipes"
       :icon="$globals.icons.primary"
       :title="$t('page.all-recipes')"
       :recipes="allRecipes"

frontend/pages/recipes/categories/_slug.vue

@@ -1,7 +1,6 @@
 <template>
   <v-container>
     <RecipeCardSection
-      v-if="category"
       :icon="$globals.icons.tags"
       :title="category.name"
       :recipes="category.recipes"