Добро пожаловать в подробное руководство для творцов Salormoon. Здесь вы получите всю исчерпывающую информацию о том, что и как делать.

Конечно же данное руководство будет обновляться и дополняться.

Пока что тут всё сыровато. Но вы уже можете кратко ознакомиться!

Погружение

Погружаемся во всю необходимую базу для работы.

Инструменты

Что будет использоваться и что нужно настроить.

• Forgejo. Площадка для совместной разработки проектов.
• [Редактор кода]. Место где вы можете редактировать файлы и собрать проект.
• [Git]. Система контроля версий.
• [Bun]. JS runtime для сборки сайта.

Если вы не знаете какой использовать редактор кода, рекомендуем попробовать вам Zed.

Сборка

Немного о том, как собрать сайт локально. Для начала нужно загрузить проект.

git clone https://git.miroq.ru/salor/site salor

После этого у вас появится директория salor, где код сайта. Дальше необходимо установить зависимости для сборки. Для этого в загруженной директории нужно выполнить команду:

bun intsll

Для запуска тестового окружения:

bun dev

А для того чтобы выполнить сборку:

bun run build

Вот и всё, ничего как видите сложного в этом нету. По крайней мере для тех кто разбирается в этом.

Архитектура

Давайте теперь разберёмся где и что лежит. Рассмотрим только часто используемые директории:

├── content/            - Динамические данные, участвующие в сборке сайта.
│   ├── pages/          - Пользовательские страницы в формате md/mdx.
│   ├── announces.json  - Список анонсов на главной странице.
│   └── events.json     - СОбытия для календаря.
├── src/                - Исходный код сайта на Astro + React.
│   ├── features/       - Разделённый по доменам функционал.
│   ├── pages/          - Страницы сайта, собирающие компоненты воедино.
│   └── shared/         - Часто используемые примитивные компоненты.
└── public/             - Статические файлы, участвующие в сборке (лого).

Контент

Начнём с простого - редактирования динамического содержимого. Это содержимое, которые вынесено в папку content и участвует в сборке. Прекрасно оно тем, что не требует дополнительных знаний программирования. Но и функционал взамен несколько ограничен.

Страницы

Просто создайте файл с расширением .md в директории content/pages/. Файлы начинается с описания метаданных:

title: События
description: Какие события проводятся на сервере.
created: 2026-04-07
updated: 2026-05-20
author: milinuri
group: salor

Анонсы

Все анонсы на сайте находятся по пути: content/announces.json.

[[announce]]
id = 14
title = "Новая Chiori!"
date = "2026-05-22"
content = "А вы уже видели новую аватарку и обложку, ну как вам?"
color = "green"
group = "Chiori"

• id: Уникальный идентификатор анонса. Целое положительное число. Увеличивается каждый раз. Они не должны повторяться.
• title: Отображаемый заголовок анонса.
• date: Когда был проведён анонс, в формате YYYY-MM-DD.
• content: Краткое описание до 3х предложений.
• badge: цветная плашка анонса.
  • variant: Цвет, может быть: red, yellow, green, blue, purple, aqua.
  • label: Текст на самой плашке. Одним словом с большой буквы.

События

Все события на сайте находятся по пути: content/events.json.

  {
    "id": 39,
    "title": "Вечер обнимашек",
    "start": "2026-05-23 18:00",
    "end": "2026-05-24",
    "content": "Устали от тяжёлой недели. давайте просто проведём время в хорошей компании друзей.",
    "author": "Milinuri",
    "color": "purple"
  },

Нечто большее

Выходим за рамки content/ и делаем куда более интересные вещи. Такое приключение уже потребует знаний программирования. А если точнее, знание следующих технологий:

• Typescrypt.
• Astro.
• React.
• Tailwindcss.
• Lucide.

При желании этому можно научиться. Структура директории src:

├── features/         - Функционал сайта, поделённый по фишкам.
├── layout/           - Стиль расположения элементов на странице.
├── pages/            - Статические и динамические страницы сайта.
├── shared/           - Общие переиспольуземые компоненты.
├── styles/           - Глобальные стилии сайта.
└── content.config.ts - Динамические коллекции.

Content

Описание динамических коллекций.

Styles

Глобальные стили для сайта.

Shared

Общие пере используемые компоненты.

Страницы

Статические и динамические страницы сайта.

Layout

Стиль расположения элементов на странице.

Features

Функционал сайта, поделённый по фишкам.