diff --git a/blog/2024-06-05-power-production/index.md b/blog/2024-06-05-power-production/index.md index d352f4e..f22a51b 100644 --- a/blog/2024-06-05-power-production/index.md +++ b/blog/2024-06-05-power-production/index.md @@ -1,6 +1,6 @@ --- title: Простое решение или костыль? -tags: [power production, steam energy, backup steam power] +tags: [power production, steam energy, backup steam power, design] --- В очередной раз переработал статью посвященную переводу паровых и ядерных электростанций в резерв. И даже новый видеоролик на твойтуб выложил. Добавил подробнее описание простого решения отключения паровых электростанций, более похожее на костыли, или нет? diff --git a/blog/2024-06-07-blueprint-title/index.md b/blog/2024-06-07-blueprint-title/index.md new file mode 100644 index 0000000..36467bb --- /dev/null +++ b/blog/2024-06-07-blueprint-title/index.md @@ -0,0 +1,42 @@ +--- +title: Заголовок у блоков с чертежами на сайте +tags: [design, website] +--- + +В каждой статье сайта присутствует множество чертежей и зачастую их трудно увидеть в общем потоке текста. Менять отображение из однострочного текста в многострочный не кажется интересным решением, так как текстовое представление некоторых чертежей может быть просто огромными. Как же быть? + + + +Спасибо читателям, которые не стесняются выражать свои претензии и помогают улучшать визуальную составляющую сайта. Подумав и прикинув, решил добавить заголовок у всех блоков на сайте, где публикуются чертежи *Factorio*. А чтобы они не пересекались с другими блоками, пришлось делать обертку и копаться в коде *Docusaurus*. + +В общем, сгенерировал обертку для компонента *Docusaurus*: + +``` +npm run swizzle @docusaurus/theme-classic CodeBlock -- --wrap +``` + +А в сгенерированном классе обёртки уже добавил свой заголовок для чертежей: + +```jsx +import React from 'react'; +import CodeBlock from '@theme-original/CodeBlock'; +import type CodeBlockType from '@theme/CodeBlock'; +import type {WrapperProps} from '@docusaurus/types'; + +type Props = WrapperProps; + +export default function CodeBlockWrapper(props: Props): JSX.Element { + // добавил вот это, чтобы заговок генерировался только для чертежей + const defaultTitle = props.className?.toString() === "language-blueprint" ? "blueprint" : ""; + return ( + <> + + + ); +} + +``` + +И вуаля, теперь блоки чертежей более заметны, причём работает для всего сайта и не портит другие блоки: + +![выделение чертежей](./screenshot.01.png) diff --git a/blog/2024-06-07-blueprint-title/screenshot.01.png b/blog/2024-06-07-blueprint-title/screenshot.01.png new file mode 100644 index 0000000..8073a89 Binary files /dev/null and b/blog/2024-06-07-blueprint-title/screenshot.01.png differ diff --git a/website/src/theme/CodeBlock/index.tsx b/website/src/theme/CodeBlock/index.tsx index e9a4072..e3db94e 100644 --- a/website/src/theme/CodeBlock/index.tsx +++ b/website/src/theme/CodeBlock/index.tsx @@ -6,9 +6,10 @@ import type {WrapperProps} from '@docusaurus/types'; type Props = WrapperProps; export default function CodeBlockWrapper(props: Props): JSX.Element { + const defaultTitle = props.className?.toString() === "language-blueprint" ? "blueprint" : ""; return ( <> - + ); }