spoko-design-system 0.0.2 → 0.0.5

package/src/components/Jumbatron.vue

@@ -1,16 +1,31 @@
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+  const slots = useSlots()
+  const hasSlot = (name) => {
+    return !!slots[name];
+  }
+    const props = defineProps({
+      small: {
+        type: Boolean,
+        default: null,
+        required: false,
+      },
+    })
+</script>
+
+
 <template>
-  <div class="relative bg-vw md:min-h-md">
-    <div class="max-w-7xl mx-auto">
-      <div class=" pb-8  sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32">
-        <header class="mx-auto max-w-7xl px-4 sm:pt-12 sm:px-6 md:pt-16 lg:pt-20 lg:px-8 xl:pt-28">
+  <div class="relative flex bg-vw " :class="props.small ? 'md:min-h-xs' : 'md:min-h-md' ">
+    <div class="max-w-7xl mx-auto my-auto">
+      <div class="py-8 lg:w-full" :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32' ">
+        <header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- sm:pt-12  md:pt-16 lg:pt-20 xl:pt-28 -->
           <div class="text-center">
-            <h1 class="text-2xl pt-6 sm:pt-0 sm:text-5xl md:text-6xl tracking-tight font-headlight text-white">
+            <h1 class="text-3xl  tracking-tight sm:(text-4xl pt-0) md:text-5xl lg:text-6xl  font-headlight text-white">
               <slot name="intro" />
-              <!-- <span v-html="t('home.intro')"></span> -->
-              <!-- <small class="block text-2xl">aaa</small> -->
             </h1>
             <slot name="subtitle" />
-            <div class="mt-5 sm:mt-8 sm:flex sm:justify-center">
+            <div class="mt-5 sm:mt-8 sm:flex sm:justify-center" v-if="hasSlot('cta')">
               <div>
                 <slot name="cta" />
               </div>

package/src/components/LeftSidebar.astro

@@ -1,5 +1,6 @@
 ---
 import { SIDEBAR } from '../config';
+import { Astronav, MenuItems} from "astro-navbar";
 const { currentPage } = Astro.props;
 const currentPageMatch = currentPage.slice(1);
 
@@ -11,7 +12,7 @@ const isCurrentPage = (item) => {
 };
 
 const getLinkClasses = (link) => {
-	const baseClasses = "block py-2 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900"
+	const baseClasses = "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900"
 
 	if (isCurrentPage(link)) {
 		return baseClasses + " border-slate-500 text-slate-900";
@@ -20,18 +21,18 @@ const getLinkClasses = (link) => {
 	}
 }
 ---
-<aside title="Site Navigation">
-	<!-- <Debug content={navigation} /> -->
-	<nav aria-labelledby="grid-left" class="w-64 px-4 border-r pb-3">
-		<ul>
+<Astronav>
+	<MenuItems class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative  bg-blue-500 bg-opacity-5 flex)">
+		<ul class="mt-0 mb-auto">
 			{SIDEBAR.map(item => (item.header ? 
 				<h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2> : 
 				<li class={getLinkClasses(item)}>
 					<a href={item.link}>{item.text}</a>
-				</li>))}
+				</li>
+			))}
 		</ul>
-	</nav>
-</aside>
+	</MenuItems>
+</Astronav>
 
 <script is:inline>
 	window.addEventListener('DOMContentLoaded', (event) => {

package/src/components/PrCode.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+/*
+     VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer PR-Code
+*/
+
+import type { PropType } from 'vue'
+
+const props = defineProps({
+    prcode: {
+        type: Object as PropType<string[] | null>,
+        default: null,
+        required: true,
+    },
+    isPdp: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+})
+</script>
+
+<template>
+    <span data-pagefind-filter="PR-Code" class="btn-prcode " :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
+        {{ props.prcode }}
+    </span>
+</template>
+
+<style lang="scss" scoped>
+.btn-prcode {
+
+    &--pdp {
+        @apply mb-1
+    }
+
+    &:before {
+        @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
+
+        display: none;
+        position: absolute;
+        top: -10px;
+        transform: translateY(-50%) translateX(-50%);
+        left: 50%;
+    }
+
+    &:hover:before {
+        display: block;
+    }
+
+    &--2JK {
+        color: #f3881d;
+
+        &:before {
+            content: 'CROSS';
+        }
+    }
+
+    &--1LR,
+    &--1ZG,
+    &--1ZJ {
+        &:before {
+            content: '⌀ 256 mm';
+        }
+    }
+
+    &--1KD,
+    &--1ZP,
+    &--1ZR {
+        &:before {
+            content: '⌀ 310 mm';
+        }
+    }
+
+    &--1ZD,
+    &--1ZC,
+    &--1LN {
+        &:before {
+            content: '⌀ 288 mm; LUCAS';
+        }
+    }
+
+    &--2JZ {
+        @apply: text-lightBlue-500;
+
+        &:before {
+            content: 'Bluemotion';
+        }
+    }
+
+    &--7L6 {
+        @apply: text-lightBlue-500;
+
+        &:before {
+            content: 'Bluemotion (CFWA + start-stop)';
+        }
+    }
+
+    &--1KK,
+    &--1KT,
+    &--1KV,
+    &--1LV,
+    &--2EJ {
+        &:before {
+            content: '⌀ 230 mm';
+        }
+    }
+
+    &--2JE {
+        @apply text-lightBlue-700;
+
+        &:before {
+            content: 'BlueGT';
+        }
+    }
+
+    &--2JP {
+        &:before {
+            content: 'R-Line';
+        }
+    }
+
+    // WRC Street R
+    &--E5M,
+
+    // emblems/stickers
+    &--1KD,
+
+    //brakes
+    &--1ZP,
+
+    //brakes
+    &--2JQ,
+
+    //bumpers / engine parts
+    &--TA2 {
+        color: blue;
+
+        &:before {
+            content: 'R WRC Street';
+        }
+    }
+
+    // GTI
+    &--1KV,
+    &--1ZD,
+    &--1ZR,
+    &--0NH,
+    &--2JD {
+        color: red;
+
+        &:before {
+            content: 'GTI';
+        }
+    }
+
+}
+</style>

package/src/components/ProductNumber.astro

@@ -0,0 +1,117 @@
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+
+const {
+  copyDisabled,
+  productNumber,
+  isPdp,
+  small,
+  big,
+  class: className,
+} = Astro.props;
+
+const butonTexts = {
+  copy: t("copy"),
+  copied: t("copied"),
+};
+
+const isLetter = (string: string) => {
+  return string.toLowerCase() !== string.toUpperCase();
+};
+
+const niceName = (string: string, separator = "\u00A0") => {
+  let word = string; //e.g. to 6Q0947106EY20 .split('+')
+
+  if (
+    isLetter(string[0]) === true &&
+    isLetter(string[1]) === false &&
+    string.length === 9
+  ) {
+    // mainly liquids
+    word = string
+      .replace(
+        /^(\w{1})(\w{3})(\w{3})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
+  else if (string.length >= 13) {
+    // console.log('part number: wheels / emblems', word)
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else if (string.length > 12) {
+    // accessories / mats
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else {
+    // other parts
+    word = string
+      .replace(/(\w{3})/g, `$1${separator}`)
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  return word.replace(" ", separator);
+};
+---
+
+{
+  productNumber !== null && (
+    <div
+      class={`product-number ${
+        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
+      }`}
+    >
+      <div
+        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
+        itemprop="identifier"
+      >
+        {isPdp ? (
+          <h2 id={productNumber} class="product-code">
+            {productNumber}
+          </h2>
+        ) : (
+          <div id={productNumber} class="product-code">
+            {productNumber}
+          </div>
+        )}
+
+        { copyDisabled && (
+          <ButtonCopy
+            productNumber={String(productNumber)}
+            texts={butonTexts}
+            tooltipClasses=""
+            client:only
+          />
+        )}
+
+      </div>
+
+      <div
+        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
+      >
+        <div class="relative inset-0" data-pagefind-ignore>
+          {niceName(productNumber, ".")}
+        </div>
+        <div class="absolute inset-0" data-pagefind-ignore>
+          {niceName(productNumber, "-")}
+        </div>
+        {isPdp ? (
+          <h3 class="number-secondary">{niceName(productNumber)}</h3>
+        ) : (
+          <div class="number-secondary">{niceName(productNumber)}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ProductTile.astro

@@ -0,0 +1,54 @@
+---
+const { productObject, locale, index } = Astro.props;
+import i18next, { t } from "i18next";
+import Image from "./Image.astro"
+import ProductNumber from "./ProductNumber.astro"
+
+---
+
+  { productObject && 
+   (
+
+<div  class="flex flex-wrap sm:flex-nowrap content-between w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4">
+    <!-- product image -->
+    <div>
+      { productObject.photo !== null ?
+        <div class="img--4/3 img--small">
+          <Image
+            imageObject={
+              {
+                src: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337',
+                alt: 'Image Alt',
+                height: '180',
+                width: '240',
+                class: 'img--overlay object-cover'
+              }
+            }
+          />
+        </div>
+        :
+        <img src="/1x1.png" class="bg-gray-100/70" alt={productObject.name} />
+      }
+    </div>
+      
+  <!-- product deails -->
+  <div class="sm:pl-4 flex flex-col" >
+    <a class="font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em] before:(content-empty absolute left-0 right-4 h-full top-0)"
+      href={productObject.url} itemprop="url"
+      title={productObject.number}
+    >
+      { productObject.name }
+    </a>
+
+    <ProductNumber productNumber={productObject.number} copyDisabled={true}  />
+    
+    { index !== null && 
+      ( <meta itemprop="position" content={String(index)} />
+      <meta itemprop="name" content={productObject.name} /> )
+    }
+  </div>
+
+  </div>
+
+    )}
+

package/src/components/layout/Header.astro

@@ -48,7 +48,7 @@ const navItemsLeft = [
   </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 md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
   >
     <slot name="search" />
   </div>

package/src/config.ts

@@ -30,12 +30,16 @@ export const SIDEBAR = [
   { text: "HandDrive", link: "/components/hand-drive" },
   { text: "Headline", link: "/components/headline" },
   { text: "Icons", link: "/components/icons" },
+  { text: "Image", link: "/components/image" },
   { text: "Input", link: "/components/input" },
   { text: "Jumbatron", link: "/components/jumbatron" },
   { text: "Modal", link: "/components/modal" },
   { text: "PostHeader", link: "/components/post-header" },
+  { text: "Product Number", link: "/components/product-number" },
+  { text: "Product Tile", link: "/components/product-tile" },
   { text: "Table", link: "/components/table" },
-
+  { text: "PR-Code", link: "/components/pr-code" },
+  { text: "Card", link: "/components/card" },
 
   { text: "Extras", header: true },
   { text: "Flags", link: "/components/flags" },

package/src/layouts/Layout.astro

@@ -1,22 +1,14 @@
 ---
 import HeadCommon from '../components/HeadCommon.astro';
 import HeadSEO from '../components/HeadSEO.astro';
-import Header from '../components/Header/Header.astro';
-import PageContent from '../components/PageContent.astro';
-import LeftSidebar from '../components/LeftSidebar.astro';
-import { Astronav, MenuItems} from "astro-navbar";
 import * as CONFIG from '../config';
 import { t, changeLanguage } from "i18next";
 import '../styles/main.scss';
 import Copyright from '../components/Copyright.astro'
 const locale = "en";
 changeLanguage(locale);
-const year = new Date().getFullYear()
 const { content = {} } = Astro.props;
-const currentPage = Astro.url.pathname;
-// const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
-console.log('canonicalURL', canonicalURL)
 ---
 
 <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">

package/src/layouts/MainLayout.astro

@@ -4,19 +4,15 @@ import HeadSEO from '../components/HeadSEO.astro';
 import Header from '../components/Header/Header.astro';
 import PageContent from '../components/PageContent.astro';
 import LeftSidebar from '../components/LeftSidebar.astro';
-import { Astronav, MenuItems} from "astro-navbar";
 import * as CONFIG from '../config';
 import { t, changeLanguage } from "i18next";
 import '../styles/main.scss';
 import Copyright from '../components/Copyright.astro'
 const locale = "en";
 changeLanguage(locale);
-const year = new Date().getFullYear()
 const { content = {} } = Astro.props;
 const currentPage = Astro.url.pathname;
-// const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
-console.log('canonicalURL', canonicalURL)
 ---
 
 <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
@@ -31,14 +27,10 @@ console.log('canonicalURL', canonicalURL)
 			<Header currentPage={currentPage} />
 		</div>
 
-		<div class="flex  bg-white z-10 mb-11 relative">
-			<div class="sticky top-0 flex sm:(h-screen w-64) z-50 ">
-				<div class="mr-auto  pb-11 mb-11">
-					<Astronav>
-						<MenuItems class="hidden z-20 bg-white absolute sm:(static bg-blue-500 bg-opacity-5 lg:flex)">
-						  <LeftSidebar currentPage={currentPage} />
-						</MenuItems>
-					  </Astronav>
+		<div class="flex bg-white z-10 mb-11 relative">
+			<div class="sticky top-0 flex lg:(h-screen w-64) z-50 ">
+				<div class="mr-auto  ">
+					<LeftSidebar currentPage={currentPage} />
 				</div>
 			</div>
 			<main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
@@ -51,11 +43,11 @@ console.log('canonicalURL', canonicalURL)
 		</div>
 		<footer>
 			<Copyright class="fixed bottom-0 z-0 w-full">
-				<a slot="middle-item"  href={`https://${import.meta.env.COPYRIGHT_DOMAIN}`} target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by ${import.meta.env.COPYRIGHT_DOMAIN}`}>
+				<a slot="middle-item"  href="https://spoko.space" target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by spoko.space`}>
 				  <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
 				  <img
 					class="h-4 md:h-5 w-min"
-					src={`/${import.meta.env.COPYRIGHT_IMG}`}
+					src="/spoko.space.svg"
 					alt="Modern Websites"
 					width="126"
 					height="23"

package/src/pages/components/badges.mdx

@@ -4,34 +4,66 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import Badges from '../../components/Badges.vue'
 
-## Badges
+## Product badges
 
-### Badges - GTI
+### Badge - GTI
 <div class="component-preview">
-        <div class="relative min-h-6	">
+        <div class="relative min-h-10">
                 <Badges badges={['GTI']} class="top-2" />
         </div>
 </div>
 ```js
-<div class="relative min-h-14	">
+<div class="relative min-h-10">
         <Badges badges={['GTI']} class="top-2" />
 </div>
 
 ```
 
 
-### Badges - Motorsport
+### Badge - Motorsport
 <div class="component-preview">
-        <div class="relative min-h-6	">
+        <div class="relative min-h-10">
                 <Badges badges={['Motorsport']} class="top-2" />
         </div>
 </div>
 
 ```js
-<div class="relative min-h-14	">
+<div class="relative min-h-10">
         <Badges badges={['Motorsport']} class="top-2" />
 </div>
 
 ```
 
 
+### Badge on image - Motorsport
+<div class="component-preview">
+<div class="relative">
+        <img src="https://placehold.co/300x200" alt="image alt" />
+        <Badges badges={['Motorsport']} class="top-2" />
+</div>
+</div>
+
+```js
+<div class="relative">
+        <img src="https://placehold.co/300x200" alt="image alt" />
+        <Badges badges={['Motorsport']} class="top-2" />
+</div>
+
+```
+
+
+### Few badges on image
+<div class="component-preview">
+<div class="relative">
+        <img src="https://placehold.co/300x200" alt="image alt" />
+        <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+</div>
+
+```js
+<div class="relative">
+        <img src="https://placehold.co/300x200" alt="image alt" />
+        <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+
+```

package/src/pages/components/breadcrumbs.mdx

@@ -8,7 +8,10 @@ import Breadcrumbs from '../../components/Breadcrumbs.vue'
 
 ## Breadcrumbs
 
-Breadcrumbs component with BreadcrumbList Microdata
+Breadcrumbs component with BreadcrumbList Microdata.
+
+Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
+
 #
 
 https://schema.org/BreadcrumbList
@@ -98,3 +101,36 @@ https://schema.org/ListItem
   text-back="Back"
 />
 ```
+
+
+### Schema example:
+- https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
+#
+
+| @type            | BreadcrumbList                                                                    |
+| ---------------- | --------------------------------------------------------------------------------- |
+| **itemListElement**  |                                                                                   |
+| **@type**          | ListItem                                                                          |
+| **name**             | Electrical, Lighting, Telematics                                                  |
+| **position**         | 1                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/                         |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Exterior Lighting                                                                 |
+| **position**         | 2                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/       |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Bulbs                                                                             |
+| **position**         | 3                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Bulb carrier with bulb; silver lens                                               |
+| **position**         | 4                                                                                 |