feat: Remove Explore URLs and make the normal URLs public

.github/ISSUE_TEMPLATE/recipe-scraper-bug.yaml

@@ -17,7 +17,7 @@ body:
         - label: |
             I have verified that this issue _is not_ related to the underlying library
             [hhyrsev/recipe-scrapers](https://github.com/hhursev/recipe-scrapers) by **1)** checking
-            the [debugger](https://demo.mealie.io/recipe/create/debug) and data is returned, **2)**
+            the [debugger](https://demo.mealie.io/g/home/r/create/debug) and data is returned, **2)**
             verifying that there _are_ errors in the log related to application level code, or
             **3)** verified that the site provides recipe data, or is otherwise supported by
             [hhyrsev/recipe-scrapers](https://github.com/hhursev/recipe-scrapers)

docs/docs/documentation/community-guide/import-recipe-bookmarklet.md

@@ -15,6 +15,6 @@ var url = document.URL;
 var mealie = "http://localhost:8080";
 var use_keywords= "&use_keywords=1" // Optional - use keywords from recipe - update to "" if you don't want that
 var edity = "&edit=1" // Optional - keep in edit mode - update to "" if you don't want that
-var dest = mealie + "/recipe/create/url?recipe_import_url=" + url + use_keywords + edity;
+var dest = mealie + "/r/create/url?recipe_import_url=" + url + use_keywords + edity;
 window.open(dest, "_blank");
 ```

docs/docs/documentation/getting-started/features.md

@@ -8,7 +8,7 @@
 
 Mealie offers two main ways to create recipes. You can use the integrated recipe-scraper to create recipes from hundreds of websites, or you can create recipes manually using the recipe editor.
 
-[Creation Demo](https://demo.mealie.io/recipe/create/url){ .md-button .md-button--primary .align-right }
+[Creation Demo](https://demo.mealie.io/g/home/r/create/url){ .md-button .md-button--primary .align-right }
 
 ### Importing Recipes
 
@@ -34,21 +34,21 @@ Mealie has a robust and flexible recipe organization system with a few different
 
 Categories are the overarching organizer for recipes. You can assign as many categories as you'd like to a recipe, but we recommend that you try to limit the categories you assign to a recipe to one or two. This helps keep categories as focused as possible while still allowing you to find recipes that are related to each other. For example, you might assign a recipe to the category **Breakfast**, **Lunch**, **Dinner**, or **Side**.
 
-[Categories Demo](https://demo.mealie.io/recipes/categories){ .md-button .md-button--primary }
+[Categories Demo](https://demo.mealie.io/g/home/recipes/categories){ .md-button .md-button--primary }
 
 #### Tags
 
 Tags, are nearly identical to categories in function but play a secondary role in some cases. As such, we recommend that you use tags freely to help you organize your recipes by more specific topics. For example, if a recipe can be frozen or is a great left-over meal, you could assign the tags **frozen** and **left-over** and easily filter for those at a later time.
 
-[Tags Demo](https://demo.mealie.io/recipes/tags){ .md-button .md-button--primary }
+[Tags Demo](https://demo.mealie.io/g/home/recipes/tags){ .md-button .md-button--primary }
 
 #### Tools
 
 Tools, are another way that some users like to organize their recipes. If a recipe requires some specific equipment if can be helpful to assign the tools to the recipes. This is particularly useful for things that are less common, like a pressure cooker, or a sous vide.
 
 Each of the above organizers can be filtered in searches, and have their own pages where you can view all the recipes that are associated with those organizers.
 
-[Tools Demo](https://demo.mealie.io/recipes/tools){ .md-button .md-button--primary }
+[Tools Demo](https://demo.mealie.io/g/home/recipes/tools){ .md-button .md-button--primary }
 
 #### Cookbooks
 
@@ -60,7 +60,7 @@ Mealie also has the concept of cookbooks. These can be created inside of a group
 - Pasta Sides: Recipes that have both the **Side** category and the **Pasta** tag
 - Dessert Breads: Recipes that have both the **Bread** category and the **Dessert** tag
 
-[Cookbooks Demo](https://demo.mealie.io/group/cookbooks){ .md-button .md-button--primary }
+[Cookbooks Demo](https://demo.mealie.io/g/home/cookbooks){ .md-button .md-button--primary }
 
 ## Meal Planning
 

frontend/components/Domain/Cookbook/CookbookPage.vue

@@ -15,7 +15,6 @@
           class="mb-5 mx-1"
           :recipes="recipes"
           :query="{ cookbook: slug }"
-          :group-slug="groupSlug"
           @sortRecipes="assignSorted"
           @replaceRecipes="replaceRecipes"
           @appendRecipes="appendRecipes"
@@ -30,24 +29,20 @@
   import { useLazyRecipes } from "~/composables/recipes";
   import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
   import { useCookbook } from "~/composables/use-group-cookbooks";
+  import { useLoggedInState } from "~/composables/use-logged-in-state";
 
   export default defineComponent({
     components: { RecipeCardSection },
-    props: {
-      groupSlug: {
-        type: String,
-        default: undefined,
-      }
-    },
-    setup(props) {
+    setup() {
       const { $auth } = useContext();
-      const loggedIn = computed(() => $auth.loggedIn);
-
-      const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
+      const { isOwnGroup } = useLoggedInState();
 
       const route = useRoute();
+      const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
+      const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
       const slug = route.value.params.slug;
-      const { getOne } = useCookbook(loggedIn.value ? null : props.groupSlug);
+      const { getOne } = useCookbook(isOwnGroup.value ? null : groupSlug.value);
 
       const tab = ref(null);
       const book = getOne(slug);

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -70,7 +70,6 @@
           print: true,
           printPreferences: true,
           share: loggedIn,
-          publicUrl: recipe.settings && loggedIn ? recipe.settings.public : false,
         }"
         @print="$emit('print')"
       />

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -34,15 +34,15 @@
 
         <slot name="actions">
           <v-card-actions class="px-1">
-            <RecipeFavoriteBadge v-if="loggedIn" class="absolute" :slug="slug" show-always />
+            <RecipeFavoriteBadge v-if="isOwnGroup" class="absolute" :slug="slug" show-always />
 
             <RecipeRating class="pb-1" :value="rating" :name="name" :slug="slug" :small="true" />
             <v-spacer></v-spacer>
             <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
 
             <!-- If we're not logged-in, no items display, so we hide this menu -->
             <RecipeContextMenu
-              v-if="loggedIn"
+              v-if="isOwnGroup"
               color="grey darken-2"
               :slug="slug"
               :name="name"
@@ -56,7 +56,6 @@
                 print: false,
                 printPreferences: false,
                 share: true,
-                publicUrl: false,
               }"
               @delete="$emit('delete', slug)"
             />
@@ -69,12 +68,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
@@ -83,10 +83,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     slug: {
       type: String,
       required: true,
@@ -124,16 +120,16 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
     const recipeRoute = computed<string>(() => {
-      return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
+      return `/g/${groupSlug.value}/r/${props.slug}`;
     });
 
     return {
-      loggedIn,
+      isOwnGroup,
       recipeRoute,
     };
   },

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -37,10 +37,10 @@
           </v-list-item-subtitle>
           <div class="d-flex flex-wrap justify-end align-center">
             <slot name="actions">
-              <RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
+              <RecipeFavoriteBadge v-if="isOwnGroup" :slug="slug" show-always />
               <v-rating
                 color="secondary"
-                :class="loggedIn ? 'ml-auto' : 'ml-auto pb-2'"
+                :class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
                 background-color="secondary lighten-3"
                 dense
                 length="5"
@@ -52,7 +52,7 @@
               <!-- If we're not logged-in, no items display, so we hide this menu -->
               <!-- We also add padding to the v-rating above to compensate -->
               <RecipeContextMenu
-                v-if="loggedIn"
+                v-if="isOwnGroup"
                 :slug="slug"
                 :menu-icon="$globals.icons.dotsHorizontal"
                 :name="name"
@@ -66,7 +66,6 @@
                   print: false,
                   printPreferences: false,
                   share: true,
-                  publicUrl: false,
                 }"
                 @deleted="$emit('delete', slug)"
               />
@@ -80,10 +79,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 
 export default defineComponent({
   components: {
@@ -96,10 +96,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     slug: {
       type: String,
       required: true,
@@ -136,16 +132,16 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
     const recipeRoute = computed<string>(() => {
-      return loggedIn.value ? `/recipe/${props.slug}` : `/explore/recipes/${props.groupSlug}/${props.slug}`;
+      return `/g/${groupSlug.value}/r/${props.slug}`;
     });
 
     return {
-      loggedIn,
+      isOwnGroup,
       recipeRoute,
     };
   },

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -76,7 +76,6 @@
             <RecipeCard
               :name="recipe.name"
               :description="recipe.description"
-              :group-slug="groupSlug"
               :slug="recipe.slug"
               :rating="recipe.rating"
               :image="recipe.image"
@@ -100,7 +99,6 @@
             <RecipeCardMobile
               :name="recipe.name"
               :description="recipe.description"
-              :group-slug="groupSlug"
               :slug="recipe.slug"
               :rating="recipe.rating"
               :image="recipe.image"
@@ -128,12 +126,14 @@ import {
   toRefs,
   useAsync,
   useContext,
+  useRoute,
   useRouter,
   watch,
 } from "@nuxtjs/composition-api";
 import { useThrottleFn } from "@vueuse/core";
 import RecipeCard from "./RecipeCard.vue";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useAsyncKey } from "~/composables/use-utils";
 import { useLazyRecipes } from "~/composables/recipes";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -165,10 +165,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    groupSlug: {
-      type: String,
-      default: null,
-    },
     recipes: {
       type: Array as () => Recipe[],
       default: () => [],
@@ -191,9 +187,7 @@ export default defineComponent({
     };
 
     const { $auth, $globals, $vuetify } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn;
-    });
+    const { isOwnGroup } = useLoggedInState();
     const useMobileCards = computed(() => {
       return $vuetify.breakpoint.smAndDown || preferences.value.useMobileCards;
     });
@@ -206,12 +200,15 @@ export default defineComponent({
       sortLoading: false,
     });
 
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+
     const router = useRouter();
     function navigateRandom() {
       if (props.recipes.length > 0) {
         const recipe = props.recipes[Math.floor(Math.random() * props.recipes.length)];
         if (recipe.slug !== undefined) {
-          router.push(loggedIn.value ? `/recipe/${recipe.slug}` : `/explore/recipes/${props.groupSlug}/${recipe.slug}`);
+          router.push(`/g/${groupSlug.value}/r/${recipe.slug}`);
         }
       }
     }
@@ -222,7 +219,7 @@ export default defineComponent({
     const ready = ref(false);
     const loading = ref(false);
 
-    const { fetchMore } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
+    const { fetchMore } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
 
     const queryFilter = computed(() => {
       const orderBy = props.query?.orderBy || preferences.value.orderBy;

frontend/components/Domain/Recipe/RecipeChips.vue

@@ -9,15 +9,16 @@
       color="accent"
       :small="small"
       dark
-      :to=" loggedIn ? `/?${urlPrefix}=${category.id}` : undefined"
+      :to="isOwnGroup ? `${baseRecipeRoute}?${urlPrefix}=${category.id}` : undefined"
     >
       {{ truncateText(category.name) }}
     </v-chip>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, useContext, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/user";
 
 export type UrlPrefixParam = "tags" | "categories" | "tools";
@@ -55,9 +56,13 @@ export default defineComponent({
   },
   setup(props) {
     const { $auth } = useContext();
-    const loggedIn = computed(() => {
-      return $auth.loggedIn
-    })
+    const { isOwnGroup } = useLoggedInState();
+
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "")
+    const baseRecipeRoute = computed<string>(() => {
+      return `/g/${groupSlug.value}`
+    });
 
     function truncateText(text: string, length = 20, clamp = "...") {
       if (!props.truncate) return text;
@@ -68,7 +73,8 @@ export default defineComponent({
     }
 
     return {
-      loggedIn,
+      baseRecipeRoute,
+      isOwnGroup,
       truncateText,
     };
   },