color-tomato-theme/README.md

# [Цветной помидор](README.en.md)

Две темы Jekyll для оформления статических сайтов. Цветной вариант был написан раньше
с использованием AngularJS и Material, таким было оформление предыдущей версии моего
блога. Затем был написан облегчённый одноцветный вариант с использованием только HTML
и CSS, внешний вид напоминает тему оформления по умолчанию на GitHub Pages. Обе темы
дополняют друг друга и похожи друг на друга, общие черты и различия между ними отмечены
в списке свойств.

- Цветной помидор — выбор цвета во время сборки.
- [Старый помидор](https://hub.mos.ru/golovin.gg/older-tomato-theme/blob/master/README.md) — легковесная тема оформления.

### Свойства

- [x] Адаптивная вёрстка или Responsive layout.
- [x] Файлы пользователя JS и CSS в блоке head страниц HTML.
- [x] SEO-разметка с использованием JSON-LD и Open Graph.
- [x] Переключение между двумя языками и помидорными темами.
- [x] Карта страниц сайта с их переводами в формате XML.
- [x] Простая страница 404 для несуществующих URL-адресов.
- [x] Шрифты: Roboto для текста и JBMono для блоков кода.
- [x] Помидоры: PNG, JPG 120x120, SVG 64x64, ICO 32x32.
- [ ] Выбор цвета во время сборки, зелёный цвет по умолчанию.
- [ ] Кнопка прокрутки вверх в стиле Material.

### Цвета

Цвет темы можно выбрать из списка цветов библиотеки Material. Каждый цвет идёт вместе
с палитрой своих оттенков, которые используются для оформления всего сайта, зелёный
цвет по умолчанию. От цвета не зависят только подсветка синтаксиса в блоках кода и
пользовательские файлы JS и CSS. В старой версии блога палитру можно было выбирать из
выпадающего меню по кнопке на клиенте. Теперь палитра выбирается один раз во время
сборки — это заметно упрощает дерево DOM и облегчает клиента.

<details>
<summary>Список цветов</summary>

- [ ] red
- [ ] pink
- [ ] purple
- [ ] deep-purple
- [ ] indigo
- [ ] blue
- [ ] light-blue
- [ ] cyan
- [ ] teal
- [x] <b>green</b>
- [ ] light-green
- [ ] lime
- [ ] yellow
- [ ] amber
- [ ] orange
- [ ] deep-orange
- [ ] brown
- [ ] grey
- [ ] blue-grey
</details>

### Структура каталогов

Папка с сайтом на Jekyll должна содержать два обязательных файла с зависимостями и
параметрами, все остальные файлы — это содержимое самого сайта. Эта тема написана с
расчётом, что содержимое сайта разделено на две подпапки по языкам и состоит из статей
и заглавных страниц, где заглавные страницы — это списки статей с краткими описаниями.

```
jekyll-site
 ├ ru
 │ ├ . . .      - статьи
 │ └ index.md   - заглавная страница
 ├ en
 │ ├ . . .      - статьи
 │ └ index.md   - заглавная страница
 ├ . . .
 ├ Gemfile      - зависимости
 └ _config.yml  - параметры
```

### Зависимости

`Gemfile` — список пакетов *ruby gems*, включая установленные локально.

```ruby
source "https://rubygems.org"
gem "jekyll"
gem "color-tomato-theme"
```

### Установка

Запускаем скрипт из папки с темой, собираем пакет *gem* и устанавливаем его.

```bash
rm color-tomato-theme-0.1.0.gem
gem build color-tomato-theme.gemspec
sudo gem install --local color-tomato-theme-0.1.0.gem
```

### Параметры сайта

`_config.yml` — список общих параметров для сайта, включая параметры для сборки.

```yaml
# название сайта для подписи в футере
name: "Код с комментариями"
# подпись в футере для переведённых страниц
name_translated: "Code with comments"
# URL адрес сайта, включая протокол
url: "https://pomodoro.example.ru"
# подпапка этой сборки для относительных URLs
baseurl: "/color"
# ссылка в верхнем левом углу заглавных страниц
homepage_url: "https://hub.mos.ru/tolstoy.ln"
# представление ссылки
homepage_name: "HUB.MOS.RU"
# подпапка альтернативной сборки, можно
# не указывать, если не используется
older_tomato_baseurl: ""
# часовой пояс для формата даты ISO-8601
timezone: "Europe/Moscow"
# языковые параметры должны быть указаны либо
# везде, либо только на страницах с переводами
lang: "ru" # по умолчанию, можно не указывать
# имя автора для SEO-разметки и подписи в футере
author: "Толстой Л.Н."
# транслитерация имени автора для переведённых страниц
author_translated: "Tolstoy L.N."
# дополнение к подписи в футере для переведённых страниц
translation_caption: "translation from Russian"
# тема оформления и макет по умолчанию для сборки
theme: color-tomato-theme
color: green # по умолчанию, можно не указывать
defaults:
  - scope:
      path: ""
    values:
      layout: default
```

### Параметры страниц

Список индивидуальных параметров страниц сайта для указания в шапке страницы Front matter.

```yaml
---
# заголовок страницы на языке страницы
title: Вращаем пространственный крест
# предпочтительно 150-160 символов на языке страницы
description: ниасилил, многабукаф
# разделённый запятыми список секций страницы на её языке
sections: [Объёмные фигуры,Матрица поворота,Экспериментальная модель]
# разделённый запятыми список тегов страницы на её языке
tags: [javascript,canvas,геометрия,матрица,графика,изображение,куб]
# разделённый запятыми список скриптов для этой
# страницы, можно не указывать, если не используются
scripts: [/js/classes.js,/js/script1.js,/js/script2.js]
# разделённый запятыми список стилей для этой
# страницы, можно не указывать, если не используются
styles: [/css/pomodoro1.css,/css/pomodoro2.css]
# канонический URL адрес этой страницы
canonical_url: /ru/2023/01/15/spinning-spatial-cross.html
# URL адрес переведённой страницы для оригинальных страниц,
# или оригинальной страницы для переведённых страниц
url_translated: /en/2023/01/16/spinning-spatial-cross.html
# заголовок переведённой страницы для оригинальных страниц,
# или оригинальной страницы для переведённых страниц
title_translated: Spinning spatial cross
# дата должна быть указана только на страницах статей,
# и не должна быть указана на заглавных страницах,
# заглавные страницы отображают дату последней сборки сайта
date: 2023.01.15
# языковые параметры должны быть указаны либо
# везде, либо только на страницах с переводами
lang: "ru" # по умолчанию, можно не указывать
# имя автора на языке этой страницы
author: "Толстой Л.Н."
# транслитерация имени автора для оригинальных страниц,
# или оригинальное имя автора для переведённых страниц
author_translated: "Tolstoy L.N."
# дополнение к подписи в футере для переведённых страниц
translation_caption: "translation from Russian"
---
```

### После сборки

Сборка сайта выполняется командой `jekyll build`. После этого мы получаем папку `_site` с собранными
страницами и подпапку `assets` из темы. Перемещаем содержимое этой подпапки обратно в папку `_site` —
получаем короткие ссылки, которые используются в теме. После этого обходим страницы HTML и оптимизируем
некоторые теги также для краткости и для корректности. Скрипт предназначен для этого.

```bash
echo "Оптимизация собранного контента."
cd _site || exit
cp -r assets/* .
rm -r assets
find . -type f -name '*.html' | sort -r | while read -r file; do
  sed -i 's/layout-padding=""/layout-padding/g' "$file"
  sed -i 's/ class="language-plaintext highlighter-rouge"//g' "$file"
  sed -i 's/ class="language-java highlighter-rouge"//g' "$file"
  sed -i 's/ class="language-html highlighter-rouge"//g' "$file"
  sed -i 's/ class="language-js highlighter-rouge"//g' "$file"
  sed -i 's/ class="language-bash highlighter-rouge"//g' "$file"
  sed -i 's/<div><div class="highlight"><pre class="highlight">/<div class="highlight"><pre class="highlight">/g' "$file"
  sed -i 's/<\/code><\/pre><\/div><\/div>/<\/code><\/pre><\/div>/g' "$file"
  sed -i -r 's/<input(.+) \/>/<input\1>/g' "$file"
  sed -i -r 's/<img(.+) \/>/<img\1>/g' "$file"
done
```

---

© Головин Г.Г., Код с комментариями, 2021-2023