Einführung

Vielleicht sind Sie bereits auf dieses Meme und die Überlegenheit von Apple Notes gestoßen.

Was wäre, wenn Sie es als CMS verwenden könnten, um den Inhalt Ihres Blogs zu verwalten? Das wollte ich für meine Website „Today I Learned“ ausprobieren. Hier ist das Endergebnis unter https://til.julienc.me

Apple Notes abfragen

Wir brauchen eine Möglichkeit, die Notizen aus Apple Notes abzurufen. Dazu verwenden wir Anyquery, eine SQL-Datenbank, die fast alles abfragen kann, einschließlich Apple Notes.

1. Installieren Sie Anyquery unter https://anyquery.dev/docs/#installation
2. Installieren Sie das Apple Notes-Plugin: AnyQuery-Installationshinweise

3. Fragen Sie unsere Notizen mit SQL ab und speichern Sie sie in JSON (in meinem Fall befinden sich meine Notizen im Ordner TIL)
   

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

Sie haben jetzt eine Datei „notes.json“, die alle Ihre Notizen in einem Array von Objekten enthält. Jedes Objekt hat drei Eigenschaften:

• Der Name der Notiz (Name)
• Die letzte Änderungszeit (Änderungsdatum)
• Die Textnotiz in HTML (html_body)

Zum Beispiel:

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

Unsere letzte Aufgabe besteht darin, die Website damit zu verbinden

Anbindung der Website

Ich persönlich verwende Astro.JS. Unsere erste Aufgabe besteht darin, den statischen Pfad für jeden Eintrag zu generieren.
Dazu kann ich einfach Notizen aus „../../notes.json“ importieren; und übergeben Sie es an die Exportfunktion getStaticPaths(). Ich verwende außerdem eine Slugify-Funktion, um sicherzustellen, dass die generierten URLs gültig sind.

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

Sobald die Pfade generiert sind, müssen wir ein wenig CSS schreiben, um dem Apple Notes-Stil zu entsprechen:

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)

Wir sind jetzt fertig!

Abschluss

Herzlichen Glückwunsch, Sie verwenden jetzt Apple Notes als CMS. Es handelt sich um ein leistungsstarkes, kollaboratives CMS, das nur an die Speichergrenzen Ihrer iCloud gebunden ist. Sie können Bilder, Tabellen, formatierten Text, Code usw. hinzufügen.
Hier ist ein Beispiel für die Formatierungsoptionen:
https://til.julienc.me/example-of-capabilities

Sie können Ihr eigenes Blog von Apple Notes in Vercel bereitstellen, indem Sie Folgendes tun:

• Klonen Sie das Repository Git Clone https://github.com/julien040/apple-notes-cms
• Führen Sie npm install oder pnpm install aus
• Führen Sie chmod u xploy.sh aus
• Führen Sie Vercel aus, um das Projekt zu initiieren und zu verbinden
• Führen Sie ./deploy.sh aus, um das Projekt zu erstellen und an Vercel zu übertragen

Links

Quellcode: https://github.com/julien040/apple-notes-cms
Ergebnis: https://til.julienc.me/