PWA - patched deps

This commit is contained in:
Giancarmine Salucci
2025-11-29 17:35:20 +01:00
parent dfa2eb1c4e
commit 0477964009
11 changed files with 10435 additions and 4656 deletions

View File

@@ -0,0 +1,84 @@
<script lang="ts">
import { page } from '$app/stores';
let status = $state('idle');
let logs = $state<string[]>([]);
let recipe = $state<any>(null);
// URL param parsing for Share Target
// Instagram typically shares text that contains the URL, so we might need to parse it out
let sharedText = $derived($page.url.searchParams.get('text') || '');
let sharedUrl = $derived($page.url.searchParams.get('url') || '');
function extractUrl(text: string) {
const match = text.match(/(https?:\/\/[^\s]+)/);
return match ? match[0] : null;
}
let targetUrl = $derived(sharedUrl || extractUrl(sharedText));
async function process() {
if(!targetUrl) return;
status = 'extracting';
logs = [...logs, 'Sending to server... ' + targetUrl];
try {
const res = await fetch('/api/extract', {
method: 'POST',
body: JSON.stringify({ url: targetUrl }),
headers: { 'Content-Type': 'application/json' }
});
const data = await res.json();
if (data.recipe) {
recipe = data.recipe;
status = 'done';
} else {
logs = [...logs, 'Error: ' + JSON.stringify(data)];
status = 'error';
}
} catch(e) {
logs = [...logs, 'Network Error'];
status = 'error';
}
}
</script>
<div class="p-8 max-w-lg mx-auto space-y-4">
<h1 class="text-2xl font-bold">InstaChef PWA</h1>
{#if targetUrl}
<div class="bg-gray-100 p-2 rounded break-all text-sm border">{targetUrl}</div>
{#if status === 'idle'}
<button onclick={process} class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700 w-full">
Extract Recipe
</button>
{/if}
{:else}
<p class="text-gray-500">No URL detected. Open this app via Instagram Share Menu.</p>
<div class="text-xs text-gray-400">Debug: Text={sharedText} URL={sharedUrl}</div>
{/if}
{#if status === 'extracting'}
<div class="animate-pulse text-blue-600">Extracting data...</div>
{/if}
{#if recipe}
<div class="border rounded p-4 bg-green-50 space-y-2">
<h2 class="font-bold text-xl">{recipe.name}</h2>
<p class="text-sm">{recipe.description}</p>
<h3 class="font-bold mt-2">Ingredients</h3>
<ul class="list-disc pl-5 text-sm">
{#each recipe.ingredients as ing}
<li>{ing.amount} {ing.unit} {ing.item}</li>
{/each}
</ul>
</div>
{/if}
<div class="font-mono text-xs bg-slate-900 text-green-400 p-4 rounded min-h-[100px] mt-8">
<div class="opacity-50 border-b border-slate-700 mb-2">System Logs</div>
{#each logs as l}<div>> {l}</div>{/each}
</div>
</div>