@invisibleloop/pulse 0.5.0 → 0.6.0

package/docs/src/pages/components/icons.js

@@ -145,7 +145,6 @@ export default {
     description: 'Built-in icon set for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/icons',
     prev,

package/docs/src/pages/components/image.js

@@ -12,7 +12,6 @@ export default {
     description: 'Responsive image component with optional aspect-ratio crop and caption for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/image',
     prev,

package/docs/src/pages/components/input.js

@@ -12,7 +12,6 @@ export default {
     description: 'Input component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/input',
     prev,

package/docs/src/pages/components/list.js

@@ -12,7 +12,6 @@ export default {
     description: 'Styled ordered and unordered list component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/list',
     prev,

package/docs/src/pages/components/media.js

@@ -12,7 +12,6 @@ export default {
     description: 'Media component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/media',
     prev,

package/docs/src/pages/components/modal.js

@@ -12,7 +12,6 @@ export default {
     description: 'Modal dialog component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/modal',
     prev,

package/docs/src/pages/components/nav.js

@@ -12,7 +12,6 @@ export default {
     description: 'Nav component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/nav',
     prev,

package/docs/src/pages/components/pricing.js

@@ -12,7 +12,6 @@ export default {
     description: 'Pricing component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/pricing',
     prev,

package/docs/src/pages/components/progress.js

@@ -12,7 +12,6 @@ export default {
     description: 'Progress bar component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/progress',
     prev,

package/docs/src/pages/components/prose.js

@@ -25,7 +25,6 @@ export default {
     description: 'Typography wrapper for CMS output and rich text content in Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/prose',
     prev,
@@ -43,8 +42,8 @@ export default {
 // CMS rich text field — output directly, fully styled
 prose({ content: server.article.bodyHtml })
 
-// Markdown rendered to HTML
-prose({ content: renderMarkdown(server.post.body) })`,
+// Markdown file via md() helper
+prose({ content: server.post.html })  // see /markdown`,
         { col: true }
       )}
 

package/docs/src/pages/components/pullquote.js

@@ -12,7 +12,6 @@ export default {
     description: 'Styled blockquote component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/pullquote',
     prev,

package/docs/src/pages/components/radio.js

@@ -12,7 +12,6 @@ export default {
     description: 'Radio button and radio group components for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/radio',
     prev,

package/docs/src/pages/components/rating.js

@@ -12,7 +12,6 @@ export default {
     description: 'Star rating display and interactive input component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/rating',
     prev,

package/docs/src/pages/components/search.js

@@ -12,7 +12,6 @@ export default {
     description: 'Search input component with icon, debounce binding, and clear button.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/search',
     prev,

package/docs/src/pages/components/section.js

@@ -12,7 +12,6 @@ export default {
     description: 'Vertical padding wrapper with optional background. Compose with container() for full-width background with constrained content.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/section',
     prev,

package/docs/src/pages/components/segmented.js

@@ -12,7 +12,6 @@ export default {
     description: 'iOS-style segmented control component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/segmented',
     prev,

package/docs/src/pages/components/select.js

@@ -11,7 +11,6 @@ export default {
     description: 'Select component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/select',
     prev,

package/docs/src/pages/components/spinner.js

@@ -12,7 +12,6 @@ export default {
     description: 'Loading spinner component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/spinner',
     prev,

package/docs/src/pages/components/stack.js

@@ -12,7 +12,6 @@ export default {
     description: 'Stack component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/stack',
     prev,

package/docs/src/pages/components/stat.js

@@ -12,7 +12,6 @@ export default {
     description: 'Stat component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/stat',
     prev,

package/docs/src/pages/components/stepper.js

@@ -14,7 +14,6 @@ export default {
     description: 'Horizontal step progress indicator component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/stepper',
     prev,

package/docs/src/pages/components/table.js

@@ -12,7 +12,6 @@ export default {
     description: 'Table component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/table',
     prev,

package/docs/src/pages/components/testimonial.js

@@ -12,7 +12,6 @@ export default {
     description: 'Testimonial component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/testimonial',
     prev,

package/docs/src/pages/components/textarea.js

@@ -11,7 +11,6 @@ export default {
     description: 'Textarea component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/textarea',
     prev,

package/docs/src/pages/components/timeline.js

@@ -17,7 +17,6 @@ export default {
     description: 'Timeline component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/timeline',
     prev,

package/docs/src/pages/components/toggle.js

@@ -12,7 +12,6 @@ export default {
     description: 'iOS-style switch toggle component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/toggle',
     prev,

package/docs/src/pages/components/tooltip.js

@@ -12,7 +12,6 @@ export default {
     description: 'Tooltip component for Pulse UI.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderComponentPage({
     currentHref: '/components/tooltip',
     prev,

package/docs/src/pages/components.js

@@ -11,7 +11,6 @@ export default {
     description: 'Server-rendered UI components for Pulse — button, card, input, alert, stat, avatar, table and more. Fully accessible, mobile-ready, zero client JS.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/components',
     prev,

package/docs/src/pages/config.js

@@ -11,7 +11,6 @@ export default {
     description: 'Full reference for pulse.config.js — port, Lighthouse thresholds, load test config, environments, and per-route overrides.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/config',
     prev,

package/docs/src/pages/deploy.js

@@ -11,7 +11,6 @@ export default {
     description: 'Deploy a Pulse app to a VPS, Docker, Fly.io, Railway, or Render.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/deploy',
     prev,

package/docs/src/pages/extending.js

@@ -11,7 +11,6 @@ export default {
     description: 'Escape hatches for features outside the Pulse spec — onRequest middleware, raw server access, WebSockets, SSE, and custom error handling.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/extending',
     prev,

package/docs/src/pages/faq.js

@@ -21,7 +21,6 @@ export default {
     description: 'Frequently asked questions about the Pulse framework.',
     styles:      ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/faq',
     prev,

package/docs/src/pages/getting-started.js

@@ -11,7 +11,6 @@ export default {
     description: 'Install Pulse and build your first page with an AI agent in minutes.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/getting-started',
     prev,

package/docs/src/pages/guard.js

@@ -11,7 +11,6 @@ export default {
     description: 'Per-route authorization in Pulse. Guard functions run before server data fetchers and redirect unauthorized requests.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/guard',
     prev,
@@ -33,7 +32,6 @@ export default {
     user: async (ctx) => getCurrentUser(ctx.cookies.session),
   },
 
-  state: {},
   view: (state, server) => \`
     <main id="main-content">
       <h1>Welcome, \${server.user.name}</h1>
@@ -87,7 +85,6 @@ export default {
     if (ctx.cookies.session) return { redirect: '/dashboard' }
   },
 
-  state: {},
   view: () => \`<main id="main-content">...</main>\`,
 }`, 'js'))}
 

package/docs/src/pages/how-it-works.js

@@ -70,7 +70,6 @@ export default {
     description: 'How the Pulse MCP server gives an AI agent the knowledge and tools to build Pulse apps correctly.',
     styles: ['/pulse-ui.css', '/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/how-it-works',
     prev,

package/docs/src/pages/images.js

@@ -11,7 +11,6 @@ export default {
     description: 'The img() and picture() helpers for optimised, CLS-free image markup.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/images',
     prev,
@@ -95,7 +94,6 @@ import { img, picture } from '@invisibleloop/pulse/image'`, 'js'))}
 
 export default {
   route: '/blog/:slug',
-  state: {},
   server: {
     data: async (ctx) => ({ post: await db.posts.findBySlug(ctx.params.slug) }),
   },

package/docs/src/pages/markdown.js

@@ -0,0 +1,155 @@
+import { renderLayout, h1, lead, section, codeBlock, callout, table } from '../lib/layout.js'
+import { prevNext } from '../lib/nav.js'
+import { highlight } from '../lib/highlight.js'
+
+const { prev, next } = prevNext('/markdown')
+
+export default {
+  route: '/markdown',
+  meta: {
+    title: 'Markdown — Pulse Docs',
+    description: 'Render markdown files as pages with syntax-highlighted code blocks, frontmatter, and the prose component.',
+    styles: ['/docs.css'],
+  },
+  view: () => renderLayout({
+    currentHref: '/markdown',
+    prev,
+    next,
+    content: `
+      ${h1('Markdown')}
+      ${lead('Pulse includes a built-in markdown parser. Write content in <code>.md</code> files, load them with the <code>md()</code> helper, and render with the <code>prose</code> component. No external dependencies — zero browser bytes.')}
+
+      ${section('basic', 'Basic usage')}
+      <p>Import <code>md</code> from <code>@invisibleloop/pulse/md</code> and call it with a file path. It returns an async server fetcher — use it in <code>server</code> and optionally in <code>meta</code>:</p>
+      ${codeBlock(highlight(`import { md }    from '@invisibleloop/pulse/md'
+import { prose } from '@invisibleloop/pulse/ui'
+
+const page = md('content/about.md')
+
+export default {
+  route:  '/about',
+  server: { page },
+  view:   (state, { page }) => prose({ content: page.html }),
+}`, 'js'))}
+      <p>The fetcher returns <code>{ html, frontmatter }</code>. The <code>html</code> is ready to pass directly to <code>prose()</code>. The <code>frontmatter</code> object contains the parsed key/value pairs from the <code>---</code> block at the top of the file.</p>
+
+      ${section('frontmatter', 'Frontmatter')}
+      <p>Add a <code>---</code> block at the top of any <code>.md</code> file to define metadata. Use the values in <code>meta</code> for SEO:</p>
+      ${codeBlock(highlight(`---
+title: About Us
+description: Learn about our company
+date: 2024-01-15
+---
+
+# About Us
+
+Welcome to our company…`, 'bash'))}
+      ${codeBlock(highlight(`const page = md('content/about.md')
+
+export default {
+  route: '/about',
+  meta: {
+    title:       async (ctx) => (await page(ctx)).frontmatter.title,
+    description: async (ctx) => (await page(ctx)).frontmatter.description,
+  },
+  server: { page },
+  view:   (state, { page }) => prose({ content: page.html }),
+}`, 'js'))}
+      ${callout('tip', 'Calling <code>page(ctx)</code> in both <code>meta</code> and <code>server</code> reads the file only once per request — the result is cached on <code>ctx._mdCache</code> automatically.')}
+
+      ${section('dynamic', 'Dynamic routes')}
+      <p>Use <code>:param</code> placeholders in the path — they are resolved from <code>ctx.params</code> at request time:</p>
+      ${codeBlock(highlight(`import { md }    from '@invisibleloop/pulse/md'
+import { prose } from '@invisibleloop/pulse/ui'
+
+const post = md('content/blog/:slug.md')
+
+export default {
+  route: '/blog/:slug',
+  meta: {
+    title:       async (ctx) => (await post(ctx)).frontmatter.title,
+    description: async (ctx) => (await post(ctx)).frontmatter.description,
+  },
+  server: { post },
+  view:   (state, { post }) => \`
+    <main id="main-content">
+      \${prose({ content: post.html })}
+    </main>
+  \`,
+  onViewError: (err) => \`
+    <main id="main-content">
+      <p>Post not found.</p>
+    </main>
+  \`,
+}`, 'js'))}
+      ${callout('note', 'If the file does not exist, the fetcher throws with <code>{ status: 404 }</code>. Define <code>onViewError</code> on dynamic-route pages to render a friendly not-found message instead of a 500.')}
+
+      ${section('parseMd', 'parseMd()')}
+      <p>For cases where you already have a markdown string (from a database, API, or generated content), use <code>parseMd</code> directly instead of the file helper:</p>
+      ${codeBlock(highlight(`import { parseMd } from '@invisibleloop/pulse/md'
+import { prose }   from '@invisibleloop/pulse/ui'
+
+export default {
+  route: '/post/:id',
+  server: {
+    post: async (ctx) => {
+      const record = await db.posts.find(ctx.params.id)
+      const { html, frontmatter } = parseMd(record.body)
+      return { html, title: frontmatter.title ?? record.title }
+    }
+  },
+  view: (state, { post }) => prose({ content: post.html }),
+}`, 'js'))}
+
+      ${section('what-renders', 'What the parser renders')}
+      ${table(
+        ['Markdown', 'Output'],
+        [
+          ['<code># Heading</code> through <code>###### Heading</code>', '<code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code> with auto <code>id</code> anchors'],
+          ['<code>**bold**</code>, <code>*italic*</code>, <code>~~strike~~</code>', '<code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;del&gt;</code>'],
+          ['<code>`inline code`</code>', '<code>&lt;code&gt;</code>'],
+          ['Fenced code block with language tag', '<code>&lt;pre&gt;&lt;code class="language-X"&gt;</code> with syntax highlighting'],
+          ['<code>[text](url)</code>, <code>![alt](url)</code>', '<code>&lt;a&gt;</code>, <code>&lt;img&gt;</code>'],
+          ['<code>- item</code>, <code>1. item</code>', '<code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> (nested lists supported)'],
+          ['<code>&gt; quote</code>', '<code>&lt;blockquote&gt;</code>'],
+          ['GFM table (<code>| col | col |</code>)', '<code>&lt;table&gt;</code> with <code>&lt;thead&gt;</code> and <code>&lt;tbody&gt;</code>'],
+          ['<code>---</code> (three or more)', '<code>&lt;hr&gt;</code>'],
+        ]
+      )}
+
+      ${section('syntax-highlighting', 'Syntax highlighting')}
+      <p>Fenced code blocks with a language tag are syntax-highlighted automatically — no client JS required. The highlighting runs on the server and emits <code>&lt;span class="tok-*"&gt;</code> elements. The colour tokens are defined in <code>pulse-ui.css</code> and respect the active theme.</p>
+      ${codeBlock(highlight(`\`\`\`js
+const greeting = 'Hello, world'
+console.log(greeting)
+\`\`\``, 'bash'))}
+      <p>Supported languages:</p>
+      ${table(
+        ['Tag(s)', 'Highlighter'],
+        [
+          ['<code>js</code>, <code>javascript</code>, <code>ts</code>, <code>typescript</code>, <code>jsx</code>, <code>tsx</code>', 'JavaScript / TypeScript'],
+          ['<code>html</code>, <code>xml</code>, <code>svg</code>, <code>vue</code>, <code>svelte</code>', 'HTML / XML'],
+          ['<code>css</code>, <code>scss</code>, <code>less</code>', 'CSS'],
+          ['<code>bash</code>, <code>sh</code>, <code>shell</code>, <code>zsh</code>', 'Bash / Shell'],
+          ['<code>json</code>, <code>jsonc</code>', 'JSON'],
+          ['Any other tag', 'Plain text (escaped, no colour tokens)'],
+        ]
+      )}
+
+      ${section('prose', 'The prose component')}
+      <p>The <code>prose</code> component is designed specifically for markdown output. It applies typographic styles to all descendant elements — headings, paragraphs, lists, blockquotes, code blocks, tables, images — without requiring any classes on the elements themselves:</p>
+      ${codeBlock(highlight(`import { prose } from '@invisibleloop/pulse/ui'
+
+// Wrap the html from parseMd or md()
+prose({ content: page.html })
+
+// Optional size modifier
+prose({ content: page.html, size: 'lg' })  // 'sm' | 'base' | 'lg'`, 'js'))}
+      ${callout('note', 'The <code>content</code> slot is injected as raw HTML — only pass server-side content that you trust. Never pass user-submitted HTML directly; sanitise it first.')}
+
+      ${section('url-paths', 'Using URL paths')}
+      <p>Pass a <code>URL</code> object to resolve paths relative to the spec file rather than the process working directory:</p>
+      ${codeBlock(highlight(`const page = md(new URL('./content/about.md', import.meta.url))`, 'js'))}
+    `,
+  }),
+}

package/docs/src/pages/meta.js

@@ -11,7 +11,6 @@ export default {
     description: 'How to configure page metadata, Open Graph tags, and structured data in Pulse.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/meta',
     prev,
@@ -28,7 +27,6 @@ export default {
     description: 'Learn about the team behind Acme Corp.',
     styles:      ['/app.css'],
   },
-  state: {},
   view: () => \`<h1>About Us</h1>\`,
 }`, 'js'))}
       <p>This generates:</p>

package/docs/src/pages/navigation.js

@@ -11,7 +11,6 @@ export default {
     description: 'Client-side navigation in Pulse — how link interception, JSON responses, and spec re-mounting work.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/navigation',
     prev,

package/docs/src/pages/performance.js

@@ -11,7 +11,6 @@ export default {
     description: 'Performance targets, techniques, and built-in optimisations in Pulse.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/performance',
     prev,
@@ -85,7 +84,6 @@ export default {
 export default {
   route: '/about',
   meta:  { title: 'About', styles: ['/app.css'] },
-  state: {},
   view:  () => \`<main><h1>About us</h1></main>\`,
 }`, 'js'))}
 

package/docs/src/pages/project-structure.js

@@ -11,7 +11,6 @@ export default {
     description: 'Recommended directory layout for a Pulse application.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/project-structure',
     prev,
@@ -77,7 +76,6 @@ import { card } from '../components/card.js'
 
 export default {
   route: '/',
-  state: {},
   view: () => card({ title: 'Hello', body: 'Welcome to Pulse' }),
 }`, 'js'), 'src/pages/home.js')}
 

package/docs/src/pages/prompt-examples.js

@@ -29,7 +29,6 @@ export default {
     description: 'Real prompts for building Pulse pages with your AI agent — from creating pages to authentication, performance audits, and integrations.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/prompt-examples',
     prev,

package/docs/src/pages/raw-responses.js

@@ -11,7 +11,6 @@ export default {
     description: 'Return non-HTML responses from Pulse specs — RSS, XML, JSON, and other content types.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/raw-responses',
     prev,
@@ -25,7 +24,6 @@ export default {
       ${codeBlock(highlight(`export default {
   route: '/feed.xml',
   contentType: 'application/rss+xml',
-  state: {},
   server: {
     data: async () => ({
       posts: await db.posts.latest(20),
@@ -53,7 +51,6 @@ export default {
       ${codeBlock(highlight(`export default {
   route: '/api/products',
   contentType: 'application/json',
-  state: {},
   server: {
     data: async (ctx) => ({
       products: await db.products.list({
@@ -73,7 +70,6 @@ export default {
   route: '/sitemap.xml',
   contentType: 'application/xml',
   serverTtl:   3600,
-  state: {},
   server: {
     data: async () => ({
       pages: await db.pages.allPublished(),

package/docs/src/pages/routing.js

@@ -11,7 +11,6 @@ export default {
     description: 'How Pulse routes requests to page specs — static and dynamic routes, params, and conventions.',
     styles: ['/docs.css'],
   },
-  state: {},
   view: () => renderLayout({
     currentHref: '/routing',
     prev,
@@ -24,7 +23,6 @@ export default {
       <p>Every spec has a <code>route</code> field. This is the URL pattern the spec handles:</p>
       ${codeBlock(highlight(`export default {
   route: '/about',
-  state: {},
   view: () => \`<h1>About</h1>\`,
 }`, 'js'))}
       <p>Pulse matches the exact path. By default, trailing slashes are removed — <code>/about/</code> redirects to <code>/about</code> with a 301. This is controlled by the <code>trailingSlash</code> option in <code>createServer</code>:</p>