spoko-design-system 0.9.6 → 1.0.1

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