尚未偵測到更新。GitHub 發布版本後會顯示在這裡。
依最近已完成的 8 小時觀測回合間的 GitHub 星號增量排序
Curated reverse-engineering tools and learning resources for binaries, apps, firmware, formats, and protocols.
翻譯準備中
個人 GitHub 帳號下公開儲存庫的擁有者可以登入並驗證所有權，自行管理介紹，無需管理員核准。
登入並產生驗證檔案，在 30 分鐘內將其提交至此儲存庫的預設分支。其他分支或分叉儲存庫中的檔案無效。然後在下方檢查檔案，即可無需管理員核准直接管理專案。請保留檔案以維持管理權限。
如需登入，將前往登入頁面。登入後請回到此處，再次點擊所選的驗證按鈕。
在專案資料夾中執行 /nomorevibe verify，即可驗證所有權並自行管理介紹。
一分鐘完成驗證Coming Soon...
翻譯準備中
取自儲存庫 README
正在載入完整 README。
檢視完整 README ↗Сайт 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). В браузерах без этой технологии и при включённом «уменьшении движения» это обычный переход. Товары с ценой сами попадают в фид для Яндекса.
| Адрес | Что это | Файлы |
|---|---|---|
/instructions | инструкции к изделиям, на них ведут QR-коды | src/app/instructions |
/qr | генератор QR-кодов | src/app/qr, src/components/qr |
/colors | подбор цвета наличника в 3D | src/app/colors, src/components/nalichnik |
/q/<место> | короткие ссылки для QR-кодов на полках | scripts/qr-links.mjs |
/privacy | политика конфиденциальности | src/app/privacy/page.tsx |
/feed.xml | RSS блога | src/app/feed.xml/route.ts |
/market.xml | YML-фид товаров для Яндекса | src/app/market.xml/route.ts |
/sitemap.xml, /robots.txt | для поисковиков | src/app/sitemap.ts, |
Новые публичные страницы добавляйте в sitemap.ts и в список превью в src/app/og/[section]/[file]/route.tsx.
atrial.org/qr — бесплатный генератор для всех: ссылка (по желанию с UTM-метками), Wi-Fi, визитка, текст, событие, геолокация. Оформление как на vkqr.ru: только код, с рамкой и надписью, с фоном или карточка с фото; цвета #111111, #ededed, #ffcc00 или свой; в центре — логотип Atrial, своя иконка или ничего.
public/fonts. opentype.js нужен версии 1.3.4: в 2.0 некоторые буквы ломаются.YANDEX_MAPS_KEY (см. Настройки сборки). Без ключа там только поле координат.atrial.org/colors — 3D-модель наличника «Злынка» на стене: каждую деталь можно покрасить, есть готовые сочетания и пять видов стены. Цвета хранятся в адресе (#c=<цвета деталей>&w=<стена>.<цвет>), поэтому ссылкой можно поделиться раскраской.
public/models/nalichnik-1.glb, сжатая Draco; декодер лежит в public/draco, внешние CDN не нужны. Рисует three.js (scene.ts).nalichnik: tools/convert.py разбивает чертёж на детали покраски (номера тел STEP → зоны), tools/pack.sh упрощает сетку и сжимает Draco. Готовый .glb кладётся в public/models.На стикерах в магазинах и на карточке в наборах стоят короткие адреса 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 КБ |
Почему так:
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 и разложить по путям из таблицы.
Сайт живёт на GitHub Pages и обновляется сам:
git push с компьютера.Кроме того, сайт пересобирается каждый день в 06:00 по Москве, чтобы обновить число просмотров статей.
Настройки, которые уже сделаны и которые не нужно трогать:
atrial.org, галочка Enforce HTTPS.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 (оранжевое облако) выключен — с ним сайт плохо открывается из России.Если сайт нужно перенести с GitHub Pages на обычный хостинг для сайтов (Beget, Timeweb, REG.RU и т. п.), где есть только FTP или файловый менеджер, а консоли нет, — это возможно: хостингу нужно лишь отдавать готовые файлы.
Способ А — скачать готовую сборку с GitHub, ничего не устанавливая.
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/.
public_html, www или папка с именем домена. Удалите из неё старые файлы сайта (если это первая загрузка — заглушку хостинга, обычно index.html или index.php).index.html, _next, blog и остальное..htaccess. Без него будут открываться только главная и страницы с .html на конце, а /blog и остальные адреса выдадут ошибку 404. FileZilla показывает скрытые файлы, если включить Сервер → Принудительно показывать скрытые файлы. На Mac в Finder скрытые файлы показываются сочетанием Cmd + Shift + ../blog и любую статью..htaccess — так устроено большинство обычных хостингов. Файл public/.htaccess научит его открывать /blog/pechka-burzhujka как blog/pechka-burzhujka.html и показывать фирменную страницу 404..htaccess не работает, напишите в поддержку: «Для статического сайта нужно try_files $uri $uri.html $uri/ =404; и error_page 404 /404.html;».atrial.org, перенаправьте DNS-записи домена в Cloudflare на адрес нового хостинга, а на GitHub в Settings → Pages уберите свой домен.Каждое изменение — новая статья, товар, правка текста — требует заново получить сборку (шаг 1) и заново загрузить её (шаг 2), заменив все файлы. Старую папку _next лучше удалять целиком: в ней копятся файлы прошлых версий.
Учтите:
src/data/views.json.Это нужно, только если вы меняете дизайн или код сайта и хотите сразу видеть результат. Для статей это не нужно — для них есть Верстак.
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 приложения> и скопируйте токен из адресной строки. Токен никому не пересылайте — только в секрет репозитория.
/og/… | картинки превью ссылок | src/app/og, см. Превью ссылок |
| Короткие ссылки для QR-кодов | scripts/qr-links.mjs |
| Детали, палитры и стены подбора цвета | src/components/nalichnik/palette.ts, модель — public/models |
| Политика конфиденциальности | src/app/privacy/page.tsx (открывается по /privacy, в меню её нет) |
| Цвета и шрифты | src/styles/tailwind.css, шрифт — в src/app/layout.tsx |
| Оформление текста статей | typography.ts |
| Иконки сайта | см. «Иконки сайта» ниже |