From 333c71243537966930e9ab8178bc98c37949b5f2 Mon Sep 17 00:00:00 2001
From: Tanuj Kanti <86398394+Tanujkanti4441@users.noreply.github.com>
Date: Fri, 27 Jan 2023 00:01:34 +0530
Subject: [PATCH] docs: add background to code-path-diagrams for dark-mode
(#16822)
* docs: add background to code path diagrams
* docs: aligns code-path-diagrams to center
* docs: add background to architecture image
* fix: indentation checks
---
docs/.eleventy.js | 1 +
docs/src/assets/scss/docs.scss | 9 +++++
docs/src/assets/scss/tokens/themes.scss | 2 +
docs/src/contribute/architecture/index.md | 4 +-
docs/src/extend/code-path-analysis.md | 48 +++++++++++++++++++++++
5 files changed, 63 insertions(+), 1 deletion(-)
diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 01801d389e3..eee65d75962 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -195,6 +195,7 @@ module.exports = function(eleventyConfig) {
.use(markdownItAnchor, {
slugify
})
+ .use(markdownItContainer, "img-container", {})
.use(markdownItContainer, "correct", {})
.use(markdownItContainer, "incorrect", {})
.use(markdownItContainer, "warning", {
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 3174035e022..4aa106546c1 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -126,6 +126,15 @@ div.incorrect {
}
}
+div.img-container {
+ background-color: var(--img-background-color);
+ border-radius: var(--border-radius);
+
+ img {
+ margin: 0 auto;
+ }
+}
+
pre[class*="language-"] {
position: relative;
}
diff --git a/docs/src/assets/scss/tokens/themes.scss b/docs/src/assets/scss/tokens/themes.scss
index 2612ec5f485..de956b821ad 100644
--- a/docs/src/assets/scss/tokens/themes.scss
+++ b/docs/src/assets/scss/tokens/themes.scss
@@ -131,6 +131,7 @@ html[data-theme="light"] {
--hero-background-color: var(--color-neutral-25);
--footer-background-color: var(--color-neutral-25);
--outline-color: var(--color-brand);
+ --img-background-color: #fff;
}
html[data-theme="dark"] {
@@ -151,4 +152,5 @@ html[data-theme="dark"] {
--hero-background-color: var(--color-neutral-800);
--footer-background-color: var(--color-neutral-800);
--outline-color: #fff;
+ --img-background-color: var(--color-neutral-300);
}
diff --git a/docs/src/contribute/architecture/index.md b/docs/src/contribute/architecture/index.md
index a066f1e2d5f..a1774781132 100644
--- a/docs/src/contribute/architecture/index.md
+++ b/docs/src/contribute/architecture/index.md
@@ -7,7 +7,9 @@ eleventyNavigation:
order: 1
---
-
+:::img-container
+
+:::
At a high level, there are a few key parts to ESLint:
diff --git a/docs/src/extend/code-path-analysis.md b/docs/src/extend/code-path-analysis.md
index 5dca4ed79a5..6cb7d2ac571 100644
--- a/docs/src/extend/code-path-analysis.md
+++ b/docs/src/extend/code-path-analysis.md
@@ -14,7 +14,9 @@ if (a && b) {
bar();
```
+:::img-container
+:::
## Objects
@@ -143,17 +145,23 @@ bar();
1. First, the analysis advances to the end of loop.
+:::img-container
+:::
2. Second, it creates the looping path.
At this time, the next segment has existed already, so the `onCodePathSegmentStart` event is not fired.
It fires `onCodePathSegmentLoop` instead.
+:::img-container
+:::
3. Last, it advances to the end.
+:::img-container
+:::
For example 2:
@@ -168,29 +176,39 @@ bar();
First, the analysis advances to `ForStatement.update`.
The `update` segment is hovered at first.
+:::img-container
+:::
2. Second, it advances to `ForStatement.body`.
Of course the `body` segment is preceded by the `test` segment.
It keeps the `update` segment hovering.
+:::img-container
+:::
3. Third, it creates the looping path from `body` segment to `update` segment.
At this time, the next segment has existed already, so the `onCodePathSegmentStart` event is not fired.
It fires `onCodePathSegmentLoop` instead.
+:::img-container
+:::
4. Fourth, also it creates the looping path from `update` segment to `test` segment.
At this time, the next segment has existed already, so the `onCodePathSegmentStart` event is not fired.
It fires `onCodePathSegmentLoop` instead.
+:::img-container
+:::
5. Last, it advances to the end.
+:::img-container
+:::
## Usage Examples
@@ -336,7 +354,9 @@ See Also:
console.log("Hello world!");
```
+:::img-container
+:::
### `IfStatement`
@@ -348,7 +368,9 @@ if (a) {
}
```
+:::img-container
+:::
### `IfStatement` (chain)
@@ -362,7 +384,9 @@ if (a) {
}
```
+:::img-container
+:::
### `SwitchStatement`
@@ -383,7 +407,9 @@ switch (a) {
}
```
+:::img-container
+:::
### `SwitchStatement` (has `default`)
@@ -408,7 +434,9 @@ switch (a) {
}
```
+:::img-container
+:::
### `TryStatement` (try-catch)
@@ -431,7 +459,9 @@ It creates the paths from `try` block to `catch` block at:
* The first throwable node (e.g. a function call) in the `try` block.
* The end of the `try` block.
+:::img-container
+:::
### `TryStatement` (try-finally)
@@ -449,7 +479,9 @@ If there is not `catch` block, `finally` block has two current segments.
At this time, `CodePath.currentSegments.length` is `2`.
One is the normal path, and another is the leaving path (`throw` or `return`).
+:::img-container
+:::
### `TryStatement` (try-catch-finally)
@@ -465,7 +497,9 @@ try {
last();
```
+:::img-container
+:::
### `WhileStatement`
@@ -479,7 +513,9 @@ while (a) {
}
```
+:::img-container
+:::
### `DoWhileStatement`
@@ -490,7 +526,9 @@ do {
} while (a);
```
+:::img-container
+:::
### `ForStatement`
@@ -504,7 +542,9 @@ for (let i = 0; i < 10; ++i) {
}
```
+:::img-container
+:::
### `ForStatement` (for ever)
@@ -515,7 +555,9 @@ for (;;) {
bar();
```
+:::img-container
+:::
### `ForInStatement`
@@ -525,7 +567,9 @@ for (let key in obj) {
}
```
+:::img-container
+:::
### When there is a function
@@ -544,8 +588,12 @@ It creates two code paths.
* The global's
+:::img-container
+:::
* The function's
+:::img-container
+:::