CMS EmDash: Разработка первого плагина на TypeScript

Новая CMS EmDash от Cloudflare привлекает разработчиков своей революционной безопасностью. Как мы уже разбирали ранее, благодаря архитектуре Dynamic Workers, плагины здесь работают в изолированных песочницах и не могут уронить или взломать ядро сайта.

Но как устроена разработка под эту систему на практике? В этом руководстве мы с нуля напишем простой, но полезный плагин для автоматического подсчета времени чтения статьи (Reading Time) и вывода его на фронтенд Astro.

Создание структуры плагина

В EmDash каждый плагин является изолированным npm-пакетом. Создайте новую папку в директории src/plugins/emdash-reading-time и инициализируйте проект:

cd src/plugins/emdash-reading-time
npm init -y
npm install typescript --save-dev

Декларация манифеста (Принцип смартфона)

Главное отличие EmDash — плагин обязан заранее запросить права на доступ к данным. Создаем файл plugin.json, в котором описываем наш модуль и его полномочия:

{
  "id": "emdash-reading-time",
  "version": "1.0.0",
  "name": "Reading Time Counter",
  "permissions": {
    "content:read": true
  }
}

Здесь мы запрашиваем право только на чтение контента. Изменить базу данных или отправить что-то в сеть наш плагин физически не сможет, что гарантирует безопасность.

Написание логики на TypeScript

Создаем основной файл плагина index.ts. Логика проста: мы берем текст статьи, считаем количество слов и делим на среднюю скорость чтения человека (примерно 200 слов в минуту).

import { EmDashPlugin, HookContext } from '@emdash/core';

export const ReadingTimePlugin: EmDashPlugin = {
  async init(ctx: HookContext) {
    // Подключаемся к хуку перед выводом статьи на экран
    ctx.hooks.on('content:render', async (pageData) => {
      const text = pageData.content || '';
      const wordsCount = text.trim().split(/\s+/).length;
      
      // Вычисляем минуты (минимум 1 минута)
      const readingTime = Math.max(1, Math.ceil(wordsCount / 200));
      
      // Безопасно подмешиваем данные в объект страницы
      pageData.meta.readingTime = `${readingTime} мин. чтения`;
    });
  }
};

export default ReadingTimePlugin;

Вывод данных в шаблоне Astro

Теперь данные посчитаны и доступны на фронтенде. Чтобы вывести время чтения в вашем шаблоне Astro (например, в файле src/layouts/PostLayout.astro), достаточно вызвать добавленную нами переменную:

---
const { frontmatter } = Astro.props;
---
<article>
  <h1>{frontmatter.title}</h1>
  <div class="post-meta">
    <span>Календарь: {frontmatter.date}</span> | 
    <span class="timer">⏱️ {frontmatter.meta.readingTime}</span>
  </div>
  <slot />
</article>

Плагин готов! Он работает молниеносно, изолирован в песочнице Node.js и автоматически обрабатывает каждую публикацию на вашем сайте.