Rutas personalizadas

Actualizado el 12 nov 2026

Livemark se basa en TanStack Router. Cualquier archivo .tsx que pongas en .livemark/routes/ se convierte en una página en la URL correspondiente, sin registro ni cambios de configuración.

Ejemplo mínimo

import { createFileRoute } from "@tanstack/react-router"
import { Layout } from "livemark/components/Layout"

export const Route = createFileRoute("/about")({
  component: About,
})

function About() {
  return (
    <Layout>
      <div className="mx-auto max-w-3xl px-6 py-16 prose">
        <h1>About</h1>
        <p>Anything you'd write in a normal React page, here.</p>
      </div>
    </Layout>
  )
}

Guarda y visita /about/. Layout le da a la página la misma interfaz que a un artículo: banner, cabecera, navegación y selector de modo oscuro.

Elegir la interfaz

Una ruta personalizada empieza vacía: no se dibuja nada a su alrededor hasta que lo añades. Compón tanto como necesite la página:

Una página de inicio normalmente solo necesita la cabecera:

import { createFileRoute } from "@tanstack/react-router"
import { Banner } from "livemark/components/Banner"
import { Header } from "livemark/components/Header"

export const Route = createFileRoute("/")({ component: Landing })

function Landing() {
  return (
    <>
      <Banner />
      <Header />
      <main>{/* your hero */}</main>
    </>
  )
}

Cómo encaja con el resto del sitio

• Las rutas exactas ganan. Las rutas personalizadas tienen prioridad sobre la ruta comodín que sirve los artículos Markdown. Si creas /about, un artículo docs/about.md en la misma ruta queda inaccesible.
• La ruta raíz /. Coloca .livemark/routes/index.tsx para reemplazar la página de inicio por defecto por la tuya. El sitio por defecto de Livemark tiene una página de inicio en Markdown; sobrescribirla te da control total en React sobre la portada.
• Rutas anidadas. Las rutas de archivo reflejan las rutas URL: .livemark/routes/guide/quickstart.tsx ⇒ /guide/quickstart/.
• Prerenderizadas por sí mismas. livemark build escribe en disco cada ruta personalizada sin parámetro $, aunque ninguna página enlace a ella. Una ruta con parámetro solo se escribe para las URL a las que enlazan otras páginas.
• Las etiquetas del head vienen incluidas. Una ruta personalizada recibe el título y la descripción del sitio, un enlace canónico y og:url (con site configurado) y, en un sitio multilingüe, og:locale y enlaces hreflang, en el idioma bajo cuya ruta está. Un head en la ruta puede sobrescribir el título y las etiquetas meta.

Importar primitivas de Livemark

Reutiliza los mismos componentes que Livemark usa internamente mediante los exports de subruta livemark/*:

import { createFileRoute, Link } from "@tanstack/react-router"
import { buttonVariants } from "livemark/elements/button"
import { cn } from "cn"

export const Route = createFileRoute("/about")({ component: About })

function About() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="text-4xl font-bold tracking-tight">About</h1>
      <Link to="/" className={cn(buttonVariants({ variant: "outline" }), "mt-6")}>
        ← Back home
      </Link>
    </main>
  )
}

Recursos estáticos

Los archivos colocados en .livemark/public/ se sirven en la raíz del sitio. Pon ahí un robots.txt, un favicon.svg personalizado o un /og-image.png.

Ver también

• Sobrescritura/Escape: reemplaza una página o un componente integrado en lugar de añadir uno nuevo.
• Metadatos del sitio: el título del sitio y el favicon, que también aparecen en las rutas personalizadas.