spoko-design-system 0.2.23 → 0.2.25

package/package.json

@@ -1,96 +1,96 @@
-{
-  "name": "spoko-design-system",
-  "version": "0.2.23",
-  "private": false,
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/polo-blue/sds"
-  },
-  "author": {
-    "name": "spokospace",
-    "email": "szymon@spoko.space",
-    "url": "https://spoko.space"
-  },
-  "homepage": "https://sds.spoko.space/",
-  "license": "MIT",
-  "keywords": [
-    "astro-starter",
-    "seo",
-    "astro",
-    "sds design system",
-    "spoko design system"
-  ],
-  "dependencies": {
-    "@algolia/client-search": "^4.22.1",
-    "@astrojs/mdx": "^2.2.0",
-    "@astrojs/node": "^8.2.4",
-    "@astrojs/sitemap": "^3.1.1",
-    "@astrojs/vue": "^4.0.9",
-    "@docsearch/css": "^3.6.0",
-    "@iconify-json/ant-design": "^1.1.15",
-    "@iconify-json/bi": "^1.1.23",
-    "@iconify-json/bx": "^1.1.10",
-    "@iconify-json/carbon": "^1.1.31",
-    "@iconify-json/circle-flags": "^1.1.46",
-    "@iconify-json/el": "^1.1.8",
-    "@iconify-json/eos-icons": "^1.1.10",
-    "@iconify-json/flowbite": "^1.1.3",
-    "@iconify-json/fluent": "^1.1.50",
-    "@iconify-json/fluent-emoji": "1.1.18",
-    "@iconify-json/icon-park-outline": "^1.1.15",
-    "@iconify-json/la": "^1.1.8",
-    "@iconify-json/mdi": "^1.1.64",
-    "@iconify-json/noto-v1": "^1.1.11",
-    "@iconify-json/octicon": "^1.1.52",
-    "@iconify-json/ph": "^1.1.11",
-    "@iconify-json/simple-icons": "^1.1.96",
-    "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.193",
-    "@iconify/vue": "^4.1.1",
-    "@types/node": "^20.11.30",
-    "@unocss/astro": "^0.58.6",
-    "@unocss/preset-attributify": "^0.58.6",
-    "@unocss/preset-typography": "^0.58.6",
-    "@unocss/preset-uno": "^0.58.6",
-    "@unocss/preset-web-fonts": "^0.58.6",
-    "@unocss/preset-wind": "^0.58.6",
-    "@unocss/reset": "^0.58.6",
-    "@vite-pwa/astro": "^0.3.0",
-    "@vueuse/core": "^10.9.0",
-    "astro-compress": "^2.2.15",
-    "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.0",
-    "astro-meta-tags": "^0.2.2",
-    "astro-navbar": "^2.3.1",
-    "astro-pagefind": "^1.5.0",
-    "i18next": "^23.10.1",
-    "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-fs-backend": "^2.3.1",
-    "i18next-http-backend": "^2.5.0",
-    "i18next-vue": "^4.0.0",
-    "sass": "^1.72.0",
-    "swiper": "^11.0.7",
-    "unocss": "^0.58.6",
-    "vite": "^5.1.6",
-    "vue": "^3.4.21"
-  },
-  "devDependencies": {
-    "@unocss/transformer-variant-group": "^0.58.6",
-    "astro": "^4.5.6",
-    "unocss": "^0.58.3"
-  },
-  "packageManager": "pnpm@8.15.5",
-  "pnpm": {
-    "default": "8.15.2",
-    "overrides": {
-      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
-      "sharp@<0.30.5": ">=0.30.5"
-    }
-  }
+{
+  "name": "spoko-design-system",
+  "version": "0.2.25",
+  "private": false,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polo-blue/sds"
+  },
+  "author": {
+    "name": "spokospace",
+    "email": "szymon@spoko.space",
+    "url": "https://spoko.space"
+  },
+  "homepage": "https://sds.spoko.space/",
+  "license": "MIT",
+  "keywords": [
+    "astro-starter",
+    "seo",
+    "astro",
+    "sds design system",
+    "spoko design system"
+  ],
+  "dependencies": {
+    "@algolia/client-search": "^4.22.1",
+    "@astrojs/mdx": "^2.2.1",
+    "@astrojs/node": "^8.2.5",
+    "@astrojs/sitemap": "^3.1.1",
+    "@astrojs/vue": "^4.0.9",
+    "@docsearch/css": "^3.6.0",
+    "@iconify-json/ant-design": "^1.1.15",
+    "@iconify-json/bi": "^1.1.23",
+    "@iconify-json/bx": "^1.1.10",
+    "@iconify-json/carbon": "^1.1.31",
+    "@iconify-json/circle-flags": "^1.1.46",
+    "@iconify-json/el": "^1.1.8",
+    "@iconify-json/eos-icons": "^1.1.10",
+    "@iconify-json/flowbite": "^1.1.3",
+    "@iconify-json/fluent": "^1.1.50",
+    "@iconify-json/fluent-emoji": "1.1.18",
+    "@iconify-json/icon-park-outline": "^1.1.15",
+    "@iconify-json/la": "^1.1.8",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/noto-v1": "^1.1.11",
+    "@iconify-json/octicon": "^1.1.52",
+    "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/simple-icons": "^1.1.96",
+    "@iconify-json/uil": "^1.1.8",
+    "@iconify/json": "^2.2.194",
+    "@iconify/vue": "^4.1.1",
+    "@types/node": "^20.11.30",
+    "@unocss/astro": "^0.58.6",
+    "@unocss/preset-attributify": "^0.58.6",
+    "@unocss/preset-typography": "^0.58.6",
+    "@unocss/preset-uno": "^0.58.6",
+    "@unocss/preset-web-fonts": "^0.58.6",
+    "@unocss/preset-wind": "^0.58.6",
+    "@unocss/reset": "^0.58.6",
+    "@vite-pwa/astro": "^0.3.0",
+    "@vueuse/core": "^10.9.0",
+    "astro-compress": "^2.2.15",
+    "astro-i18next": "1.0.0-beta.21",
+    "astro-icon": "^1.1.0",
+    "astro-meta-tags": "^0.2.2",
+    "astro-navbar": "^2.3.1",
+    "astro-pagefind": "^1.5.0",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-fs-backend": "^2.3.1",
+    "i18next-http-backend": "^2.5.0",
+    "i18next-vue": "^4.0.0",
+    "sass": "^1.72.0",
+    "swiper": "^11.0.7",
+    "unocss": "^0.58.6",
+    "vite": "^5.2.2",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@unocss/transformer-variant-group": "^0.58.6",
+    "astro": "^4.5.8",
+    "unocss": "^0.58.3"
+  },
+  "packageManager": "pnpm@8.15.5",
+  "pnpm": {
+    "default": "8.15.2",
+    "overrides": {
+      "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
+      "sharp@<0.30.5": ">=0.30.5"
+    }
+  }
 }

package/src/components/SlimBanner.vue

@@ -16,18 +16,18 @@ const toggleVisibility = () => {
 
 <template>
   <div v-if="isShow" data-pagefind-ignore
-    class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 py-3 flex items-center justify-center text-xs sm:(text-base px-8) leading-none text-white relative print-hidden">
+    class="slimbanner bg-lightBlue-400/70 drop-shadow-md z-2 px-4 py-3 flex items-center justify-center text-xs sm:(text-base px-8) leading-none text-blue-700 relative print-hidden">
     <span
       class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
     <span class="leading-none "><span
         data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
-      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener"
+      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" title="Support Ukraine"
         class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
     </span>
 
-    <button class="ml-3 text-white relative w-5 h-5" v-if="props.showCloseButton" @click="toggleVisibility()"
+    <button class="btn-close text-white" v-if="props.showCloseButton" @click="toggleVisibility()"
       aria-label="Toggle">
-      <span class="close"></span>
+      <span class="close close-dark"></span>
     </button>
   </div>
   <div v-else data-pagefind-ignore
@@ -36,19 +36,23 @@ const toggleVisibility = () => {
       <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
         data-text="TERRORIST" /> <span data-text="STATE" />
     </div>
-    <button class="ml-3 text-red-600 relative w-5 h-5" v-if="props.showCloseButton" @click="toggleVisibility()"
+    <button class="btn-close" v-if="props.showCloseButton" @click="toggleVisibility()"
       aria-label="Toggle">
-      <span class="close"></span>
+      <span class="close close-light"></span>
     </button>
   </div>
 </template>
 
-<style lang="scss">
+<style>
+.btn-close {
+ @apply ml-3 relative w-5 h-5;
+}
+
 .close {
-  @apply absolute top-0 left-0 opacity-50;
+  @apply absolute top-0 left-0 opacity-50 transition-opacity duration-200;
 }
 
-.close:hover {
+.btn-close:hover .close {
   @apply opacity-100;
 }
 
@@ -59,7 +63,14 @@ const toggleVisibility = () => {
   content: ' ';
   height: 1.25rem;
   width: 2px;
-  background-color: #fff;
+}
+
+.close-light {
+  @apply before:bg-white after:bg-white;
+}
+
+.close-dark {
+  @apply before:bg-black after:bg-black;
 }
 
 .close:before {

package/src/layouts/MainLayout.astro

@@ -26,7 +26,7 @@ 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} />
+    <HeadSEO content={content} canonicalURL={canonicalURL} />
     <title>
       {
         content.title

package/src/layouts/partials/HeadSEO.astro

@@ -2,7 +2,7 @@
 import { SITE, OPEN_GRAPH } from '../../config';
 export interface Props {
 	content: any;
-	site: any;
+	// site: any;
 	canonicalURL: URL | string;
 }
 const { content = {}, canonicalURL } = Astro.props;

package/src/pages/components/badges.mdx

@@ -1,6 +1,7 @@
 ---
 title: "Badges"
 layout: "../../layouts/MainLayout.astro"
+
 ---
 import Badges from '../../components/Badges.vue'
 
@@ -13,6 +14,7 @@ Extra product badges (labels).
             <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" />