Apple Notes ist mein CMS

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 Install Notes

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 einer Reihe von Objekten enthält. Jedes Objekt hat drei Eigenschaften:

• Der Name der Notiz (Name)
• Der Zeitpunkt der letzten Änderung (Änderungsdatum)
• Die Körpernotiz in HTML (html_body)

Zum Beispiel:

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

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 wie folgt vorgehen:

• 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/

Das obige ist der detaillierte Inhalt vonApple Notes ist mein CMS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!