spoko-design-system 0.0.6 → 0.0.8

package/README.md

@@ -25,8 +25,8 @@ or just clone the repository.
 
 
 
-Example:
-- https://spoko-design-system.netlify.app/
+### Example:
+- https://sds.spoko.space/
 
 #
 
@@ -36,6 +36,19 @@ Most of the components from this repository can be seen in my projects:
 - https://polo.blue
 
 
+### Feateures
+- ⚡️[Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/) - born with fastness
+- 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
+- 😃 [astro-icon](https://github.com/natemoo-re/astro-icon) - for local icons, sprites and `@iconify-json/*` sets
+- 🍔 [astro-navbar](https://github.com/surjithctly/astro-navbar) -  fully responsive and accessible headless navigation bar
+- 🌍 [astro-i18next](https://github.com/yassinedoghri/astro-i18next) - Astro integration of i18next
+- 🔎 [astro-pagefind](https://github.com/shishkin/astro-pagefind) - Astro integration for Pagefind static site search
+- 🗒 [astrojs/mdx](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/) - markdown support
+- 📦 [astro-compress](https://github.com/astro-community/AstroCompress) - compression utilities to your Astro project
+- 🖨 Static-site generation (SSG)
+- 🎡 [Swiper](https://github.com/nolimits4web/swiper) - modern mobile touch slider with hardware accelerated transitions and amazing native behavior
+- 🌠 [View Transitions API](https://docs.astro.build/en/guides/view-transitions/#full-site-view-transitions-spa-mode) - [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) - makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+ ([more details](https://developer.chrome.com/docs/web-platform/view-transitions?hl=en))
+- ☁️ Deploy on Netlify
 
 ### Adding new sections
 

package/astro.config.mjs

@@ -1,30 +1,29 @@
 import { defineConfig, sharpImageService } from "astro/config";
-// import tailwind from "@astrojs/tailwind";
 import vue from "@astrojs/vue";
 import mdx from '@astrojs/mdx';
 import UnoCSS from '@unocss/astro';
-
+import Compress from "astro-compress";
 // https://github.com/yassinedoghri/astro-i18next#readme
 import astroI18next from "astro-i18next";
-
 import icon from "astro-icon";
+import sitemap from "@astrojs/sitemap";
+import pagefind from "astro-pagefind";
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://spoko-design-system.netlify.app",
+  site: "https://sds.spoko.space/",
   server: {
     port: 1234
   },
   image: {
     service: sharpImageService(),
-    domains: ["api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com"]
+    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "img.freepik.com"]
   },
   integrations: [
   // Enable Vue to support Vue3 components.
   vue(),
   mdx(),
   astroI18next(),
-  // tailwind(), // sorry - Uno is better ;-P
   UnoCSS({
     injectReset: true
   }), icon(
@@ -48,5 +47,54 @@ export default defineConfig({
         flowbite: ["arrow-left-outline", "arrow-right-outline", "angle-left-outline", "angle-right-outline", "chevron-left-outline", "chevron-right-outline","map-location-outline", "map-pin-alt-solid", "x-outline", "messages-outline", "arrow-down-to-bracket-outline", "check-outline"]
       }
     }
-  )]
+  ),
+  Compress({
+    CSS: true,
+    HTML: {
+      caseSensitive: true,
+      collapseBooleanAttributes: true,
+      collapseInlineTagWhitespace: false,
+      collapseWhitespace: true,
+      conservativeCollapse: false,
+      continueOnParseError: false,
+      customAttrAssign: [],
+      customAttrCollapse: "",
+      customAttrSurround: [],
+      customEventAttributes: [/^on[a-z]{3,}$/],
+      decodeEntities: false,
+      html5: true,
+      ignoreCustomComments: [],
+      ignoreCustomFragments: [],
+      includeAutoGeneratedTags: true,
+      keepClosingSlash: true,
+      maxLineLength: null,
+      minifyCSS: true,
+      minifyJS: true,
+      minifyURLs: false,
+      preserveLineBreaks: false,
+      preventAttributesEscaping: false,
+      processConditionalComments: true,
+      processScripts: ["module"],
+      quoteCharacter: "",
+      removeAttributeQuotes: true,
+      removeComments: false,
+      removeEmptyAttributes: false,
+      removeEmptyElements: false,
+      removeOptionalTags: false,
+      removeRedundantAttributes: true,
+      removeScriptTypeAttributes: true,
+      removeStyleLinkTypeAttributes: true,
+      removeTagWhitespace: true,
+      sortAttributes: true,
+      sortClassName: true,
+      trimCustomFragments: false,
+      useShortDoctype: false
+    },
+    Image: false,
+    JavaScript: true,
+    SVG: true
+  }),
+  pagefind(),
+  sitemap()
+]
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -8,10 +8,29 @@
     "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.1.0",
     "@astrojs/node": "^7.0.4",
+    "@astrojs/sitemap": "^3.0.5",
     "@astrojs/vue": "^4.0.8",
     "@docsearch/css": "^3.5.2",
     "@docsearch/react": "^3.5.2",
@@ -45,6 +64,7 @@
     "@unocss/preset-wind": "^0.58.4",
     "@unocss/reset": "^0.58.4",
     "@vueuse/core": "^10.7.2",
+    "astro-compress": "^2.2.8",
     "astro-i18next": "1.0.0-beta.21",
     "astro-icon": "^1.0.2",
     "astro-navbar": "^2.3.0",
@@ -54,18 +74,13 @@
     "i18next-fs-backend": "^2.3.1",
     "i18next-http-backend": "^2.4.2",
     "i18next-vue": "^3.0.0",
-    "preact": "^10.19.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.70.0",
     "unocss": "^0.57.7",
     "vite": "^5.0.12",
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
-    "@astrojs/preact": "^3.1.0",
-    "@astrojs/react": "^3.0.9",
-    "@astrojs/tailwind": "^5.1.0",
     "@unocss/transformer-variant-group": "^0.58.4",
     "astro": "^4.2.4",
     "unocss": "^0.58.3"

package/public/pagefind.yml

@@ -0,0 +1,4 @@
+exclude_selectors:
+  - "code"
+  - ".component-preview"
+  - "pre"

package/src/components/Button.vue

@@ -5,25 +5,33 @@ const props = defineProps<{
   href?: string;
   title?: string;
   primary?: boolean;
-  tertiary?: boolean;
+  primaryOutline?: boolean;
   secondary?: boolean;
+  secondaryOutline?: boolean;
+  tertiary?: boolean;
+  tertiaryOutline?: boolean;
   text?: boolean;
   tag?: boolean;
   small?: boolean;
   medium?: boolean;
+  rounded?: boolean;
 }>();
 
 const tag = props.href && props.href.length ? 'a' : 'button'
 
 const classes = {
   "btn-primary": props.primary,
+  "btn-primary-outline": props.primaryOutline,
   "btn-secondary": props.secondary,
+  "btn-secondary-outline": props.secondaryOutline,
   "btn-tertiary": props.tertiary,
+  "btn-tertiary-outline": props.tertiaryOutline,
   "btn-text": props.text,
   "btn-tag": props.tag,
   "btn-sm": props.medium,
   "btn-xs": props.small,
-  "btn-normal": !props.small && !props.medium
+  "btn-normal": !props.small && !props.medium,
+  "rounded-full": props.rounded
 };
 
 

package/src/components/ButtonCopy.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-
 import { useClipboard } from "@vueuse/core";
-
 import { Icon } from "@iconify/vue";
 import { PropType } from "vue";
 
@@ -30,7 +28,6 @@ const { copy, copied, isSupported } = useClipboard({ source });
 
 </script>
 
-
 <template>
     <button v-if="isSupported" :aria-label="String(texts.copy)"
         class="btn-copy has-tooltip" @click="copy()">
@@ -40,7 +37,6 @@ const { copy, copied, isSupported } = useClipboard({ source });
 </template>
 
 <style>
-
 .tooltip {
     @apply invisible absolute;
   }
@@ -48,5 +44,4 @@ const { copy, copied, isSupported } = useClipboard({ source });
   .has-tooltip:hover .tooltip {
       @apply visible z-50;
   }
-
-</style>
+</style>

package/src/components/Card.astro

@@ -1,11 +1,11 @@
 ---
-const { class: className, imgSrc, imgAlt } = Astro.props;
+const { class: className, imgSrc, imgAlt, href } = Astro.props;
 
 import Image from '../components/Image.astro'
 ---
 
 <div class="bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
-    <a href="#" class="aspect-ratio-video block relative">
+    <a href={href} class="aspect-ratio-video block relative">
         { imgSrc && (
           <Image
             imageObject={

package/src/components/Carousel.astro

@@ -0,0 +1,41 @@
+---
+
+---
+<script>
+  import { register } from "swiper/element/bundle";
+    
+  document.addEventListener("astro:page-load", () => {
+    //"DOMContentLoaded"
+    // register Swiper custom elements
+    register();
+  })
+
+</script>
+
+<swiper-container
+  class="max-w=full w-full flex"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1">
+    A
+  </swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1">
+    B
+  </swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1">
+    C
+  </swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1">
+    D
+  </swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1">
+    A
+  </swiper-slide>
+
+</swiper-container>

package/src/components/HeadCommon.astro

@@ -9,12 +9,12 @@
 <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.xml" />
+<link rel="sitemap" href="/sitemap-index.xml" />
 
 <!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<!-- <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" />
+<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>

package/src/components/Header/Header.astro

@@ -2,6 +2,7 @@
 import { SITE } from "../../config";
 import SkipToContent from "./SkipToContent.astro";
 import { MenuIcon } from "astro-navbar";
+import Search from "astro-pagefind/components/Search";
 ---
 
 <header
@@ -15,6 +16,17 @@ import { MenuIcon } from "astro-navbar";
     <div class="flex flex-nowrap">
       <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
       <a class="text-2xl font-medium block font-textbold" href="/"> SDS</a>
+      <Search
+        transition:persist
+        transition:name="search-field"
+        className="search-container"
+        id="search"
+        uiOptions={{
+          showImages: false,
+          showFilters: false,
+          resetStyles: true,
+        }}
+      />
     </div>
     <div class="flex gap-2">
       {
@@ -42,3 +54,162 @@ import { MenuIcon } from "astro-navbar";
     </div>
   </nav>
 </header>
+
+<style lang="scss" is:global>
+  #search {
+    @apply ml-6;
+
+    &.search-container {
+      box-sizing: border-box;
+      @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
+    }
+    .pagefind-ui {
+
+      @apply font-textlight text-base;
+      
+      &__search-input {
+        height: 40px !important;
+        border: 0;
+        @apply rounded-none sm-rounded-3xl h-10 w-full;
+      }
+
+      &__result-excerpt,
+      __button {
+        font-size: 14px !important;
+      }
+
+      &__filter-name {
+        font-size: 12px !important;
+      }
+      &__drawer:not(.pagefind-ui__hidden) {
+        @apply p-4;
+      }
+
+      &__result-link {
+        color: var(--pagefind-ui-primary);
+        // font-family: 'vw_headregular';
+        font-family: vw_headlight;
+        font-size: 1rem;
+
+        &:before {
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          content: "";
+          position: absolute;
+        }
+      }
+
+      &__result-excerpt {
+        color: var(--pagefind-ui-text);
+        order: 3;
+      }
+
+      &__drawer {
+        @apply bg-white md-position-fixed shadow-lg rounded-b-lg border-t border-t-transparent overflow-auto top-17 md:max-w-[calc(100vw-10%)] max-h-[calc(100vh-10%)];
+        gap: 30px;
+      }
+
+      &__search-clear {
+        height: 38px;
+        top: 0;
+        @apply sm-rounded-3xl;
+      }
+
+      &__search-input {
+        font-size: 1rem;
+        font-weight: 400;
+        padding: 0 2.5rem 2px;
+      }
+
+      &__form {
+        &:before {
+          top: 14px;
+          left: 16px;
+          width: 14px;
+          height: 14px;
+        }
+      }
+
+      &__result {
+        padding: 0.875rem 0;
+        gap: 1rem;
+        @apply position-relative;
+      }
+
+      &__filter-block {
+        padding: 0.875rem 0;
+        border-width: 1px;
+      }
+
+      &__filter-group {
+        gap: 0.5rem;
+        padding-top: 0.875rem;
+      }
+
+      &__filter-value {
+        gap: 10px;
+      }
+
+      &__filter-checkbox {
+        border-radius: 3px;
+        margin-top: 1px;
+        min-width: calc(16px * var(--pagefind-ui-scale));
+      }
+
+      &__result-image {
+        @apply drop-shadow-sm w-full h-full object-contain rounded-none;
+      }
+
+      &__filter-panel {
+        // min-width: 220px;
+        @apply hidden;
+      }
+
+      &__filter-label {
+        font-size: 0.9rem;
+      }
+
+      &__button {
+        font-weight: 400;
+        height: 40px;
+      }
+
+      &__result-tag {
+        background: inherit;
+        padding: 0;
+        color: #9ca3af;
+      }
+
+      &__result-thumb {
+        max-width: 120px;
+      }
+
+      &__result-tags {
+        margin-top: 0.4rem;
+        order: 2;
+      }
+
+      &__filter-name {
+        &:after {
+          color: var(--pagefind-ui-primary);
+        }
+      }
+
+      &__result-title {
+        font-size: inherit;
+        line-height: 1;
+      }
+
+      &__filter-panel,
+      &__results-area {
+        margin-top: 0;
+      }
+
+      &__message {
+        padding: 0.875rem 0;
+      }
+    }
+  }
+</style>

package/src/components/Image.astro

@@ -2,10 +2,8 @@
 import { Image } from 'astro:assets'
 
 const { imageObject } = Astro.props;
-
 let inputProps = {};
 
-
 if (imageObject.index && imageObject.index === 1) {
   inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
   inputProps['loading'] = 'eager'

package/src/components/Jumbatron.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
 import { useSlots } from 'vue';
 
-  const slots = useSlots()
-  const hasSlot = (name) => {
-    return !!slots[name];
-  }
-    const props = defineProps({
-      small: {
-        type: Boolean,
-        default: null,
-        required: false,
-      },
-    })
+const slots = useSlots()
+const hasSlot = (name) => {
+  return !!slots[name];
+}
+const props = defineProps({
+  small: {
+    type: Boolean,
+    default: null,
+    required: false,
+  },
+})
 </script>
 
-
 <template>
-  <div class="relative flex bg-vw " :class="props.small ? 'md:min-h-xs' : 'md:min-h-md' ">
+  <div class="relative flex bg-vw " :class="props.small ? 'md:min-h-xs' : 'md:min-h-md'">
     <div class="max-w-7xl mx-auto my-auto">
-      <div class="py-8 lg:w-full" :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32' ">
+      <div class="py-8 lg:w-full"
+        :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32'">
         <header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- sm:pt-12  md:pt-16 lg:pt-20 xl:pt-28 -->
           <div class="text-center">
             <h1 class="text-3xl  tracking-tight sm:(text-4xl pt-0) md:text-5xl lg:text-6xl  font-headlight text-white">
@@ -38,9 +38,8 @@ import { useSlots } from 'vue';
 </template>
 <style lang="scss">
 .bg-vw {
-  background: radial-gradient(
-      circle at 50% 85%,
+  background: radial-gradient(circle at 50% 85%,
       #00437A 0%,
-      #001E50 100%
-  )}
+      #001E50 100%)
+}
 </style>

package/src/components/MainTable.vue

@@ -1,14 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{
+  data: string;
+}>();
+
+const theads = Object.keys(Object.values(props.data)[0])
+
+const capitalizeFirstLetter = (text: String) => {
+  return text[0].toUpperCase() + text.slice(1)
+}
+
+</script>
+
+
+
 <template>
   <table class="table-auto text-left border bg-white shadow-md">
-    <thead class="bg-slate-800 text-white">
+    <thead class="bg-gray-500 text-white">
       <tr class="border">
-        <th class="px-4 py-2">id</th>
-        <th class="px-4 py-2">Name</th>
-        <th class="px-4 py-2">Email</th>
+        <th class="px-4 py-2 font-semibold" v-for="thead, index in theads" :key="index">
+          {{ capitalizeFirstLetter(thead) }}
+        </th>
       </tr>
     </thead>
     <tbody>
-      <tr class="border" v-for="row in tableData" :key="row">
+      <tr class="border" v-for="row in props.data" :key="row">
         <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
           {{ row[key] }}
         </td>
@@ -17,24 +32,3 @@
   </table>
 </template>
 
-<script setup lang="ts">
-const tableData = [
-  {
-    id: 1,
-    name: "Lorem Ipsum",
-    email: "lorem@email.com",
-  },
-  {
-    id: 2,
-    name: "Chuck Norris",
-    email: "ipsum@email.com",
-  },
-  {
-    id: 3,
-    name: "Ipsum Lorem",
-    email: "lorem@email.com",
-  }
-];
-</script>
-
-<style scoped></style>

package/src/components/Modal.astro

@@ -5,10 +5,7 @@ import Button from '../components/Button.vue'
 <style lang="scss">
 dialog {
   @apply fixed top-0 left-0 right-0 bottom-0;
-  // position: fixed;
-  // left: 50%;
-  // top: 50%;
-  // transform: translate(-50%, -50%);
+
   &::backdrop {
     @apply bg-gray-500/50 fixed;
     top: 0px;

package/src/components/PageContent.astro

@@ -1,7 +1,6 @@
 ---
 const { content, githubEditUrl } = Astro.props;
 const title = content.title;
-// const headers = content.astro.headers;
 ---
 
 <article id="article" class="content">