Introducción

Es posible que ya te hayas topado con este meme y la superioridad de Apple Notes.

Bueno, ¿y si pudieras utilizarlo como CMS para gestionar el contenido de tu blog? Eso es lo que quería probar para mi sitio web "Hoy aprendí". Aquí está el resultado final en https://til.julienc.me

Consultar notas de Apple

Necesitamos una forma de recuperar las notas de Apple Notes. Para hacerlo, usaremos Anyquery, es una base de datos SQL que puede consultar casi cualquier cosa, incluidas Apple Notes.

1. Instale Anyquery en https://anyquery.dev/docs/#installation
2. Instalar el complemento Apple Notes: notas de instalación de anyquery

3. Consultar nuestras notas usando SQL y guardarlas en JSON (en mi caso, mis notas están en la carpeta TIL)
   

   anyquery -q "SELECT name, html_body, modification_date 
   FROM notes_items WHERE folder = 'TIL';" --json > notes.json 
   

Ahora tienes un archivo notes.json que contiene todas tus notas en una serie de objetos. Cada objeto tiene tres propiedades:

• El nombre de la nota (nombre)
• Hora de su última modificación (fecha_modificación)
• La nota del cuerpo en HTML (html_body)

Por ejemplo:

[
    {
        "name": "Example",
        "modification_date": "2024-08-11T00:00:00Z",
        "html_body": "
Example
This is an example
"
    }
]

Nuestra última tarea es conectar el sitio web a él

Conectando el sitio web

Personalmente, estoy usando Astro.JS. Nuestra primera tarea será generar la ruta estática para cada entrada.
Para hacerlo, puedo simplemente importar notas desde "../../notes.json"; y páselo a la función de exportación getStaticPaths(). También estoy usando una función slugify para garantizar que las URL generadas sean válidas.

// [...blog].astro
import notes from "../../notes.json";

function slugify(string: string) {
    return string
        .toLowerCase()
        .replace(/\s /g, "-")
        .replace(/[^a-z0-9-]/g, "");
}

export function getStaticPaths() {
    return notes.map((note) => {
        return {
            params: {
                blog: slugify(note.name),
            },
        };
    });
}

const { blog } = Astro.params;
const note = notes.find((note) => slugify(note.name) === blog);

Una vez generadas las rutas, necesitamos escribir un poco de CSS para que coincida con el estilo de Apple Notes:

article.notes {
            color: #454545;
            font-size: 0.9rem;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: -0.015rem;
        }

article.notes > div:first-child > h1 {
        color: #de9807;
        margin-bottom: 0.5rem;
}

... truncated (retrieve the full CSS in the repository at src/styles.css)

¡Ya hemos terminado!

Conclusión

Felicitaciones, ahora estás usando Apple Notes como CMS. Es un CMS potente y colaborativo que está limitado a los límites de almacenamiento de iCloud. Puedes agregar imágenes, tablas, texto formateado, código, etc.
A continuación se muestra un ejemplo de las opciones de formato:
https://til.julienc.me/ejemplo-de-capacidades

Puedes implementar tu propio blog desde Apple Notes en Vercel haciendo lo siguiente:

• Clonar el repositorio git clone https://github.com/julien040/apple-notes-cms
• Ejecute npm install o pnpm install
• Ejecutar chmod u x implementar.sh
• Ejecute vercel para iniciar y conectar el proyecto
• Ejecute ./deploy.sh para compilar y enviar el proyecto a Vercel

Campo de golf

Código fuente: https://github.com/julien040/apple-notes-cms
Resultado: https://til.julienc.me/