@xiwebdesign/xicms-core 7.2.0 → 7.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/XiCMSProvider.d.ts +2 -8
- package/dist/XiCMSProvider.js +1 -8
- package/dist/XiCMSProvider.js.map +1 -1
- package/dist/admin/AdminApp.js +7 -12
- package/dist/admin/AdminApp.js.map +1 -1
- package/dist/admin/NewsEditor.d.ts +8 -1
- package/dist/admin/NewsEditor.js +19 -18
- package/dist/admin/NewsEditor.js.map +1 -1
- package/dist/admin/SuperadminPanel.js +6 -7
- package/dist/admin/SuperadminPanel.js.map +1 -1
- package/dist/admin/customBlocks/CustomBlocksPanel.js +3 -4
- package/dist/admin/customBlocks/CustomBlocksPanel.js.map +1 -1
- package/dist/admin/lib/pagesClient.js +3 -4
- package/dist/admin/lib/pagesClient.js.map +1 -1
- package/dist/admin/lib/symbolsClient.js +3 -4
- package/dist/admin/lib/symbolsClient.js.map +1 -1
- package/dist/admin/pages/PagesPanel.js +5 -2
- package/dist/admin/pages/PagesPanel.js.map +1 -1
- package/dist/admin/settings/MailSettings.js +2 -3
- package/dist/admin/settings/MailSettings.js.map +1 -1
- package/dist/admin/settings/MailTemplates.js +2 -3
- package/dist/admin/settings/MailTemplates.js.map +1 -1
- package/dist/admin/settings/SettingsPanel.js +250 -225
- package/dist/admin/settings/SettingsPanel.js.map +1 -1
- package/dist/admin/settings/SnapshotsCard.js +3 -4
- package/dist/admin/settings/SnapshotsCard.js.map +1 -1
- package/dist/admin/shop/lib.js +2 -3
- package/dist/admin/shop/lib.js.map +1 -1
- package/dist/admin/visual/VisualEditor.js +239 -103
- package/dist/admin/visual/VisualEditor.js.map +1 -1
- package/dist/admin.css +1 -1
- package/dist/auth/AuthProvider.d.ts +16 -0
- package/dist/auth/AuthProvider.js +58 -2
- package/dist/auth/AuthProvider.js.map +1 -1
- package/dist/auth/LoginForm.d.ts +13 -1
- package/dist/auth/LoginForm.js +153 -29
- package/dist/auth/LoginForm.js.map +1 -1
- package/dist/blocks/builtins/Agenda.js +6 -6
- package/dist/blocks/builtins/Agenda.js.map +1 -1
- package/dist/blocks/builtins/Banner.js +1 -1
- package/dist/blocks/builtins/Banner.js.map +1 -1
- package/dist/blocks/builtins/Breadcrumbs.js +5 -2
- package/dist/blocks/builtins/Breadcrumbs.js.map +1 -1
- package/dist/blocks/builtins/Cards.js +2 -2
- package/dist/blocks/builtins/Cards.js.map +1 -1
- package/dist/blocks/builtins/Contact.js +3 -3
- package/dist/blocks/builtins/Contact.js.map +1 -1
- package/dist/blocks/builtins/Cta.js +3 -3
- package/dist/blocks/builtins/Cta.js.map +1 -1
- package/dist/blocks/builtins/Downloads.js +5 -5
- package/dist/blocks/builtins/Downloads.js.map +1 -1
- package/dist/blocks/builtins/Elements.js +8 -5
- package/dist/blocks/builtins/Elements.js.map +1 -1
- package/dist/blocks/builtins/Hero.js +1 -1
- package/dist/blocks/builtins/Hero.js.map +1 -1
- package/dist/blocks/builtins/Jobs.js +4 -1
- package/dist/blocks/builtins/Jobs.js.map +1 -1
- package/dist/blocks/builtins/MapBlock.js +11 -11
- package/dist/blocks/builtins/MapBlock.js.map +1 -1
- package/dist/blocks/builtins/Newsletter.js +3 -2
- package/dist/blocks/builtins/Newsletter.js.map +1 -1
- package/dist/blocks/builtins/OpeningHours.js +2 -2
- package/dist/blocks/builtins/OpeningHours.js.map +1 -1
- package/dist/blocks/builtins/PdfBlock.js +2 -2
- package/dist/blocks/builtins/PdfBlock.js.map +1 -1
- package/dist/blocks/builtins/Portfolio.js +4 -4
- package/dist/blocks/builtins/Portfolio.js.map +1 -1
- package/dist/blocks/builtins/Pricing.js +3 -3
- package/dist/blocks/builtins/Pricing.js.map +1 -1
- package/dist/blocks/builtins/Sections.js +7 -7
- package/dist/blocks/builtins/Sections.js.map +1 -1
- package/dist/blocks/builtins/Team.js +3 -3
- package/dist/blocks/builtins/Team.js.map +1 -1
- package/dist/blocks/builtins/Widgets.js +28 -28
- package/dist/blocks/builtins/Widgets.js.map +1 -1
- package/dist/blocks/builtins/lib/submitForm.js +3 -4
- package/dist/blocks/builtins/lib/submitForm.js.map +1 -1
- package/dist/blocks/ui/index.d.ts +8 -1
- package/dist/blocks/ui/index.js +3 -2
- package/dist/blocks/ui/index.js.map +1 -1
- package/dist/components/EditBar.d.ts +9 -1
- package/dist/components/EditBar.js +6 -5
- package/dist/components/EditBar.js.map +1 -1
- package/dist/components/PageView.js +3 -5
- package/dist/components/PageView.js.map +1 -1
- package/dist/firebase/admin.js +4 -0
- package/dist/firebase/admin.js.map +1 -1
- package/dist/firebase/client.js +23 -5
- package/dist/firebase/client.js.map +1 -1
- package/dist/firebase/config.d.ts +0 -10
- package/dist/firebase/config.js +7 -1
- package/dist/firebase/config.js.map +1 -1
- package/dist/firebase/emulators.d.ts +9 -0
- package/dist/firebase/emulators.js +24 -0
- package/dist/firebase/emulators.js.map +1 -0
- package/dist/firebase/functionsClient.d.ts +18 -0
- package/dist/firebase/functionsClient.js +17 -0
- package/dist/firebase/functionsClient.js.map +1 -0
- package/dist/lock/DemoLock.js +19 -2
- package/dist/lock/DemoLock.js.map +1 -1
- package/dist/modules/shop/cartStore.js +2 -1
- package/dist/modules/shop/cartStore.js.map +1 -1
- package/dist/modules/shop/lib.js +9 -10
- package/dist/modules/shop/lib.js.map +1 -1
- package/dist/next/authRewrites.d.ts +40 -0
- package/dist/next/authRewrites.js +20 -0
- package/dist/next/authRewrites.js.map +1 -0
- package/dist/next/index.cjs +47 -0
- package/dist/next/index.d.ts +5 -0
- package/dist/next/index.js +5 -0
- package/dist/next/index.js.map +1 -0
- package/dist/server/index.d.ts +1 -1
- package/dist/server/index.js +2 -0
- package/dist/server/index.js.map +1 -1
- package/dist/server/pages.d.ts +11 -0
- package/dist/server/pages.js +47 -0
- package/dist/server/pages.js.map +1 -1
- package/dist/styles.css +130 -29
- package/dist/theme/color.d.ts +17 -0
- package/dist/theme/color.js +12 -0
- package/dist/theme/color.js.map +1 -0
- package/dist/version.js +1 -1
- package/package.json +7 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { BreadcrumbsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { jsonLdHtml } from \"./jsonld\";\n\ntype Breadcrumbs = z.infer<typeof BreadcrumbsBlockSchema>;\n\nexport interface Crumb {\n label: string;\n href: string;\n}\n\n/** Kruimels uit een pad: \"/diensten/tuinaanleg\" → Home / Diensten / Tuinaanleg. Puur en getest. */\nexport function crumbsFromPath(path: string, homeLabel = \"Home\"): Crumb[] {\n const segments = path.split(\"/\").filter(Boolean);\n const crumbs: Crumb[] = [{ label: homeLabel, href: \"/\" }];\n let href = \"\";\n for (const seg of segments) {\n href += `/${seg}`;\n // decodeURIComponent gooit op misvormde percent-encoding (\"%E0%A4%A\") — dan het rauwe segment.\n let decoded = seg;\n try {\n decoded = decodeURIComponent(seg);\n } catch {\n /* rauw segment als label */\n }\n const label = decoded.replace(/[-_]+/g, \" \").replace(/^./, (c) => c.toUpperCase());\n crumbs.push({ label, href });\n }\n return crumbs;\n}\n\n/** BreadcrumbList-JSON-LD. Puur en getest. */\nexport function breadcrumbsJsonLd(crumbs: Crumb[]): Record<string, unknown> {\n return {\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n itemListElement: crumbs.map((c, i) => ({\n \"@type\": \"ListItem\",\n position: i + 1,\n name: c.label,\n item: c.href,\n })),\n };\n}\n\n/**\n * Kruimelpad, afgeleid van de URL (client, ná mount — hydration-veilig). Op de homepage\n * (alleen \"Home\") wordt niets getoond.\n */\nfunction BreadcrumbsRender({ block, mode }: BlockRenderProps<Breadcrumbs>) {\n const LinkC = useLinkComponent();\n const [path, setPath] = useState<string | null>(null);\n useEffect(() => {\n setPath(window.location.pathname);\n }, []);\n\n if (mode === \"preview\" && (path === null || path === \"/\")) {\n return <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\">{block.homeLabel} / Voorbeeldpagina</nav>;\n }\n if (path === null || path === \"/\") return null;\n const crumbs = crumbsFromPath(path, block.homeLabel);\n\n return (\n <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\">\n <ol className=\"xicms-breadcrumbs__list\">\n {crumbs.map((c, i) => (\n <li key={c.href} className=\"xicms-breadcrumbs__item\">\n {i < crumbs.length - 1 ? (\n <LinkC href={c.href}>{c.label}</LinkC>\n ) : (\n <span aria-current=\"page\">{c.label}</span>\n )}\n </li>\n ))}\n </ol>\n {block.jsonLd && (\n <script\n type=\"application/ld+json\"\n // eslint-disable-next-line react/no-danger\n // Absolute URL's: Google wil volledige item-URL's in BreadcrumbList (dit rendert\n // client-side ná mount, dus window.location.origin is beschikbaar).\n dangerouslySetInnerHTML={{\n __html: jsonLdHtml(\n breadcrumbsJsonLd(crumbs.map((c) => ({ ...c, href: `${window.location.origin}${c.href}` }))),\n ),\n }}\n />\n )}\n </nav>\n );\n}\n\nexport const breadcrumbsBlock = defineBlock({\n type: \"breadcrumbs\",\n schema: BreadcrumbsBlockSchema,\n Render: BreadcrumbsRender,\n label: \"Kruimelpad\",\n icon: \"🧭\",\n defaults: () => ({ homeLabel: \"Home\", jsonLd: true }),\n});\n"],"mappings":";AA8DW,
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { BreadcrumbsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { jsonLdHtml } from \"./jsonld\";\n\ntype Breadcrumbs = z.infer<typeof BreadcrumbsBlockSchema>;\n\nexport interface Crumb {\n label: string;\n href: string;\n}\n\n/** Kruimels uit een pad: \"/diensten/tuinaanleg\" → Home / Diensten / Tuinaanleg. Puur en getest. */\nexport function crumbsFromPath(path: string, homeLabel = \"Home\"): Crumb[] {\n const segments = path.split(\"/\").filter(Boolean);\n const crumbs: Crumb[] = [{ label: homeLabel, href: \"/\" }];\n let href = \"\";\n for (const seg of segments) {\n href += `/${seg}`;\n // decodeURIComponent gooit op misvormde percent-encoding (\"%E0%A4%A\") — dan het rauwe segment.\n let decoded = seg;\n try {\n decoded = decodeURIComponent(seg);\n } catch {\n /* rauw segment als label */\n }\n const label = decoded.replace(/[-_]+/g, \" \").replace(/^./, (c) => c.toUpperCase());\n crumbs.push({ label, href });\n }\n return crumbs;\n}\n\n/** BreadcrumbList-JSON-LD. Puur en getest. */\nexport function breadcrumbsJsonLd(crumbs: Crumb[]): Record<string, unknown> {\n return {\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n itemListElement: crumbs.map((c, i) => ({\n \"@type\": \"ListItem\",\n position: i + 1,\n name: c.label,\n item: c.href,\n })),\n };\n}\n\n/**\n * Kruimelpad, afgeleid van de URL (client, ná mount — hydration-veilig). Op de homepage\n * (alleen \"Home\") wordt niets getoond.\n */\nfunction BreadcrumbsRender({ block, mode }: BlockRenderProps<Breadcrumbs>) {\n const LinkC = useLinkComponent();\n const [path, setPath] = useState<string | null>(null);\n useEffect(() => {\n setPath(window.location.pathname);\n }, []);\n\n if (mode === \"preview\" && (path === null || path === \"/\")) {\n return <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\"><span data-xicms-edit=\"homeLabel\">{block.homeLabel}</span> / Voorbeeldpagina</nav>;\n }\n if (path === null || path === \"/\") return null;\n const crumbs = crumbsFromPath(path, block.homeLabel);\n\n return (\n <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\">\n <ol className=\"xicms-breadcrumbs__list\">\n {crumbs.map((c, i) => (\n <li key={c.href} className=\"xicms-breadcrumbs__item\">\n {i < crumbs.length - 1 ? (\n // De eerste kruimel ís `homeLabel`; de rest komt uit het pad en is dus geen blokveld.\n <LinkC href={c.href}>{i === 0 ? <span data-xicms-edit=\"homeLabel\">{c.label}</span> : c.label}</LinkC>\n ) : (\n <span aria-current=\"page\">{c.label}</span>\n )}\n </li>\n ))}\n </ol>\n {block.jsonLd && (\n <script\n type=\"application/ld+json\"\n // eslint-disable-next-line react/no-danger\n // Absolute URL's: Google wil volledige item-URL's in BreadcrumbList (dit rendert\n // client-side ná mount, dus window.location.origin is beschikbaar).\n dangerouslySetInnerHTML={{\n __html: jsonLdHtml(\n breadcrumbsJsonLd(crumbs.map((c) => ({ ...c, href: `${window.location.origin}${c.href}` }))),\n ),\n }}\n />\n )}\n </nav>\n );\n}\n\nexport const breadcrumbsBlock = defineBlock({\n type: \"breadcrumbs\",\n schema: BreadcrumbsBlockSchema,\n Render: BreadcrumbsRender,\n label: \"Kruimelpad\",\n icon: \"🧭\",\n defaults: () => ({ homeLabel: \"Home\", jsonLd: true }),\n});\n"],"mappings":";AA8DW,SAA2D,KAA3D;AA5DX,SAAS,WAAW,gBAAgB;AAEpC,SAAS,8BAA8B;AACvC,SAAS,mBAA0C;AACnD,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAUpB,SAAS,eAAe,MAAc,YAAY,QAAiB;AACxE,QAAM,WAAW,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAC/C,QAAM,SAAkB,CAAC,EAAE,OAAO,WAAW,MAAM,IAAI,CAAC;AACxD,MAAI,OAAO;AACX,aAAW,OAAO,UAAU;AAC1B,YAAQ,IAAI,GAAG;AAEf,QAAI,UAAU;AACd,QAAI;AACF,gBAAU,mBAAmB,GAAG;AAAA,IAClC,QAAQ;AAAA,IAER;AACA,UAAM,QAAQ,QAAQ,QAAQ,UAAU,GAAG,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;AACjF,WAAO,KAAK,EAAE,OAAO,KAAK,CAAC;AAAA,EAC7B;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,QAA0C;AAC1E,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MACrC,SAAS;AAAA,MACT,UAAU,IAAI;AAAA,MACd,MAAM,EAAE;AAAA,MACR,MAAM,EAAE;AAAA,IACV,EAAE;AAAA,EACJ;AACF;AAMA,SAAS,kBAAkB,EAAE,OAAO,KAAK,GAAkC;AACzE,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,YAAU,MAAM;AACd,YAAQ,OAAO,SAAS,QAAQ;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,cAAc,SAAS,QAAQ,SAAS,MAAM;AACzD,WAAO,qBAAC,SAAI,WAAU,qBAAoB,cAAW,cAAa;AAAA,0BAAC,UAAK,mBAAgB,aAAa,gBAAM,WAAU;AAAA,MAAO;AAAA,OAAkB;AAAA,EAChJ;AACA,MAAI,SAAS,QAAQ,SAAS,IAAK,QAAO;AAC1C,QAAM,SAAS,eAAe,MAAM,MAAM,SAAS;AAEnD,SACE,qBAAC,SAAI,WAAU,qBAAoB,cAAW,cAC5C;AAAA,wBAAC,QAAG,WAAU,2BACX,iBAAO,IAAI,CAAC,GAAG,MACd,oBAAC,QAAgB,WAAU,2BACxB,cAAI,OAAO,SAAS;AAAA;AAAA,MAEnB,oBAAC,SAAM,MAAM,EAAE,MAAO,gBAAM,IAAI,oBAAC,UAAK,mBAAgB,aAAa,YAAE,OAAM,IAAU,EAAE,OAAM;AAAA,QAE7F,oBAAC,UAAK,gBAAa,QAAQ,YAAE,OAAM,KAL9B,EAAE,IAOX,CACD,GACH;AAAA,IACC,MAAM,UACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QAIL,yBAAyB;AAAA,UACvB,QAAQ;AAAA,YACN,kBAAkB,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC;AAAA,UAC7F;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEO,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,WAAW,QAAQ,QAAQ,KAAK;AACrD,CAAC;","names":[]}
|
|
@@ -21,7 +21,7 @@ function CardsRender({ block }) {
|
|
|
21
21
|
c.title && /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-cards__title", "data-xicms-edit": `items.${i}.title`, children: c.title }),
|
|
22
22
|
c.text && /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-cards__text", "data-xicms-edit": `items.${i}.text`, children: c.text }),
|
|
23
23
|
c.href && c.linkLabel && /* @__PURE__ */ jsxs(Text, { type: "label", style: { color: "var(--color-accent)" }, children: [
|
|
24
|
-
c.linkLabel,
|
|
24
|
+
/* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.linkLabel`, children: c.linkLabel }),
|
|
25
25
|
" \u2192"
|
|
26
26
|
] })
|
|
27
27
|
] });
|
|
@@ -55,7 +55,7 @@ function CardsRender({ block }) {
|
|
|
55
55
|
c.title && /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-cards__title", "data-xicms-edit": `items.${i}.title`, children: c.title }),
|
|
56
56
|
c.text && /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-cards__text", "data-xicms-edit": `items.${i}.text`, children: c.text }),
|
|
57
57
|
c.href && c.linkLabel && /* @__PURE__ */ jsxs(Text, { type: "label", style: { color: "var(--color-accent)" }, children: [
|
|
58
|
-
c.linkLabel,
|
|
58
|
+
/* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.linkLabel`, children: c.linkLabel }),
|
|
59
59
|
" \u2192"
|
|
60
60
|
] })
|
|
61
61
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CardsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Cards = z.infer<typeof CardsBlockSchema>;\n\n/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */\nfunction CardsRender({ block }: BlockRenderProps<Cards>) {\n const LinkC = useLinkComponent();\n // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);\n if (items.length === 0 && !block.heading) return null;\n return (\n <VStack gap={4} as=\"section\" className=\"xicms-cards\">\n {(block.heading || block.intro) && (\n <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n {block.intro && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n </VStack>\n )}\n <Grid columns={{ minWidth: 240, max: block.columns }} gap={4}>\n {items.map((c) => {\n const i = c._i;\n const cover = block.imageStyle === \"cover\" && Boolean(c.imageUrl);\n const body = (\n <VStack gap={2} style={cover ? { padding: \"1.1rem 1.25rem 1.25rem\" } : undefined}>\n {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n {c.href && c.linkLabel && (\n <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}>{c.linkLabel} →</Text>\n )}\n </VStack>\n );\n const inner = cover ? (\n <VStack gap={0} style={{ height: \"100%\" }}>\n {/* Beeld edge-to-edge bovenaan (postkaart-stijl); tekst hieronder gepad. */}\n <Img src={c.imageUrl as string} alt={c.title ?? \"\"} width={600} height={360}\n sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n style={{ width: \"100%\", aspectRatio: \"16 / 10\", objectFit: \"cover\", display: \"block\" }} />\n {body}\n </VStack>\n ) : (\n <VStack gap={2}>\n {c.imageUrl ? (\n <Img src={c.imageUrl} alt={c.title ?? \"\"} width={480} height={300}\n sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n style={{ width: \"100%\", height: 160, objectFit: \"cover\", borderRadius: \"var(--radius-element)\" }} />\n ) : c.icon ? (\n <div aria-hidden=\"true\" style={{ fontSize: \"2rem\", lineHeight: 1 }}>{c.icon}</div>\n ) : null}\n {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n {c.href && c.linkLabel && (\n <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}>{c.linkLabel} →</Text>\n )}\n </VStack>\n );\n const card = (\n <Card\n padding={cover ? 0 : 4}\n height=\"100%\"\n className={`xicms-cards__card${c.featured ? \" xicms-cards__card--featured\" : \"\"}`}\n style={cover ? { overflow: \"hidden\" } : undefined}\n >\n {inner}\n </Card>\n );\n return c.href ? (\n <LinkC key={i} href={c.href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n {card}\n </LinkC>\n ) : (\n <div key={i}>{card}</div>\n );\n })}\n </Grid>\n </VStack>\n );\n}\n\nexport const cardsBlock = defineBlock({\n type: \"cards\",\n fields: { \"items.icon\": { type: \"icon\" } },\n schema: CardsBlockSchema,\n Render: CardsRender,\n label: \"Diensten / kaarten\",\n icon: \"🧩\",\n defaults: () => ({\n heading: \"Onze diensten\",\n columns: 3,\n items: [\n { icon: \"⭐\", title: \"Dienst één\", text: \"Korte omschrijving van wat je biedt.\" },\n { icon: \"⚡\", title: \"Dienst twee\", text: \"Korte omschrijving van wat je biedt.\" },\n { icon: \"💬\", title: \"Dienst drie\", text: \"Korte omschrijving van wat je biedt.\" },\n ],\n }),\n});\n"],"mappings":";AAqBQ,SACoB,KADpB;AAlBR,SAAS,wBAAwB;AACjC,SAAS,mBAA0C;AACnD,SAAS,QAAQ,MAAM,MAAM,SAAS,YAAY;AAClD,SAAS,wBAAwB;AACjC,SAAS,WAAW;AAKpB,SAAS,YAAY,EAAE,MAAM,GAA4B;AACvD,QAAM,QAAQ,iBAAiB;AAG/B,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ;AAChH,MAAI,MAAM,WAAW,KAAK,CAAC,MAAM,QAAS,QAAO;AACjD,SACE,qBAAC,UAAO,KAAK,GAAG,IAAG,WAAU,WAAU,eACnC;AAAA,WAAM,WAAW,MAAM,UACvB,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,YAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,MAC7E,MAAM,SAAS,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,SAAS,gBAAM,OAAM;AAAA,OAC5F;AAAA,IAEF,oBAAC,QAAK,SAAS,EAAE,UAAU,KAAK,KAAK,MAAM,QAAQ,GAAG,KAAK,GACxD,gBAAM,IAAI,CAAC,MAAM;AAChB,YAAM,IAAI,EAAE;AACZ,YAAM,QAAQ,MAAM,eAAe,WAAW,QAAQ,EAAE,QAAQ;AAChE,YAAM,OACJ,qBAAC,UAAO,KAAK,GAAG,OAAO,QAAQ,EAAE,SAAS,yBAAyB,IAAI,QACpE;AAAA,UAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CardsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Cards = z.infer<typeof CardsBlockSchema>;\n\n/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */\nfunction CardsRender({ block }: BlockRenderProps<Cards>) {\n const LinkC = useLinkComponent();\n // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);\n if (items.length === 0 && !block.heading) return null;\n return (\n <VStack gap={4} as=\"section\" className=\"xicms-cards\">\n {(block.heading || block.intro) && (\n <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n {block.intro && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n </VStack>\n )}\n <Grid columns={{ minWidth: 240, max: block.columns }} gap={4}>\n {items.map((c) => {\n const i = c._i;\n const cover = block.imageStyle === \"cover\" && Boolean(c.imageUrl);\n const body = (\n <VStack gap={2} style={cover ? { padding: \"1.1rem 1.25rem 1.25rem\" } : undefined}>\n {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n {c.href && c.linkLabel && (\n <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}><span data-xicms-edit={`items.${i}.linkLabel`}>{c.linkLabel}</span> →</Text>\n )}\n </VStack>\n );\n const inner = cover ? (\n <VStack gap={0} style={{ height: \"100%\" }}>\n {/* Beeld edge-to-edge bovenaan (postkaart-stijl); tekst hieronder gepad. */}\n <Img src={c.imageUrl as string} alt={c.title ?? \"\"} width={600} height={360}\n sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n style={{ width: \"100%\", aspectRatio: \"16 / 10\", objectFit: \"cover\", display: \"block\" }} />\n {body}\n </VStack>\n ) : (\n <VStack gap={2}>\n {c.imageUrl ? (\n <Img src={c.imageUrl} alt={c.title ?? \"\"} width={480} height={300}\n sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n style={{ width: \"100%\", height: 160, objectFit: \"cover\", borderRadius: \"var(--radius-element)\" }} />\n ) : c.icon ? (\n <div aria-hidden=\"true\" style={{ fontSize: \"2rem\", lineHeight: 1 }}>{c.icon}</div>\n ) : null}\n {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n {c.href && c.linkLabel && (\n <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}><span data-xicms-edit={`items.${i}.linkLabel`}>{c.linkLabel}</span> →</Text>\n )}\n </VStack>\n );\n const card = (\n <Card\n padding={cover ? 0 : 4}\n height=\"100%\"\n className={`xicms-cards__card${c.featured ? \" xicms-cards__card--featured\" : \"\"}`}\n style={cover ? { overflow: \"hidden\" } : undefined}\n >\n {inner}\n </Card>\n );\n return c.href ? (\n <LinkC key={i} href={c.href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n {card}\n </LinkC>\n ) : (\n <div key={i}>{card}</div>\n );\n })}\n </Grid>\n </VStack>\n );\n}\n\nexport const cardsBlock = defineBlock({\n type: \"cards\",\n fields: { \"items.icon\": { type: \"icon\" } },\n schema: CardsBlockSchema,\n Render: CardsRender,\n label: \"Diensten / kaarten\",\n icon: \"🧩\",\n defaults: () => ({\n heading: \"Onze diensten\",\n columns: 3,\n items: [\n { icon: \"⭐\", title: \"Dienst één\", text: \"Korte omschrijving van wat je biedt.\" },\n { icon: \"⚡\", title: \"Dienst twee\", text: \"Korte omschrijving van wat je biedt.\" },\n { icon: \"💬\", title: \"Dienst drie\", text: \"Korte omschrijving van wat je biedt.\" },\n ],\n }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -28,11 +28,11 @@ function ContactRender({ block }) {
|
|
|
28
28
|
] }),
|
|
29
29
|
block.phone && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
|
|
30
30
|
/* @__PURE__ */ jsx("dt", { children: "Telefoon" }),
|
|
31
|
-
/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `tel:${block.phone.replace(/\s+/g, "")}`, children: block.phone }) })
|
|
31
|
+
/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `tel:${block.phone.replace(/\s+/g, "")}`, "data-xicms-edit": "phone", children: block.phone }) })
|
|
32
32
|
] }),
|
|
33
33
|
block.email && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
|
|
34
34
|
/* @__PURE__ */ jsx("dt", { children: "E-mail" }),
|
|
35
|
-
/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${block.email}`, children: block.email }) })
|
|
35
|
+
/* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${block.email}`, "data-xicms-edit": "email", children: block.email }) })
|
|
36
36
|
] }),
|
|
37
37
|
block.hours && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
|
|
38
38
|
/* @__PURE__ */ jsx("dt", { children: "Openingstijden" }),
|
|
@@ -103,7 +103,7 @@ function SocialRender({ block }) {
|
|
|
103
103
|
block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
|
|
104
104
|
/* @__PURE__ */ jsx("ul", { className: "xicms-social__list", children: items.map((it, i) => {
|
|
105
105
|
const icon = SocialIcon({ platform: it.platform });
|
|
106
|
-
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: it.href, rel: "noopener noreferrer", target: "_blank", "aria-label": it.platform, title: it.platform, className: icon ? "xicms-social__iconlink" : void 0, children: icon ?? it.platform }) }, i);
|
|
106
|
+
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: it.href, rel: "noopener noreferrer", target: "_blank", "aria-label": it.platform, title: it.platform, className: icon ? "xicms-social__iconlink" : void 0, children: icon ?? /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.platform`, children: it.platform }) }) }, i);
|
|
107
107
|
}) })
|
|
108
108
|
] });
|
|
109
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Contact.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { jsonLdHtml } from \"./jsonld\";\nimport { ContactBlockSchema, SocialBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\n\n/* ── Contact ─────────────────────────────────────────────────────────────── */\ntype Contact = z.infer<typeof ContactBlockSchema>;\nexport function contactJsonLd(b: Contact): Record<string, unknown> {\n return {\n \"@context\": \"https://schema.org\",\n \"@type\": \"LocalBusiness\",\n // Gedeeld relatief @id: contact-, openingstijden- en layout-JSON-LD beschrijven hetzelfde\n // bedrijf; zonder @id ziet Google drie conflicterende LocalBusiness-entiteiten per pagina.\n \"@id\": \"#business\",\n // Bewust géén `name: heading` — de blokkop is meestal \"Contact\" en zou als bedrijfsnaam in de\n // samengevoegde #business-entiteit belanden; de naam komt uit de layout-brede businessJsonLd.\n ...(b.address ? { address: b.address } : {}),\n ...(b.phone ? { telephone: b.phone } : {}),\n ...(b.email ? { email: b.email } : {}),\n ...(b.geo ? { geo: { \"@type\": \"GeoCoordinates\", latitude: b.geo.lat, longitude: b.geo.lng } } : {}),\n };\n}\nfunction ContactRender({ block }: BlockRenderProps<Contact>) {\n return (\n <section className=\"xicms-contact\">\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n <dl className=\"xicms-contact__list\">\n {block.address && (\n <div className=\"xicms-contact__row\">\n <dt>Adres</dt>\n <dd data-xicms-edit=\"address\">{block.address}</dd>\n </div>\n )}\n {block.phone && (\n <div className=\"xicms-contact__row\">\n <dt>Telefoon</dt>\n <dd><a href={`tel:${block.phone.replace(/\\s+/g, \"\")}`}>{block.phone}</a></dd>\n </div>\n )}\n {block.email && (\n <div className=\"xicms-contact__row\">\n <dt>E-mail</dt>\n <dd><a href={`mailto:${block.email}`}>{block.email}</a></dd>\n </div>\n )}\n {block.hours && (\n <div className=\"xicms-contact__row\">\n <dt>Openingstijden</dt>\n <dd data-xicms-edit=\"hours\">{block.hours}</dd>\n </div>\n )}\n </dl>\n {block.jsonLd && (\n <script\n type=\"application/ld+json\"\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: jsonLdHtml(contactJsonLd(block)) }}\n />\n )}\n </section>\n );\n}\nexport const contactBlock = defineBlock({\n type: \"contact\",\n schema: ContactBlockSchema,\n Render: ContactRender,\n label: \"Contactgegevens\",\n icon: \"📇\",\n defaults: () => ({ heading: \"Contact\", jsonLd: true }),\n});\n\n/* ── Social ──────────────────────────────────────────────────────────────── */\ntype Social = z.infer<typeof SocialBlockSchema>;\n\n/**\n * Minimalistische, monochrome merk-iconen (currentColor) — geen icon-dependency nodig.\n * Onbekende platformen vallen terug op de tekstweergave, dus niets breekt.\n */\nfunction SocialIcon({ platform }: { platform: string }) {\n const p = platform.toLowerCase();\n const common = { width: 22, height: 22, viewBox: \"0 0 24 24\", \"aria-hidden\": true } as const;\n if (p.includes(\"instagram\")) {\n return (\n <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"3.6\" />\n <circle cx=\"16.7\" cy=\"7.3\" r=\"1.1\" fill=\"currentColor\" stroke=\"none\" />\n </svg>\n );\n }\n if (p.includes(\"facebook\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <path d=\"M13.5 20v-6.2h2.1l.4-2.6h-2.5V9.6c0-.8.3-1.3 1.3-1.3h1.3V6c-.3 0-1-.1-1.9-.1-2 0-3.3 1.2-3.3 3.4v1.9H8.7v2.6h2.2V20h2.6z\" />\n </svg>\n );\n }\n if (p.includes(\"linkedin\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <circle cx=\"6\" cy=\"6.4\" r=\"1.8\" />\n <rect x=\"4.6\" y=\"9.6\" width=\"2.8\" height=\"9.9\" />\n <path d=\"M10.4 9.6h2.7v1.4c.5-.9 1.6-1.7 3.1-1.7 2.4 0 3.7 1.5 3.7 4.3v5.9h-2.8v-5.4c0-1.5-.6-2.3-1.7-2.3-1.2 0-2.2.8-2.2 2.4v5.3h-2.8V9.6z\" />\n </svg>\n );\n }\n if (p.includes(\"twitter\") || p === \"x\" || p.startsWith(\"x \") || p.includes(\"(x)\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <path d=\"M4.5 4.5h3.6l4.1 5.6 4.7-5.6h2.6l-6.1 7.2 6.4 8.4h-3.6l-4.4-6-5 6H4.2l6.5-7.7-6.2-7.9z\" />\n </svg>\n );\n }\n if (p.includes(\"youtube\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <rect x=\"3.2\" y=\"6.2\" width=\"17.6\" height=\"11.6\" rx=\"3.2\" />\n <path d=\"M10.4 9.4v5.2l4.8-2.6z\" fill=\"var(--xicms-surface, #fff)\" />\n </svg>\n );\n }\n if (p.includes(\"whatsapp\")) {\n return (\n <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n <path d=\"M12 4.2a7.8 7.8 0 0 0-6.7 11.8L4.4 19.6l3.7-.9A7.8 7.8 0 1 0 12 4.2z\" />\n <path d=\"M9.3 8.9c.7 2.4 2.6 4.4 5 5l1-1.2 2 1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n );\n }\n if (p.includes(\"tiktok\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <path d=\"M14.5 4h2.6c.2 1.7 1.3 3 3 3.3v2.6a6.6 6.6 0 0 1-3.2-1v5.7a5.4 5.4 0 1 1-5.4-5.4c.2 0 .5 0 .7.1v2.8a2.6 2.6 0 1 0 2.3 2.6V4z\" />\n </svg>\n );\n }\n return null;\n}\n\nfunction SocialRender({ block }: BlockRenderProps<Social>) {\n const items = (block.items ?? []).filter((i) => i.href && i.platform);\n if (items.length === 0) return null;\n return (\n <section className=\"xicms-social\">\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n <ul className=\"xicms-social__list\">\n {items.map((it, i) => {\n // Als functie aangeroepen (geen hooks) zodat `null` echt null is — een JSX-element\n // zou altijd truthy zijn en de tekst-fallback nooit tonen.\n const icon = SocialIcon({ platform: it.platform });\n return (\n <li key={i}>\n <a href={it.href} rel=\"noopener noreferrer\" target=\"_blank\" aria-label={it.platform} title={it.platform} className={icon ? \"xicms-social__iconlink\" : undefined}>\n {icon ?? it.platform}\n </a>\n </li>\n );\n })}\n </ul>\n </section>\n );\n}\nexport const socialBlock = defineBlock({\n type: \"social\",\n schema: SocialBlockSchema,\n Render: SocialRender,\n label: \"Social-links\",\n icon: \"🔗\",\n defaults: () => ({ items: [{ platform: \"Instagram\", href: \"\" }] }),\n});\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Contact.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { jsonLdHtml } from \"./jsonld\";\nimport { ContactBlockSchema, SocialBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\n\n/* ── Contact ─────────────────────────────────────────────────────────────── */\ntype Contact = z.infer<typeof ContactBlockSchema>;\nexport function contactJsonLd(b: Contact): Record<string, unknown> {\n return {\n \"@context\": \"https://schema.org\",\n \"@type\": \"LocalBusiness\",\n // Gedeeld relatief @id: contact-, openingstijden- en layout-JSON-LD beschrijven hetzelfde\n // bedrijf; zonder @id ziet Google drie conflicterende LocalBusiness-entiteiten per pagina.\n \"@id\": \"#business\",\n // Bewust géén `name: heading` — de blokkop is meestal \"Contact\" en zou als bedrijfsnaam in de\n // samengevoegde #business-entiteit belanden; de naam komt uit de layout-brede businessJsonLd.\n ...(b.address ? { address: b.address } : {}),\n ...(b.phone ? { telephone: b.phone } : {}),\n ...(b.email ? { email: b.email } : {}),\n ...(b.geo ? { geo: { \"@type\": \"GeoCoordinates\", latitude: b.geo.lat, longitude: b.geo.lng } } : {}),\n };\n}\nfunction ContactRender({ block }: BlockRenderProps<Contact>) {\n return (\n <section className=\"xicms-contact\">\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n <dl className=\"xicms-contact__list\">\n {block.address && (\n <div className=\"xicms-contact__row\">\n <dt>Adres</dt>\n <dd data-xicms-edit=\"address\">{block.address}</dd>\n </div>\n )}\n {block.phone && (\n <div className=\"xicms-contact__row\">\n <dt>Telefoon</dt>\n <dd><a href={`tel:${block.phone.replace(/\\s+/g, \"\")}`} data-xicms-edit=\"phone\">{block.phone}</a></dd>\n </div>\n )}\n {block.email && (\n <div className=\"xicms-contact__row\">\n <dt>E-mail</dt>\n <dd><a href={`mailto:${block.email}`} data-xicms-edit=\"email\">{block.email}</a></dd>\n </div>\n )}\n {block.hours && (\n <div className=\"xicms-contact__row\">\n <dt>Openingstijden</dt>\n <dd data-xicms-edit=\"hours\">{block.hours}</dd>\n </div>\n )}\n </dl>\n {block.jsonLd && (\n <script\n type=\"application/ld+json\"\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: jsonLdHtml(contactJsonLd(block)) }}\n />\n )}\n </section>\n );\n}\nexport const contactBlock = defineBlock({\n type: \"contact\",\n schema: ContactBlockSchema,\n Render: ContactRender,\n label: \"Contactgegevens\",\n icon: \"📇\",\n defaults: () => ({ heading: \"Contact\", jsonLd: true }),\n});\n\n/* ── Social ──────────────────────────────────────────────────────────────── */\ntype Social = z.infer<typeof SocialBlockSchema>;\n\n/**\n * Minimalistische, monochrome merk-iconen (currentColor) — geen icon-dependency nodig.\n * Onbekende platformen vallen terug op de tekstweergave, dus niets breekt.\n */\nfunction SocialIcon({ platform }: { platform: string }) {\n const p = platform.toLowerCase();\n const common = { width: 22, height: 22, viewBox: \"0 0 24 24\", \"aria-hidden\": true } as const;\n if (p.includes(\"instagram\")) {\n return (\n <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"3.6\" />\n <circle cx=\"16.7\" cy=\"7.3\" r=\"1.1\" fill=\"currentColor\" stroke=\"none\" />\n </svg>\n );\n }\n if (p.includes(\"facebook\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <path d=\"M13.5 20v-6.2h2.1l.4-2.6h-2.5V9.6c0-.8.3-1.3 1.3-1.3h1.3V6c-.3 0-1-.1-1.9-.1-2 0-3.3 1.2-3.3 3.4v1.9H8.7v2.6h2.2V20h2.6z\" />\n </svg>\n );\n }\n if (p.includes(\"linkedin\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <circle cx=\"6\" cy=\"6.4\" r=\"1.8\" />\n <rect x=\"4.6\" y=\"9.6\" width=\"2.8\" height=\"9.9\" />\n <path d=\"M10.4 9.6h2.7v1.4c.5-.9 1.6-1.7 3.1-1.7 2.4 0 3.7 1.5 3.7 4.3v5.9h-2.8v-5.4c0-1.5-.6-2.3-1.7-2.3-1.2 0-2.2.8-2.2 2.4v5.3h-2.8V9.6z\" />\n </svg>\n );\n }\n if (p.includes(\"twitter\") || p === \"x\" || p.startsWith(\"x \") || p.includes(\"(x)\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <path d=\"M4.5 4.5h3.6l4.1 5.6 4.7-5.6h2.6l-6.1 7.2 6.4 8.4h-3.6l-4.4-6-5 6H4.2l6.5-7.7-6.2-7.9z\" />\n </svg>\n );\n }\n if (p.includes(\"youtube\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <rect x=\"3.2\" y=\"6.2\" width=\"17.6\" height=\"11.6\" rx=\"3.2\" />\n <path d=\"M10.4 9.4v5.2l4.8-2.6z\" fill=\"var(--xicms-surface, #fff)\" />\n </svg>\n );\n }\n if (p.includes(\"whatsapp\")) {\n return (\n <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n <path d=\"M12 4.2a7.8 7.8 0 0 0-6.7 11.8L4.4 19.6l3.7-.9A7.8 7.8 0 1 0 12 4.2z\" />\n <path d=\"M9.3 8.9c.7 2.4 2.6 4.4 5 5l1-1.2 2 1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n );\n }\n if (p.includes(\"tiktok\")) {\n return (\n <svg {...common} fill=\"currentColor\">\n <path d=\"M14.5 4h2.6c.2 1.7 1.3 3 3 3.3v2.6a6.6 6.6 0 0 1-3.2-1v5.7a5.4 5.4 0 1 1-5.4-5.4c.2 0 .5 0 .7.1v2.8a2.6 2.6 0 1 0 2.3 2.6V4z\" />\n </svg>\n );\n }\n return null;\n}\n\nfunction SocialRender({ block }: BlockRenderProps<Social>) {\n const items = (block.items ?? []).filter((i) => i.href && i.platform);\n if (items.length === 0) return null;\n return (\n <section className=\"xicms-social\">\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n <ul className=\"xicms-social__list\">\n {items.map((it, i) => {\n // Als functie aangeroepen (geen hooks) zodat `null` echt null is — een JSX-element\n // zou altijd truthy zijn en de tekst-fallback nooit tonen.\n const icon = SocialIcon({ platform: it.platform });\n return (\n <li key={i}>\n <a href={it.href} rel=\"noopener noreferrer\" target=\"_blank\" aria-label={it.platform} title={it.platform} className={icon ? \"xicms-social__iconlink\" : undefined}>\n {icon ?? <span data-xicms-edit={`items.${i}.platform`}>{it.platform}</span>}\n </a>\n </li>\n );\n })}\n </ul>\n </section>\n );\n}\nexport const socialBlock = defineBlock({\n type: \"social\",\n schema: SocialBlockSchema,\n Render: SocialRender,\n label: \"Social-links\",\n icon: \"🔗\",\n defaults: () => ({ items: [{ platform: \"Instagram\", href: \"\" }] }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -16,7 +16,7 @@ function CtaRender({ block }) {
|
|
|
16
16
|
style: { position: "sticky", bottom: 0, zIndex: 30, padding: "0.75rem 1rem", background: "var(--color-background-card)", borderTop: "1px solid var(--color-border)", flexWrap: "wrap" },
|
|
17
17
|
children: [
|
|
18
18
|
/* @__PURE__ */ jsx(Text, { weight: "bold", children: block.title || block.text }),
|
|
19
|
-
/* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, size: "md" })
|
|
19
|
+
/* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, size: "md", editField: "buttonLabel" })
|
|
20
20
|
]
|
|
21
21
|
}
|
|
22
22
|
);
|
|
@@ -31,8 +31,8 @@ function CtaRender({ block }) {
|
|
|
31
31
|
block.title && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "title", children: block.title }),
|
|
32
32
|
block.text && /* @__PURE__ */ jsx(Text, { type: "large", color: "secondary", "data-xicms-edit": "text", children: block.text }),
|
|
33
33
|
/* @__PURE__ */ jsxs(HStack, { gap: 2, hAlign: "center", style: { flexWrap: "wrap" }, children: [
|
|
34
|
-
/* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant }),
|
|
35
|
-
block.button2Label && /* @__PURE__ */ jsx(Btn, { label: block.button2Label, href: block.button2Href ?? "#", variant: "outline" })
|
|
34
|
+
/* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, editField: "buttonLabel" }),
|
|
35
|
+
block.button2Label && /* @__PURE__ */ jsx(Btn, { label: block.button2Label, href: block.button2Href ?? "#", variant: "outline", editField: "button2Label" })
|
|
36
36
|
] })
|
|
37
37
|
] })
|
|
38
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Cta.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CtaBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Cta = z.infer<typeof CtaBlockSchema>;\n\nfunction CtaRender({ block }: BlockRenderProps<Cta>) {\n if (block.sticky) {\n return (\n <HStack\n gap={3}\n vAlign=\"center\"\n hAlign=\"between\"\n role=\"region\"\n aria-label={block.title || \"Call-to-action\"}\n style={{ position: \"sticky\", bottom: 0, zIndex: 30, padding: \"0.75rem 1rem\", background: \"var(--color-background-card)\", borderTop: \"1px solid var(--color-border)\", flexWrap: \"wrap\" }}\n >\n <Text weight=\"bold\">{block.title || block.text}</Text>\n <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} size=\"md\" />\n </HStack>\n );\n }\n return (\n <Card\n padding={6}\n variant={block.backgroundColor ? \"default\" : \"muted\"}\n style={block.backgroundColor ? { background: block.backgroundColor } : undefined}\n >\n <VStack gap={3} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n {block.title && <Heading level={2} data-xicms-edit=\"title\">{block.title}</Heading>}\n {block.text && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"text\">{block.text}</Text>}\n <HStack gap={2} hAlign=\"center\" style={{ flexWrap: \"wrap\" }}>\n <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} />\n {block.button2Label && (\n <Btn label={block.button2Label} href={block.button2Href ?? \"#\"} variant=\"outline\" />\n )}\n </HStack>\n </VStack>\n </Card>\n );\n}\n\nexport const ctaBlock = defineBlock({\n type: \"cta\",\n fields: { buttonVariant: { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n schema: CtaBlockSchema,\n Render: CtaRender,\n label: \"Call-to-action\",\n icon: \"📣\",\n defaults: () => ({ title: \"Klaar om te starten?\", buttonLabel: \"Neem contact op\", buttonHref: \"#contact\", buttonVariant: \"primary\" }),\n});\n"],"mappings":";AAYM,SAQE,KARF;AATN,SAAS,sBAAsB;AAC/B,SAAS,mBAA0C;AACnD,SAAS,QAAQ,QAAQ,MAAM,SAAS,MAAM,WAAW;AAIzD,SAAS,UAAU,EAAE,MAAM,GAA0B;AACnD,MAAI,MAAM,QAAQ;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,QAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAY,MAAM,SAAS;AAAA,QAC3B,OAAO,EAAE,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,SAAS,gBAAgB,YAAY,gCAAgC,WAAW,iCAAiC,UAAU,OAAO;AAAA,QAEtL;AAAA,8BAAC,QAAK,QAAO,QAAQ,gBAAM,SAAS,MAAM,MAAK;AAAA,UAC/C,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,MAAK,MAAK;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Cta.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CtaBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Cta = z.infer<typeof CtaBlockSchema>;\n\nfunction CtaRender({ block }: BlockRenderProps<Cta>) {\n if (block.sticky) {\n return (\n <HStack\n gap={3}\n vAlign=\"center\"\n hAlign=\"between\"\n role=\"region\"\n aria-label={block.title || \"Call-to-action\"}\n style={{ position: \"sticky\", bottom: 0, zIndex: 30, padding: \"0.75rem 1rem\", background: \"var(--color-background-card)\", borderTop: \"1px solid var(--color-border)\", flexWrap: \"wrap\" }}\n >\n <Text weight=\"bold\">{block.title || block.text}</Text>\n <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} size=\"md\" editField=\"buttonLabel\" />\n </HStack>\n );\n }\n return (\n <Card\n padding={6}\n variant={block.backgroundColor ? \"default\" : \"muted\"}\n style={block.backgroundColor ? { background: block.backgroundColor } : undefined}\n >\n <VStack gap={3} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n {block.title && <Heading level={2} data-xicms-edit=\"title\">{block.title}</Heading>}\n {block.text && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"text\">{block.text}</Text>}\n <HStack gap={2} hAlign=\"center\" style={{ flexWrap: \"wrap\" }}>\n <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} editField=\"buttonLabel\" />\n {block.button2Label && (\n <Btn label={block.button2Label} href={block.button2Href ?? \"#\"} variant=\"outline\" editField=\"button2Label\" />\n )}\n </HStack>\n </VStack>\n </Card>\n );\n}\n\nexport const ctaBlock = defineBlock({\n type: \"cta\",\n fields: { buttonVariant: { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n schema: CtaBlockSchema,\n Render: CtaRender,\n label: \"Call-to-action\",\n icon: \"📣\",\n defaults: () => ({ title: \"Klaar om te starten?\", buttonLabel: \"Neem contact op\", buttonHref: \"#contact\", buttonVariant: \"primary\" }),\n});\n"],"mappings":";AAYM,SAQE,KARF;AATN,SAAS,sBAAsB;AAC/B,SAAS,mBAA0C;AACnD,SAAS,QAAQ,QAAQ,MAAM,SAAS,MAAM,WAAW;AAIzD,SAAS,UAAU,EAAE,MAAM,GAA0B;AACnD,MAAI,MAAM,QAAQ;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,QAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAY,MAAM,SAAS;AAAA,QAC3B,OAAO,EAAE,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,SAAS,gBAAgB,YAAY,gCAAgC,WAAW,iCAAiC,UAAU,OAAO;AAAA,QAEtL;AAAA,8BAAC,QAAK,QAAO,QAAQ,gBAAM,SAAS,MAAM,MAAK;AAAA,UAC/C,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,MAAK,MAAK,WAAU,eAAc;AAAA;AAAA;AAAA,IACzH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,SAAS,MAAM,kBAAkB,YAAY;AAAA,MAC7C,OAAO,MAAM,kBAAkB,EAAE,YAAY,MAAM,gBAAgB,IAAI;AAAA,MAEvE,+BAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,cAAM,SAAS,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,SAAS,gBAAM,OAAM;AAAA,QACvE,MAAM,QAAQ,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,QACvF,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,UAAU,OAAO,GACxD;AAAA,8BAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,WAAU,eAAc;AAAA,UAC5G,MAAM,gBACL,oBAAC,OAAI,OAAO,MAAM,cAAc,MAAM,MAAM,eAAe,KAAK,SAAQ,WAAU,WAAU,gBAAe;AAAA,WAE/G;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,WAAW,YAAY;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,WAAW,OAAO,UAAU,GAAG,EAAE,OAAO,aAAa,OAAO,YAAY,GAAG,EAAE,OAAO,WAAW,OAAO,UAAU,CAAC,EAAE,EAAE;AAAA,EACnL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,wBAAwB,aAAa,mBAAmB,YAAY,YAAY,eAAe,UAAU;AACrI,CAAC;","names":[]}
|
|
@@ -4,15 +4,15 @@ import { defineBlock } from "../registry.js";
|
|
|
4
4
|
import { Heading } from "../ui/index.js";
|
|
5
5
|
import { fileIcon } from "./lib/fileIcon.js";
|
|
6
6
|
function DownloadsRender({ block }) {
|
|
7
|
-
const items = (block.items ?? []).filter((d) => d.label && d.href);
|
|
7
|
+
const items = (block.items ?? []).map((d, i) => ({ ...d, _i: i })).filter((d) => d.label && d.href);
|
|
8
8
|
if (items.length === 0) return null;
|
|
9
9
|
return /* @__PURE__ */ jsxs("section", { className: "xicms-downloads", children: [
|
|
10
10
|
block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
|
|
11
|
-
/* @__PURE__ */ jsx("ul", { className: "xicms-downloads__list", children: items.map((d
|
|
11
|
+
/* @__PURE__ */ jsx("ul", { className: "xicms-downloads__list", children: items.map((d) => /* @__PURE__ */ jsx("li", { className: "xicms-downloads__item", children: /* @__PURE__ */ jsxs("a", { className: "xicms-downloads__link", href: d.href, download: true, children: [
|
|
12
12
|
/* @__PURE__ */ jsx("span", { className: "xicms-downloads__icon", "aria-hidden": "true", children: fileIcon(d.href) }),
|
|
13
|
-
/* @__PURE__ */ jsx("span", { className: "xicms-downloads__label", children: d.label }),
|
|
14
|
-
d.meta && /* @__PURE__ */ jsx("span", { className: "xicms-downloads__meta", children: d.meta })
|
|
15
|
-
] }) },
|
|
13
|
+
/* @__PURE__ */ jsx("span", { className: "xicms-downloads__label", "data-xicms-edit": `items.${d._i}.label`, children: d.label }),
|
|
14
|
+
d.meta && /* @__PURE__ */ jsx("span", { className: "xicms-downloads__meta", "data-xicms-edit": `items.${d._i}.meta`, children: d.meta })
|
|
15
|
+
] }) }, d._i)) })
|
|
16
16
|
] });
|
|
17
17
|
}
|
|
18
18
|
const downloadsBlock = defineBlock({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Downloads.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { DownloadsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\nimport { fileIcon } from \"./lib/fileIcon\";\n\ntype Downloads = z.infer<typeof DownloadsBlockSchema>;\n\n/** Downloadbare documenten (brochures, prijslijsten, voorwaarden). Server-safe. */\nfunction DownloadsRender({ block }: BlockRenderProps<Downloads>) {\n const items = (block.items ?? []).filter((d) => d.label && d.href);\n if (items.length === 0) return null;\n return (\n <section className=\"xicms-downloads\">\n {
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Downloads.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { DownloadsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\nimport { fileIcon } from \"./lib/fileIcon\";\n\ntype Downloads = z.infer<typeof DownloadsBlockSchema>;\n\n/** Downloadbare documenten (brochures, prijslijsten, voorwaarden). Server-safe. */\nfunction DownloadsRender({ block }: BlockRenderProps<Downloads>) {\n // _i = index in de OORSPRONKELIJKE array — de lijst wordt gefilterd op label && href.\n const items = (block.items ?? []).map((d, i) => ({ ...d, _i: i })).filter((d) => d.label && d.href);\n if (items.length === 0) return null;\n return (\n <section className=\"xicms-downloads\">\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n <ul className=\"xicms-downloads__list\">\n {items.map((d) => (\n <li key={d._i} className=\"xicms-downloads__item\">\n <a className=\"xicms-downloads__link\" href={d.href} download>\n <span className=\"xicms-downloads__icon\" aria-hidden=\"true\">{fileIcon(d.href)}</span>\n <span className=\"xicms-downloads__label\" data-xicms-edit={`items.${d._i}.label`}>{d.label}</span>\n {d.meta && <span className=\"xicms-downloads__meta\" data-xicms-edit={`items.${d._i}.meta`}>{d.meta}</span>}\n </a>\n </li>\n ))}\n </ul>\n </section>\n );\n}\n\nexport const downloadsBlock = defineBlock({\n type: \"downloads\",\n schema: DownloadsBlockSchema,\n Render: DownloadsRender,\n label: \"Downloads\",\n icon: \"📥\",\n defaults: () => ({\n heading: \"Downloads\",\n items: [{ label: \"Brochure (PDF)\", href: \"\", meta: \"PDF\" }],\n }),\n});\n"],"mappings":"AAewB,cAIZ,YAJY;AAdxB,SAAS,4BAA4B;AACrC,SAAS,mBAA0C;AACnD,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAKzB,SAAS,gBAAgB,EAAE,MAAM,GAAgC;AAE/D,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI;AAClG,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAAC,aAAQ,WAAU,mBAChB;AAAA,UAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9E,oBAAC,QAAG,WAAU,yBACX,gBAAM,IAAI,CAAC,MACV,oBAAC,QAAc,WAAU,yBACvB,+BAAC,OAAE,WAAU,yBAAwB,MAAM,EAAE,MAAM,UAAQ,MACzD;AAAA,0BAAC,UAAK,WAAU,yBAAwB,eAAY,QAAQ,mBAAS,EAAE,IAAI,GAAE;AAAA,MAC7E,oBAAC,UAAK,WAAU,0BAAyB,mBAAiB,SAAS,EAAE,EAAE,UAAW,YAAE,OAAM;AAAA,MACzF,EAAE,QAAQ,oBAAC,UAAK,WAAU,yBAAwB,mBAAiB,SAAS,EAAE,EAAE,SAAU,YAAE,MAAK;AAAA,OACpG,KALO,EAAE,EAMX,CACD,GACH;AAAA,KACF;AAEJ;AAEO,MAAM,iBAAiB,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO;AAAA,IACf,SAAS;AAAA,IACT,OAAO,CAAC,EAAE,OAAO,kBAAkB,MAAM,IAAI,MAAM,MAAM,CAAC;AAAA,EAC5D;AACF,CAAC;","names":[]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { ButtonsBlockSchema, QuoteBlockSchema, DividerBlockSchema } from "../../schema/blocks.js";
|
|
4
4
|
import { defineBlock } from "../registry.js";
|
|
5
5
|
import { HStack, VStack, Card, Text, Btn, Divider } from "../ui/index.js";
|
|
6
6
|
function ButtonsRender({ block }) {
|
|
7
|
-
const items = (block.items ?? []).filter((b) => b.label);
|
|
7
|
+
const items = (block.items ?? []).map((b, i) => ({ ...b, _i: i })).filter((b) => b.label);
|
|
8
8
|
if (items.length === 0) return null;
|
|
9
9
|
const hAlign = block.align === "center" ? "center" : block.align === "right" ? "end" : "start";
|
|
10
|
-
return /* @__PURE__ */ jsx(HStack, { gap: 2, hAlign, style: { flexWrap: "wrap" }, children: items.map((b
|
|
10
|
+
return /* @__PURE__ */ jsx(HStack, { gap: 2, hAlign, style: { flexWrap: "wrap" }, children: items.map((b) => /* @__PURE__ */ jsx(Btn, { label: b.label, href: b.href, variant: b.variant, editField: `items.${b._i}.label` }, b._i)) });
|
|
11
11
|
}
|
|
12
12
|
const buttonsBlock = defineBlock({
|
|
13
13
|
type: "buttons",
|
|
@@ -28,8 +28,11 @@ function QuoteRender({ block }) {
|
|
|
28
28
|
] }),
|
|
29
29
|
(block.author || block.role) && /* @__PURE__ */ jsxs(Text, { as: "label", color: "secondary", children: [
|
|
30
30
|
"\u2014 ",
|
|
31
|
-
block.author,
|
|
32
|
-
block.role ?
|
|
31
|
+
/* @__PURE__ */ jsx("span", { "data-xicms-edit": "author", children: block.author }),
|
|
32
|
+
block.role ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
33
|
+
" \xB7 ",
|
|
34
|
+
/* @__PURE__ */ jsx("span", { "data-xicms-edit": "role", children: block.role })
|
|
35
|
+
] }) : ""
|
|
33
36
|
] })
|
|
34
37
|
] }) });
|
|
35
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Elements.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { ButtonsBlockSchema, QuoteBlockSchema, DividerBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { HStack, VStack, Card, Text, Btn, Divider } from \"../ui\";\n\n/* ── Buttons (knopgroep) ─────────────────────────────────────────────────── */\ntype Buttons = z.infer<typeof ButtonsBlockSchema>;\nfunction ButtonsRender({ block }: BlockRenderProps<Buttons>) {\n const items = (block.items ?? []).filter((b) => b.label);\n if (items.length === 0) return null;\n const hAlign = block.align === \"center\" ? \"center\" : block.align === \"right\" ? \"end\" : \"start\";\n return (\n <HStack gap={2} hAlign={hAlign} style={{ flexWrap: \"wrap\" }}>\n {items.map((b
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Elements.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { ButtonsBlockSchema, QuoteBlockSchema, DividerBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { HStack, VStack, Card, Text, Btn, Divider } from \"../ui\";\n\n/* ── Buttons (knopgroep) ─────────────────────────────────────────────────── */\ntype Buttons = z.infer<typeof ButtonsBlockSchema>;\nfunction ButtonsRender({ block }: BlockRenderProps<Buttons>) {\n // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n const items = (block.items ?? []).map((b, i) => ({ ...b, _i: i })).filter((b) => b.label);\n if (items.length === 0) return null;\n const hAlign = block.align === \"center\" ? \"center\" : block.align === \"right\" ? \"end\" : \"start\";\n return (\n <HStack gap={2} hAlign={hAlign} style={{ flexWrap: \"wrap\" }}>\n {items.map((b) => (\n <Btn key={b._i} label={b.label} href={b.href} variant={b.variant} editField={`items.${b._i}.label`} />\n ))}\n </HStack>\n );\n}\nexport const buttonsBlock = defineBlock({\n type: \"buttons\",\n fields: { \"items.variant\": { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n schema: ButtonsBlockSchema,\n Render: ButtonsRender,\n label: \"Knoppen\",\n icon: \"🔘\",\n defaults: () => ({ align: \"left\", items: [{ label: \"Knop\", href: \"#\", variant: \"primary\" }] }),\n});\n\n/* ── Quote (uitspraak) ───────────────────────────────────────────────────── */\ntype Quote = z.infer<typeof QuoteBlockSchema>;\nfunction QuoteRender({ block }: BlockRenderProps<Quote>) {\n if (!block.text) return null;\n return (\n <Card padding={5} variant=\"muted\">\n <VStack gap={2} as=\"figure\" style={{ margin: 0 }}>\n <Text type=\"large\" as=\"p\" style={{ fontStyle: \"italic\" }}>“<span data-xicms-edit=\"text\">{block.text}</span>”</Text>\n {(block.author || block.role) && (\n <Text as=\"label\" color=\"secondary\">\n — <span data-xicms-edit=\"author\">{block.author}</span>\n {block.role ? <> · <span data-xicms-edit=\"role\">{block.role}</span></> : \"\"}\n </Text>\n )}\n </VStack>\n </Card>\n );\n}\nexport const quoteBlock = defineBlock({\n type: \"quote\",\n schema: QuoteBlockSchema,\n Render: QuoteRender,\n label: \"Uitspraak\",\n icon: \"❝\",\n defaults: () => ({ text: \"Een krachtige uitspraak.\", author: \"\" }),\n});\n\n/* ── Divider (scheiding) ─────────────────────────────────────────────────── */\ntype DividerBlk = z.infer<typeof DividerBlockSchema>;\nfunction DividerRender({ block }: BlockRenderProps<DividerBlk>) {\n const pad = block.spacing === \"sm\" ? \"0.75rem\" : block.spacing === \"lg\" ? \"3rem\" : \"1.5rem\";\n if (block.variant === \"space\") return <div style={{ height: pad }} aria-hidden=\"true\" />;\n if (block.variant === \"dots\") {\n return (\n <div style={{ textAlign: \"center\", padding: `${pad} 0`, color: \"var(--color-text-secondary)\", letterSpacing: \"0.5em\" }} aria-hidden=\"true\">\n • • •\n </div>\n );\n }\n return <div style={{ padding: `${pad} 0` }}><Divider variant=\"subtle\" /></div>;\n}\nexport const dividerBlock = defineBlock({\n type: \"divider\",\n schema: DividerBlockSchema,\n Render: DividerRender,\n label: \"Scheiding\",\n icon: \"➖\",\n defaults: () => ({ variant: \"line\", spacing: \"md\" }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -56,7 +56,7 @@ function HeroRender({ block }) {
|
|
|
56
56
|
block.eyebrow && /* @__PURE__ */ jsx(Text, { type: "label", className: "xicms-hero__eyebrow", style: light, "data-xicms-edit": "eyebrow", children: block.eyebrow }),
|
|
57
57
|
block.title && /* @__PURE__ */ jsx(Heading, { level: block.headingLevel === "2" ? 2 : 1, type: "display-1", className: "xicms-hero__title", style: light, "data-xicms-edit": "title", children: block.title }),
|
|
58
58
|
block.subtitle && /* @__PURE__ */ jsx(Text, { type: "large", className: "xicms-hero__sub", style: light, "data-xicms-edit": "subtitle", children: block.subtitle }),
|
|
59
|
-
buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.filter((b) => b.label).map((b
|
|
59
|
+
buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => /* @__PURE__ */ jsx(Btn, { label: b.label, href: b.href, variant: b.variant, size: "lg", editField: `buttons.${b._i}.label` }, b._i)) })
|
|
60
60
|
] }),
|
|
61
61
|
block.videoUrl && /* @__PURE__ */ jsx(
|
|
62
62
|
"button",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Hero.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport type { z } from \"zod\";\nimport { HeroBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Btn, Heading, Text } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Hero = z.infer<typeof HeroBlockSchema>;\n\nfunction HeroRender({ block }: BlockRenderProps<Hero>) {\n // Achtergrondvideo WCAG-proof (2.2.2): geen autoPlay-attribuut (hydration-veilig) — playback\n // start in een effect, en alléén zonder reduced-motion-voorkeur. Altijd een pauzeknop, en\n // imageUrl dient als poster (direct beeld i.p.v. zwart vlak → betere LCP).\n const videoRef = useRef<HTMLVideoElement>(null);\n const [playing, setPlaying] = useState(false);\n useEffect(() => {\n const v = videoRef.current;\n if (!v) return;\n if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) return;\n v.play().then(() => setPlaying(true)).catch(() => undefined);\n }, [block.videoUrl]);\n const toggleVideo = () => {\n const v = videoRef.current;\n if (!v) return;\n if (v.paused) v.play().then(() => setPlaying(true)).catch(() => undefined);\n else {\n v.pause();\n setPlaying(false);\n }\n };\n const overlay =\n block.overlayOpacity > 0\n ? { background: block.overlayColor ?? \"#000000\", opacity: block.overlayOpacity / 100 }\n : null;\n // Beeld/video als dekkende achtergrond (niet bij height \"auto\"): dan moet de tekst licht zijn.\n const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== \"auto\";\n const light: CSSProperties | undefined = coverMedia\n ? { color: \"#ffffff\", textShadow: \"0 2px 14px rgba(0,0,0,.45)\" }\n : undefined;\n const buttons = block.buttons ?? [];\n\n return (\n <section\n className=\"xicms-hero\"\n data-align={block.align}\n data-valign={block.vAlign}\n data-height={block.minHeight}\n data-media={coverMedia ? \"cover\" : undefined}\n >\n {block.videoUrl ? (\n <video\n ref={videoRef}\n className=\"xicms-hero__media\"\n src={block.videoUrl}\n poster={block.imageUrl || undefined}\n muted\n loop\n playsInline\n preload=\"metadata\"\n aria-hidden=\"true\"\n />\n ) : block.imageUrl ? (\n <Img src={block.imageUrl} alt=\"\" className=\"xicms-hero__media\" width={1600} height={900} sizes=\"100vw\" priority editField=\"imageUrl\" editFill />\n ) : null}\n {overlay && <div className=\"xicms-hero__overlay\" style={overlay} aria-hidden=\"true\" />}\n {/* Gradient (donker onderaan → transparant): leesbare tekst zonder de hele foto te dimmen. */}\n {block.overlayGradient && coverMedia && <div className=\"xicms-hero__gradient\" aria-hidden=\"true\" />}\n <div className=\"xicms-hero__inner\">\n {block.eyebrow && (\n <Text type=\"label\" className=\"xicms-hero__eyebrow\" style={light} data-xicms-edit=\"eyebrow\">\n {block.eyebrow}\n </Text>\n )}\n {block.title && (\n <Heading level={block.headingLevel === \"2\" ? 2 : 1} type=\"display-1\" className=\"xicms-hero__title\" style={light} data-xicms-edit=\"title\">\n {block.title}\n </Heading>\n )}\n {block.subtitle && (\n <Text type=\"large\" className=\"xicms-hero__sub\" style={light} data-xicms-edit=\"subtitle\">\n {block.subtitle}\n </Text>\n )}\n {buttons.length > 0 && (\n <div className=\"xicms-hero__buttons\">\n {/* Via Astryx Btn (zelfde systeem als Cta/Pricing/…): volgt de site-theming en de\n outline→ghost-variantmapping — geen tweede, handmatig te onderhouden knop-CSS. */}\n {buttons.filter((b) => b.label).map((b
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Hero.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport type { z } from \"zod\";\nimport { HeroBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Btn, Heading, Text } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Hero = z.infer<typeof HeroBlockSchema>;\n\nfunction HeroRender({ block }: BlockRenderProps<Hero>) {\n // Achtergrondvideo WCAG-proof (2.2.2): geen autoPlay-attribuut (hydration-veilig) — playback\n // start in een effect, en alléén zonder reduced-motion-voorkeur. Altijd een pauzeknop, en\n // imageUrl dient als poster (direct beeld i.p.v. zwart vlak → betere LCP).\n const videoRef = useRef<HTMLVideoElement>(null);\n const [playing, setPlaying] = useState(false);\n useEffect(() => {\n const v = videoRef.current;\n if (!v) return;\n if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) return;\n v.play().then(() => setPlaying(true)).catch(() => undefined);\n }, [block.videoUrl]);\n const toggleVideo = () => {\n const v = videoRef.current;\n if (!v) return;\n if (v.paused) v.play().then(() => setPlaying(true)).catch(() => undefined);\n else {\n v.pause();\n setPlaying(false);\n }\n };\n const overlay =\n block.overlayOpacity > 0\n ? { background: block.overlayColor ?? \"#000000\", opacity: block.overlayOpacity / 100 }\n : null;\n // Beeld/video als dekkende achtergrond (niet bij height \"auto\"): dan moet de tekst licht zijn.\n const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== \"auto\";\n const light: CSSProperties | undefined = coverMedia\n ? { color: \"#ffffff\", textShadow: \"0 2px 14px rgba(0,0,0,.45)\" }\n : undefined;\n const buttons = block.buttons ?? [];\n\n return (\n <section\n className=\"xicms-hero\"\n data-align={block.align}\n data-valign={block.vAlign}\n data-height={block.minHeight}\n data-media={coverMedia ? \"cover\" : undefined}\n >\n {block.videoUrl ? (\n <video\n ref={videoRef}\n className=\"xicms-hero__media\"\n src={block.videoUrl}\n poster={block.imageUrl || undefined}\n muted\n loop\n playsInline\n preload=\"metadata\"\n aria-hidden=\"true\"\n />\n ) : block.imageUrl ? (\n <Img src={block.imageUrl} alt=\"\" className=\"xicms-hero__media\" width={1600} height={900} sizes=\"100vw\" priority editField=\"imageUrl\" editFill />\n ) : null}\n {overlay && <div className=\"xicms-hero__overlay\" style={overlay} aria-hidden=\"true\" />}\n {/* Gradient (donker onderaan → transparant): leesbare tekst zonder de hele foto te dimmen. */}\n {block.overlayGradient && coverMedia && <div className=\"xicms-hero__gradient\" aria-hidden=\"true\" />}\n <div className=\"xicms-hero__inner\">\n {block.eyebrow && (\n <Text type=\"label\" className=\"xicms-hero__eyebrow\" style={light} data-xicms-edit=\"eyebrow\">\n {block.eyebrow}\n </Text>\n )}\n {block.title && (\n <Heading level={block.headingLevel === \"2\" ? 2 : 1} type=\"display-1\" className=\"xicms-hero__title\" style={light} data-xicms-edit=\"title\">\n {block.title}\n </Heading>\n )}\n {block.subtitle && (\n <Text type=\"large\" className=\"xicms-hero__sub\" style={light} data-xicms-edit=\"subtitle\">\n {block.subtitle}\n </Text>\n )}\n {buttons.length > 0 && (\n <div className=\"xicms-hero__buttons\">\n {/* Via Astryx Btn (zelfde systeem als Cta/Pricing/…): volgt de site-theming en de\n outline→ghost-variantmapping — geen tweede, handmatig te onderhouden knop-CSS. */}\n {buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => (\n <Btn key={b._i} label={b.label} href={b.href} variant={b.variant} size=\"lg\" editField={`buttons.${b._i}.label`} />\n ))}\n </div>\n )}\n </div>\n {block.videoUrl && (\n <button\n type=\"button\"\n className=\"xicms-hero__videotoggle\"\n onClick={toggleVideo}\n aria-label={playing ? \"Achtergrondvideo pauzeren\" : \"Achtergrondvideo afspelen\"}\n >\n {playing ? \"⏸\" : \"▶\"}\n </button>\n )}\n </section>\n );\n}\n\nexport const heroBlock = defineBlock({\n type: \"hero\",\n schema: HeroBlockSchema,\n Render: HeroRender,\n label: \"Hero\",\n icon: \"✨\",\n defaults: () => ({ title: \"Welkom\", subtitle: \"\", align: \"left\", vAlign: \"center\", minHeight: \"auto\", overlayOpacity: 0, buttons: [] }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -46,7 +46,10 @@ function JobsRender({ block }) {
|
|
|
46
46
|
return /* @__PURE__ */ jsx(Card, { padding: 4, className: "xicms-jobs__item", children: /* @__PURE__ */ jsxs(VStack, { gap: 1.5, children: [
|
|
47
47
|
/* @__PURE__ */ jsxs("div", { className: "xicms-jobs__head", children: [
|
|
48
48
|
/* @__PURE__ */ jsx(Heading, { level: 3, "data-xicms-edit": `items.${i}.title`, children: j.title }),
|
|
49
|
-
/* @__PURE__ */ jsx("span", { className: "xicms-jobs__meta", children: [
|
|
49
|
+
/* @__PURE__ */ jsx("span", { className: "xicms-jobs__meta", children: ["employmentType", "location", "salary"].map((veld) => ({ veld, waarde: j[veld] })).filter((f) => f.waarde).map((f, n) => /* @__PURE__ */ jsxs("span", { children: [
|
|
50
|
+
n > 0 && " \xB7 ",
|
|
51
|
+
/* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.${f.veld}`, children: f.waarde })
|
|
52
|
+
] }, f.veld)) })
|
|
50
53
|
] }),
|
|
51
54
|
j.description && /* @__PURE__ */ jsx(Text, { color: "secondary", "data-xicms-edit": `items.${i}.description`, children: j.description }),
|
|
52
55
|
j.applyUrl && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Btn, { label: "Solliciteer", href: j.applyUrl, variant: "primary" }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/Jobs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { JobsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useSiteConfig } from \"../../config\";\nimport { VStack, Card, Heading, Text, Btn } from \"../ui\";\nimport { jsonLdHtml } from \"./jsonld\";\n\ntype Jobs = z.infer<typeof JobsBlockSchema>;\ntype JobItem = Jobs[\"items\"][number];\n\n/** Vrije-tekst dienstverband → schema.org-enum (Google keurt vrije tekst af). */\nexport function employmentTypeEnum(value?: string): string | null {\n const v = (value ?? \"\").toLowerCase();\n if (!v) return null;\n if (v.includes(\"full\") || v.includes(\"voltijd\")) return \"FULL_TIME\";\n if (v.includes(\"part\") || v.includes(\"deeltijd\") || /\\d+\\s*[–-]?\\s*\\d*\\s*uur/.test(v)) return \"PART_TIME\";\n if (v.includes(\"bbl\") || v.includes(\"leerling\") || v.includes(\"stage\") || v.includes(\"intern\")) return \"INTERN\";\n if (v.includes(\"tijdelijk\") || v.includes(\"temp\")) return \"TEMPORARY\";\n if (v.includes(\"zzp\") || v.includes(\"freelance\") || v.includes(\"contract\")) return \"CONTRACTOR\";\n return null;\n}\n\n/**\n * JobPosting-JSON-LD per vacature (Google Jobs). Puur en getest. Alleen vacatures met de door\n * Google vereiste kernvelden (titel + plaatsingsdatum + locatie + omschrijving) komen in de JSON-LD\n * — incomplete items renderen wél op de pagina maar leveren geen Search-Console-errors op. Salaris\n * (\"€ 2.800 – € 3.400 p/m\") is geen geldige MonetaryAmount en wordt bewust weggelaten.\n */\nexport function jobsJsonLd(items: JobItem[], orgName: string): Array<Record<string, unknown>> {\n return items\n .filter((j) => j.title && j.datePosted && j.location && j.description)\n .map((j) => {\n const employment = employmentTypeEnum(j.employmentType);\n return {\n \"@context\": \"https://schema.org\",\n \"@type\": \"JobPosting\",\n title: j.title,\n hiringOrganization: { \"@type\": \"Organization\", name: orgName },\n ...(j.description ? { description: j.description } : {}),\n datePosted: j.datePosted,\n ...(employment ? { employmentType: employment } : {}),\n jobLocation: { \"@type\": \"Place\", address: { \"@type\": \"PostalAddress\", addressLocality: j.location } },\n ...(j.applyUrl ? { url: j.applyUrl } : {}),\n };\n });\n}\n\n/** Vacature-overzicht met JobPosting-JSON-LD — vindbaar via Google Jobs. */\nfunction JobsRender({ block }: BlockRenderProps<Jobs>) {\n const { name } = useSiteConfig();\n // _i = index in de OORSPRONKELIJKE array — inline-edit-paden (items.N.title) moeten daarheen wijzen.\n const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((j) => j.title);\n if (items.length === 0 && !block.heading) return null;\n return (\n <VStack gap={4} as=\"section\" className=\"xicms-jobs\">\n {(block.heading || block.intro) && (\n <VStack gap={1}>\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n {block.intro && <Text color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n </VStack>\n )}\n {items.length === 0 && <Text color=\"secondary\">Er zijn op dit moment geen openstaande vacatures.</Text>}\n <VStack gap={3}>\n {items.map((j) => {\n const i = j._i;\n return (\n <Card key={i} padding={4} className=\"xicms-jobs__item\">\n <VStack gap={1.5}>\n <div className=\"xicms-jobs__head\">\n <Heading level={3} data-xicms-edit={`items.${i}.title`}>{j.title}</Heading>\n <span className=\"xicms-jobs__meta\">\n {[
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/Jobs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { JobsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useSiteConfig } from \"../../config\";\nimport { VStack, Card, Heading, Text, Btn } from \"../ui\";\nimport { jsonLdHtml } from \"./jsonld\";\n\ntype Jobs = z.infer<typeof JobsBlockSchema>;\ntype JobItem = Jobs[\"items\"][number];\n\n/** Vrije-tekst dienstverband → schema.org-enum (Google keurt vrije tekst af). */\nexport function employmentTypeEnum(value?: string): string | null {\n const v = (value ?? \"\").toLowerCase();\n if (!v) return null;\n if (v.includes(\"full\") || v.includes(\"voltijd\")) return \"FULL_TIME\";\n if (v.includes(\"part\") || v.includes(\"deeltijd\") || /\\d+\\s*[–-]?\\s*\\d*\\s*uur/.test(v)) return \"PART_TIME\";\n if (v.includes(\"bbl\") || v.includes(\"leerling\") || v.includes(\"stage\") || v.includes(\"intern\")) return \"INTERN\";\n if (v.includes(\"tijdelijk\") || v.includes(\"temp\")) return \"TEMPORARY\";\n if (v.includes(\"zzp\") || v.includes(\"freelance\") || v.includes(\"contract\")) return \"CONTRACTOR\";\n return null;\n}\n\n/**\n * JobPosting-JSON-LD per vacature (Google Jobs). Puur en getest. Alleen vacatures met de door\n * Google vereiste kernvelden (titel + plaatsingsdatum + locatie + omschrijving) komen in de JSON-LD\n * — incomplete items renderen wél op de pagina maar leveren geen Search-Console-errors op. Salaris\n * (\"€ 2.800 – € 3.400 p/m\") is geen geldige MonetaryAmount en wordt bewust weggelaten.\n */\nexport function jobsJsonLd(items: JobItem[], orgName: string): Array<Record<string, unknown>> {\n return items\n .filter((j) => j.title && j.datePosted && j.location && j.description)\n .map((j) => {\n const employment = employmentTypeEnum(j.employmentType);\n return {\n \"@context\": \"https://schema.org\",\n \"@type\": \"JobPosting\",\n title: j.title,\n hiringOrganization: { \"@type\": \"Organization\", name: orgName },\n ...(j.description ? { description: j.description } : {}),\n datePosted: j.datePosted,\n ...(employment ? { employmentType: employment } : {}),\n jobLocation: { \"@type\": \"Place\", address: { \"@type\": \"PostalAddress\", addressLocality: j.location } },\n ...(j.applyUrl ? { url: j.applyUrl } : {}),\n };\n });\n}\n\n/** Vacature-overzicht met JobPosting-JSON-LD — vindbaar via Google Jobs. */\nfunction JobsRender({ block }: BlockRenderProps<Jobs>) {\n const { name } = useSiteConfig();\n // _i = index in de OORSPRONKELIJKE array — inline-edit-paden (items.N.title) moeten daarheen wijzen.\n const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((j) => j.title);\n if (items.length === 0 && !block.heading) return null;\n return (\n <VStack gap={4} as=\"section\" className=\"xicms-jobs\">\n {(block.heading || block.intro) && (\n <VStack gap={1}>\n {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n {block.intro && <Text color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n </VStack>\n )}\n {items.length === 0 && <Text color=\"secondary\">Er zijn op dit moment geen openstaande vacatures.</Text>}\n <VStack gap={3}>\n {items.map((j) => {\n const i = j._i;\n return (\n <Card key={i} padding={4} className=\"xicms-jobs__item\">\n <VStack gap={1.5}>\n <div className=\"xicms-jobs__head\">\n <Heading level={3} data-xicms-edit={`items.${i}.title`}>{j.title}</Heading>\n <span className=\"xicms-jobs__meta\">\n {([\"employmentType\", \"location\", \"salary\"] as const)\n .map((veld) => ({ veld, waarde: j[veld] }))\n .filter((f) => f.waarde)\n .map((f, n) => (\n <span key={f.veld}>\n {n > 0 && \" · \"}\n <span data-xicms-edit={`items.${i}.${f.veld}`}>{f.waarde}</span>\n </span>\n ))}\n </span>\n </div>\n {j.description && <Text color=\"secondary\" data-xicms-edit={`items.${i}.description`}>{j.description}</Text>}\n {j.applyUrl && (\n <div>\n <Btn label=\"Solliciteer\" href={j.applyUrl} variant=\"primary\" />\n </div>\n )}\n </VStack>\n </Card>\n );\n })}\n </VStack>\n {block.jsonLd &&\n jobsJsonLd(items, name).map((ld, i) => (\n <script\n key={i}\n type=\"application/ld+json\"\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: jsonLdHtml(ld) }}\n />\n ))}\n </VStack>\n );\n}\n\nexport const jobsBlock = defineBlock({\n type: \"jobs\",\n fields: { \"items.datePosted\": { type: \"date\" } },\n schema: JobsBlockSchema,\n Render: JobsRender,\n label: \"Vacatures\",\n icon: \"🧑🔧\",\n defaults: () => ({\n heading: \"Vacatures\",\n items: [{ title: \"Vacaturetitel\", employmentType: \"Fulltime\", location: \"\" }],\n jsonLd: true,\n }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { MapBlockSchema } from "../../schema/blocks.js";
|
|
4
4
|
import { defineBlock } from "../registry.js";
|
|
5
5
|
import { ConsentEmbed } from "./consentEmbed.js";
|
|
@@ -18,16 +18,16 @@ function MapRender({ block, mode }) {
|
|
|
18
18
|
const src = block.provider === "google" ? block.query || null : osmSrc(block);
|
|
19
19
|
if (!src) {
|
|
20
20
|
if (block.provider === "osm" && block.query) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
|
+
mode === "preview" && /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "\u{1F5FA}\uFE0F Kaart: vul co\xF6rdinaten (lat/lng) in om de kaart te tonen \u2014 nu staat er een kaartlink." }),
|
|
23
|
+
/* @__PURE__ */ jsxs("p", { className: "xicms-map__fallback", children: [
|
|
24
|
+
"\u{1F4CD}",
|
|
25
|
+
" ",
|
|
26
|
+
/* @__PURE__ */ jsxs("a", { href: `https://www.openstreetmap.org/search?query=${encodeURIComponent(block.query)}`, target: "_blank", rel: "noopener noreferrer", children: [
|
|
27
|
+
"Bekijk ",
|
|
28
|
+
/* @__PURE__ */ jsx("span", { "data-xicms-edit": "query", children: block.query }),
|
|
29
|
+
" op de kaart"
|
|
30
|
+
] })
|
|
31
31
|
] })
|
|
32
32
|
] });
|
|
33
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/builtins/MapBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { MapBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { ConsentEmbed } from \"./consentEmbed\";\n\ntype MapBlk = z.infer<typeof MapBlockSchema>;\n\n/**\n * Bouwt de OSM-embed-URL. OSM's `export/embed.html` negeert een tekst-`q` en centreert puur op\n * `bbox`; zonder bbox toont het de HELE WERELD. Daarom: als er `lat`/`lng` zijn, berekenen we\n * deterministisch een echte bbox rond het punt (zoom → graden-span, cos(lat)-correctie zodat de\n * kaart niet vervormt) + een marker. Zonder coördinaten is er geen zinvolle embed — de render\n * toont dan een kaartlink op basis van `query` (beter dan de wereldkaart die het q=-pad gaf).\n */\nfunction osmSrc(block: MapBlk): string | null {\n if (block.lat != null && block.lng != null) {\n const degPerTile = 360 / Math.pow(2, block.zoom);\n const lngHalf = degPerTile * 1.25;\n const latHalf = lngHalf * Math.cos((block.lat * Math.PI) / 180) * 0.6;\n const bbox = [block.lng - lngHalf, block.lat - latHalf, block.lng + lngHalf, block.lat + latHalf].join(\",\");\n const marker = `${block.lat},${block.lng}`;\n return `https://www.openstreetmap.org/export/embed.html?bbox=${encodeURIComponent(bbox)}&layer=mapnik&marker=${encodeURIComponent(marker)}`;\n }\n return null;\n}\n\nfunction MapRender({ block, mode }: BlockRenderProps<MapBlk>) {\n const src = block.provider === \"google\" ? block.query || null : osmSrc(block);\n if (!src) {\n // OSM zonder coördinaten kán niet zinvol embedden (het legacy q=-pad toonde de wereldkaart).\n // Toon een duidelijke kaartlink i.p.v. een nutteloze kaart, en leg het in de editor uit.\n if (block.provider === \"osm\" && block.query) {\n
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/builtins/MapBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { MapBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { ConsentEmbed } from \"./consentEmbed\";\n\ntype MapBlk = z.infer<typeof MapBlockSchema>;\n\n/**\n * Bouwt de OSM-embed-URL. OSM's `export/embed.html` negeert een tekst-`q` en centreert puur op\n * `bbox`; zonder bbox toont het de HELE WERELD. Daarom: als er `lat`/`lng` zijn, berekenen we\n * deterministisch een echte bbox rond het punt (zoom → graden-span, cos(lat)-correctie zodat de\n * kaart niet vervormt) + een marker. Zonder coördinaten is er geen zinvolle embed — de render\n * toont dan een kaartlink op basis van `query` (beter dan de wereldkaart die het q=-pad gaf).\n */\nfunction osmSrc(block: MapBlk): string | null {\n if (block.lat != null && block.lng != null) {\n const degPerTile = 360 / Math.pow(2, block.zoom);\n const lngHalf = degPerTile * 1.25;\n const latHalf = lngHalf * Math.cos((block.lat * Math.PI) / 180) * 0.6;\n const bbox = [block.lng - lngHalf, block.lat - latHalf, block.lng + lngHalf, block.lat + latHalf].join(\",\");\n const marker = `${block.lat},${block.lng}`;\n return `https://www.openstreetmap.org/export/embed.html?bbox=${encodeURIComponent(bbox)}&layer=mapnik&marker=${encodeURIComponent(marker)}`;\n }\n return null;\n}\n\nfunction MapRender({ block, mode }: BlockRenderProps<MapBlk>) {\n const src = block.provider === \"google\" ? block.query || null : osmSrc(block);\n if (!src) {\n // OSM zonder coördinaten kán niet zinvol embedden (het legacy q=-pad toonde de wereldkaart).\n // Toon een duidelijke kaartlink i.p.v. een nutteloze kaart, en leg het in de editor uit.\n if (block.provider === \"osm\" && block.query) {\n // In de editor stond hier alleen de uitleg. Daardoor was de zoekterm — het enige wat de\n // bezoeker straks ziet — nergens aanklikbaar en dus niet inline te bewerken. Nu tonen we\n // de uitleg én de kaartlink zoals hij live wordt.\n return (\n <>\n {mode === \"preview\" && (\n <p className=\"xicms-ve__hint\">🗺️ Kaart: vul coördinaten (lat/lng) in om de kaart te tonen — nu staat er een kaartlink.</p>\n )}\n <p className=\"xicms-map__fallback\">\n 📍{\" \"}\n <a href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(block.query)}`} target=\"_blank\" rel=\"noopener noreferrer\">\n Bekijk <span data-xicms-edit=\"query\">{block.query}</span> op de kaart\n </a>\n </p>\n </>\n );\n }\n return null;\n }\n return (\n <div className=\"xicms-map\" style={{ height: `${block.height}px` }}>\n <ConsentEmbed gated={block.consentGated} preview={mode === \"preview\"} label=\"Kaart\">\n <iframe\n src={src}\n title={block.query ? `Kaart: ${block.query}` : \"Kaart\"}\n loading=\"lazy\"\n style={{ border: 0, width: \"100%\", height: \"100%\" }}\n referrerPolicy=\"no-referrer-when-downgrade\"\n />\n </ConsentEmbed>\n </div>\n );\n}\n\nexport const mapBlock = defineBlock({\n type: \"map\",\n schema: MapBlockSchema,\n Render: MapRender,\n label: \"Kaart\",\n icon: \"🗺️\",\n defaults: () => ({ provider: \"osm\", query: \"\", zoom: 14, height: 360, consentGated: true }),\n});\n"],"mappings":";AAsCQ,mBAEI,KAIA,YANJ;AAnCR,SAAS,sBAAsB;AAC/B,SAAS,mBAA0C;AACnD,SAAS,oBAAoB;AAW7B,SAAS,OAAO,OAA8B;AAC5C,MAAI,MAAM,OAAO,QAAQ,MAAM,OAAO,MAAM;AAC1C,UAAM,aAAa,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;AAC/C,UAAM,UAAU,aAAa;AAC7B,UAAM,UAAU,UAAU,KAAK,IAAK,MAAM,MAAM,KAAK,KAAM,GAAG,IAAI;AAClE,UAAM,OAAO,CAAC,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,OAAO,EAAE,KAAK,GAAG;AAC1G,UAAM,SAAS,GAAG,MAAM,GAAG,IAAI,MAAM,GAAG;AACxC,WAAO,wDAAwD,mBAAmB,IAAI,CAAC,wBAAwB,mBAAmB,MAAM,CAAC;AAAA,EAC3I;AACA,SAAO;AACT;AAEA,SAAS,UAAU,EAAE,OAAO,KAAK,GAA6B;AAC5D,QAAM,MAAM,MAAM,aAAa,WAAW,MAAM,SAAS,OAAO,OAAO,KAAK;AAC5E,MAAI,CAAC,KAAK;AAGR,QAAI,MAAM,aAAa,SAAS,MAAM,OAAO;AAI3C,aACE,iCACG;AAAA,iBAAS,aACR,oBAAC,OAAE,WAAU,kBAAiB,2HAAyF;AAAA,QAEzH,qBAAC,OAAE,WAAU,uBAAsB;AAAA;AAAA,UAC9B;AAAA,UACH,qBAAC,OAAE,MAAM,8CAA8C,mBAAmB,MAAM,KAAK,CAAC,IAAI,QAAO,UAAS,KAAI,uBAAsB;AAAA;AAAA,YAC3H,oBAAC,UAAK,mBAAgB,SAAS,gBAAM,OAAM;AAAA,YAAO;AAAA,aAC3D;AAAA,WACF;AAAA,SACF;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AACA,SACE,oBAAC,SAAI,WAAU,aAAY,OAAO,EAAE,QAAQ,GAAG,MAAM,MAAM,KAAK,GAC9D,8BAAC,gBAAa,OAAO,MAAM,cAAc,SAAS,SAAS,WAAW,OAAM,SAC1E;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,MAAM,QAAQ,UAAU,MAAM,KAAK,KAAK;AAAA,MAC/C,SAAQ;AAAA,MACR,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,QAAQ,OAAO;AAAA,MAClD,gBAAe;AAAA;AAAA,EACjB,GACF,GACF;AAEJ;AAEO,MAAM,WAAW,YAAY;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,UAAU,OAAO,OAAO,IAAI,MAAM,IAAI,QAAQ,KAAK,cAAc,KAAK;AAC3F,CAAC;","names":[]}
|
|
@@ -63,7 +63,7 @@ function NewsletterRender({ block, siteId, mode }) {
|
|
|
63
63
|
emailInput,
|
|
64
64
|
consentBox,
|
|
65
65
|
block.consentText && /* @__PURE__ */ jsx("input", { type: "hidden", name: "CONSENT", value: agreed ? "yes" : "" }),
|
|
66
|
-
/* @__PURE__ */ jsx(Button, { label: block.buttonLabel, variant: "primary", size: "lg", type: "submit" })
|
|
66
|
+
/* @__PURE__ */ jsx(Button, { label: block.buttonLabel, variant: "primary", size: "lg", type: "submit", children: /* @__PURE__ */ jsx("span", { "data-xicms-edit": "buttonLabel", children: block.buttonLabel }) })
|
|
67
67
|
]
|
|
68
68
|
}
|
|
69
69
|
) : useXicmsForm ? /* @__PURE__ */ jsxs("form", { onSubmit: submitViaXicms, style: rowStyle, children: [
|
|
@@ -76,7 +76,8 @@ function NewsletterRender({ block, siteId, mode }) {
|
|
|
76
76
|
variant: "primary",
|
|
77
77
|
size: "lg",
|
|
78
78
|
type: "submit",
|
|
79
|
-
isLoading: status === "busy"
|
|
79
|
+
isLoading: status === "busy",
|
|
80
|
+
children: status === "busy" ? void 0 : /* @__PURE__ */ jsx("span", { "data-xicms-edit": "buttonLabel", children: block.buttonLabel })
|
|
80
81
|
}
|
|
81
82
|
),
|
|
82
83
|
status === "error" && /* @__PURE__ */ jsx(Text, { role: "alert", type: "supporting", style: { color: "var(--color-error, #c0392b)" }, children: "Aanmelden mislukt. Probeer het later opnieuw." })
|