Atrial — сайт мастерской
Сайт atrial.org: блог, инструкции к изделиям (на них ведут QR-коды), проекты и магазин мастерской Atrial. Ещё на сайте есть генератор QR-кодов, подбор цвета наличника в 3D и фид товаров для Яндекса.
Сайт статический: при сборке все страницы превращаются в готовые HTML-файлы (папка out/), которые можно положить на любой хостинг. Сервер, база данных и PHP не нужны.
Сделан на Next.js с MDX (Markdown со вставками компонентов), Tailwind CSS и Motion. Основа — шаблон Брайана Руиса (b-r.io).
Содержание
Как добавить статью или инструкцию
Проще всего — в Верстаке, редакторе статей прямо на сайте. Его адрес не указан нигде на сайте, храните его в закладках. Верстак сам собирает файл статьи, сжимает фото и кнопкой «Опубликовать» отправляет всё в этот репозиторий. Через 2–3 минуты статья появляется на сайте.
Всё про оформление текста, фото, карусели, кнопки, типографику и про то, как подключить Верстак к GitHub, — в Гиде по сайту (файл src/app/instructions/site-manual/page.mdx). Это та же страница, что открывается кнопкой «Инструкция» в Верстаке.
Коротко, где лежат записи:
| Что | Папка | Адрес на сайте |
|---|
| Статьи и видео | src/app/blog/<адрес>/page.mdx | atrial.org/blog/<адрес> |
| Инструкции | src/app/instructions/<адрес>/page.mdx | atrial.org/instructions/<адрес> |
| Статьи о проектах | src/app/projects/<адрес>/page.mdx | atrial.org/projects/<адрес> |
В Верстаке раздел выбирается полем «Тип»: статья и видео идут в блог, инструкция — в инструкции, проект — в проекты. Статьи о проектах обычно публикуются «только по прямой ссылке»: на них ведут карточки на странице «Проекты» (src/app/projects/page.tsx, поле link).
Адрес — это имя папки: латиницей, строчными, через дефис (pechka-burzhujka). Не меняйте адреса инструкций: на них ведут QR-коды на изделиях, и старый код перестанет работать.
Как добавить товар
Проще всего — в Верстаке: тип записи «Товар», у него есть цена, порядок в магазине, инструкция и галочка «В продаже». Вручную: создайте папку src/app/market/<адрес>/, положите туда page.mdx и фото photo.webp. Удобнее всего скопировать папку существующего товара, например zlynka, и поменять в ней текст.
Начало файла page.mdx:
import { ProductLayout } from '@/components/ProductLayout'
import { createProductMetadata } from '@/lib/products'
import photo from './photo.webp'
export const product = {
name: 'Наличник «Злынка»',
description: 'Одно-два предложения: видно в карточке магазина и в превью ссылки',
price: 2500, // в рублях; без цены будет «Цена по запросу»
image: photo, // одно фото 3:4, см. «Какими делать фото»
// или несколько: на странице товара будет карусель, в карточке магазина — первое фото
// images: [photo1, photo2, photo3], // import photo1 from './01.webp' и т. д.
instruction: '/instructions/zlynka', // необязательно: кнопка «Инструкция»
order: 20, // место в магазине: меньше — выше
available: false, // необязательно: «Купить» неактивна, пока товар не в продаже
}
export const metadata = createProductMetadata(product, 'zlynka') // адрес товара, как имя папки
export default ({ children }) => <ProductLayout product={product}>{children}</ProductLayout>
Ниже — подробное описание товара обычным Markdown, как в статьях.
Кнопка «Купить» предлагает написать в Telegram или ВКонтакте. Куда именно она ведёт, задаётся в Верстаке («Настройки») или в src/content/site.json (buyLinks), одинаково для всех товаров.
Из магазина товар открывается «всплывающей» страницей: фото перелетает из карточки, страница выезжает снизу (View Transitions, src/components/ProductTransition.tsx). В браузерах без этой технологии и при включённом «уменьшении движения» это обычный переход. Товары с ценой сами попадают в фид для Яндекса.
Страницы вне меню и служебные адреса
Новые публичные страницы добавляйте в sitemap.ts и в список превью в src/app/og/[section]/[file]/route.tsx.
Генератор QR-кодов
atrial.org/qr — бесплатный генератор для всех: ссылка (по желанию с UTM-метками), Wi-Fi, визитка, текст, событие, геолокация. Оформление как на vkqr.ru: только код, с рамкой и надписью, с фоном или карточка с фото; цвета #111111, #ededed, #ffcc00 или свой; в центре — логотип Atrial, своя иконка или ничего.
- Код рисует библиотека ВКонтакте @vkontakte/vk-qr (MIT), поэтому он выглядит в точности как на vkqr.ru. Она собирает код из сотен перекрывающихся плиток — LightBurn открывает такой SVG россыпью кусочков. Поэтому перед скачиванием SVG плитки склеиваются в один контур с помощью paper.js (merge.ts), а надписи переводятся в кривые шрифтом Golos Text через opentype.js — файлы шрифта лежат в
public/fonts. opentype.js нужен версии 1.3.4: в 2.0 некоторые буквы ломаются.
- Логотип в центре — src/components/qr/mark.ts: квадратный знак Atrial, вписанный в контур логотипа ВКонтакте из vk-qr, с теми же скруглениями и зазором до кода.
- На вкладке «Геолокация» показывается карта Яндекса, если задан ключ
YANDEX_MAPS_KEY (см. Настройки сборки). Без ключа там только поле координат.
- Превью страницы — QR-код, ведущий на сам генератор (preview.ts).
Подбор цвета наличника
atrial.org/colors — 3D-модель наличника «Злынка» на стене: каждую деталь можно покрасить, есть готовые сочетания и пять видов стены. Цвета хранятся в адресе (#c=<цвета деталей>&w=<стена>.<цвет>), поэтому ссылкой можно поделиться раскраской.
- Модель —
public/models/nalichnik-1.glb, сжатая Draco; декодер лежит в public/draco, внешние CDN не нужны. Рисует three.js (scene.ts).
- Модель делается из STEP-файла из Компаса скриптами отдельного проекта
nalichnik: tools/convert.py разбивает чертёж на детали покраски (номера тел STEP → зоны), tools/pack.sh упрощает сетку и сжимает Draco. Готовый .glb кладётся в public/models.
- Названия деталей, палитры, готовые сочетания и стены — src/components/nalichnik/palette.ts. Имя каждой детали должно совпадать с именем сетки в модели.
Короткие ссылки для QR-кодов
На стикерах в магазинах и на карточке в наборах стоят короткие адреса atrial.org/q/mesto, /q/prostranstvo, /q/retrushka, /q/merch, /q/card. Каждый перебрасывает на нужную страницу с метками utm_source=qr&utm_medium=offline&utm_campaign=<место>, и в Яндекс Метрике видно, сколько людей пришло с каждой полки: Отчёты → Источники → Метки UTM.
Список — в scripts/qr-links.mjs. Перед каждой сборкой (npm run build) скрипт пишет из него страницы-переадресации public/q/<место>.html; эта папка в .gitignore. Если поменять там адрес, напечатанный код начнёт вести на новую страницу — перепечатывать не нужно. Новое место — новая строка в списке.
Фид товаров для Яндекса
atrial.org/market.xml — каталог в формате YML для Яндекс Бизнеса, Товаров и Директа. Собирается при каждой сборке из тех же данных, что и магазин (src/app/market.xml/route.ts): название, цена, описание, фото, ссылка. В фид попадают только товары с ценой: «цены по запросу» в YML нет. Категория — по началу названия: «Наличник…», «Часы…», остальное — «Изделия мастерской».
Фид подключён в Яндекс Бизнесе по ссылке. Яндекс Бизнес берёт у товара только первое фото и предупреждает об остальных — это нормально.
Превью ссылок
Для каждой страницы при сборке рисуется картинка 1200 × 630 для Telegram, ВКонтакте и других соцсетей: слева фото 3:4, справа заголовок и описание (src/lib/og.tsx). Фото берётся так:
| Страница | Фото |
|---|
| Статья, инструкция, проект | первое фото, импортированное в записи |
| Товар | первое фото товара |
| Разделы сайта | src/images/og/<раздел>.webp (или .jpg, .png): index, about, blog, projects, market, instructions, privacy, colors, editor |
/qr | QR-код самого генератора |
Нет фото — на его месте пустая рамка со значком, как у товаров в магазине. Чтобы рамка сменилась фото, положите файл в src/images/og или добавьте фото в запись. Обложку записи целиком (1.91:1) можно задать полем ogImage.
Что где редактируется
Почти всё содержимое сайта меняется в Верстаке (atrial.org/editor-k7f3x9q2) без кода: статьи, инструкции, проекты, товары, главная, «Обо мне», тексты разделов, превью ссылок, соцсети и кнопка «Купить». Верстак сохраняет изменения прямо в репозиторий через GitHub, сайт пересобирается сам. Для этого один раз подключается токен GitHub (как его создать — в инструкции «Как писать статьи»).
Верстак хранит тексты в файлах src/content/*.json, их можно править и вручную:
| Что | Где |
|---|
| Главная: заголовок, текст, подписи к фото, «Где купить» | src/content/home.json, логотипы мест — public/images/places/ |
| Фото в ленте на главной | src/images/home/01.webp…05.webp |
| Обо мне: заголовок и текст | src/content/about.json, портрет — src/images/me.webp |
| Проекты | src/content/projects.json, логотипы — public/images/projects/ |
| Заголовки и тексты блога, инструкций, магазина | src/content/sections.json |
Соцсети, ссылки кнопки «Купить», жёлтая плашка вверху сайта (testBanner, сейчас выключена) | src/content/site.json |
| Название и описание сайта, оператор данных | src/lib/site.ts |
| Пункты меню | src/components/Header.tsx и src/components/Footer.tsx |
| Аватарка-логотип в шапке | src/images/atrial-avatar.svg |
| Фото в превью ссылок на разделы | src/images/og/<раздел>.webp, см. Превью ссылок |
Какими делать фото
Сайт не сжимает фото сам: посетитель скачивает ровно тот файл, который лежит в репозитории. Верстак готовит фото статей автоматически, а всё остальное (товары, главная, «Обо мне») нужно подготовить вручную. Удобнее всего — в Squoosh: перетащите фото, выберите WebP, задайте ширину и качество 80.
| Где фото | Пропорции | Размер | Вес |
|---|
| В статье | 3:2 или 4:3 горизонтально, вертикальные — не уже 4:5 | 1600 px по длинной стороне | 150–400 КБ |
| Карусель в статье | одинаковые у всех фото, по умолчанию 3:2 | 1600 px по длинной стороне | 150–400 КБ |
Товар (одно фото или карусель images) | 3:4 вертикально, все фото одинаковые | 1200 × 1600 | 150–350 КБ |
| Лента на главной | вертикальное 4:5 | 800 × 1000 | до 200 КБ |
| Портрет «Обо мне» | вертикальное 4:5 | 1024 × 1280 | до 300 КБ |
Фото для превью раздела (src/images/og) | любые, обрежется до 3:4 по центру | от 900 px по ширине | любой |
Обложка записи для соцсетей (ogImage) | 1.91:1 | 1200 × 630 | до 300 КБ |
Почему так:
- Размер. Колонка с текстом шириной около 670 px, а на телефонах и Retina-экранах нужно вдвое больше. 1600 px хватает с запасом. Снимок с телефона (4000+ px) обязательно уменьшайте — иначе страница будет грузиться долго.
- Формат. Фото — WebP с качеством 75–85 %, на крайний случай JPG. PNG — только для скриншотов и схем с мелким текстом. HEIC (формат iPhone) браузеры не показывают: конвертируйте или включите на iPhone Настройки → Камера → Форматы → Наиболее совместимый.
- Товар — 3:4. В карточке магазина и в карусели на странице товара фото показывается вертикально в пропорции 3:4, поэтому фото 3:4 видно целиком. Другие пропорции обрежутся по центру. В карточку идёт первое фото.
- Лента на главной обрезается до 4:5 по центру — у горизонтальных фото срежутся края.
- Имена файлов — латиницей, без пробелов:
photo.webp, 01.webp, pechka.webp.
Иконки сайта
Все иконки сделаны из одного знака-сквиркла, исходник — src/images/favicon-mark.svg. При замене логотипа нужно заменить все файлы из таблицы, сохранив имена и размеры.
| Файл | Размер | Где видно | Требования |
|---|
src/app/favicon.ico | 16, 32 и 48 px в одном файле | вкладка браузера, закладки, поиск Яндекса и Google | можно с прозрачностью |
src/app/icon.svg | вектор | вкладка в современных браузерах | можно с прозрачностью |
src/app/icon.png | 512 × 512 | вкладка, если браузер не понимает SVG | можно с прозрачностью |
src/app/apple-icon.png | 180 × 180 | iPhone и iPad: «На экран „Домой“» | без прозрачности: iOS сама скругляет углы, а прозрачное становится чёрным |
public/icons/icon-192.png | 192 × 192 | Android: ярлык на главном экране | можно с прозрачностью |
public/icons/icon-512.png | 512 × 512 | Android: экран загрузки; картинка для RSS | можно с прозрачностью |
public/icons/icon-maskable-512.png | 512 × 512 | Android: ярлык в форме круга, капли и т. п. | без прозрачности, логотип в центральных 80 %: края Android обрезает |
Файлы из src/app/ подключаются сами. Название и цвета для Android — в src/app/manifest.ts. Весь набор можно сделать из одной картинки на realfavicongenerator.net и разложить по путям из таблицы.
Как сайт попадает на atrial.org
Сайт живёт на GitHub Pages и обновляется сам:
- Вы публикуете статью из Верстака, коммитите изменения на GitHub через сайт или делаете
git push с компьютера.
- GitHub Actions (.github/workflows/deploy.yml) собирает сайт и выкладывает его. Это занимает 2–3 минуты, ход сборки виден на вкладке Actions репозитория.
- Если в статье ошибка, сборка падает с красным крестиком, а на сайте остаётся прошлая версия. Текст ошибки — в шаге Build этой сборки.
Кроме того, сайт пересобирается каждый день в 06:00 по Москве, чтобы обновить число просмотров статей.
Настройки, которые уже сделаны и которые не нужно трогать:
- Settings → Pages → Source: GitHub Actions. Custom domain:
atrial.org, галочка Enforce HTTPS.
- DNS домена — в Cloudflare. Записи
A для atrial.org указывают на адреса GitHub 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153, запись CNAME для www — на atrialcraft.github.io. Прокси Cloudflare (оранжевое облако) выключен — с ним сайт плохо открывается из России.
- ID аналитики — в Settings → Secrets and variables → Actions (см. «Настройки сборки»).
Как разместить сайт на обычном хостинге по FTP
Если сайт нужно перенести с GitHub Pages на обычный хостинг для сайтов (Beget, Timeweb, REG.RU и т. п.), где есть только FTP или файловый менеджер, а консоли нет, — это возможно: хостингу нужно лишь отдавать готовые файлы.
Шаг 1. Получить собранный сайт
Способ А — скачать готовую сборку с GitHub, ничего не устанавливая.
- Откройте в репозитории вкладку Actions и выберите последнюю успешную сборку (зелёная галочка) Deploy to GitHub Pages.
- Внизу страницы, в блоке Artifacts, скачайте
github-pages. Скачается github-pages.zip.
- Распакуйте его: внутри будет файл
artifact.tar — распакуйте и его (на Mac — двойным щелчком, на Windows — 7-Zip или WinRAR). Получится папка с index.html, _next, blog и другими файлами — это и есть сайт.
Такая сборка сделана для адреса https://atrial.org. Если сайт будет открываться по другому адресу, используйте способ Б.
Способ Б — собрать на своём компьютере.
-
Установите Node.js версии LTS (24 или новее) и скачайте репозиторий — или сделайте git clone.
-
Откройте Терминал в папке проекта (на Mac: правой кнопкой по папке → Новый терминал по адресу папки; на Windows: в адресной строке папки наберите cmd и Enter).
-
Выполните по очереди:
npm ci
NEXT_PUBLIC_SITE_URL=https://ваш-домен.ru npm run build
На Windows вторая команда пишется так: set NEXT_PUBLIC_SITE_URL=https://ваш-домен.ru && npm run build. ID аналитики передаются так же, см. «Настройки сборки».
-
Готовый сайт появится в папке out/.
Шаг 2. Загрузить на хостинг
- Подключитесь к хостингу по FTP, например программой FileZilla (данные для входа — в панели хостинга).
- Откройте папку сайта на хостинге — обычно
public_html, www или папка с именем домена. Удалите из неё старые файлы сайта (если это первая загрузка — заглушку хостинга, обычно index.html или index.php).
- Загрузите в неё содержимое собранной папки — не саму папку, а то, что внутри:
index.html, _next, blog и остальное.
- Убедитесь, что загрузился скрытый файл
.htaccess. Без него будут открываться только главная и страницы с .html на конце, а /blog и остальные адреса выдадут ошибку 404. FileZilla показывает скрытые файлы, если включить Сервер → Принудительно показывать скрытые файлы. На Mac в Finder скрытые файлы показываются сочетанием Cmd + Shift + ..
- Откройте сайт и проверьте главную,
/blog и любую статью.
Что нужно от хостинга
- Apache с поддержкой
.htaccess — так устроено большинство обычных хостингов. Файл public/.htaccess научит его открывать /blog/pechka-burzhujka как blog/pechka-burzhujka.html и показывать фирменную страницу 404.
- Если на хостинге только nginx и
.htaccess не работает, напишите в поддержку: «Для статического сайта нужно try_files $uri $uri.html $uri/ =404; и error_page 404 /404.html;».
- Домен и HTTPS подключаются в панели хостинга. Если меняете хостинг для
atrial.org, перенаправьте DNS-записи домена в Cloudflare на адрес нового хостинга, а на GitHub в Settings → Pages уберите свой домен.
Как обновлять сайт на таком хостинге
Каждое изменение — новая статья, товар, правка текста — требует заново получить сборку (шаг 1) и заново загрузить её (шаг 2), заменив все файлы. Старую папку _next лучше удалять целиком: в ней копятся файлы прошлых версий.
Учтите:
- Верстак публикует статьи в репозиторий GitHub, а не на хостинг. После публикации дождитесь, пока на GitHub закончится сборка, и перенесите её на хостинг.
- Число просмотров обновляется только при сборке на GitHub, то есть в сборке со способа А оно свежее, а со способа Б — такое, какое лежит в
src/data/views.json.
Как запустить сайт на своём компьютере
Это нужно, только если вы меняете дизайн или код сайта и хотите сразу видеть результат. Для статей это не нужно — для них есть Верстак.
- Установите Node.js LTS и скачайте репозиторий (см. способ Б выше).
- В Терминале в папке проекта:
npm ci — один раз, установит всё нужное в папку node_modules.
- Скопируйте файл
.env.example в .env.local — там адрес сайта и пустые ID аналитики. Аналитику на своём компьютере лучше оставить выключенной, чтобы не портить статистику.
- Запустите один из режимов:
| Команда | Что делает |
|---|
npm run dev | Режим разработки. Сайт открывается на localhost:3000 и сразу обновляется при каждом сохранении файла. Работает только пока открыт Терминал; это не настоящий сайт, а черновой просмотр для правок. |
npm run build | Собирает готовый сайт в папку out/ — то же, что делает GitHub. Если в коде или статье ошибка, сборка остановится и покажет её. |
npm run preview | Открывает собранную папку out/ на localhost:3000 — так сайт будет выглядеть на хостинге. Сначала нужна npm run build. |
npm run lint | Проверяет код на ошибки и подозрительные места. |
Остановить dev или preview — Ctrl + C в Терминале.
Настройки сборки
Сборка берёт настройки из переменных окружения. На GitHub они заданы в Settings → Secrets and variables → Actions, на своём компьютере — в файле .env.local или прямо в команде сборки.
| Переменная при сборке | На GitHub | Что это |
|---|
NEXT_PUBLIC_SITE_URL | задан в workflow | Адрес сайта: нужен для ссылок в превью соцсетей, sitemap.xml и RSS. Без него там будет localhost:3000 |
NEXT_PUBLIC_YANDEX_METRIKA_ID | переменная YANDEX_METRIKA_ID | Номер счётчика Яндекс Метрики. Пусто — Метрика выключена |
NEXT_PUBLIC_GA_ID | переменная GA_ID | ID Google Analytics 4, вида G-…. Пусто — выключено |
NEXT_PUBLIC_TELEGRAM_PIXEL_ID | переменная TELEGRAM_PIXEL_ID | ID пикселя Telegram Ads. Пусто — выключено |
NEXT_PUBLIC_YANDEX_MAPS_KEY | переменная YANDEX_MAPS_KEY | Ключ JavaScript API Яндекс Карт для карты в генераторе QR. Ключ публичный, в кабинете разработчика Яндекса он ограничен адресом atrial.org. Пусто — карты нет |
METRIKA_TOKEN | секрет METRIKA_TOKEN | OAuth-токен Яндекса с правом metrika:read для числа просмотров, см. ниже |
На странице Верстака аналитика не загружается никогда.
npm run build сначала запускает scripts/qr-links.mjs (короткие ссылки /q/…), потом next build.
Число просмотров статей
Перед каждой сборкой на GitHub скрипт scripts/fetch-views.mjs забирает из Яндекс Метрики число просмотров каждой страницы в src/data/views.json, и сайт показывает его рядом с датой статьи. Для этого нужны секрет METRIKA_TOKEN и переменная YANDEX_METRIKA_ID. Если токена нет или Метрика не ответила, сайт всё равно собирается — просто без новых цифр.
Получить токен: создайте приложение на oauth.yandex.ru с доступом «Яндекс Метрика → Получение статистики», затем откройте https://oauth.yandex.ru/authorize?response_type=token&client_id=<ID приложения> и скопируйте токен из адресной строки. Токен никому не пересылайте — только в секрет репозитория.
