spoko-design-system 0.0.1 → 0.0.2

package/src/design.config.ts

@@ -1,92 +1,73 @@
-export const COLORS = {
-  gray: [
-    { name: "100", value: "#f3f4f6" },
-    { name: "200", value: "#e5e7eb" },
-    { name: "300", value: "#b5bbc5" },
-    { name: "400", value: "#9ca3af" },
-    { name: "500", value: "#64748B" },
-  ],
-  blue: [
-    { name: "50", value: "#eff6ff" },
-    { name: "100", value: "#dbeafe" },
-    { name: "200", value: "#bfdbfe" },
-    { name: "300", value: "#93c5fd" },
-    { name: "400", value: "#60a5fa" },
-    { name: "500", value: "#3b82f6" },
-    { name: "600", value: "#02307d" },
-    { name: "700", value: "#001e50" },
-    { name: "800", value: "#00437a" },
-    { name: "900", value: "#000f28" },
-    { name: "901", value: "#0c1a32" },
-    { name: "wrc", value: "#0000c8" },
-  ],
-  lightBlue: [
-    { name: "400", value: "#00b0f0" },
-    { name: "500", value: "#0099da" },
-    { name: "600", value: "#0087c1" },
-    { name: "700", value: "#006ea6" },
-  ],
-  green: [
-    { name: "50", value: "#f0fdfc" },
-    { name: "100", value: "#e1f9f7" },
-    { name: "200", value: "#c3f3eb" },
-    { name: "300", value: "#a0ece5" },
-    { name: "400", value: "#7ddcd3" },
-    { name: "500", value: "#5bc9c0" },
-    { name: "600", value: "#4db7b2" },
-    { name: "700", value: "#3da69e" },
-    { name: "800", value: "#2d8c82" },
-    { name: "900", value: "#1e7a6e" },
-  ],
-  red: [
-    { name: "50", value: "#fdf2f2" },
-    { name: "100", value: "#fde8e8" },
-    { name: "200", value: "#fcd9d9" },
-    { name: "300", value: "#fbcbcb" },
-    { name: "400", value: "#f8b5b5" },
-    { name: "500", value: "#f49f9f" },
-    { name: "600", value: "#e57373" },
-    { name: "700", value: "#d73a3a" },
-    { name: "800", value: "#c62e2e" },
-    { name: "900", value: "#ad1c1c" },
-  ],
-};
-
-export const TYPOGRAPHY = {
-  fontFamily: "Inter, system",
-  scale: [
-    { name: "h1", size: "22pt", weight: "400" },
-    { name: "h2", size: "17pt", weight: "500" },
-    { name: "h3", size: "13pt", weight: "600" },
-    { name: "h4", size: "13pt", weight: "500" },
-    { name: "body", size: "13pt", weight: "400" },
-    { name: "button", size: "13pt", weight: "400" },
-    { name: "caption", size: "10pt", weight: "400" },
-  ],
-};
-
-export const SHADOWS = {
-  types: [
-    { name: "xs", value: "0px 2px 4px rgba(0, 0, 0, 0.08)" },
-    { name: "sm", value: "0px 4px 8px rgba(0, 0, 0, 0.125)" },
-    { name: "md", value: "0px 8px 16px rgba(0, 0, 0, 0.125)" },
-    { name: "lg", value: "0px 16px 32px rgba(0, 0, 0, 0.125)" },
-    { name: "xl", value: "0px 32px 64px rgba(0, 0, 0, 0.125)" },
-    { name: "2xl", value: "0px 64px 128px rgba(0, 0, 0, 0.125)" },
-  ],
-};
-
-
-export const FONTS = {
-types: [
-    { name: "vw_textregular", value: "font-textregular" },
-    { name: "vw_textregular", value: "font-sans" },
-    { name: "vw_textbold", value: "font-textbold" },
-    { name: "vw_headbold", value: "font-headbold" },
-    { name: "vw_headregular", value: "vw_headregular" },
-    { name: "vw_headlight", value: "font-headlight" },
-    { name: "vw_textlight", value: "font-textlight" },
-    { name: "Nova Mono", value: "font-novamono" },
-    { name: "Nova Mono", value: "font-mono" }
-  ],
-};
+export const COLORS = {
+  gray: [
+    { name: "100", value: "#f3f4f6" },
+    { name: "200", value: "#e5e7eb" },
+    { name: "300", value: "#b5bbc5" },
+    { name: "400", value: "#9ca3af" },
+    { name: "500", value: "#64748B" },
+  ],
+  blue: [
+    { name: "50", value: "#eff6ff" },
+    { name: "100", value: "#dbeafe" },
+    { name: "200", value: "#bfdbfe" },
+    { name: "300", value: "#93c5fd" },
+    { name: "400", value: "#60a5fa" },
+    { name: "500", value: "#3b82f6" },
+    { name: "600", value: "#02307d" },
+    { name: "700", value: "#001e50" },
+    { name: "800", value: "#00437a" },
+    { name: "900", value: "#000f28" },
+    { name: "901", value: "#0c1a32" },
+    { name: "wrc", value: "#0000c8" },
+  ],
+  lightBlue: [
+    { name: "400", value: "#00b0f0" },
+    { name: "500", value: "#0099da" },
+    { name: "600", value: "#0087c1" },
+    { name: "700", value: "#006ea6" },
+  ],
+  red: [
+    { name: "400", value: "#f8b5b5" },
+    { name: "500", value: "#f49f9f" },
+    { name: "600", value: "#e57373" },
+  ],
+};
+
+export const TYPOGRAPHY = {
+  fontFamily: "Inter, system",
+  scale: [
+    { name: "h1", size: "22pt", weight: "400" },
+    { name: "h2", size: "17pt", weight: "500" },
+    { name: "h3", size: "13pt", weight: "600" },
+    { name: "h4", size: "13pt", weight: "500" },
+    { name: "body", size: "13pt", weight: "400" },
+    { name: "button", size: "13pt", weight: "400" },
+    { name: "caption", size: "10pt", weight: "400" },
+  ],
+};
+
+export const SHADOWS = {
+  types: [
+    { name: "xs", value: "0px 2px 4px rgba(0, 0, 0, 0.08)" },
+    { name: "sm", value: "0px 4px 8px rgba(0, 0, 0, 0.125)" },
+    { name: "md", value: "0px 8px 16px rgba(0, 0, 0, 0.125)" },
+    { name: "lg", value: "0px 16px 32px rgba(0, 0, 0, 0.125)" },
+    { name: "xl", value: "0px 32px 64px rgba(0, 0, 0, 0.125)" },
+    { name: "2xl", value: "0px 64px 128px rgba(0, 0, 0, 0.125)" },
+  ],
+};
+
+
+export const FONTS = {
+types: [
+    { name: "vw_textregular", value: "font-textregular" },
+    { name: "vw_textregular", value: "font-sans" },
+    { name: "vw_textbold", value: "font-textbold" },
+    { name: "vw_headbold", value: "font-headbold" },
+    { name: "vw_headregular", value: "font-headregular" },
+    { name: "vw_headlight", value: "font-headlight" },
+    { name: "vw_textlight", value: "font-textlight" },
+    { name: "Nova Mono", value: "font-novamono" },
+    { name: "Nova Mono", value: "font-mono" }
+  ],
+};

package/src/env.d.ts

@@ -1,2 +1,2 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

package/src/flag-poland.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" fill="#F0F0F0"/><rect y="256" width="512" height="256" fill="#D80027"/></svg>

package/src/flag-uk.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" fill="#F0F0F0"/><polygon points="0 304 208 304 208 512 304 512 304 304 512 304 512 208 304 208 304 0 208 0 208 208 0 208" fill="#D80027"/><g fill="#0052B4"><polygon points="406.92 333.91 512 438.99 512 333.91"/><polygon points="333.91 333.91 512 512 512 461.64 384.27 333.91"/><polygon points="464.56 512 333.91 381.34 333.91 512"/></g><polygon points="333.91 333.91 512 512 512 461.64 384.27 333.91" fill="#F0F0F0"/><polygon points="333.91 333.91 512 512 512 461.64 384.27 333.91" fill="#D80027"/><g fill="#0052B4"><polygon points="80.302 333.91 0 414.22 0 333.91"/><polygon points="178.08 356.56 178.08 512 22.658 512"/></g><polygon points="127.72 333.92 0 461.64 0 512 0 512 178.08 333.92" fill="#D80027"/><g fill="#0052B4"><polygon points="105.08 178.09 0 73.007 0 178.09"/><polygon points="178.09 178.09 0 0 0 50.36 127.73 178.09"/><polygon points="47.436 0 178.09 130.66 178.09 0"/></g><polygon points="178.09 178.09 0 0 0 50.36 127.73 178.09" fill="#F0F0F0"/><polygon points="178.09 178.09 0 0 0 50.36 127.73 178.09" fill="#D80027"/><g fill="#0052B4"><polygon points="431.7 178.09 512 97.785 512 178.09"/><polygon points="333.92 155.44 333.92 3e-3 489.34 3e-3"/></g><polygon points="384.28 178.08 512 50.359 512 0 512 0 333.92 178.08" fill="#D80027"/></svg>

package/src/layouts/Layout.astro

@@ -0,0 +1,51 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar.astro';
+import { Astronav, MenuItems} from "astro-navbar";
+import * as CONFIG from '../config';
+import { t, changeLanguage } from "i18next";
+import '../styles/main.scss';
+import Copyright from '../components/Copyright.astro'
+const locale = "en";
+changeLanguage(locale);
+const year = new Date().getFullYear()
+const { content = {} } = Astro.props;
+const currentPage = Astro.url.pathname;
+// const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+console.log('canonicalURL', canonicalURL)
+---
+
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
+	<head>
+		<HeadCommon />
+		<HeadSEO {content} canonicalURL={canonicalURL} />
+		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
+	</head>
+
+	<body class="bg-blue-50">
+
+
+		<div class=" bg-white z-10 mb-11 relative">
+			<slot />
+		</div>
+		<footer>
+			<Copyright class="fixed bottom-0 z-0 w-full">
+				<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}`}>
+				  <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
+				  <img
+					class="h-4 md:h-5 w-min"
+					src={`/${import.meta.env.COPYRIGHT_IMG}`}
+					alt="Modern Websites"
+					width="126"
+					height="23"
+					loading="lazy"
+				  >
+				</a>
+			  </Copyright>
+		</footer>
+	</body>
+</html>

package/src/layouts/MainLayout.astro

@@ -1,50 +1,68 @@
----
-import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from '../components/HeadSEO.astro';
-import Header from '../components/Header/Header.astro';
-import PageContent from '../components/PageContent.astro';
-import LeftSidebar from '../components/LeftSidebar.astro';
-import RightSidebar from '../components/RightSidebar.astro';
-import * as CONFIG from '../config';
-import { t, changeLanguage } from "i18next";
-import '../styles/main.scss';
-const locale = "en";
-changeLanguage(locale);
-
-const { content = {} } = Astro.props;
-const currentPage = Astro.url.pathname;
-// const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
-const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
-console.log('canonicalURL', canonicalURL)
----
-
-<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
-	<head>
-		<HeadCommon />
-		<HeadSEO {content} canonicalURL={canonicalURL} />
-		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
-	</head>
-
-	<body class="bg-slate-100">
-		<div class="sticky top-0 z-10 w-full">
-			<Header currentPage={currentPage} />
-		</div>
-		<div class="grid grid-cols-12">
-			<div class="col-span-3 sticky top-0 pt-12 h-screen flex">
-				<div class="ml-auto">
-					<LeftSidebar currentPage={currentPage} />
-				</div>
-			</div>
-			<main class="py-4 px-8 pb-32 col-span-6  overflow-auto">
-				<div>
-					<PageContent content={content}>
-						<slot />
-					</PageContent>
-				</div>
-			</main>
-			<div class="col-span-3 sticky top-0 h-screen flex">
-				<RightSidebar content={content} />
-			</div>
-		</div>
-	</body>
-</html>
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar.astro';
+import { Astronav, MenuItems} from "astro-navbar";
+import * as CONFIG from '../config';
+import { t, changeLanguage } from "i18next";
+import '../styles/main.scss';
+import Copyright from '../components/Copyright.astro'
+const locale = "en";
+changeLanguage(locale);
+const year = new Date().getFullYear()
+const { content = {} } = Astro.props;
+const currentPage = Astro.url.pathname;
+// const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+console.log('canonicalURL', canonicalURL)
+---
+
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
+	<head>
+		<HeadCommon />
+		<HeadSEO {content} canonicalURL={canonicalURL} />
+		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
+	</head>
+
+	<body class="bg-blue-50">
+		<div class="sticky top-0 z-10 w-full">
+			<Header currentPage={currentPage} />
+		</div>
+
+		<div class="flex  bg-white z-10 mb-11 relative">
+			<div class="sticky top-0 flex sm:(h-screen w-64) z-50 ">
+				<div class="mr-auto  pb-11 mb-11">
+					<Astronav>
+						<MenuItems class="hidden z-20 bg-white absolute sm:(static bg-blue-500 bg-opacity-5 lg:flex)">
+						  <LeftSidebar currentPage={currentPage} />
+						</MenuItems>
+					  </Astronav>
+				</div>
+			</div>
+			<main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
+				<div>
+					<PageContent content={content}>
+						<slot />
+					</PageContent>
+				</div>
+			</main>
+		</div>
+		<footer>
+			<Copyright class="fixed bottom-0 z-0 w-full">
+				<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}`}>
+				  <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
+				  <img
+					class="h-4 md:h-5 w-min"
+					src={`/${import.meta.env.COPYRIGHT_IMG}`}
+					alt="Modern Websites"
+					width="126"
+					height="23"
+					loading="lazy"
+				  >
+				</a>
+			  </Copyright>
+		</footer>
+	</body>
+</html>

package/src/pages/components/badges.mdx

@@ -1,35 +1,37 @@
----
-title: "Badges"
-layout: "../../layouts/MainLayout.astro"
----
-import Badges from '../../components/Badges.vue'
-
-## Badges
-
-### Badges - GTI
-<div class="component-preview">
-        <div class="relative min-h-6	">
-                <Badges badges={['GTI']} class:list="top-2" />
-        </div>
-</div>
-```js
-        <div class="relative min-h-14	">
-                <Badges badges={['GTI']} class:list="top-2" />
-        </div>
-
-```
-
-
-### Badges - Motorsport
-<div class="component-preview">
-        <div class="relative min-h-6	">
-                <Badges badges={['Motorsport']} class:list="top-2" />
-        </div>
-</div>
-
-```js
-        <div class="relative min-h-14	">
-                <Badges badges={['Motorsport']} class:list="top-2" />
-        </div>
-
-```
+---
+title: "Badges"
+layout: "../../layouts/MainLayout.astro"
+---
+import Badges from '../../components/Badges.vue'
+
+## Badges
+
+### Badges - GTI
+<div class="component-preview">
+        <div class="relative min-h-6	">
+                <Badges badges={['GTI']} class="top-2" />
+        </div>
+</div>
+```js
+<div class="relative min-h-14	">
+        <Badges badges={['GTI']} class="top-2" />
+</div>
+
+```
+
+
+### Badges - Motorsport
+<div class="component-preview">
+        <div class="relative min-h-6	">
+                <Badges badges={['Motorsport']} class="top-2" />
+        </div>
+</div>
+
+```js
+<div class="relative min-h-14	">
+        <Badges badges={['Motorsport']} class="top-2" />
+</div>
+
+```
+
+

package/src/pages/components/breadcrumbs.mdx

@@ -1,103 +1,100 @@
----
-title: "Breadcrumbs"
-layout: "../../layouts/MainLayout.astro"
-
-
----
-import Breadcrumbs from '../../components/Breadcrumbs.vue'
-
-## Breadcrumbs
-
-Breadcrumbs component
-
-
-### show back
-
-<div class="component-preview">
-    <Breadcrumbs
-      breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
-      data-lang="en"
-      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": "level 1"},
-                  {"name": "Level 2", "path": "level2"},
-                  {"name": "Level 3", "path": "level3"}
-                ] 
-              }
-              data-lang="en"
-              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": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
-      data-lang="en"
-      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"}
-                ] 
-              }
-              data-lang="en"
-              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": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
-      data-lang="en"
-      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"}
-                ] 
-              }
-              data-lang="en"
-              product-number="6R0XXXXXX"
-              class="py-1 order-0 px-1 max-w-full flex bg-white"
-              show-back
-              text-back="Back"
-            />
-```
+---
+title: "Breadcrumbs"
+layout: "../../layouts/MainLayout.astro"
+
+
+---
+import Breadcrumbs from '../../components/Breadcrumbs.vue'
+
+## Breadcrumbs
+
+Breadcrumbs component with BreadcrumbList Microdata
+#
+
+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="Home"
+    />
+</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="Home"
+/>
+```
+
+
+### 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"
+/>
+```