spoko-design-system 1.8.1 → 1.9.1

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/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [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
+
+* **homepage:** refactor to use config-driven loops and responsive typography ([d97c659](https://github.com/polo-blue/sds/commit/d97c659e0e30d0a79234d8868371edac290608cf))
+
 ## [1.8.1](https://github.com/polo-blue/sds/compare/v1.8.0...v1.8.1) (2025-10-29)
 
 ### Bug Fixes

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.8.1",
+  "version": "1.9.1",
   "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/Product/ProductEngine.astro

@@ -0,0 +1,67 @@
+---
+import { getEngineTooltipContent } from '../../utils/product/getEngineTooltipContent';
+import type { Engine, EngineTranslations } from '../../utils/product/getEngineTooltipContent';
+
+/*
+  VAG group (VW/Audi/Skoda/Seat/Porsche/Bentley/Lamborghini/Ducati/Cupra/Scania/MAN) manufacturer Engine Code
+  Displays engine code with detailed tooltip showing: name, power, displacement, dates, etc.
+
+  SEO-friendly: Engine code is rendered in HTML, tooltips enhanced via delegation script
+*/
+
+interface Props {
+  engine: Engine;
+  showComma?: boolean;
+  translations?: EngineTranslations;
+}
+
+const { engine, showComma = false, translations = {} } = Astro.props;
+
+// Generate tooltip content for data attribute
+const tooltipContent = getEngineTooltipContent(engine, translations);
+
+// Escape quotes for HTML attribute
+const tooltipContentEscaped = tooltipContent.replace(/"/g, '"');
+---
+
+<span
+  class="engine-code"
+  class:list={[`engine-code-${engine.code}`]}
+  data-tippy-content={tooltipContentEscaped}
+>
+  {engine.code}{showComma && ','}
+</span>
+
+<style>
+/* Engine Code Styles */
+.engine-code {
+  @apply inline-block mr-1;
+  @apply underline decoration-dotted underline-offset-4 py-0.5;
+  @apply decoration-neutral-light cursor-default;
+  @apply transition-colors duration-200;
+}
+
+.engine-code:hover {
+  @apply decoration-blue-darker dark:decoration-blue-light;
+}
+
+/* Semantic Engine Code Colors */
+/* GTI Engines - Red */
+.engine-code-CAVE,
+.engine-code-CTHE,
+.engine-code-DAJA,
+.engine-code-DAYB {
+  @apply text-red-600 dark:text-red-500;
+}
+
+/* WRC R Engine - Blue */
+.engine-code-CDLJ {
+  @apply text-blue-600 dark:text-blue-500;
+}
+
+/* Special Blue Engines */
+.engine-code-CPTA,
+.engine-code-CZEA {
+  @apply text-blue-700 dark:text-blue-600;
+}
+</style>

package/src/components/Product/ProductEngines.astro

@@ -0,0 +1,43 @@
+---
+import ProductEngine from './ProductEngine.astro';
+import type { Engine, EngineTranslations } from '../../utils/product/getEngineTooltipContent';
+
+/*
+  ProductEngines wrapper component
+  Displays a list of engine codes with tooltips
+  SEO-friendly: All engine codes rendered in HTML, enhanced by global delegation script
+*/
+
+interface Props {
+  engines: Engine[];
+  isPdp?: boolean;
+  translations?: EngineTranslations;
+}
+
+const { engines = [], isPdp = false, translations = {} } = Astro.props;
+
+// Sort engines by code
+const sortedEngines = engines.length
+  ? [...engines].sort((a, b) => (a.code || '').localeCompare(b.code || ''))
+  : [];
+---
+
+{
+  sortedEngines.length > 0 && (
+    <div class="engines-list inline-flex flex-wrap items-center gap-x-0.5">
+      {sortedEngines.map((engine, index) => (
+        <ProductEngine
+          engine={engine}
+          showComma={index !== sortedEngines.length - 1}
+          translations={translations}
+        />
+      ))}
+    </div>
+  )
+}
+
+<style>
+.engines-list {
+  @apply leading-none;
+}
+</style>

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

@@ -2,28 +2,46 @@
 title: "ProductEngine"
 layout: "../../layouts/MainLayout.astro"
 ---
-import ProductEngine from '../../components/Product/ProductEngine.vue'
-import ProductEngines from '../../components/Product/ProductEngines.vue'
+import ProductEngine from '../../components/Product/ProductEngine.astro'
+import ProductEngines from '../../components/Product/ProductEngines.astro'
 
 # ProductEngine
 
 Engine codes with detailed tooltips showing specifications like power, displacement, dates, and more.
 
+**⚡ Performance-optimized**: Uses Tippy.js delegation pattern - one global script handles all tooltips efficiently.
+
+**🔍 SEO-friendly**: Engine codes rendered as static HTML (no client-side hydration required).
+
 ## Single Engine Code
 
 Display a single engine code with tooltip showing detailed engine information.
 
-### import:
+### Setup:
+
+**1. Import the component:**
 
 ```js
-import ProductEngine from 'spoko-design-system/src/components/Product/ProductEngine.vue'
+import { ProductEngine } from 'spoko-design-system'
+```
+
+**2. Initialize tooltips in your layout (once):**
+
+```astro
+---
+// In your layout file (e.g., Layout.astro)
+---
+<script>
+  import { initTooltips } from 'spoko-design-system';
+  initTooltips();
+</script>
 ```
 
 ### Basic Usage (New API Structure):
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full flex gap-2">
-          <ProductEngine client:load engine={{
+          <ProductEngine engine={{
                code: "CAYA",
                name: "1.6 TDI",
                serie: { value: "EA189", label: "Seria silnika" },
@@ -31,7 +49,7 @@ import ProductEngine from 'spoko-design-system/src/components/Product/ProductEng
                displacement: { value: 1598, label: "Pojemność" },
                euro: { value: 5, label: "Norma Euro" }
           }} />
-          <ProductEngine client:load engine={{
+          <ProductEngine engine={{
                code: "CAYB",
                name: "1.6 TDI",
                serie: { value: "EA189", label: "Seria silnika" },
@@ -42,21 +60,25 @@ import ProductEngine from 'spoko-design-system/src/components/Product/ProductEng
      </div>
 </div>
 
-```vue
+```astro
+---
+import { ProductEngine } from 'spoko-design-system';
+---
+
 <!-- New API structure (with built-in translations) -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CAYA',
   name: '1.6 TDI',
   serie: { value: 'EA189', label: 'Seria silnika' },
   power: { kw: 55, ps: 75, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1598, label: 'Pojemność' },
   euro: { value: 5, label: 'Norma Euro' }
-}" />
+}} />
 
 <!-- Old API structure (backward compatible) -->
 <ProductEngine
-  :engine="{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }"
-  :translations="{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }"
+  engine={{ code: 'CAYA', name: '1.6 TDI', kw: 55, ps: 75, cc: 1598, serie: 3, euro: 5 }}
+  translations={{ power: 'Moc', cc: 'Pojemność', euro: 'Euro', horsepowerUnit: 'KM' }}
 />
 ```
 
@@ -68,7 +90,7 @@ Engine codes for special editions are automatically color-coded:
      <div class="bg-white p-6 w-full flex flex-wrap gap-3">
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">GTI Engine (Red)</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CAVE",
                     name: "1.4 TSI",
                     power: { kw: 132, ps: 180, ps_label: "KM", label: "Moc" },
@@ -78,7 +100,7 @@ Engine codes for special editions are automatically color-coded:
           </div>
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">WRC Engine (Blue)</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CDLJ",
                     name: "1.6 TDI",
                     power: { kw: 165, ps: 220, ps_label: "KM", label: "Moc" },
@@ -88,7 +110,7 @@ Engine codes for special editions are automatically color-coded:
           </div>
           <div class="flex flex-col gap-1">
                <small class="text-xs text-gray-500">Special Blue</small>
-               <ProductEngine client:load engine={{
+               <ProductEngine engine={{
                     code: "CPTA",
                     name: "1.0 TSI",
                     power: { kw: 70, ps: 95, ps_label: "KM", label: "Moc" },
@@ -99,41 +121,41 @@ Engine codes for special editions are automatically color-coded:
      </div>
 </div>
 
-```vue
+```astro
 <!-- GTI Engine - Red -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CAVE',
   name: '1.4 TSI',
   power: { kw: 132, ps: 180, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1390, label: 'Pojemność' },
   euro: { value: 5, label: 'Norma Euro' }
-}" />
+}} />
 
 <!-- WRC Engine - Blue -->
-<ProductEngine :engine="{
+<ProductEngine engine={{
   code: 'CDLJ',
   name: '1.6 TDI',
   power: { kw: 165, ps: 220, ps_label: 'KM', label: 'Moc' },
   displacement: { value: 1598, label: 'Pojemność' },
   euro: { value: 6, label: 'Norma Euro' }
-}" />
+}} />
 ```
 
 ## Engine List
 
 Display multiple engine codes from an array (from API response).
 
-### import:
+### Import:
 
 ```js
-import ProductEngines from 'spoko-design-system/src/components/Product/ProductEngines.vue'
+import { ProductEngines } from 'spoko-design-system'
 ```
 
 ### Usage:
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full">
-          <ProductEngines client:load engines={[
+          <ProductEngines engines={[
                {
                     id: 13,
                     code: "CAYA",
@@ -165,8 +187,12 @@ import ProductEngines from 'spoko-design-system/src/components/Product/ProductEn
      </div>
 </div>
 
-```vue
-<ProductEngines :engines="[
+```astro
+---
+import { ProductEngines } from 'spoko-design-system';
+---
+
+<ProductEngines engines={[
   {
     id: 13,
     code: 'CAYA',
@@ -185,17 +211,17 @@ import ProductEngines from 'spoko-design-system/src/components/Product/ProductEn
     displacement: { value: 1598, label: 'Pojemność' },
     euro: { value: 5, label: 'Norma Euro' }
   }
-]" />
+]} />
 ```
 
 ### With API Data:
 
 When using data from the API, pass the `part_engines` array directly. The component automatically extracts translations from the nested structure:
 
-```vue
+```astro
 <ProductEngines
-  :engines="product.part_engines"
-  :isPdp="true"
+  engines={product.part_engines}
+  isPdp={true}
 />
 ```
 
@@ -334,7 +360,9 @@ When using data from the API, pass the `part_engines` array directly. The compon
 
 ## Features
 
-- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js)
+- ✅ **Rich Tooltips**: Shows detailed engine specifications on hover (Tippy.js delegation)
+- ✅ **Performance Optimized**: One global script handles all tooltips efficiently
+- ✅ **SEO-Friendly**: Engine codes rendered as static HTML (no hydration)
 - ✅ **API-Driven Translations**: Labels and units come directly from API
 - ✅ **Multi-language**: Supports Polish (KM), German (PS), English (HP)
 - ✅ **Two-Tone Design**: Dark blue header with light body for better hierarchy
@@ -342,7 +370,6 @@ When using data from the API, pass the `part_engines` array directly. The compon
 - ✅ **Clean Layout**: Flexbox-based design with semantic CSS classes
 - ✅ **Smart Data**: Only shows relevant fields (power, displacement, euro)
 - ✅ **Auto-sorting**: Engines automatically sorted alphabetically by code
-- ✅ **SEO-Friendly**: Static HTML enhanced with client-side tooltips
 - ✅ **Backward Compatible**: Works with both new and old API structures
 - ✅ **Touch Friendly**: Works on mobile devices
 
@@ -358,8 +385,10 @@ Special engine codes are automatically color-coded:
 
 ## Notes
 
+- **Setup required**: Call `initTooltips()` once in your layout to enable tooltips
 - Hover over any engine code to see full specifications in a detailed tooltip
-- Tooltips use Tippy.js with custom two-tone SDS theme
+- Tooltips use Tippy.js delegation pattern (one global handler for all tooltips)
+- **Performance**: No client-side hydration needed - pure Astro components
 - **New API structure**: Labels come from API (e.g., "Moc", "Pojemność", "KM")
 - **No manual translations needed**: The API provides all labels and units
 - The component automatically extracts series value from nested structure
@@ -368,3 +397,18 @@ Special engine codes are automatically color-coded:
 - Commas between engine codes are automatically handled in lists
 - **Backward compatible**: Still works with old flat API structure
 - Tooltip has dark blue header (#001e50) with light gray body (#f3f4f6)
+
+## Migration from Vue to Astro
+
+If upgrading from the old Vue version:
+
+1. **Remove `client:load`** directive from all ProductEngine/ProductEngines usage
+2. **Add tooltip initialization** to your layout:
+   ```astro
+   <script>
+     import { initTooltips } from 'spoko-design-system';
+     initTooltips();
+   </script>
+   ```
+3. **Update imports** to use Astro components (automatically handled by package exports)
+4. **No other changes needed** - props and API structure remain the same