spoko-design-system 0.0.2 → 0.0.5

package/.vscode/extensions.json

@@ -1,4 +1,5 @@
 {
   "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
+  "unwantedRecommendations": [],
+  "lokalise.i18n-ally"
 }

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.keystyle": "nested",
+    "i18n-ally.localesPaths": "public/locales",
+    "i18n-ally.sortKeys": true,
+}

package/Layout/Header.astro

@@ -42,7 +42,7 @@ const likes = {
             </span>
           </a>
         </div>
-        <div class="hidden sm:block sm:ml-6">
+        <div class="hidden sm:(block ml-6)">
           <div class="flex space-x-4" itemprop="hasPart">
             <a
               href={`https://polo.blue${locale === "pl" ? "/pl" : ""}`}
@@ -55,7 +55,7 @@ const likes = {
       </div>
 
       <div
-        class="relative md:block sm:ml-4 w-full sm:w-64 sm:mr-auto order-4 sm:order-2 h-10"
+        class="relative w-full order-4 h-10 md:(w-64 ml-4 mr-auto order-2 block)"
       >
         <Search
           id="search"
@@ -84,7 +84,7 @@ const likes = {
       </div>
 
       <div
-        class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 sm:order-3 w-20 justify-end"
+        class="flex items-center pr-0 ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 w-20 justify-end md:(static inset-auto order-3)"
         itemprop="hasPart"
         itemscope
         itemtype="http://schema.org/SiteNavigationElement"

package/README.md

@@ -1,23 +1,48 @@
----
-title: Introduction
-description: Docs intro
-layout: ../../layouts/MainLayout.astro
----
-
 # Spoko Design System
 
-Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
+SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
+The project is still in the development phase, use at your own risk ;-)
+#
+Please feel free to fork it, edit it and let me know what do you think about it.
+
+
+
+| title       | Introduction                   |
+|-------------|--------------------------------|
+| description | Docs intro                     |
+| layout      | ../../layouts/MainLayout.astro |
+
 
 ## Getting started
 
+### Installation
+
+```js
+pnpm add spoko-design-system
+```
+
+or just clone the repository.
+
+
+
+Example:
+- https://spoko-design-system.netlify.app/
+
+#
+
+Most of the components from this repository can be seen in my projects:
+
+- http://catalog.polo.blue/
+- https://polo.blue
+
+
+
 ### Adding new sections
 
 Although it's not required, you can create folders for new sections.
 
 To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
 
-Example:
-https://spoko-design-system.netlify.app/
 
 ```js
 export const SIDEBAR = [
@@ -34,13 +59,13 @@ export const SIDEBAR = [
 
 ### Adding new pages
 
-To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.md`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
+To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
 
 You're free to organize the pages however you want.
 
 ### Customizing Core section (colors, typography, shadows...)
 
-If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.
+If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.  I think I have prepared enough shades of blue ;-)
 
 Feel free to add new pages to the Core section
 
@@ -52,7 +77,7 @@ You can find the css for the pages in `src/styles/content.scss`.
 
 Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
 
-To get started check how the `MainButton` component is used in the `src/pages/en/buttons.md` file.
+To get started check how the `MainButton` component is used in the `src/pages/buttons.mdx` file.
 
 You can import your component library or create your own and document it easily.
 
@@ -66,4 +91,4 @@ There's a class called `.component-preview` that you can use to wrap your compon
 
 ### Have fun!
 
-Spoko Design System template was made by **[@spoko.space](https://spoko.space)** for personal and commercial use.
+Spoko Design System template was made in Poland by **[@spoko.space](https://spoko.space)** for personal and commercial use.

package/astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, sharpImageService } from "astro/config";
 // import tailwind from "@astrojs/tailwind";
 import vue from "@astrojs/vue";
 import mdx from '@astrojs/mdx';
@@ -15,31 +15,37 @@ export default defineConfig({
   server: {
     port: 1234
   },
+  image: {
+    service: sharpImageService(),
+    domains: ["api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com"]
+  },
   integrations: [
-  // Enable Preact to support Preact JSX components.
+  // Enable Vue to support Vue3 components.
   vue(),
-  // tailwind(),
-  mdx(), astroI18next(), UnoCSS({
+  mdx(),
+  astroI18next(),
+  // tailwind(), // sorry - Uno is better ;-P
+  UnoCSS({
     injectReset: true
   }), icon(
     {
       include: {
         // mdi: ["*"], // (Default) Loads entire Material Design Icon set
-        mdi: ["facebook", "instagram", "post-it-note-edit-outline"], // Loads only Material Design Icon's "account" SVG
-        'ant-design': ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined", "cluster-outlined", "audit-outlined", "build-twotone" ],
-        bi: ["envelope-open", "credit-card"],
-        bx: ["arrow-back"],
-      'noto-1': ["letter-s"],
+        mdi: ["facebook", "instagram", "post-it-note-edit-outline", "car-hatchback", "car-door", "car-side", "car-windshield-outline", "car-light-alert", "car-tire-alert", "car-light-dimmed", "car-light-fog", "car-light-high", "car-parking-lights", "car-esp", "car-brake-abs", "car-horn", "engine-outline", "fan", "fan-off", "air-conditioner", "coolant-temperature", "car-brake-alert", "car-traction-control", "card-text-outline", "fuel", "oil", "hazard-lights", "credit-card-outline"],
+        "ant-design": ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined", "cluster-outlined", "audit-outlined", "build-twotone", "home-outlined", "close-outlined"],
+        bi: ["envelope-open", "credit-card", "qr-code", "list-check", "list-task", "text-indent-left", "text-indent-right", "tag", "tags", "x" ],
+        bx: ["arrow-back", "check", "detail", "file", "car", "credit-card", "barcode", "qr"],
         carbon: ["language", "checkmark", "home", "dicom-overlay"],
-        el: ["star-empty", "star"],
-        'eos-icons': ["three-dots-loading"],
-        fluent: ["share-android-24-regular"],
-        'fluent-emoji': ["cookie"],
-        la: ["arrow-right", "arrow-left"],
-        octicon: ["chevron-left-24", "x-24"],
-        uil: ["map-marker", "envelope", "phone"],
-        'circle-flags': ["uk", "pl", "ua" ],
-        ph: ["cat-thin"]
+        el: ["star-empty", "star",  "heart-empty",  "heart", "map-marker", "fire", "quote-right", "qrcode", "car", "indent-left", "indent-right", "ok"],
+        'eos-icons': ["three-dots-loading", "bubble-loading", "loading", "installing"],
+        fluent: ["share-android-24-regular", "checkmark-24-filled", "tag-24-regular", "tag-multiple-24-regular" ],
+        "fluent-emoji": ["cookie", "construction", "warning", "wrench"],
+        la: ["arrow-right", "arrow-left", "car", "car-side"],
+        octicon: ["chevron-left-24", "x-24", "alert-24", "graph-24", "comment-24", "comment-discussion-24", "clock-24", "star-24", "star-fill-24", "file-media-24", "heart-24", "heart-fill-24", "project-roadmap-24", "location-24", "info-24", "mark-github-16"],
+        uil: ["map-marker", "envelope", "phone", "tag-alt"],
+        "simple-icons": ["ebay", "allegro", "volkswagen", "audi", "skoda", "seat", "whatsapp", "x", "facebook", "messenger", "instagram", "telegram"],
+        "icon-park-outline": ["shopping-bag", "comment", "comments", "tag-one"],
+        flowbite: ["arrow-left-outline", "arrow-right-outline", "angle-left-outline", "angle-right-outline", "chevron-left-outline", "chevron-right-outline","map-location-outline", "map-pin-alt-solid", "x-outline", "messages-outline", "arrow-down-to-bracket-outline", "check-outline"]
       }
     }
   )]

package/package.json

@@ -1,75 +1,79 @@
-{
-  "name": "spoko-design-system",
-  "version": "0.0.2",
-  "private": false,
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "dependencies": {
-    "@algolia/client-search": "^4.22.1",
-    "@astrojs/mdx": "^2.1.0",
-    "@astrojs/node": "^7.0.4",
-    "@astrojs/vue": "^4.0.8",
-    "@docsearch/css": "^3.5.2",
-    "@docsearch/react": "^3.5.2",
-    "@iconify-json/ant-design": "^1.1.14",
-    "@iconify-json/bi": "^1.1.23",
-    "@iconify-json/bx": "^1.1.10",
-    "@iconify-json/carbon": "^1.1.28",
-    "@iconify-json/circle-flags": "^1.1.46",
-    "@iconify-json/el": "^1.1.8",
-    "@iconify-json/eos-icons": "^1.1.10",
-    "@iconify-json/fluent": "^1.1.46",
-    "@iconify-json/fluent-emoji": "1.1.18",
-    "@iconify-json/la": "^1.1.8",
-    "@iconify-json/mdi": "^1.1.64",
-    "@iconify-json/noto-v1": "^1.1.11",
-    "@iconify-json/octicon": "^1.1.52",
-    "@iconify-json/ph": "^1.1.10",
-    "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.175",
-    "@iconify/vue": "^4.1.1",
-    "@types/node": "^20.11.7",
-    "@types/react": "^18.2.48",
-    "@unocss/astro": "^0.58.4",
-    "@unocss/preset-attributify": "^0.58.4",
-    "@unocss/preset-typography": "^0.58.4",
-    "@unocss/preset-uno": "^0.58.4",
-    "@unocss/preset-web-fonts": "^0.58.4",
-    "@unocss/preset-wind": "^0.58.4",
-    "@unocss/reset": "^0.58.4",
-    "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.0.2",
-    "astro-navbar": "^2.3.0",
-    "astro-pagefind": "^1.4.0",
-    "i18next": "^23.7.19",
-    "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-fs-backend": "^2.3.1",
-    "i18next-http-backend": "^2.4.2",
-    "i18next-vue": "^3.0.0",
-    "preact": "^10.19.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.70.0",
-    "unocss": "^0.57.7",
-    "vite": "^5.0.12",
-    "vue": "^3.4.15"
-  },
-  "devDependencies": {
-    "@astrojs/preact": "^3.1.0",
-    "@astrojs/react": "^3.0.9",
-    "@astrojs/tailwind": "^5.1.0",
-    "@unocss/transformer-variant-group": "^0.58.4",
-    "astro": "^4.2.4",
-    "unocss": "^0.58.3"
-  },
-  "pnpm": {
-    "overrides": {
-      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
-      "sharp@<0.30.5": ">=0.30.5"
-    }
-  }
-}
+{
+  "name": "spoko-design-system",
+  "version": "0.0.5",
+  "private": false,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@algolia/client-search": "^4.22.1",
+    "@astrojs/mdx": "^2.1.0",
+    "@astrojs/node": "^7.0.4",
+    "@astrojs/vue": "^4.0.8",
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/react": "^3.5.2",
+    "@iconify-json/ant-design": "^1.1.14",
+    "@iconify-json/bi": "^1.1.23",
+    "@iconify-json/bx": "^1.1.10",
+    "@iconify-json/carbon": "^1.1.28",
+    "@iconify-json/circle-flags": "^1.1.46",
+    "@iconify-json/el": "^1.1.8",
+    "@iconify-json/eos-icons": "^1.1.10",
+    "@iconify-json/flowbite": "^1.1.0",
+    "@iconify-json/fluent": "^1.1.46",
+    "@iconify-json/fluent-emoji": "1.1.18",
+    "@iconify-json/icon-park-outline": "^1.1.15",
+    "@iconify-json/la": "^1.1.8",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/noto-v1": "^1.1.11",
+    "@iconify-json/octicon": "^1.1.52",
+    "@iconify-json/ph": "^1.1.10",
+    "@iconify-json/simple-icons": "^1.0.5",
+    "@iconify-json/uil": "^1.1.8",
+    "@iconify/json": "^2.2.175",
+    "@iconify/vue": "^4.1.1",
+    "@types/node": "^20.11.7",
+    "@types/react": "^18.2.48",
+    "@unocss/astro": "^0.58.4",
+    "@unocss/preset-attributify": "^0.58.4",
+    "@unocss/preset-typography": "^0.58.4",
+    "@unocss/preset-uno": "^0.58.4",
+    "@unocss/preset-web-fonts": "^0.58.4",
+    "@unocss/preset-wind": "^0.58.4",
+    "@unocss/reset": "^0.58.4",
+    "@vueuse/core": "^10.7.2",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.0.2",
+    "astro-navbar": "^2.3.0",
+    "astro-pagefind": "^1.4.0",
+    "i18next": "^23.7.20",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-fs-backend": "^2.3.1",
+    "i18next-http-backend": "^2.4.2",
+    "i18next-vue": "^3.0.0",
+    "preact": "^10.19.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.70.0",
+    "unocss": "^0.57.7",
+    "vite": "^5.0.12",
+    "vue": "^3.4.15"
+  },
+  "devDependencies": {
+    "@astrojs/preact": "^3.1.0",
+    "@astrojs/react": "^3.0.9",
+    "@astrojs/tailwind": "^5.1.0",
+    "@unocss/transformer-variant-group": "^0.58.4",
+    "astro": "^4.2.4",
+    "unocss": "^0.58.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  }
+}

package/public/locales/en/translation.json

@@ -1,6 +1,9 @@
 {
   "part": {
     "for-lhd": "For LHD cars (left-hand drive)",
-    "for-rhd": "For RHD cars (right-hand drive)"
-  }
+    "for-rhd": "For RHD cars (right-hand drive)",
+    "sw-position":"Steering wheel position"
+  },
+  "copied": "Copied",
+  "copy": "Copy product code"
 }

package/public/locales/pl/translation.json

@@ -1,6 +1,9 @@
 {
     "part": {
         "for-lhd": "Do pojazdów LHD (z kierownicą z lewej strony)",
-        "for-rhd": "Do pojazdów RHD (z kierownicą z prawej strony)"
-    }
+        "for-rhd": "Do pojazdów RHD (z kierownicą z prawej strony)",
+        "sw-position":"Pozycja kierownicy",
+    },
+    "copied": "Skopiowano",
+    "copy": "Skopiuj numer produktu"
 }

package/src/components/Badge.vue

@@ -14,7 +14,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="px-1.5 py-px text-white text-xs" :class="props.class">
+  <div class="badge" :class="props.class">
     {{ props.badge }}
   </div>
 </template>

package/src/components/Badges.vue

@@ -18,7 +18,7 @@ const props = defineProps({
     <Badge
       v-for="(badge, index) in props.badges" :key="index"
       :badge="badge"
-      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : '') || (badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-600' : '')"
+      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-600' : 'bg-black')"
     />
   </div>
 </template>

package/src/components/Button.vue

@@ -1,28 +1,37 @@
 <script setup lang="ts">
-import { url } from "inspector";
 import { defineProps } from "vue";
 
 const props = defineProps<{
-  url?: string;
+  href?: string;
+  title?: string;
   primary?: boolean;
+  tertiary?: boolean;
   secondary?: boolean;
   text?: boolean;
   tag?: boolean;
+  small?: boolean;
+  medium?: boolean;
 }>();
 
-const tag = url && url.length ? 'a' : 'button'
+const tag = props.href && props.href.length ? 'a' : 'button'
 
 const classes = {
-  "bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center md:px-10 md:py-2 md:text-lg px-8 py-3 rounded-full shadow text-base text-white": props.primary,
-  "px-4 py-2 rounded-md transition-all shadow-sm hover:bg-opacity-80 font-medium text-blue-600 border-blue-500 border": props.secondary,
-  "px-4 py-2 rounded-md transition-all shadow-sm hover:bg-opacity-80 font-medium text-blue-500 hover:bg-opacity-80 shadow-md": props.text,
-  "bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 hover:border-blue-600": props.tag
+  "btn-primary": props.primary,
+  "btn-secondary": props.secondary,
+  "btn-tertiary": props.tertiary,
+  "btn-text": props.text,
+  "btn-tag": props.tag,
+  "btn-sm": props.medium,
+  "btn-xs": props.small,
+  "btn-normal": !props.small && !props.medium
 };
+
+
 </script>
 
 
 <template>
-  <component  :is="tag" :class="classes" :href="props.url">
+  <component  :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
     <slot></slot>
   </component>
 </template>

package/src/components/ButtonCopy.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+
+import { useClipboard } from "@vueuse/core";
+
+import { Icon } from "@iconify/vue";
+import { PropType } from "vue";
+
+const props = defineProps({
+    productNumber: {
+        type: String,
+        default: '',
+        required: true,
+    },
+    tooltipClasses: {
+        type: String,
+        required: false,
+        default: '',
+    },
+    texts: {
+        type: Object as PropType<{ copy: String, copied: String }>,
+        required: true,
+        default: {
+            copy: 'copy',
+            copied: 'copied',
+        }
+    }
+})
+const source = props.productNumber;
+const { copy, copied, isSupported } = useClipboard({ source });
+
+</script>
+
+
+<template>
+    <button v-if="isSupported" :aria-label="String(texts.copy)"
+        class="btn-copy has-tooltip" @click="copy()">
+        <span :class="`tooltip rounded-full btn-copy-text ${tooltipClasses}`" :data-text="!copied ? texts.copy : texts.copied" />
+        <Icon icon="ph-copy-simple-light" class="leading-none w-full h-full" />
+    </button>
+</template>
+
+<style>
+
+.tooltip {
+    @apply invisible absolute;
+  }
+  
+  .has-tooltip:hover .tooltip {
+      @apply visible z-50;
+  }
+
+</style>

package/src/components/Card.astro

@@ -0,0 +1,25 @@
+---
+const { class: className, imgSrc, imgAlt } = Astro.props;
+
+import Image from '../components/Image.astro'
+---
+
+<div class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
+    <a href="#" class="aspect-ratio-video block relative">
+        { imgSrc && (
+          <Image
+            imageObject={
+              {
+                src: imgSrc,
+                alt: imgAlt,
+                height: '405',
+                width: '720',
+              }
+            }
+          />
+        )}
+    </a>
+    <div class="p-5">
+      <slot />
+    </div>
+  </div>

package/src/components/HandDrive.astro

@@ -1,7 +1,6 @@
 ---
 
 const {  class: className, handDrive, biggerText } = Astro.props;
-// import { t, locale} from "i18next";
 import { t } from "i18next";
 import { Image } from 'astro:assets';
 import handDriveImage from "../assets/hand-drive.svg";

package/src/components/Header/Header.astro

@@ -13,7 +13,7 @@ import { MenuIcon } from "astro-navbar";
     class="mx-auto flex justify-between items-center px-4"
   >
     <div class="flex flex-nowrap">
-      <MenuIcon class="w-4 h-4 text-gray-800 sm:hidden mr-4" />
+      <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
       <a class="text-2xl font-medium block font-textbold" href="/"> SDS</a>
     </div>
     <div class="flex gap-2">

package/src/components/Headline.vue

@@ -9,20 +9,52 @@ const props = defineProps({
     required: true,
   },
   textSize: {
-    type:  String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
     required: false,
     default: null
+  },
+  underline: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 
 </script>
 
 <template>
-  <component
-    :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none" :class="props.textSize ? `text-${props.textSize}` : 'text-xl'"
-  >
+  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
+    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
     <!-- default -->
     <slot />
 
   </component>
-</template>
+</template>
+
+<style lang="scss">
+
+.headline--underline {
+  @apply relative pb-4;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3px;
+    width: 55px;
+    background-color: var(--primary);
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 1px;
+    height: 1px;
+    width: 95%;
+    max-width: 255px;
+    background-color: #64748b
+  }
+}
+</style>

package/src/components/Image.astro

@@ -0,0 +1,30 @@
+---
+import { Image } from 'astro:assets'
+
+const { imageObject } = Astro.props;
+
+let inputProps = {};
+
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
+  inputProps['loading'] = 'eager'
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps['widths'] = imageObject.srcset
+}
+
+---
+<Image 
+    src={imageObject.src}
+    alt={imageObject.alt}
+    height={imageObject.height} 
+    width={imageObject.width}
+    itemprop="image"
+    format="avif"
+    data-pagefind-index-attrs="alt"
+    onerror="this.style.display='none';"
+    class={`h-full w-full select-none pointer-none ${imageObject.class || 'object-cover'}`}
+    { ...inputProps}
+/>