From 18b2c92a762afb91507a3e9ba89dc6b742c4a4a8 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 28 Aug 2022 20:08:33 -0800
Subject: [PATCH] feat: public recipe access (#1610)

* initial public explorer API endpoint

* public API endpoint

* cleanup recipe page

* wip: init explorer page

* use public URLs for shared recipes

* refactor private share tokens to use shared page
---
 .../api/class-interfaces/recipes/recipe.ts    |  16 +-
 frontend/api/public-api.ts                    |   6 +
 frontend/api/public/explore.ts                |  14 +
 frontend/api/public/shared.ts                 |  14 +
 .../Domain/Recipe/RecipeActionMenu.vue        |  53 +--
 .../components/Domain/Recipe/RecipeCard.vue   |   1 +
 .../Domain/Recipe/RecipeCardMobile.vue        |   1 +
 .../Domain/Recipe/RecipeContextMenu.vue       |  44 +-
 .../Domain/Recipe/RecipeDialogShare.vue       |   3 +-
 .../Domain/Recipe/RecipePage/RecipePage.vue   |   7 +-
 .../RecipePageParts/RecipePageHeader.vue      |  20 +-
 .../RecipePageIngredientToolsView.vue         |  15 +-
 .../composables/recipes/use-recipe-meta.ts    |  10 +-
 frontend/composables/use-copy.ts              |  16 +-
 frontend/lang/messages/en-US.json             |   3 +-
 .../pages/explore/recipes/_groupId/_slug.vue  |  50 +++
 frontend/pages/group/mealplan/planner.vue     |   1 +
 frontend/pages/recipe/_slug/index.vue         |   8 +-
 frontend/pages/shared/recipes/_id.vue         | 400 ++----------------
 mealie/routes/__init__.py                     |  17 +-
 mealie/routes/explore/__init__.py             |   7 +
 .../explore/controller_public_recipes.py      |  25 ++
 mealie/routes/recipe/shared_routes.py         |   5 +-
 .../public_recipe_tests.py                    |  62 +++
 24 files changed, 361 insertions(+), 437 deletions(-)
 create mode 100644 frontend/api/public/explore.ts
 create mode 100644 frontend/api/public/shared.ts
 create mode 100644 frontend/pages/explore/recipes/_groupId/_slug.vue
 create mode 100644 mealie/routes/explore/__init__.py
 create mode 100644 mealie/routes/explore/controller_public_recipes.py
 create mode 100644 tests/integration_tests/public_explorer_tests/public_recipe_tests.py

diff --git a/frontend/api/class-interfaces/recipes/recipe.ts b/frontend/api/class-interfaces/recipes/recipe.ts
index 957f37675983..2f305b7ff6c7 100644
--- a/frontend/api/class-interfaces/recipes/recipe.ts
+++ b/frontend/api/class-interfaces/recipes/recipe.ts
@@ -2,7 +2,15 @@ import { CommentsApi } from "./recipe-comments";
 import { RecipeShareApi } from "./recipe-share";
 import { BaseCRUDAPI } from "~/api/_base";
 
-import { Recipe, CreateRecipe, RecipeAsset, CreateRecipeByUrlBulk, ParsedIngredient, UpdateImageResponse, RecipeZipTokenResponse } from "~/types/api-types/recipe";
+import {
+  Recipe,
+  CreateRecipe,
+  RecipeAsset,
+  CreateRecipeByUrlBulk,
+  ParsedIngredient,
+  UpdateImageResponse,
+  RecipeZipTokenResponse,
+} from "~/types/api-types/recipe";
 import { ApiRequestInstance } from "~/types/api";
 
 export type Parser = "nlp" | "brute";
@@ -35,8 +43,6 @@ const routes = {
 
   recipesSlugComments: (slug: string) => `${prefix}/recipes/${slug}/comments`,
   recipesSlugCommentsId: (slug: string, id: number) => `${prefix}/recipes/${slug}/comments/${id}`,
-
-  recipeShareToken: (token: string) => `${prefix}/recipes/shared/${token}`,
 };
 
 export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
@@ -110,8 +116,4 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
   getZipRedirectUrl(recipeSlug: string, token: string) {
     return `${routes.recipesRecipeSlugExportZip(recipeSlug)}?token=${token}`;
   }
-
-  async getShared(item_id: string) {
-    return await this.requests.get<Recipe>(routes.recipeShareToken(item_id));
-  }
 }
diff --git a/frontend/api/public-api.ts b/frontend/api/public-api.ts
index d6f691db91f2..584c966f15e8 100644
--- a/frontend/api/public-api.ts
+++ b/frontend/api/public-api.ts
@@ -1,11 +1,17 @@
 import { ValidatorsApi } from "./public/validators";
+import { ExploreApi } from "./public/explore";
+import { SharedApi } from "./public/shared";
 import { ApiRequestInstance } from "~/types/api";
 
 export class PublicApi {
   public validators: ValidatorsApi;
+  public explore: ExploreApi;
+  public shared: SharedApi;
 
   constructor(requests: ApiRequestInstance) {
     this.validators = new ValidatorsApi(requests);
+    this.explore = new ExploreApi(requests);
+    this.shared = new SharedApi(requests);
 
     Object.freeze(this);
   }
diff --git a/frontend/api/public/explore.ts b/frontend/api/public/explore.ts
new file mode 100644
index 000000000000..2ef463e5acaf
--- /dev/null
+++ b/frontend/api/public/explore.ts
@@ -0,0 +1,14 @@
+import { BaseAPI } from "../_base";
+import { Recipe } from "~/types/api-types/recipe";
+
+const prefix = "/api";
+
+const routes = {
+  recipe: (groupId: string, recipeSlug: string) => `${prefix}/explore/recipes/${groupId}/${recipeSlug}`,
+};
+
+export class ExploreApi extends BaseAPI {
+  async recipe(groupId: string, recipeSlug: string) {
+    return await this.requests.get<Recipe>(routes.recipe(groupId, recipeSlug));
+  }
+}
diff --git a/frontend/api/public/shared.ts b/frontend/api/public/shared.ts
new file mode 100644
index 000000000000..dc0b19c430e3
--- /dev/null
+++ b/frontend/api/public/shared.ts
@@ -0,0 +1,14 @@
+import { BaseAPI } from "../_base";
+import { Recipe } from "~/types/api-types/recipe";
+
+const prefix = "/api";
+
+const routes = {
+  recipeShareToken: (token: string) => `${prefix}/recipes/shared/${token}`,
+};
+
+export class SharedApi extends BaseAPI {
+  async getShared(item_id: string) {
+    return await this.requests.get<Recipe>(routes.recipeShareToken(item_id));
+  }
+}
diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 6781ec08213e..3679832f9187 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -21,7 +21,7 @@
 
     <v-spacer></v-spacer>
     <div v-if="!open" class="custom-btn-group ma-1">
-      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="slug" show-always />
+      <RecipeFavoriteBadge v-if="loggedIn" class="mx-1" color="info" button-style :slug="recipe.slug" show-always />
       <v-tooltip v-if="!locked" bottom color="info">
         <template #activator="{ on, attrs }">
           <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('edit', true)">
@@ -39,29 +39,29 @@
         <span> {{ $t("recipe.locked-by-owner") }} </span>
       </v-tooltip>
 
-      <ClientOnly>
-        <RecipeContextMenu
-          show-print
-          :menu-top="false"
-          :name="name"
-          :slug="slug"
-          :menu-icon="$globals.icons.mdiDotsHorizontal"
-          fab
-          color="info"
-          :card-menu="false"
-          :recipe-id="recipeId"
-          :use-items="{
-            delete: false,
-            edit: false,
-            download: true,
-            mealplanner: true,
-            shoppingList: true,
-            print: true,
-            share: true,
-          }"
-          @print="$emit('print')"
-        />
-      </ClientOnly>
+      <RecipeContextMenu
+        show-print
+        :menu-top="false"
+        :name="recipe.name"
+        :group-id="recipe.groupId"
+        :slug="recipe.slug"
+        :menu-icon="$globals.icons.dotsVertical"
+        fab
+        color="info"
+        :card-menu="false"
+        :recipe-id="recipe.id"
+        :use-items="{
+          delete: false,
+          edit: false,
+          download: true,
+          mealplanner: true,
+          shoppingList: true,
+          print: true,
+          share: true,
+          publicUrl: recipe.settings ? recipe.settings.public : false,
+        }"
+        @print="$emit('print')"
+      />
     </div>
     <div v-if="open" class="custom-btn-group mb-">
       <v-btn
@@ -84,6 +84,7 @@
 import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
+import { Recipe } from "~/types/api-types/recipe";
 
 const SAVE_EVENT = "save";
 const DELETE_EVENT = "delete";
@@ -93,6 +94,10 @@ const JSON_EVENT = "json";
 export default defineComponent({
   components: { RecipeContextMenu, RecipeFavoriteBadge },
   props: {
+    recipe: {
+      required: true,
+      type: Object as () => Recipe,
+    },
     slug: {
       required: true,
       type: String,
diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index ec0f66ba3f92..7d239ba39e51 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -50,6 +50,7 @@
                 shoppingList: true,
                 print: false,
                 share: true,
+                publicUrl: false,
               }"
               @delete="$emit('delete', slug)"
             />
diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index ec504ff72eaf..cb0c82695c28 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -49,6 +49,7 @@
                   shoppingList: true,
                   print: false,
                   share: true,
+                  publicUrl: false,
                 }"
                 @deleted="$emit('delete', slug)"
               />
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index df52815a3ef8..a8d2bdc712ce 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -104,6 +104,7 @@ import { planTypeOptions } from "~/composables/use-group-mealplan";
 import { ShoppingListSummary } from "~/types/api-types/group";
 import { PlanEntryType } from "~/types/api-types/meal-plan";
 import { useAxiosDownloader } from "~/composables/api/use-axios-download";
+import { useCopy } from "~/composables/use-copy";
 
 export interface ContextMenuIncludes {
   delete: boolean;
@@ -113,6 +114,7 @@ export interface ContextMenuIncludes {
   shoppingList: boolean;
   print: boolean;
   share: boolean;
+  publicUrl: boolean;
 }
 
 export interface ContextMenuItem {
@@ -137,6 +139,7 @@ export default defineComponent({
         shoppingList: true,
         print: true,
         share: true,
+        publicUrl: false,
       }),
     },
     // Append items are added at the end of the useItems list
@@ -177,6 +180,15 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    /**
+     * Optional group ID prop that is only _required_ when the
+     * public URL is requested. If the public URL button is pressed
+     * and the groupId is not set, an error will be thrown.
+     */
+    groupId: {
+      type: String,
+      default: "",
+    },
   },
   setup(props, context) {
     const api = useUserApi();
@@ -200,47 +212,53 @@ export default defineComponent({
 
     const defaultItems: { [key: string]: ContextMenuItem } = {
       edit: {
-        title: i18n.t("general.edit") as string,
+        title: i18n.tc("general.edit"),
         icon: $globals.icons.edit,
         color: undefined,
         event: "edit",
       },
       delete: {
-        title: i18n.t("general.delete") as string,
+        title: i18n.tc("general.delete"),
         icon: $globals.icons.delete,
         color: "error",
         event: "delete",
       },
       download: {
-        title: i18n.t("general.download") as string,
+        title: i18n.tc("general.download"),
         icon: $globals.icons.download,
         color: undefined,
         event: "download",
       },
       mealplanner: {
-        title: i18n.t("recipe.add-to-plan") as string,
+        title: i18n.tc("recipe.add-to-plan"),
         icon: $globals.icons.calendar,
         color: undefined,
         event: "mealplanner",
       },
       shoppingList: {
-        title: i18n.t("recipe.add-to-list") as string,
+        title: i18n.tc("recipe.add-to-list"),
         icon: $globals.icons.cartCheck,
         color: undefined,
         event: "shoppingList",
       },
       print: {
-        title: i18n.t("general.print") as string,
+        title: i18n.tc("general.print"),
         icon: $globals.icons.printer,
         color: undefined,
         event: "print",
       },
       share: {
-        title: i18n.t("general.share") as string,
+        title: i18n.tc("general.share"),
         icon: $globals.icons.shareVariant,
         color: undefined,
         event: "share",
       },
+      publicUrl: {
+        title: i18n.tc("recipe.public-link"),
+        icon: $globals.icons.contentCopy,
+        color: undefined,
+        event: "publicUrl",
+      },
     };
 
     // Get Default Menu Items Specified in Props
@@ -311,6 +329,8 @@ export default defineComponent({
       }
     }
 
+    const { copyText } = useCopy();
+
     // Note: Print is handled as an event in the parent component
     const eventHandlers: { [key: string]: () => void | Promise<any> } = {
       delete: () => {
@@ -328,6 +348,14 @@ export default defineComponent({
       share: () => {
         state.shareDialog = true;
       },
+      publicUrl: () => {
+        if (!props.groupId) {
+          alert.error("Unknown group ID");
+          console.error("prop `groupId` is required when requesting a public URL");
+          return;
+        }
+        copyText(`${window.location.origin}/explore/recipes/${props.groupId}/${props.slug}`);
+      },
     };
 
     function contextMenuEventHandler(eventKey: string) {
@@ -344,9 +372,9 @@ export default defineComponent({
     }
 
     return {
+      ...toRefs(state),
       shoppingLists,
       addRecipeToList,
-      ...toRefs(state),
       contextMenuEventHandler,
       deleteRecipe,
       addRecipeToPlan,
diff --git a/frontend/components/Domain/Recipe/RecipeDialogShare.vue b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
index 22e20523f1a8..a85d0ed98684 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogShare.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
@@ -134,7 +134,8 @@ export default defineComponent({
       const { data } = await userApi.recipes.share.getAll(1, -1, { recipe_id: props.recipeId });
 
       if (data) {
-        state.tokens = data.items ?? [];
+        // @ts-expect-error - TODO: This routes doesn't have pagination, but the type are mismatched.
+        state.tokens = data ?? [];
       }
     }
 
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 300272ecb6fe..a7667dfbbcd5 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -66,7 +66,7 @@
     </div>
 
     <RecipePageComments
-      v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
+      v-if="user.id && !recipe.settings.disableComments && !isEditForm && !isCookMode"
       :recipe="recipe"
       class="px-1 my-4 d-print-none"
     />
@@ -89,7 +89,7 @@ import RecipePageScale from "./RecipePageParts/RecipePageScale.vue";
 import RecipePageTitleContent from "./RecipePageParts/RecipePageTitleContent.vue";
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
-import { EditorMode, PageMode, usePageState } from "~/composables/recipe-page/shared-state";
+import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/types/api";
 import { Recipe } from "~/types/api-types/recipe";
 import { useRecipeMeta } from "~/composables/recipes";
@@ -270,7 +270,10 @@ export default defineComponent({
     const metaData = useRecipeMeta(ref(props.recipe));
     useMeta(metaData);
 
+    const { user } = usePageUser();
+
     return {
+      user,
       api,
       scale: ref(1),
       EDITOR_OPTIONS,
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
index 37a0f68f3a98..59ecdb1937bb 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
@@ -26,7 +26,7 @@
         :max-width="landscape ? null : '50%'"
         min-height="50"
         :height="hideImage ? undefined : imageHeight"
-        :src="recipeImage(recipe.id, recipe.image, imageKey)"
+        :src="recipeImageUrl"
         class="d-print-none"
         @error="hideImage = true"
       >
@@ -34,6 +34,8 @@
     </div>
     <v-divider></v-divider>
     <RecipeActionMenu
+      v-if="user.id"
+      :recipe="recipe"
       :slug="recipe.slug"
       :locked="user.id !== recipe.userId && recipe.settings.locked"
       :name="recipe.name"
@@ -52,7 +54,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, computed, ref } from "@nuxtjs/composition-api";
+import { defineComponent, useContext, computed, ref, watch } from "@nuxtjs/composition-api";
 import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
 import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
@@ -82,7 +84,7 @@ export default defineComponent({
     const { user } = usePageUser();
 
     function printRecipe() {
-      print();
+      window.print();
     }
 
     const { $vuetify } = useContext();
@@ -92,6 +94,17 @@ export default defineComponent({
       return $vuetify.breakpoint.xs ? "200" : "400";
     });
 
+    const recipeImageUrl = computed(() => {
+      return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
+    });
+
+    watch(
+      () => recipeImageUrl.value,
+      () => {
+        hideImage.value = false;
+      }
+    );
+
     return {
       setMode,
       toggleEditMode,
@@ -106,6 +119,7 @@ export default defineComponent({
       imageHeight,
       hideImage,
       isEditMode,
+      recipeImageUrl,
     };
   },
 });
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
index 2245bfde5dd9..5497d20dd6ce 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
@@ -13,7 +13,7 @@
           hide-details
           class="pt-0 my-auto py-auto"
           color="secondary"
-          @change="toolStore.actions.updateOne(recipe.tools[index])"
+          @change="updateTool(index)"
         >
         </v-checkbox>
         <v-list-item-content>
@@ -26,7 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
-import { usePageState } from "~/composables/recipe-page/shared-state";
+import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
 import { NoUndefinedField } from "~/types/api";
 import { Recipe } from "~/types/api-types/recipe";
@@ -48,12 +48,21 @@ export default defineComponent({
   },
   setup(props) {
     const toolStore = useToolStore();
-
+    const { user } = usePageUser();
     const { isEditMode } = usePageState(props.recipe.slug);
 
+    function updateTool(index: number) {
+      if (user.id) {
+        toolStore.actions.updateOne(props.recipe.tools[index]);
+      } else {
+        console.log("no user, skipping server update");
+      }
+    }
+
     return {
       toolStore,
       isEditMode,
+      updateTool,
     };
   },
 });
diff --git a/frontend/composables/recipes/use-recipe-meta.ts b/frontend/composables/recipes/use-recipe-meta.ts
index d7d9fbfd7286..f8c9400f6425 100644
--- a/frontend/composables/recipes/use-recipe-meta.ts
+++ b/frontend/composables/recipes/use-recipe-meta.ts
@@ -1,7 +1,15 @@
 import { Ref } from "@nuxtjs/composition-api";
 import { Recipe } from "~/types/api-types/recipe";
 
-export const useRecipeMeta = (recipe: Ref<Recipe | null>) => {
+export interface RecipeMeta {
+  title?: string;
+  metaImage?: string;
+  meta: Array<any>;
+  __dangerouslyDisableSanitizers: Array<string>;
+  script: Array<any>;
+}
+
+export const useRecipeMeta = (recipe: Ref<Recipe | null>): (() => RecipeMeta) => {
   return () => {
     const imageURL = "";
     return {
diff --git a/frontend/composables/use-copy.ts b/frontend/composables/use-copy.ts
index e4c126c80296..a7ba919b2429 100644
--- a/frontend/composables/use-copy.ts
+++ b/frontend/composables/use-copy.ts
@@ -1,6 +1,21 @@
 import { useClipboard } from "@vueuse/core";
 import { alert } from "./use-toast";
 
+export function useCopy() {
+  const { copy, copied, isSupported } = useClipboard();
+
+  function copyText(text: string) {
+    if (!isSupported) {
+      alert.error("Clipboard not supported");
+      return;
+    }
+    copy(text);
+    alert.success("Copied to clipboard");
+  }
+
+  return { copyText, copied };
+}
+
 export function useCopyList() {
   const { copy, isSupported } = useClipboard();
 
@@ -46,4 +61,3 @@ export function useCopyList() {
     copyMarkdownCheckList,
   };
 }
-
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 056d1c6516be..faaa0d430a19 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -353,7 +353,8 @@
     "reset-scale": "Reset Scale",
     "decrease-scale-label": "Decrease Scale by 1",
     "increase-scale-label": "Increase Scale by 1",
-    "locked": "Locked"
+    "locked": "Locked",
+    "public-link": "Public Link"
   },
   "search": {
     "advanced-search": "Advanced Search",
diff --git a/frontend/pages/explore/recipes/_groupId/_slug.vue b/frontend/pages/explore/recipes/_groupId/_slug.vue
new file mode 100644
index 000000000000..9de570fa92c2
--- /dev/null
+++ b/frontend/pages/explore/recipes/_groupId/_slug.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <client-only>
+      <RecipePage v-if="recipe" :recipe="recipe" />
+    </client-only>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
+import { usePublicApi } from "~/composables/api/api-client";
+import { useRecipeMeta } from "~/composables/recipes";
+
+export default defineComponent({
+  components: { RecipePage },
+  layout: "basic",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const groupId = route.value.params.groupId;
+    const slug = route.value.params.slug;
+    const api = usePublicApi();
+
+    const { meta, title } = useMeta();
+
+    const recipe = useAsync(async () => {
+      const { data, error } = await api.explore.recipe(groupId, slug);
+
+      if (error) {
+        console.error("error loading recipe -> ", error);
+        router.push("/");
+      }
+
+      if (data) {
+        title.value = data?.name || "";
+        const metaObj = useRecipeMeta(ref(data));
+        meta.value = metaObj().meta;
+      }
+
+      return data;
+    });
+
+    return {
+      recipe,
+    };
+  },
+  head: {},
+});
+</script>
diff --git a/frontend/pages/group/mealplan/planner.vue b/frontend/pages/group/mealplan/planner.vue
index 4fe40ec6fab5..6ef697dd24a4 100644
--- a/frontend/pages/group/mealplan/planner.vue
+++ b/frontend/pages/group/mealplan/planner.vue
@@ -247,6 +247,7 @@
                     print: true,
                     share: false,
                     shoppingList: true,
+                    publicUrl: false,
                   }"
                 />
               </v-card-actions>
diff --git a/frontend/pages/recipe/_slug/index.vue b/frontend/pages/recipe/_slug/index.vue
index 793115ec82f9..594a58a956be 100644
--- a/frontend/pages/recipe/_slug/index.vue
+++ b/frontend/pages/recipe/_slug/index.vue
@@ -7,7 +7,6 @@
 <script lang="ts">
 import { defineComponent, useRoute } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
-import { useUserApi } from "~/composables/api";
 import { useRecipe } from "~/composables/recipes";
 
 export default defineComponent({
@@ -15,18 +14,13 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const slug = route.value.params.slug;
-    const api = useUserApi();
 
-    const { recipe, loading, fetchRecipe } = useRecipe(slug);
+    const { recipe, loading } = useRecipe(slug);
 
     return {
       recipe,
       loading,
-      fetchRecipe,
-      api,
     };
   },
 });
 </script>
-
-<style scoped></style>
diff --git a/frontend/pages/shared/recipes/_id.vue b/frontend/pages/shared/recipes/_id.vue
index a45e90be39a8..c8ad9e74387e 100644
--- a/frontend/pages/shared/recipes/_id.vue
+++ b/frontend/pages/shared/recipes/_id.vue
@@ -1,401 +1,49 @@
 <template>
-  <v-container
-    :class="{
-      'pa-0': $vuetify.breakpoint.smAndDown,
-    }"
-  >
-    <v-card v-if="skeleton" :color="`white ${false ? 'darken-2' : 'lighten-4'}`" class="pa-3">
-      <v-skeleton-loader class="mx-auto" height="700px" type="card"></v-skeleton-loader>
-    </v-card>
-    <v-card v-else-if="recipe" class="d-print-none">
-      <!-- Recipe Header -->
-      <div class="d-flex justify-end flex-wrap align-stretch">
-        <v-card v-if="!enableLandscape" width="50%" flat class="d-flex flex-column justify-center align-center">
-          <v-card-text>
-            <v-card-title class="headline pa-0 flex-column align-center">
-              {{ recipe.name }}
-              <RecipeRating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
-            </v-card-title>
-            <v-divider class="my-2"></v-divider>
-            <SafeMarkdown :source="recipe.description"> </SafeMarkdown>
-            <v-divider></v-divider>
-            <div class="d-flex justify-center mt-5">
-              <RecipeTimeCard
-                class="d-flex justify-center flex-wrap"
-                :class="true ? undefined : 'force-bottom'"
-                :prep-time="recipe.prepTime"
-                :total-time="recipe.totalTime"
-                :perform-time="recipe.performTime"
-              />
-            </div>
-          </v-card-text>
-        </v-card>
-        <v-img
-          :key="imageKey"
-          :max-width="enableLandscape ? null : '50%'"
-          :height="hideImage ? '50' : imageHeight"
-          :src="recipeImage(recipe.id, recipe.image, imageKey)"
-          class="d-print-none"
-          @error="hideImage = true"
-        >
-          <RecipeTimeCard
-            v-if="enableLandscape"
-            :class="true ? undefined : 'force-bottom'"
-            :prep-time="recipe.prepTime"
-            :total-time="recipe.totalTime"
-            :perform-time="recipe.performTime"
-          />
-        </v-img>
-      </div>
-      <v-divider></v-divider>
-
-      <!--  Editors  -->
-      <div>
-        <v-card-text
-          :class="{
-            'px-2': $vuetify.breakpoint.smAndDown,
-          }"
-        >
-          <!-- Recipe Title Section -->
-          <template v-if="!form && enableLandscape">
-            <v-card-title class="pa-0 ma-0 headline">
-              {{ recipe.name }}
-            </v-card-title>
-            <SafeMarkdown :source="recipe.description"> </SafeMarkdown>
-          </template>
-
-          <template v-else-if="form">
-            <v-text-field
-              v-model="recipe.name"
-              class="my-3"
-              :label="$t('recipe.recipe-name')"
-              :rules="[validators.required]"
-            >
-            </v-text-field>
-
-            <div class="d-flex flex-wrap">
-              <v-text-field v-model="recipe.totalTime" class="mx-2" :label="$t('recipe.total-time')"></v-text-field>
-              <v-text-field v-model="recipe.prepTime" class="mx-2" :label="$t('recipe.prep-time')"></v-text-field>
-              <v-text-field v-model="recipe.performTime" class="mx-2" :label="$t('recipe.perform-time')"></v-text-field>
-            </div>
-
-            <v-textarea v-model="recipe.description" auto-grow min-height="100" :label="$t('recipe.description')">
-            </v-textarea>
-            <v-text-field v-model="recipe.recipeYield" dense :label="$t('recipe.servings')"> </v-text-field>
-          </template>
-
-          <div class="d-flex justify-space-between align-center pb-3">
-            <v-tooltip v-if="!form" small top color="secondary darken-1">
-              <template #activator="{ on, attrs }">
-                <v-btn
-                  v-if="recipe.recipeYield"
-                  dense
-                  small
-                  :hover="false"
-                  type="label"
-                  :ripple="false"
-                  elevation="0"
-                  color="secondary darken-1"
-                  class="rounded-sm static"
-                  v-bind="attrs"
-                  @click="scale = 1"
-                  v-on="on"
-                >
-                  {{ scaledYield }}
-                </v-btn>
-              </template>
-              <span> Reset Scale </span>
-            </v-tooltip>
-
-            <template v-if="!recipe.settings.disableAmount && !form">
-              <v-btn color="secondary darken-1" class="mx-1" small @click="scale > 1 ? scale-- : null">
-                <v-icon>
-                  {{ $globals.icons.minus }}
-                </v-icon>
-              </v-btn>
-              <v-btn color="secondary darken-1" small @click="scale++">
-                <v-icon>
-                  {{ $globals.icons.createAlt }}
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-spacer></v-spacer>
-
-            <RecipeRating
-              v-if="enableLandscape"
-              :key="recipe.slug"
-              :value="recipe.rating"
-              :name="recipe.name"
-              :slug="recipe.slug"
-            />
-          </div>
-
-          <v-row>
-            <v-col cols="12" sm="12" md="4" lg="4">
-              <RecipeIngredients
-                v-if="!form"
-                :value="recipe.recipeIngredient"
-                :scale="scale"
-                :disable-amount="recipe.settings.disableAmount"
-              />
-
-              <!-- Recipe Tools Display -->
-              <div v-if="!form && recipe.tools && recipe.tools.length > 0">
-                <h2 class="mb-2 mt-4">Required Tools</h2>
-                <v-list-item v-for="(tool, index) in recipe.tools" :key="index" dense>
-                  <v-checkbox
-                    v-model="recipe.tools[index].onHand"
-                    hide-details
-                    class="pt-0 my-auto py-auto"
-                    color="secondary"
-                    @change="updateTool(recipe.tools[index])"
-                  >
-                  </v-checkbox>
-                  <v-list-item-content>
-                    {{ tool.name }}
-                  </v-list-item-content>
-                </v-list-item>
-              </div>
-
-              <div v-if="$vuetify.breakpoint.mdAndUp" class="mt-5">
-                <!-- Recipe Categories -->
-                <v-card v-if="recipe.recipeCategory.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("recipe.categories") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeChips :items="recipe.recipeCategory" />
-                  </v-card-text>
-                </v-card>
-
-                <!-- Recipe Tags -->
-                <v-card v-if="recipe.tags.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("tag.tags") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeChips :items="recipe.tags" url-prefix="tags" />
-                  </v-card-text>
-                </v-card>
-
-                <RecipeNutrition
-                  v-if="recipe.settings.showNutrition"
-                  v-model="recipe.nutrition"
-                  class="mt-10"
-                  :edit="form"
-                />
-              </div>
-            </v-col>
-            <v-divider v-if="$vuetify.breakpoint.mdAndUp" class="my-divider" :vertical="true"></v-divider>
-
-            <v-col cols="12" sm="12" md="8" lg="8">
-              <RecipeInstructions
-                v-model="recipe.recipeInstructions"
-                :ingredients="recipe.recipeIngredient"
-                :disable-amount="recipe.settings.disableAmount"
-                :edit="form"
-                public
-                :assets="recipe.assets"
-                :recipe-id="recipe.id"
-                :recipe-slug="recipe.slug"
-              />
-
-              <!-- TODO: Somehow fix duplicate code for mobile/desktop -->
-              <div v-if="!$vuetify.breakpoint.mdAndUp" class="mt-5">
-                <!-- Recipe Categories -->
-                <v-card v-if="recipe.recipeCategory.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("recipe.categories") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeChips :items="recipe.recipeCategory" />
-                  </v-card-text>
-                </v-card>
-
-                <!-- Recipe Tags -->
-                <v-card v-if="recipe.tags.length > 0 || form" class="mt-2">
-                  <v-card-title class="py-2">
-                    {{ $t("tag.tags") }}
-                  </v-card-title>
-                  <v-divider class="mx-2"></v-divider>
-                  <v-card-text>
-                    <RecipeChips :items="recipe.tags" url-prefix="tags" />
-                  </v-card-text>
-                </v-card>
-
-                <RecipeNutrition
-                  v-if="recipe.settings.showNutrition"
-                  v-model="recipe.nutrition"
-                  class="mt-10"
-                  :edit="form"
-                />
-              </div>
-
-              <RecipeNotes v-model="recipe.notes" :edit="form" />
-            </v-col>
-          </v-row>
-
-          <v-card-actions class="justify-end">
-            <v-btn
-              v-if="recipe.orgURL"
-              dense
-              small
-              :hover="false"
-              type="label"
-              :ripple="false"
-              elevation="0"
-              :href="recipe.orgURL"
-              color="secondary darken-1"
-              target="_blank"
-              class="rounded-sm mr-4"
-            >
-              {{ $t("recipe.original-url") }}
-            </v-btn>
-          </v-card-actions>
-        </v-card-text>
-      </div>
-    </v-card>
-    <RecipePrintView v-if="recipe" :recipe="recipe" />
-  </v-container>
+  <div>
+    <client-only>
+      <RecipePage v-if="recipe" :recipe="recipe" />
+    </client-only>
+  </div>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  reactive,
-  toRefs,
-  useAsync,
-  useContext,
-  useMeta,
-  useRoute,
-} from "@nuxtjs/composition-api";
-// import { useRecipeMeta } from "~/composables/recipes";
-import { useStaticRoutes, useUserApi } from "~/composables/api";
-import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
-import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
-import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
-import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
-import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
-import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
-import RecipeNotes from "~/components/Domain/Recipe/RecipeNotes.vue";
-import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
+import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
+import { usePublicApi } from "~/composables/api/api-client";
+import { useRecipeMeta } from "~/composables/recipes";
 
 export default defineComponent({
-  components: {
-    RecipeChips,
-    RecipeIngredients,
-    RecipeInstructions,
-    RecipeNotes,
-    RecipeNutrition,
-    RecipePrintView,
-    RecipeRating,
-    RecipeTimeCard,
-  },
+  components: { RecipePage },
   layout: "basic",
   setup() {
     const route = useRoute();
-    const id = route.value.params.id;
-    const api = useUserApi();
+    const router = useRouter();
+    const recipeId = route.value.params.id;
+    const api = usePublicApi();
 
-    const state = reactive({
-      form: false,
-      scale: 1,
-      hideImage: false,
-      imageKey: 1,
-      loadFailed: false,
-      skeleton: false,
-      jsonEditor: false,
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-    });
-
-    const { recipeImage } = useStaticRoutes();
     const { meta, title } = useMeta();
 
     const recipe = useAsync(async () => {
-      const { data } = await api.recipes.getShared(id);
+      const { data, error } = await api.shared.getShared(recipeId);
+
+      if (error) {
+        console.error("error loading recipe -> ", error);
+        router.push("/");
+      }
+
       if (data) {
-        if (data && data !== undefined) {
-          const imageURL = data.id ? recipeImage(data.id) : undefined;
-          title.value = data.name;
-
-          meta.value = [
-            { hid: "og:title", property: "og:title", content: data.name ?? "" },
-            {
-              hid: "og:desc",
-              property: "og:description",
-              content: data.description ?? "",
-            },
-            {
-              hid: "og-image",
-              property: "og:image",
-              content: imageURL ?? "",
-            },
-            {
-              hid: "twitter:title",
-              property: "twitter:title",
-              content: data.name ?? "",
-            },
-            {
-              hid: "twitter:desc",
-              property: "twitter:description",
-              content: data.description ?? "",
-            },
-            { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
-          ];
-        }
-        return data;
-      }
-    });
-
-    const { $vuetify } = useContext();
-
-    const enableLandscape = computed(() => {
-      const preferLandscape = recipe.value?.settings?.landscapeView;
-      const smallScreen = !$vuetify.breakpoint.smAndUp;
-
-      if (preferLandscape) {
-        return true;
-      } else if (smallScreen) {
-        return true;
+        title.value = data?.name || "";
+        const metaObj = useRecipeMeta(ref(data));
+        meta.value = metaObj().meta;
       }
 
-      return false;
-    });
-
-    const scaledYield = computed(() => {
-      const regMatchNum = /\d+/;
-      const yieldString = recipe.value?.recipeYield;
-      const num = yieldString?.match(regMatchNum);
-
-      if (num && num?.length > 0) {
-        const yieldAsInt = parseInt(num[0]);
-        return yieldString?.replace(num[0], String(yieldAsInt * state.scale));
-      }
-
-      return recipe.value?.recipeYield;
+      return data;
     });
 
     return {
-      ...toRefs(state),
       recipe,
-      recipeImage,
-      scaledYield,
-      enableLandscape,
     };
   },
   head: {},
-  computed: {
-    imageHeight() {
-      return this.$vuetify.breakpoint.xs ? "200" : "400";
-    },
-  },
 });
 </script>
diff --git a/mealie/routes/__init__.py b/mealie/routes/__init__.py
index b2b49f1cd675..849ec5b571f9 100644
--- a/mealie/routes/__init__.py
+++ b/mealie/routes/__init__.py
@@ -1,6 +1,20 @@
 from fastapi import APIRouter
 
-from . import admin, app, auth, comments, groups, organizers, parser, recipe, shared, unit_and_foods, users, validators
+from . import (
+    admin,
+    app,
+    auth,
+    comments,
+    explore,
+    groups,
+    organizers,
+    parser,
+    recipe,
+    shared,
+    unit_and_foods,
+    users,
+    validators,
+)
 
 router = APIRouter(prefix="/api")
 
@@ -16,3 +30,4 @@ router.include_router(parser.router)
 router.include_router(unit_and_foods.router)
 router.include_router(admin.router)
 router.include_router(validators.router)
+router.include_router(explore.router)
diff --git a/mealie/routes/explore/__init__.py b/mealie/routes/explore/__init__.py
new file mode 100644
index 000000000000..bbe6584b446b
--- /dev/null
+++ b/mealie/routes/explore/__init__.py
@@ -0,0 +1,7 @@
+from fastapi import APIRouter
+
+from . import controller_public_recipes
+
+router = APIRouter()
+
+router.include_router(controller_public_recipes.router)
diff --git a/mealie/routes/explore/controller_public_recipes.py b/mealie/routes/explore/controller_public_recipes.py
new file mode 100644
index 000000000000..509a778c2f7c
--- /dev/null
+++ b/mealie/routes/explore/controller_public_recipes.py
@@ -0,0 +1,25 @@
+from fastapi import APIRouter, HTTPException
+from pydantic import UUID4
+
+from mealie.routes._base import controller
+from mealie.routes._base.base_controllers import BasePublicController
+from mealie.schema.recipe import Recipe
+
+router = APIRouter(prefix="/explore", tags=["Explore: Recipes"])
+
+
+@controller(router)
+class PublicRecipesController(BasePublicController):
+    @router.get("/recipes/{group_id}/{recipe_slug}", response_model=Recipe)
+    def get_recipe(self, group_id: UUID4, recipe_slug: str) -> Recipe:
+        group = self.repos.groups.get_one(group_id)
+
+        if not group or group.preferences.private_group:
+            raise HTTPException(404, "group not found")
+
+        recipe = self.repos.recipes.by_group(group_id).get_one(recipe_slug)
+
+        if not recipe or not recipe.settings.public:
+            raise HTTPException(404, "recipe not found")
+
+        return recipe
diff --git a/mealie/routes/recipe/shared_routes.py b/mealie/routes/recipe/shared_routes.py
index 0b5435f53929..cc298e16eeaf 100644
--- a/mealie/routes/recipe/shared_routes.py
+++ b/mealie/routes/recipe/shared_routes.py
@@ -1,10 +1,11 @@
-from fastapi import APIRouter, Depends
+from fastapi import APIRouter, Depends, HTTPException
 from pydantic import UUID4
 from sqlalchemy.orm.session import Session
 
 from mealie.db.db_setup import generate_session
 from mealie.repos.all_repositories import get_repositories
 from mealie.schema.recipe import Recipe
+from mealie.schema.response import ErrorResponse
 
 router = APIRouter()
 
@@ -16,6 +17,6 @@ def get_shared_recipe(token_id: UUID4, session: Session = Depends(generate_sessi
     token_summary = db.recipe_share_tokens.get_one(token_id)
 
     if token_summary is None:
-        return None
+        raise HTTPException(status_code=404, detail=ErrorResponse.respond("Token Not Found"))
 
     return token_summary.recipe
diff --git a/tests/integration_tests/public_explorer_tests/public_recipe_tests.py b/tests/integration_tests/public_explorer_tests/public_recipe_tests.py
new file mode 100644
index 000000000000..4d5e45763583
--- /dev/null
+++ b/tests/integration_tests/public_explorer_tests/public_recipe_tests.py
@@ -0,0 +1,62 @@
+from dataclasses import dataclass
+
+import pytest
+from fastapi.testclient import TestClient
+from pydantic import UUID4
+
+from mealie.repos.repository_factory import AllRepositories
+from mealie.schema.recipe.recipe import Recipe
+from tests.utils.fixture_schemas import TestUser
+
+
+class Routes:
+    base = "/api/explore/recipes"
+
+    @staticmethod
+    def recipe(groud_id: str | UUID4, recipe_slug: str | UUID4) -> str:
+        return f"{Routes.base}/{groud_id}/{recipe_slug}"
+
+
+@dataclass(slots=True)
+class PublicRecipeTestCase:
+    private_group: bool
+    public_recipe: bool
+    status_code: int
+    error: str | None
+
+
+@pytest.mark.parametrize(
+    "test_case",
+    (
+        PublicRecipeTestCase(private_group=False, public_recipe=True, status_code=200, error=None),
+        PublicRecipeTestCase(private_group=True, public_recipe=True, status_code=404, error="group not found"),
+        PublicRecipeTestCase(private_group=False, public_recipe=False, status_code=404, error="recipe not found"),
+    ),
+    ids=("is public", "group private", "recipe private"),
+)
+def test_public_recipe_success(
+    api_client: TestClient,
+    unique_user: TestUser,
+    random_recipe: Recipe,
+    database: AllRepositories,
+    test_case: PublicRecipeTestCase,
+):
+    group = database.groups.get_one(unique_user.group_id)
+    group.preferences.private_group = test_case.private_group
+    database.group_preferences.update(group.id, group.preferences)
+
+    # Set Recipe `settings.public` attribute
+    random_recipe.settings.public = test_case.public_recipe
+    database.recipes.update(random_recipe.slug, random_recipe)
+
+    # Try to access recipe
+    response = api_client.get(Routes.recipe(random_recipe.group_id, random_recipe.slug))
+    assert response.status_code == test_case.status_code
+
+    if test_case.error:
+        assert response.json()["detail"] == test_case.error
+        return
+
+    as_json = response.json()
+    assert as_json["name"] == random_recipe.name
+    assert as_json["slug"] == random_recipe.slug