spoko-design-system 0.7.5 → 0.7.6

package/src/layouts/partials/HeadCommon.astro

@@ -1,44 +1,44 @@
----
-import { ViewTransitions } from "astro:transitions";
-import { pwaInfo } from 'virtual:pwa-info';
----
-
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-
-<link rel="sitemap" href="/sitemap-index.xml" />
-
-<!-- Preload Fonts -->
-<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
-
-<!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
-
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-	// const root = document.documentElement;
-	// const theme = localStorage.getItem('theme');
-	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-	// 	root.classList.add('dark');
-	// } else {
-	// 	root.classList.remove('dark');
-	// }
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', '');
-</script> -->
-
-<ViewTransitions />
-{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
+---
+import { ViewTransitions } from "astro:transitions";
+import { pwaInfo } from 'virtual:pwa-info';
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<!-- Preload Fonts -->
+<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
+
+<!-- Scrollable a11y code helper -->
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
+
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+	// const root = document.documentElement;
+	// const theme = localStorage.getItem('theme');
+	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	// 	root.classList.add('dark');
+	// } else {
+	// 	root.classList.remove('dark');
+	// }
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '');
+</script> -->
+
+<ViewTransitions />
+{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }

package/src/layouts/partials/HeadSEO.astro

@@ -1,41 +1,41 @@
----
-import { SITE, OPEN_GRAPH } from '../../config';
-export interface Props {
-	content: any;
-	// site: any;
-	canonicalURL: URL | string;
-}
-const { content = {}, canonicalURL } = Astro.props;
-const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
-// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
-// const canonicalImageSrc = new URL(imageSrc, Astro.site);
-const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
----
-
-<!-- Page Metadata -->
-<link rel="canonical" href={canonicalURL} />
-
-<!-- OpenGraph Tags -->
-<meta property="og:title" content={formattedContentTitle} />
-<meta property="og:type" content="article" />
-<meta property="og:url" content={canonicalURL} />
-<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
-<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
-<meta property="og:image:alt" content={imageAlt} />
-<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
-<meta property="og:site_name" content={SITE.title} />
-
-<!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
-<meta name="twitter:title" content={formattedContentTitle} />
-<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
-<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
-<meta name="twitter:image:alt" content={imageAlt} />
-
-<!--
-  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
-  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
-  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
-  Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
--->
+---
+import { SITE, OPEN_GRAPH } from '../../config';
+export interface Props {
+	content: any;
+	// site: any;
+	canonicalURL: URL | string;
+}
+const { content = {}, canonicalURL } = Astro.props;
+const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
+// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
+// const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+
+<!-- Page Metadata -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- OpenGraph Tags -->
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
+<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
+<meta property="og:image:alt" content={imageAlt} />
+<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
+<meta property="og:site_name" content={SITE.title} />
+
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
+<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
+<meta name="twitter:image:alt" content={imageAlt} />
+
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a Vue component that integrates with `schema-dts`: https://github.com/vueuse/schema-org
+-->

package/src/pages/components/badges.mdx

@@ -1,57 +1,57 @@
----
-title: "Badges"
-layout: "../../layouts/MainLayout.astro"
-
----
-import Badges from '../../components/Badges.vue'
-
-# Product badges
-Extra product badges (labels).
-
-## Badges - GTI
-<div class="component-preview">
-    <div class="relative min-h-19">
-            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
-    </div>
-</div>
-
-```js
-<div class="relative min-h-10">
-    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
-</div>
-
-```
-
-
-## Badge on image
-<div class="component-preview">
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport']} class="top-2" />
-</div>
-</div>
-
-```js
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport']} class="top-2" />
-</div>
-
-```
-
-
-## Few badges on image
-<div class="component-preview">
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
-</div>
-</div>
-
-```js
-<div class="relative">
-    <img src="https://placehold.co/300x200" alt="image alt" />
-    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
-</div>
-
-```
+---
+title: "Badges"
+layout: "../../layouts/MainLayout.astro"
+
+---
+import Badges from '../../components/Badges.vue'
+
+# Product badges
+Extra product badges (labels).
+
+## Badges - GTI
+<div class="component-preview">
+    <div class="relative min-h-19">
+            <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+    </div>
+</div>
+
+```js
+<div class="relative min-h-10">
+    <Badges badges={['GTI', 'Motorsport', 'Lorem Ipsum']} class="top-2" />
+</div>
+
+```
+
+
+## Badge on image
+<div class="component-preview">
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
+</div>
+</div>
+
+```js
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport']} class="top-2" />
+</div>
+
+```
+
+
+## Few badges on image
+<div class="component-preview">
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+</div>
+
+```js
+<div class="relative">
+    <img src="https://placehold.co/300x200" alt="image alt" />
+    <Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
+</div>
+
+```

package/src/pages/components/breadcrumbs.mdx

@@ -1,139 +1,139 @@
----
-title: "Breadcrumbs"
-layout: "../../layouts/MainLayout.astro"
-
-
----
-import Breadcrumbs from '../../components/Breadcrumbs.vue'
-
-# Breadcrumbs
-
-Breadcrumbs component with BreadcrumbList Microdata.
-
-Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
-
-#
-
-https://schema.org/BreadcrumbList
-
-https://schema.org/ListItem
-
-
-
-## Show back
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
-      product-number="6R0XXXXXX"
-      class="py-1 order-0 px-1 max-w-full flex bg-white"
-      show-back
-      text-back="Back"
-    />
-</div>
-
-```js
-<Breadcrumbs
-  breadcrumbs={ 
-    [ 
-      {"name": "Level1", "path": "level1"},
-      {"name": "Level 2", "path": "level2"},
-      {"name": "Level 3", "path": "level3"}
-    ] 
-  }
-  product-number="6R0XXXXXX"
-  class="py-1 order-0 px-1 max-w-full flex bg-white"
-  show-back
-  text-back="Back"
-/>
-```
-
-
-## Show home
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
-      product-number="6R0XXXXXX"
-      class="py-1 order-0 px-1 max-w-full flex bg-white"
-      show-home
-    />
-</div>
-
-```js
-<Breadcrumbs
-  breadcrumbs={ 
-    [ 
-      {"name": "Level1", "path": "level 1"},
-      {"name": "Level 2", "path": "level2"},
-      {"name": "Level 3", "path": "level3"}
-    ] 
-  }
-  product-number="6R0XXXXXX"
-  class="py-1 order-0 px-1 max-w-full flex bg-white"
-  show-home
-/>
-```
-
-
-## Simply
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
-      product-number="6R0XXXXXX"
-      class="py-1 order-0 px-1 max-w-full flex bg-white"
-    />
-</div>
-
-```js
-<Breadcrumbs
-  breadcrumbs={ 
-    [ 
-      {"name": "Level1", "path": "level 1"},
-      {"name": "Level 2", "path": "level2"},
-      {"name": "Level 3", "path": "level3"}
-    ] 
-  }
-  product-number="6R0XXXXXX"
-  class="py-1 order-0 px-1 max-w-full flex bg-white"
-  show-back
-  text-back="Back"
-/>
-```
-
-
-### Schema support:
-- https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
-
-#### Example
-- https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
-
-
-| @type            | BreadcrumbList                                                                    |
-| ---------------- | --------------------------------------------------------------------------------- |
-| **itemListElement**  |                                                                                   |
-| **@type**          | ListItem                                                                          |
-| **name**             | Electrical, Lighting, Telematics                                                  |
-| **position**         | 1                                                                                 |
-| **item**             |                                                                                   |
-| **@type**            | Thing                                                                             |
-| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/                         |
-| **itemListElement**  |                                                                                   |
-| **@type**            | ListItem                                                                          |
-| **name**             | Exterior Lighting                                                                 |
-| **position**         | 2                                                                                 |
-| **item**             |                                                                                   |
-| **@type**            | Thing                                                                             |
-| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/       |
-| **itemListElement**  |                                                                                   |
-| **@type**            | ListItem                                                                          |
-| **name**             | Bulbs                                                                             |
-| **position**         | 3                                                                                 |
-| **item**             |                                                                                   |
-| **@type**            | Thing                                                                             |
-| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
-| **itemListElement**  |                                                                                   |
-| **@type**            | ListItem                                                                          |
-| **name**             | Bulb carrier with bulb; silver lens                                               |
-| **position**         | 4                                                                                 |
+---
+title: "Breadcrumbs"
+layout: "../../layouts/MainLayout.astro"
+
+
+---
+import Breadcrumbs from '../../components/Breadcrumbs.vue'
+
+# Breadcrumbs
+
+Breadcrumbs component with BreadcrumbList Microdata.
+
+Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
+
+#
+
+https://schema.org/BreadcrumbList
+
+https://schema.org/ListItem
+
+
+
+## Show back
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+      show-back
+      text-back="Back"
+    />
+</div>
+
+```js
+<Breadcrumbs
+  breadcrumbs={ 
+    [ 
+      {"name": "Level1", "path": "level1"},
+      {"name": "Level 2", "path": "level2"},
+      {"name": "Level 3", "path": "level3"}
+    ] 
+  }
+  product-number="6R0XXXXXX"
+  class="py-1 order-0 px-1 max-w-full flex bg-white"
+  show-back
+  text-back="Back"
+/>
+```
+
+
+## Show home
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+      show-home
+    />
+</div>
+
+```js
+<Breadcrumbs
+  breadcrumbs={ 
+    [ 
+      {"name": "Level1", "path": "level 1"},
+      {"name": "Level 2", "path": "level2"},
+      {"name": "Level 3", "path": "level3"}
+    ] 
+  }
+  product-number="6R0XXXXXX"
+  class="py-1 order-0 px-1 max-w-full flex bg-white"
+  show-home
+/>
+```
+
+
+## Simply
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+    />
+</div>
+
+```js
+<Breadcrumbs
+  breadcrumbs={ 
+    [ 
+      {"name": "Level1", "path": "level 1"},
+      {"name": "Level 2", "path": "level2"},
+      {"name": "Level 3", "path": "level3"}
+    ] 
+  }
+  product-number="6R0XXXXXX"
+  class="py-1 order-0 px-1 max-w-full flex bg-white"
+  show-back
+  text-back="Back"
+/>
+```
+
+
+### Schema support:
+- https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=en
+
+#### Example
+- https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
+
+
+| @type            | BreadcrumbList                                                                    |
+| ---------------- | --------------------------------------------------------------------------------- |
+| **itemListElement**  |                                                                                   |
+| **@type**          | ListItem                                                                          |
+| **name**             | Electrical, Lighting, Telematics                                                  |
+| **position**         | 1                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/                         |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Exterior Lighting                                                                 |
+| **position**         | 2                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/       |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Bulbs                                                                             |
+| **position**         | 3                                                                                 |
+| **item**             |                                                                                   |
+| **@type**            | Thing                                                                             |
+| **@id**              | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
+| **itemListElement**  |                                                                                   |
+| **@type**            | ListItem                                                                          |
+| **name**             | Bulb carrier with bulb; silver lens                                               |
+| **position**         | 4                                                                                 |