Інтеграція з Astro

Astro - це статичний сайт-будівельник, який дозволяє створювати статичні сайти з сучасним, швидким і безпечним підходом.

Щоб інтегрувати наш CMS з Astro, вам потрібно створити новий проект Astro і підключити до нього CMS.

Створення нового проекту Astro

npm create astro@latest

Встановлення залежностей

Додайте наступний файл до директорії src/utils вашого проекту Astro.

Каталогsrc
- Каталогutils
  - cms.js
astro.config.mjs
package.json

import { loadEnv } from "vite";
 const data = loadEnv(process.env.NODE_ENV, process.cwd(), "");
 const host = data.CMS_HOST;
 const TOKEN = data.CMS_TOKEN;

 export async function getContents(type, params = {}) {
     const { limit = 10, page, tags, desc } = params;
     const options = {
         method: 'GET',
         headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${TOKEN}`,
         }
     };
     try {
         const ifFilter = tags ? `&filter=tags=${tags}` : '';
         const ifOrder = desc ? `&order=created_at` : '&order=created_at&desc=1';
         const ifPage = page ? `&page=${page}` : '';
         const fetchUrl = `${host}/api/cms/${type}?limit=${limit}${ifFilter}${ifPage}${ifOrder}`;
         const body = await fetch(fetchUrl, options);
         if (body.status === 404) return [];

         const { rows, total, filtered } = await body?.json();
         return { rows, total, filtered };
     } catch (err) {
         console.log(err)
         return [];
     }
 }

Редагуйте файл astro.config.mjs, додайте адаптер node і проксі для отримання медіа файлів.

import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';

export default defineConfig({
//...
 output: "server",
 adapter: node({
    mode: 'middleware',
}),
 vite: {
    server: {
        proxy: {
           '/files': {
           target: 'https://cms-host.com',
           changeOrigin: true,
           secure: false
           }
        }
    }
 }
//...
});

Створіть і налаштуйте файл .env. (Див. Змінні середовища)
- .env
- astro.config.mjs
- package.json

Запуск CMS і створення колекції контенту

Налаштуйте сервер і встановіть CMS
Terminal window
```
npm install @opengis/cms@latest
```
Запустіть CMS-додаток.
Terminal window
```
node --env-file=.env server
```
Якщо все зроблено правильно, ви повинні побачити наступне (або подібне) повідомлення в консолі:
Terminal window
```
Server is running on http://localhost:3000
```
Ви можете почати створювати колекції контенту в web-інтерфейсі CMS (див. Створення контенту).

Отримання даних

Компоненти Astro можуть отримувати дані з CMS за допомогою функції getContents.

Приклад сторінки індексу блогу:

---
import { getContents } from "@/utils/cms";
let { rows } = await getContents("blog");     // collection name
---

<Layout title="Blog">
    <BlogList data={rows} />
</Layout>

Приклад сторінки slug блогу:

---
import { getContents } from "@/utils/cms";

const { slug } = Astro.params;
const { rows } = await getContents("blog/" + slug);
blog_post = rows[0] || null;
---

<Layout title="Blog">
    <BlogPage data={blog_post} />
</Layout>