ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

13 sharing recipes (#49)

Browse source 
* fix: update description image

* feat: share using navigator api
This commit is contained in:
Ruidy 2024-12-19 19:18:22 +01:00 committed by GitHub
parent 3a66b00c74
commit b7aca38912
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,6 +1,6 @@
# Chef's Meal Planner
![header image](https://socialify.git.ci/rjnemo/meal_planner/image?description=1&font=Raleway&language=1&logo=https%3A%2F%2Fchefs-meal-planner.onrender.com%2Flogo192.png&owner=1&pattern=Diagonal%20Stripes&stargazers=1&theme=Dark)
![header image](https://socialify.git.ci/rjnemo/meal_planner/image?description=1&font=Raleway&language=1&logo=https%3A%2F%2Fmood2food.netlify.app%2Flogo192.png&owner=1&pattern=Diagonal%20Stripes&stargazers=1&theme=Dark)
![license](https://img.shields.io/github/license/rjNemo/meal_planner?style=for-the-badge)
![release tag](https://img.shields.io/github/v/release/rjNemo/meal_planner?style=for-the-badge)

23
components/recipe/view.vue
View file

@ -2,6 +2,25 @@
import type { Recipe } from "~/types/recipe";
defineProps<{ recipe: Recipe }>();
const shareRecipe = async (recipe: Recipe) => {
const url =
useRequestURL().href.split("/").slice(0, -1).join("/") + "/" + recipe.id;
if (navigator.share) {
try {
await navigator.share({
title: recipe.title,
text: `Check out this recipe: ${recipe.title}`,
url,
});
} catch (error) {
alert("Failed to share the recipe.");
}
} else {
alert("Sharing not supported on this device.");
}
};
</script>
<template>
@ -29,6 +48,10 @@ defineProps<{ recipe: Recipe }>();
<p class="prose prose-lg max-w-none w-full">
{{ recipe.instructions }}
</p>
<button class="btn btn-accent mt-4" @click="shareRecipe(recipe)">
<icon name="uil:share-alt" class="mr-2 w-6 h-6" />
Share Recipe
</button>
</div>
</div>
</template>