From 3263ab9123cbaef1c69a7870ba386ef97ba43726 Mon Sep 17 00:00:00 2001 From: Max Richter Date: Mon, 27 Oct 2025 00:04:02 +0100 Subject: [PATCH] feat: initial client side searching for resources --- src/components/ClientSearch.svelte | 43 ++++++++++++ src/components/Image.astro | 2 +- src/components/card/Metadata.svelte | 6 +- src/components/resources/Article.astro | 9 ++- src/components/resources/Recipe.astro | 26 +++++-- .../photos/picos-de-europa/index.en.mdx | 11 +-- src/content/photos/picos-de-europa/index.mdx | 9 +-- src/helpers/memorium.ts | 1 + .../[resourceType]/[resourceName].astro | 1 - .../resources/[resourceType]/index.astro | 67 ++++++++++++------- src/pages/resources/index.astro | 47 ++++++++++--- 11 files changed, 162 insertions(+), 60 deletions(-) create mode 100644 src/components/ClientSearch.svelte diff --git a/src/components/ClientSearch.svelte b/src/components/ClientSearch.svelte new file mode 100644 index 0000000..d728458 --- /dev/null +++ b/src/components/ClientSearch.svelte @@ -0,0 +1,43 @@ + + +
+ +
diff --git a/src/components/Image.astro b/src/components/Image.astro index 06de6a1..d400fa2 100644 --- a/src/components/Image.astro +++ b/src/components/Image.astro @@ -70,7 +70,7 @@ const definedSizes = [ ]; const sizes = thumbnail - ? [definedSizes[0]] + ? [definedSizes[1]] : definedSizes.filter((size) => !maxWidth || size.width <= maxWidth); --- diff --git a/src/components/card/Metadata.svelte b/src/components/card/Metadata.svelte index a2ae662..d356bc8 100644 --- a/src/components/card/Metadata.svelte +++ b/src/components/card/Metadata.svelte @@ -8,9 +8,9 @@ typeof d === "string" ? new Date(d) : d; const iso = (d: string | Date) => { - if(!d) return "" + if (!d) return ""; const v = toDate(d); - if(!v?.getTime) return "" + if (!v?.getTime) return ""; return isNaN(v.getTime()) ? "" : v.toISOString(); }; @@ -50,12 +50,12 @@ {/if} - diff --git a/src/components/resources/Article.astro b/src/components/resources/Article.astro index 5989818..250508e 100644 --- a/src/components/resources/Article.astro +++ b/src/components/resources/Article.astro @@ -13,7 +13,9 @@ const { resource } = Astro.props; resource?.content?.image && ( Cover for {resource?.content?.name} -
+
diff --git a/src/components/resources/Recipe.astro b/src/components/resources/Recipe.astro index 5306128..6e649e0 100644 --- a/src/components/resources/Recipe.astro +++ b/src/components/resources/Recipe.astro @@ -4,30 +4,42 @@ import { markdownToHtml } from "@helpers/markdown"; import Image from "@components/Image.astro"; import type { ImageMetadata } from "astro"; -const { resource } = Astro.props +const { resource } = Astro.props; const ingredients = resource?.content?.recipeIngredient || []; const instructions = resource?.content?.recipeInstructions || []; ---

{resource?.content?.name}

- {resource?.content?.image && Cover for {resource?.content?.name}} + { + resource?.content?.image && ( + Cover for {resource?.content?.name} + ) + }
-

{resource?.content?.description}

+

Ingredients

-
    +
      { ingredients.map((ingredient: string) => ( -
    • +
    • )) }

    Steps

    -
      +
        { instructions.map((ingredient: string) => ( -
      1. +
      2. )) }
      diff --git a/src/content/photos/picos-de-europa/index.en.mdx b/src/content/photos/picos-de-europa/index.en.mdx index 5318aba..b6f8f55 100644 --- a/src/content/photos/picos-de-europa/index.en.mdx +++ b/src/content/photos/picos-de-europa/index.en.mdx @@ -16,16 +16,13 @@ import ImageSlider from "@components/ImageSlider.svelte" - ## May 27th -First day, arrival at the sea. - import image1 from "images/20250527_125228.jpg" import image16 from "images/PXL_20250527_101057540.MP.jpg" import image17 from "images/PXL_20250527_100728883.jpg" - + A cow on a meadow in front of the sea A person on flysch rock in front of a cave at the sea A person in a cave from which you can see the sea @@ -33,12 +30,10 @@ import image17 from "images/PXL_20250527_100728883.jpg" ## May 28th -First day of hiking - import image15 from "images/PXL_20250528_121633744.MP.jpg" import image19 from "images/20250528_164715.jpg" - + Us after the first 300 meters Many mountain goats that like to lick the salt from the skin @@ -127,5 +122,5 @@ Final-descent import image27 from "images/PXL_20250605_100650266.jpg" - + diff --git a/src/content/photos/picos-de-europa/index.mdx b/src/content/photos/picos-de-europa/index.mdx index 203bd74..01f8222 100644 --- a/src/content/photos/picos-de-europa/index.mdx +++ b/src/content/photos/picos-de-europa/index.mdx @@ -16,7 +16,6 @@ import ImageSlider from "@components/ImageSlider.svelte" - ## 27. May Erster Tag, Ankunft am Meer. @@ -25,7 +24,7 @@ import image1 from "images/20250527_125228.jpg" import image16 from "images/PXL_20250527_101057540.MP.jpg" import image17 from "images/PXL_20250527_100728883.jpg" - + Bild einer Kuh auf einer Wiese vor dem Meer Person auf flysch gestein vor einer Höhle am Meer Bild von Person in einer Höhle aus der man das Meer sieht @@ -38,7 +37,7 @@ Erster Wandertag import image15 from "images/PXL_20250528_121633744.MP.jpg" import image19 from "images/20250528_164715.jpg" - + Wir nach den ersten 300 Metern Viele Bergziegen die gerne das Salz von der Haut lecken @@ -56,8 +55,6 @@ import image13 from "images/PXL_20250529_201559403.jpg" ## 30-31. May -Gewitter und Restday - import image11 from "images/PXL_20250530_110041174.jpg" import image10 from "images/PXL_20250530_135631186.MP.jpg" import image8 from "images/PXL_20250530_170114907.MP.jpg" @@ -127,4 +124,4 @@ Finaler Abstieg import image27 from "images/PXL_20250605_100650266.jpg" - + diff --git a/src/helpers/memorium.ts b/src/helpers/memorium.ts index 36282e9..dd4355d 100644 --- a/src/helpers/memorium.ts +++ b/src/helpers/memorium.ts @@ -27,6 +27,7 @@ export async function listResource( id: string, ): Promise { const url = `${SERVER_URL}/resources/${id}`; + console.log(url); try { const response = await fetch(url, { signal: AbortSignal.timeout(5000) }); if (response.ok) { diff --git a/src/pages/resources/[resourceType]/[resourceName].astro b/src/pages/resources/[resourceType]/[resourceName].astro index e109fd8..9615e97 100644 --- a/src/pages/resources/[resourceType]/[resourceName].astro +++ b/src/pages/resources/[resourceType]/[resourceName].astro @@ -14,7 +14,6 @@ export async function getStaticPaths() { const paths = await Promise.all( resourceTypes.map(async (resourceType) => { const resources = await memorium.listResource(resourceType.id); - console.log({resources:resources?.content[0]}) return resources?.content?.map((res: any) => { return { params: { diff --git a/src/pages/resources/[resourceType]/index.astro b/src/pages/resources/[resourceType]/index.astro index a8fb20c..05d4ca6 100644 --- a/src/pages/resources/[resourceType]/index.astro +++ b/src/pages/resources/[resourceType]/index.astro @@ -4,6 +4,7 @@ import HeroCard from "@components/HeroCard.astro"; import * as memorium from "@helpers/memorium"; import { resources as resourceTypes } from "../resources.ts"; import { useTranslations } from "@i18n/utils"; +import ClientSearch from "@components/ClientSearch.svelte"; const { resourceType } = Astro.params; @@ -32,33 +33,51 @@ export async function getStaticPaths() { function isValidResource(res: any) { return !!res?.content?._type; } + +function buildSearchTerm(res:any){ + if(!res) return ""; + return Object.keys(res).map((key) => { + if(key.startsWith("_")) return; + const value = res[key]; + if(Array.isArray(value)) return value.join(" "); + if(typeof value === "object") return buildSearchTerm(value); + return value + }).filter(s => !!s?.length).join(" ").toLowerCase(); +} ---

      {t(resourceType)}

      {t(`${resourceType as "articles"}.description`)}

      - { - resources.content - .filter((res: any) => isValidResource(res)) - .map((resource: any) => ( - - )) - } + + + +
      + { + resources?.content + .filter((res: any) => isValidResource(res)) + .map((resource: any) => ( +
      + +
      + )) + } +
      diff --git a/src/pages/resources/index.astro b/src/pages/resources/index.astro index b9dbc95..1c45885 100644 --- a/src/pages/resources/index.astro +++ b/src/pages/resources/index.astro @@ -2,17 +2,48 @@ import Layout from "@layouts/Layout.astro"; import HeroCard from "@components/HeroCard.astro"; import { resources } from "./resources.ts"; -import {useTranslations} from "@i18n/utils"; +import { useTranslations } from "@i18n/utils"; +import * as memorium from "@helpers/memorium"; const t = useTranslations(Astro.url); + +async function getCoverImage(resourceName:string){ + const resources = await memorium.listResource(resourceName); + if(!resources?.content) return ""; + let amount = 0; + while (true){ + amount++; + const randomResource = resources?.content[Math.floor(Math.random() * resources?.content.length)]; + const cover = randomResource?.content?.cover || randomResource?.content?.image; + if(cover){ + if(cover.startsWith("https://") || cover.startsWith("http://")){ + continue; + } + return `https://marka.max-richter.dev/${cover}`; + } + if(amount > 50) { + break; + } + } +} + --- - {resources.map((resource) => - - )} + { + await Promise.all(resources.map(async (resource) => { + const cover = await getCoverImage(resource.id); + console.log({cover}) + return + })) + }