diff --git a/src/routes/Footer.svelte b/src/lib/components/Footer.svelte similarity index 100% rename from src/routes/Footer.svelte rename to src/lib/components/Footer.svelte diff --git a/src/routes/Navbar.svelte b/src/lib/components/Navbar.svelte similarity index 58% rename from src/routes/Navbar.svelte rename to src/lib/components/Navbar.svelte index 915fdbd..be53faa 100644 --- a/src/routes/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -2,6 +2,10 @@ import MaterialSymbolsTranslateRounded from '~icons/material-symbols/translate-rounded'; import {locale} from "$lib/translations"; import {onMount} from "svelte"; + import {page} from '$app/stores'; + + export let homepage: boolean = false + export let title: string | null = null let nav: HTMLElement; @@ -10,6 +14,11 @@ } onMount(async () => { + if (!homepage) { + nav.classList.add('nav--with-border') + return + } + const {gsap} = await import('gsap') const {ScrollTrigger} = await import('gsap/ScrollTrigger') @@ -30,19 +39,36 @@ diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts new file mode 100644 index 0000000..853bd69 --- /dev/null +++ b/src/routes/blog/+page.server.ts @@ -0,0 +1,18 @@ +export const load = async () => { + const posts = import.meta.glob("./**/*.svx", {eager: true}) + const postPaths = Object.keys(posts) + + const pages = await Promise.all(postPaths.map(async (pp) => { + const {metadata} = await import(pp) + return { + path: pp + .replace('/+page.svx', '') + .replace('.', '/blog'), + ...metadata + } + })) + + return { + pages + } +} diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte new file mode 100644 index 0000000..daf1100 --- /dev/null +++ b/src/routes/blog/+page.svelte @@ -0,0 +1,11 @@ + + +
+ {#each data.pages as page} + +

{page.title}

+ + {/each} +
diff --git a/src/routes/blog/html-in-css/+page.svx b/src/routes/blog/html-in-css/+page.svx index c41b72e..a2ccb65 100644 --- a/src/routes/blog/html-in-css/+page.svx +++ b/src/routes/blog/html-in-css/+page.svx @@ -1,9 +1,10 @@ --- -title: "DRY-фреймворк: как сократить HTML-код и писать только на CSS" +title: "HTML in CSS: как сократить HTML-код и писать только на CSS" +date: "2024-08-01" ---
- 2024-08-01 + {date}
# {title} @@ -12,17 +13,17 @@ title: "DRY-фреймворк: как сократить HTML-код и пис ### Принцип DRY -Представьте: у вас есть страница со скопированным кодом. Если заменить одну строку в CSS, придется вносить изменения в зависимые блоки. А если вдруг забыли их поменять, то, скорее всего, вас будет ждать долгий поиск и мучительное решение проблемы. +Представьте: у вас есть страница с неким взаимосвязанным кодом. Если заменить одну строку в одном фрагменте, придется вносить изменения в зависимые блоки. А если вдруг забыли их поменять, то, скорее всего, вас будет ждать долгий поиск и мучительное решение проблемы. -Чтобы предотвратить ошибку, я решил придерживаться главной заповеди чистого кода — DRY, Don’t Repeat Yourself. Принцип помогает сократить повторяющийся код за счет разделения проекта на мелкие независимые модули. Туда можно с легкостью вносить новые изменения — другие блоки не пострадают. +Чтобы предотвратить ошибку, я решил придерживаться главной заповеди чистого кода -- DRY, Don’t Repeat Yourself. Принцип помогает сократить повторяющийся код за счет разделения проекта на мелкие независимые модули. Туда можно с легкостью вносить новые изменения -- другие блоки не пострадают. -DRY замотивировал меня разработать такой проект, в котором принцип осуществлялся на 110%. Изначально, чтобы сверстать страницу, нужно было описать структуру документа в HTML, а потом — в селекторах на CSS. Приходилось проделывать работу дважды. +DRY замотивировал меня разработать такой проект, в котором принцип осуществлялся на 110%. Изначально, чтобы сверстать страницу, нужно было описать структуру документа в HTML, а потом -- в селекторах на CSS. Приходилось проделывать работу дважды. -Стало интересно, что будет, если поменять структуру документа. Перестать тратить время на написание кода в двух местах и сконцентрироваться только на CSS? В своем фреймворке я оптимизировал структуру и сделал ее намного удобнее (вот только для кого?). +Стало интересно, что будет, если поменять структуру документа. Перестать тратить время на написание кода в двух местах и сконцентрироваться только на CSS? ### Работа с фреймворком -Кратко расскажу о принципе работы фреймворка. HTML in CSS — это способ избежать повторяющийся код. В нем можно писать только на CSS, HTML будет генерироваться самостоятельно. +Кратко расскажу о принципе работы фреймворка. HTML in CSS -- это способ избежать повторяющийся код. В нем можно писать только на CSS, HTML будет генерироваться самостоятельно. Перед вами стандартная страница с версткой: @@ -49,10 +50,10 @@ DRY замотивировал меня разработать такой про ``` Синьоры и сеньориты среди вас, вероятно, заметили, что лишняя информация находится: -- в HTML — `h1 id="title"`; -- в CSS — `h1#title {`; -- в HTML — `main id="main"`; -- в CSS — `main#main`. +- в HTML -- `h1 id="title"`; +- в CSS -- `h1#title {`; +- в HTML -- `main id="main"`; +- в CSS -- `main#main`. HTML полностью повторяет код в CSS, поэтому я решил убрать содержимое тега ``. Без него мы не потеряем ничего, кроме контента: @@ -84,7 +85,7 @@ HTML полностью повторяет код в CSS, поэтому я ре HTML in CSS можно использовать практически на любом коде сайта, но есть несколько оговорок. -Селекторы могут создать только один элемент и не более — двух одинаковых id не бывает. +Селекторы могут создать только один элемент и не более -- двух одинаковых id не бывает. ```css #parent > #child {} @@ -105,7 +106,7 @@ HTML in CSS можно использовать практически на лю О проекте и его особенностях мы узнали. Теперь рассмотрим, как использовать ссылки, вложенность, порядок и другие функции с помощью инструмента.
-У фреймворка есть «козырь в рукаве» — это селекторы атрибутов. Он предлагает широкий выбор элементов для разработки: от картинок и видео до айфреймов. Мы часто будем использовать его в наших примерах. +У фреймворка есть «козырь в рукаве» -- это селекторы атрибутов. Он предлагает широкий выбор элементов для разработки: от картинок и видео до айфреймов. Мы часто будем использовать его в наших примерах.
### Ссылки @@ -249,23 +250,23 @@ a#kopyl-link[href="kopyl.dev"][target="_blank"] { ### JavaScript -К сожалению, фреймворк не поддерживает JavaScript, но это не мешает подключить к нему внешний файл — `main.js`. Да и никто не запретит нам описывать селекторы для тегов `script` и добавлять туда атрибуты. +К сожалению, фреймворк не поддерживает JavaScript, но это не мешает подключить к нему внешний файл -- `main.js`. Да и никто не запретит нам описывать селекторы для тегов `script` и добавлять туда атрибуты. ```css script#my-script[src="/main.js"] {} ``` -В `main.js` можно использовать любой интерактив, который нужен сайту, — например, обработку событий, клиентский роутер и другие. +В `main.js` можно использовать любой интерактив, который нужен сайту, -- например, обработку событий, клиентский роутер и другие. ## Заключение -Возможно, некоторые уже захотели переписать свой продакшн-сайт на HTML in CSS, но мне жаль вас огорчать — на самом деле это фреймворк-шутка. +Возможно, некоторые уже захотели переписать свой продакшн-сайт на HTML in CSS, но мне жаль вас огорчать -- на самом деле это фреймворк-шутка. Одним вечером мне стало интересно, как парсится CSS и как выглядит его структура. В процессе изучения пришла в голову идея создать свой фреймворк. Как говорится, закрепил теорию практикой. Кстати, фреймворк занимает около 120 строк неубористого кода.
Репозиторий проекта diff --git a/src/routes/blog/prism-one-dark.css b/src/routes/blog/prism-one-dark.css new file mode 100644 index 0000000..ffde688 --- /dev/null +++ b/src/routes/blog/prism-one-dark.css @@ -0,0 +1,440 @@ +/** + * One Dark theme for prism.js + * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax + */ + +/** + * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) + * From colors.less + * --mono-1: hsl(220, 14%, 71%); + * --mono-2: hsl(220, 9%, 55%); + * --mono-3: hsl(220, 10%, 40%); + * --hue-1: hsl(187, 47%, 55%); + * --hue-2: hsl(207, 82%, 66%); + * --hue-3: hsl(286, 60%, 67%); + * --hue-4: hsl(95, 38%, 62%); + * --hue-5: hsl(355, 65%, 65%); + * --hue-5-2: hsl(5, 48%, 51%); + * --hue-6: hsl(29, 54%, 61%); + * --hue-6-2: hsl(39, 67%, 69%); + * --syntax-fg: hsl(220, 14%, 71%); + * --syntax-bg: hsl(220, 13%, 18%); + * --syntax-gutter: hsl(220, 14%, 45%); + * --syntax-guide: hsla(220, 14%, 71%, 0.15); + * --syntax-accent: hsl(220, 100%, 66%); + * From syntax-variables.less + * --syntax-selection-color: hsl(220, 13%, 28%); + * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); + * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); + */ + +code[class*="language-"], +pre[class*="language-"] { + background: hsl(220, 13%, 18%); + color: hsl(220, 14%, 71%); + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Selection */ +code[class*="language-"]::-moz-selection, +code[class*="language-"] *::-moz-selection, +pre[class*="language-"] *::-moz-selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; +} + +code[class*="language-"]::selection, +code[class*="language-"] *::selection, +pre[class*="language-"] *::selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + border-radius: 0.3em; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.2em 0.3em; + border-radius: 0.3em; + white-space: normal; +} + +/* Print */ +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +.token.comment, +.token.prolog, +.token.cdata { + color: hsl(220, 10%, 40%); +} + +.token.doctype, +.token.punctuation, +.token.entity { + color: hsl(220, 14%, 71%); +} + +.token.attr-name, +.token.class-name, +.token.boolean, +.token.constant, +.token.number, +.token.atrule { + color: hsl(29, 54%, 61%); +} + +.token.keyword { + color: hsl(286, 60%, 67%); +} + +.token.property, +.token.tag, +.token.symbol, +.token.deleted, +.token.important { + color: hsl(355, 65%, 65%); +} + +.token.selector, +.token.string, +.token.char, +.token.builtin, +.token.inserted, +.token.regex, +.token.attr-value, +.token.attr-value > .token.punctuation { + color: hsl(95, 38%, 62%); +} + +.token.variable, +.token.operator, +.token.function { + color: hsl(207, 82%, 66%); +} + +.token.url { + color: hsl(187, 47%, 55%); +} + +/* HTML overrides */ +.token.attr-value > .token.punctuation.attr-equals, +.token.special-attr > .token.attr-value > .token.value.css { + color: hsl(220, 14%, 71%); +} + +/* CSS overrides */ +.language-css .token.selector { + color: hsl(355, 65%, 65%); +} + +.language-css .token.property { + color: hsl(220, 14%, 71%); +} + +.language-css .token.function, +.language-css .token.url > .token.function { + color: hsl(187, 47%, 55%); +} + +.language-css .token.url > .token.string.url { + color: hsl(95, 38%, 62%); +} + +.language-css .token.important, +.language-css .token.atrule .token.rule { + color: hsl(286, 60%, 67%); +} + +/* JS overrides */ +.language-javascript .token.operator { + color: hsl(286, 60%, 67%); +} + +.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { + color: hsl(5, 48%, 51%); +} + +/* JSON overrides */ +.language-json .token.operator { + color: hsl(220, 14%, 71%); +} + +.language-json .token.null.keyword { + color: hsl(29, 54%, 61%); +} + +/* MD overrides */ +.language-markdown .token.url, +.language-markdown .token.url > .token.operator, +.language-markdown .token.url-reference.url > .token.string { + color: hsl(220, 14%, 71%); +} + +.language-markdown .token.url > .token.content { + color: hsl(207, 82%, 66%); +} + +.language-markdown .token.url > .token.url, +.language-markdown .token.url-reference.url { + color: hsl(187, 47%, 55%); +} + +.language-markdown .token.blockquote.punctuation, +.language-markdown .token.hr.punctuation { + color: hsl(220, 10%, 40%); + font-style: italic; +} + +.language-markdown .token.code-snippet { + color: hsl(95, 38%, 62%); +} + +.language-markdown .token.bold .token.content { + color: hsl(29, 54%, 61%); +} + +.language-markdown .token.italic .token.content { + color: hsl(286, 60%, 67%); +} + +.language-markdown .token.strike .token.content, +.language-markdown .token.strike .token.punctuation, +.language-markdown .token.list.punctuation, +.language-markdown .token.title.important > .token.punctuation { + color: hsl(355, 65%, 65%); +} + +/* General */ +.token.bold { + font-weight: bold; +} + +.token.comment, +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.namespace { + opacity: 0.8; +} + +/* Plugin overrides */ +/* Selectors should have higher specificity than those in the plugins' default stylesheets */ + +/* Show Invisibles plugin overrides */ +.token.token.tab:not(:empty):before, +.token.token.cr:before, +.token.token.lf:before, +.token.token.space:before { + color: hsla(220, 14%, 71%, 0.15); + text-shadow: none; +} + +/* Toolbar plugin overrides */ +/* Space out all buttons and move them away from the right edge of the code block */ +div.code-toolbar > .toolbar.toolbar > .toolbar-item { + margin-right: 0.4em; +} + +/* Styling the buttons */ +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { + background: hsl(220, 13%, 26%); + color: hsl(220, 9%, 55%); + padding: 0.1em 0.4em; + border-radius: 0.3em; +} + +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { + background: hsl(220, 13%, 28%); + color: hsl(220, 14%, 71%); +} + +/* Line Highlight plugin overrides */ +/* The highlighted line itself */ +.line-highlight.line-highlight { + background: hsla(220, 100%, 80%, 0.04); +} + +/* Default line numbers in Line Highlight plugin */ +.line-highlight.line-highlight:before, +.line-highlight.line-highlight[data-end]:after { + background: hsl(220, 13%, 26%); + color: hsl(220, 14%, 71%); + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ +} + +/* Hovering over a linkable line number (in the gutter area) */ +/* Requires Line Numbers plugin as well */ +pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: hsla(220, 100%, 80%, 0.04); +} + +/* Line Numbers and Command Line plugins overrides */ +/* Line separating gutter from coding area */ +.line-numbers.line-numbers .line-numbers-rows, +.command-line .command-line-prompt { + border-right-color: hsla(220, 14%, 71%, 0.15); +} + +/* Stuff in the gutter */ +.line-numbers .line-numbers-rows > span:before, +.command-line .command-line-prompt > span:before { + color: hsl(220, 14%, 45%); +} + +/* Match Braces plugin overrides */ +/* Note: Outline colour is inherited from the braces */ +.rainbow-braces .token.token.punctuation.brace-level-1, +.rainbow-braces .token.token.punctuation.brace-level-5, +.rainbow-braces .token.token.punctuation.brace-level-9 { + color: hsl(355, 65%, 65%); +} + +.rainbow-braces .token.token.punctuation.brace-level-2, +.rainbow-braces .token.token.punctuation.brace-level-6, +.rainbow-braces .token.token.punctuation.brace-level-10 { + color: hsl(95, 38%, 62%); +} + +.rainbow-braces .token.token.punctuation.brace-level-3, +.rainbow-braces .token.token.punctuation.brace-level-7, +.rainbow-braces .token.token.punctuation.brace-level-11 { + color: hsl(207, 82%, 66%); +} + +.rainbow-braces .token.token.punctuation.brace-level-4, +.rainbow-braces .token.token.punctuation.brace-level-8, +.rainbow-braces .token.token.punctuation.brace-level-12 { + color: hsl(286, 60%, 67%); +} + +/* Diff Highlight plugin overrides */ +/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ +pre.diff-highlight > code .token.token.deleted:not(.prefix), +pre > code.diff-highlight .token.token.deleted:not(.prefix) { + background-color: hsla(353, 100%, 66%, 0.15); +} + +pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { + background-color: hsla(353, 95%, 66%, 0.25); +} + +pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { + background-color: hsla(353, 95%, 66%, 0.25); +} + +pre.diff-highlight > code .token.token.inserted:not(.prefix), +pre > code.diff-highlight .token.token.inserted:not(.prefix) { + background-color: hsla(137, 100%, 55%, 0.15); +} + +pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { + background-color: hsla(135, 73%, 55%, 0.25); +} + +pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { + background-color: hsla(135, 73%, 55%, 0.25); +} + +/* Previewers plugin overrides */ +/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ +/* Border around popup */ +.prism-previewer.prism-previewer:before, +.prism-previewer-gradient.prism-previewer-gradient div { + border-color: hsl(224, 13%, 17%); +} + +/* Angle and time should remain as circles and are hence not included */ +.prism-previewer-color.prism-previewer-color:before, +.prism-previewer-gradient.prism-previewer-gradient div, +.prism-previewer-easing.prism-previewer-easing:before { + border-radius: 0.3em; +} + +/* Triangles pointing to the code */ +.prism-previewer.prism-previewer:after { + border-top-color: hsl(224, 13%, 17%); +} + +.prism-previewer-flipped.prism-previewer-flipped.after { + border-bottom-color: hsl(224, 13%, 17%); +} + +/* Background colour within the popup */ +.prism-previewer-angle.prism-previewer-angle:before, +.prism-previewer-time.prism-previewer-time:before, +.prism-previewer-easing.prism-previewer-easing { + background: hsl(219, 13%, 22%); +} + +/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ +/* For time, this is the alternate colour */ +.prism-previewer-angle.prism-previewer-angle circle, +.prism-previewer-time.prism-previewer-time circle { + stroke: hsl(220, 14%, 71%); + stroke-opacity: 1; +} + +/* Stroke colours of the handle, direction point, and vector itself */ +.prism-previewer-easing.prism-previewer-easing circle, +.prism-previewer-easing.prism-previewer-easing path, +.prism-previewer-easing.prism-previewer-easing line { + stroke: hsl(220, 14%, 71%); +} + +/* Fill colour of the handle */ +.prism-previewer-easing.prism-previewer-easing circle { + fill: transparent; +}