spoko-design-system 0.0.8 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "private": false,
   "scripts": {
     "dev": "astro dev",

package/src/components/Badges.vue

@@ -15,10 +15,7 @@ const props = defineProps({
 
 <template>
   <div v-if="(props.badges && props.badges.length > 0)" class="absolute z-2">
-    <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' : 'bg-black')"
-    />
+    <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' : 'bg-black')" />
   </div>
 </template>

package/src/components/Breadcrumbs.vue

@@ -30,7 +30,6 @@ const props = defineProps({
     required: false,
     default: null
   }
-
 })
 
 const isLast = (index: Number) => {
@@ -105,4 +104,5 @@ const isLast = (index: Number) => {
       color: inherit;
     }
   }
-}</style>
+}
+</style>

package/src/components/Button.vue

@@ -18,7 +18,6 @@ const props = defineProps<{
 }>();
 
 const tag = props.href && props.href.length ? 'a' : 'button'
-
 const classes = {
   "btn-primary": props.primary,
   "btn-primary-outline": props.primaryOutline,
@@ -33,13 +32,10 @@ const classes = {
   "btn-normal": !props.small && !props.medium,
   "rounded-full": props.rounded
 };
-
-
 </script>
 
-
 <template>
-  <component  :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
+  <component :is="tag" :class="classes" :href="props.href" :title="props.title ? props.title : null">
     <slot></slot>
   </component>
 </template>

package/src/components/ButtonCopy.vue

@@ -29,9 +29,9 @@ 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" />
+    <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>
@@ -39,9 +39,9 @@ const { copy, copied, isSupported } = useClipboard({ source });
 <style>
 .tooltip {
     @apply invisible absolute;
-  }
-  
-  .has-tooltip:hover .tooltip {
-      @apply visible z-50;
-  }
+}
+
+.has-tooltip:hover .tooltip {
+    @apply visible z-50;
+}
 </style>

package/src/components/Card.astro

@@ -1,25 +1,27 @@
 ---
 const { class: className, imgSrc, imgAlt, href } = Astro.props;
 
-import Image from '../components/Image.astro'
+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={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>
+<div
+  class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
+>
+  <a href={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/Carousel.astro

@@ -1,19 +1,15 @@
 ---
-
+export const productObject = {
+  name: "Combi-instrument MFA+",
+  url: "https://google.com",
+  number: "6R0920870F",
+  photo:
+    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+};
 ---
-<script>
-  import { register } from "swiper/element/bundle";
-    
-  document.addEventListener("astro:page-load", () => {
-    //"DOMContentLoaded"
-    // register Swiper custom elements
-    register();
-  })
-
-</script>
 
 <swiper-container
-  class="max-w=full w-full flex"
+  class="max-w-full w-full flex overflow-hidden"
   grid-rows="1"
   mousewheel-force-to-axis="true"
   navigation="true"
@@ -22,20 +18,9 @@
   slides-per-view="auto"
   space-between="0"
 >
-  <swiper-slide class="bg-blue-50 p-12 border-1">
-    A
-  </swiper-slide>
-  <swiper-slide class="bg-blue-100 p-12 border-1">
-    B
-  </swiper-slide>
-  <swiper-slide class="bg-blue-200 p-12 border-1">
-    C
-  </swiper-slide>
-  <swiper-slide class="bg-blue-300 p-12 border-1">
-    D
-  </swiper-slide>
-  <swiper-slide class="bg-blue-400 p-12 border-1">
-    A
-  </swiper-slide>
-
-</swiper-container>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>

package/src/components/Copyright.astro

@@ -1,12 +1,12 @@
 ---
-    const { class: className } = Astro.props
+const { class: className } = Astro.props;
 ---
 
-      <div class="bg-vw h-11 flex items-center font-headlight justify-between px-4" class:list={[className]}>
-        <slot name="left-item"/>
-        <slot name="middle-item"/>
-        <slot name="right-item"/>
-      </div>
-
-    
-    
+<div
+  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
+  class:list={[className]}
+>
+  <slot name="left-item" />
+  <slot name="middle-item" />
+  <slot name="right-item" />
+</div>

package/src/components/FuckRussia.vue

@@ -21,7 +21,7 @@
 
 <style lang="scss">
 .bg-ukraine {
-  background: linear-gradient(180deg, #0066cc 56%, rgba(255,204,0,1) 44%);
+  background: linear-gradient(180deg, #0066cc 56%, rgba(255, 204, 0, 1) 44%);
 }
 
 .animate-bull {
@@ -49,17 +49,32 @@
 }
 
 @keyframes AnimateBull1 {
-  0% {transform: translate(14px,0px);}
-  100% {transform: translate(86px,0px);}
+  0% {
+    transform: translate(14px, 0px);
+  }
+
+  100% {
+    transform: translate(86px, 0px);
+  }
 }
 
 @keyframes AnimateBull2 {
-  0% {transform: translate(38px,0px);}
-  100% {transform: translate(80px,0px);}
+  0% {
+    transform: translate(38px, 0px);
+  }
+
+  100% {
+    transform: translate(80px, 0px);
+  }
 }
 
 @keyframes AnimateBull3 {
-  0% {transform: translate(62px,0px);}
-  100% {transform: translate(88px,0px);}
+  0% {
+    transform: translate(62px, 0px);
+  }
+
+  100% {
+    transform: translate(88px, 0px);
+  }
 }
 </style>

package/src/components/Header/Header.astro

@@ -64,9 +64,8 @@ import Search from "astro-pagefind/components/Search";
       @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
     }
     .pagefind-ui {
-
       @apply font-textlight text-base;
-      
+
       &__search-input {
         height: 40px !important;
         border: 0;

package/src/components/Headline.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
 
-
 const props = defineProps({
   as: {
     type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
@@ -19,20 +18,16 @@ const props = defineProps({
     default: false
   }
 })
-
 </script>
 
 <template>
   <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>
 
 <style lang="scss">
-
 .headline--underline {
   @apply relative pb-4;
 
@@ -57,4 +52,4 @@ const props = defineProps({
     background-color: #64748b
   }
 }
-</style>
+</style>

package/src/components/Image.astro

@@ -1,28 +1,30 @@
 ---
-import { Image } from 'astro:assets'
+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'
+  inputProps["data-pagefind-meta"] = "image[src], image_alt[alt]";
+  inputProps["loading"] = "eager";
 }
 
 if (imageObject.srcset && imageObject.srcset.length) {
-  inputProps['widths'] = imageObject.srcset
+  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}
-/>
+
+<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}
+/>

package/src/components/Jumbatron.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     <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 -->
+        <header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div class="text-center">
             <h1 class="text-3xl  tracking-tight sm:(text-4xl pt-0) md:text-5xl lg:text-6xl  font-headlight text-white">
               <slot name="intro" />

package/src/components/LeftSidebar.astro

@@ -1,45 +1,53 @@
 ---
-import { SIDEBAR } from '../config';
-import { Astronav, MenuItems} from "astro-navbar";
+import { SIDEBAR } from "../config";
+import { Astronav, MenuItems } from "astro-navbar";
 const { currentPage } = Astro.props;
 const currentPageMatch = currentPage.slice(1);
 
 const isCurrentPage = (item) => {
-	if (item.link) {
-		return item.link.includes(currentPageMatch);
-	}
-	return false;
+  if (item.link) {
+    return item.link.includes(currentPageMatch);
+  }
+  return false;
 };
 
 const getLinkClasses = (link) => {
-	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"
+  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";
-	} else {
-		return baseClasses;
-	}
-}
+  if (isCurrentPage(link)) {
+    return baseClasses + " border-slate-500 text-slate-900";
+  } else {
+    return baseClasses;
+  }
+};
 ---
+
 <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>
-			))}
-		</ul>
-	</MenuItems>
+  <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>
+          ),
+        )
+      }
+    </ul>
+  </MenuItems>
 </Astronav>
 
 <script is:inline>
-	window.addEventListener('DOMContentLoaded', (event) => {
-		var target = document.querySelector('[aria-current="page"]');
-		if (target && target.offsetTop > window.innerHeight - 100) {
-			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
-		}
-	});
+  window.addEventListener("DOMContentLoaded", (event) => {
+    var target = document.querySelector('[aria-current="page"]');
+    if (target && target.offsetTop > window.innerHeight - 100) {
+      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
+    }
+  });
 </script>
-

package/src/components/MainColors.vue

@@ -1,16 +1,17 @@
+<script setup lang="ts">
+import { COLORS } from "../design.config";
+
+const colorNames = Object.keys(COLORS);
+</script>
+
 <template>
   <div class="flex flex-col space-y-12">
     <div v-for="name in colorNames" :key="name">
       <h3 class="capitalize">{{ name }}</h3>
       <div class="grid grid-cols-3 md:grid-cols-9">
         <div v-for="color in COLORS[name]" :key="color" class="mb-6">
-          <div
-            class="h-12 transition-all"
-            :style="`background: ${color.value}`"
-          ></div>
-          <div
-            class="text-sm flex flex-col text-center font-mono text-slate-500"
-          >
+          <div class="h-12 transition-all" :style="`background: ${color.value}`"></div>
+          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
             <span>{{ color.name }}</span>
             <span class="uppercase text-xs">{{ color.value }}</span>
           </div>
@@ -20,10 +21,3 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { COLORS } from "../design.config";
-
-const colorNames = Object.keys(COLORS);
-</script>
-
-<style scoped></style>

package/src/components/MainInput.vue

@@ -1,18 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string;
+}>();
+</script>
+
 <template>
   <label class="group text-left w-full max-w-xs flex flex-col">
-    <span
-      class="group-hover:text-blue-600 ml-2 text-slate-600 text-sm group-focus-within:text-blue-600"
-      >{{ label }}</span
-    >
+    <span class="group-hover:text-blue-600 ml-2 text-slate-600 text-sm group-focus-within:text-blue-600">{{ label
+    }}</span>
     <input
       class="group-hover:border-blue-500 border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-600"
-      type="text"
-    />
+      type="text" />
   </label>
 </template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  label: string;
-}>();
-</script>

package/src/components/MainTable.vue

@@ -11,8 +11,6 @@ const capitalizeFirstLetter = (text: String) => {
 
 </script>
 
-
-
 <template>
   <table class="table-auto text-left border bg-white shadow-md">
     <thead class="bg-gray-500 text-white">

package/src/components/Modal.astro

@@ -1,20 +1,20 @@
 ---
-const {id, open} = Astro.props;
-import Button from '../components/Button.vue'
+const { id, open } = Astro.props;
+import Button from "../components/Button.vue";
 ---
-<style lang="scss">
-dialog {
-  @apply fixed top-0 left-0 right-0 bottom-0;
 
-  &::backdrop {
-    @apply bg-gray-500/50 fixed;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
+<style lang="scss">
+  dialog {
+    @apply fixed top-0 left-0 right-0 bottom-0;
 
+    &::backdrop {
+      @apply bg-gray-500/50 fixed;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
   }
-}
 </style>
 
 <Button primary onclick={`window.${id}.showModal()`}>{open}</Button>
@@ -24,4 +24,4 @@ dialog {
   <form method="dialog">
     <slot name="close" />
   </form>
-</dialog>
+</dialog>

package/src/components/PageContent.astro

@@ -1,13 +1,5 @@
----
-const { content, githubEditUrl } = Astro.props;
-const title = content.title;
----
-
 <article id="article" class="content">
-	<section class="main-section">
-		<nav class="block sm:hidden">
-		</nav>
-		<slot />
-	</section>
+  <section class="main-section">
+    <slot />
+  </section>
 </article>
-

package/src/components/PostHeader.astro

@@ -16,8 +16,7 @@ interface Props {
   }[];
 }
 
-const { image, title, categories, date, author } =
-  Astro.props;
+const { image, title, categories, date, author } = Astro.props;
 import CategoryLink from "./CategoryLink.astro";
 import Date from "./Date.astro";
 ---

package/src/components/PrCode.vue

@@ -20,7 +20,8 @@ const props = defineProps({
 </script>
 
 <template>
-    <span data-pagefind-filter="PR-Code" class="btn-prcode " :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
+    <span data-pagefind-filter="PR-Code" class="btn-prcode "
+        :class="`btn-prcode--${props.prcode} ${props.isPdp ? ' btn-prcode--pdp' : ''}`">
         {{ props.prcode }}
     </span>
 </template>

package/src/components/ProductCarousel.astro

@@ -0,0 +1,38 @@
+---
+import ProductTile from "../components/ProductTile.astro";
+export const productObject = {
+  name: "Combi-instrument MFA+",
+  url: "https://google.com",
+  number: "6R0920870F",
+  photo:
+    "https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337",
+};
+---
+
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    <swiper-slide class="carousel-product-tile">
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+  </swiper-container>
+</div>

package/src/components/ProductNumber.astro

@@ -86,7 +86,7 @@ const niceName = (string: string, separator = "\u00A0") => {
           </div>
         )}
 
-        { copyDisabled && (
+        {copyDisabled && (
           <ButtonCopy
             productNumber={String(productNumber)}
             texts={butonTexts}
@@ -94,7 +94,6 @@ const niceName = (string: string, separator = "\u00A0") => {
             client:only
           />
         )}
-
       </div>
 
       <div

package/src/components/ProductTile.astro

@@ -1,6 +1,5 @@
 ---
 const { productObject, locale, index } = Astro.props;
-import i18next, { t } from "i18next";
 import Image from "./Image.astro"
 import ProductNumber from "./ProductNumber.astro"
 
@@ -9,7 +8,6 @@ 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 underline-on-hover">
     <!-- product image -->
     <div class="img--4/3 img--small">
       { productObject.photo !== null ?
@@ -46,7 +44,5 @@ import ProductNumber from "./ProductNumber.astro"
       }
     </div>
 
-  </div>
-
 )}
 

package/src/components/SlimBanner.vue

@@ -15,34 +15,45 @@ const toggleVisibility = () => {
 </script>
 
 <template>
-  <div v-if="isShow" data-pagefind-ignore class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
-    <span class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
-    <span class="leading-none "><span data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
-      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
+  <div v-if="isShow" data-pagefind-ignore
+    class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
+    <span
+      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
+    <span class="leading-none "><span
+        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
+      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener"
+        class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
     </span>
 
-    <button class="ml-3 text-white relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
-        <span class="close"></span>
+    <button class="ml-3 text-white relative w-5 h-5" v-if="props.showCloseButton" @click="toggleVisibility()"
+      aria-label="Toggle">
+      <span class="close"></span>
     </button>
   </div>
-  <div v-else data-pagefind-ignore class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white 	 relative bg-black drop-shadow-md z-2 ">
+  <div v-else data-pagefind-ignore
+    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white 	 relative bg-black drop-shadow-md z-2 ">
     <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3" data-text="TERRORIST"/> <span data-text="STATE" />
+      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
+        data-text="TERRORIST" /> <span data-text="STATE" />
     </div>
-    <button class="ml-3 text-red-600 relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
-        <span class="close"></span>
+    <button class="ml-3 text-red-600 relative w-5 h-5" v-if="props.showCloseButton" @click="toggleVisibility()"
+      aria-label="Toggle">
+      <span class="close"></span>
     </button>
   </div>
 </template>
 
 <style lang="scss">
 .close {
-  @apply absolute top-0 left-0 opacity-50	;
+  @apply absolute top-0 left-0 opacity-50;
 }
+
 .close:hover {
   @apply opacity-100;
 }
-.close:before, .close:after {
+
+.close:before,
+.close:after {
   position: absolute;
   left: 0.5rem;
   content: ' ';
@@ -50,11 +61,11 @@ const toggleVisibility = () => {
   width: 2px;
   background-color: #fff;
 }
+
 .close:before {
   transform: rotate(45deg);
 }
+
 .close:after {
   transform: rotate(-45deg);
-}
-
-</style>
+}</style>

package/src/components/TableOfContents.astro

@@ -1,12 +1,15 @@
 ---
-	const { headers } = Astro.props;
+const { headers } = Astro.props;
 ---
+
 <ul class="flex flex-col gap-4 mt-24">
-	{ headers.map(({ slug, text }) => {
-		return (
-		<li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
-			#<a href={`#${slug}`}>{text}</a>
-		</li>
-		) 
-	}) }
-</ul>
+  {
+    headers.map(({ slug, text }) => {
+      return (
+        <li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
+          #<a href={`#${slug}`}>{text}</a>
+        </li>
+      );
+    })
+  }
+</ul>

package/src/components/Translations.vue

@@ -13,14 +13,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-pagefind-ignore
-    v-if="props.translations !== null && props.translations.uri">
-    <a aria-label="Change language"
-    type="button" 
-    :href="translations.uri" 
-    :title="translations.name ? translations.name : translations.title" 
-    :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
+  <div data-pagefind-ignore v-if="props.translations !== null && props.translations.uri">
+    <a aria-label="Change language" type="button" :href="translations.uri"
+      :title="translations.name ? translations.name : translations.title"
+      :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
   </div>
 </template>
 

package/src/components/flags/FlagPL.vue

@@ -1,3 +1,4 @@
 <template>
-      <span class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
+      <span
+            class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
 </template>

package/src/config.ts

@@ -27,6 +27,7 @@ export const SIDEBAR = [
   { text: "Breadcrumbs", link: "/components/breadcrumbs" },
   { text: "Buttons", link: "/components/buttons" },
   { text: "Card", link: "/components/card" },
+  { text: "Carousel", link: "/components/carousel" },
   { text: "Copyright", link: "/components/copyright" },
   { text: "HandDrive", link: "/components/hand-drive" },
   { text: "Headline", link: "/components/headline" },

package/src/layouts/Layout.astro

@@ -1,43 +1,58 @@
 ---
-import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from '../components/HeadSEO.astro';
-import * as CONFIG from '../config';
+import HeadCommon from "../components/HeadCommon.astro";
+import HeadSEO from "../components/HeadSEO.astro";
+import * as CONFIG from "../config";
 import { t, changeLanguage } from "i18next";
-import '../styles/main.scss';
-import Copyright from '../components/Copyright.astro'
+import "../styles/main.scss";
+import Copyright from "../components/Copyright.astro";
 const locale = "en";
 changeLanguage(locale);
 const { content = {} } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---
 
-<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
-	<head>
-		<HeadCommon />
-		<HeadSEO {content} canonicalURL={canonicalURL} />
-		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
-	</head>
+<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
+  <head>
+    <HeadCommon />
+    <HeadSEO {content} canonicalURL={canonicalURL} />
+    <title>
+      {
+        content.title
+          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
+          : CONFIG.SITE.title
+      }
+    </title>
+  </head>
 
-	<body class="bg-blue-50">
-
-
-		<div class=" bg-white z-10 mb-11 relative">
-			<slot />
-		</div>
-		<footer>
-			<Copyright class="fixed bottom-0 z-0 w-full">
-				<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 ${import.meta.env.COPYRIGHT_DOMAIN}`}>
-				  <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="spoko.space.svg"
-					alt="Modern Websites"
-					width="126"
-					height="23"
-					loading="lazy"
-				  >
-				</a>
-			  </Copyright>
-		</footer>
-	</body>
+  <body class="bg-blue-50">
+    <div class="bg-white z-10 mb-11 relative">
+      <slot />
+    </div>
+    <footer>
+      <Copyright class="fixed bottom-0 z-0 w-full">
+        <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 ${
+            import.meta.env.COPYRIGHT_DOMAIN
+          }`}
+        >
+          <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="spoko.space.svg"
+            alt="Modern Websites"
+            width="126"
+            height="23"
+            loading="lazy"
+          />
+        </a>
+      </Copyright>
+    </footer>
+  </body>
 </html>

package/src/layouts/MainLayout.astro

@@ -1,14 +1,14 @@
 ---
-import { ViewTransitions } from 'astro:transitions';
-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 * as CONFIG from '../config';
+import { ViewTransitions } from "astro:transitions";
+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 * as CONFIG from "../config";
 import { t, changeLanguage } from "i18next";
-import '../styles/main.scss';
-import Copyright from '../components/Copyright.astro'
+import "../styles/main.scss";
+import Copyright from "../components/Copyright.astro";
 const locale = "en";
 changeLanguage(locale);
 const { content = {} } = Astro.props;
@@ -16,45 +16,68 @@ const currentPage = Astro.url.pathname;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---
 
-<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
-	<head>
-		<HeadCommon />
-		<HeadSEO {content} canonicalURL={canonicalURL} />
-		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
-		<ViewTransitions />
-	</head>
+<script>
+  // Swiper Element
+  import { register } from "swiper/element/bundle";
+  document.addEventListener("astro:page-load", () => {
+    register();
+  });
+</script>
 
-	<body class="bg-blue-50">
-		<div class="sticky top-0 z-20 w-full bg-white/70">
-			<Header currentPage={currentPage} />
-		</div>
+<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
+  <head>
+    <HeadCommon />
+    <HeadSEO {content} canonicalURL={canonicalURL} />
+    <title>
+      {
+        content.title
+          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
+          : CONFIG.SITE.title
+      }
+    </title>
+    <ViewTransitions />
+  </head>
 
-		<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"  transition:name="sidebar">
-					<LeftSidebar currentPage={currentPage} />
-				</div>
-			</div>
-			<main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
-				<PageContent content={content}  transition:name="content">
-					<slot />
-				</PageContent>
-			</main>
-		</div>
-		<footer>
-			<Copyright class="fixed bottom-0 z-0 w-full">
-				<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="/spoko.space.svg"
-					alt="Modern Websites"
-					width="126"
-					height="23"
-					loading="lazy"
-				  >
-				</a>
-			  </Copyright>
-		</footer>
-	</body>
+  <body class="bg-blue-50">
+    <div class="sticky top-0 z-20 w-full bg-white/70">
+      <Header currentPage={currentPage} />
+    </div>
+
+    <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" transition:name="sidebar">
+          <LeftSidebar currentPage={currentPage} />
+        </div>
+      </div>
+      <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
+        <PageContent content={content} transition:name="content">
+          <slot />
+        </PageContent>
+      </main>
+    </div>
+    <footer>
+      <Copyright class="fixed bottom-0 z-0 w-full">
+        <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="/spoko.space.svg"
+            alt="Modern Websites"
+            width="126"
+            height="23"
+            loading="lazy"
+          />
+        </a>
+      </Copyright>
+    </footer>
+  </body>
 </html>

package/src/pages/components/carousel.mdx

@@ -3,6 +3,7 @@ title: "Carousel"
 layout: "../../layouts/MainLayout.astro"
 ---
 import Carousel from '../../components/Carousel.astro'
+import ProductCarousel from '../../components/ProductCarousel.astro'
 
 # Carousel
 
@@ -13,8 +14,49 @@ Carousel - modern carousel based on Swiper Element (Web Component)
 </div>
 
 ```js
-     <Carousel />
+<swiper-container
+  class="max-w-full w-full flex overflow-hidden"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1 min-w-full">A</swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1 min-w-full">B</swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1 min-w-full">C</swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1 min-w-full">D</swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1 min-w-full">A</swiper-slide>
+</swiper-container>
 ```
 #
 
-Find the code for this page in the `src/pages/components/carousel.mdx` file.
+Find the code for this page in the `src/pages/components/carousel.mdx` file.
+
+
+## Product Carousel
+<div class="component-preview">
+  <ProductCarousel />
+</div>
+```html
+<div class="bg-white rounded-lg p-4 w-full">
+  <swiper-container
+    class="flex w-full max-w-full"
+    grid-rows="1"
+    mousewheel-force-to-axis="true"
+    navigation="false"
+    scrollbar="false"
+    slides-per-view="auto"
+    space-between="0"
+  >
+    <swiper-slide
+      class="carousel-product-tile"
+    >
+      <ProductTile productObject={productObject} />
+    </swiper-slide>
+    ...
+  </swiper-container>
+</div>
+```

package/src/pages/components/product-tile.mdx

@@ -15,15 +15,27 @@ export const productObject = {
 
 ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
 
+It requires a container with a specific width - it's best to set it directly in the carousel's `<swiper-slide>` tag.
+#
+
 <div class="component-preview">
   <div class="flex flex-wrap bg-white w-full p-4 pb-0">
 
-      <ProductTile productObject={productObject} />
-      <ProductTile productObject={productObject} />
-      <ProductTile productObject={productObject} />
-      <ProductTile productObject={productObject} />
-      <ProductTile productObjec={productObject}t />
-      <ProductTile productObject={productObject} />
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
+      <div class="flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 md:(w-96 min-w-96) ml-1 lg:ml-1.5 relative bg-white mb-4 underline-on-hover">
+        <ProductTile productObject={productObject} />
+      </div>
   </div>
 </div>
 

package/src/pages/components/slimbanner.mdx

@@ -9,13 +9,13 @@ import SlimBanner from '../../components/SlimBanner.vue'
 SlimBanner - solidarity with Ukraine.
 
 <div class="component-preview">
-      <SlimBanner
-        class="w-full"
-        client:load
-        showCloseButton
-        transition:name="slim-banner"
-        transition:persist
-      />
+  <SlimBanner
+    class="w-full"
+    client:load
+    showCloseButton
+    transition:name="slim-banner"
+    transition:persist
+  />
 </div>
 
 ```js

package/src/pages/core/introduction.mdx

@@ -20,6 +20,7 @@ The project is still in the development phase, use at your own risk ;-)
 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:
 

package/uno.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
     ['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
     ['img--medium', 'w-60'],
     ['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px  after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
-
+    ['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
     ['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center shadow text-base text-white'],
     ['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
     ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],

package/src/components/Header/AstroLogo.astro

@@ -1,7 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-
-const { size } = Astro.props;
----
-
-<Icon name="noto-v1:letter-s" />

package/src/components/RightSidebar.astro

@@ -1,12 +0,0 @@
----
-import TableOfContents from './TableOfContents.astro';
-const { content } = Astro.props;
-const headers = content.astro?.headers || [];
----
-
-<nav aria-labelledby="grid-right">
-	<div class="px-8">
-		<TableOfContents headers={headers} />
-		<pre>{JSON.stringify(content)}</pre>
-	</div>
-</nav>