Crear un blog con Sanity CMS

Este es un proyecto que tiene como objetivo crear un blog completo y funcional utilizando Sanity CMS como plataforma de gestión de contenido

Mi web 😁 "https://toscadev.com/"

Este es un proyecto que tiene como objetivo crear un blog completo y funcional utilizando Sanity CMS como plataforma de gestión de contenido

Instalación

1. Clona este repositorio:
2. Instala las dependencias: npm install
3. Ejecuta el proyecto: npm run dev
4. Ajusta el proyecto a tus necesidades 😁

Inicio rápido

• npm

npm install @sanity/client

npm install --save @sanity/image-url

npm install --save @portabletext/react

• .env

NEXT_PUBLIC_SANITY_PROJECT_ID=""
NEXT_PUBLIC_SANITY_DATASET=""
NEXT_PUBLIC_SANITY_API_VERSION="2024-01-26"
SANITY_SECRET_TOKEN=""

Cuando obtenemos los datos

import { createClient } from "@sanity/client";

export const client = createClient({
  projectId: "your-project-id",
  dataset: "your-dataset-name",
  useCdn: true, // Establecido en "falso" para omitir el caché perimetral
  apiVersion: "2023-05-03", // Use la fecha actual (YYYY-MM-DD) para apuntar a la última versión de API
  // token: process.env.SANITY_SECRET_TOKEN //Sólo si deseas actualizar contenido con el cliente
});

Imágenes

const builder = imageUrlBuilder(client);

//Images
export function urlFor(source: Image) {
  return builder.image(source);
}
//PortableTextComponents
export const urlForImage = (source: Image) => {
  return builder?.image(source).auto("format").fit("max").url();
};

<img
  src={urlFor(mainImage.asset).url()}
  alt={mainImage.alt}
  className="rounded-2xl w-full"
  decoding="async"
  loading="lazy"
/>;

Slug

<Link href={`/blog/post/${slug.current}`}></Link>

Data _ BODY _

Importamos:

import { PortableText, PortableTextComponents } from "@portabletext/react";

<PortableText value={body} components={components} />

const components: PortableTextComponents = {
  types: {
    image: ({ value }) => (
      <div className="p-5 bg-red-500 rounded-3xl">
        <img src={urlForImage(value)} alt="Post" width={700} height={700} />
      </div>
    ),
  },
  block: {
    h2: ({ children }) => (
      <h2 className="text-lg text-primary text-purple-700">{children}</h2>
    ),
    h4: ({ children }) => (
      <h2 className="text-lg text-primary text-purple-700">{children}</h2>
    ),
  },
  marks: {
    strong: ({ children }) => (
      <strong className="text-gray-600 font-semibold py-8">{children}</strong>
    ),
  },
};

Crea un archivo css para editar los elementos de mejor manera.

p {
  @apply mt-6 text-xl leading-8 text-gray-700;
}
strong {
  @apply my-6  font-bold tracking-tight text-gray-900;
}

Enlaces de referencias

@sanity/cliente: - https://www.sanity.io/docs/js-client#from-v5

@sanity/image-url: - https://www.sanity.io/docs/image-url#sanity-image-url

@portabletext/react: - https://www.sanity.io/plugins/portabletext-react

Sanity Studio Preview: - https://www.sanity.io/docs/previews-list-views

Enrrutador app: - https://www.sanity.io/docs/js-client#nextjs-app-router