spoko-design-system 0.0.1 → 0.0.5

package/src/components/HeadCommon.astro

@@ -1,40 +1,40 @@
----
-
----
-
-<!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
-
-<link rel="sitemap" href="/sitemap.xml" />
-
-<!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
-
-<!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
-
-<!-- This is intentionally inlined to avoid FOUC -->
-<script is:inline>
-	// const root = document.documentElement;
-	// const theme = localStorage.getItem('theme');
-	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-	// 	root.classList.add('dark');
-	// } else {
-	// 	root.classList.remove('dark');
-	// }
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', '');
-</script> -->
+---
+
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
+<link rel="sitemap" href="/sitemap.xml" />
+
+<!-- Preload Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
+
+<!-- Scrollable a11y code helper -->
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
+
+<!-- This is intentionally inlined to avoid FOUC -->
+<script is:inline>
+	// const root = document.documentElement;
+	// const theme = localStorage.getItem('theme');
+	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+	// 	root.classList.add('dark');
+	// } else {
+	// 	root.classList.remove('dark');
+	// }
+</script>
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=" is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '');
+</script> -->

package/src/components/HeadSEO.astro

@@ -1,41 +1,41 @@
----
-import { SITE, OPEN_GRAPH } from '../config';
-export interface Props {
-	content: any;
-	site: any;
-	canonicalURL: URL | string;
-}
-const { content = {}, canonicalURL } = Astro.props;
-const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
-// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
-// const canonicalImageSrc = new URL(imageSrc, Astro.site);
-const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
----
-
-<!-- Page Metadata -->
-<link rel="canonical" href={canonicalURL} />
-
-<!-- OpenGraph Tags -->
-<meta property="og:title" content={formattedContentTitle} />
-<meta property="og:type" content="article" />
-<meta property="og:url" content={canonicalURL} />
-<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
-<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
-<meta property="og:image:alt" content={imageAlt} />
-<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
-<meta property="og:site_name" content={SITE.title} />
-
-<!-- Twitter Tags -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
-<meta name="twitter:title" content={formattedContentTitle} />
-<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
-<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
-<meta name="twitter:image:alt" content={imageAlt} />
-
-<!--
-  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
-  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
-  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
-  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
--->
+---
+import { SITE, OPEN_GRAPH } from '../config';
+export interface Props {
+	content: any;
+	site: any;
+	canonicalURL: URL | string;
+}
+const { content = {}, canonicalURL } = Astro.props;
+const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
+// const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
+// const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
+---
+
+<!-- Page Metadata -->
+<link rel="canonical" href={canonicalURL} />
+
+<!-- OpenGraph Tags -->
+<meta property="og:title" content={formattedContentTitle} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
+<!-- <meta property="og:image" content={canonicalImageSrc} /> -->
+<meta property="og:image:alt" content={imageAlt} />
+<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
+<meta property="og:site_name" content={SITE.title} />
+
+<!-- Twitter Tags -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content={OPEN_GRAPH.twitter} />
+<meta name="twitter:title" content={formattedContentTitle} />
+<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
+<!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
+<meta name="twitter:image:alt" content={imageAlt} />
+
+<!--
+  TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense?
+  Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data
+  https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
+  Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
+-->

package/src/components/Header/AstroLogo.astro

@@ -1,27 +1,7 @@
----
-const { size } = Astro.props;
----
-
-<svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<style>
-		#flame {
-			fill: var(--theme-text-accent);
-		}
-		#a {
-			fill: var(--theme-text-accent);
-		}
-	</style>
-	<title>Logo</title>
-	<path
-		id="a"
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
-	></path>
-	<path
-		id="flame"
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
-	></path>
-</svg>
+---
+import { Icon } from "astro-icon/components";
+
+const { size } = Astro.props;
+---
+
+<Icon name="noto-v1:letter-s" />

package/src/components/Header/Header.astro

@@ -1,48 +1,44 @@
----
-import { SITE } from '../../config';
-import SkipToContent from './SkipToContent.astro';
-
-const { currentPage } = Astro.props;
----
-
-<header class="p-3 bg-slate-100 bg-opacity-80 backdrop-blur-md border-b text-slate-900">
-	<SkipToContent />
-	<nav title="Top Navigation" class="max-w-7xl mx-auto flex justify-between items-center px-4">
-		<div>
-			<a class="text-lg font-medium" href="/">
-				<h1>
-					{SITE.title ?? "Documentation"}
-				</h1>
-			</a>
-		</div>
-		<div class="flex gap-2">
-		
-		<!-- <button onclick="toggleDarkMode()">theme</button> -->
-		{ SITE.twitter &&
-			(<a title="Twitter" class="opacity-90 hover:opacity-100 hover:bg-blue-100 p-2 rounded-full transition-colors" href={'https://twitter.com/'+SITE.twitter}>
-				<img class="h-7" src="/twitter.svg" alt="twitter logo">
-			</a>)
-		}
-		{
-			SITE.github &&
-			(<a title="Github" class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors" href={'https://github.com/'+SITE.github}>
-				<img class="h-7" src="/github.svg" alt="github logo">
-			</a>)
-		}
-		{
-			SITE.linkedin &&
-			(<a title="linkedin" class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors" href={'https://linkedin.com/in/'+SITE.linkedin}>
-				<img class="h-7" src="/linkedin.svg" alt="linkedin logo">
-			</a>)
-		}
-		</div>
-	</nav>
-</header>
-
-<script is:inline>
-	// function toggleDarkMode() {
-	// 	const body = document.body;
-	// 	body.classList.toggle('dark');
-	// 	console.log('dark mode toggled');
-	// }
-</script>
+---
+import { SITE } from "../../config";
+import SkipToContent from "./SkipToContent.astro";
+import { MenuIcon } from "astro-navbar";
+---
+
+<header
+  class="p-3 bg-blue-600 bg-opacity-10 backdrop-blur-md border-b text-slate-900"
+>
+  <SkipToContent />
+  <nav
+    title="Top Navigation"
+    class="mx-auto flex justify-between items-center px-4"
+  >
+    <div class="flex flex-nowrap">
+      <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
+      <a class="text-2xl font-medium block font-textbold" href="/"> SDS</a>
+    </div>
+    <div class="flex gap-2">
+      {
+        SITE.github && (
+          <a
+            title="Github"
+            class="opacity-80 hover:opacity-100 hover:bg-slate-200 p-2 rounded-full transition-colors"
+            href={"https://github.com/" + SITE.github}
+          >
+            <img class="h-7" src="/github.svg" alt="github logo" />
+          </a>
+        )
+      }
+      {
+        SITE.linkedin && (
+          <a
+            title="linkedin"
+            class="opacity-80 hover:opacity-100 hover:bg-blue-50 p-2 rounded-full transition-colors"
+            href={"https://linkedin.com/in/" + SITE.linkedin}
+          >
+            <img class="h-7" src="/linkedin.svg" alt="linkedin logo" />
+          </a>
+        )
+      }
+    </div>
+  </nav>
+</header>

package/src/components/Header/SkipToContent.astro

@@ -1 +1 @@
-    <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>
+    <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a>

package/src/components/Headline.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: null,
+    required: true,
+  },
+  textSize: {
+    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
+    required: false,
+    default: null
+  },
+  underline: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+</script>
+
+<template>
+  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
+    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
+    <!-- default -->
+    <slot />
+
+  </component>
+</template>
+
+<style lang="scss">
+
+.headline--underline {
+  @apply relative pb-4;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 3px;
+    width: 55px;
+    background-color: var(--primary);
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 1px;
+    height: 1px;
+    width: 95%;
+    max-width: 255px;
+    background-color: #64748b
+  }
+}
+</style>

package/src/components/Image.astro

@@ -0,0 +1,30 @@
+---
+import { Image } from 'astro:assets'
+
+const { imageObject } = Astro.props;
+
+let inputProps = {};
+
+
+if (imageObject.index && imageObject.index === 1) {
+  inputProps['data-pagefind-meta'] = 'image[src], image_alt[alt]';
+  inputProps['loading'] = 'eager'
+}
+
+if (imageObject.srcset && imageObject.srcset.length) {
+  inputProps['widths'] = imageObject.srcset
+}
+
+---
+<Image 
+    src={imageObject.src}
+    alt={imageObject.alt}
+    height={imageObject.height} 
+    width={imageObject.width}
+    itemprop="image"
+    format="avif"
+    data-pagefind-index-attrs="alt"
+    onerror="this.style.display='none';"
+    class={`h-full w-full select-none pointer-none ${imageObject.class || 'object-cover'}`}
+    { ...inputProps}
+/>

package/src/components/Jumbatron.vue

@@ -1,31 +1,46 @@
-<template>
-    <div class="relative bg-vw md:min-h-md">
-      <div class="max-w-7xl mx-auto">
-        <div
-          class=" pb-8  sm:pb-16 md:pb-20 lg:w-full lg:pb-28 xl:pb-32"
-        >
-          <header
-            class="mx-auto max-w-7xl px-4 sm:pt-12 sm:px-6 md:pt-16 lg:pt-20 lg:px-8 xl:pt-28"
-          >
-            <div class="text-center">
-              <h1
-                class="text-2xl pt-6 sm:pt-0 sm:text-5xl md:text-6xl tracking-tight font-headlight text-white"
-              >
-                <slot name="intro" />
-              <!-- <span v-html="t('home.intro')"></span> -->
-                <!-- <small class="block text-2xl">aaa</small> -->
-              </h1>
-              <slot name="subtitle" />
-              <div
-                class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-              >
-                <div>
-                  <slot name="cta" />
-                </div>
-              </div>
-            </div>
-          </header>
-        </div>
-      </div>
-    </div>
-  </template>
+<script setup lang="ts">
+import { useSlots } from 'vue';
+
+  const slots = useSlots()
+  const hasSlot = (name) => {
+    return !!slots[name];
+  }
+    const props = defineProps({
+      small: {
+        type: Boolean,
+        default: null,
+        required: false,
+      },
+    })
+</script>
+
+
+<template>
+  <div class="relative flex bg-vw " :class="props.small ? 'md:min-h-xs' : 'md:min-h-md' ">
+    <div class="max-w-7xl mx-auto my-auto">
+      <div class="py-8 lg:w-full" :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32' ">
+        <header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <!-- sm:pt-12  md:pt-16 lg:pt-20 xl:pt-28 -->
+          <div class="text-center">
+            <h1 class="text-3xl  tracking-tight sm:(text-4xl pt-0) md:text-5xl lg:text-6xl  font-headlight text-white">
+              <slot name="intro" />
+            </h1>
+            <slot name="subtitle" />
+            <div class="mt-5 sm:mt-8 sm:flex sm:justify-center" v-if="hasSlot('cta')">
+              <div>
+                <slot name="cta" />
+              </div>
+            </div>
+          </div>
+        </header>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.bg-vw {
+  background: radial-gradient(
+      circle at 50% 85%,
+      #00437A 0%,
+      #001E50 100%
+  )}
+</style>

package/src/components/LeftSidebar.astro

@@ -1,44 +1,45 @@
----
-import { SIDEBAR } from '../config';
-const { currentPage } = Astro.props;
-const currentPageMatch = currentPage.slice(1);
-
-const isCurrentPage = (item) => {
-	if (item.link) {
-		return item.link.includes(currentPageMatch);
-	}
-	return false;
-};
-
-const getLinkClasses = (link) => {
-	const baseClasses = "block py-2 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900"
-
-	if (isCurrentPage(link)) {
-		return baseClasses + " border-slate-500 text-slate-900";
-	} else {
-		return baseClasses;
-	}
-}
----
-<aside title="Site Navigation">
-	<!-- <Debug content={navigation} /> -->
-	<nav aria-labelledby="grid-left" class="w-64 p-4 border-r">
-		<ul>
-			{SIDEBAR.map(item => (item.header ? 
-				<h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2> : 
-				<li class={getLinkClasses(item)}>
-					<a href={item.link}>{item.text}</a>
-				</li>))}
-		</ul>
-	</nav>
-</aside>
-
-<script is:inline>
-	window.addEventListener('DOMContentLoaded', (event) => {
-		var target = document.querySelector('[aria-current="page"]');
-		if (target && target.offsetTop > window.innerHeight - 100) {
-			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
-		}
-	});
-</script>
-
+---
+import { SIDEBAR } from '../config';
+import { Astronav, MenuItems} from "astro-navbar";
+const { currentPage } = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+
+const isCurrentPage = (item) => {
+	if (item.link) {
+		return item.link.includes(currentPageMatch);
+	}
+	return false;
+};
+
+const getLinkClasses = (link) => {
+	const baseClasses = "block py-1.5 px-6  my-1 transition-colors border-l hover:border-slate-400 text-slate-500 hover:text-slate-900"
+
+	if (isCurrentPage(link)) {
+		return baseClasses + " border-slate-500 text-slate-900";
+	} else {
+		return baseClasses;
+	}
+}
+---
+<Astronav>
+	<MenuItems class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative  bg-blue-500 bg-opacity-5 flex)">
+		<ul class="mt-0 mb-auto">
+			{SIDEBAR.map(item => (item.header ? 
+				<h2 class="mt-4 font-semibold text-slate-700">{item.text}</h2> : 
+				<li class={getLinkClasses(item)}>
+					<a href={item.link}>{item.text}</a>
+				</li>
+			))}
+		</ul>
+	</MenuItems>
+</Astronav>
+
+<script is:inline>
+	window.addEventListener('DOMContentLoaded', (event) => {
+		var target = document.querySelector('[aria-current="page"]');
+		if (target && target.offsetTop > window.innerHeight - 100) {
+			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+		}
+	});
+</script>
+

package/src/components/MainColors.vue

@@ -1,29 +1,29 @@
-<template>
-  <div class="flex flex-col space-y-12">
-    <div v-for="name in colorNames" :key="name">
-      <h3 class="capitalize">{{ name }}</h3>
-      <div class="grid grid-cols-5 md:grid-cols-10">
-        <div v-for="color in COLORS[name]" :key="color">
-          <div
-            class="h-12 transition-all"
-            :style="`background: ${color.value}`"
-          ></div>
-          <div
-            class="text-sm flex flex-col text-center font-mono text-slate-500"
-          >
-            <span>{{ color.name }}</span>
-            <span class="uppercase text-xs">{{ color.value }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { COLORS } from "../design.config";
-
-const colorNames = Object.keys(COLORS);
-</script>
-
-<style scoped></style>
+<template>
+  <div class="flex flex-col space-y-12">
+    <div v-for="name in colorNames" :key="name">
+      <h3 class="capitalize">{{ name }}</h3>
+      <div class="grid grid-cols-3 md:grid-cols-9">
+        <div v-for="color in COLORS[name]" :key="color" class="mb-6">
+          <div
+            class="h-12 transition-all"
+            :style="`background: ${color.value}`"
+          ></div>
+          <div
+            class="text-sm flex flex-col text-center font-mono text-slate-500"
+          >
+            <span>{{ color.name }}</span>
+            <span class="uppercase text-xs">{{ color.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { COLORS } from "../design.config";
+
+const colorNames = Object.keys(COLORS);
+</script>
+
+<style scoped></style>