CMS Visual respaldado por Git

// tina/config.ts — Configuracion TinaCMS para NutriVerde
import { defineConfig } from "tinacms";

export default defineConfig({
  branch: process.env.NEXT_PUBLIC_TINA_BRANCH || "main",
  clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
  token: process.env.TINA_TOKEN!,

  build: {
    outputFolder: "admin",        // Panel en nutriverde.com/admin
    publicFolder: "public",
  },

  media: {
    tina: {
      mediaRoot: "uploads",       // Imagenes en /public/uploads
      publicFolder: "public",
    },
  },

  schema: {
    collections: [
      // ==============================
      // COLECCION: Blog Posts (MDX)
      // ==============================
      {
        name: "post",
        label: "Articulos del Blog",
        path: "content/posts",
        format: "mdx",
        fields: [
          { type: "string", name: "title", label: "Titulo", isTitle: true, required: true },
          { type: "string", name: "description", label: "Resumen",
            ui: { component: "textarea" } },
          { type: "datetime", name: "publishedAt", label: "Fecha publicacion", required: true },
          { type: "image", name: "heroImage", label: "Imagen destacada" },
          {
            type: "string", name: "category", label: "Categoria",
            options: ["recetas", "nutricion", "bienestar", "ia-alimentacion"],
          },
          {
            type: "object", name: "author", label: "Autor",
            fields: [
              { type: "string", name: "name", label: "Nombre", required: true },
              { type: "image", name: "avatar", label: "Avatar" },
              { type: "string", name: "role", label: "Rol" },
            ],
          },
          {
            type: "rich-text", name: "body", label: "Contenido", isBody: true,
            templates: [
              {
                name: "Callout", label: "Caja de Aviso",
                fields: [
                  { type: "string", name: "type", label: "Tipo",
                    options: ["info", "warning", "tip", "danger"] },
                  { type: "rich-text", name: "children", label: "Contenido" },
                ],
              },
              {
                name: "RecipeCard", label: "Tarjeta de Receta",
                fields: [
                  { type: "string", name: "name", label: "Nombre receta" },
                  { type: "number", name: "kcal", label: "Calorias (kcal)" },
                  { type: "string", name: "time", label: "Tiempo preparacion" },
                  { type: "string", name: "tags", label: "Etiquetas", list: true },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
});

// Server component: obtiene datos en build/request time
export default async function PostPage({ params }: { params: { slug: string } }) {
  const { data, query, variables } = await client.queries.post({
    relativePath: `${params.slug}.mdx`,
  });

  return <PostClient data={data} query={query} variables={variables} />;
}

// Client component: habilita edicion visual con useTina
"use client";
function PostClient({ data, query, variables }: PostClientProps) {
  // useTina: conecta con el panel /admin y refleja cambios en tiempo real
  const { data: tinaData } = useTina({ query, variables, data });
  const post = tinaData.post;

  return (
    <article className="nutriverde-post">
      {post.heroImage && <img src={post.heroImage} alt={post.title} />}
      <h1>{post.title}</h1>
      <p className="description">{post.description}</p>
      <div className="author-row">
        {post.author?.avatar && <img src={post.author.avatar} alt="" />}
        <span>{post.author?.name}</span>
        <time>{new Date(post.publishedAt).toLocaleDateString('es-ES')}</time>
      </div>
      {/* TinaMarkdown renderiza MDX con componentes custom */}
      <TinaMarkdown content={post.body} components={components} />
    </article>
  );
}

// Componentes MDX custom para NutriVerde
const components = {
  Callout: ({ type, children }: any) => (
    <div className={`callout callout-${type}`}>
      {type === "tip" && "💡"} {type === "warning" && "⚠️"}
      <TinaMarkdown content={children} />
    </div>
  ),
  RecipeCard: ({ name, kcal, time, tags }: any) => (
    <div className="recipe-card">
      <h3>{name}</h3>
      <p>{kcal} kcal · {time}</p>
      {tags?.map((t: string) => <span key={t} className="tag">{t}</span>)}
    </div>
  ),
};