feat: improve landing page

docs/app/app.config.ts

@@ -18,7 +18,7 @@ export default defineAppConfig({
   ui: {
     colors: {
       primary: 'yellow',
-      neutral: 'neutral',
+      neutral: 'zinc',
     },
     prose: {
       codePreview: {

docs/app/assets/styles/main.css

@@ -4,6 +4,7 @@
 
 @theme {
   --font-sans: 'Geist', 'Public Sans', sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
 
   --breakpoint-3xl: 1920px;
 
@@ -21,6 +22,68 @@
 }
 
 :root {
-  /* font-size: 14px; */
-  --ui-container: 90rem;
+  overscroll-behavior-y: none;
+
+  --ui-container: 85rem;
+  --ui-primary: var(--ui-color-primary-600);
+}
+
+.dark {
+  --ui-primary: var(--ui-color-primary-400);
+}
+
+@keyframes caret-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.caret {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.15em;
+  vertical-align: text-bottom;
+  background-color: var(--ui-primary);
+  animation: caret-blink 1s step-end infinite;
 }
+
+.section-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ui-color-primary-700);
+  background: var(--ui-color-primary-50);
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--ui-color-primary-200);
+}
+
+.dark .section-label {
+  color: var(--ui-color-primary-400);
+  background: color-mix(in oklch, var(--ui-color-primary-900) 15%, transparent);
+  border-color: color-mix(in oklch, var(--ui-color-primary-600) 30%, transparent);
+}
+
+.section-label::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--ui-primary);
+}
+
+.syntax-hash { color: var(--ui-color-primary-600); }
+.syntax-asterisk { color: var(--color-amber-600); }
+.syntax-colon { color: var(--ui-color-primary-600); }
+.syntax-bracket { color: var(--ui-color-neutral-400); }
+.syntax-text { color: var(--ui-color-neutral-700); }
+.dark .syntax-hash { color: var(--ui-color-primary-400); }
+.dark .syntax-asterisk { color: var(--color-amber-400); }
+.dark .syntax-colon { color: var(--ui-color-primary-500); }
+.dark .syntax-bracket { color: var(--ui-color-neutral-500); }
+.dark .syntax-text { color: var(--ui-color-neutral-200); }

docs/app/components/AppHeaderCTA.vue

@@ -1,13 +1,3 @@
 <template>
-  <UButton
-    v-if="$route.path === '/'"
-    label="Get Started"
-    to="/getting-started/introduction"
-    size="xs"
-    color="neutral"
-    variant="solid"
-    trailing-icon="i-lucide-arrow-right"
-    class="hidden lg:flex"
-  />
   <UContentSearchButton class="hidden lg:inline-flex" />
 </template>

docs/app/components/ComarkDocs.ts

@@ -11,6 +11,7 @@ import githubDark from '@shikijs/themes/github-dark'
 
 export default defineComarkComponent({
   name: 'ComarkDocs',
+  autoClose: true,
   plugins: [
     math(),
     mermaid(),

docs/app/components/ContentRenderer.global.vue

@@ -120,7 +120,7 @@ const data = computed(() => {
   }
 })
 
-const proseComponentMap = Object.fromEntries(['p', 'a', 'blockquote', 'code', 'pre', 'code', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'img', 'ul', 'ol', 'li', 'strong', 'table', 'thead', 'tbody', 'td', 'th', 'tr', 'script'].map(t => [t, `prose-${t}`]))
+const proseComponentMap = Object.fromEntries(['p', 'a', 'blockquote', 'code', 'pre', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'img', 'ul', 'ol', 'li', 'strong', 'table', 'thead', 'tbody', 'td', 'th', 'tr', 'script'].map(t => [t, `prose-${t}`]))
 
 const { mdc } = useRuntimeConfig().public || {}
 const propsDataMDC = computed(() => props.data.mdc)
@@ -150,8 +150,9 @@ function resolveVueComponent(component: string | Renderable) {
     else if (localComponents.includes(pascalCase(component))) {
       const loader: AsyncComponentLoader = () => {
         return import('#content/components')
-          .then((m) => {
-            const comp = m[pascalCase(component) as keyof typeof m] as unknown as () => unknown
+          .then((m: any) => {
+            const loaders = m.localComponentLoaders || m
+            const comp = loaders[pascalCase(component)] as () => unknown
             return comp ? comp() : undefined
           })
       }

docs/app/components/Playground.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { parse } from 'comark'
+import highlight from 'comark/plugins/highlight'
 import { renderMarkdown } from 'comark/string'
 import { ComarkRenderer } from 'comark/vue'
 import { Splitpanes, Pane } from 'splitpanes'
 import { defaultMarkdown } from '~/constants'
 import { watchDebounced } from '@vueuse/core'
 import type { ComarkTree } from 'comark/ast'
 import { ProseCallout, ProseNote, ProseTip, ProseWarning, ProseCaution } from '#components'
+import ProsePre from './landing/ProsePre.vue'
 import VueJsonPretty from 'vue-json-pretty'
 
 const props = defineProps<{
@@ -19,6 +21,7 @@ const components = {
   tip: ProseTip,
   warning: ProseWarning,
   caution: ProseCaution,
+  pre: ProsePre,
 }
 
 const markdown = ref<string>(defaultMarkdown.trim())
@@ -68,11 +71,13 @@ async function parseMarkdown(): Promise<void> {
     return
   }
   parsing.value = true
+  const plugins = [highlight()]
   const start = performance.now()
   try {
     const result = await parse(markdown.value, {
       autoClose: true,
       autoUnwrap: true,
+      plugins,
     })
     tree.value = result
     parseTime.value = Math.round((performance.now() - start) * 10) / 10
@@ -88,7 +93,9 @@ async function parseMarkdown(): Promise<void> {
 }
 
 watchDebounced(markdown, parseMarkdown, { debounce: 300 })
-parseMarkdown()
+onMounted(() => {
+  nextTick(() => parseMarkdown())
+})
 
 function resetComark(): void {
   markdown.value = defaultMarkdown.trim()
@@ -111,7 +118,7 @@ const isMatch = computed(() =>
 <template>
   <div
     class="overflow-hidden"
-    :class="compact ? 'h-[420px] rounded-xl border border-default bg-elevated shadow-lg' : 'h-[calc(100vh-64px)]'"
+    :class="compact ? 'h-[420px] border-b border-default bg-elevated' : 'h-[calc(100vh-64px)]'"
   >
     <Splitpanes class="h-full">
       <!-- ── Left pane: Markdown editor ── -->
@@ -231,15 +238,12 @@ const isMatch = computed(() =>
               />
               <div
                 v-else-if="tree"
-                class="prose prose-sm dark:prose-invert max-w-none"
-                :style="compact ? { zoom: '0.85' } : {}"
+                class="prose prose-sm dark:prose-invert max-w-none prose-headings:no-underline"
               >
-                <Suspense>
-                  <ComarkRenderer
-                    :tree="tree"
-                    :components="components"
-                  />
-                </Suspense>
+                <ComarkRenderer
+                  :tree="tree"
+                  :components="components"
+                />
               </div>
             </UScrollArea>
           </div>
@@ -254,7 +258,7 @@ const isMatch = computed(() =>
               v-if="tree"
               :data="(tree as any)"
               :theme="isDark ? 'dark' : 'light'"
-              :deep="2"
+              :deep="6"
               show-line
             />
           </UScrollArea>
@@ -319,11 +323,19 @@ const isMatch = computed(() =>
 
 .vjs-tree-node.dark.is-highlight,
 .vjs-tree-node.dark:hover {
-  background-color: var(--color-primary-200) !important;
+  background-color: var(--color-primary-800) !important;
 }
 
 .vjs-tree-node .vjs-tree-node-actions,
 .vjs-tree-node.dark .vjs-tree-node-actions {
   background-color: var(--color-primary-200) !important;
 }
+
+.vjs-tree-node .vjs-indent-unit.has-line {
+  border-left-color: var(--ui-border);
+}
+
+.vjs-tree-node .vjs-tree-brackets:hover {
+  color: var(--ui-primary);
+}
 </style>