Merge branch 'EVL-143'

Author: HugoRCD

apps/docs/app/components/LandingCta.vue

@@ -2,6 +2,11 @@
 import { Shader, Aurora } from 'shaders/vue'
 import { Motion } from 'motion-v'
 
+const { public: pub } = useRuntimeConfig()
+const justUseEvlogUrl = computed(() =>
+  typeof pub.justUseEvlogUrl === 'string' ? pub.justUseEvlogUrl.trim() : '',
+)
+
 const prefersReducedMotion = ref(false)
 
 const shipByTime = ref('')
@@ -27,19 +32,16 @@ onMounted(() => {
 
 <template>
   <section class="relative overflow-hidden flex flex-col">
-    <!-- Top fade mask: smooth transition from dark page into gradient -->
     <div
       class="absolute inset-x-0 top-0 h-24 z-[1] pointer-events-none"
       style="background: linear-gradient(180deg, #000000 0%, transparent 100%)"
     />
 
-    <!-- Gradient: dark → blue → white (smooth diffuse) -->
     <div
       class="absolute inset-0"
       style="background: linear-gradient(180deg, #000000 0%, #000711 6%, #001133 14%, #002266 22%, #0044CC 32%, #0055FF 42%, #0077FF 52%, #0099FF 62%, #44BBFF 72%, #88D4FF 80%, #BBE6FF 88%, #E0F3FF 94%, #FFFFFF 100%)"
     />
 
-    <!-- Aurora shader overlay -->
     <ClientOnly>
       <div class="absolute inset-0 mix-blend-screen opacity-30">
         <div class="size-full">
@@ -60,7 +62,6 @@ onMounted(() => {
       </div>
     </ClientOnly>
 
-    <!-- CTA content — in the blue zone -->
     <div class="relative z-10 pt-24 md:pt-32 text-center max-w-2xl mx-auto px-6">
       <Motion
         :initial="prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }"
@@ -96,6 +97,18 @@ onMounted(() => {
                 <UIcon name="i-lucide-arrow-right" class="size-4" />
               </template>
             </UButton>
+            <UButton
+              v-if="justUseEvlogUrl"
+              :to="justUseEvlogUrl"
+              target="_blank"
+              size="lg"
+              class="bg-white/10 border border-white/40 text-white hover:bg-white/20 backdrop-blur-sm"
+            >
+              <template #leading>
+                <UIcon name="i-lucide-megaphone" class="size-4" />
+              </template>
+              Just fucking use evlog
+            </UButton>
             <UButton
               to="https://github.com/hugorcd/evlog"
               target="_blank"
@@ -112,7 +125,6 @@ onMounted(() => {
       </Motion>
     </div>
 
-    <!-- Inline footer — pinned to bottom of white zone -->
     <div class="relative z-10 mt-auto pt-32 md:pt-44 pb-4">
       <div class="max-w-4xl mx-auto px-6 flex items-center justify-between">
         <div class="text-xs font-mono italic tracking-tight text-zinc-500">

apps/docs/app/components/app/AppFooter.vue

@@ -3,15 +3,26 @@ import type { FooterColumn } from '@nuxt/ui'
 
 const route = useRoute()
 const isLanding = computed(() => route.path === '/')
+const { public: pub } = useRuntimeConfig()
+const justUseEvlogUrl = computed(() =>
+  typeof pub.justUseEvlogUrl === 'string' ? pub.justUseEvlogUrl.trim() : '',
+)
 
-const columns: FooterColumn[] = [
+const columns = computed<FooterColumn[]>(() => [
   {
     label: 'Resources',
     children: [
       {
         label: 'Documentation',
         to: '/getting-started/introduction'
       },
+      ...(justUseEvlogUrl.value
+        ? [{
+            label: 'Just fucking use evlog',
+            to: justUseEvlogUrl.value,
+            target: '_blank' as const,
+          }]
+        : []),
       {
         label: 'Releases',
         to: 'https://github.com/hugorcd/evlog/releases',
@@ -39,7 +50,7 @@ const columns: FooterColumn[] = [
       }
     ]
   }
-]
+])
 </script>
 
 <template>

apps/docs/nuxt.config.ts

@@ -67,6 +67,12 @@ export default defineNuxtConfig({
     },
   },
 
+  runtimeConfig: {
+    public: {
+      justUseEvlogUrl: process.env.NUXT_PUBLIC_JUST_USE_EVLOG_URL || '',
+    },
+  },
+
   icon: {
     customCollections: [
       {

apps/just-use-evlog/README.md

@@ -0,0 +1,37 @@
+# Just fucking use evlog
+
+Small marketing / showcase site for evlog. Deploy separately from the documentation app.
+
+Uses **Nuxt UI** (`UApp` in `app.vue`) and **`@vercel/analytics/nuxt`**: page views are recorded automatically on Vercel production (no extra config in code). Enable **Web Analytics** on the Vercel project if you have not already.
+
+## Content
+
+- **Nuxt Content** ([docs](https://content.nuxt.com/)): editable copy lives in [`content/landing.md`](content/landing.md) (front matter + Markdown).
+- **Comark** ([Nuxt integration](https://comark.dev/integrations/nuxt)): [`LandingComark`](app/components/LandingComark.ts) wraps `defineComarkComponent` with the **Shiki** [`highlight` plugin](https://comark.dev) (same idea as [nuxt-ui-templates/chat](https://github.com/nuxt-ui-templates/chat)) so fenced blocks get proper syntax highlighting. Custom blocks `::landing-demo-resize`, `::landing-demo-buttons`, and `::landing-ctas` are registered there.
+
+The home page is a single **content-first** column: no separate marketing hero or sticky nav — the story, demos, and CTAs all live in Markdown and Comark. The app loads the parsed document from the `landing` collection, turns the minimark body back into Markdown with `minimark/stringify`, then Comark parses and renders it so custom blocks and prose stay aligned with the Comark toolchain.
+
+## Environment
+
+| Variable | Purpose |
+|----------|---------|
+| `NUXT_PUBLIC_SITE_URL` | Public URL of this deployment (required for correct OG / site config in production; avoid localhost). |
+| `NUXT_PUBLIC_DOCS_URL` | Optional override for documentation links (defaults to `https://www.evlog.dev`). |
+
+## Documentation site
+
+On **evlog-docs**, set `NUXT_PUBLIC_JUST_USE_EVLOG_URL` to this app’s production URL so the landing CTA and footer can link to this site (**Just fucking use evlog**).
+
+## Develop
+
+From the monorepo root:
+
+```bash
+bun run dev:just-use-evlog
+```
+
+Or from this directory:
+
+```bash
+bun run dev
+```

apps/just-use-evlog/app/app.config.ts

@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'blue',
+      neutral: 'zinc',
+    },
+  },
+})

apps/just-use-evlog/app/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <UApp>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </UApp>
+</template>

apps/just-use-evlog/app/assets/css/main.css

@@ -0,0 +1,67 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans: "Geist", sans-serif;
+  --font-mono: "Geist Mono", monospace;
+  --font-pixel: "Geist Pixel Line", monospace;
+}
+
+:root {
+  --ui-radius: 0;
+  --ui-primary: #2853FF;
+}
+
+.dark {
+  --ui-bg: #030303;
+  --ui-bg-muted: #0a0a0c;
+  --ui-bg-elevated: #0e0e11;
+  --ui-border: #1a1a20;
+  --ui-border-muted: #141418;
+}
+
+@layer base {
+  :root {
+    @apply selection:bg-primary selection:text-white;
+  }
+
+  html, body {
+    @apply bg-default text-highlighted;
+  }
+
+  html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
+
+.landing-h1 {
+  @apply font-pixel text-5xl leading-[1.1] tracking-tight text-highlighted md:text-6xl lg:text-7xl;
+}
+
+.landing-h2 {
+  @apply font-pixel text-3xl leading-[1.2] tracking-tight text-highlighted md:text-4xl;
+}
+
+.landing-prose {
+  @apply text-muted;
+}
+
+.landing-prose :where(pre) {
+  @apply bg-elevated;
+}
+
+pre.framework-pre {
+  @apply bg-elevated text-muted font-mono;
+  padding: 1.25rem 1.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.7;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.landing-prose .vitrine-eyebrow {
+  @apply mb-1 font-pixel text-[10px] uppercase tracking-[0.28em] text-muted;
+}

apps/just-use-evlog/app/components/LandingComark.ts

@@ -0,0 +1,14 @@
+import { defineComarkRendererComponent } from '@comark/vue'
+import LandingCtas from './LandingCtas.vue'
+import LandingH1 from './LandingH1.vue'
+import LandingH2 from './LandingH2.vue'
+
+export default defineComarkRendererComponent({
+  name: 'LandingComark',
+  components: {
+    'h1': LandingH1,
+    'h2': LandingH2,
+    'landing-ctas': LandingCtas,
+  },
+  class: 'landing-prose *:first:mt-0 *:last:mb-0',
+})

apps/just-use-evlog/app/components/LandingCtas.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const { public: pub } = useRuntimeConfig()
+const docsUrl = computed(() => pub.docsUrl || 'https://www.evlog.dev')
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 border-t border-default pt-10 sm:flex-row sm:flex-wrap sm:items-center sm:gap-10">
+    <NuxtLink
+      :to="`${docsUrl}/getting-started/installation`"
+      class="inline-flex items-center justify-center border border-primary bg-primary px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-primary-600"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Read the docs
+    </NuxtLink>
+    <NuxtLink
+      :to="`${docsUrl}/getting-started/quick-start`"
+      class="text-muted underline decoration-muted underline-offset-4 transition-colors hover:text-highlighted"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Quick start
+    </NuxtLink>
+    <NuxtLink
+      to="https://github.com/hugorcd/evlog"
+      class="text-muted underline decoration-muted underline-offset-4 transition-colors hover:text-highlighted"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      GitHub
+    </NuxtLink>
+  </div>
+</template>

apps/just-use-evlog/app/components/LandingFrameworkExamples.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const frameworks = [
+  {
+    label: 'Nuxt',
+    slot: 'nuxt' as const,
+    code: `export default defineEventHandler(async (event) => {
+  const log = useLogger(event)
+  log.set({ cart: { items: 3, total: 9999 } })
+  return { ok: true }
+})`,
+  },
+  {
+    label: 'Express',
+    slot: 'express' as const,
+    code: `app.post('/api/checkout', (req, res) => {
+  const log = useLogger(req)
+  log.set({ cart: { items: 3, total: 9999 } })
+  res.json({ ok: true })
+})`,
+  },
+  {
+    label: 'Hono',
+    slot: 'hono' as const,
+    code: `app.post('/api/checkout', (c) => {
+  const log = c.get('log')
+  log.set({ cart: { items: 3, total: 9999 } })
+  return c.json({ ok: true })
+})`,
+  },
+  {
+    label: 'Fastify',
+    slot: 'fastify' as const,
+    code: `app.post('/api/checkout', async (request) => {
+  request.log.set({ cart: { items: 3, total: 9999 } })
+  return { ok: true }
+})`,
+  },
+]
+</script>
+
+<template>
+  <UTabs :items="frameworks.map(f => ({ label: f.label, slot: f.slot }))" class="mb-10">
+    <template v-for="fw in frameworks" :key="fw.slot" #[fw.slot]>
+      <pre class="framework-pre"><code>{{ fw.code }}</code></pre>
+    </template>
+  </UTabs>
+</template>