commit e437479c221ab93edb93bdad7db2cd0e64aea14e
parent 2e9f192988136f56620c18dfa005cbcbae7d0e1f
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 17 Nov 2023 00:19:30 +0100
Add support for infoboxes and descriptions
Diffstat:
4 files changed, 99 insertions(+), 14 deletions(-)
diff --git a/src/components/infobox.astro b/src/components/infobox.astro
@@ -0,0 +1,28 @@
+---
+const { info } = Astro.props;
+const { title, text } = info;
+---
+
+<div
+ class="flex p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
+ role="alert"
+>
+ <svg
+ class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]"
+ aria-hidden="true"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ >
+ <path
+ d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
+ ></path>
+ </svg>
+ <span class="sr-only">Tipp</span>
+ <div>
+ {title && <span class="font-medium mb-1.5">{title}</span>}
+ <p class="text-white">
+ {text}
+ </p>
+ </div>
+</div>
diff --git a/src/components/recipe.astro b/src/components/recipe.astro
@@ -2,6 +2,7 @@
import type { Props } from "@astrojs/starlight/props";
import { Recipe as CooklangRecipe } from "@cooklang/cooklang-ts";
import Default from "@astrojs/starlight/components/MarkdownContent.astro";
+import InfoBox from './infobox.astro';
const isRecipe = Astro.props.slug.includes("recipes/");
const recipe = new CooklangRecipe(Astro.props.entry.body, {
@@ -11,12 +12,18 @@ const meta_array = Array.from(Object.entries(recipe.metadata));
const contains_source = meta_array.find(([key, _value]) => "source" === key.toLowerCase() || "quelle" === key.toLowerCase());
const source_url_raw = (contains_source ?? [])[1] ?? "";
const source_url = source_url_raw.replace("<", "").replace(">", "");
+const frontmatter = Astro.props.entry.data;
+const infos: {
+ title?: string,
+ text: string
+}[] | undefined = frontmatter.info;
+const description = frontmatter.description;
---
-
{
isRecipe ? (
<Default {...Astro.props}>
<article>
+ {description && <><p>{description}</p><hr/></>}
<p class="no-margin-children">
{(contains_source?.length ?? 0) > 0 ? (
<><b>Quelle: </b>{source_url.includes("http") ? <a href={source_url}>{source_url}</a> : <span>{source_url}</span>}<br/></>
@@ -68,16 +75,34 @@ const source_url = source_url_raw.replace("<", "").replace(">", "");
<div class="box p-4 border border-zinc-300 rounded min-w-[10rem] w-full md:w-auto relative">
<h2 id="geraete">Hilfsmittel</h2>
<ul>
- {recipe.cookwares.map((cookware) => (
- <li>
- {cookware.quantity} {cookware.name}
- </li>
- ))}
+ {recipe.cookwares.map((cookware) => {
+ if (cookware.quantity === 1) {
+ return (
+ <li>
+ {cookware.name}
+ </li>
+ )
+ } else {
+ return (
+ <li>
+ {cookware.quantity} {cookware.name}
+ </li>
+ )
+ }
+
+ })}
</ul>
</div>) : null}
-
</div>
+ {
+ ((infos?.length ?? 0) > 0) ? (
+ infos?.map((info) => (
+ <InfoBox info={info}></InfoBox>
+ ))
+ ): null
+ }
+
<h2 id="zubereitung">Zubereitung</h2>
<ol>
{recipe.steps.map((step) => (
@@ -99,11 +124,19 @@ const source_url = source_url_raw.replace("<", "").replace(">", "");
</span>
);
} else if (text.type === "cookware") {
- return (
- <span class="rounded-full px-2 py-1 bg-cyan-200 text-black whitespace-nowrap">
- {text.quantity} {text.name}
- </span>
- );
+ if (text.quantity === 1) {
+ return (
+ <span class="rounded-full px-2 py-1 bg-cyan-200 text-black whitespace-nowrap">
+ {text.name}
+ </span>
+ );
+ }else {
+ return (
+ <span class="rounded-full px-2 py-1 bg-cyan-200 text-black whitespace-nowrap">
+ {text.quantity} {text.name}
+ </span>
+ );
+ }
} else if (text.type === "timer") {
return (
<span class="rounded-full px-2 py-1 bg-red-200 text-black whitespace-nowrap">
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,7 +1,17 @@
-import { defineCollection } from 'astro:content';
+import { defineCollection, z } from 'astro:content';
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
export const collections = {
- docs: defineCollection({ schema: docsSchema() }),
+ docs: defineCollection({
+ schema: (context) => {
+ return docsSchema()(context).extend({
+ info: z.optional(z.array(z.object({
+ title: z.optional(z.string()),
+ text: z.string()
+ }))),
+ description: z.optional(z.string())
+ })
+ }
+ }),
i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
};
diff --git a/src/content/docs/recipes/Salzmischungen/Butterbrotsalz.mdoc b/src/content/docs/recipes/Salzmischungen/Butterbrotsalz.mdoc
@@ -0,0 +1,14 @@
+---
+title: Butterbrotsalz
+tableOfContents: false
+description: Frisches Brot, kühle Butter und darauf das selbst gemachte Butterbrotsalz. Himmlich!
+info:
+ - text: "Eine schnelle Würzbuter bekommen Sie, wenn Sie 200g weiche Butter mit 1-2EL Butterbrotsalz verkneten und im Kühlschrank wieder fest werden lassen."
+---
+
+>> Quelle: Magisch Fix - Jutta Grimm
+>> Produziert: 100-125%g pro Mischung
+>> Aufbewahrung: trocken und dunkel, dicht verschlossen, haltbar mindestens 6 Monate
+
+@Grobes Meersalz{50%g}, @Röstzwiebeln{4%EL} und @Roh-Rohrzucker{1%TL} im #Mixer mittelfein mahlen.
+Mit @Praprikapulver edelsüß{3%TL}, @Currypulver{1%TL}, @Knoblauchpulver{1%TL} und @gemahlenem Kreuzkümmel{0.5%TL} mischen.
