feat(share): refactor page and enhance thumbnail extraction
- Extract 8 reusable components from monolithic share page - Add LLM health indicator with 30s polling - Implement stealth thumbnail extraction with 4-method cascade - Integrate real-time thumbnail preview component - Reduce share page from 306 to ~140 lines - Add comprehensive outcome documentation Components: - UrlInputSection: URL input and extraction trigger - ProgressIndicator: Loading state display - ExtractedTextViewer: Collapsible text preview - RecipeCard: Recipe display with Tandoor integration - ErrorState: Error handling UI - LogViewer: System logs with color coding - LlmHealthIndicator: LLM status with polling - ThumbnailPreview: Real-time thumbnail display Thumbnail Methods: 1. Meta tag extraction (og:image, twitter:image) 2. Video poster attribute 3. Instagram embedded JSON data 4. Screenshot fallback Stories Completed: - Story 1: Component extraction and refactoring - Story 2: LLM health status indicator - Story 3: Enhanced stealth thumbnail extraction - Story 4: Thumbnail preview integration Closes: RefactorSharePageAndEnhanceThumbnails
This commit is contained in:
14
src/routes/share/components/ExtractedTextViewer.svelte
Normal file
14
src/routes/share/components/ExtractedTextViewer.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
let { bodyText = '' } = $props<{
|
||||
bodyText: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
{#if bodyText}
|
||||
<details class="border rounded p-2 bg-white text-sm">
|
||||
<summary class="cursor-pointer font-semibold">📝 View Extracted Text</summary>
|
||||
<div class="mt-2 pt-2 border-t whitespace-pre-wrap break-word max-h-48 overflow-y-auto text-xs">
|
||||
{bodyText}
|
||||
</div>
|
||||
</details>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user