spoko-design-system 0.0.1 → 0.0.2

package/src/components/PostHeader.astro

@@ -0,0 +1,104 @@
+---
+interface Props {
+  title: string;
+  image: string;
+  date?: string | null;
+  lang: string;
+
+  author: {
+    firstName: string;
+    name: string;
+  } | null;
+
+  categories: {
+    name: string;
+    uri: string;
+  }[];
+}
+
+const { image, title, categories, date, author } =
+  Astro.props;
+import CategoryLink from "./CategoryLink.astro";
+import Date from "./Date.astro";
+---
+
+<header
+  class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-900"
+>
+  <div class="heading flex flex-wrap">
+    <div
+      class="w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap"
+    >
+      <h1
+        class="font-textbold text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1"
+      >
+        {title}
+      </h1>
+      <CategoryLink categories={categories} />
+      <div class="order-3 flex items-center text-gray-1 00">
+        {
+          author && (
+            <span class="text-sm" title={author.firstName} data-pagefind-ignore>
+              {author.name}
+            </span>
+          )
+        }
+        {author && date && <span class="mx-1">-</span>}
+        {date && <Date date={date} />}
+      </div>
+    </div>
+  </div>
+  <div class="featured-image">
+    <img src={image} alt={title} />
+  </div>
+</header>
+
+<style lang="scss">
+  .post-header {
+    @apply flex relative items-center;
+    min-height: 19vw;
+  }
+
+  .heading {
+    @apply text-white relative flex items-center justify-center mt-auto w-full pt-11 z-[2];
+  }
+
+  .featured-image {
+    @apply absolute top-0 bottom-0 left-0 right-0 overflow-hidden w-full bg-gray-100 z-1;
+
+    &:before,
+    &:after {
+      @apply content-empty top-0 bottom-0 left-0 right-0 absolute;
+    }
+
+    &:before {
+      z-index: 5;
+      background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.95),
+        transparent 30%,
+        transparent 70%,
+        rgba(0, 0, 0, 0.95)
+      );
+      opacity: 0.5;
+    }
+
+    &:after {
+      background: radial-gradient(circle at 50% 85%, #00437a 0, #001e50 100%);
+      opacity: 0.8;
+    }
+
+    img {
+      @apply w-full h-full object-cover block max-w-full;
+    }
+  }
+</style>
+
+<style is:global>
+  .icon {
+    @apply text-lightBlue-400 mr-2;
+    width: 1em;
+    height: 1em;
+    fill: currentcolor;
+  }
+</style>

package/src/components/RightSidebar.astro

@@ -1,11 +1,15 @@
----
-import TableOfContents from './TableOfContents.astro';
-const { content } = Astro.props;
-const headers = content.astro?.headers || [];
----
-
-<nav aria-labelledby="grid-right">
-	<div class="px-8">
-		<TableOfContents headers={headers} />
-	</div>
-</nav>
+---
+import TableOfContents from './TableOfContents.astro';
+const { content } = Astro.props;
+const headers = content.astro?.headers || [];
+---
+
+<nav aria-labelledby="grid-right">
+	<div class="px-8">
+		<TableOfContents headers={headers} />
+		<pre>{JSON.stringify(content)}</pre>
+	</div>
+</nav>
+
+
+<!-- {"title":"Introduction","description":"Docs intro","file":"C:/www/2024/elements/src/pages/core/introduction.mdx","url":"/core/introduction"} -->

package/src/components/SlimBanner.vue

@@ -1,60 +1,60 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-  showCloseButton: {
-    type: Boolean,
-    default: true,
-    required: false,
-  },
-})
-const isShow = ref(true)
-const toggleVisibility = () => {
-  isShow.value = !isShow.value
-}
-</script>
-
-<template>
-  <div v-if="isShow" data-pagefind-ignore class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
-    <span class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
-    <span class="leading-none "><span data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
-      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
-    </span>
-
-    <button class="ml-3 text-white relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
-        <span class="close"></span>
-    </button>
-  </div>
-  <div v-else data-pagefind-ignore class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white 	 relative bg-black drop-shadow-md z-2 ">
-    <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3" data-text="TERRORIST"/> <span data-text="STATE" />
-    </div>
-    <button class="ml-3 text-red-600 relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
-        <span class="close"></span>
-    </button>
-  </div>
-</template>
-
-<style lang="scss">
-.close {
-  @apply absolute top-0 left-0 opacity-50	;
-}
-.close:hover {
-  @apply opacity-100;
-}
-.close:before, .close:after {
-  position: absolute;
-  left: 0.5rem;
-  content: ' ';
-  height: 1.25rem;
-  width: 2px;
-  background-color: #fff;
-}
-.close:before {
-  transform: rotate(45deg);
-}
-.close:after {
-  transform: rotate(-45deg);
-}
-
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  showCloseButton: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+})
+const isShow = ref(true)
+const toggleVisibility = () => {
+  isShow.value = !isShow.value
+}
+</script>
+
+<template>
+  <div v-if="isShow" data-pagefind-ignore class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
+    <span class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
+    <span class="leading-none "><span data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
+      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
+    </span>
+
+    <button class="ml-3 text-white relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
+        <span class="close"></span>
+    </button>
+  </div>
+  <div v-else data-pagefind-ignore class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white 	 relative bg-black drop-shadow-md z-2 ">
+    <div class="tracking-widest leading-none">
+      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3" data-text="TERRORIST"/> <span data-text="STATE" />
+    </div>
+    <button class="ml-3 text-red-600 relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
+        <span class="close"></span>
+    </button>
+  </div>
+</template>
+
+<style lang="scss">
+.close {
+  @apply absolute top-0 left-0 opacity-50	;
+}
+.close:hover {
+  @apply opacity-100;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 0.5rem;
+  content: ' ';
+  height: 1.25rem;
+  width: 2px;
+  background-color: #fff;
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}
+
 </style>

package/src/components/TableOfContents.astro

@@ -1,12 +1,12 @@
----
-	const { headers } = Astro.props;
----
-<ul class="flex flex-col gap-4 mt-24">
-	{ headers.map(({ slug, text }) => {
-		return (
-		<li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
-			#<a href={`#${slug}`}>{text}</a>
-		</li>
-		) 
-	}) }
+---
+	const { headers } = Astro.props;
+---
+<ul class="flex flex-col gap-4 mt-24">
+	{ headers.map(({ slug, text }) => {
+		return (
+		<li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
+			#<a href={`#${slug}`}>{text}</a>
+		</li>
+		) 
+	}) }
 </ul>

package/src/components/Translations.vue

@@ -0,0 +1,27 @@
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  lang: {
+    type: String
+  },
+  translations: {
+    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
+  }
+});
+</script>
+
+<template>
+  <div
+    data-pagefind-ignore
+    v-if="props.translations !== null && props.translations.uri">
+    <a aria-label="Change language"
+    type="button" 
+    :href="translations.uri" 
+    :title="translations.name ? translations.name : translations.title" 
+    :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
+  </div>
+</template>
+
+

package/src/components/flags/FlagPL.vue

@@ -1,3 +1,3 @@
-<template>
-      <span class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
+<template>
+      <span class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
 </template>

package/src/components/flags/FlagUA.vue

@@ -1,3 +1,3 @@
-<template>
-    <span class="flag-ua" />
+<template>
+    <span class="flag-ua" />
 </template>

package/src/components/layout/Header.astro

@@ -1,94 +1,75 @@
 ---
 const { class: className } = Astro.props;
-import { Icon } from 'astro-icon/components';
+import { Icon } from "astro-icon/components";
 
 const navItemsLeft = [
-	{
-		title: 'Components',
-		description: 'The building blocks for our UI.',
-		url: '/components/buttons',
-		img: '/Components.jpg'
-	},
-	{
-		title: 'Patterns',
-		description: 'Common patterns for building interfaces.',
-		url: '/patterns/introduction',
-		img: '/Patterns.jpg'
-	} 
-]
-
-
-// const navItemsRight = [
-// 	{
-// 		title: 'Components',
-// 		description: 'The building blocks for our UI.',
-// 		url: '/components/buttons',
-//     icon: 'carbon:language'
-// 	},
-// 	{
-// 		title: 'Patterns',
-// 		description: 'Common patterns for building interfaces.',
-// 		url: '/patterns/introduction',
-//     icon: 'carbon:language'
-// 	} 
-// ]
-
+  {
+    title: "Components",
+    description: "The building blocks for our UI.",
+    url: "/components/buttons",
+    img: "/Components.jpg",
+  },
+  {
+    title: "Patterns",
+    description: "Common patterns for building interfaces.",
+    url: "/patterns/introduction",
+    img: "/Patterns.jpg",
+  },
+];
 ---
 
 <nav
   itemscope
   itemtype="http://schema.org/WPHeader"
-  class:list={[className, "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0"]}
+  class:list={[
+    className,
+    "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0",
+  ]}
 >
+  <div class="flex items-center justify-start sm:items-stretch order-1">
+    <slot name="logo" />
 
-    <div class="flex items-center justify-start sm:items-stretch order-1">
-      <slot name="logo"/>
-      
-      <div class="hidden sm:block sm:ml-6">
-        <div class="flex space-x-4" itemprop="hasPart">
-          { navItemsLeft.map(({ title, description, url, img }) => (
-            <a href={url}
+    <div class="hidden sm:block sm:ml-6">
+      <div class="flex space-x-4" itemprop="hasPart">
+        {
+          navItemsLeft.map(({ title, description, url, img }) => (
+            <a
+              href={url}
               class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
               title={description}
               itemprop="url"
             >
               {title}
             </a>
-          ))}
-        </div>
+          ))
+        }
       </div>
     </div>
+  </div>
 
-    <div
-      class="relative md:block sm:ml-4 w-full sm:w-64 sm:mr-auto order-4 sm:order-2 h-10">
-        <slot name="search"/>
-    </div>
+  <div
+    class="relative md:block sm:ml-4 w-full sm:w-64 sm:mr-auto order-4 sm:order-2 h-10"
+  >
+    <slot name="search" />
+  </div>
 
-    <div class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 sm:order-3 w-20 justify-end"
-      itemprop="hasPart" itemscope itemtype="http://schema.org/SiteNavigationElement"
+  <div
+    class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 sm:order-3 w-20 justify-end"
+    itemprop="hasPart"
+    itemscope
+    itemtype="http://schema.org/SiteNavigationElement"
+  >
+    <a
+      class="icon-btn mx-2"
+      title=""
+      aria-label=""
+      href="#"
+      itemprop="url"
+      data-astro-reload
     >
-      <!-- <a class="icon-btn mx-2"
-        title="s"
-        data-astro-reload
-        aria-label="asd"
-        href="#asd"
-        itemprop="url"
-      >
-        asd
-      </a> -->
-
-      
-      <a class="icon-btn mx-2" 
-        title=""
-        aria-label=""
-        href="#"
-        itemprop="url"
-        data-astro-reload
-      >
-        <Icon name="carbon:language" />
-      </a>
-
-    </div>
+      <Icon name="carbon:language" />
+    </a>
+  </div>
 </nav>
 
 <style lang="scss" is:global>

package/src/config.ts

@@ -1,42 +1,47 @@
-export const SITE = {
-  title: "Spoko Design System",
-  description: "Astro theme to build your design system fast.",
-  defaultLanguage: "en_US",
-  twitter: "@spokospace",
-  github: "spokospace",
-  linkedin: "szymonberski",
-};
-
-export const OPEN_GRAPH = {
-  image: {
-    src: "",
-    alt: "",
-  },
-  twitter: "",
-};
-
-export const SIDEBAR = [
-  { text: "Core", header: true },
-  { text: "Introduction", link: "/core/introduction" },
-  { text: "Colors", link: "/core/colors" },
-  { text: "Typography", link: "/core/typography" },
-  { text: "Shadows", link: "/core/shadows" },
-
-  { text: "Components", header: true },
-  { text: "Jumbatron", link: "/components/jumbatron" },
-  { text: "SlimBanner", link: "/components/slimbanner" },
-  { text: "FuckRussia", link: "/components/fuck-russia" },
-  { text: "Flags", link: "/components/flags" },
-  { text: "HandDrive", link: "/components/hand-drive" },
-  { text: "Badges", link: "/components/badges" },
-  { text: "Buttons", link: "/components/buttons" },
-  { text: "Copyright", link: "/components/copyright" },
-  { text: "Input", link: "/components/input" },
-  { text: "Status pills", link: "/components/status-pill" },
-  { text: "Table", link: "/components/table" },
-  { text: "Icons", link: "/components/icons" },
-  { text: "Breadcrumbs", link: "/components/breadcrumbs" },
-
-  { text: "Patterns", header: true },
-  { text: "Introduction", link: "/patterns/introduction" },
-];
+export const SITE = {
+  title: "Spoko Design System",
+  description: "The Astro design system which facilitates the development of websites.",
+  defaultLanguage: "en_US",
+  twitter: "@spokospace",
+  github: "spokospace",
+  linkedin: "szymonberski",
+};
+
+export const OPEN_GRAPH = {
+  image: {
+    src: "",
+    alt: "",
+  },
+  twitter: "",
+};
+
+export const SIDEBAR = [
+  { text: "Core", header: true },
+  { text: "Introduction", link: "/core/introduction" },
+  { text: "Colors", link: "/core/colors" },
+  { text: "Typography", link: "/core/typography" },
+  { text: "Shadows", link: "/core/shadows" },
+
+  { text: "Components", header: true },
+  { text: "Badges", link: "/components/badges" },
+  { text: "Breadcrumbs", link: "/components/breadcrumbs" },
+  { text: "Buttons", link: "/components/buttons" },
+  { text: "Copyright", link: "/components/copyright" },
+  { text: "HandDrive", link: "/components/hand-drive" },
+  { text: "Headline", link: "/components/headline" },
+  { text: "Icons", link: "/components/icons" },
+  { text: "Input", link: "/components/input" },
+  { text: "Jumbatron", link: "/components/jumbatron" },
+  { text: "Modal", link: "/components/modal" },
+  { text: "PostHeader", link: "/components/post-header" },
+  { text: "Table", link: "/components/table" },
+
+
+  { text: "Extras", header: true },
+  { text: "Flags", link: "/components/flags" },
+  { text: "SlimBanner", link: "/components/slimbanner" },
+  { text: "FuckRussia", link: "/components/fuck-russia" },
+
+  { text: "Patterns", header: true },
+  { text: "Introduction", link: "/patterns/introduction" },
+];