spoko-design-system 1.11.4 → 1.12.0

package/.github/workflows/deploy.yml

@@ -2,12 +2,17 @@ name: Deploy to GitHub Pages
 
 on:
   # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch’s name
+  # Using a different branch name? Replace `main` with your branch's name
   push:
     branches: [ main ]
   # Allows you to run this workflow manually from the Actions tab on GitHub.
   workflow_dispatch:
 
+# Prevent concurrent deployments
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
 # Allow this job to clone the repo and create a page deployment
 permissions:
   contents: read

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.12.0](https://github.com/polo-blue/sds/compare/v1.11.5...v1.12.0) (2025-12-06)
+
+### Features
+
+* **jumbotron:** add imageWidth, imageHeight and fullWidth props to post-split variant ([6d6ce17](https://github.com/polo-blue/sds/commit/6d6ce17ae7ce3ec444fbce3f4bda0aec57eb2d05))
+
+## [1.11.5](https://github.com/polo-blue/sds/compare/v1.11.4...v1.11.5) (2025-11-19)
+
+### Bug Fixes
+
+* **ci:** prevent concurrent GitHub Pages deployments ([7691c41](https://github.com/polo-blue/sds/commit/7691c417006711b3ec7b47300bbcc81abd303d3e))
+
 ## [1.11.4](https://github.com/polo-blue/sds/compare/v1.11.3...v1.11.4) (2025-11-19)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "type": "module",
   "private": false,
   "main": "./index.ts",
@@ -55,8 +55,8 @@
   ],
   "dependencies": {
     "@algolia/client-search": "^5.44.0",
-    "@astrojs/mdx": "^4.3.10",
-    "@astrojs/node": "^9.5.0",
+    "@astrojs/mdx": "^4.3.11",
+    "@astrojs/node": "^9.5.1",
     "@astrojs/sitemap": "^3.6.0",
     "@astrojs/ts-plugin": "^1.10.5",
     "@astrojs/vue": "^5.1.3",
@@ -83,24 +83,24 @@
     "@iconify-json/noto-v1": "^1.2.5",
     "@iconify-json/octicon": "^1.2.19",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.58",
+    "@iconify-json/simple-icons": "^1.2.59",
     "@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.34",
-    "@iconify/json": "^2.2.407",
+    "@iconify-json/vscode-icons": "^1.2.35",
+    "@iconify/json": "^2.2.408",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.5.6",
-    "@unocss/preset-attributify": "66.5.6",
-    "@unocss/preset-typography": "66.5.6",
-    "@unocss/preset-uno": "66.5.6",
-    "@unocss/preset-web-fonts": "66.5.6",
-    "@unocss/preset-wind": "66.5.6",
-    "@unocss/reset": "66.5.6",
+    "@unocss/astro": "66.5.7",
+    "@unocss/preset-attributify": "66.5.7",
+    "@unocss/preset-typography": "66.5.7",
+    "@unocss/preset-uno": "66.5.7",
+    "@unocss/preset-web-fonts": "66.5.7",
+    "@unocss/preset-wind": "66.5.7",
+    "@unocss/reset": "66.5.7",
     "@vite-pwa/astro": "^1.1.1",
     "@vueuse/core": "^14.0.0",
     "astro-icon": "^1.1.5",
@@ -111,7 +111,7 @@
     "dotenv": "^17.2.3",
     "swiper": "^12.0.3",
     "tippy.js": "^6.3.7",
-    "unocss": "66.5.6",
+    "unocss": "66.5.7",
     "vite-plugin-pwa": "^1.1.0",
     "vue": "^3.5.24"
   },
@@ -122,13 +122,13 @@
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
     "@types/node": "^24.10.1",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@typescript-eslint/parser": "^8.46.4",
-    "@unocss/transformer-variant-group": "66.5.6",
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@unocss/transformer-variant-group": "66.5.7",
+    "@vitejs/plugin-vue": "^6.0.2",
     "@vue/compiler-sfc": "^3.5.24",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.15.8",
+    "astro": "^5.15.9",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^9.39.1",
     "eslint-plugin-astro": "^1.5.0",

package/src/components/Jumbotron/index.astro

@@ -9,6 +9,8 @@ interface Props {
   variant?: 'default' | 'hero' | 'post' | 'post-split';
   title?: string;
   image?: string;
+  imageWidth?: number;
+  imageHeight?: number;
   small?: boolean;
   description?: string;
   info?: string;
@@ -17,12 +19,15 @@ interface Props {
   categories?: Category[];
   backgroundClass?: string;
   lang?: string;
+  fullWidth?: boolean;
 }
 
 const {
   variant = 'default',
   title = '',
   image,
+  imageWidth,
+  imageHeight,
   small = false,
   description,
   info,
@@ -31,6 +36,7 @@ const {
   categories = [],
   backgroundClass = 'bg-blue-darker',
   lang = 'en',
+  fullWidth = false,
 } = Astro.props;
 
 // Helper (function to check if a slot has content)
@@ -78,7 +84,15 @@ const commonProps = {
 
 {
   variant === 'post-split' && (
-    <PostSplitVariant {...commonProps} author={author} date={date} categories={categories} />
+    <PostSplitVariant
+      {...commonProps}
+      author={author}
+      date={date}
+      categories={categories}
+      imageWidth={imageWidth}
+      imageHeight={imageHeight}
+      fullWidth={fullWidth}
+    />
   )
 }
 

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

@@ -7,23 +7,29 @@ import { Image } from 'astro:assets';
 interface Props {
   title?: string;
   image?: string;
+  imageWidth?: number;
+  imageHeight?: number;
   author?: Author;
   date?: string;
   categories?: Category[];
   hasMetadata: boolean;
   hasCategories: boolean;
   lang: string;
+  fullWidth?: boolean;
 }
 
 const {
   title = '',
   image,
+  imageWidth = 768,
+  imageHeight = 432,
   author,
   date,
   categories = [],
   hasMetadata,
   hasCategories,
   lang = 'en',
+  fullWidth = false,
 } = Astro.props;
 
 // Helper function to remove HTML tags
@@ -35,7 +41,7 @@ const stripHtml = (html: string) => {
 const cleanTitle = stripHtml(title);
 ---
 
-<div class="jumbotron-split-wrapper bg-blue-900 bg-vw">
+<div class:list={['jumbotron-split-wrapper bg-blue-900 bg-vw', { 'full-width-block': fullWidth }]}>
   <div class="jumbotron-split-container">
     <header class="jumbotron-split-header">
       <div
@@ -76,8 +82,8 @@ const cleanTitle = stripHtml(title);
                 class="jumbotron-split-img"
                 src={image}
                 alt={cleanTitle}
-                width={768}
-                height={432}
+                width={imageWidth}
+                height={imageHeight}
                 loading="eager"
               />
             </div>

package/src/pages/components/jumbotron.mdx

@@ -299,6 +299,33 @@ A two-column layout variant for posts where image and content need equal emphasi
 />
 ```
 
+### Post Split with Custom Image Dimensions
+You can customize image dimensions using `imageWidth` and `imageHeight` props. This is useful for category pages with different aspect ratios (e.g., 3:2 instead of default 16:9).
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Category Title"
+  image="path/to/image.jpg"
+  imageWidth={600}
+  imageHeight={400}
+/>
+```
+
+### Post Split Full Width
+Use `fullWidth` prop to make the jumbotron span the full viewport width, useful for archive/category pages.
+
+```js
+<Jumbotron
+  variant="post-split"
+  title="Full Width Category"
+  image="path/to/image.jpg"
+  imageWidth={600}
+  imageHeight={400}
+  fullWidth
+/>
+```
+
 ## Custom Intro Slot Example
 Shows how to fully customize the header section using the intro slot. Useful for complex layouts or custom styling.
 
@@ -348,6 +375,11 @@ Shows how to fully customize the header section using the intro slot. Useful for
   - `name`: Category display name
   - `uri`: Category link URL
 
+### Post Split Props
+- `imageWidth`: Custom image width in pixels (default: 768)
+- `imageHeight`: Custom image height in pixels (default: 432)
+- `fullWidth`: When true, adds `full-width-block` class for full viewport width
+
 ### Slots
 - `intro`: Replaces the default title with custom content. Useful for complex headings or custom markup.
 - `subtitle`: Additional content below the title. Supports markdown and HTML.

package/uno-config/theme/shortcuts/jumbotron.ts

@@ -44,5 +44,5 @@ export const jumbotronShortcuts = [
   ['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
   ['jumbotron-split-image-wrapper', 'relative -mb-8 md:(mt-4 -ml-4 mr-4) xl:(ml-0 mr-0)'],
   ['jumbotron-split-image', 'relative shadow-xl md:max-h-112'],
-  ['jumbotron-split-img', 'aspect-video object-cover']
+  ['jumbotron-split-img', 'object-cover']
 ];