Калькуляторы для вязания
Статический сайт с калькуляторами и справочниками для вязания. Калькуляторов два. Ленточный
мысок носка 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.
Адреса
Параметры расчёта мыска живут в 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), три проекта:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
