added blog

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]
 ---
 
 В очередной раз переработал статью посвященную переводу паровых и ядерных электростанций в резерв. И даже новый видеоролик на твойтуб выложил. Добавил подробнее описание простого решения отключения паровых электростанций, более похожее на костыли, или нет?

blog/2024-06-07-blueprint-title/index.md

@@ -0,0 +1,42 @@
+---
+title: Заголовок у блоков с чертежами на сайте
+tags: [design, website]
+---
+
+В каждой статье сайта присутствует множество чертежей и зачастую их трудно увидеть в общем потоке текста. Менять отображение из однострочного текста в многострочный не кажется интересным решением, так как текстовое представление некоторых чертежей может быть просто огромными. Как же быть?
+
+<!-- truncate -->
+
+Спасибо читателям, которые не стесняются выражать свои претензии и помогают улучшать визуальную составляющую сайта. Подумав и прикинув, решил добавить заголовок у всех блоков на сайте, где публикуются чертежи *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<typeof CodeBlockType>;
+
+export default function CodeBlockWrapper(props: Props): JSX.Element {
+  // добавил вот это, чтобы заговок генерировался только для чертежей
+  const defaultTitle = props.className?.toString() === "language-blueprint" ? "blueprint" : "";
+  return (
+    <>
+      <CodeBlock {...props} title={defaultTitle} />
+    </>
+  );
+}
+
+```
+
+И вуаля, теперь блоки чертежей более заметны, причём работает для всего сайта и не портит другие блоки:
+
+![выделение чертежей](./screenshot.01.png)

website/src/theme/CodeBlock/index.tsx

@@ -6,9 +6,10 @@ import type {WrapperProps} from '@docusaurus/types';
 type Props = WrapperProps<typeof CodeBlockType>;
 
 export default function CodeBlockWrapper(props: Props): JSX.Element {
+  const defaultTitle = props.className?.toString() === "language-blueprint" ? "blueprint" : "";
   return (
     <>
-      <CodeBlock {...props} title="blueprint" />
+      <CodeBlock {...props} title={defaultTitle} />
     </>
   );
 }