feat: Public Recipe Browser (#2525)

* fixed incorrect var ref

* added public recipe pagination route

* refactored frontend public/explore API

* fixed broken public cards

* hid context menu from cards when public

* fixed public app header

* fixed random recipe

* added public food, category, tag, and tool routes

* not sure why I thought that would work

* added public organizer/foods stores

* disabled clicking on tags/categories

* added public link to profile page

* linting

* force a 404 if the group slug is missing or invalid

* oops

* refactored to fit sidebar into explore

* fixed invalid logic for app header

* removed most sidebar options from public

* added backend routes for public cookbooks

* added explore cookbook pages/apis

* codegen

* added backend tests

* lint

* fixes v-for keys

* I do not understand but sure why not

---------

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

frontend/pages/explore/recipes/_groupSlug/_recipeSlug.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div v-if="recipe">
     <client-only>
-      <RecipePage v-if="recipe" :recipe="recipe" />
+      <RecipePage :recipe="recipe" />
     </client-only>
   </div>
 </template>
@@ -9,24 +9,24 @@
 <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 { usePublicExploreApi } from "~/composables/api/api-client";
 import { useRecipeMeta } from "~/composables/recipes";
 
 export default defineComponent({
   components: { RecipePage },
-  layout: "basic",
+  layout: "explore",
   setup() {
     const route = useRoute();
     const router = useRouter();
     const groupSlug = route.value.params.groupSlug;
-    const slug = route.value.params.slug;
-    const api = usePublicApi();
+    const recipeSlug = route.value.params.recipeSlug;
+    const api = usePublicExploreApi(groupSlug);
 
     const { meta, title } = useMeta();
     const { recipeMeta } = useRecipeMeta();
 
     const recipe = useAsync(async () => {
-      const { data, error } = await api.explore.recipe(groupSlug, slug);
+      const { data, error } = await api.explore.recipes.getOne(recipeSlug);
 
       if (error) {
         console.error("error loading recipe -> ", error);

frontend/pages/explore/recipes/_groupSlug/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="groupSlug">
+    <client-only>
+      <RecipeExplorerPage :group-slug="groupSlug" />
+    </client-only>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { invoke } from "@vueuse/core";
+import RecipeExplorerPage from "~/components/Domain/Recipe/RecipeExplorerPage.vue";
+import { usePublicExploreApi } from "~/composables/api/api-client";
+
+export default defineComponent({
+  components: { RecipeExplorerPage },
+  layout: "explore",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const groupSlug = route.value.params.groupSlug;
+    const api = usePublicExploreApi(groupSlug);
+
+    invoke(async () => {
+      if (!groupSlug) {
+        return;
+      }
+
+      // try to fetch one tag to make sure the group slug is valid
+      const { data } = await api.explore.tags.getAll(1, 1);
+      if (!data) {
+        // the group slug is invalid, so leave the page (this results in a 404)
+        router.push("/explore/recipes");
+      }
+    });
+
+    return {
+      groupSlug,
+    };
+  },
+});
+</script>