spoko-design-system 1.9.0 → 1.9.2

package/.claude/settings.json

@@ -14,12 +14,12 @@
       "Bash(git log:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)"
+      "Bash(git push:*)"
     ],
     "deny": [
       "Bash(pnpm semantic-release:*)",
       "Bash(pnpm publish:*)",
       "Bash(npm publish:*)",
-      "Bash(git push:*)"
     ],
     "ask": [
       "Bash(rm:*)",

package/.husky/pre-commit

@@ -1,11 +1,27 @@
 echo "🔍 Running pre-commit checks..."
 
+# Run format check
+echo "🎨 Checking code formatting..."
+pnpm run format:check
+if [ $? -ne 0 ]; then
+  echo "❌ Format check failed! Run 'pnpm run format' to fix."
+  exit 1
+fi
+
+# Run linting
+echo "🔍 Running linter..."
+pnpm run lint
+if [ $? -ne 0 ]; then
+  echo "❌ Lint check failed! Run 'pnpm run lint:fix' to fix."
+  exit 1
+fi
+
 # Run Astro build to catch MDX and component errors
 echo "🏗️  Building project..."
 pnpm run build
 
 if [ $? -eq 0 ]; then
-  echo "✅ Build successful! Proceeding with commit..."
+  echo "✅ All checks passed! Proceeding with commit..."
 else
   echo "❌ Build failed! Please fix errors before committing."
   exit 1

package/.prettierrc

@@ -3,13 +3,15 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 110,
   "useTabs": false,
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "endOfLine": "lf",
-  "singleAttributePerLine": true,
-  "plugins": ["prettier-plugin-astro"],
+  "singleAttributePerLine": false,
+  "plugins": [
+    "prettier-plugin-astro"
+  ],
   "overrides": [
     {
       "files": "*.astro",
@@ -20,7 +22,9 @@
     {
       "files": "*.vue",
       "options": {
-        "parser": "vue"
+        "parser": "vue",
+        "vueIndentScriptAndStyle": false,
+        "htmlWhitespaceSensitivity": "ignore"
       }
     }
   ]

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [1.9.2](https://github.com/polo-blue/sds/compare/v1.9.1...v1.9.2) (2025-10-30)
+
+### Bug Fixes
+
+* improve prettier config and add comprehensive pre-commit checks ([847641e](https://github.com/polo-blue/sds/commit/847641e17566fa85a1fa5466b87a7028ae3287bb))
+
+## [1.9.1](https://github.com/polo-blue/sds/compare/v1.9.0...v1.9.1) (2025-10-30)
+
+### ⚠ BREAKING CHANGES
+
+* ProductEngine and ProductEngines are now Astro components
+
+Replace Vue components with Astro for better performance and SEO:
+- Convert ProductEngine.vue to ProductEngine.astro (SSR-friendly)
+- Convert ProductEngines.vue to ProductEngines.astro
+- Add getEngineTooltipContent utility for tooltip generation
+- Create global tooltip delegation script for performance
+- Add tippy.js CSS to main.css (tippy.css + tippy-theme.css)
+
+Benefits:
+- Engine codes now in HTML for SEO (no client-side hydration)
+- 1 global script handles all tooltips via delegation pattern
+- Tooltips created on-demand when hovered (not on mount)
+- Works for both engine codes and PR codes
+- Massive performance improvement on pages with many engines
+
+Migration:
+- Remove client:load directive from ProductEngines usage
+- Import and call initTooltips() in your layout
+- ProductEngine/ProductEngines now pure Astro (no Vue)
+
+### Code Refactoring
+
+* migrate ProductEngine from Vue to Astro with tooltip delegation ([b3589cc](https://github.com/polo-blue/sds/commit/b3589cc75da9cbf514bcffce2d06a8a36d67012e))
+
 ## [1.9.0](https://github.com/polo-blue/sds/compare/v1.8.1...v1.9.0) (2025-10-29)
 
 ### Features

package/index.ts

@@ -19,8 +19,7 @@ export { default as Headline } from './src/components/Headline.vue';
 export { default as Quote } from './src/components/Quote.vue';
 
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
-export { default as ProductEngine } from './src/components/Product/ProductEngine.vue';
-export { default as ProductEngines } from './src/components/Product/ProductEngines.vue';
+// ProductEngine and ProductEngines are now Astro components (see Astro Components section below)
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
 export { default as ProductColors } from './src/components/Product/ProductColors.vue';
 export { default as ProductDetailName } from './src/components/Product/ProductDetailName.vue';
@@ -50,6 +49,8 @@ export { default as ButtonCopy } from './src/components/ButtonCopy.astro';
 export { default as CallToAction } from './src/components/Layout/CallToAction.astro';
 
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
+export { default as ProductEngine } from './src/components/Product/ProductEngine.astro';
+export { default as ProductEngines } from './src/components/Product/ProductEngines.astro';
 
 export { default as CategoryDetails } from './src/components/Category/CategoryDetails.astro';
 export { default as CategoryTile } from './src/components/Category/CategoryTile.astro';
@@ -58,6 +59,8 @@ export { default as CategoryTile } from './src/components/Category/CategoryTile.
 // Utils: Product
 export { default as getPriceFormatted } from './src/utils/product/getPriceFormatted';
 export { default as getProductChecklist } from './src/utils/product/getProductChecklist';
+export { getEngineTooltipContent } from './src/utils/product/getEngineTooltipContent';
+export type { Engine, EngineTranslations } from './src/utils/product/getEngineTooltipContent';
 
 // Utils: SEO
 export { default as getShorterDescription } from './src/utils/seo/getShorterDescription';
@@ -70,3 +73,6 @@ export { default as formatLocaleNumber } from './src/utils/text/formatLocaleNumb
 export { default as formatPad } from './src/utils/text/formatPad';
 export { default as getNumberFormatted } from './src/utils/text/getNumberFormatted';
 export { default as getTranslatedLink } from './src/utils/text/getTranslatedLink';
+
+// Scripts
+export { initTooltips } from './src/scripts/tooltips';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -52,7 +52,7 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.41.0",
+    "@algolia/client-search": "^5.42.0",
     "@astrojs/mdx": "^4.3.9",
     "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
@@ -145,7 +145,8 @@
     },
     "ignoredBuiltDependencies": [
       "esbuild",
-      "sharp"
+      "sharp",
+      "vue-demi"
     ]
   },
   "engines": {

package/src/components/Badge.vue

@@ -14,10 +14,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    class="badge"
-    :class="props.class"
-  >
+  <div class="badge" :class="props.class">
     {{ props.badge }}
   </div>
 </template>

package/src/components/Badges.vue

@@ -47,10 +47,7 @@ const getBadgeColor = (badge: string | BadgeObject): string => {
 </script>
 
 <template>
-  <div
-    v-if="props.badges && props.badges.length > 0"
-    class="absolute z-2"
-  >
+  <div v-if="props.badges && props.badges.length > 0" class="absolute z-2">
     <Badge
       v-for="(badge, index) in props.badges"
       :key="index"

package/src/components/Breadcrumbs.vue

@@ -39,19 +39,9 @@ const isLast = (index: number) => {
 <template>
   <nav>
     <ul class="breadcrumbs-base">
-      <li
-        v-if="props.showBack"
-        class="breadcrumb-item"
-      >
-        <button
-          class="breadcrumb-back-btn"
-          :title="props.textBack"
-          onclick="history.back()"
-        >
-          <span
-            class="block px-3"
-            i-bx-bx-arrow-back
-          />
+      <li v-if="props.showBack" class="breadcrumb-item">
+        <button class="breadcrumb-back-btn" :title="props.textBack" onclick="history.back()">
+          <span class="block px-3" i-bx-bx-arrow-back />
         </button>
       </li>
     </ul>
@@ -60,10 +50,7 @@ const isLast = (index: number) => {
       itemscope
       itemtype="https://schema.org/BreadcrumbList"
     >
-      <li
-        v-if="props.showHome"
-        class="breadcrumb-item"
-      >
+      <li v-if="props.showHome" class="breadcrumb-item">
         <a
           href="/"
           class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
@@ -71,10 +58,7 @@ const isLast = (index: number) => {
           itemprop="item"
           i-carbon-home
         />
-        <meta
-          itemprop="position"
-          content="1"
-        />
+        <meta itemprop="position" content="1" />
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
@@ -84,11 +68,7 @@ const isLast = (index: number) => {
         itemscope
         itemtype="https://schema.org/ListItem"
       >
-        <span
-          v-if="index > 0 || props.showHome"
-          class="text-gray-400 px-1 py-4.25 sm:py-1"
-          >/</span
-        >
+        <span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
 
         <a
           v-if="!isLast(index)"
@@ -97,11 +77,7 @@ const isLast = (index: number) => {
           itemprop="item"
           :title="`Polo 6R ${crumb.name}`"
         >
-          <strong
-            class="font-normal"
-            itemprop="name"
-            >{{ crumb.name }}</strong
-          >
+          <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
         </a>
         <a
           v-else
@@ -110,23 +86,13 @@ const isLast = (index: number) => {
           :title="`Polo 6R ${crumb.name} ${productNumber}`"
           itemprop="item"
         >
-          <span
-            class="font-normal"
-            itemprop="name"
-          >
+          <span class="font-normal" itemprop="name">
             <span v-html="crumb.name" />
-            <b
-              v-if="productNumber"
-              class="hidden sm:inline font-normal ml-1"
-              >&nbsp;{{ productNumber }}</b
-            >
+            <b v-if="productNumber" class="hidden sm:inline font-normal ml-1">&nbsp;{{ productNumber }}</b>
           </span>
         </a>
 
-        <meta
-          itemprop="position"
-          :content="String(props.showHome ? index + 2 : index + 1)"
-        />
+        <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)" />
       </li>
     </ul>
   </nav>

package/src/components/Button.vue

@@ -28,11 +28,7 @@ const props = defineProps<ButtonProps>();
 // Check if we should add a default mediumHover for tertiary
 const shouldAddDefaultMediumHover =
   props.tertiary ||
-  (props.tertiaryOutline &&
-    !props.whiteHover &&
-    !props.lightHover &&
-    !props.mediumHover &&
-    !props.darkHover);
+  (props.tertiaryOutline && !props.whiteHover && !props.lightHover && !props.mediumHover && !props.darkHover);
 
 const tag = props.href && props.href.length ? 'a' : 'button';
 const classes = {

package/src/components/ButtonCopy.astro

@@ -25,13 +25,8 @@ const COPY_ICON = `url("data:image/svg+xml;utf8,${encodeURIComponent(
   <span
     class:list={['tooltip rounded-full btn-copy-text', tooltipClasses]}
     data-text={texts.copy}
-    data-copied-text={texts.copied}
-  ></span>
-  <span
-    class="copy-icon"
-    role="img"
-    aria-hidden="true"
-  ></span>
+    data-copied-text={texts.copied}></span>
+  <span class="copy-icon" role="img" aria-hidden="true"></span>
 </button>
 
 <script>

package/src/components/ButtonCopy.vue

@@ -27,18 +27,11 @@ const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 
 <template>
-  <button
-    :aria-label="texts.copy"
-    class="btn-copy has-tooltip"
-    @click="copy()"
-  >
+  <button :aria-label="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"
     />
-    <span
-      i-ph-copy-simple-light
-      class="leading-none w-full h-full"
-    />
+    <span i-ph-copy-simple-light class="leading-none w-full h-full" />
   </button>
 </template>

package/src/components/Card.astro

@@ -5,10 +5,7 @@ import Image from '../components/Image.astro';
 ---
 
 <div class="bg-white border border-gray-200 rounded-lg shadow overflow-hidden">
-  <a
-    href={href}
-    class="aspect-ratio-video block relative"
-  >
+  <a href={href} class="aspect-ratio-video block relative">
     {
       imgSrc && (
         <Image

package/src/components/Category/CategoriesCarousel.astro

@@ -9,9 +9,7 @@ const categories = await getMainCategoryList();
 const imgDomain = 'https://api.polo.blue/img/';
 
 const activeIndex =
-  activeCategorySlug && categories
-    ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug)
-    : 0;
+  activeCategorySlug && categories ? categories.map(a => a.slug).findIndex(e => e === activeCategorySlug) : 0;
 ---
 
 <!-- <div class={`cat-menu ${className ? className : ''}`} 
@@ -45,10 +43,7 @@ const activeIndex =
         role="presentation"
         class={`swiper-slide cats-slide group ${category.slug === activeCategorySlug ? 'active' : ''}`}
       >
-        <a
-          href={getTranslatedLink(`/${category.slug}/`)}
-          class="carousel-item"
-        >
+        <a href={getTranslatedLink(`/${category.slug}/`)} class="carousel-item">
           {
             // itemprop="url"
             // role="menuitem"
@@ -67,10 +62,7 @@ const activeIndex =
           />
           <div class="swiper-lazy-preloader" />
 
-          <div
-            class="cat-name"
-            itemprop="name"
-          >
+          <div class="cat-name" itemprop="name">
             {category.name}
           </div>
         </a>

package/src/components/Category/CategoryDetails.astro

@@ -3,16 +3,8 @@ import CategorySidebarToggler from './CategorySidebarToggler.vue';
 import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 
-const {
-  category,
-  subcategory,
-  subtitle,
-  subsubtitle,
-  titleSmall,
-  showViewToggler,
-  viewerLabels,
-  locale,
-} = Astro.props;
+const { category, subcategory, subtitle, subsubtitle, titleSmall, showViewToggler, viewerLabels } =
+  Astro.props;
 
 // Use paths directly from API - they already include locale and proper slashes
 const categoryPath = category?.path || `/${category.slug}/`;
@@ -24,16 +16,9 @@ const subcategoryPath = subcategory?.path || `/${category.slug}/${subcategory?.s
   transition:name="category-details"
   transition:animate="fade"
 >
-  <CategorySidebarToggler
-    class="category-sidebar-toggler w-12 md:w-8"
-    data-state="desktop"
-  >
+  <CategorySidebarToggler class="category-sidebar-toggler w-12 md:w-8" data-state="desktop">
     <div class="desktop-icons hidden md:block">
-      <Icon
-        name="ant-design:menu-fold-outlined"
-        class="toggler-btn w-6 expanded-icon"
-        aria-hidden="true"
-      />
+      <Icon name="ant-design:menu-fold-outlined" class="toggler-btn w-6 expanded-icon" aria-hidden="true" />
       <Icon
         name="ant-design:menu-unfold-outlined"
         class="toggler-btn w-6 collapsed-icon hidden"
@@ -41,11 +26,7 @@ const subcategoryPath = subcategory?.path || `/${category.slug}/${subcategory?.s
       />
     </div>
     <div class="mobile-icon block md:hidden">
-      <Icon
-        name="ant-design:menu-outlined"
-        class="toggler-btn w-6"
-        aria-hidden="true"
-      />
+      <Icon name="ant-design:menu-outlined" class="toggler-btn w-6" aria-hidden="true" />
     </div>
   </CategorySidebarToggler>
 
@@ -53,10 +34,7 @@ const subcategoryPath = subcategory?.path || `/${category.slug}/${subcategory?.s
     {
       subtitle ? (
         <>
-          <a
-            class="text-lg font-vw-headregular whitespace-nowrap block"
-            href={categoryPath}
-          >
+          <a class="text-lg font-vw-headregular whitespace-nowrap block" href={categoryPath}>
             {category.name}
             {titleSmall && <small>{titleSmall}</small>}
           </a>
@@ -89,10 +67,7 @@ const subcategoryPath = subcategory?.path || `/${category.slug}/${subcategory?.s
 
   {
     showViewToggler && (
-      <CategoryViewToggler
-        {...viewerLabels}
-        class="hidden lg:flex items-center gap-2 ml-auto"
-      />
+      <CategoryViewToggler {...viewerLabels} class="hidden lg:flex items-center gap-2 ml-auto" />
     )
   }
 </div>

package/src/components/Category/CategoryLink.vue

@@ -1,9 +1,5 @@
 <template>
-  <a
-    :href="href"
-    class="category-link"
-    :class="{ active: active }"
-  >
+  <a :href="href" class="category-link" :class="{ active: active }">
     {{ text }}
   </a>
 </template>

package/src/components/Category/CategorySidebarToggler.vue

@@ -1,9 +1,5 @@
 <template>
-  <button
-    class="category-toggler md:w-8"
-    type="button"
-    aria-label="toggle menu"
-  >
+  <button class="category-toggler md:w-8" type="button" aria-label="toggle menu">
     <slot />
   </button>
 </template>

package/src/components/Category/CategoryTile.astro

@@ -22,11 +22,7 @@ const prefix = locale === 'en' ? '' : `${locale}/`;
 const href = `/${prefix}${CategoryObject.slug}/`;
 ---
 
-<a
-  href={href}
-  class="carousel-item"
-  data-astro-prefetch
->
+<a href={href} class="carousel-item" data-astro-prefetch>
   <Image
     src={CategoryObject.photo}
     alt={CategoryObject.alt}
@@ -38,10 +34,7 @@ const href = `/${prefix}${CategoryObject.slug}/`;
     class="cats-img"
   />
   <div class="swiper-lazy-preloader"></div>
-  <div
-    class="cat-name"
-    itemprop="name"
-  >
+  <div class="cat-name" itemprop="name">
     {CategoryObject.name}
   </div>
 </a>

package/src/components/Category/CategoryViewToggler.astro

@@ -10,14 +10,7 @@ interface Props {
   class?: string;
 }
 
-const {
-  showText,
-  listText,
-  gridText,
-  listAriaLabel,
-  gridAriaLabel,
-  class: className,
-} = Astro.props;
+const { showText, listText, gridText, listAriaLabel, gridAriaLabel, class: className } = Astro.props;
 ---
 
 <div class:list={[className]}>
@@ -29,10 +22,7 @@ const {
       class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
       aria-label={listAriaLabel}
     >
-      <Icon
-        name="ant-design:bars-outlined"
-        class="w-4 h-4"
-      />
+      <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
       <span class="text-sm">{listText}</span>
     </button>
     <button
@@ -41,10 +31,7 @@ const {
       class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
       aria-label={gridAriaLabel}
     >
-      <Icon
-        name="ant-design:appstore-outlined"
-        class="w-4 h-4"
-      />
+      <Icon name="ant-design:appstore-outlined" class="w-4 h-4" />
       <span class="text-sm">{gridText}</span>
     </button>
   </div>

package/src/components/Copyright.astro

@@ -2,10 +2,7 @@
 const { class: className } = Astro.props;
 ---
 
-<div
-  class="bg-vw h-11 flex items-center font-headlight justify-between px-4"
-  class:list={[className]}
->
+<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" />

package/src/components/Date.astro

@@ -2,9 +2,6 @@
 const { date } = Astro.props;
 ---
 
-<time
-  class="text-sm flex items-center mr-2"
-  datetime={date}
->
+<time class="text-sm flex items-center mr-2" datetime={date}>
   {new Date(date).toLocaleDateString()}
 </time>

package/src/components/Faq.astro

@@ -17,11 +17,7 @@ interface Props {
 const { questions } = Astro.props;
 ---
 
-<div
-  class="flex flex-col mt-6 mb-4 w-full px-4 md:px-0"
-  itemscope
-  itemtype="https://schema.org/FAQPage"
->
+<div class="flex flex-col mt-6 mb-4 w-full px-4 md:px-0" itemscope itemtype="https://schema.org/FAQPage">
   <div class="mb-6 text-4xl font-headbold sm:text-4xl text-blue-802 faq-heading">
     Frequently Asked Questions
   </div>

package/src/components/FaqItem.astro

@@ -23,21 +23,10 @@ const { data } = Astro.props;
         class="py-2 outline-none cursor-pointer focus:underline text-xl font-500 relative items-center flex justify-between list-none
       after:(block duration-200 content-empty bg-[url(/arrow-bottom.svg)] bg-contain bg-center bg-no-repeat h-3 w-4 min-w-4 my-auto ml-4 opacity-60)"
       >
-        <h2
-          itemprop="name"
-          class="font-headbold"
-          set:html={data.question}
-        />
+        <h2 itemprop="name" class="font-headbold" set:html={data.question} />
       </summary>
-      <div
-        itemscope
-        itemprop="acceptedAnswer"
-        itemtype="https://schema.org/Answer"
-      >
-        <div
-          itemprop="text"
-          class="px-0 pb-4"
-        >
+      <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
+        <div itemprop="text" class="px-0 pb-4">
           <Markdown content={data.answer} />
         </div>
       </div>

package/src/components/FeaturesList.vue

@@ -16,18 +16,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <h2
-    v-if="props.caption"
-    class="features-list-caption"
-  >
+  <h2 v-if="props.caption" class="features-list-caption">
     {{ props.caption }}
   </h2>
   <ul class="features-list-ul">
-    <li
-      v-for="(item, index) in props.items"
-      :key="index"
-      class="features-list-item"
-    >
+    <li v-for="(item, index) in props.items" :key="index" class="features-list-item">
       {{ item }}
     </li>
   </ul>