Калькуляторы для вязания

Статический сайт с калькуляторами и справочниками для вязания. Калькуляторов два. Ленточный мысок носка cuff-down: по числу петель и ритму убавок он рисует схему, говорит, сколько выйдет рядов, и считает связанные ряды. Поворот французской пятки: по начальным петлям и центральной части он рисует схему поворота и пишет итог и описание словами по рядам (спека — .scratch/french-heel/spec.md). Справочник пока один — набор петель на носок по размеру и толщине пряжи.

Главный сценарий — телефон, лежащий рядом с вязанием; с компьютера страница тоже открывается и от 1240 px раскладывается в две колонки.

Конструкция зафиксирована и не настраивается: мысок cuff-down (от манжеты к пальцам), ленточный (круг делится ровно пополам, убавки по краям каждой половины). Закрытие выбирает мастер — калькулятор считает петли до него и самого закрытия не касается.

Вне области первой версии: расчёт по плотности вязания и ответ «когда начинать мысок» (считаем в петлях, сантиметров нет), мысок toe-up, круглый мысок и звёздочка, обратный режим «хочу мысок в N рядов — подбери ритм».

Демо

Кликабельно: https://fey.github.io/knitting-tools/toe-band/

Эта же картинка — карточка для соцсетей: она объявлена в og:image всех страниц, и ссылка разворачивается ей в Telegram, VK и прочих. Две вещи, которые иначе примут за поломку:

• Превью появится только после деплоя. Сборщик превью читает живую страницу, на ветке читать нечего — проверять до мержа в main бессмысленно.
• Карточка одна на любой расчёт. Hash до сервера не доходит, поэтому ссылка с #s=60&e=20&k=1&r=even развернётся тем же кадром, что и голая.

Правил экран — пересними карточку: make og, картинка едет в коммит вместе с правкой. Кадр снимается с живой страницы, поэтому оставленный на 4173 preview надо погасить: иначе его подхватит reuseExistingServer, и карточка снимется со вчерашнего dist.

Адреса

Адрес	Что там
https://fey.github.io/knitting-tools/	витрина разделов
https://fey.github.io/knitting-tools/toe-band/	калькулятор ленточного мыска
https://fey.github.io/knitting-tools/french-heel/	калькулятор поворота французской пятки
https://fey.github.io/knitting-tools/sock-cast-on/	справочник: набор петель на носок

Параметры расчёта мыска живут в hash адреса, поэтому ссылкой воспроизводится ровно тот расчёт, который видели: …/toe-band/#s=60&e=20&k=1&r=even. Прогресс ряда в ссылку не попадает — он в localStorage. Поворот пятки параметров пока не хранит.

Стек

• Vite 8 — многостраничная сборка: три входа, три настоящих index.html.
• Vue 3.5, Composition API, SFC.
• TypeScript, Tailwind 4 через плагин @tailwindcss/vite.
• Vitest — ядро, Playwright — страница.
• GitHub Pages + Actions, base: '/knitting-tools/'.

Роутера нет и не нужен: в hash-режиме он занял бы тот же hash, где лежат параметры расчёта, а в history-режиме потребовал бы копию index.html в 404.html. Каждая страница — свой вход сборки, между ними обычные относительные ссылки. Pinia нет: состояние калькулятора — одно composable.

Бэкенда нет вовсе. Обратная связь уходит прямо из браузера в Google Forms.

Статистика заходов — https://feycot.goatcounter.com. Счётчик GoatCounter без cookie считает заходы по страницам, hash с расчётом в него не попадает. Скрипт вставляет Vite-плагин в vite.config.ts при сборке, в make dev его нет.

Быстрый старт

Нода — 26, версия прибита в mise.toml (mise install поднимет её); тот же мажор стоит в CI.

make install    # зависимости из lock-файла и git-хуки
make browsers   # Chromium под прогон страницы
make dev        # стенд на 5173

Открывать по адресу с путём — http://localhost:5173/knitting-tools/. Голый http://localhost:5173/ отдаст 404: base в vite.config.ts равен /knitting-tools/. Калькулятор — на подстранице http://localhost:5173/knitting-tools/toe-band/.

Кнопка «Оставить отзыв» появляется, только если подставлена ссылка на форму. Локально это .env.local (в репозиторий не едет), в Actions — секрет:

VITE_FEEDBACK_PREFILL_URL=https://docs.google.com/forms/d/e/<ID>/viewform?entry.1=…&entry.2=…&entry.3=…

Без неё сборка не падает — страница просто уезжает без кнопки, молча. Это самый тихий способ получить «всё собралось, а функции нет».

Команды

Всё гоняется через make. make без цели печатает этот же список:

Цель	Что делает
make install	Зависимости из lock-файла
make browsers	Chromium под прогон страницы
make playwright-version	Версия Playwright из lock-файла — тег образа CI
make dev	Локальный стенд на 5173
make build	Проверка типов и сборка в dist
make preview	Собранная страница на 4173. Под прогон e2e, стенд поднимают через dev
make test	Оба шва разом — то же, что гоняет CI
make test-unit	Ядро под Vitest
make test-e2e	Страница под Playwright: functional и desktop
make test-screens	Скриншоты схемы. В CI не гоняются намеренно
make test-screens-update	Пересъёмка базлайнов после правки экрана
make og	Пересъёмка карточки для соцсетей в public/og.png

Слоя два, и граница жёсткая: сама команда со всеми флагами — скриптом в package.json, а Makefile её только зовёт. Флаги правятся в одном месте, поэтому CI и локаль не начинают проверять разное. Новая команда заводится парой: скрипт в package.json и цель в Makefile; шаг CI зовёт цель, а не пишет команду строкой.

Тесты

Швов два — по тому, что шов способен увидеть.

Ядро под Vitest (make test-unit): арифметика, разбор hash, тексты сообщений. Тесты лежат рядом с кодом, src/**/*.test.ts.

Страница под Playwright (make test-e2e), три проекта:

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗