Introdução

Você já deve ter se deparado com esse meme e a superioridade do Apple Notes.

Bem, e se você pudesse usá-lo como um CMS para gerenciar o conteúdo do seu blog? Isso é o que eu queria tentar no meu site « Hoje eu aprendi ». Aqui está o resultado final em https://til.julienc.me

Consultando o Apple Notes

Precisamos encontrar uma maneira de buscar as notas do Apple Notes. Para isso, usaremos Anyquery, um banco de dados SQL que pode consultar quase tudo, inclusive Apple Notes.

1. Instale Anyquery em https://anyquery.dev/docs/#installation
2. Instale o plug-in Apple Notes: notas de instalação anyquery

3. Consulte nossas notas usando SQL e salve-as em JSON (no meu caso, minhas notas estão na pasta TIL)
   

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

Agora você tem um arquivo notes.json que contém todas as suas notas em uma variedade de objetos. Cada objeto possui três propriedades:

• O nome da nota (nome)
• Hora da última modificação (modification_date)
• A nota do corpo em HTML (html_body)

Por exemplo:

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

Nossa última tarefa é conectar o site a ele

Conectando o site

Pessoalmente, estou usando Astro.JS. Nossa primeira tarefa será gerar o caminho estático para cada entrada.
Para fazer isso, posso simplesmente importar notas de "../../notes.json"; e passe-o para a função de exportação getStaticPaths(). Também estou usando uma função slugify para garantir que os URLs gerados sejam válidos.

// [...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);

Uma vez gerados os caminhos, precisamos escrever um pouco de CSS para combinar com o estilo do 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)

Agora terminamos!

Conclusão

Parabéns, agora você está usando o Apple Notes como CMS. É um CMS poderoso e colaborativo que está limitado apenas aos limites de armazenamento do iCloud. Você pode adicionar imagens, tabelas, texto formatado, código, etc.
Aqui está um exemplo das opções de formatação:
https://til.julienc.me/example-of-capabilities

Você pode implantar seu próprio blog do Apple Notes para Vercel fazendo o seguinte:

• Clone o repositório git clone https://github.com/julien040/apple-notes-cms
• Execute npm install ou pnpm install
• Execute chmod u x deploy.sh
• Execute o vercel para iniciar e conectar o projeto
• Execute ./deploy.sh para compilar e enviar o projeto para Vercel

Ligações

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