Введение

Возможно, вы уже сталкивались с этим мемом и превосходством Apple Notes.

А что, если бы вы могли использовать его в качестве CMS для управления содержимым своего блога? Это то, что я хотел попробовать на своем веб-сайте «Сегодня я узнал». Вот конечный результат на https://til.julienc.me

Запрос Apple Notes

Нам нужен способ получать заметки из Apple Notes. Для этого мы будем использовать Anyquery — базу данных SQL, которая может запрашивать практически все, включая Apple Notes.

1. Установите Anyquery по адресу https://anyquery.dev/docs/#installation.
2. Установите плагин Apple Notes: примечания по установке любого запроса

3. Запросите наши заметки с помощью SQL и сохраните их в JSON (в моем случае мои заметки находятся в папке TIL)
   

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

Теперь у вас есть файл Notes.json, который содержит все ваши заметки в виде массива объектов. Каждый объект имеет три свойства:

• Название заметки (имя)
• Время последнего изменения (modification_date)
• Примечание к телу в HTML (html_body)

Например:

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

Наша последняя задача — подключить к нему сайт

Подключение веб-сайта

Лично я использую Astro.JS. Нашей первой задачей будет создание статического пути для каждой записи.
Для этого я могу просто импортировать заметки из «../../notes.json»; и передайте его в функцию экспорта getStaticPaths(). Я также использую функцию slugify, чтобы убедиться, что сгенерированные URL-адреса действительны.

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

После создания путей нам нужно написать немного CSS, чтобы он соответствовал стилю 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)

Мы закончили !

Заключение

Поздравляем, теперь вы используете Apple Notes в качестве CMS. Это мощная CMS для совместной работы, которая ограничена ограничениями вашего хранилища iCloud. Вы можете добавлять изображения, таблицы, форматированный текст, код и т. д.
Вот пример параметров форматирования:
https://til.julienc.me/example-of-capabilities

Вы можете развернуть свой собственный блог из Apple Notes в Vercel, выполнив следующие действия:

• Клонируйте репозиторий git clone https://github.com/julien040/apple-notes-cms
• Запустите установку npm или установку pnpm
• Запустите chmod u x Deploy.sh
• Запустите vercel для инициализации и подключения проекта
• Запустите ./deploy.sh, чтобы собрать проект и отправить его в Vercel

Ссылки

Исходный код: https://github.com/julien040/apple-notes-cms
Результат: https://til.julienc.me/