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

@@ -0,0 +1,51 @@
+<template>
+  <div v-if="recipe">
+    <client-only>
+      <RecipePage :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 { usePublicExploreApi } from "~/composables/api/api-client";
+import { useRecipeMeta } from "~/composables/recipes";
+
+export default defineComponent({
+  components: { RecipePage },
+  layout: "explore",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const groupSlug = route.value.params.groupSlug;
+    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.recipes.getOne(recipeSlug);
+
+      if (error) {
+        console.error("error loading recipe -> ", error);
+        router.push("/");
+      }
+
+      if (data) {
+        title.value = data?.name || "";
+        const metaObj = recipeMeta(ref(data));
+        meta.value = metaObj.meta;
+      }
+
+      return data;
+    });
+
+    return {
+      recipe,
+    };
+  },
+  head: {},
+});
+</script>