Demo de Documentacion Moderna

Esta guia concentra los componentes mas utiles de Starlight en una sola pagina para que puedas evaluar estructura, legibilidad y patrones visuales sin salir del proyecto.

Nuevo topico Starlight MDX

Vista general

Componentes listos para docs

11 componentes nativos disponibles para construir una experiencia editorial consistente.

Navegacion clara

Una sola pagina puede combinar resumen ejecutivo, tutorial, referencia visual y enlaces accionables.

Entrega moderna

La mezcla de tarjetas, tabs, pasos, llamados de atencion y bloques de codigo mejora el escaneo visual.

Acceso rapido

Usa esta pagina como plantilla para futuras guias internas, onboarding tecnico o documentacion de producto.

Acciones principales

Ver una guia basica Referencia oficial de componentes Ir a Reference

Estados y contexto

Cuando usar esta pagina

Utiliza esta demo cuando quieras validar el tono visual del sitio, probar layouts editoriales o mostrar capacidad de Starlight a un equipo nuevo.

Patron recomendado

Combina un resumen corto al principio, una zona accionable en el medio y ejemplos de implementacion al final.

Limite practico

No conviene meter todos los componentes en cada pagina real. Esta guia funciona como showroom, no como patron obligatorio.

Evita este error

Si necesitas importar componentes, usa archivos MDX. Un archivo Markdown puro no puede cubrir este mismo escenario sin perder capacidades.

Navegacion por escenario

Landing

Usa CardGrid y LinkButton para presentar valor y llamadas a la accion.

Tutorial

Usa Steps con bloques de codigo y asides cortos para guiar una tarea de principio a fin.

Referencia

Usa Tabs y Code cuando necesites comparar variantes o APIs.

Atajos de lectura

Implementar una nueva guia Base simple para escribir documentacion orientada a tareas.

Consultar referencia Ejemplo de una seccion auto-generada para contenido de referencia.

Explorar Starlight Documentacion oficial para ampliar el sistema de contenido.

Estructura sugerida del proyecto

• Directoriosrc

  • Directoriocontent

    • Directoriodocs

      • index.mdx pagina principal del sitio
      • Directorioguides

        • example.md guia inicial del starter
        • modern-docs-demo.mdx showroom de componentes
      • Directorioreference/

        • example.md
  • Directoriocomponents/

    • Directoriostarlight/

      • Head.astro override actual del proyecto
  • Directoriostyles/

    • fonts.css tipografia compartida
• astro.config.mjs configuracion del sidebar
• package.json
• …

Flujo recomendado para crear una pagina potente

1. Define el objetivo editorial en una frase. Decide si la pagina sera una guia, una referencia o una landing interna.

2. Arma una apertura escaneable. Usa tarjetas, badges y un CTA para que el lector entienda el valor en menos de 10 segundos.

3. Introduce contenido guiado. Organiza pasos, tabs y asides para separar accion, contexto y advertencias.

4. Cierra con ejemplos concretos. Incluye una estructura de archivos o snippets reales para que la pagina sea reutilizable.

Snippet reutilizable

astro.config.mjs

// @ts-check
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightCatppuccin from '@catppuccin/starlight'

import react from '@astrojs/react';

import tailwindcss from '@tailwindcss/vite';
import remarkMermaid from 'remark-mermaidjs';

// https://astro.build/config
export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMermaid],
  },
  integrations: [starlight({
      plugins: [starlightCatppuccin({
          dark: { flavor: "macchiato", accent: "sky" },
          light: { flavor: "latte", accent: "sky" },
      })],
      customCss: [
          './src/styles/global.css',
          '@fontsource/michroma/latin-400.css',
          '@fontsource-variable/montserrat',
          '@fontsource/source-sans-3/latin-400.css',
          '@fontsource/source-sans-3/latin-500.css',
          '@fontsource/source-sans-3/latin-600.css',
          '@fontsource/source-sans-3/latin-700.css',
          '@fontsource/jetbrains-mono/latin-400.css',
          '@fontsource/jetbrains-mono/latin-500.css',
          './src/styles/fonts.css',
      ],
      components: {
          Sidebar: './src/components/starlight/Sidebar.astro',
          Hero: './src/components/starlight/Hero.astro',
          Head: './src/components/starlight/Head.astro',
          Footer: './src/components/starlight/Footer.astro',
          Search: './src/components/starlight/Search.astro',
          ThemeSelect: './src/components/starlight/ThemeSelect.astro',
          PageTitle: './src/components/starlight/PageTitle.astro',
          TableOfContents: './src/components/starlight/TableOfContents.astro',
          MobileTableOfContents: './src/components/starlight/MobileTableOfContents.astro',
      },
      title: 'My Docs',
      locales: {
        root: {
          label: 'Español',
          lang: 'es',
        },
      },
      logo: {
          light: './src/assets/png_logo_dark.png',
          dark: './src/assets/png_logo_light.png',
          alt: 'Logo',
          replacesTitle: true,
      },
      social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/withastro/starlight' }],
      // Sidebar accordion titles: edit each group's `label` below (and item labels / slugs as needed).
      sidebar: [
          {
              label: 'Manual de Uso (Video Aula)',
              items: [
                  // Each item here is one entry in the navigation menu.
                  { label: 'Example Guide', slug: 'guides/example' },
                  { label: 'HeroUI Demo', slug: 'guides/heroui-demo' },
                  { label: 'Modelo de Datos', slug: 'guides/modelo-de-datos' },
                  {
                      label: 'Mantenedor de Usuarios, Roles y Equipos',
                      slug: 'guides/mantenedor-usuarios-roles-equipos',
                  },
                  { label: 'Mantenedor de Alertas', slug: 'guides/mantenedor-alertas' },
                  { label: 'Mantenedor de Estados', slug: 'guides/mantenedor-estados' },
                  { label: 'Offcanvas — Sistema de negocios', slug: 'guides/offcanvas-sistema-negocios' },
                  { label: 'Sistema Chat Interno del Negocio', slug: 'guides/sistema-chat-interno-negocio' },
                  { label: 'Panel de Notificaciones', slug: 'guides/panel-notificaciones' },
                  { label: 'Tema Starlight Sergio Escobar', slug: 'guides/tema-starlight-sergio-escobar' },
                  { label: 'Demo de Documentacion Moderna', slug: 'guides/modern-docs-demo' },
                  { label: 'Video Manager', slug: 'guides/video-manager' },
              ],
          },
          {
              label: 'Referencia',
              autogenerate: { directory: 'reference' },
          },
      ],
      }), react()],

  vite: {
    plugins: [tailwindcss()],
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:3100',
          changeOrigin: true,
        },
      },
    },
  },
});

Iconografia integrada

Cierre

Esta pagina demuestra que Starlight permite construir documentacion mas expresiva sin abandonar una base simple de contenido. Puedes duplicarla y recortar secciones segun el tipo de pagina que necesites publicar.