7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Дока сейчас оффлайн!,
15 | Эта статья недоступна,,
16 | но смотрите, какие уже есть:
17 |
18 |
21 | {% include "articles-gallery.njk" %}
22 |
23 |
24 |
25 | {{ footer() }}
26 |
--------------------------------------------------------------------------------
/src/images/baseline/preview.svg:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 | U×ᴥ×U
12 |
13 |
14 |
15 |
16 | Мы ничего не нашли,
17 | но смотрите, что есть ещё:
18 |
19 |
22 | {% include "articles-gallery.njk" %}
23 |
24 |
25 |
26 | {{ footer() }}
27 |
--------------------------------------------------------------------------------
/src/styles/blocks/search-tag.css:
--------------------------------------------------------------------------------
1 | .search-tag {
2 | margin: 0;
3 | padding: var(--offset);
4 | border: 0;
5 | display: flex;
6 | justify-content: center;
7 | font-size: var(--font-size-s);
8 | line-height: var(--font-line-height-s);
9 | }
10 |
11 | .search-tag__legend {}
12 |
13 | .search-tag__switch {}
14 |
15 | @media not all and (width >= 1024px) {
16 | .search-tag__legend {
17 | display: none;
18 | }
19 | }
20 |
21 | @media (width >= 1024px) {
22 | .search-tag {
23 | flex-direction: column;
24 | align-items: flex-start;
25 | gap: 6px;
26 | }
27 | }
28 |
29 | @media not all and (width >= 768px) {
30 | .search-tag {
31 | align-items: flex-start;
32 | flex-direction: column;
33 | gap: 10px;
34 | padding-bottom: 20px;
35 | }
36 |
37 | .search-tag__legend {
38 | display: block;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/styles/blocks/copy-button.css:
--------------------------------------------------------------------------------
1 | .copy-button {
2 | position: relative;
3 | margin: 0;
4 | padding: 2px 0;
5 | border: 0;
6 | display: grid;
7 | align-items: center;
8 | grid-auto-flow: column;
9 | grid-gap: 6px;
10 | background-color: transparent;
11 | font-size: var(--font-size-s);
12 | line-height: calc(20 / 15);
13 | cursor: pointer;
14 | }
15 |
16 | .copy-button__icon {}
17 |
18 | .copy-button__text {}
19 |
20 | .copy-button__text::before {
21 | content: '';
22 | position: absolute;
23 | inset: 0;
24 | }
25 |
26 | .copy-button:disabled,
27 | .copy-button:active {
28 | color: inherit;
29 | }
30 |
31 | .copy-button:not([data-state="idle"]) [data-state="idle"],
32 | .copy-button:not([data-state="success"]) [data-state="success"],
33 | .copy-button:not([data-state="error"]) [data-state="error"] {
34 | display: none;
35 | }
36 |
--------------------------------------------------------------------------------
/src/transforms/color-picker-transform.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @param {Window} window
3 | */
4 | module.exports = function (window) {
5 | const content = window.document.querySelector('.article__content-inner')
6 | const color = content?.querySelectorAll('.token.color')
7 |
8 | color?.forEach(function (item) {
9 | if (/(transparent)/.test(item.textContent)) {
10 | return item.classList.replace('color', 'color-transparent') // Выключает color-picker для цвета transparent
11 | }
12 |
13 | item.style.setProperty('--color-picker', ` ${item.textContent}`)
14 | item.classList.add('color-picker__inline')
15 |
16 | if (/[(]/.test(item.previousElementSibling.textContent)) {
17 | item.previousElementSibling.classList.add('color-picker__grouped') // Добавляет дополнительный margin скобке, если затем следует токен цвета
18 | }
19 | })
20 | }
21 |
--------------------------------------------------------------------------------
/.github/release.yml:
--------------------------------------------------------------------------------
1 | changelog:
2 | categories:
3 | - title: Автоматизация
4 | labels:
5 | - автоматизация
6 | - title: Вопрос
7 | labels:
8 | - вопрос
9 | - title: Вёрстка
10 | labels:
11 | - вёрстка
12 | - title: Движок
13 | labels:
14 | - движок
15 | - title: Дизайн
16 | labels:
17 | - дизайн
18 | - title: Доступность
19 | labels:
20 | - доступность
21 | - title: Кухня
22 | labels:
23 | - кухня
24 | - title: Ошибка
25 | labels:
26 | - ошибка
27 | - title: Поиск
28 | labels:
29 | - поиск
30 | - title: Улучшение
31 | labels:
32 | - улучшение
33 | - title: Хороший старт
34 | labels:
35 | - хороший старт
36 | - title: Другие изменения
37 | labels:
38 | - "*"
39 |
--------------------------------------------------------------------------------
/src/styles/light-theme.css:
--------------------------------------------------------------------------------
1 | /* настройки светлой темы (тема по умолчанию) */
2 | :root {
3 | color-scheme: light;
4 |
5 | --is-light-theme-on: 1;
6 | --is-dark-theme-on: 0;
7 |
8 | --color-base-text: var(--color-dark);
9 | --color-base-background: var(--color-light);
10 |
11 | --color-text: hsl(var(--color-dark));
12 | --color-background: hsl(var(--color-light));
13 | --color-fade: 0 0% 82%;
14 | --color-border: hsl(var(--color-base-text) / 0.3);
15 |
16 | --color-html: hsl(var(--color-orange));
17 | --color-css: hsl(var(--color-blue));
18 | --color-js: hsl(var(--color-yellow));
19 | --color-tools: hsl(var(--color-green));
20 | --color-recipes: hsl(var(--color-violet));
21 | --color-a11y: hsl(var(--color-aquamarine));
22 |
23 | --color-subscribe-success: hsl(var(--color-green));
24 | --color-subscribe-error: hsl(var(--color-red));
25 | }
26 |
--------------------------------------------------------------------------------
/src/views/feed.11tydata.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | permalink: 'feed/index.xml',
3 | eleventyExcludeFromCollections: true,
4 | meta: {
5 | title: 'Новое в Доке',
6 | subtitle: 'Дока — это документация для разработчиков на понятном языке.',
7 | language: 'ru',
8 | url: 'https://doka.guide/',
9 | author: {
10 | name: 'Дока Дог',
11 | email: 'hi@doka.guide',
12 | },
13 | },
14 |
15 | eleventyComputed: {
16 | posts: async function (data) {
17 | const { collections } = data
18 | return collections.posts.filter((p) => typeof p === 'object').sort((p1, p2) => p1.date - p2.date)
19 | },
20 | updated: async function (data) {
21 | const { posts } = data
22 | if (posts[0]) {
23 | return posts[0]?.date
24 | } else {
25 | return new Date().toISOString()
26 | }
27 | },
28 | },
29 | }
30 |
--------------------------------------------------------------------------------
/src/includes/blocks/search-tags.njk:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 | {{ title }}
16 |
17 | {% if description %}
18 |
19 | {{ description }}
20 |
21 | {% endif %}
22 |
23 |
25 | {{ pageObject.templateContent | safe }}
26 |
27 |
28 |
29 | {{ footer() }}
30 |
--------------------------------------------------------------------------------
/src/views/people-index.11tydata.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | permalink: '/people/index.json',
3 |
4 | eleventyComputed: {
5 | json: function (data) {
6 | const { peopleData, collections } = data
7 | const people = collections.people
8 |
9 | for (const key in peopleData) {
10 | peopleData[key]['url'] = people.filter((person) => person.fileSlug === peopleData[key].id)[0].data.url
11 | }
12 |
13 | const buffer = {}
14 | buffer['images'] = []
15 | for (const key in peopleData) {
16 | buffer['images'].push(peopleData[key]['photoURL'])
17 | }
18 | buffer['images'] = buffer['images'].filter((img) => img !== null)
19 |
20 | buffer['links'] = []
21 | for (const key in peopleData) {
22 | buffer['links'].push(peopleData[key]['pageLink'])
23 | }
24 |
25 | return buffer
26 | },
27 | },
28 | }
29 |
--------------------------------------------------------------------------------
/src/styles/blocks/people-page.css:
--------------------------------------------------------------------------------
1 | .people-page {
2 | --offset: 10px;
3 | min-height: 100vh;
4 | }
5 |
6 | .people-page__main {
7 | padding-block: clamp(var(--offset), 8%, 130px);
8 | }
9 |
10 | .people-page__filter {
11 | z-index: 2;
12 | }
13 |
14 | .people-page__list {
15 | flex: 1 1 0%;
16 | padding: var(--offset);
17 | }
18 |
19 | .people-page__footer {
20 | position: sticky;
21 | top: 100vh;
22 | }
23 |
24 | @media (width >= 768px) {
25 | .people-page {
26 | --offset: 20px;
27 | }
28 |
29 | .people-page__main {
30 | position: relative;
31 | z-index: 0;
32 | display: flex;
33 | align-items: flex-start;
34 | }
35 |
36 | .people-page__filter {
37 | position: sticky;
38 | top: calc(var(--header-height) * 1px);
39 | flex: 0 0 14em;
40 | box-sizing: border-box;
41 | transition: top 0.6s;
42 | will-change: top;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/transforms/demo-link-transform.js:
--------------------------------------------------------------------------------
1 | // Правит пути к демкам и картинкам, которые вставлены в раздел «На практике».
2 | // Чтобы сослаться на демку из раздела «На практике» используется относительный путь '../demos/index.html'.
3 | // При сборке сайта, раздел вклеивается в основную статью и относительная ссылка ломается.
4 | // Эта трансформация заменяет '../demos/index.html' на './demos/index.html'
5 | /**
6 | * @param {Window} window
7 | */
8 | module.exports = function (window) {
9 | const practicesSection = window.document.getElementById('practices')
10 | if (practicesSection) {
11 | const mediaElements = practicesSection.querySelectorAll('img, iframe')
12 | for (const element of mediaElements) {
13 | const oldLink = element.getAttribute('src')
14 | const newLink = oldLink.replace('../', './')
15 | element.setAttribute('src', newLink)
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/scripts/modules/code-line-numbers.js:
--------------------------------------------------------------------------------
1 | import debounce from '../libs/debounce.js'
2 |
3 | function init() {
4 | const codeBlocks = document.querySelectorAll('pre[data-lang]')
5 |
6 | if (codeBlocks.length === 0) {
7 | return
8 | }
9 |
10 | function computedHeights() {
11 | codeBlocks.forEach((block) => {
12 | const originalLines = block.querySelectorAll('.block-code__original-line')
13 | const linesMarkers = block.querySelectorAll('.block-code__line')
14 |
15 | originalLines.forEach((line, index) => {
16 | linesMarkers[index].style.height = `${getComputedStyle(line).height}`
17 | })
18 | })
19 | }
20 |
21 | const debouncedCallback = debounce(computedHeights, 100)
22 |
23 | window.addEventListener('resize', debouncedCallback)
24 | window.addEventListener('orientationchange', debouncedCallback)
25 |
26 | computedHeights()
27 | }
28 |
29 | init()
30 |
--------------------------------------------------------------------------------
/src/styles/blocks/article-image.css:
--------------------------------------------------------------------------------
1 | .article-image {
2 | --aspect-ratio: 16 / 7;
3 | display: grid;
4 | grid-template-columns: 1fr auto;
5 | grid-column-gap: 1em;
6 | }
7 |
8 | .article-image__picture {
9 | position: relative;
10 | display: block;
11 | }
12 |
13 | .article-image__picture::before {
14 | content: "";
15 | display: block;
16 | padding-top: calc(100% / (var(--aspect-ratio)));
17 | }
18 |
19 | .article-image__content {
20 | position: absolute;
21 | top: 0;
22 | left: 0;
23 | width: 100%;
24 | height: 100%;
25 | object-fit: contain;
26 | object-position: 50% 50%;
27 | }
28 |
29 | .article-image__author {
30 | writing-mode: vertical-rl;
31 | transform: rotate(180deg);
32 | text-align: end;
33 | font-size: 0.64em;
34 | line-height: 1.25;
35 | }
36 |
37 | @media not all and (width >= 425px) {
38 | .article-image {
39 | --aspect-ratio: 1 / 1;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/views/page.njk:
--------------------------------------------------------------------------------
1 | {% from "blocks/header.njk" import header with context %}
2 | {% from "blocks/footer.njk" import footer with context %}
3 |
4 | {% set isLogoContrastColor = hasCategory %}
5 |
6 | {{ header(
7 | title=title,
8 | isLogoContrastColor=isLogoContrastColor
9 | ) }}
10 |
11 |
12 |
13 |
14 |
15 | {{ title }}
16 |
17 | {% if description %}
18 |
19 | {{ description }}
20 |
21 | {% endif %}
22 |
23 |
25 | {{ pageObject.templateContent | safe }}
26 |
27 |
28 |
29 | {{ footer() }}
30 | {% include "subscribe-popup.njk" %}
31 |
--------------------------------------------------------------------------------
/src/libs/role-constructor/role-constructor.js:
--------------------------------------------------------------------------------
1 | const collection = require('./collection.json')
2 |
3 | function getRole(assignedRole) {
4 | let role = {}
5 | if (typeof assignedRole === 'object') {
6 | const keys = Object.keys(assignedRole)
7 | const type = keys.length === 1 ? keys[0] : undefined
8 | if (type && collection[type]) {
9 | const typicalRole = collection[type]
10 | const roleFields = new Set(Object.keys(typicalRole))
11 | roleFields.add(...Object.keys(assignedRole[type]))
12 | roleFields.forEach((field) => {
13 | if (assignedRole[type][field]) {
14 | role[field] = assignedRole[type][field]
15 | } else {
16 | role[field] = typicalRole[field]
17 | }
18 | })
19 | }
20 | } else if (typeof assignedRole === 'string') {
21 | role = collection[assignedRole]
22 | }
23 | return role
24 | }
25 |
26 | module.exports = {
27 | getRole,
28 | }
29 |
--------------------------------------------------------------------------------
/src/views/feed.njk:
--------------------------------------------------------------------------------
1 |
2 |
3 | {% if article.imageLink %}
4 |
5 | 
11 |
12 | {% endif %}
13 |
18 | {% if ((not hasImage) and article.description) %}
19 |
20 | {{ article.description | descriptionMarkdown | safe }}
21 |
22 | {% endif %}
23 |
24 | {% endmacro %}
25 |
--------------------------------------------------------------------------------
/src/transforms/toc-transform.js:
--------------------------------------------------------------------------------
1 | const HeadingHierarchy = require('../libs/heading-hierarchy/heading-hierarchy')
2 |
3 | // генерация оглавления
4 | /**
5 | * @param {Window} window
6 | */
7 | module.exports = function (window) {
8 | const articleContent = window.document.querySelector('.article__content-inner')
9 |
10 | if (!articleContent) {
11 | return
12 | }
13 |
14 | const articleNavContent = window.document.querySelector('.article-nav__content')
15 | const headings = Array.from(
16 | articleContent.querySelectorAll(
17 | 'h2, h3, h4, h5, h6, #questions > div.questions__list > div.question__request > aside > div > p:first-of-type'
18 | )
19 | )
20 | // не учитываем заголовки, которые лежат внутри тегов details, внутри советов и внутри ответов
21 | .filter((title) => !title.closest('details, .practices__content, .question__response'))
22 |
23 | const hierarchy = HeadingHierarchy.createHierarchy(headings)
24 | articleNavContent.innerHTML = HeadingHierarchy.render(hierarchy)
25 | }
26 |
--------------------------------------------------------------------------------
/src/styles/blocks/standalone-page.css:
--------------------------------------------------------------------------------
1 | .standalone-page {
2 | --offset: 10px;
3 | padding-bottom: clamp(20px, 14.7%, 160px);
4 | }
5 |
6 | .standalone-page__wrapper {
7 | margin-left: auto;
8 | margin-right: auto;
9 | max-width: 1087px;
10 | }
11 |
12 | .standalone-page__header {
13 | padding: var(--offset);
14 | padding-top: clamp(20px, 8%, 130px);
15 | border-bottom: 1px solid var(--color-border);
16 | }
17 |
18 | .standalone-page__title {
19 | margin-top: 0;
20 | margin-bottom: 0;
21 | font-size: var(--font-size-xl);
22 | line-height: var(--font-line-height-xl);
23 | font-weight: normal;
24 | }
25 |
26 | .standalone-page__description {
27 | margin-top: 10px;
28 | margin-bottom: 0;
29 | }
30 |
31 | .standalone-page__content {
32 | padding: var(--offset);
33 | }
34 |
35 | @media (width >= 1024px) {
36 | .standalone-page {
37 | --offset: 20px;
38 | }
39 |
40 | .standalone-page__title {
41 | font-size: var(--font-size-xxl);
42 | line-height: var(--font-line-height-xxl);
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/images/assets/cached-link.svg:
--------------------------------------------------------------------------------
1 |
8 |
9 | {{ icon }}
10 |
11 |
19 |
4 |
5 | {% if cover.mobile %}
6 |
7 | {% endif %}
8 | 
9 |
10 | {% if (authors and authors.length > 0) %}
11 |
12 | Иллюстрация: {{ authorsList(authors=authors) }}
13 |
14 | {% endif %}
15 |