feat: add new decomposition cheatsheet (#627)

Author: illright

config/docusaurus/extensions.js

@@ -123,6 +123,7 @@ const plugins = [
             steps: 2, // the max number of images generated between min and max (inclusive)
         },
     ],
+    "plugin-image-zoom",
     process.env.HOTJAR_ID && "docusaurus-plugin-hotjar", // For preventing crashing
     // FIXME: Docusaurus Open Graph Plugin Experimental.
     process.env.OG_EXP && DOCUSAURUS_PLUGIN_OG,

docusaurus.config.js

@@ -45,6 +45,11 @@ module.exports = {
         algolia: cfg.algolia,
         metadata: cfg.metadata,
         hotjar: cfg.metrics.hotjar,
+        imageZoom: {
+            options: {
+                background: "rgb(255 255 255 / 0.3)",
+            },
+        },
     },
 };
 

i18n/en/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx

@@ -1,24 +1,16 @@
 ---
 sidebar_position: 3
-sidebar_class_name: sidebar-item--wip
 ---
 
-import WIP from '@site/src/shared/ui/wip/tmpl.mdx'
-
 # Decomposition cheatsheet
 
-<WIP ticket="213" />
-
-## The role and meaning of decomposition
-
-> Problem? Costs of ignoring? How can it help? Why is it matter? Resistance to change
-
-## How to determine the scope of responsibility
+Use this as a quick reference when you're deciding how to decompose your UI. PDF versions are also available below, so you can print it out and keep one under your pillow.
 
-> Layers criteria
+## Choosing a layer
 
+[Download PDF](/files/choosing-a-layer-en.pdf)
 
-![layers-criteria-bordered-w100-bgLight](/img/layers/criteria.png)
+![Definitions of all layers and self-check questions](/img/choosing-a-layer-en.jpg)
 
 ## Examples
 
@@ -30,12 +22,6 @@ import WIP from '@site/src/shared/ui/wip/tmpl.mdx'
 
 ![decomposed-github-bordered](/img/decompose-github.jpg)
 
-### Design mockup
-
-<WIP ticket="224" />
-
-> Use the example of the layout to show how the logic is decomposed and transformed into an architecture with modules - with a specific file structure
-
 ## See also
 - [(Thread) General logic for features and entities](https://t.me/feature_sliced/4262)
 - [(Thread) Decomposition of swollen logic](https://t.me/feature_sliced/4210)

i18n/ru/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx

@@ -1,23 +1,16 @@
 ---
 sidebar_position: 3
-sidebar_class_name: sidebar-item--wip
 ---
 
-import WIP from '@site/src/shared/ui/wip/tmpl.mdx'
-
 # Памятка по декомпозиции
 
-<WIP ticket="213" />
-
-## Роль и значение декомпозиции {#the-role-and-meaning-of-decomposition}
-
-> Проблематика, Что будет если игнорировать, Чем может помочь, Почему это важно, Про устойчивость к изменениям
+Используйте её как быстрый справочник, когда вы решаете, как разбить ваш интерфейс по слоям. Ниже также доступна PDF-версия, чтобы вы могли распечатать её и держать под подушкой.
 
-## Как определять скоуп ответственности {#how-to-determine-the-scope-of-responsibility}
+## Выбор слоя {#choosing-a-layer}
 
-> Критерии слоев
+[Скачать PDF](/files/choosing-a-layer-ru.pdf)
 
-![layers-criteria-bordered-w100-bgLight](/img/layers/criteria.png)
+![Определения всех слоёв и вопросы для самопроверки](/img/choosing-a-layer-ru.jpg)
 
 ## Примеры {#examples}
 
@@ -29,12 +22,6 @@ import WIP from '@site/src/shared/ui/wip/tmpl.mdx'
 
 ![decomposed-github-bordered](/img/decompose-github.jpg)
 
-### Дробление макета {design-mockup}
-
-<WIP ticket="224" />
-
-> Показать на примере макета, как декомпозируется логика и преображается в архитектуру с модулями - с конкретной файловой структурой
-
 ## См. также {#see-also}
 - [(Тред) Общая логика для фич и сущностей](https://t.me/feature_sliced/4262)
 - [(Тред) Декомпозиция разбухшей логики](https://t.me/feature_sliced/4210)

package.json

@@ -43,6 +43,7 @@
         "js-cookie": "^3.0.1",
         "lodash-es": "^4.17.21",
         "picocolors": "^1.0.0",
+        "plugin-image-zoom": "^1.2.0",
         "react": "^17.0.1",
         "react-cookie-consent": "^6.4.1",
         "react-dom": "^17.0.1",

pnpm-lock.yaml

@@ -96,3 +96,8 @@ html[data-theme="dark"] .ext-link::before {
         font-size: 1rem; // #nowar
     }
 }
+
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+    z-index: 999;
+}

src/app/navbar.scss

@@ -202,7 +202,7 @@ export const examples: Example[] = [
         updatedAt: "2023-06-21",
         tech: ["react", "react-router", "react-query", "zustand", "vite", "typescript"],
     },
-  {
+    {
         title: "E-Commerce",
         description:
             "This project is an online store built using React. It provides the ability to view the product catalog and product pages",