spoko-design-system 0.0.1 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.astro/icon.d.ts +8109 -10
- package/.github/workflows/deploy.yml +39 -39
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +5 -4
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +6 -0
- package/LICENSE +21 -21
- package/Layout/Header.astro +111 -89
- package/README.md +94 -69
- package/astro-i18next.config.mjs +17 -17
- package/astro-i18next.config.ts +10 -10
- package/astro.config.mjs +51 -42
- package/index.ts +6 -6
- package/package.json +25 -17
- package/public/astro-design-system-logo.svg +10 -10
- package/public/favicon.ico +0 -0
- package/public/favicon.svg +0 -0
- package/public/fonts/lg.svg +53 -53
- package/public/fonts/vwhead-bold-demo.html +549 -549
- package/public/fonts/vwhead-regular-demo.html +549 -549
- package/public/fonts/vwtext-bold-demo.html +549 -549
- package/public/fonts/vwtext-regular-demo.html +549 -549
- package/public/github.svg +3 -3
- package/public/grid_dot.svg +4 -4
- package/public/linkedin.svg +44 -44
- package/public/locales/en/translation.json +8 -5
- package/public/locales/pl/translation.json +8 -5
- package/public/make-scrollable-code-focusable.js +3 -3
- package/public/polo.blue.svg +29 -0
- package/public/spoko.space.svg +71 -0
- package/public/twitter.svg +46 -46
- package/sandbox.config.json +11 -11
- package/src/MyComponent.astro +8 -8
- package/src/components/Badge.vue +19 -19
- package/src/components/Badges.vue +24 -23
- package/src/components/Breadcrumbs.vue +108 -111
- package/src/components/Button.vue +37 -0
- package/src/components/ButtonCopy.vue +52 -0
- package/src/components/Card.astro +25 -0
- package/src/components/CategoryLink.astro +18 -0
- package/src/components/Copyright.astro +11 -11
- package/src/components/Date.astro +7 -0
- package/src/components/FuckRussia.vue +65 -65
- package/src/components/HandDrive.astro +29 -30
- package/src/components/HeadCommon.astro +40 -40
- package/src/components/HeadSEO.astro +41 -41
- package/src/components/Header/AstroLogo.astro +7 -27
- package/src/components/Header/Header.astro +44 -48
- package/src/components/Header/SkipToContent.astro +1 -1
- package/src/components/Headline.vue +60 -0
- package/src/components/Image.astro +30 -0
- package/src/components/Jumbatron.vue +46 -31
- package/src/components/LeftSidebar.astro +45 -44
- package/src/components/MainColors.vue +29 -29
- package/src/components/MainInput.vue +18 -18
- package/src/components/MainTable.vue +40 -45
- package/src/components/Modal.astro +30 -0
- package/src/components/PageContent.astro +14 -14
- package/src/components/PostHeader.astro +104 -0
- package/src/components/PrCode.vue +156 -0
- package/src/components/ProductNumber.astro +117 -0
- package/src/components/ProductTile.astro +54 -0
- package/src/components/RightSidebar.astro +15 -11
- package/src/components/SlimBanner.vue +59 -59
- package/src/components/TableOfContents.astro +11 -11
- package/src/components/Translations.vue +27 -0
- package/src/components/flags/FlagPL.vue +2 -2
- package/src/components/flags/FlagUA.vue +2 -2
- package/src/components/layout/Header.astro +50 -69
- package/src/config.ts +51 -42
- package/src/design.config.ts +73 -92
- package/src/env.d.ts +1 -1
- package/src/flag-poland.svg +1 -0
- package/src/flag-uk.svg +1 -0
- package/src/layouts/Layout.astro +43 -0
- package/src/layouts/MainLayout.astro +60 -50
- package/src/pages/components/badges.mdx +69 -35
- package/src/pages/components/breadcrumbs.mdx +136 -103
- package/src/pages/components/buttons.mdx +143 -60
- package/src/pages/components/card.mdx +40 -0
- package/src/pages/components/copyright.mdx +41 -24
- package/src/pages/components/flags.mdx +40 -26
- package/src/pages/components/fuck-russia.mdx +39 -16
- package/src/pages/components/hand-drive.mdx +38 -27
- package/src/pages/components/headline.mdx +148 -0
- package/src/pages/components/icons.astro +54 -45
- package/src/pages/components/image.mdx +502 -0
- package/src/pages/components/input.mdx +45 -14
- package/src/pages/components/jumbatron.mdx +71 -48
- package/src/pages/components/modal.mdx +64 -0
- package/src/pages/components/post-header.mdx +58 -0
- package/src/pages/components/pr-code.mdx +41 -0
- package/src/pages/components/product-number.mdx +65 -0
- package/src/pages/components/product-tile.mdx +39 -0
- package/src/pages/components/slimbanner.mdx +29 -27
- package/src/pages/components/table.mdx +39 -20
- package/src/pages/core/colors.mdx +8 -8
- package/src/pages/core/introduction.mdx +74 -68
- package/src/pages/core/shadows.astro +20 -20
- package/src/pages/core/typography.astro +46 -46
- package/src/pages/index.astro +70 -52
- package/src/pages/patterns/introduction.mdx +60 -61
- package/src/styles/_variables.scss +75 -75
- package/src/styles/base/_base.scss +166 -158
- package/src/styles/base/_typography.scss +147 -147
- package/src/styles/content.scss +66 -71
- package/src/styles/main.scss +22 -22
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +11 -11
- package/uno.config.ts +246 -227
- package/src/components/MainButton.vue +0 -26
- package/src/components/MainStatusPill.vue +0 -32
- package/src/pages/components/status-pill.mdx +0 -22
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
import HeadCommon from '../components/HeadCommon.astro';
|
|
3
|
+
import HeadSEO from '../components/HeadSEO.astro';
|
|
4
|
+
import * as CONFIG from '../config';
|
|
5
|
+
import { t, changeLanguage } from "i18next";
|
|
6
|
+
import '../styles/main.scss';
|
|
7
|
+
import Copyright from '../components/Copyright.astro'
|
|
8
|
+
const locale = "en";
|
|
9
|
+
changeLanguage(locale);
|
|
10
|
+
const { content = {} } = Astro.props;
|
|
11
|
+
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
|
|
15
|
+
<head>
|
|
16
|
+
<HeadCommon />
|
|
17
|
+
<HeadSEO {content} canonicalURL={canonicalURL} />
|
|
18
|
+
<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body class="bg-blue-50">
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
<div class=" bg-white z-10 mb-11 relative">
|
|
25
|
+
<slot />
|
|
26
|
+
</div>
|
|
27
|
+
<footer>
|
|
28
|
+
<Copyright class="fixed bottom-0 z-0 w-full">
|
|
29
|
+
<a slot="middle-item" href={`https://${import.meta.env.COPYRIGHT_DOMAIN}`} target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by ${import.meta.env.COPYRIGHT_DOMAIN}`}>
|
|
30
|
+
<div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
|
|
31
|
+
<img
|
|
32
|
+
class="h-4 md:h-5 w-min"
|
|
33
|
+
src={`/${import.meta.env.COPYRIGHT_IMG}`}
|
|
34
|
+
alt="Modern Websites"
|
|
35
|
+
width="126"
|
|
36
|
+
height="23"
|
|
37
|
+
loading="lazy"
|
|
38
|
+
>
|
|
39
|
+
</a>
|
|
40
|
+
</Copyright>
|
|
41
|
+
</footer>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
@@ -1,50 +1,60 @@
|
|
|
1
|
-
---
|
|
2
|
-
import HeadCommon from '../components/HeadCommon.astro';
|
|
3
|
-
import HeadSEO from '../components/HeadSEO.astro';
|
|
4
|
-
import Header from '../components/Header/Header.astro';
|
|
5
|
-
import PageContent from '../components/PageContent.astro';
|
|
6
|
-
import LeftSidebar from '../components/LeftSidebar.astro';
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import '../
|
|
11
|
-
const locale = "en";
|
|
12
|
-
changeLanguage(locale);
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
1
|
+
---
|
|
2
|
+
import HeadCommon from '../components/HeadCommon.astro';
|
|
3
|
+
import HeadSEO from '../components/HeadSEO.astro';
|
|
4
|
+
import Header from '../components/Header/Header.astro';
|
|
5
|
+
import PageContent from '../components/PageContent.astro';
|
|
6
|
+
import LeftSidebar from '../components/LeftSidebar.astro';
|
|
7
|
+
import * as CONFIG from '../config';
|
|
8
|
+
import { t, changeLanguage } from "i18next";
|
|
9
|
+
import '../styles/main.scss';
|
|
10
|
+
import Copyright from '../components/Copyright.astro'
|
|
11
|
+
const locale = "en";
|
|
12
|
+
changeLanguage(locale);
|
|
13
|
+
const { content = {} } = Astro.props;
|
|
14
|
+
const currentPage = Astro.url.pathname;
|
|
15
|
+
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
|
|
19
|
+
<head>
|
|
20
|
+
<HeadCommon />
|
|
21
|
+
<HeadSEO {content} canonicalURL={canonicalURL} />
|
|
22
|
+
<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
|
|
23
|
+
</head>
|
|
24
|
+
|
|
25
|
+
<body class="bg-blue-50">
|
|
26
|
+
<div class="sticky top-0 z-10 w-full">
|
|
27
|
+
<Header currentPage={currentPage} />
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="flex bg-white z-10 mb-11 relative">
|
|
31
|
+
<div class="sticky top-0 flex lg:(h-screen w-64) z-50 ">
|
|
32
|
+
<div class="mr-auto ">
|
|
33
|
+
<LeftSidebar currentPage={currentPage} />
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
|
|
37
|
+
<div>
|
|
38
|
+
<PageContent content={content}>
|
|
39
|
+
<slot />
|
|
40
|
+
</PageContent>
|
|
41
|
+
</div>
|
|
42
|
+
</main>
|
|
43
|
+
</div>
|
|
44
|
+
<footer>
|
|
45
|
+
<Copyright class="fixed bottom-0 z-0 w-full">
|
|
46
|
+
<a slot="middle-item" href="https://spoko.space" target="_blank" rel="follow noopener" class="flex my-auto items-center mx-auto" title={`Proudly made in Poland by spoko.space`}>
|
|
47
|
+
<div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
|
|
48
|
+
<img
|
|
49
|
+
class="h-4 md:h-5 w-min"
|
|
50
|
+
src="/spoko.space.svg"
|
|
51
|
+
alt="Modern Websites"
|
|
52
|
+
width="126"
|
|
53
|
+
height="23"
|
|
54
|
+
loading="lazy"
|
|
55
|
+
>
|
|
56
|
+
</a>
|
|
57
|
+
</Copyright>
|
|
58
|
+
</footer>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
@@ -1,35 +1,69 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Badges"
|
|
3
|
-
layout: "../../layouts/MainLayout.astro"
|
|
4
|
-
---
|
|
5
|
-
import Badges from '../../components/Badges.vue'
|
|
6
|
-
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
###
|
|
10
|
-
<div class="component-preview">
|
|
11
|
-
<div class="relative min-h-
|
|
12
|
-
<Badges badges={['GTI']} class
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
```js
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
###
|
|
24
|
-
<div class="component-preview">
|
|
25
|
-
<div class="relative min-h-
|
|
26
|
-
<Badges badges={['Motorsport']} class
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
```js
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
```
|
|
1
|
+
---
|
|
2
|
+
title: "Badges"
|
|
3
|
+
layout: "../../layouts/MainLayout.astro"
|
|
4
|
+
---
|
|
5
|
+
import Badges from '../../components/Badges.vue'
|
|
6
|
+
|
|
7
|
+
## Product badges
|
|
8
|
+
|
|
9
|
+
### Badge - GTI
|
|
10
|
+
<div class="component-preview">
|
|
11
|
+
<div class="relative min-h-10">
|
|
12
|
+
<Badges badges={['GTI']} class="top-2" />
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
```js
|
|
16
|
+
<div class="relative min-h-10">
|
|
17
|
+
<Badges badges={['GTI']} class="top-2" />
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Badge - Motorsport
|
|
24
|
+
<div class="component-preview">
|
|
25
|
+
<div class="relative min-h-10">
|
|
26
|
+
<Badges badges={['Motorsport']} class="top-2" />
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
<div class="relative min-h-10">
|
|
32
|
+
<Badges badges={['Motorsport']} class="top-2" />
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### Badge on image - Motorsport
|
|
39
|
+
<div class="component-preview">
|
|
40
|
+
<div class="relative">
|
|
41
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
42
|
+
<Badges badges={['Motorsport']} class="top-2" />
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
<div class="relative">
|
|
48
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
49
|
+
<Badges badges={['Motorsport']} class="top-2" />
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
### Few badges on image
|
|
56
|
+
<div class="component-preview">
|
|
57
|
+
<div class="relative">
|
|
58
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
59
|
+
<Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
<div class="relative">
|
|
65
|
+
<img src="https://placehold.co/300x200" alt="image alt" />
|
|
66
|
+
<Badges badges={['Motorsport', 'Lorem ipsum', 'GTI']} class="top-2" />
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
```
|
|
@@ -1,103 +1,136 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Breadcrumbs"
|
|
3
|
-
layout: "../../layouts/MainLayout.astro"
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
---
|
|
7
|
-
import Breadcrumbs from '../../components/Breadcrumbs.vue'
|
|
8
|
-
|
|
9
|
-
## Breadcrumbs
|
|
10
|
-
|
|
11
|
-
Breadcrumbs component
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
```
|
|
1
|
+
---
|
|
2
|
+
title: "Breadcrumbs"
|
|
3
|
+
layout: "../../layouts/MainLayout.astro"
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
import Breadcrumbs from '../../components/Breadcrumbs.vue'
|
|
8
|
+
|
|
9
|
+
## Breadcrumbs
|
|
10
|
+
|
|
11
|
+
Breadcrumbs component with BreadcrumbList Microdata.
|
|
12
|
+
|
|
13
|
+
Structured Data for Breadcrumbs that produce a Rich Snippet (in this case breadcrumbs) in search results that are clickable, too!
|
|
14
|
+
|
|
15
|
+
#
|
|
16
|
+
|
|
17
|
+
https://schema.org/BreadcrumbList
|
|
18
|
+
|
|
19
|
+
https://schema.org/ListItem
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### show back
|
|
24
|
+
|
|
25
|
+
<div class="component-preview">
|
|
26
|
+
<Breadcrumbs
|
|
27
|
+
breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
|
|
28
|
+
product-number="6R0XXXXXX"
|
|
29
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
30
|
+
show-back
|
|
31
|
+
text-back="Home"
|
|
32
|
+
/>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
<Breadcrumbs
|
|
37
|
+
breadcrumbs={
|
|
38
|
+
[
|
|
39
|
+
{"name": "Level1", "path": "level1"},
|
|
40
|
+
{"name": "Level 2", "path": "level2"},
|
|
41
|
+
{"name": "Level 3", "path": "level3"}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
product-number="6R0XXXXXX"
|
|
45
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
46
|
+
show-back
|
|
47
|
+
text-back="Home"
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### show home
|
|
53
|
+
|
|
54
|
+
<div class="component-preview">
|
|
55
|
+
<Breadcrumbs
|
|
56
|
+
breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
|
|
57
|
+
product-number="6R0XXXXXX"
|
|
58
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
59
|
+
show-home
|
|
60
|
+
/>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
<Breadcrumbs
|
|
65
|
+
breadcrumbs={
|
|
66
|
+
[
|
|
67
|
+
{"name": "Level1", "path": "level 1"},
|
|
68
|
+
{"name": "Level 2", "path": "level2"},
|
|
69
|
+
{"name": "Level 3", "path": "level3"}
|
|
70
|
+
]
|
|
71
|
+
}
|
|
72
|
+
product-number="6R0XXXXXX"
|
|
73
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
74
|
+
show-home
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
### simply
|
|
80
|
+
|
|
81
|
+
<div class="component-preview">
|
|
82
|
+
<Breadcrumbs
|
|
83
|
+
breadcrumbs={ [ {"name": "Level1", "path": "#level2"}, {"name": "Level 2", "path": "#level2"}, {"name": "Level 3", "path": "#level3"} ] }
|
|
84
|
+
product-number="6R0XXXXXX"
|
|
85
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
```js
|
|
90
|
+
<Breadcrumbs
|
|
91
|
+
breadcrumbs={
|
|
92
|
+
[
|
|
93
|
+
{"name": "Level1", "path": "level 1"},
|
|
94
|
+
{"name": "Level 2", "path": "level2"},
|
|
95
|
+
{"name": "Level 3", "path": "level3"}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
product-number="6R0XXXXXX"
|
|
99
|
+
class="py-1 order-0 px-1 max-w-full flex bg-white"
|
|
100
|
+
show-back
|
|
101
|
+
text-back="Back"
|
|
102
|
+
/>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
### Schema example:
|
|
107
|
+
- https://validator.schema.org/?hl=en-US#url=https%3A%2F%2Fcatalog.polo.blue%2FN10733102%2F
|
|
108
|
+
#
|
|
109
|
+
|
|
110
|
+
| @type | BreadcrumbList |
|
|
111
|
+
| ---------------- | --------------------------------------------------------------------------------- |
|
|
112
|
+
| **itemListElement** | |
|
|
113
|
+
| **@type** | ListItem |
|
|
114
|
+
| **name** | Electrical, Lighting, Telematics |
|
|
115
|
+
| **position** | 1 |
|
|
116
|
+
| **item** | |
|
|
117
|
+
| **@type** | Thing |
|
|
118
|
+
| **@id** | https://catalog.polo.blue/electrical-lighting-telematics/ |
|
|
119
|
+
| **itemListElement** | |
|
|
120
|
+
| **@type** | ListItem |
|
|
121
|
+
| **name** | Exterior Lighting |
|
|
122
|
+
| **position** | 2 |
|
|
123
|
+
| **item** | |
|
|
124
|
+
| **@type** | Thing |
|
|
125
|
+
| **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/ |
|
|
126
|
+
| **itemListElement** | |
|
|
127
|
+
| **@type** | ListItem |
|
|
128
|
+
| **name** | Bulbs |
|
|
129
|
+
| **position** | 3 |
|
|
130
|
+
| **item** | |
|
|
131
|
+
| **@type** | Thing |
|
|
132
|
+
| **@id** | https://catalog.polo.blue/electrical-lighting-telematics/exterior-lighting/bulbs/ |
|
|
133
|
+
| **itemListElement** | |
|
|
134
|
+
| **@type** | ListItem |
|
|
135
|
+
| **name** | Bulb carrier with bulb; silver lens |
|
|
136
|
+
| **position** | 4 |
|