spoko-design-system 0.2.83 → 0.2.84

package/src/design.config.ts

@@ -1,81 +1,81 @@
-export const COLORS = {
-  gray: [
-    { name: "100", value: "#f3f4f6" },
-    { name: "200", value: "#e5e7eb" },
-    { name: "300", value: "#b5bbc5" },
-    { name: "400", value: "#9ca3af" },
-    { name: "500", value: "#64748B" },
-    { name: "600", value: "#475569" },
-    { name: "700", value: "#334155" },
-    { name: "800", value: "#1e293b" },
-    { name: "900", value: "#0f172a" },
-  ],
-  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: "540", value: '#0069ff'},
-    { name: "545", value: '#005ad7'},
-    { name: "550", value: '#0040c5'},
-    { name: "600", value: "#02307d" },
-    { name: "601", value: '#002059'},
-    { 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" }
-  ],
-};
+export const COLORS = {
+  gray: [
+    { name: "100", value: "#f3f4f6" },
+    { name: "200", value: "#e5e7eb" },
+    { name: "300", value: "#b5bbc5" },
+    { name: "400", value: "#9ca3af" },
+    { name: "500", value: "#64748B" },
+    { name: "600", value: "#475569" },
+    { name: "700", value: "#334155" },
+    { name: "800", value: "#1e293b" },
+    { name: "900", value: "#0f172a" },
+  ],
+  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: "540", value: '#0069ff'},
+    { name: "545", value: '#005ad7'},
+    { name: "550", value: '#0040c5'},
+    { name: "600", value: "#02307d" },
+    { name: "601", value: '#002059'},
+    { 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,7 @@
-/// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+  }

package/src/layouts/Layout.astro

@@ -1,60 +1,60 @@
----
-import HeadCommon from "./partials/HeadCommon.astro";
-import FooterCommon from "./partials/FooterCommon.astro";
-import HeadSEO from "../layouts/partials/HeadSEO.astro";
-import * as CONFIG from "../config";
-import { t, changeLanguage } from "i18next";
-import "../styles/main.css";
-import Copyright from "../components/Copyright.astro";
-const locale = "en";
-changeLanguage(locale);
-const { content = {} } = Astro.props;
-const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
----
-
-<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://spoko.space`}
-          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 w-min md:h-5 "
-            src="spoko.space.svg"
-            alt="Modern Websites"
-            width="126"
-            height="23"
-            loading="lazy"
-          />
-        </a>
-      </Copyright>
-      <FooterCommon />
-    </footer>
-  </body>
-</html>
+---
+import HeadCommon from "./partials/HeadCommon.astro";
+import FooterCommon from "./partials/FooterCommon.astro";
+import HeadSEO from "../layouts/partials/HeadSEO.astro";
+import * as CONFIG from "../config";
+import { t, changeLanguage } from "i18next";
+import "../styles/main.css";
+import Copyright from "../components/Copyright.astro";
+const locale = "en";
+changeLanguage(locale);
+const { content = {} } = Astro.props;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+---
+
+<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://spoko.space`}
+          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 w-min md:h-5 "
+            src="spoko.space.svg"
+            alt="Modern Websites"
+            width="126"
+            height="23"
+            loading="lazy"
+          />
+        </a>
+      </Copyright>
+      <FooterCommon />
+    </footer>
+  </body>
+</html>

package/src/layouts/MainLayout.astro

@@ -1,81 +1,81 @@
----
-import HeadCommon from "./partials/HeadCommon.astro";
-import HeadSEO from "../layouts/partials/HeadSEO.astro";
-import Header from "../components/Header/Header.astro";
-import PageContent from "../components/PageContent.astro";
-import LeftSidebar from "../components/LeftSidebar.astro";
-import * as CONFIG from "../config";
-import { t, changeLanguage } from "i18next";
-import "../styles/main.css";
-import Copyright from "../components/Copyright.astro";
-const locale = "en";
-changeLanguage(locale);
-const { content = {} } = Astro.props;
-const currentPage = Astro.url.pathname;
-const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
----
-
-<script>
-  // Swiper Element
-  import { register } from "swiper/element/bundle";
-  document.addEventListener("astro:page-load", () => {
-    register();
-  });
-</script>
-
-<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
-  <head>
-    <HeadCommon />
-    <HeadSEO content={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-20 w-full bg-white/70">
-      <Header currentPage={currentPage} />
-    </div>
-
-    <div class="flex bg-white z-10 mb-11 relative">
-      <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
-        <div class="mr-auto" transition:name="sidebar">
-          <LeftSidebar currentPage={currentPage} />
-        </div>
-      </div>
-      <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
-        <PageContent content={content} transition:name="content">
-          <slot />
-        </PageContent>
-      </main>
-    </div>
-    <footer>
-      <Copyright class="fixed bottom-0 z-0 w-full">
-        <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`}
-        >
-          <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="/spoko.space.svg"
-            alt="Modern Websites"
-            width="126"
-            height="23"
-            loading="lazy"
-          />
-        </a>
-      </Copyright>
-    </footer>
-  </body>
-</html>
+---
+import HeadCommon from "./partials/HeadCommon.astro";
+import HeadSEO from "../layouts/partials/HeadSEO.astro";
+import Header from "../components/Header/Header.astro";
+import PageContent from "../components/PageContent.astro";
+import LeftSidebar from "../components/LeftSidebar.astro";
+import * as CONFIG from "../config";
+import { t, changeLanguage } from "i18next";
+import "../styles/main.css";
+import Copyright from "../components/Copyright.astro";
+const locale = "en";
+changeLanguage(locale);
+const { content = {} } = Astro.props;
+const currentPage = Astro.url.pathname;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+---
+
+<script>
+  // Swiper Element
+  import { register } from "swiper/element/bundle";
+  document.addEventListener("astro:page-load", () => {
+    register();
+  });
+</script>
+
+<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
+  <head>
+    <HeadCommon />
+    <HeadSEO content={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-20 w-full bg-white/70">
+      <Header currentPage={currentPage} />
+    </div>
+
+    <div class="flex bg-white z-10 mb-11 relative">
+      <div class="sticky top-0 flex lg:(h-screen w-64) z-50">
+        <div class="mr-auto" transition:name="sidebar">
+          <LeftSidebar currentPage={currentPage} />
+        </div>
+      </div>
+      <main class="pb-4 px-4 sm:px-8 col-auto sm:(pb-32) overflow-auto w-full">
+        <PageContent content={content} transition:name="content">
+          <slot />
+        </PageContent>
+      </main>
+    </div>
+    <footer>
+      <Copyright class="fixed bottom-0 z-0 w-full">
+        <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`}
+        >
+          <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="/spoko.space.svg"
+            alt="Modern Websites"
+            width="126"
+            height="23"
+            loading="lazy"
+          />
+        </a>
+      </Copyright>
+    </footer>
+  </body>
+</html>

package/src/layouts/partials/FooterCommon.astro

@@ -1,5 +1,5 @@
----
-import ReloadPrompt from "../../components/ReloadPrompt.astro";
----
-
+---
+import ReloadPrompt from "../../components/ReloadPrompt.astro";
+---
+
 <ReloadPrompt />

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
+-->