Skip to content

Replace the graphic on the Layers reference page #583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 23, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ On this page, a _module_ refers to an internal module in the application — a f

Every layer carries special semantic meaning to help you determine how much responsibility you should allocate to a module in your code. The names and meanings of layers are standardized across all projects built with Feature-Sliced Design.

There are 7 layers in total, arranged from most responsibility and dependency to least:
There are **7 layers** in total, arranged from most responsibility and dependency to least:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: Добавь еще в рус версию пож

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

а, блин, забыл)


<img alt="" src="/img/layers/layers.svg" width="128" height="240" style={{ float: "right", margin: "0 2em" }} />
<img src="/img/layers/folders-graphic-light.svg#light-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />
<img src="/img/layers/folders-graphic-dark.svg#dark-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="A file system tree, with a single root folder called src and then seven subfolders: app, processes, pages, widgets, features, entities, shared. The processes folder is slightly faded out." />

1. App
2. Processes (deprecated)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ pagination_next: reference/slices-segments

Каждый слой несет в себе особый семантический смысл, помогающий определить, какую ответственность следует возложить на модуль в вашем коде. Названия и значения слоёв стандартизированы для всех проектов, построенных с использованием Feature-Sliced Design.

Всего существует 7 слоёв, расположенных от наибольшей ответственности и зависимости к наименьшей:
Всего существует **7 слоёв**, расположенных от наибольшей ответственности и&nbsp;зависимости к наименьшей:

<img alt="" src="/img/layers/layers.svg" width="128" height="240" style={{ float: "right", margin: "0 2em" }} />
<img src="/img/layers/folders-graphic-light.svg#light-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="Дерево файловой системы с одной корневой папкой src и семью подпапками: app, processes, pages, widgets, features, entities, shared. Папка processes отображена немного тускло." />
<img src="/img/layers/folders-graphic-dark.svg#dark-mode-only" width="180" style={{ float: "right", margin: "0 1em" }} alt="Дерево файловой системы с одной корневой папкой src и семью подпапками: app, processes, pages, widgets, features, entities, shared. Папка processes отображена немного тускло." />

1. App (Приложение)
2. Processes (Процессы, устаревший слой)
Expand Down
20 changes: 20 additions & 0 deletions src/app/doc-item.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,26 @@ html {
}
}

:root[data-theme=dark] [src$="#light-mode-only"] {
display: none;
}

:root[data-theme=light] [src$="#dark-mode-only"] {
display: none;
}

@media (prefers-color-scheme: dark) {
:root[data-theme=auto] [src$="#light-mode-only"] {
display: none;
}
}

@media (prefers-color-scheme: light) {
:root[data-theme=auto] [src$="#dark-mode-only"] {
display: none;
}
}

iframe {
width: 100%;
height: 700px;
Expand Down
Loading