feat: docs UI improvements

Author: andrew-boyd

packages/docs/assets/css/main.css

@@ -0,0 +1,28 @@
+:root {
+  /* Primary accent color - define both the color and RGB values separately for opacity control */
+  --color-accent: #3b82f6; /* blue-500 */
+  --color-accent-rgb: 59, 130, 246;
+
+  /* Text colors */
+  --color-text-primary: #1f2937; /* gray-800 */
+  --color-text-secondary: #4b5563; /* gray-600 */
+
+  /* Background colors */
+  --color-bg-card: #ffffff;
+  --color-bg-card-secondary: #f9fafb; /* gray-50 */
+
+  /* Border colors */
+  --color-border: #e5e7eb; /* gray-200 */
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary: #f3f4f6; /* gray-100 */
+    --color-text-secondary: #d1d5db; /* gray-300 */
+
+    --color-bg-card: #1f2937; /* gray-800 */
+    --color-bg-card-secondary: #111827; /* gray-900 */
+
+    --color-border: #374151; /* gray-700 */
+  }
+}

packages/docs/assets/css/variables.css

@@ -1,65 +1,80 @@
 <template>
-  <div class="code-window my-6 shadow-lg border border-gray-100 rounded-lg overflow-hidden">
-    <div class="code-window-header flex justify-between items-center bg-gray-50 border-b border-gray-100 px-4 py-2">
+  <div
+    class="code-window my-6 border border-gray-200 rounded-lg overflow-hidden"
+  >
+    <div
+      class="code-window-header flex justify-between items-center bg-gray-50 border-b border-gray-100 px-4 py-2"
+    >
       <div class="code-window-dots">
-        <div class="code-window-dot bg-accent-6"></div>
-        <div class="code-window-dot bg-accent-5"></div>
-        <div class="code-window-dot bg-accent-4"></div>
+        <div class="code-window-dot bg-error"></div>
+        <div class="code-window-dot bg-warning"></div>
+        <div class="code-window-dot bg-success"></div>
       </div>
       <div class="language-label text-gray-500 text-xs">{{ language }}</div>
-      <button 
-        v-if="code" 
-        @click="copyCode" 
+      <button
+        v-if="code"
+        @click="copyCode"
         class="text-xs text-gray-500 hover:text-accent-1 transition-colors px-2 py-1 rounded hover:bg-gray-100"
       >
-        {{ copied ? 'Copied!' : 'Copy' }}
+        {{ copied ? "Copied!" : "Copy" }}
       </button>
     </div>
-    <div class="code-window-content relative p-6 bg-black text-white overflow-auto">
-      <!-- Code content -->
+    <div
+      class="code-window-content relative p-6 bg-[#272822] text-white overflow-auto"
+    >
+      <!-- Code content with Monokai-like background -->
       <div class="relative z-10">
         <slot></slot>
       </div>
-      
+
       <!-- Line numbers -->
-      <div v-if="showLineNumbers" class="absolute top-6 left-4 text-opacity-50 select-none">
-        <div v-for="n in lineCount" :key="n" class="text-gray-500 text-right pr-4">{{ n }}</div>
+      <div
+        v-if="showLineNumbers"
+        class="absolute top-6 left-4 text-opacity-50 select-none"
+      >
+        <div
+          v-for="n in lineCount"
+          :key="n"
+          class="text-gray-500 text-right pr-4"
+        >
+          {{ n }}
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from "vue"
 
 const props = defineProps({
   language: {
     type: String,
-    default: 'typescript'
+    default: "typescript",
   },
   showLineNumbers: {
     type: Boolean,
-    default: true
+    default: true,
   },
   code: {
     type: String,
-    default: ''
-  }
-});
+    default: "",
+  },
+})
 
-const copied = ref(false);
+const copied = ref(false)
 const lineCount = computed(() => {
-  if (!props.code) return 0;
-  return props.code.split('\n').length;
-});
+  if (!props.code) return 0
+  return props.code.split("\n").length
+})
 
 const copyCode = () => {
-  navigator.clipboard.writeText(props.code);
-  copied.value = true;
+  navigator.clipboard.writeText(props.code)
+  copied.value = true
   setTimeout(() => {
-    copied.value = false;
-  }, 2000);
-};
+    copied.value = false
+  }, 2000)
+}
 </script>
 
 <style scoped>
@@ -72,5 +87,6 @@ const copyCode = () => {
 
 .code-window-dot {
   @apply w-2.5 h-2.5 rounded-full mr-1;
+  /* No box-shadow */
 }
-</style> 
+</style>

packages/docs/components/CodeBlock.vue

@@ -1,41 +1,128 @@
 <template>
   <footer class="mt-16 border-t border-gray-200 py-12 bg-white">
     <div class="container mx-auto px-4">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
         <div class="fade-in">
-          <h3 class="text-xl font-bold text-black mb-4">Documentation</h3>
-          <ul class="space-y-2">
-            <li><a href="/docs/getting-started" class="text-gray-600 hover:text-accent-1 transition-colors">Getting Started</a></li>
-            <li><a href="/docs/api-reference" class="text-gray-600 hover:text-accent-1 transition-colors">API Reference</a></li>
-            <li><a href="/docs/examples" class="text-gray-600 hover:text-accent-1 transition-colors">Examples</a></li>
+          <h3 class="text-xl font-bold text-black mb-6">Documentation</h3>
+          <ul class="space-y-3">
+            <li>
+              <a
+                href="/docs/getting-started"
+                class="text-gray-600 hover:text-accent-1 transition-colors"
+                >Getting Started</a
+              >
+            </li>
+            <li>
+              <a
+                href="/docs/api-reference"
+                class="text-gray-600 hover:text-accent-1 transition-colors"
+                >API Reference</a
+              >
+            </li>
+            <li>
+              <a
+                href="/docs/examples"
+                class="text-gray-600 hover:text-accent-1 transition-colors"
+                >Examples</a
+              >
+            </li>
           </ul>
         </div>
-        <div class="fade-in" style="animation-delay: 100ms;">
-          <h3 class="text-xl font-bold text-black mb-4">Resources</h3>
-          <ul class="space-y-2">
-            <li><a href="https://github.com/formkit/jsonreader" target="_blank" class="text-gray-600 hover:text-accent-1 transition-colors">GitHub</a></li>
-            <li><a href="https://github.com/formkit/jsonreader/issues" target="_blank" class="text-gray-600 hover:text-accent-1 transition-colors">Issues</a></li>
-            <li><a href="https://www.npmjs.com/package/jsonreader" target="_blank" class="text-gray-600 hover:text-accent-1 transition-colors">npm Package</a></li>
+        <div class="fade-in">
+          <h3 class="text-xl font-bold text-black mb-6">Resources</h3>
+          <ul class="space-y-3">
+            <li>
+              <a
+                href="https://github.com/formkit/jsonreader"
+                target="_blank"
+                class="text-gray-600 hover:text-accent-1 transition-colors"
+                >GitHub</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://github.com/formkit/jsonreader/issues"
+                target="_blank"
+                class="text-gray-600 hover:text-accent-1 transition-colors"
+                >Issues</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://www.npmjs.com/package/jsonreader"
+                target="_blank"
+                class="text-gray-600 hover:text-accent-1 transition-colors"
+                >npm Package</a
+              >
+            </li>
           </ul>
         </div>
-        <div class="fade-in" style="animation-delay: 200ms;">
-          <h3 class="text-xl font-bold text-black mb-4">About</h3>
-          <p class="text-gray-600 mb-4">
-            jsonreader is a utility for processing JSON data from streams in real-time, optimized for AI tool calls and large API responses.
+        <div class="fade-in">
+          <h3 class="text-xl font-bold text-black mb-6">About</h3>
+          <p class="text-gray-600 mb-6">
+            jsonreader is a utility for processing JSON data from streams in
+            real-time, optimized for AI tool calls and large API responses.
           </p>
           <div class="flex items-center space-x-4">
-            <a href="https://github.com/formkit/jsonreader" target="_blank" class="text-gray-500 hover:text-accent-1 transition-colors">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+            <a
+              href="https://github.com/formkit/jsonreader"
+              target="_blank"
+              class="text-gray-500 hover:text-accent-1 transition-colors"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-github"
+              >
+                <path
+                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+                ></path>
+              </svg>
             </a>
-            <a href="https://twitter.com/formkit" target="_blank" class="text-gray-500 hover:text-accent-1 transition-colors">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+            <a
+              href="https://twitter.com/formkit"
+              target="_blank"
+              class="text-gray-500 hover:text-accent-1 transition-colors"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="none"
+                stroke-width="0"
+                class="feather"
+              >
+                <path
+                  d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                />
+              </svg>
             </a>
           </div>
         </div>
       </div>
-      <div class="mt-8 pt-8 border-t border-gray-100 text-center text-gray-500 text-sm slide-up">
-        <p>© 2024 <a href="https://formkit.com" target="_blank" class="text-gray-600 hover:text-accent-1">FormKit</a>. Released under the MIT License.</p>
+      <div
+        class="mt-12 pt-8 border-t border-gray-100 text-center text-gray-500 text-sm"
+      >
+        <p>
+          © {{ new Date().getFullYear() }}
+          <a
+            href="https://formkit.com"
+            target="_blank"
+            class="text-gray-600 hover:text-accent-1"
+            >FormKit</a
+          >. Dual-license — Free for personal use, $10 per project for
+          commercial use.
+        </p>
       </div>
     </div>
   </footer>
-</template> 
+</template>

packages/docs/components/DocFooter.vue

@@ -0,0 +1,51 @@
+<template>
+  <span :class="['text-accent flex items-center', sizeClasses.container]">
+    <span
+      :class="[
+        'inline-flex items-center justify-center bg-accent text-white rounded-full leading-none tracking-tighter',
+        sizeClasses.icon,
+      ]"
+      >{&hellip;}</span
+    >
+    <span :class="sizeClasses.text">jsonreader</span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: "large", // 'large', 'medium', or 'small'
+  },
+})
+
+const sizeClasses = computed(() => {
+  switch (props.size) {
+    case "small":
+      return {
+        container: "text-xl",
+        icon: "w-8 h-8 mr-2 text-xs",
+        text: "font-semibold",
+      }
+    case "medium":
+      return {
+        container: "text-2xl",
+        icon: "w-10 h-10 mr-2.5 text-xl",
+        text: "font-bold",
+      }
+    case "large":
+    default:
+      return {
+        container: "text-3xl md:text-4xl",
+        icon: "w-16 h-16 md:w-20 md:h-20 mr-3 md:mr-4 text-2xl md:text-3xl",
+        text: "font-bold",
+      }
+  }
+})
+</script>
+
+<style scoped>
+/* Component-specific styles can be added here */
+</style>