spoko-design-system 0.8.2 → 0.8.3

package/src/pages/core/introduction.mdx

@@ -1,77 +1,77 @@
----
-title: Introduction
-description: Docs intro
-layout: ../../layouts/MainLayout.astro
----
-import Button from '../../components/Button.vue'
-
-# Spoko Design System Theme
-
-SDS is the easiest way to start with some my websites. 
-Since Astro is compatible with many frameworks, we can import components and document them right in the markdown files.
-
-The project was inspired by the Astroship starter and Astro Design System Theme (the latter is currently not developed, nor is it responsive, but the nice organization in the configuration files appealed to me a lot).
-
-It's still in the development phase, use at your own risk ;-)
-
-
-## Getting started
-
-### 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`.
-#
-
-Example:
-
-```js
-export const SIDEBAR = [
-    { text: "Core", header: true },
-    { text: "Introduction", link: "/core/introduction" },
-    ...,
-    { text: "Components", header: true },
-    { text: "Buttons", link: "/components/buttons" },
-    ...,
-    { 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`. 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 mew 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 `Button` 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 primary rounded>Your component</Button>
-</div>
-
-### Have fun!
-
-Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.
+---
+title: Introduction
+description: Docs intro
+layout: ../../layouts/MainLayout.astro
+---
+import Button from '../../components/Button.vue'
+
+# Spoko Design System Theme
+
+SDS is the easiest way to start with some my websites. 
+Since Astro is compatible with many frameworks, we can import components and document them right in the markdown files.
+
+The project was inspired by the Astroship starter and Astro Design System Theme (the latter is currently not developed, nor is it responsive, but the nice organization in the configuration files appealed to me a lot).
+
+It's still in the development phase, use at your own risk ;-)
+
+
+## Getting started
+
+### 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`.
+#
+
+Example:
+
+```js
+export const SIDEBAR = [
+    { text: "Core", header: true },
+    { text: "Introduction", link: "/core/introduction" },
+    ...,
+    { text: "Components", header: true },
+    { text: "Buttons", link: "/components/buttons" },
+    ...,
+    { 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`. 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 mew 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 `Button` 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 primary rounded>Your component</Button>
+</div>
+
+### Have fun!
+
+Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.

package/src/pages/core/shadows.astro

@@ -1,21 +1,21 @@
----
-import MainLayout from '../../layouts/MainLayout.astro';
-import { SHADOWS } from '../../design.config'
-
----
-
-<MainLayout>
-    <h1>Shadows</h1>
-    <div class="component-preview">
-        <div class="inline-grid grid-cols-2 gap-16">
-        {SHADOWS.types.map(({name, value}) => (
-            <div class="p-2 bg-white rounded-md text-slate-500 text-right pt-16 pl-24 font-mono" style={"box-shadow: " + value}>{name}</div>
-        ))}
-        </div>
-    </div>
-    <pre class="astro-code bg-slate-800 text-white">
-    {SHADOWS.types.map(({name, value}) => (
-            <div class="my-2">{`${name}: ${value}`}</div>
-        ))}
-    </pre>
+---
+import MainLayout from '../../layouts/MainLayout.astro';
+import { SHADOWS } from '../../design.config'
+
+---
+
+<MainLayout>
+    <h1>Shadows</h1>
+    <div class="component-preview">
+        <div class="inline-grid grid-cols-2 gap-16">
+        {SHADOWS.types.map(({name, value}) => (
+            <div class="p-2 bg-white rounded-md text-slate-500 text-right pt-16 pl-24 font-mono" style={"box-shadow: " + value}>{name}</div>
+        ))}
+        </div>
+    </div>
+    <pre class="astro-code bg-slate-800 text-white">
+    {SHADOWS.types.map(({name, value}) => (
+            <div class="my-2">{`${name}: ${value}`}</div>
+        ))}
+    </pre>
 </MainLayout>

package/src/pages/core/typography.astro

@@ -1,49 +1,49 @@
----
-import MainLayout from '../../layouts/MainLayout.astro'
-import { typography } from '../../../uno-config/theme/typography'
-
-const fonts = Object.entries(typography.fontFamily)
-const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing"
----
-
-<MainLayout>
-    <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-        <h1 class="text-4xl font-bold text-gray-900 mb-8">Font Family Preview</h1>
-        
-        <!-- Font Preview Cards -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-            {fonts.map(([name, family]) => (
-                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
-                    <!-- Font Sample -->
-                    <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
-                        {loremText}
-                    </div>
-                    
-                    <!-- Font Info -->
-                    <div class="border-t pt-4">
-                        <div class="flex items-center justify-between mb-2">
-                            <span class="text-lg font-medium text-gray-900">{name}</span>
-                            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">font-{name}</span>
-                        </div>
-                        <code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
-                            {family.join(', ')}
-                        </code>
-                    </div>
-                </div>
-            ))}
-        </div>
-
-        <!-- Font Configuration Code -->
-        <div class="bg-gray-900 rounded-lg overflow-hidden">
-            <div class="bg-gray-800 px-4 py-2 text-gray-400">
-                Font Configuration
-            </div>
-            <pre class="p-4 overflow-x-auto">
-                <code class="text-gray-200 text-sm">
-{fonts.map(([name, family]) => `font-${name}:\n${family.join(', ')}
-`).join('\n')}</code>
-            </pre>
-        </div>
-    </div>
-</MainLayout>
-
+---
+import MainLayout from '../../layouts/MainLayout.astro'
+import { typography } from '../../../uno-config/theme/typography'
+
+const fonts = Object.entries(typography.fontFamily)
+const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing"
+---
+
+<MainLayout>
+    <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+        <h1 class="text-4xl font-bold text-gray-900 mb-8">Font Family Preview</h1>
+        
+        <!-- Font Preview Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+            {fonts.map(([name, family]) => (
+                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
+                    <!-- Font Sample -->
+                    <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
+                        {loremText}
+                    </div>
+                    
+                    <!-- Font Info -->
+                    <div class="border-t pt-4">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-lg font-medium text-gray-900">{name}</span>
+                            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">font-{name}</span>
+                        </div>
+                        <code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
+                            {family.join(', ')}
+                        </code>
+                    </div>
+                </div>
+            ))}
+        </div>
+
+        <!-- Font Configuration Code -->
+        <div class="bg-gray-900 rounded-lg overflow-hidden">
+            <div class="bg-gray-800 px-4 py-2 text-gray-400">
+                Font Configuration
+            </div>
+            <pre class="p-4 overflow-x-auto">
+                <code class="text-gray-200 text-sm">
+{fonts.map(([name, family]) => `font-${name}:\n${family.join(', ')}
+`).join('\n')}</code>
+            </pre>
+        </div>
+    </div>
+</MainLayout>
+

package/src/pages/index.astro

@@ -1,134 +1,134 @@
----
-import { changeLanguage } from "i18next";
-import { Icon } from "astro-icon/components";
-import { SITE } from "../config";
-import Jumbotron from "../components/Jumbotron.astro";
-import Layout from "../layouts/Layout.astro";
-import Headline from "../components/Headline.vue";
-import Button from "../components/Button.vue";
-import Quote from "../components/Quote.vue";
-import FeaturesList from "../components/FeaturesList.vue";
-
-const navItems = [
-  {
-    title: "Core",
-    description: "Base colors, typography, shadows etc.",
-    url: "/core/introduction",
-    icon: "ant-design:cluster-outlined",
-  },
-  {
-    title: "Components",
-    description: "The building blocks for our UI.",
-    url: "/components/buttons",
-    icon: "ant-design:build-twotone",
-  },
-  {
-    title: "Patterns",
-    description: "Common patterns for building interfaces.",
-    url: "/patterns/introduction",
-    icon: "ant-design:audit-outlined",
-  },
-];
----
-
-<Layout>
-  <div class="bg-slate-100 min-h-screen text-center">
-    <Jumbotron title={SITE.title}>
-      <p
-        slot="subtitle"
-        class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-        set:html={SITE.description}
-      />
-
-      <Button
-        slot="cta-content"
-        href="/core/introduction/"
-        title="Spoko Design System"
-        primary
-        rounded
-      >
-        Read More
-      </Button>
-    </Jumbotron>
-    <nav>
-      <div
-        class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
-      >
-        {
-          navItems.map(({ title, description, url, icon }) => (
-            <a
-              href={url}
-              title={description}
-              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
-            >
-              <Headline as="h2" textSize="2xl" underline={false}>
-                <Icon
-                  name={icon}
-                  aria-hidden="true"
-                  class="text-blue-400 mr-2"
-                />
-                {title}
-              </Headline>
-              <p class="text-slate-500 w-full">{description}</p>
-            </a>
-          ))
-        }
-      </div>
-    </nav>
-    <div
-      class="mt-12 py-20 bg-blue-darker bg-vw text-white flex items-center justify-center relative"
-    >
-      <Quote>
-        <blockquote>
-          Well done is better than well said.
-          <small class="block font-headlight">- Benjamin Franklin</small>
-        </blockquote>
-      </Quote>
-    </div>
-
-    <div class="px-4 grid lg:grid-cols-2 gap-4 md:gap-10 max-w-5xl mx-auto text-center py-12 md:px-0">
-
-      <div>
-        <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
-        <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
-          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-accent-lightest">
-            <Icon name="mdi:npm"/>
-          </a>
-          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-accent-lightest">
-            <Icon name="mdi:github"/>
-          </a>
-        </div>
-      </div>
- 
-
-     <div>
-      <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
-      <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://catalog.polo.blue" class="example-link" target="_blank"> catalog.polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://polo.blue" class="example-link" target="_blank"> polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://spoko.space" class="example-link" target="_blank"> spoko.space</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://sale.polo.blue/" class="example-link" target="_blank">sale.polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://polo6r.pl" class="example-link" target="_blank">polo6r.pl</a>
-        </li>
-      </ul>
-     </div>
-
-
-    </div>
-  </div>
-  <script is:inline></script>
-</Layout>
-<style>
-  .example-link {
-    @apply transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white;
-  }
+---
+import { changeLanguage } from "i18next";
+import { Icon } from "astro-icon/components";
+import { SITE } from "../config";
+import Jumbotron from "../components/Jumbotron.astro";
+import Layout from "../layouts/Layout.astro";
+import Headline from "../components/Headline.vue";
+import Button from "../components/Button.vue";
+import Quote from "../components/Quote.vue";
+import FeaturesList from "../components/FeaturesList.vue";
+
+const navItems = [
+  {
+    title: "Core",
+    description: "Base colors, typography, shadows etc.",
+    url: "/core/introduction",
+    icon: "ant-design:cluster-outlined",
+  },
+  {
+    title: "Components",
+    description: "The building blocks for our UI.",
+    url: "/components/buttons",
+    icon: "ant-design:build-twotone",
+  },
+  {
+    title: "Patterns",
+    description: "Common patterns for building interfaces.",
+    url: "/patterns/introduction",
+    icon: "ant-design:audit-outlined",
+  },
+];
+---
+
+<Layout>
+  <div class="bg-slate-100 min-h-screen text-center">
+    <Jumbotron title={SITE.title}>
+      <p
+        slot="subtitle"
+        class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+        set:html={SITE.description}
+      />
+
+      <Button
+        slot="cta-content"
+        href="/core/introduction/"
+        title="Spoko Design System"
+        primary
+        rounded
+      >
+        Read More
+      </Button>
+    </Jumbotron>
+    <nav>
+      <div
+        class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
+      >
+        {
+          navItems.map(({ title, description, url, icon }) => (
+            <a
+              href={url}
+              title={description}
+              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
+            >
+              <Headline as="h2" textSize="2xl" underline={false}>
+                <Icon
+                  name={icon}
+                  aria-hidden="true"
+                  class="text-blue-400 mr-2"
+                />
+                {title}
+              </Headline>
+              <p class="text-slate-500 w-full">{description}</p>
+            </a>
+          ))
+        }
+      </div>
+    </nav>
+    <div
+      class="mt-12 py-20 bg-blue-darker bg-vw text-white flex items-center justify-center relative"
+    >
+      <Quote>
+        <blockquote>
+          Well done is better than well said.
+          <small class="block font-headlight">- Benjamin Franklin</small>
+        </blockquote>
+      </Quote>
+    </div>
+
+    <div class="px-4 grid lg:grid-cols-2 gap-4 md:gap-10 max-w-5xl mx-auto text-center py-12 md:px-0">
+
+      <div>
+        <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
+        <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
+          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-accent-light">
+            <Icon name="mdi:npm"/>
+          </a>
+          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-accent-light">
+            <Icon name="mdi:github"/>
+          </a>
+        </div>
+      </div>
+ 
+
+     <div>
+      <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
+      <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://catalog.polo.blue" class="example-link" target="_blank"> catalog.polo.blue</a>
+        </li>
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://polo.blue" class="example-link" target="_blank"> polo.blue</a>
+        </li>
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://spoko.space" class="example-link" target="_blank"> spoko.space</a>
+        </li>
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://sale.polo.blue/" class="example-link" target="_blank">sale.polo.blue</a>
+        </li>
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://polo6r.pl" class="example-link" target="_blank">polo6r.pl</a>
+        </li>
+      </ul>
+     </div>
+
+
+    </div>
+  </div>
+  <script is:inline></script>
+</Layout>
+<style>
+  .example-link {
+    @apply transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white;
+  }
 </style>