diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/01.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/01.jpg new file mode 100644 index 0000000..ff40ba6 Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/01.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/02.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/02.jpg new file mode 100644 index 0000000..0a8a6a4 Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/02.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/03.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/03.jpg new file mode 100644 index 0000000..daa5e93 Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/03.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/04.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/04.jpg new file mode 100644 index 0000000..ab56bc4 Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/04.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/05.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/05.jpg new file mode 100644 index 0000000..8d844dc Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/05.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/06.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/06.jpg new file mode 100644 index 0000000..6b4b4eb Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/06.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/gallery/07.jpg b/content/cheatsheets/blowfish-shortcodes/gallery/07.jpg new file mode 100644 index 0000000..a3eda93 Binary files /dev/null and b/content/cheatsheets/blowfish-shortcodes/gallery/07.jpg differ diff --git a/content/cheatsheets/blowfish-shortcodes/index.md b/content/cheatsheets/blowfish-shortcodes/index.md new file mode 100644 index 0000000..8d6d07a --- /dev/null +++ b/content/cheatsheets/blowfish-shortcodes/index.md @@ -0,0 +1,1316 @@ +--- +title: "Shortcodes" +weight: 6 +draft: true +description: "Все shortcodes темы Blowfish — справочник для практиков." +slug: "shortcodes" +tags: ["shortcodes", "mermaid", "icon", "lead", "docs"] +series: ["Документация"] +series_order: 8 +--- + +Hugo даёт [стандартные shortcodes](https://gohugo.io/content-management/shortcodes/). Blowfish добавляет свои — для типичных задач блога. + +## Alert + +`alert` выводит стилизованный блок-уведомление. Нужен когда важную информацию нельзя пропустить. + +| Параметр | Описание | +| --- | --- | +| `icon` | **Опционально.** Иконка слева.
**По умолчанию:** `triangle-exclamation` (см. [icon](#icon)) | +| `iconColor` | **Опционально.** Цвет иконки в CSS-формате.
Hex (`#FFFFFF`) или имя цвета (`white`).
По умолчанию — из текущей темы. | +| `cardColor` | **Опционально.** Цвет фона карточки в CSS-формате.
Hex (`#FFFFFF`) или имя цвета (`white`).
По умолчанию — из текущей темы. | +| `textColor` | **Опционально.** Цвет текста в CSS-формате.
Hex (`#FFFFFF`) или имя цвета (`white`).
По умолчанию — из текущей темы. | + +Внутри — Markdown, форматируй как угодно. + +**Пример 1:** Без параметров + +```md +{{}} +**Внимание!** Это действие необратимо! +{{}} +``` + +{{< alert >}} +**Warning!** This action is destructive! +{{< /alert >}} + +**Пример 2:** Безымянный параметр + +```md +{{}} +Не забудь [подписаться](https://twitter.com/nunocoracao) в Twitter. +{{}} +``` + +{{< alert "twitter" >}} +Don't forget to [follow me](https://twitter.com/nunocoracao) on Twitter. +{{< /alert >}} + +**Пример 3:** Именованные параметры + +```md +{{}} +Это ошибка! +{{}} +``` + +{{< alert icon="fire" cardColor="#e63946" iconColor="#1d3557" textColor="#f1faee" >}} +This is an error! +{{< /alert >}} + +


+ +## Admonition + +Admonition — визуальные блоки-выноски для акцентирования внимания. + +Работает как alert, но через render hooks Hugo. Ключевое отличие — синтаксис Markdown, переносимый между платформами. Shortcodes — специфика Hugo. Синтаксис похож на GitHub alerts: + +```md +> [!TIP] +> Admonition типа Tip. + +> [!TIP]+ Свой заголовок + Своя иконка +> Сворачиваемый admonition с кастомным заголовком. +{icon="twitter"} +``` + +> [!TIP] +> A Tip type admonition. + +> [!TIP]+ Custom Title + Custom Icon +> A collapsible admonition with custom title. +{icon="twitter"} + +Знак alert (`+` или `-`) — опционален, управляет сворачиванием. Работает только в Obsidian. + +> [!INFO]- Поддерживаемые типы +> Допустимые типы: [GitHub alert types](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/) и [Obsidian callout types](https://help.obsidian.md/callouts). Регистр не важен. +> +> **GitHub:** `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`\ +> +> `NOTE`: `Заметка`: Полезная информация — даже при беглом чтении.\ +> `TIP`: `Совет`: Как сделать проще или лучше.\ +> `IMPORTANT`: `Важно`: Ключевое для достижения цели.\ +> `WARNING`: `Внимание`: Срочно — иначе будут проблемы.\ +> `CAUTION`: `Осторожно`: Риски и последствия этого действия.\ +> +> **Obsidian:** `note`, `abstract`, `info`, `todo`, `tip`, `success`, `question`, `warning`, `failure`, `danger`, `bug`, `example`, `quote` + +> [!INFO]- Кастомизация admonition +> См. [руководство по кастомизации admonition](https://github.com/nunocoracao/blowfish/blob/main/layouts/_default/_markup/render-blockquote.html). + +## Accordion + +`accordion` — сворачиваемые панели. Элементы задаются через `accordionItem`. Параметр `mode` управляет одновременным открытием нескольких элементов. + +| Параметр | Описание | +| --------- | ------------------------------------------------------------------------------------------------- | +| `mode` | **Опционально.** `collapse` (один открыт) или `open` (несколько открыты). По умолчанию `collapse`. | +| `separated` | **Опционально.** `true` — каждый элемент как отдельная карточка. По умолчанию `false` (единый список). | + +Параметры `accordionItem`: + +| Параметр | Описание | +| --------- | --------------------------------------------------------------------------------------------------- | +| `title` | **Обязательно.** Заголовок в шапке элемента. | +| `open` | **Опционально.** `true` — элемент открыт по умолчанию. | +| `header` | **Опционально.** Алиас для `title`, для совместимости. | +| `icon` | **Опционально.** Иконка перед заголовком. | + +**Пример 1: `mode="open"` (несколько элементов открыты) + `separated=true`** + +```md +{{}} + {{}} + Этот элемент демонстрирует рендеринг Markdown: + - **Жирный текст** + - Списки + - `inline code` + {{}} + + {{}} + Этот элемент демонстрирует рендеринг shortcode с md=false: + + {{}}Это inline alert.{{}} + {{}} +{{}} +``` + +{{< accordion mode="open" separated=true >}} + {{< accordionItem title="Markdown example" icon="code" open=true >}} + This item demonstrates Markdown rendering: + - **Bold text** + - Lists + - `inline code` + {{< /accordionItem >}} + + {{< accordionItem title="Shortcode example" md=false >}} + This item demonstrates shortcode rendering with md=false: + + {{< alert >}}This is an inline alert.{{< /alert >}} + {{< /accordionItem >}} +{{< /accordion >}} + +**Пример 2: `mode="collapse"` (только один элемент открыт)** + +```md +{{}} + {{}} + Этот элемент использует Markdown с коротким списком: + 1. Один + 2. Два + 3. Три + {{}} + + {{}} + Этот элемент включает другой shortcode: + {{}}Tip{{}} + {{}} +{{}} +``` + +{{< accordion mode="collapse" >}} + {{< accordionItem title="First item" open=true >}} + This item uses Markdown with a short list: + 1. One + 2. Two + 3. Three + {{< /accordionItem >}} + + {{< accordionItem title="Second item" md=false >}} + This item includes another shortcode: + {{< badge >}}Tip{{< /badge >}} + {{< /accordionItem >}} +{{< /accordion >}} + +


+ +## Article + +`article` встраивает статью в markdown-файл. Параметр `link` — `.RelPermalink` встраиваемой статьи. Shortcode не отображает родительскую страницу. _Важно: если сайт в подпапке (например, /blowfish/), включай этот путь в ссылку._ + +| Параметр | Описание | +| --------- | -------------------------------------------------------- | +| `link` | **Обязательно.** `.RelPermalink` целевой статьи. | +| `showSummary` | **Опционально.** Показывать краткое описание статьи. По умолчанию — из конфигурации сайта. | +| `compactSummary` | **Опционально.** Компактный режим отображения описания. По умолчанию `false`. | + +**Пример:** + +```md +{{}} +``` + +{{< article link="/docs/welcome/" showSummary=true compactSummary=true >}} + +


+ +## Badge + +`badge` — стилизованный бейдж для метаданных. + +**Пример:** + +```md +{{}} +Новая статья! +{{}} +``` + +{{< badge >}} +New article! +{{< /badge >}} + +


+ +## Button + +`button` — стилизованная кнопка для основного действия. Три опциональных параметра: `href`, `target`, `rel` — URL, target и relation ссылки. + +**Пример:** + +```md +{{}} +Призыв к действию +{{}} +``` + +{{< button href="#button" target="_self" >}} +Call to action +{{< /button >}} + +


+ +## Carousel + +`carousel` — интерактивная карусель изображений. Адаптивная, занимает место одного изображения по вертикали. Все изображения на полную ширину родительского контейнера с заданным соотношением сторон (по умолчанию `16:9`). + +| Параметр | Описание | +| --- | --- | +| `images` | **Обязательно.** Regex-строка для поиска изображений или URL. | +| `captions` | **Опционально.** Список пар `ключ:подпись`. Ключи — имена файлов (локальные) или полные URL (внешние). Подписи поддерживают Markdown. | +| `aspectRatio` | **Опционально.** Соотношение сторон. По умолчанию `16-9`. | +| `interval` | **Опционально.** Интервал автопрокрутки в миллисекундах. По умолчанию `2000` (2с). | + +Подписи сопоставляются по ключу. Для локальных — имя файла (например, `01.jpg`). Для внешних — полный URL. + +**Пример 1:** Соотношение 16:9, явный список изображений + +```md +{{}} +``` + +{{< carousel images="{gallery/03.jpg,gallery/01.jpg,gallery/02.jpg,gallery/04.jpg}" >}} + +**Пример 2:** Соотношение 21:9, regex для изображений + +```md +{{}} +``` + +{{< carousel images="gallery/*" aspectRatio="21-9" interval="2500" >}} + +**Пример 3:** Подписи к изображениям + +```md +{{}} +``` + +{{< carousel images="gallery/*" captions="{01.jpg:First image with *formatting*,02.jpg:Second image with a [link](https://example.com)}" >}} + +


+ +## Chart + +`chart` — графики через библиотеку Chart.js. Поддерживает [разные типы диаграмм](https://www.chartjs.org/docs/latest/samples/). Параметры — между тегами shortcode, Chart.js делает остальное. + +Синтаксис и типы диаграмм — в [официальной документации Chart.js](https://www.chartjs.org/docs/latest/general/). + +**Пример:** + +```js +{{}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{}} +``` + +{{< chart >}} +type: 'bar', +data: { + labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'], + datasets: [{ + label: '# of votes', + data: [12, 19, 3, 5, 3], + }] +} +{{< /chart >}} + +Еще примеры диаграмм: + +## Bar chart + + +{{< chart >}} +type: 'bar', +data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'My First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(255, 159, 64, 0.2)', + 'rgba(255, 205, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(201, 203, 207, 0.2)' + ], + borderColor: [ + 'rgb(255, 99, 132)', + 'rgb(255, 159, 64)', + 'rgb(255, 205, 86)', + 'rgb(75, 192, 192)', + 'rgb(54, 162, 235)', + 'rgb(153, 102, 255)', + 'rgb(201, 203, 207)' + ], + borderWidth: 1 + }] +} +{{< /chart >}} + + +## Line chart + + +{{< chart >}} +type: 'line', +data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'My First Dataset', + data: [65, 59, 80, 81, 56, 55, 40], + tension: 0.2 + }] +} +{{< /chart >}} + + +## Doughnut chart + + +{{< chart >}} +type: 'doughnut', +data: { + labels: ['Red', 'Blue', 'Yellow'], + datasets: [{ + label: 'My First Dataset', + data: [300, 50, 100], + backgroundColor: [ + 'rgba(255, 99, 132, 0.7)', + 'rgba(54, 162, 235, 0.7)', + 'rgba(255, 205, 86, 0.7)' + ], + borderWidth: 0, + hoverOffset: 4 + }] +} +{{< /chart >}} + + + + + +


+ +## Code Importer + +Импорт кода из внешних источников без копипасты. + +| Параметр | Описание | +| --------- | ------------------------------------------------------- | +| `url` | **Обязательно.** URL внешнего файла с кодом. | +| `type` | Тип кода для подсветки синтаксиса. | +| `startLine` | **Опционально.** Начальная строка импорта. | +| `endLine` | **Опционально.** Конечная строка импорта. | + +**Пример:** + +```md +{{}} + +``` + +{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}} + +```md +{{}} + +``` + +{{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}} + +

+ +## Codeberg Card + +`codeberg` — карточка репозитория Codeberg через API. Показывает актуальную статистику: звёзды, форки. + +| Параметр | Описание | +| --------- | ----------------------------------------------------- | +| `repo` | [String] Репозиторий в формате `username/repo` | + +**Пример:** + +```md +{{}} +``` + +{{< codeberg repo="forgejo/forgejo" >}} + +


+ +## Figure + +`figure` — вставка изображений. Заменяет базовый Hugo figure, добавляет оптимизацию производительности. + +Если изображение — page resource, Hugo Pipes оптимизирует и масштабирует его под разные разрешения. Статические ассеты и внешние URL вставляются как есть. + +| Параметр | Описание | +| --- | --- | +| `src` | **Обязательно.** Локальный путь/имя файла или URL. Порядок поиска: [page resource](https://gohugo.io/content-management/page-resources/), затем `assets/`, затем `static/`. | +| `alt` | [Альтернативный текст](https://moz.com/learn/seo/alt-text) для изображения. | +| `caption` | Markdown-подпись под изображением. | +| `class` | Дополнительные CSS-классы для изображения. | +| `figureClass` | Дополнительные CSS-классы для обёртки `
`. Полезно для галерей. | +| `href` | URL для ссылки на изображении. | +| `target` | Атрибут target для `href` URL. | +| `nozoom` | `nozoom=true` отключает "зум" изображения. Полезно в сочетании с `href`. | +| `default` | Возврат к стандартному поведению Hugo `figure`. `default=true`, далее — обычный [синтаксис Hugo shortcode](https://gohugo.io/content-management/shortcodes/#figure). | + +Blowfish автоматически конвертирует изображения в стандартном Markdown-синтаксисе: + +```md +![Alt text](image.jpg "Image caption") +``` + +**Пример:** + +```md +{{}} + + + +![Abstract purple artwork](abstract.jpg "Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)") +``` + +{{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}} + +


+ +## Forgejo Card + +`forgejo` — карточка репозитория Forgejo через API. Актуальная статистика: звёзды, форки. + +| Параметр | Описание | +| --------- | ----------------------------------------------------- | +| `repo` | [String] Репозиторий в формате `username/repo` | +| `server` | [String] URL сервера, например `https://v11.next.forgejo.org` | + +**Пример:** + +```md +{{}} +``` + +{{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}} + +


+ +## Gallery + +`gallery` — адаптивная галерея с разнообразными компоновками. + +Для изображений используй `img` теги с классом `class="grid-wXX"` — ширина колонки. Доступные ширины: от 10% до 100% с шагом 5%. Пример: 65% → `grid-w65`. Также доступны 33% и 66% для галерей в 3 колонки. Tailwind-индикаторы для адаптивной сетки. + +Для подписей — `figure` shortcode внутри gallery. Ширину задавай через `figureClass`, текст — через `caption`. + +**Пример 1: Обычная галерея** + +```md +{{}} + + + + + + + +{{}} +``` + +{{< gallery >}} + + + + + + + +{{< /gallery >}} + +


+ +**Пример 2: Адаптивная галерея** + +```md +{{}} + + + + + + + +{{}} +``` + +{{< gallery >}} + + + + + + + +{{< /gallery >}} + +


+ +**Пример 3: Галерея с подписями (через `figure`)** + +```md +{{}} + {{}} + {{}} + {{}} +{{}} +``` + +{{< gallery >}} + {{< figure src="gallery/01.jpg" alt="Gallery image 1" caption="First caption" figureClass="grid-w33" >}} + {{< figure src="gallery/02.jpg" alt="Gallery image 2" caption="Second caption" figureClass="grid-w33" >}} + {{< figure src="gallery/03.jpg" alt="Gallery image 3" caption="Third caption" figureClass="grid-w33" >}} +{{< /gallery >}} + +


+ +## Gist + +`gist` — встраивание GitHub Gist: пользователь, ID, опционально — конкретный файл. + +| Параметр | Описание | +| -------------- | ------------------------------------------------------------------ | +| `[0]` | [String] GitHub username | +| `[1]` | [String] Gist ID | +| `[2]` (опционально) | [String] Имя файла в Gist | + +**Пример 1: Весь Gist** + +```md +{{}} +```` + +{{< gist "octocat" "6cad326836d38bd3a7ae" >}} + +**Пример 2: Конкретный файл из Gist** + +```md +{{}} +``` + +{{< gist "rauchg" "2052694" "README.md" >}} + +


+ +## Gitea Card + +`gitea` — карточка репозитория Gitea через API. Актуальная статистика: звёзды, форки. + +| Параметр | Описание | +| --------- | ----------------------------------------------------- | +| `repo` | [String] Репозиторий в формате `username/repo` | +| `server` | [String] URL сервера, например `https://git.fsfe.org` | + +**Пример:** + +```md +{{}} +``` + +{{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}} + +


+ +## GitHub Card + +`github` — карточка GitHub-репозитория с актуальной статистикой: звёзды, форки. + +| Параметр | Описание | +|-----------------|---------------------------------------------------------------| +| `repo` | [String] Репозиторий в формате `username/repo` | +| `showThumbnail` | **Опционально** [boolean] Показывать миниатюру репозитория | + +**Пример:** + +```md +{{}} +``` + +{{< github repo="nunocoracao/blowfish" showThumbnail=true >}} + +


+ +## GitLab Card + +`gitlab` — карточка GitLab Project (репозитория в терминологии GitLab). Актуальная статистика: звёзды, форки. В отличие от `github`, не показывает основной язык проекта. Поддерживает кастомный URL инстанса GitLab — если доступен endpoint `api/v4/projects/`, работает с self-hosted и enterprise. + +| Параметр | Описание | +| ----------- | ----------------------------------------------------------------------- | +| `projectID` | [String] Числовой ProjectID GitLab | +| `baseURL` | [String] URL инстанса GitLab, по умолчанию `https://gitlab.com/` | + +**Пример:** + +```md +{{}} +``` + +{{< gitlab projectID="278964" >}} + +


+ +## Hugging Face Card + +`huggingface` — карточка модели или датасета Hugging Face. Актуальная информация: лайки, загрузки, тип и описание. + +| Параметр | Описание | +|------------|----------------------------------------------------------------| +| `model` | [String] Модель в формате `username/model` | +| `dataset` | [String] Датасет в формате `username/dataset` | + +**Важно:** Используй либо `model`, либо `dataset` — не оба. + +**Пример 1 (Модель):** + +```md +{{}} +``` + +{{< huggingface model="google-bert/bert-base-uncased" >}} + +**Пример 2 (Датасет):** + +```md +{{}} +``` + +{{< huggingface dataset="stanfordnlp/imdb" >}} + +


+ +## Icon + +`icon` — SVG-иконка, масштабируется под текущий размер текста. Единственный параметр — имя иконки. + +**Пример:** + +```md +{{}} +``` + +**Результат:** {{< icon "github" >}} + +Иконки загружаются через Hugo pipelines — максимальная гибкость. Blowfish включает набор встроенных иконок для соцсетей, ссылок и прочего. + +Свои иконки: положи SVG в `assets/icons/` проекта. В shortcode используй имя файла без `.svg`. + +


+ +## KaTeX + +`katex` — математические выражения через KaTeX. Синтаксис — в [справочнике TeX-функций](https://katex.org/docs/supported.html). + +Shortcode достаточно вставить один раз на странице — KaTeX автоматически отрендерит всю разметку. Поддерживаются inline и block нотации. + +Inline: оберни выражение в `\(` и `\)`. Block: используй `$$`. + +**Пример:** + +```md +{{}} +\(f(a,b,c) = (a^2+b^2+c^2)^3\) +``` + +{{< katex >}} +\(f(a,b,c) = (a^2+b^2+c^2)^3\) + +


+ +## Keyword + +`keyword` — визуальное выделение важных слов и фраз (например, профессиональных навыков). `keywordList` — группировка нескольких `keyword`. + +| Параметр | Описание | +| --------- | --------------------------------------- | +| `icon` | Опциональная иконка для keyword | + +Внутри — Markdown. + +**Пример 1:** + +```md +{{}} *Супер* навык {{}} +``` + +{{< keyword >}} _Super_ skill {{< /keyword >}} + +**Пример 2:** + +```md +{{}} +{{}} Lorem ipsum dolor. {{}} +{{}} **Важный** навык {{}} +{{}} + +{{}} *Отдельный* навык {{}} +``` + +{{< keywordList >}} +{{< keyword icon="github" >}} Lorem ipsum dolor {{< /keyword >}} +{{< keyword icon="code" >}} **Important** skill {{< /keyword >}} +{{< /keywordList >}} +{{< keyword >}} _Standalone_ skill {{< /keyword >}} + +


+ +## Lead + +`lead` — акцент на начало статьи. Введение или важная информация. Оберни любой Markdown-контент. + +**Пример:** + +```md +{{}} +Когда жизнь даёт тебе лимоны — делай лимонад. +{{}} +``` + +{{< lead >}} +When life gives you lemons, make lemonade. +{{< /lead >}} + +


+ +## List + +`list` — список последних статей. Обязательный параметр `limit` ограничивает количество. `where` и `value` фильтруют статьи по параметрам. Shortcode не отображает родительскую страницу, но учитывает её в limit. + +| Параметр | Описание | +| --- | --- | +| `limit` | **Обязательно.** Количество статей. | +| `title` | Заголовок списка, по умолчанию `Recent` | +| `cardView` | Карточный вид, по умолчанию `false` | +| `where` | Переменная для фильтрации, например `Type` | +| `value` | Значение для `where`, например для `Type` — `sample` | + +{{< alert >}} +Значения `where` и `value` используются в запросе `where .Site.RegularPages $where $value`. Доступные параметры — в [документации Hugo](https://gohugo.io/methods/page/). +{{}} + +**Пример 1:** + +```md +{{}} +``` + +{{< list limit=2 >}} + +**Пример 2:** + +```md +{{}} +``` + +{{< list title="Samples" cardView=true limit=6 where="Type" value="sample">}} + +


+ +## LTR/RTL + +`ltr` и `rtl` — смешивание направлений текста. Пользователи RTL-языков могут вставлять LTR-фрагменты. С `%` как внешним разделителем — Markdown внутри рендерится нормально (см. [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown)). + +**Пример:** + +```md +- Это markdown-список. +- Направление по умолчанию — LTR +{{%/* rtl */%}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{%/* /rtl */%}} +``` + +- This is an markdown list. +- Its per default a LTR direction +{{% rtl %}} +- هذه القائمة باللغة العربية +- من اليمين الى اليسار +{{% /rtl %}} + +


+ +## Markdown Importer + +Импорт markdown-файлов из внешних источников без копипасты. + +| Параметр | Описание | +| --------- | ------------------------------------------------------- | +| `url` | **Обязательно.** URL внешнего markdown-файла. | + +**Пример:** + +```md +{{}} + +``` + +{{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}} + +

+ +## Mermaid + +`mermaid` — диаграммы и визуализации через текст. Под капотом Mermaid — широкий набор диаграмм, графиков и форматов. + +Пиши синтаксис Mermaid внутри shortcode — плагин сделает остальное. + +Синтаксис и типы диаграмм — в [официальной документации Mermaid](https://mermaid-js.github.io/). + +**Пример:** + +```md +{{}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{}} +``` + +{{< mermaid >}} +graph LR; +A[Lemons]-->B[Lemonade]; +B-->C[Profit] +{{< /mermaid >}} + +


+ +## Swatches + +`swatches` — набор до трёх цветов для демонстрации палитры. Параметры — HEX-коды. + +**Пример:** + +```md +{{}} +``` + +**Результат:** +{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}} + +


+ +## Tabs + +`tabs` — вкладки для вариантов одного шага. Пример: инструкции по установке VS Code на разных платформах. + +| Параметр | Описание | +| --------- | -------------------------------------------------------- | +| `group` | **Опционально.** Имя группы для синхронизации. Вкладки с одинаковым `group` переключаются вместе. | +| `default` | **Опционально.** Метка активной вкладки по умолчанию. Если не задано — первая вкладка. | +| `label` | **Обязательно.** Текст на кнопке вкладки. | +| `icon` | **Опционально.** Иконка перед текстом. | + +**Пример 1: Базовое использование** + +`````md +{{}} + + {{}} + Установка через Chocolatey: + + ```pwsh + choco install vscode.install + ``` + + или через WinGet + + ```pwsh + winget install -e --id Microsoft.VisualStudioCode + ``` + {{}} + + {{}} + ```bash + brew install --cask visual-studio-code + ``` + {{}} + + {{}} + См. [документацию](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). + {{}} + +{{}} +````` + +**Результат:** + +{{< tabs >}} + + {{< tab label="Windows" >}} + Install using Chocolatey: + + ```pwsh + choco install vscode.install + ``` + + or install using WinGet + + ```pwsh + winget install -e --id Microsoft.VisualStudioCode + ``` + {{< /tab >}} + + {{< tab label="macOS" >}} + ```bash + brew install --cask visual-studio-code + ``` + {{< /tab >}} + + {{< tab label="Linux" >}} + See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux). + {{< /tab >}} + +{{< /tabs >}} + +**Пример 2: С Group, Default и Icon** + +`````md +{{}} + {{}} + ```javascript + console.log("Hello"); + ``` + {{}} + + {{}} + ```python + print("Hello") + ``` + {{}} + + {{}} + ```go + fmt.Println("Hello") + ``` + {{}} +{{}} + +{{}} + {{}} + ```javascript + const add = (a, b) => a + b; + ``` + {{}} + + {{}} + ```python + def add(a, b): return a + b + ``` + {{}} + + {{}} + ```go + func add(a, b int) int { return a + b } + ``` + {{}} +{{}} +````` + +**Результат:** + +{{< tabs group="lang" default="Python" >}} + {{< tab label="JavaScript" icon="code" >}} + ```javascript + console.log("Hello"); + ``` + {{< /tab >}} + + {{< tab label="Python" icon="sun" >}} + ```python + print("Hello") + ``` + {{< /tab >}} + + {{< tab label="Go" icon="moon" >}} + ```go + fmt.Println("Hello") + ``` + {{< /tab >}} +{{< /tabs >}} + +{{< tabs group="lang" default="Python" >}} + {{< tab label="JavaScript" icon="code" >}} + ```javascript + const add = (a, b) => a + b; + ``` + {{< /tab >}} + + {{< tab label="Python" icon="sun" >}} + ```python + def add(a, b): return a + b + ``` + {{< /tab >}} + + {{< tab label="Go" icon="moon" >}} + ```go + func add(a, b int) int { return a + b } + ``` + {{< /tab >}} +{{< /tabs >}} + +Обе группы вкладок имеют одинаковый `group="lang"` — клик по любой вкладке синхронизирует обе группы. `default="Python"` делает Python активной вкладкой по умолчанию, `icon="code"` добавляет иконку перед текстом. + +


+ +## Timeline + +`timeline` — визуальная хронология: профессиональный опыт, достижения проекта и т.д. Элементы — через `timelineItem`. + +| Параметр | Описание | +| ----------- | -------------------------------------------- | +| `md` | Рендерить контент как Markdown (true/false) | +| `icon` | Иконка в визуальных элементах таймлайна | +| `header` | Заголовок записи | +| `badge` | Текст в бейдже справа сверху | +| `subheader` | Подзаголовок записи | + +**Пример:** + +```md +{{}} + +{{}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{}} + + +{{}} +With html code + +{{}} + +{{}} +With other shortcodes +{{}} + + + + + + + +{{}} +{{}} + +{{}} +{{}} +{{}} + +{{}} +``` + +{{< timeline >}} + +{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}} +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. +{{}} + +{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}} +With html code + +{{}} + +{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}} +With other shortcodes +{{< gallery >}} + + + + + + + +{{< /gallery >}} +{{}} +{{< timelineItem icon="code" header="Another Awesome Header">}} +{{< github repo="nunocoracao/blowfish" >}} +{{}} +{{}} + +


+ +## TypeIt + +[TypeIt](https://www.typeitjs.com) — самый универсальный JS-инструмент для эффекта печатной машинки. Простая конфигурация: одна или несколько строк, переносы, удаление и замена, сложный HTML. + +Blowfish реализует подмножество функций TypeIt через shortcode. Текст — внутри `typeit`, поведение — через параметры. + +| Параметр | Описание | +| --- | --- | +| `tag` | [String] HTML-тег для рендеринга строк. | +| `classList` | [String] CSS-классы для HTML-элемента. | +| `initialString` | [String] Начальная строка, которая будет заменена. | +| `speed` | [number] Скорость печати в миллисекундах между шагами. | +| `lifeLike` | [boolean] Неравномерный темп печати, как у человека. | +| `startDelay` | [number] Задержка перед началом печати после инициализации. | +| `breakLines` | [boolean] Печатать строки друг под другом (true) или удалять и заменять (false). | +| `waitUntilVisible` | [boolean] Начинать при загрузке или когда элемент станет видимым. По умолчанию `true`. | +| `loop` | [boolean] Зацикливать строки после завершения. | + +**Пример 1:** + +```md +{{}} +Lorem ipsum dolor sit amet +{{}} +``` + +{{< typeit >}} +Lorem ipsum dolor sit amet +{{< /typeit >}} + +**Пример 2:** + +```md +{{}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{}} +``` + +{{< typeit + tag=h1 + lifeLike=true +>}} +Lorem ipsum dolor sit amet, +consectetur adipiscing elit. +{{< /typeit >}} + +**Пример 3:** + +```md +{{}} +"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) +"I'm gonna make him an offer he can't refuse." The Godfather (1972) +"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) +{{}} +``` + +{{< typeit + tag=h3 + speed=50 + breakLines=false + loop=true +>}} +"Frankly, my dear, I don't give a damn." Gone with the Wind (1939) +"I'm gonna make him an offer he can't refuse." The Godfather (1972) +"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939) +{{< /typeit >}} + +


+ +## Video + +`video` — встраивание локальных и внешних видео. Shortcode рендерит `
` с адаптивным плеером и опциональной подписью. + +| Параметр | Описание | +| --- | --- | +| `src` | **Обязательно.** URL видео или локальный путь. Порядок поиска: page resource → `assets/` → `static/`. | +| `poster` | Опциональный URL или путь к постеру. Если не задан — ищет изображение с тем же именем в page bundle. | +| `caption` | Опциональная Markdown-подпись под видео. | +| `autoplay` | `true`/`false`. Автовоспроизведение. По умолчанию `false`. | +| `loop` | `true`/`false`. Зацикливание. По умолчанию `false`. | +| `muted` | `true`/`false`. Без звука. По умолчанию `false`. | +| `controls` | `true`/`false`. Стандартные элементы управления браузера. По умолчанию `true`. | +| `playsinline` | `true`/`false`. Встроенное воспроизведение на мобильных. По умолчанию `true`. | +| `preload` | `metadata` (загрузить инфо), `none` (экономить трафик), `auto` (предзагрузка). По умолчанию `metadata`. | +| `start` | Опциональное время начала в секундах. | +| `end` | Опциональное время окончания в секундах. | +| `ratio` | Зарезервированное соотношение сторон. `16/9`, `4/3`, `1/1` или кастомное `W/H`. По умолчанию `16/9`. | +| `fit` | Как видео вписывается в соотношение: `contain` (без обрезки), `cover` (обрезка до заполнения), `fill` (растянуть). По умолчанию `contain`. | + +Если браузер не воспроизводит видео — плеер покажет fallback-сообщение со ссылкой на скачивание. + +**Пример:** + +```md +{{}} +``` + +{{< video + src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm" + poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg" + caption="**Public domain demo** — CC0 video and poster." + loop=true + muted=true +>}} + +


+ +## Youtube Lite + +Лёгкое встраивание YouTube через [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed). Библиотека быстрее и эффективнее стандартных embed. + +| Параметр | Описание | +| --------- | -------------------------------------------- | +| `id` | [String] ID YouTube-видео | +| `label` | [String] Метка видео | +| `params` | [String] Дополнительные параметры воспроизведения | + +**Пример 1:** + +```md +{{}} +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}} + +**Пример 2:** + +Все [параметры плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters) для `params`: + +> Это видео начнётся с 130 секунды (2м10с) + +```md +{{}} +``` + +> Это видео без элементов управления, начнётся с 130 секунды и остановится через 10 секунд. + +Для объединения нескольких параметров — символ `&` между ними: + +```md +{{}} +``` + +{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}} + +Подробнее — в [репозитории youtubeLite](https://github.com/paulirish/lite-youtube-embed/blob/master/readme.md#custom-player-parameters) и на странице [параметров плеера YouTube](https://developers.google.com/youtube/player_parameters#Parameters). diff --git a/content/cheatsheets/git-workflow/index.md b/content/cheatsheets/git-workflow/index.md index 802dfb8..3541dbd 100644 --- a/content/cheatsheets/git-workflow/index.md +++ b/content/cheatsheets/git-workflow/index.md @@ -16,7 +16,7 @@ showComments: true └── dev ← development (dev.blog.ru) ``` -**Принцип:** Одна папка, две ветки. Переключение через `git checkout`, не через разные директории. +>[!IMPORTANT] **Принцип:** Одна папка, две ветки. Переключение через `git checkout`, не через разные директории. --- @@ -395,4 +395,4 @@ git push origin main --- -**Помни:** Dev для экспериментов, main для проверенного контента. Всегда тестируй перед публикацией. +>[!IMPORTANT] **Важно:** `Dev` для экспериментов, `main` для проверенного контента. Всегда тестируй перед публикацией. diff --git a/content/posts/blog-part-6-namespace-migration/index.md b/content/posts/blog-part-6-namespace-migration/index.md index fadd232..1b2e998 100644 --- a/content/posts/blog-part-6-namespace-migration/index.md +++ b/content/posts/blog-part-6-namespace-migration/index.md @@ -13,7 +13,7 @@ series_order: 6 Мораль была проста: **чисти за собой**. Сегодня делаем именно это - переносим Gitea из старого namespace в `oakazanin` и удаляем старый namespace навсегда. -Заодно разберём универсальный алгоритм миграции, который работает для любого сервиса. Показываю на примере Gitea, но всё описанное применимо к любому stateful сервису — PostgreSQL, MySQL, Nextcloud, MinIO. Принципы одинаковые: экспортируй манифесты, поменяй namespace, создай новое перед удалением старого. +Заодно разберём универсальный алгоритм миграции, который работает для любого сервиса. Показываю на примере Gitea, но всё описанное применимо к любому stateful сервису - PostgreSQL, MySQL, Nextcloud, MinIO. Принципы одинаковые: экспортируй манифесты, поменяй namespace, создай новое перед удалением старого. --- @@ -311,16 +311,16 @@ curl -s -o /dev/null -w "%{http_code}" https://git.example.com # 200 - Данные остаются нетронутыми **Nextcloud:** -- Аналогично — файлы на NFS не переносятся +- Аналогично - файлы на NFS не переносятся - Только манифесты меняют namespace - Zero downtime если создаёшь новое до удаления старого **MinIO (S3-хранилище):** - Stateful, работает через PV/PVC -- Те же принципы — новый namespace, тот же NFS путь +- Те же принципы - новый namespace, тот же NFS путь **Stateless сервисы (nginx, API):** -- Ещё проще — нет PV/PVC вообще +- Ещё проще - нет PV/PVC вообще - Только Deployment + Service, меняешь namespace, готово Главный принцип: **данные живут на PV, который привязан к NFS. Namespace меняется, путь на NFS остаётся.** diff --git a/public/about/index.html b/public/about/index.html index 44ce6be..3f8bed6 100644 --- a/public/about/index.html +++ b/public/about/index.html @@ -898,10 +898,10 @@
-

Привет! Меня зовут Олег. За 20 лет в IT проблемы росли вместе со мной: от «почему не печатает принтер» до «почему три сервера не могут договориться, кто из них главный». Техподдержка научила терпению — там быстро понимаешь, что «не работает» может означать что угодно, от выключенного монитора до сбоя на другом континенте. Сети научили начинать диагностику с розетки, а не с теории заговора. Системное администрирование — что между «всё работает» и «всё сломалось» обычно стоит один непрочитанный warning в логах трёхнедельной давности.

-

Сейчас я инфраструктурный инженер. Строю и чиню серверную инфраструктуру: много enterprise, ещё больше Open Source, изрядно импортозамещённого — в общем, всё что работает на Linux, с Linux и благодаря Linux. Работаю в Главгосэкспертизе России. Общаюсь с серверами на Bash, Python и прочих машинопонятных языках. Иногда серверы даже отвечают. Живу в Москве.

-

Дома — лаборатория. Нет, не стойка в подвале (хотя идея заманчивая). Один сервер, но серьёзный: виртуализация, Kubernetes, хранилище, мониторинг — всё по-взрослому, но если что-то упало — нет многомиллионных издержек и мир не остановился. Идеальный полигон: придумал, реализовал, сломал, починил, задокументировал. Полный цикл.

-

Этот блог — не enterprise-гайды для внедрения в банке. Это production, но в человеческом масштабе: домашний сервер, небольшая компания, стартап на трёх разработчиках. Решения, которые реально работают — просто без бюджета на команду SRE из десяти человек — инженеров надёжности, чьи зарплаты съедают бюджет стартапа за квартал. Документирую грабли, чтобы вы на них не наступали. Чем больнее наступил сам — тем подробнее статья.

+

Привет! Меня зовут Олег. За 20 лет в IT проблемы росли вместе со мной: от «почему не печатает принтер» до «почему три сервера не могут договориться, кто из них главный». Техподдержка научила терпению - там быстро понимаешь, что «не работает» может означать что угодно, от выключенного монитора до сбоя на другом континенте. Сети научили начинать диагностику с розетки, а не с теории заговора. Системное администрирование - что между «всё работает» и «всё сломалось» обычно стоит один непрочитанный warning в логах трёхнедельной давности.

+

Сейчас я инфраструктурный инженер. Строю и чиню серверную инфраструктуру: много enterprise, ещё больше Open Source, изрядно импортозамещённого - в общем, всё что работает на Linux, с Linux и благодаря Linux. Работаю в Главгосэкспертизе России. Общаюсь с серверами на Bash, Python и прочих машинопонятных языках. Иногда серверы даже отвечают. Живу в Москве.

+

Дома - лаборатория. Нет, не стойка в подвале (хотя идея заманчивая). Один сервер, но серьёзный: виртуализация, Kubernetes, хранилище, мониторинг - всё по-взрослому, но если что-то упало - нет многомиллионных издержек и мир не остановился. Идеальный полигон: придумал, реализовал, сломал, починил, задокументировал. Полный цикл.

+

Этот блог - не enterprise-гайды для внедрения в банке. Это production, но в человеческом масштабе: домашний сервер, небольшая компания, стартап на трёх разработчиках. Решения, которые реально работают - просто без бюджета на команду SRE из десяти человек - инженеров надёжности, чьи зарплаты съедают бюджет стартапа за квартал. Документирую грабли, чтобы вы на них не наступали. Чем больнее наступил сам - тем подробнее статья.

diff --git a/public/cheatsheets/git-workflow/index.html b/public/cheatsheets/git-workflow/index.html index ce0f7e2..a8c3dad 100644 --- a/public/cheatsheets/git-workflow/index.html +++ b/public/cheatsheets/git-workflow/index.html @@ -1155,8 +1155,13 @@
~/projects/blog/              ← одна папка, две ветки
   ├── main                    ← production (blog.ru)
   └── dev                     ← development (dev.blog.ru)
-

Принцип: Одна папка, две ветки. Переключение через git checkout, не через разные директории.

-
+
+
+
+
+ Принцип: Одна папка, две ветки. Переключение через git checkout, не через разные директории. +
+

Золотые правила
@@ -1618,8 +1623,13 @@ git merge dev --no-edit git push origin main


-

Помни: Dev для экспериментов, main для проверенного контента. Всегда тестируй перед публикацией.

- +
+
+
+
+ Важно: Dev для экспериментов, main для проверенного контента. Всегда тестируй перед публикацией. +
+
@@ -3282,6 +3292,34 @@