spoko-design-system 0.5.3 → 0.5.5

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                                                                                 |