Apple notes is my CMS-JS Tutorial-php.cn

Apple notes is my CMS

WBOY

Release： 2024-08-13 06:59:16

Original

736 people have browsed it

Introduction

You may have already come across this meme and the superiority of Apple Notes.
Apple notes is my CMS
Well, what if you could use it as a CMS to manage the content of your blog? That’s what I wanted to try for my « Today I learned » website. Here is the end result at https://til.julienc.me

Apple notes is my CMS

Querying Apple Notes

We need a way to fetch the notes from Apple Notes. To do so, we’ll use Anyquery, it’s a SQL database that can query almost anything, including Apple Notes.

Install Anyquery at https://anyquery.dev/docs/#installation
Install the Apple Notes plugin: anyquery install notes

Query our notes using SQL and save it to JSON (in my case, my notes are in the folder TIL)

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

Copy after login

You now have a file notes.json which contains all your notes in an array of objects. Each object has three properties:

The name of the note (name)
Its last modified time (modification_date)
The body note in HTML (html_body)

For example:

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

Copy after login

Our last task is to connect the website to it

Connecting the website

Personally, I’m using Astro.JS. Our first task will be to generate the static path for each entry.
To do so, I can just do import notes from "../../notes.json"; and pass it to export function getStaticPaths(). I’m also using a slugify function to ensure the generated URLs are valid.

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

Copy after login

Once paths are generated, we need to write a little bit of CSS to match the Apple Notes style:

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)

Copy after login

We are now done !

Conclusion

Congratulations, you're now using Apple Notes as a CMS. It's a powerful, collaborative CMS that is just bound to your iCloud storage limits. You can add images, tables, formatted text, code, etc.
Here is an example of the formatting options:
https://til.julienc.me/example-of-capabilities
Apple notes is my CMS