SaaS Starter
Docs
Archivos Markdown

Archivos Markdown

Cómo funcionan el blog y la documentación.

El proyecto incluye un blog y documentación construidos utilizando Contentlayer y MDX.

Contentlayer

Contentlayer es un CMS basado en Markdown que es flexible y extensible. Te permite organizar el contenido utilizando archivos Markdown y ofrece una API sencilla para acceder a los datos en tu aplicación.

Puedes crear modelos de datos reutilizables para varios tipos de contenido como entradas de blog, documentos y páginas con Contentlayer.

El frontmatter en los archivos Markdown te permite definir metadatos como título, descripción, autores e imágenes, simplificando la gestión del contenido.

contentlayer.config.js

Aquí tienes un ejemplo de un archivo contentlayer.config.js para configurar Contentlayer en tu proyecto:

contentlayer.config.js
import { defineDocumentType, makeSource } from "contentlayer/source-files";
 
/** @type {import('contentlayer/source-files').ComputedFields} */
const computedFields = {
  slug: {
    type: "string",
    resolve: (doc) => `/${doc._raw.flattenedPath}`,
  },
  slugAsParams: {
    type: "string",
    resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
  },
};
 
export const Doc = defineDocumentType(() => ({
  name: "Doc",
  filePathPattern: `docs/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
    published: {
      type: "boolean",
      default: true,
    },
  },
  computedFields,
}));
 
export const Guide = defineDocumentType(() => ({
  name: "Guide",
  filePathPattern: `guides/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
    date: {
      type: "date",
      required: true,
    },
    published: {
      type: "boolean",
      default: true,
    },
    featured: {
      type: "boolean",
      default: false,
    },
  },
  computedFields,
}));
 
export const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `blog/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
    date: {
      type: "date",
      required: true,
    },
    published: {
      type: "boolean",
      default: true,
    },
    image: {
      type: "string",
      required: true,
    },
    authors: {
      type: "list",
      of: { type: "string" },
      required: true,
    },
  },
  computedFields,
}));
 
export const Page = defineDocumentType(() => ({
  name: "Page",
  filePathPattern: `pages/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
  },
  computedFields,
}));
 
export default makeSource({
  contentDirPath: "./content",
  documentTypes: [Page, Doc, Guide, Post],
  mdx: {},
});

Este archivo configura Contentlayer para buscar archivos Markdown en los directorios especificados (content/blog, content/authors, content/docs, content/guides, content/pages). También define los diferentes tipos de documentos que utilizas en tu proyecto junto con los campos asociados a cada tipo de documento.

Puedes personalizar este archivo de acuerdo a las necesidades de tu proyecto añadiendo nuevos tipos de documentos o ajustando los campos existentes según tus requisitos específicos.

Frontmatters

Aquí está la lista de todos los frontmatters disponibles para cada parte:

Autores

---
title: mickasmt
avatar: /_static/avatars/mickasmt.jpg
twitter: mickasmt
---

Blog

---
title: Deploying Next.js Apps
description: How to deploy your Next.js apps on Vercel.
image: /_static/blog/blog-post-3.jpg
date: "2023-01-02"
authors:
  - mickasmt
---

Docs

---
title: Database
description: How to config your Neon database.
---

Guides

---
title: Build a blog using ContentLayer and MDX.
description: Learn how to use ContentLayer to build a blog with Next.js
date: 2022-11-18
---

Pages

---
title: Privacy
description: The Privacy Policy for your app.
---
DiseñosSuscripciones