spoko-design-system 1.3.3 → 1.3.4

package/.github/workflows/claude.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
-          fetch-depth: 1
+          fetch-depth: 0
 
       - name: Run Claude Code
         id: claude

package/.prettierrc

@@ -8,6 +8,7 @@
   "bracketSpacing": true,
   "arrowParens": "avoid",
   "endOfLine": "lf",
+  "singleAttributePerLine": true,
   "plugins": ["prettier-plugin-astro"],
   "overrides": [
     {

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.3.4](https://github.com/polo-blue/sds/compare/v1.3.3...v1.3.4) (2025-10-07)
+
+### Bug Fixes
+
+* resolve Prettier parsing errors in CategoryDetails component ([75b309f](https://github.com/polo-blue/sds/commit/75b309f94dd77fe9cdf941f0f21ec1ec63e34dfc))
+
 ## [1.3.3](https://github.com/polo-blue/sds/compare/v1.3.2...v1.3.3) (2025-10-07)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -51,7 +51,7 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.37.0",
+    "@algolia/client-search": "^5.40.0",
     "@astrojs/mdx": "^4.3.6",
     "@astrojs/node": "^9.4.4",
     "@astrojs/sitemap": "^3.6.0",
@@ -68,25 +68,25 @@
     "@iconify-json/eos-icons": "^1.2.4",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.7",
-    "@iconify-json/fluent": "^1.2.31",
+    "@iconify-json/fluent": "^1.2.32",
     "@iconify-json/fluent-emoji": "1.2.6",
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/la": "^1.2.1",
     "@iconify-json/lucide": "^1.2.68",
-    "@iconify-json/material-symbols-light": "^1.2.38",
+    "@iconify-json/material-symbols-light": "^1.2.40",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
     "@iconify-json/octicon": "^1.2.14",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.53",
+    "@iconify-json/simple-icons": "^1.2.54",
     "@iconify-json/streamline": "^1.2.5",
     "@iconify-json/streamline-emojis": "^1.2.4",
     "@iconify-json/streamline-freehand-color": "^1.2.2",
     "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/uil": "^1.2.3",
     "@iconify-json/vscode-icons": "^1.2.30",
-    "@iconify/json": "^2.2.387",
+    "@iconify/json": "^2.2.392",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
@@ -104,32 +104,32 @@
     "astro-navbar": "^2.4.0",
     "astro-pagefind": "^1.8.5",
     "astro-remote": "^0.3.4",
-    "dotenv": "^17.2.2",
+    "dotenv": "^17.2.3",
     "swiper": "^12.0.2",
     "unocss": "66.5.2",
-    "vue": "^3.5.21"
+    "vue": "^3.5.22"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.5.2",
-    "@typescript-eslint/eslint-plugin": "^8.44.1",
-    "@typescript-eslint/parser": "^8.44.1",
+    "@types/node": "^24.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.0",
+    "@typescript-eslint/parser": "^8.46.0",
     "@unocss/transformer-variant-group": "66.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/compiler-sfc": "^3.5.21",
+    "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.13.10",
+    "astro": "^5.14.1",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-vue": "^10.5.0",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "semantic-release": "^24.2.9",
     "unocss": "^0.65.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.9"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/components/Breadcrumbs.vue

@@ -74,7 +74,7 @@ const isLast = (index: number) => {
         <meta
           itemprop="position"
           content="1"
-        >
+        />
       </li>
       <li
         v-for="(crumb, index) in breadcrumbs"
@@ -87,7 +87,8 @@ const isLast = (index: number) => {
         <span
           v-if="index > 0 || props.showHome"
           class="text-gray-400 px-1 py-4.25 sm:py-1"
-        >/</span>
+          >/</span
+        >
 
         <a
           v-if="!isLast(index)"
@@ -99,7 +100,8 @@ const isLast = (index: number) => {
           <strong
             class="font-normal"
             itemprop="name"
-          >{{ crumb.name }}</strong>
+            >{{ crumb.name }}</strong
+          >
         </a>
         <a
           v-else
@@ -116,14 +118,15 @@ const isLast = (index: number) => {
             <b
               v-if="productNumber"
               class="hidden sm:inline font-normal ml-1"
-            >&nbsp;{{ productNumber }}</b>
+              >&nbsp;{{ productNumber }}</b
+            >
           </span>
         </a>
 
         <meta
           itemprop="position"
           :content="String(props.showHome ? index + 2 : index + 1)"
-        >
+        />
       </li>
     </ul>
   </nav>

package/src/components/ButtonCopy.astro

@@ -25,8 +25,13 @@ 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/Card.astro

@@ -5,7 +5,10 @@ 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

@@ -45,7 +45,10 @@ 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"
@@ -64,7 +67,10 @@ 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,10 +3,22 @@ import CategorySidebarToggler from './CategorySidebarToggler.vue';
 import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
 
-const { category, subcategory, subtitle, subsubtitle, titleSmall, showViewToggler, viewerLabels } =
-  Astro.props;
+const {
+  category,
+  subcategory,
+  subtitle,
+  subsubtitle,
+  titleSmall,
+  showViewToggler,
+  viewerLabels,
+  locale,
+} = Astro.props;
 
 const baseURL = '';
+const localePrefix = locale && locale !== 'en' ? `/${locale}` : '';
+const categoryPath = category?.path || `${localePrefix}/${category.slug}`;
+const subcategoryPath =
+  subcategory?.path || `${localePrefix}/${category.slug}/${subcategory?.slug}`;
 ---
 
 <div
@@ -14,9 +26,11 @@ const baseURL = '';
   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">
-      <!-- Desktop icons container -->
       <Icon
         name="ant-design:menu-fold-outlined"
         class="toggler-btn w-6 expanded-icon"
@@ -28,9 +42,12 @@ const baseURL = '';
         aria-hidden="true"
       />
     </div>
-    <!-- Mobile icon in separate container -->
     <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>
 
@@ -40,7 +57,7 @@ const baseURL = '';
         <>
           <a
             class="text-lg font-vw-headregular whitespace-nowrap block"
-            href={`${baseURL}/${category.slug}/`}
+            href={categoryPath}
           >
             {category.name}
             {titleSmall && <small>{titleSmall}</small>}
@@ -53,7 +70,7 @@ const baseURL = '';
           ) : (
             <>
               <div class="text-lg py-2.5 sm:py-0 whitespace-nowrap">
-                <a href={`${baseURL}/${category.slug}/${subcategory.slug}/`}>{subtitle}</a>
+                <a href={subcategoryPath}>{subtitle}</a>
               </div>
               <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
               <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
@@ -74,7 +91,10 @@ const baseURL = '';
 
   {
     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/CategoryTile.astro

@@ -22,7 +22,11 @@ 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}
@@ -34,5 +38,10 @@ const href = `/${prefix}${CategoryObject.slug}/`;
     class="cats-img"
   />
   <div class="swiper-lazy-preloader"></div>
-  <div class="cat-name" itemprop="name">{CategoryObject.name}</div>
+  <div
+    class="cat-name"
+    itemprop="name"
+  >
+    {CategoryObject.name}
+  </div>
 </a>

package/src/components/Category/CategoryViewToggler.astro

@@ -29,7 +29,10 @@ 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
@@ -38,7 +41,10 @@ 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/Date.astro

@@ -2,6 +2,9 @@
 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/FaqItem.astro

@@ -23,10 +23,21 @@ 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/HandDrive.astro

@@ -28,7 +28,11 @@ if (!handDrive || (handDrive !== 'lhd' && handDrive !== 'rhd')) {
 const titleText = title || handDrive.toUpperCase();
 ---
 
-<div title={titleText} class="flex items-center" class:list={className}>
+<div
+  title={titleText}
+  class="flex items-center"
+  class:list={className}
+>
   <Image
     src={handDriveImage}
     alt={`${handDrive.toUpperCase()} hand drive`}

package/src/components/Header/Header.astro

@@ -7,7 +7,10 @@ import Search from 'astro-pagefind/components/Search';
 
 <header class="p-3 bg-blue-medium bg-opacity-10 backdrop-blur-md border-b text-slate-900">
   <SkipToContent />
-  <nav title="Top Navigation" class="mx-auto flex justify-between items-center px-4">
+  <nav
+    title="Top Navigation"
+    class="mx-auto flex justify-between items-center px-4"
+  >
     <div class="flex flex-nowrap">
       <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
       <a
@@ -36,7 +39,11 @@ import Search from 'astro-pagefind/components/Search';
             class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors"
             href={'https://github.com/' + SITE.github}
           >
-            <img class="h-7" src="/github.svg" alt="github logo" />
+            <img
+              class="h-7"
+              src="/github.svg"
+              alt="github logo"
+            />
           </a>
         )
       }
@@ -47,7 +54,11 @@ import Search from 'astro-pagefind/components/Search';
             class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors"
             href={'https://linkedin.com/in/' + SITE.linkedin}
           >
-            <img class="h-7" src="/linkedin.svg" alt="linkedin logo" />
+            <img
+              class="h-7"
+              src="/linkedin.svg"
+              alt="linkedin logo"
+            />
           </a>
         )
       }

package/src/components/Header/SkipToContent.astro

@@ -1 +1,5 @@
-<a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
+<a
+  href="#article"
+  class="sr-only focus:not-sr-only skiplink"
+  ><span>Skip to Content</span></a
+>

package/src/components/Input.vue

@@ -125,7 +125,7 @@ const handleBlur = (event: globalThis.FocusEvent) => emit('blur', event);
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
-    >
+    />
 
     <label
       :for="id"
@@ -136,7 +136,8 @@ const handleBlur = (event: globalThis.FocusEvent) => emit('blur', event);
       <span
         v-if="required"
         class="text-red-500 ml-1"
-      >*</span>
+        >*</span
+      >
     </label>
 
     <div

package/src/components/Jumbotron/index.astro

@@ -64,25 +64,55 @@ const commonProps = {
 
 {
   variant === 'default' && (
-    <DefaultVariant {...commonProps} small={small}>
-      <slot name="intro" slot="intro" />
-      <slot name="subtitle" slot="subtitle" />
-      <slot name="cta-content" slot="cta-content" />
+    <DefaultVariant
+      {...commonProps}
+      small={small}
+    >
+      <slot
+        name="intro"
+        slot="intro"
+      />
+      <slot
+        name="subtitle"
+        slot="subtitle"
+      />
+      <slot
+        name="cta-content"
+        slot="cta-content"
+      />
     </DefaultVariant>
   )
 }
 
-{variant === 'hero' && <HeroVariant {...commonProps} description={description} info={info} />}
+{
+  variant === 'hero' && (
+    <HeroVariant
+      {...commonProps}
+      description={description}
+      info={info}
+    />
+  )
+}
 
 {
   variant === 'post' && (
-    <PostVariant {...commonProps} author={author} date={date} categories={categories} />
+    <PostVariant
+      {...commonProps}
+      author={author}
+      date={date}
+      categories={categories}
+    />
   )
 }
 
 {
   variant === 'post-split' && (
-    <PostSplitVariant {...commonProps} author={author} date={date} categories={categories} />
+    <PostSplitVariant
+      {...commonProps}
+      author={author}
+      date={date}
+      categories={categories}
+    />
   )
 }
 

package/src/components/Jumbotron/variants/Default.astro

@@ -28,7 +28,10 @@ const {
     hasIntroContent ? (
       <slot name="intro" />
     ) : (
-      <h1 class="jumbotron-title-default" set:html={title} />
+      <h1
+        class="jumbotron-title-default"
+        set:html={title}
+      />
     )
   }
 

package/src/components/Jumbotron/variants/Hero.astro

@@ -16,7 +16,11 @@ const { title = '', image, description, info, backgroundClass } = Astro.props;
     image && (
       <div class="absolute inset-0 w-full h-full">
         <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1" />
-        <img class="w-full h-full object-cover" src={image} alt={title} />
+        <img
+          class="w-full h-full object-cover"
+          src={image}
+          alt={title}
+        />
       </div>
     )
   }
@@ -37,7 +41,10 @@ const { title = '', image, description, info, backgroundClass } = Astro.props;
       }
       {
         info && (
-          <div class="font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2" set:html={info} />
+          <div
+            class="font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2"
+            set:html={info}
+          />
         )
       }
     </header>

package/src/components/Jumbotron/variants/Post.astro

@@ -41,7 +41,10 @@ const {
       {
         hasCategories && (
           <div class="order-1">
-            <PostCategories categories={categories} lang={lang} />
+            <PostCategories
+              categories={categories}
+              lang={lang}
+            />
           </div>
         )
       }
@@ -50,7 +53,10 @@ const {
         hasMetadata && (
           <div class="order-3 flex items-center text-gray-100">
             {author && (
-              <span class="text-sm" title={author.firstName}>
+              <span
+                class="text-sm"
+                title={author.firstName}
+              >
                 {author.name}
               </span>
             )}
@@ -63,6 +69,10 @@ const {
   </div>
 
   <div class="featured-image-overlay">
-    <img src={image} alt={title} class="w-full h-full object-cover block max-w-full" />
+    <img
+      src={image}
+      alt={title}
+      class="w-full h-full object-cover block max-w-full"
+    />
   </div>
 </header>

package/src/components/Jumbotron/variants/PostSplit.astro

@@ -42,12 +42,18 @@ const cleanTitle = stripHtml(title);
         class="heading flex flex-wrap text-white relative items-center justify-center mt-auto w-full z-[2]"
       >
         <div class="jumbotron-split-content">
-          <h1 class="jumbotron-split-title" set:html={title} />
+          <h1
+            class="jumbotron-split-title"
+            set:html={title}
+          />
 
           {
             hasCategories && (
               <div class="jumbotron-categories">
-                <PostCategories categories={categories} lang={lang} />
+                <PostCategories
+                  categories={categories}
+                  lang={lang}
+                />
               </div>
             )
           }
@@ -56,7 +62,11 @@ const cleanTitle = stripHtml(title);
             hasMetadata && (
               <div class="jumbotron-split-meta">
                 {author && (
-                  <span class="text-sm" title={author.firstName} data-pagefind-ignore>
+                  <span
+                    class="text-sm"
+                    title={author.firstName}
+                    data-pagefind-ignore
+                  >
                     {author.name}
                   </span>
                 )}

package/src/components/Jumbotron.astro

@@ -6,7 +6,16 @@ const props = Astro.props as Props;
 ---
 
 <BaseJumbotron {...props}>
-  <slot name="intro" slot="intro" />
-  <slot name="subtitle" slot="subtitle" />
-  <slot name="cta-content" slot="cta-content" />
+  <slot
+    name="intro"
+    slot="intro"
+  />
+  <slot
+    name="subtitle"
+    slot="subtitle"
+  />
+  <slot
+    name="cta-content"
+    slot="cta-content"
+  />
 </BaseJumbotron>