Apple Notes est mon CMS

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 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": "4a249f0d628e2318394fd9b75b4636b1Example473f0a7621bec819994bb5020d29372ae388a4556c0f65e1904146cc1a846beeThis is an example94b3e26ee717c64999d7867364b1b4a3"
    }
]

Notre dernière tâche est d'y connecter le site Web

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 dépôt 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 construire et pousser le projet vers Vercel

Links

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!