Шаблон статьи под будущие публикации

1. Поля, которые нужно заменить

• {{ARTICLE_TITLE}} - заголовок в `title`, `og:title`, H1.
• {{ARTICLE_DESCRIPTION}} - meta description + лид статьи.
• {{ARTICLE_URL}} - canonical, `og:url`, `mainEntityOfPage`.
• {{PUBLISHED_AT}} и {{UPDATED_AT}} - даты в meta и JSON-LD.
• {{AUTHOR_NAME}} - автор в видимой части и schema.

2. Рекомендуемая структура контента

1. H1 + 2-3 предложения о ценности материала.
2. H2-блоки по принципу: проблема -> метод -> пример.
3. 1-2 callout-блока с выводами или быстрыми hack-пунктами.
4. FAQ в конце (если тема действительно вопросная).
5. CTA и ссылки на смежные статьи/услуги.

3. Минимальный schema-набор

4. Чеклист адаптива

• Шрифт основного текста не меньше 16px на телефонах.
• Тап-зоны ссылок и кнопок комфортны для пальца.
• Нет горизонтального скролла при ширине 320px.
• Боковые блоки переносятся вниз на tablet/mobile.

5. Стандарт инфографики (SVG + PNG)

• Для каждой статьи создавайте папку: assets/imgs/articles/<slug>/.
• Храните пары файлов: *.svg и *.png (fallback 1200x720).
• Используйте <picture>: source на SVG, img на PNG.
• Ставьте бренд-подпись tfox.dev • от 13FOX в правом нижнем углу инфографики.
• Проверяйте отсутствие наложений текста в карточках и таблицах.

Быстрые пресеты позиционирования

• Канва: 1200x720, viewBox="0 0 1200 720".
• Внутренний контейнер: x=56 y=56 w=1088 h=608 rx=28.
• Карточка 430x106 (этапы): title_y = box_y + 33, line2_y = box_y + 62, line3_y = box_y + 86.
• Карточка 500x112 (KPI): value_y = box_y + 44, line2_y = box_y + 73, line3_y = box_y + 97.
• Бренд-плашка: text_x = rect_x + rect_w/2, text_y = rect_y + rect_h/2, text-anchor="middle", dominant-baseline="middle".

<figure class="article-figure">
  <picture>
    <source srcset="../assets/imgs/articles/<slug>/chart.svg" type="image/svg+xml">
    <img src="../assets/imgs/articles/<slug>/chart.png" alt="Описание инфографики" loading="lazy" width="1200" height="720">
  </picture>
  <figcaption>Короткая подпись к графику.</figcaption>
</figure>

<svg width="1200" height="720" viewBox="0 0 1200 720" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <rect width="1200" height="720" rx="36" fill="#F4F8FF"/>
  <rect x="56" y="56" width="1088" height="608" rx="28" fill="#FFF" stroke="#DCE7FF" stroke-width="2"/>

  <rect x="94" y="214" width="500" height="112" rx="16" fill="#F2EEFF" stroke="#DED7FF"/>
  <text x="116" y="258" fill="#4B3F8D" font-family="Arial, sans-serif" font-size="34" font-weight="700">350-700 тыс. ₽/мес</text>
  <text x="116" y="287" fill="#6C6390" font-family="Arial, sans-serif" font-size="18">Старт: проверка спроса и первых продаж.</text>
  <text x="116" y="311" fill="#6C6390" font-family="Arial, sans-serif" font-size="18">Цель: найти рабочие каналы и цену клиента.</text>

  <rect x="842" y="594" width="264" height="38" rx="12" fill="#EEF2FF" stroke="#D7DEFF"/>
  <text x="974" y="613" text-anchor="middle" dominant-baseline="middle" fill="#4E5F9A" font-family="Arial, sans-serif" font-size="17" font-weight="700">tfox.dev • от 13FOX</text>
</svg>

QA перед релизом SVG

xmllint --noout assets/imgs/articles/<slug>/chart.svg
qlmanage -t -s 2200 -o /tmp assets/imgs/articles/<slug>/chart.svg
sips -z 720 1200 /tmp/chart.svg.png --out assets/imgs/articles/<slug>/chart.png
file assets/imgs/articles/<slug>/chart.png