spoko-design-system 0.9.6 → 1.0.1

package/README.md

@@ -1,116 +1,132 @@
-# Spoko Design System
-
-![Version](https://img.shields.io/github/package-json/v/polo-blue/sds)
-
-SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
-The project is still in the development phase, use at your own risk ;-)
-#
-Please feel free to fork it, edit it and let me know what do you think about it.
-
-
-
-| title       | Introduction                   |
-|-------------|--------------------------------|
-| description | Docs intro                     |
-| layout      | ../../layouts/MainLayout.astro |
-
-
-## Getting started
-
-### Installation
-
-```js
-pnpm add spoko-design-system
-```
-
-or just clone the repository.
-
-
-
-### Example:
-- https://sds.spoko.space/
-
-#
-
-Most of the components from this repository can be seen in my projects:
-
-- https://catalog.polo.blue/
-- https://polo.blue
-- https://polo6r.pl
-
-
-### 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
-- 📲 [PWA](https://github.com/vite-pwa/astro) - Zero-config PWA Integration for Astro
-- 🏷️ [astro-meta-tags](https://github.com/patrick91/astro-meta-tags) - Meta Tags inside for Astro Dev Toolbar
-- 🖨 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
-
-Although it's not required, you can create folders for new sections.
-
-To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
-
-
-```js
-export const SIDEBAR = [
-    { text: "Core", header: true },
-    { text: "Introduction", link: "/core/introduction" },
-    ...,
-    { text: "Components", header: true },
-    { text: "Buttons", link: "/components/jumbotron" },
-    ...,
-    { text: "New section", header: true },
-    { text: "New component", link: "/new-section/new-component.md" },
-];
-```
-
-### Adding new pages
-
-To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
-
-You're free to organize the pages however you want.
-
-### Customizing Core section (colors, typography, shadows...)
-
-If you want to customize the default colors, typography or shadows you can find the configuration file at uno.config.ts`.  I think I have prepared enough shades of blue ;-)
-
-Feel free to add new pages to the Core section
-
-
-### Customizing the page layout
-
-You can find the css for the pages in `src/styles/content.css`.
-
-
-### Adding your components
-
-Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
-
-To get started check how the `MainButton` component is used in the `src/pages/buttons.mdx` file.
-
-You can import your component library or create your own and document it easily.
-
-
-### `.component-preview` utility
-
-There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
-
-<div class="component-preview">
-    <button class="text-white bg-blue-lightest px-4 py-2 rounded-md">Your component</button>
-</div>
-
-
-### Have fun!
-
-Spoko Design System template was made in Poland by **[@spoko.space](https://spoko.space)** for personal and commercial use.
+# Spoko Design System
+
+![Version](https://img.shields.io/github/package-json/v/polo-blue/sds)
+
+SDS is the easiest way to start websites with simple design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
+The project is still in the development phase, use at your own risk ;-)
+#
+Please feel free to fork it, edit it and let me know what do you think about it.
+
+
+
+| title       | Introduction                   |
+|-------------|--------------------------------|
+| description | Docs intro                     |
+| layout      | ../../layouts/MainLayout.astro |
+
+
+## Getting started
+
+### Installation
+
+```js
+pnpm add spoko-design-system
+```
+
+or just clone the repository.
+
+
+
+### Example:
+- https://sds.spoko.space/
+
+#
+
+Most of the components from this repository can be seen in my projects:
+
+- https://catalog.polo.blue/
+- https://polo.blue
+- https://polo6r.pl
+
+
+### Features
+- ⚡️[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-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
+- 📦 [Playform compression](https://github.com/Playform/compress) - compression utilities to your Astro project
+- 📲 [PWA](https://github.com/vite-pwa/astro) - Zero-config PWA Integration for Astro
+- 🏷️ [astro-meta-tags](https://github.com/patrick91/astro-meta-tags) - Meta Tags inside for Astro Dev Toolbar
+- 🖨 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
+
+### Icon Collections
+
+The design system includes carefully curated icon collections from Iconify:
+
+- 🎨 [Material Design Icons](https://icon-sets.iconify.design/mdi/) - comprehensive icon set for UI elements
+- 🚗 [Ant Design Icons](https://icon-sets.iconify.design/ant-design/) - clean outlined icons
+- 📱 [Bootstrap Icons](https://icon-sets.iconify.design/bi/) - simple and consistent icons
+- 🎯 [Boxicons](https://icon-sets.iconify.design/bx/) - high quality web icons
+- 🌍 [Carbon Icons](https://icon-sets.iconify.design/carbon/) - IBM's design language icons
+- 🎪 [Lucide Icons](https://icon-sets.iconify.design/lucide/) - beautiful & consistent icon toolkit
+- 🎨 [Streamline Freehand Color](https://icon-sets.iconify.design/streamline-freehand-color/) - hand-drawn style colored icons
+- 📟 [VS Code Icons](https://icon-sets.iconify.design/vscode-icons/) - file type and technology icons
+- 🏢 [Simple Icons](https://icon-sets.iconify.design/simple-icons/) - brand icons for popular services
+- ⚡ [Fluent UI Icons](https://icon-sets.iconify.design/fluent/) - Microsoft's design system icons
+
+See the complete list and configuration in [`icon.config.ts`](./icon.config.ts).
+
+### Adding new sections
+
+Although it's not required, you can create folders for new sections.
+
+To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
+
+
+```js
+export const SIDEBAR = [
+    { text: "Core", header: true },
+    { text: "Introduction", link: "/core/introduction" },
+    ...,
+    { text: "Components", header: true },
+    { text: "Buttons", link: "/components/jumbotron" },
+    ...,
+    { text: "New section", header: true },
+    { text: "New component", link: "/new-section/new-component.md" },
+];
+```
+
+### Adding new pages
+
+To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
+
+You're free to organize the pages however you want.
+
+### Customizing Core section (colors, typography, shadows...)
+
+If you want to customize the default colors, typography or shadows you can find the configuration file at uno.config.ts`.  I think I have prepared enough shades of blue ;-)
+
+Feel free to add new pages to the Core section
+
+
+### Customizing the page layout
+
+You can find the css for the pages in `src/styles/content.css`.
+
+
+### Adding your components
+
+Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
+
+To get started check how the `MainButton` component is used in the `src/pages/buttons.mdx` file.
+
+You can import your component library or create your own and document it easily.
+
+
+### `.component-preview` utility
+
+There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
+
+<div class="component-preview">
+    <button class="text-white bg-blue-lightest px-4 py-2 rounded-md">Your component</button>
+</div>
+
+
+### Have fun!
+
+Spoko Design System template was made in Poland by **[@spoko.space](https://spoko.space)** for personal and commercial use.

package/astro.config.mjs

@@ -1,87 +1,85 @@
-import { defineConfig, sharpImageService } from "astro/config";
-import { iconConfig } from './icon.config';
-import vue from "@astrojs/vue";
-import mdx from '@astrojs/mdx';
-import UnoCSS from '@unocss/astro';
-import astroI18next from "astro-i18next";
-import icon from "astro-icon";
-import sitemap from "@astrojs/sitemap";
-import pagefind from "astro-pagefind";
-import AstroPWA from '@vite-pwa/astro';
-import metaTags from "astro-meta-tags";
-
-import { createSdsConfig } from './uno-config';
-
-const unoConfig = createSdsConfig();
-
-// https://astro.build/config
-export default defineConfig({
-  site: "https://sds.spoko.space/",
-  server: {
-    port: 1234
-  },
-  image: {
-    service: sharpImageService(),
-    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "freepik.com", "img.freepik.com", "polo6r.pl"]
-  },
-  integrations: [
-    // Enable Vue to support Vue3 components
-    vue(), 
-    mdx(), 
-    astroI18next(), 
-    AstroPWA({
-      mode: 'production',
-      base: '/',
-      scope: '/',
-      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
-      registerType: 'autoUpdate',
-      manifest: {
-        name: 'Spoko Design System',
-        short_name: 'SDS',
-        description: 'SDS PWA app description',
-        categories: ['multimedia'],
-        screenshots: [{
-          "src": "pwa-512x512.png",
-          "sizes": "512x512",
-          "platform": "windows",
-          "label": "SDS"
-        }],
-        theme_color: '#001e50',
-        icons: [{
-          src: 'pwa-192x192.png',
-          sizes: '192x192',
-          type: 'image/png'
-        }, {
-          src: 'pwa-512x512.png',
-          sizes: '512x512',
-          type: 'image/png'
-        }, {
-          src: 'pwa-512x512.png',
-          sizes: '512x512',
-          type: 'image/png',
-          purpose: 'any maskable'
-        }]
-      },
-      workbox: {
-        navigateFallback: '/',
-        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
-      },
-      devOptions: {
-        enabled: false,
-        navigateFallbackAllowlist: [/^\//]
-      },
-      experimental: {
-        directoryAndTrailingSlashHandler: true
-      }
-    }), 
-    UnoCSS({
-      injectReset: true,
-      ...unoConfig
-    }),
-    icon(iconConfig), 
-    metaTags(),
-    (await import("@playform/inline")).default(),
-    pagefind(), 
-    sitemap()
-  ]
+import { defineConfig, sharpImageService } from "astro/config";
+import { iconConfig } from './icon.config';
+import vue from "@astrojs/vue";
+import mdx from '@astrojs/mdx';
+import UnoCSS from '@unocss/astro';
+import icon from "astro-icon";
+import sitemap from "@astrojs/sitemap";
+import pagefind from "astro-pagefind";
+import AstroPWA from '@vite-pwa/astro';
+import metaTags from "astro-meta-tags";
+
+import { createSdsConfig } from './uno-config';
+
+const unoConfig = createSdsConfig();
+
+// https://astro.build/config
+export default defineConfig({
+  site: "https://sds.spoko.space/",
+  server: {
+    port: 1234
+  },
+  image: {
+    service: sharpImageService(),
+    domains: ["placehold.co", "api.polo.blue", "polo.blue", "media.istockphoto.com", "freepik.com", "img.freepik.com", "polo6r.pl"]
+  },
+  integrations: [
+    // Enable Vue to support Vue3 components
+    vue(), 
+    mdx(), 
+    AstroPWA({
+      mode: 'production',
+      base: '/',
+      scope: '/',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg', 'brands/*.svg', 'fonts/*.woff2', 'fonts/*.svg', 'vw.svg', 'polo.blue.svg', 'spoko.space.svg'],
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Spoko Design System',
+        short_name: 'SDS',
+        description: 'SDS PWA app description',
+        categories: ['multimedia'],
+        screenshots: [{
+          "src": "pwa-512x512.png",
+          "sizes": "512x512",
+          "platform": "windows",
+          "label": "SDS"
+        }],
+        theme_color: '#001e50',
+        icons: [{
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }, {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable'
+        }]
+      },
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}']
+      },
+      devOptions: {
+        enabled: false,
+        navigateFallbackAllowlist: [/^\//]
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true
+      }
+    }), 
+    UnoCSS({
+      injectReset: true,
+      ...unoConfig
+    }),
+    icon(iconConfig), 
+    metaTags(),
+    (await import("@playform/inline")).default(),
+    pagefind(), 
+    sitemap()
+  ]
 });

package/dev-dist/sw.js

@@ -1,91 +1,91 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  let registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-c676b6d3'], (function (workbox) { 'use strict';
-
-  self.skipWaiting();
-  workbox.clientsClaim();
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "/",
-    "revision": "0.4grcq5f8bio"
-  }], {
-    "directoryIndex": "index.html"
-  });
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/"), {
-    allowlist: [/^\//]
-  }));
-
-}));
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-c676b6d3'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "/",
+    "revision": "0.4grcq5f8bio"
+  }], {
+    "directoryIndex": "index.html"
+  });
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/"), {
+    allowlist: [/^\//]
+  }));
+
+}));