Skip to content
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

docs: make toc sticky on desktop #16506

Merged
merged 4 commits into from Nov 15, 2022
Merged

Conversation

chenxsan
Copy link
Contributor

@chenxsan chenxsan commented Nov 6, 2022

Prerequisites checklist

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update

Closes #16312

[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

What changes did you make? (Give an overview)

  1. Make the table of contents sticky on desktop:

    CleanShot 2022-11-06 at 22 33 59@2x

  2. Highlight respective menu item in table of contents (light blue area is for demonstration only, not included in code):

    image

Is there anything you'd like reviewers to focus on?

@eslint-github-bot eslint-github-bot bot added documentation Relates to ESLint's documentation triage An ESLint team member will look at this issue soon labels Nov 6, 2022
@netlify
Copy link

netlify bot commented Nov 6, 2022

Deploy Preview for docs-eslint ready!

Name Link
🔨 Latest commit d348e02
🔍 Latest deploy log https://app.netlify.com/sites/docs-eslint/deploys/636a4e11ec73490008ff610e
😎 Deploy Preview https://deploy-preview-16506--docs-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

}
});
}, options);
if (window.matchMedia("(min-width: 1400px)").matches) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Only observe when table of contents in sidebar is shown.

@snitin315
Copy link
Contributor

The scrollbar color is black in dark mode.

dark mode
Screen.Recording.2022-11-08.at.9.36.19.AM.mov

@chenxsan
Copy link
Contributor Author

chenxsan commented Nov 8, 2022

The scrollbar color is black in dark mode.

dark mode

Mind sharing which browser is it?

@snitin315
Copy link
Contributor

It's chrome v107 on MacOS

@chenxsan
Copy link
Contributor Author

chenxsan commented Nov 8, 2022

It's chrome v107 on MacOS

Unfortunately I can't reproduce it on my Chrome.

Can you check the horizontal scrollbar in https://eslint.org/docs/latest/user-guide/command-line-interface#options section?

Here's how it looks like on my Chrome:

@snitin315
Copy link
Contributor

snitin315 commented Nov 8, 2022

It looks like this

Screen.Recording.2022-11-08.at.5.39.32.PM.mov

@chenxsan
Copy link
Contributor Author

chenxsan commented Nov 8, 2022

It looks like this

Screen.Recording.2022-11-08.at.5.39.32.PM.mov

Seems we have different option regarding the scrollbar:

If I set the option to When scrolling, I can reproduce it then.

Anyway, seems it can be fixed by setting a background color.

@snitin315 snitin315 added accepted There is consensus among the team that this change meets the criteria for inclusion and removed triage An ESLint team member will look at this issue soon labels Nov 9, 2022
Copy link
Contributor

@snitin315 snitin315 left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks!

I'll leave it open in case someone else wants to review it.

@snitin315 snitin315 merged commit a8d0a57 into eslint:main Nov 15, 2022
21 checks passed
@chenxsan chenxsan deleted the docs/sticky-toc branch November 22, 2022 00:47
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Nov 28, 2022
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [eslint](https://eslint.org) ([source](https://github.com/eslint/eslint)) | devDependencies | minor | [`8.27.0` -> `8.28.0`](https://renovatebot.com/diffs/npm/eslint/8.27.0/8.28.0) |

---

### Release Notes

<details>
<summary>eslint/eslint</summary>

### [`v8.28.0`](https://github.com/eslint/eslint/releases/tag/v8.28.0)

[Compare Source](eslint/eslint@v8.27.0...v8.28.0)

#### Features

-   [`63bce44`](eslint/eslint@63bce44) feat: add `ignoreClassFieldInitialValues` option to no-magic-numbers ([#&#8203;16539](eslint/eslint#16539)) (Milos Djermanovic)
-   [`8385ecd`](eslint/eslint@8385ecd) feat: multiline properties in rule `key-spacing` with option `align` ([#&#8203;16532](eslint/eslint#16532)) (Francesco Trotta)
-   [`a4e89db`](eslint/eslint@a4e89db) feat: `no-obj-calls` support `Intl` ([#&#8203;16543](eslint/eslint#16543)) (Sosuke Suzuki)

#### Bug Fixes

-   [`c50ae4f`](eslint/eslint@c50ae4f) fix: Ensure that dot files are found with globs. ([#&#8203;16550](eslint/eslint#16550)) (Nicholas C. Zakas)
-   [`9432b67`](eslint/eslint@9432b67) fix: throw error for first unmatched pattern ([#&#8203;16533](eslint/eslint#16533)) (Milos Djermanovic)
-   [`e76c382`](eslint/eslint@e76c382) fix: allow `* 1` when followed by `/` in no-implicit-coercion ([#&#8203;16522](eslint/eslint#16522)) (Milos Djermanovic)

#### Documentation

-   [`34c05a7`](eslint/eslint@34c05a7) docs: Language Options page intro and tweaks ([#&#8203;16511](eslint/eslint#16511)) (Ben Perlmutter)
-   [`3e66387`](eslint/eslint@3e66387) docs: add intro and edit ignoring files page ([#&#8203;16510](eslint/eslint#16510)) (Ben Perlmutter)
-   [`436f712`](eslint/eslint@436f712) docs: fix Header UI inconsistency ([#&#8203;16464](eslint/eslint#16464)) (Tanuj Kanti)
-   [`f743816`](eslint/eslint@f743816) docs: switch to wrench emoji for auto-fixable rules ([#&#8203;16545](eslint/eslint#16545)) (Bryan Mishkin)
-   [`bc0547e`](eslint/eslint@bc0547e) docs: improve styles for versions and languages page ([#&#8203;16553](eslint/eslint#16553)) (Nitin Kumar)
-   [`6070f58`](eslint/eslint@6070f58) docs: clarify esquery issue workaround ([#&#8203;16556](eslint/eslint#16556)) (Milos Djermanovic)
-   [`b48e4f8`](eslint/eslint@b48e4f8) docs: Command Line Interface intro and tweaks ([#&#8203;16535](eslint/eslint#16535)) (Ben Perlmutter)
-   [`b92b30f`](eslint/eslint@b92b30f) docs: Add Rules page intro and content tweaks ([#&#8203;16523](eslint/eslint#16523)) (Ben Perlmutter)
-   [`1769b42`](eslint/eslint@1769b42) docs: Integrations page introduction ([#&#8203;16548](eslint/eslint#16548)) (Ben Perlmutter)
-   [`a8d0a57`](eslint/eslint@a8d0a57) docs: make table of contents sticky on desktop ([#&#8203;16506](eslint/eslint#16506)) (Sam Chen)
-   [`a01315a`](eslint/eslint@a01315a) docs: fix route of japanese translation site ([#&#8203;16542](eslint/eslint#16542)) (Tanuj Kanti)
-   [`0515628`](eslint/eslint@0515628) docs: use emoji instead of svg for deprecated rule ([#&#8203;16536](eslint/eslint#16536)) (Bryan Mishkin)
-   [`68f1288`](eslint/eslint@68f1288) docs: set default layouts ([#&#8203;16484](eslint/eslint#16484)) (Percy Ma)
-   [`776827a`](eslint/eslint@776827a) docs: init config about specifying shared configs ([#&#8203;16483](eslint/eslint#16483)) (Percy Ma)
-   [`5c39425`](eslint/eslint@5c39425) docs: fix broken link to plugins ([#&#8203;16520](eslint/eslint#16520)) (Ádám T. Nagy)
-   [`c97c789`](eslint/eslint@c97c789) docs: Add missing no-new-native-nonconstructor docs code fence ([#&#8203;16503](eslint/eslint#16503)) (Brandon Mills)

#### Chores

-   [`e94a4a9`](eslint/eslint@e94a4a9) chore: Add tests to verify [#&#8203;16038](eslint/eslint#16038) is fixed ([#&#8203;16538](eslint/eslint#16538)) (Nicholas C. Zakas)
-   [`e13f194`](eslint/eslint@e13f194) chore: stricter validation of `meta.docs.description` in core rules ([#&#8203;16529](eslint/eslint#16529)) (Milos Djermanovic)
-   [`72dbfbc`](eslint/eslint@72dbfbc) chore: use `pkg` parameter in `getNpmPackageVersion` ([#&#8203;16525](eslint/eslint#16525)) (webxmsj)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

 **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4yOS4xIiwidXBkYXRlZEluVmVyIjoiMzQuNDAuMCJ9-->

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1652
Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org>
Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion contributor pool documentation Relates to ESLint's documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change Request: Make table of contents sticky
2 participants