Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
  • Loading branch information
Tanujkanti4441 committed Jan 26, 2023
1 parent f5f7b9b commit 333c712
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 1 deletion.
1 change: 1 addition & 0 deletions docs/.eleventy.js
Expand Up @@ -195,6 +195,7 @@ module.exports = function(eleventyConfig) {
.use(markdownItAnchor, {
slugify
})
.use(markdownItContainer, "img-container", {})
.use(markdownItContainer, "correct", {})
.use(markdownItContainer, "incorrect", {})
.use(markdownItContainer, "warning", {
Expand Down
9 changes: 9 additions & 0 deletions docs/src/assets/scss/docs.scss
Expand Up @@ -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;
}
Expand Down
2 changes: 2 additions & 0 deletions docs/src/assets/scss/tokens/themes.scss
Expand Up @@ -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"] {
Expand All @@ -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);
}
4 changes: 3 additions & 1 deletion docs/src/contribute/architecture/index.md
Expand Up @@ -7,7 +7,9 @@ eleventyNavigation:
order: 1
---

<center><img alt="dependency graph" src="../../assets/images/architecture/dependency.svg"></center>
:::img-container
<img alt="dependency graph" src="../../assets/images/architecture/dependency.svg">
:::

At a high level, there are a few key parts to ESLint:

Expand Down
48 changes: 48 additions & 0 deletions docs/src/extend/code-path-analysis.md
Expand Up @@ -14,7 +14,9 @@ if (a && b) {
bar();
```

:::img-container
![Code Path Example](../assets/images/code-path-analysis/helo.svg)
:::

## Objects

Expand Down Expand Up @@ -143,17 +145,23 @@ bar();

1. First, the analysis advances to the end of loop.

:::img-container
![Loop Event's Example 1](../assets/images/code-path-analysis/loop-event-example-while-1.svg)
:::

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
![Loop Event's Example 2](../assets/images/code-path-analysis/loop-event-example-while-2.svg)
:::

3. Last, it advances to the end.

:::img-container
![Loop Event's Example 3](../assets/images/code-path-analysis/loop-event-example-while-3.svg)
:::

For example 2:

Expand All @@ -168,29 +176,39 @@ bar();
First, the analysis advances to `ForStatement.update`.
The `update` segment is hovered at first.

:::img-container
![Loop Event's Example 1](../assets/images/code-path-analysis/loop-event-example-for-1.svg)
:::

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
![Loop Event's Example 2](../assets/images/code-path-analysis/loop-event-example-for-2.svg)
:::

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
![Loop Event's Example 3](../assets/images/code-path-analysis/loop-event-example-for-3.svg)
:::

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
![Loop Event's Example 4](../assets/images/code-path-analysis/loop-event-example-for-4.svg)
:::

5. Last, it advances to the end.

:::img-container
![Loop Event's Example 5](../assets/images/code-path-analysis/loop-event-example-for-5.svg)
:::

## Usage Examples

Expand Down Expand Up @@ -336,7 +354,9 @@ See Also:
console.log("Hello world!");
```

:::img-container
![Hello World](../assets/images/code-path-analysis/example-hello-world.svg)
:::

### `IfStatement`

Expand All @@ -348,7 +368,9 @@ if (a) {
}
```

:::img-container
![`IfStatement`](../assets/images/code-path-analysis/example-ifstatement.svg)
:::

### `IfStatement` (chain)

Expand All @@ -362,7 +384,9 @@ if (a) {
}
```

:::img-container
![`IfStatement` (chain)](../assets/images/code-path-analysis/example-ifstatement-chain.svg)
:::

### `SwitchStatement`

Expand All @@ -383,7 +407,9 @@ switch (a) {
}
```

:::img-container
![`SwitchStatement`](../assets/images/code-path-analysis/example-switchstatement.svg)
:::

### `SwitchStatement` (has `default`)

Expand All @@ -408,7 +434,9 @@ switch (a) {
}
```

:::img-container
![`SwitchStatement` (has `default`)](../assets/images/code-path-analysis/example-switchstatement-has-default.svg)
:::

### `TryStatement` (try-catch)

Expand All @@ -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-catch)](../assets/images/code-path-analysis/example-trystatement-try-catch.svg)
:::

### `TryStatement` (try-finally)

Expand All @@ -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-finally)](../assets/images/code-path-analysis/example-trystatement-try-finally.svg)
:::

### `TryStatement` (try-catch-finally)

Expand All @@ -465,7 +497,9 @@ try {
last();
```

:::img-container
![`TryStatement` (try-catch-finally)](../assets/images/code-path-analysis/example-trystatement-try-catch-finally.svg)
:::

### `WhileStatement`

Expand All @@ -479,7 +513,9 @@ while (a) {
}
```

:::img-container
![`WhileStatement`](../assets/images/code-path-analysis/example-whilestatement.svg)
:::

### `DoWhileStatement`

Expand All @@ -490,7 +526,9 @@ do {
} while (a);
```

:::img-container
![`DoWhileStatement`](../assets/images/code-path-analysis/example-dowhilestatement.svg)
:::

### `ForStatement`

Expand All @@ -504,7 +542,9 @@ for (let i = 0; i < 10; ++i) {
}
```

:::img-container
![`ForStatement`](../assets/images/code-path-analysis/example-forstatement.svg)
:::

### `ForStatement` (for ever)

Expand All @@ -515,7 +555,9 @@ for (;;) {
bar();
```

:::img-container
![`ForStatement` (for ever)](../assets/images/code-path-analysis/example-forstatement-for-ever.svg)
:::

### `ForInStatement`

Expand All @@ -525,7 +567,9 @@ for (let key in obj) {
}
```

:::img-container
![`ForInStatement`](../assets/images/code-path-analysis/example-forinstatement.svg)
:::

### When there is a function

Expand All @@ -544,8 +588,12 @@ It creates two code paths.

* The global's

:::img-container
![When there is a function](../assets/images/code-path-analysis/example-when-there-is-a-function-g.svg)
:::

* The function's

:::img-container
![When there is a function](../assets/images/code-path-analysis/example-when-there-is-a-function-f.svg)
:::

0 comments on commit 333c712

Please sign in to comment.