spoko-design-system 0.0.1 → 0.0.2

package/src/pages/components/jumbatron.mdx

@@ -1,48 +1,48 @@
----
-title: "Jumbatron"
-layout: "../../layouts/MainLayout.astro"
----
-import Jumbatron from '../../components/Jumbatron.vue'
-
-## Jumbatron
-
-This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
-
-Find the code for this page in the `src/pages/components/buttons.md` file.
-<div class="component-preview">
-    <Jumbatron class="w-full">
-        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
-        <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="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-
-
-        <a slot="cta"
-          href="/about/"
-          title="short text"
-          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
-        >
-         Read More
-        </a>
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron>
-        <span slot="intro" set:html="text-intro" />
-        <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="subtitle"
-        />
-
-
-        <a slot="cta"
-          href="/about/"
-          title="short text"
-          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
-        >
-         Read More
-        </a>
-    </Jumbatron>
-```
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbatron from '../../components/Jumbatron.vue'
+
+## Jumbatron
+
+This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
+
+Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
+<div class="component-preview">
+    <Jumbatron class="w-full">
+        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
+        <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="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+
+
+        <a slot="cta"
+          href="/about/"
+          title="short text"
+          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
+        >
+         Read More
+        </a>
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron>
+        <span slot="intro" set:html="text-intro" />
+        <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="subtitle"
+        />
+
+
+        <a slot="cta"
+          href="/about/"
+          title="short text"
+          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
+        >
+         Read More
+        </a>
+    </Jumbatron>
+```

package/src/pages/components/modal.mdx

@@ -0,0 +1,58 @@
+---
+title: "Modal"
+layout: "../../layouts/MainLayout.astro"
+---
+import Modal from '../../components/Modal.astro'
+import Button from '../../components/Button.vue'
+import { Icon } from 'astro-icon/components';
+
+
+## Modal
+
+### Modal (native) based on dialog tag.
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+
+
+<div class="component-preview">
+     <Modal id="dialog" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+               <hr />
+          </main>
+          <Button primary slot="close" class="mt-4">Close</Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <hr />
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+    <Button primary slot="close" class="mt-4">Close</Button>
+</Modal>
+```
+
+### Modal with different close button
+
+<div class="component-preview">
+     <Modal id="dialog2" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+          </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog2" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+</Modal>
+```
+
+

package/src/pages/components/post-header.mdx

@@ -0,0 +1,36 @@
+---
+title: "PostHeader"
+layout: "../../layouts/MainLayout.astro"
+---
+import PostHeader from '../../components/PostHeader.astro'
+export const author = { firstName: 'Szymon', name: 'CNK' } 
+export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
+export const date = "2023-07-13T01:35:03"
+
+## PostHeader
+
+WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
+
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      author={author}
+      categories={categories}
+      title="Lorem Ipsum"
+      date={date}
+      image="https://placehold.co/2000x700/EEE/31343C"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      author={ { firstName: 'Szymon', name: 'CNK' }  }
+      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
+      date="2023-07-13T01:35:03"
+      image="https://placehold.co/2000x700/EEE/31343C"
+    />
+  </div>
+```

package/src/pages/components/slimbanner.mdx

@@ -1,27 +1,29 @@
----
-title: "SlimBanner"
-layout: "../../layouts/MainLayout.astro"
----
-import SlimBanner from '../../components/SlimBanner.vue'
-
-## SlimBanner
-
-SlimBanner - solidarity with Ukraine.
-
-<div class="component-preview">
-      <SlimBanner
-        client:load
-        showCloseButton
-        transition:name="slim-banner"
-        transition:persist
-      />
-</div>
-
-```js
-      <SlimBanner
-        client:load
-        showCloseButton
-        transition:name="slim-banner"
-        transition:persist
-      />
-```
+---
+title: "SlimBanner"
+layout: "../../layouts/MainLayout.astro"
+---
+import SlimBanner from '../../components/SlimBanner.vue'
+
+## SlimBanner
+
+SlimBanner - solidarity with Ukraine.
+
+<div class="component-preview">
+      <SlimBanner
+        class="w-full"
+        client:load
+        showCloseButton
+        transition:name="slim-banner"
+        transition:persist
+      />
+</div>
+
+```js
+<SlimBanner
+  class="w-full"
+  client:load
+  showCloseButton
+  transition:name="slim-banner"
+  transition:persist
+/>
+```

package/src/pages/components/table.mdx

@@ -1,20 +1,20 @@
----
-title: "Table"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import MainTable from '../../components/MainTable.vue'
-
-
-## Primary table
-
-<div class="component-preview">
-    <MainTable></MainTable>
-</div>
-
-### Code
-
-```ts
-<MainTable :data="data"></MainTable>
-```
+---
+title: "Table"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import MainTable from '../../components/MainTable.vue'
+
+
+## Primary table
+
+<div class="component-preview">
+    <MainTable></MainTable>
+</div>
+
+### Code
+
+```ts
+<MainTable :data="data"></MainTable>
+```

package/src/pages/core/colors.mdx

@@ -1,8 +1,8 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import MainColors from '../../components/MainColors.vue';
-
-<h1>Colors</h1>
-<MainColors />
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import MainColors from '../../components/MainColors.vue';
+
+<h1>Colors</h1>
+<MainColors />

package/src/pages/core/introduction.mdx

@@ -1,68 +1,74 @@
----
-title: Introduction
-description: Docs intro
-layout: ../../layouts/MainLayout.astro
----
-
-# Spoko Design System Theme
-
-Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
-
-## 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.md`. 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 `src/config/design.config.ts`.
-
-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.scss`.
-
-### 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/en/buttons.md` 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-500 px-4 py-2 rounded-md">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
+---
+
+# 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 is still in the development phase, use at your own risk ;-)
+
+The project is 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.md`. 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 `src/design.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.scss`.
+
+### 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 class="text-white bg-blue-500 px-4 py-2 rounded-md">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,47 +1,47 @@
----
-    import MainLayout from '../../layouts/MainLayout.astro'
-    import { TYPOGRAPHY } from '../../design.config'
-    import { FONTS } from '../../design.config'
-    const getStyle = (item) => {
-        return `font-size: ${item.size}; font-weight: ${item.weight};`
-    }
----
-
-<MainLayout>
-    <h1>Typography</h1>
-    <div class="w-full">
-    {
-        TYPOGRAPHY.scale.map((item) => (
-            <div class="mt-6 border-t py-4">
-                <p style={getStyle(item)}>Hello world</p>
-                <div class="flex gap-6 text-slate-500 font-mono">
-                    <span>{item.name}</span>
-                    <span>weight: {item.weight}</span>
-                    <span>size: {item.size}</span>
-                </div>
-            </div>
-        ))
-    }
-    </div>
-
-
-
-    <h1>Fonts</h1>
-    <div class="component-preview ">
-        <div class="flex flex-wrap gap-16">
-        {FONTS.types.map(({name, value}) => (
-            <div class="w-full">
-                <div class={`${value} text-3xl`} >Lorem Ipsum</div>
-                <div class="">{name}</div>    
-            </div>
-        ))}
-        </div>
-    </div>
-
-    <pre class="astro-code bg-slate-800 text-white">
-    {FONTS.types.map(({name, value}) => (
-            <div class="my-5">{`${name}:`}<br><pre>{value}</pre></div>
-        ))}
-    </pre>
-
+---
+    import MainLayout from '../../layouts/MainLayout.astro'
+    import { TYPOGRAPHY } from '../../design.config'
+    import { FONTS } from '../../design.config'
+    const getStyle = (item) => {
+        return `font-size: ${item.size}; font-weight: ${item.weight};`
+    }
+---
+
+<MainLayout>
+    <h1>Typography</h1>
+    <div class="w-full">
+    {
+        TYPOGRAPHY.scale.map((item) => (
+            <div class="mt-6 border-t py-4">
+                <p style={getStyle(item)}>Hello world</p>
+                <div class="flex gap-6 text-slate-500 font-mono">
+                    <span>{item.name}</span>
+                    <span>weight: {item.weight}</span>
+                    <span>size: {item.size}</span>
+                </div>
+            </div>
+        ))
+    }
+    </div>
+    <div class="font-novamono"></div>
+
+
+    <h1>Fonts</h1>
+    <div class="component-preview ">
+        <div class="flex flex-wrap gap-16">
+        {FONTS.types.map(({name, value}) => (
+            <div class="w-full">
+                <div class={`${value} text-3xl`} >Lorem Ipsum</div>
+                <div class="">{name}</div>    
+            </div>
+        ))}
+        </div>
+    </div>
+
+    <pre class="astro-code bg-slate-800 text-white">
+    {FONTS.types.map(({name, value}) => (
+            <div class="my-5">{`${name}:`}<br><pre>{value}</pre></div>
+        ))}
+    </pre>
+
 </MainLayout>