Quartz 4

formatting-examples

7 min readBohdan Derkach

formatting-examples

Приклади оформлення

Стенд готових патернів оформлення сторінок. У кожного є назва — пиши «оформи в стилі Назва», і застосуємо саме цей патерн. Усе рендериться і в Obsidian, і на сайті (Quartz v4.5.2).

Дві частини: наші патерни (нижче) і нативні фічі Quartz (callout-и, підсвітка, формули, вставки…). Типи діаграм — окремо у diagram-examples.

ПатернДля чого
Шапка сторінкиобов’язковий початок будь-якої сторінки
Мітки стану✅/🟡/⬜ — позначити повноту опису
Таблиця покриттязведення «скільки заповнено» по розділах (root-індекс сервісу)
Індекс зі станомсписок сторінок папки з колонкою стану
Матриця доступівфіча × роль з ✓/—
Тулбар-таблицяконтрол × що робить × ролі
Endpoints по Familydeeplink-и на Swagger, колонка на кожну Family
Endpoints (single)deeplink-и одного бекенду під фічею
Порівняння по Familyполе/фіча × Family з ✓/—
Реєстр сутностейсписок колекцій БД одним блоком
Підпис-аннотаціядрібний підзаголовок-контекст під H2/H3

Нативні фічі Quartz 4 (нижче): Callout · Виділення тексту · Списки-таски · Виноски · Приховані коментарі · Формули (LaTeX) · Вставки сторінок · Посилання на блок · Код: підсвітка і заголовок.

Шапка сторінки

Обов’язковий початок: теги типу (+ стан), backlink, H1, контекстна стрічка. Деталі — Шаблон сторінки.

#Service #golden #reviewed
 
[[favorites]]
 
# GoldenFavoritesService
 
`src/golden/favorites/GoldenFavoritesService.ts` — як RU стають фаворитами TU

Для UI замість шляху — (UI-екран Family-меню). Для entity — `шлях` · колекція `golden_lady`.

Мітки стану

Рядок-легенда + мітки в таблицях. ✅ заповнено · 🟡 частково · ⬜ скелет.

Покриття: 4 ✅ · 2 🟡 · 25 ⬜ (з 31). Легенда: ✅ заповнено · 🟡 частково · ⬜ скелет.

**Покриття:** 4 ✅ · 2 🟡 · 25 ⬜ (з 31). Легенда: ✅ заповнено · 🟡 частково · ⬜ скелет.

Деталі правила — Мітки покриття в індексах.

Таблиця покриття

Зведення по розділах для root-індексу сервісу. Колонки ✅ / 🟡 / ⬜ / Разом + підсумковий рядок.

Розділ✅🟡⬜Разом
ui-triggered422531
workers12——12
Разом1622543
| Розділ | ✅ | 🟡 | ⬜ | Разом |
|---|--:|--:|--:|--:|
| ui-triggered | 4 | 2 | 25 | 31 |
| workers | 12 | — | — | 12 |
| **Разом** | **16** | **2** | **25** | **43** |

--: у роздільнику = вирівнювання чисел праворуч. Живий приклад — Stack Golden.

Індекс зі станом

Список сторінок папки: колонка Стан перша, далі назва-лінк і опис. Для багатьох сторінок — групуємо H2-секціями.

СтанСторінкаЩо робить
✅Favoritesпари TU↔RU з історією, контактами
🟡МетрикиKPI операторів / TU з ClickHouse
⬜ОператориCRUD операторів, прив’язки
| Стан | Сторінка | Що робить |
|---|---|---|
| ✅ | [[ui-triggered/favorites\|Favorites]] | пари TU↔RU з історією, контактами |
| 🟡 | [[ui-triggered/metric\|Метрики]] | KPI операторів / TU з ClickHouse |
| ⬜ | [[ui-triggered/operator\|Оператори]] | CRUD операторів, прив'язки |

Усередині wiki-лінку з підписом екрануємо \| (бек-слеш), бо | — роздільник колонки.

Матриця доступів

Хто що може: рядок = можливість/логіка, колонки = ролі. ✓ доступно, — ні. Без роутів — endpoint-и окремою таблицею нижче.

#Можливістьdirectortop-managersupervisoroperator
1Усі оператори✓———
2По тімліду✓—✓—
3По оператору✓——✓
| # | Можливість | `director` | `supervisor` | `operator` |
|---|---|:--:|:--:|:--:|
| 1 | Усі оператори | ✓ | — | — |
| 2 | По оператору | ✓ | — | ✓ |

:--: = центрування. Живий приклад — Courses.

Тулбар-таблиця

Контроли екрану: що робить + кому видно.

КонтролЩо робитьРолі
Balance ↔ Onlineперемикач режиму клітинок: $ чи час онлайнусі
Monthмісяць за який дивимосьусі
GNRзастосувати фільтри і перерахуватиусі
| Контрол | Що робить | Ролі |
|---|---|---|
| **Balance ↔ Online** | перемикач режиму клітинок: $ чи час онлайн | усі |
| **GNR** | застосувати фільтри і перерахувати | усі |

Endpoints по Family

Один UI-екран = 4 беки. Рядок = під-фіча, колонка = Family. *TODO* де бек ще не в Swagger.

FamilyСписокРедагування
goldengetFavoritesByLadyupdateFavoritById
primeTODOTODO
udateTODOTODO
chathouseTODOTODO
| Family | Список | Редагування |
|---|---|---|
| `golden` | [getFavoritesByLady](https://...golden/api-docs/v2#/Favorites) | [updateFavoritById](https://...) |
| `prime` | *TODO* | *TODO* |

Живий приклад — Favorites. Правило — Канон структури: фічі + ендпоінти.

Endpoints (single)

Для single-backend сторінки (academy, stack): під кожною фічею своя таблиця, одна колонка.

EndpointЩо робить
course/getAllсписок курсів (бек фільтрує за роллю)
course/updateстворити або оновити курс
| Endpoint | Що робить |
|---|---|
| [course/getAll](https://...academy/api-docs#/Course) | список курсів |
| [course/update](https://...academy/api-docs#/Course) | створити/оновити курс |

Порівняння по Family

Що де є: рядок = поле/фіча, колонка = Family. ✓ є, — нема.

Колонкаgoldenprimeudatechathouse
Gifts✓—✓✓
Black list—✓✓✓
Profit✓——✓
| Колонка | golden | prime | udate | chathouse |
|---|:--:|:--:|:--:|:--:|
| Gifts | ✓ | — | ✓ | ✓ |
| Black list | — | ✓ | ✓ | ✓ |

Реєстр сутностей

Усі колекції/таблиці одним блоком: жирний підпис групи + bullet’и. Назва в `, далі опис, в кінці → [[Name]] або → —.

Lady (TU)

  • golden_lady — TU, центральна сутність → Lady
  • golden_lady_event_logs — журнал подій по TU → —

Statistics

  • golden_statistic — денний бонус-запис → —
**Lady (TU)**
- `golden_lady` — TU, центральна сутність → [[Lady]]
- `golden_lady_event_logs` — журнал подій по TU → —

Правило — Реєстр сутностей. Живий приклад — golden entities.

Підпис-аннотація

Дрібний контекст під H2/H3 (метод, тригер, роль) — через <sub>, щоб не роздувати заголовок.

Ручний тригер

convertContacts · роль technical_department

Перебудувати фаворитів вручну. Адмінська дія.

### Ручний тригер
<sub>`convertContacts` · роль `technical_department`</sub>
 
Перебудувати фаворитів вручну. Адмінська дія.

Живий приклад — golden favorites.

Нативні фічі Quartz 4

Не наші патерни, а вбудовані можливості Quartz v4.5.2 (Obsidian- та GitHub-flavored markdown). Працюють «з коробки», нічого підключати не треба.

Callout

Виділений кольоровий блок: > [!тип] Заголовок + тіло з >. Дефіс після типу ([!note]-) робить блок згорнутим (розкривається кліком), плюс ([!note]+) — розгорнутим але згортабельним. Callout можна вкладати.

Заголовок

Текст блоку. Перелік теж можна:

  1. перший
  2. другий

Зовнішній

Вкладений

Callout усередині callout-а.

> [!important] Заголовок            ← статичний
> 
> Текст блоку.
 
> [!warning]- Згорнутий              ← дефіс = collapsible, згорнуто
> 
> Розкривається по кліку.
 
> [!tip]+ Розгорнутий                ← плюс = collapsible, відкрито
> 
 
> [!tip] Зовнішній
> 
> > [!example] Вкладений             ← callout у callout-і
> > Вкладений вміст.

Типи (з аліасами): note · abstract/summary/tldr · info · todo · tip/hint/important · success/check/done · question/help/faq · warning/attention/caution · failure/missing/fail · danger/error · bug · example · quote/cite. Кожен — свій колір та іконка. Без [!тип] — звичайна цитата.

Виділення тексту

Inline-форматування. Приклад: жовтий маркер, жирний, курсив, закреслений, inline code.

==маркер== · **жирний** · *курсив* · ~~закреслений~~ · `код`

Списки-таски

Інтерактивні чекбокси (GFM) — рендеряться як галочки.

  • зроблено
  • ще ні
- [x] зроблено
- [ ] ще ні

Виноски

Маркер у тексті + визначення будь-де — Quartz збере їх донизу сторінки.

Текст із виноскою.1

Текст із виноскою.[^1]
 
[^1]: Пояснення виноски.

Приховані коментарі

“ — нотатка для автора, не рендериться ні на сайті, ні в Obsidian preview. Зручно лишати думки/нагадування прямо в тілі.

Формули (LaTeX)

KaTeX. Inline $...$, блок $$...$$. Inline: . Блок:

Inline: $E = mc^2$
 
$$ \frac{\text{on-time}}{\text{total}} \times 100\% $$

Вставки сторінок (embeds)

Трансклюзія — вставити іншу сторінку/секцію/блок/картинку прямо в поточну.

![[page]]              ← уся сторінка
![[page#секція|Секція]]       ← конкретна секція
![[page#^block-id|^block-id]]    ← конкретний блок
![[image.png|300]]     ← картинка шириною 300px

Обережно з повними ![[page]]

Дублює контент і роздуває сторінку. Для звʼязків майже завжди краще звичайний [[page]].

Посилання на блок

Якірець на конкретний абзац: постав ^id в кінці рядка, лінкуй через #^id.

Цей абзац можна зацитувати точково. ^my-anchor
 
Десь інде: [[page#^my-anchor|^my-anchor]]

Код: підсвітка і заголовок

Розширення fenced-блоків (Quartz syntax highlighting):

```ts {2,4-5} title="example.ts" showLineNumbers
const a = 1;
const b = 2;     // ← підсвічений рядок 2
const c = 3;
const d = 4;     // ← підсвічені 4-5
const e = 5;
```
  • {2,4-5} — підсвітити рядки 2 і 4-5
  • title="..." — заголовок / імʼя файлу над блоком
  • showLineNumbers (або showLineNumbers{50} — почати з 50) — номери рядків
  • /слово/ після мови — підсвітити всі входження слова
  • Вкладений код-блок — обгорни у fence на 1 бек-тік довший за внутрішній

Footnotes

  1. Пояснення виноски — зʼявиться внизу сторінки. ↩

Graph View

Backlinks