Introduction

Vous avez peut-être déjà rencontré ce mème et la supériorité d'Apple Notes.

Et si vous pouviez l’utiliser comme CMS pour gérer le contenu de votre blog ? C’est ce que j’ai voulu essayer pour mon site « Aujourd’hui, j’ai appris ». Voici le résultat final sur https://til.julienc.me

Interroger les notes Apple

Nous avons besoin d'un moyen de récupérer les notes d'Apple Notes. Pour ce faire, nous utiliserons Anyquery, c'est une base de données SQL qui peut interroger presque tout, y compris Apple Notes.

1. Installez Anyquery sur https://anyquery.dev/docs/#installation
2. Installez le plugin Apple Notes : notes d'installation d'anyquery

3. Interrogez nos notes en utilisant SQL et enregistrez-les au format JSON (dans mon cas, mes notes sont dans le dossier TIL)
   

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

Vous disposez désormais d'un fichier notes.json qui contient toutes vos notes dans un tableau d'objets. Chaque objet possède trois propriétés :

• Le nom de la note (nom)
• Sa dernière heure de modification (modification_date)
• La note du corps en HTML (html_body)

Par exemple:

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

Notre dernière tâche est de connecter le site Web à celui-ci

Connecter le site Web

Personnellement, j'utilise Astro.JS. Notre première tâche sera de générer le chemin statique pour chaque entrée.
Pour ce faire, je peux simplement importer des notes depuis "../../notes.json" ; et transmettez-le à la fonction d'exportation getStaticPaths(). J'utilise également une fonction slugify pour garantir la validité des URL générées.

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

Une fois les chemins générés, nous devons écrire un peu de CSS pour correspondre au style 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)

Nous avons maintenant terminé !

Conclusion

Félicitations, vous utilisez désormais Apple Notes comme CMS. Il s'agit d'un CMS puissant et collaboratif qui est simplement lié à vos limites de stockage iCloud. Vous pouvez ajouter des images, des tableaux, du texte formaté, du code, etc.
Voici un exemple des options de formatage :
https://til.julienc.me/example-of-capabilities

Vous pouvez déployer votre propre blog depuis Apple Notes vers Vercel en procédant comme suit :

• Cloner le référentiel git clone https://github.com/julien040/apple-notes-cms
• Exécutez l'installation npm ou l'installation pnpm
• Exécutez chmod u x déployer.sh
• Exécutez Vercel pour initialiser et connecter le projet
• Exécutez ./deploy.sh pour créer et transférer le projet vers Vercel

Links

Code source : https://github.com/julien040/apple-notes-cms
Résultat : https://til.julienc.me/