Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

chore(website): upgrade docusaurus#4692

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged

Conversation

Josh-Cena
Copy link
Member

PR Checklist

Overview

This upgrades Docusaurus to the latest version.

The latest version providesdoc breadcrumbs, but it admittedly doesn't look good on our website, so I turned it off.

In addition, I noticed that the dark mode selectorhtml[data-theme="dark"] currently has a lower specificity than the light modehtml:root, so it's never applied and causes low accessibility:

image

That has been fixed.

image

(Ignore the logo, it wasn't loaded locally for some reason)

@nx-cloud
Copy link

nx-cloudbot commentedMar 17, 2022
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commitcb99e3e. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch


✅ Successfully ran 43 targets

Sent with 💌 fromNxCloud.

@typescript-eslint
Copy link
Contributor

Thanks for the PR,@Josh-Cena!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!


🙏Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently onhttps://opencollective.com/typescript-eslint. As a thank you, your profile/company logo will be added to our main README which receives thousands of unique visitorsper day.

@netlify
Copy link

netlifybot commentedMar 17, 2022
edited
Loading

Deploy Preview fortypescript-eslint ready!

NameLink
🔨 Latest commitcb99e3e
🔍 Latest deploy loghttps://app.netlify.com/sites/typescript-eslint/deploys/625eab0cc90f960009f1c189
😎 Deploy Previewhttps://deploy-preview-4692--typescript-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 yourNetlify site settings.

Copy link
Member

@JoshuaKGoldbergJoshuaKGoldberg left a comment

Choose a reason for hiding this comment

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

Super, thanks!

@Josh-Cena
Copy link
MemberAuthor

The Cypress failure looks suspicious. It wasn't like this before. Does that mean there are new a11y regressions in Docusaurus itself?

JoshuaKGoldberg reacted with thumbs up emoji

@@ -8,7 +8,7 @@
@import './prism.css';

/* You can override the default Infima variables here. */
html:root {
html {

Choose a reason for hiding this comment

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

Except, now something in either this change or the docusaurus bump is causing aXe to think the page has some element(s) with lower color contrast than needed though:https://github.com/typescript-eslint/typescript-eslint/runs/5581627126?check_suite_focus=true

Screenshot of "Index -- has no accessibility issues detected by aXe (failed)" with accessibility violations on aria-command-name and color-contrast

Copy link
MemberAuthor

Choose a reason for hiding this comment

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

Let me try reverting this first.

Copy link
Member

@JoshuaKGoldbergJoshuaKGoldberg left a comment

Choose a reason for hiding this comment

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

Oop, test failures?

@Josh-Cena
Copy link
MemberAuthor

Huh, the contrast problem is indeed gone—very weird! We probably need to update the palette somehow, as the current dark mode palette in production is absolutely less accessible than it should.

JoshuaKGoldberg reacted with thumbs up emojiJoshuaKGoldberg reacted with heart emoji

@bradzacherbradzacher added the package: websiteIssues related to the @typescript-eslint website labelMar 18, 2022
@Josh-Cena
Copy link
MemberAuthor

Now blocked on#4739

@JoshuaKGoldberg
Copy link
Member

@Josh-Cena I'm hoping#4740 fixed that one. Updating this branch to the newestmain to check... 🤞

@Josh-Cena
Copy link
MemberAuthor

Ooops, no 😞

@JoshuaKGoldberg
Copy link
Member

😭

@Josh-Cena
Copy link
MemberAuthor

Looking at the log, looks like Cypress is trying to connect before the client is even ready

@Josh-Cena
Copy link
MemberAuthor

I wonder if we canyarn start first, and then let Cypress connect in the next step?

@JoshuaKGoldberg
Copy link
Member

It's configured inci.yml with the native Cypressstart:

-name:Cypress runuses:cypress-io/github-action@v2with:project:./packages/websitestart:yarn start

...maybe it's a performance issue somewhere?https://github.com/cypress-io/github-action#wait-on might help. I'm on mobile right now but can try it tomorrow-ish if you don't have time before then.

@Josh-Cena
Copy link
MemberAuthor

Mostly just unfamiliarity with Cypress 😄 If you have a plan already I'd let you handle that

@armano2
Copy link
Collaborator

armano2 commentedMar 31, 2022
edited
Loading

@Josh-Cena you can check#4771, this should make it work and let us work with dark/light mode

@Josh-Cena
Copy link
MemberAuthor

@armano2 Instead of stacking duplicate selectors (:root andhtml are equivalent) to increase its specificity, I'd rather decrease the specificity of both. WDYT?

armano2 reacted with thumbs up emoji

@armano2
Copy link
Collaborator

armano2 commentedApr 1, 2022
edited
Loading

@armano2 Instead of stacking duplicate selectors (:root andhtml are equivalent) to increase its specificity, I'd rather decrease the specificity of both. WDYT?

@Josh-Cena I'm ok with this change, but we are having issue now with how:root is merged

image

overrides has lower priority than colors defined in docusaurus,

--docsearch-muted-color:#666;

{"id":"color-contrast","data": {"fgColor":"#969faf","bgColor":"#ebedf0","contrastRatio":2.27,"fontSize":"12.0pt (16px)","fontWeight":"normal","messageKey":null,"expectedContrastRatio":"4.5:1"  },"relatedNodes": [    {"html":"<button type=\"button\" class=\"DocSearch DocSearch-Button\" aria-label=\"Search\">","target": [".DocSearch"]    }  ],"impact":"serious","message":"Element has insufficient color contrast of 2.27 (foreground color: #969faf, background color: #ebedf0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"}

live:

image

this branch:

image

@Josh-Cena
Copy link
MemberAuthor

Josh-Cena commentedApr 2, 2022
edited
Loading

Okay, I see. Reverted CSS changes. Probably related tofacebook/docusaurus#3678

@Josh-CenaJosh-Cena mentioned this pull requestApr 19, 2022
@Josh-CenaJosh-Cena changed the titlechore(website): upgrade docusaurus, fix dark mode palettechore(website): upgrade docusaurusApr 19, 2022
@codecov
Copy link

codecovbot commentedApr 19, 2022
edited
Loading

Codecov Report

Merging#4692 (cb99e3e) intomain (84d2d28) willincrease coverage by0.83%.
The diff coverage isn/a.

@@            Coverage Diff             @@##             main    #4692      +/-   ##==========================================+ Coverage   91.75%   92.59%   +0.83%==========================================  Files         226      186      -40       Lines       10558    10133     -425       Branches     3263     3215      -48     ==========================================- Hits         9688     9383     -305+ Misses        590      501      -89+ Partials      280      249      -31
FlagCoverage Δ
unittest92.59% <ø> (+0.83%)⬆️

Flags with carried forward coverage won't be shown.Click here to find out more.

Impacted FilesCoverage Δ
packages/utils/src/ts-eslint/CLIEngine.ts
packages/utils/src/json-schema.ts
.../utils/src/ast-utils/eslint-utils/scopeAnalysis.ts
packages/utils/src/ts-eslint/Scope.ts
packages/utils/src/ast-utils/misc.ts
...utils/src/ast-utils/eslint-utils/PatternMatcher.ts
packages/utils/src/ts-eslint-scope/Variable.ts
packages/utils/src/ts-eslint/RuleTester.ts
packages/utils/src/eslint-utils/nullThrows.ts
packages/utils/src/ts-eslint-scope/Referencer.ts
... and30 more

@Josh-Cena
Copy link
MemberAuthor

Josh-Cena commentedApr 19, 2022
edited
Loading

@bradzacher I think we can get this merged today? It's now a trivial version bump and from my manual visual testing there seems to be no regressions. I don't have plans about when beta.19 will be out, but probably not this week (since we haven't completed the main features yet), so this should be good to merge.

@Josh-Cena
Copy link
MemberAuthor

I don't know what the Cypress test is up to but since the color mode toggle has changed... The failure is kinda expected.

@bradzacher
Copy link
Member

cc@JoshuaKGoldberg for the cypress failure:

1) Index       has no accessibility issues detected by aXe:     AssertionError: Timed out retrying after 4000ms: Expected to find content: '🌞' but never did.      at Context.eval (http://localhost:3000/__cypress/tests?p=cypress/integration/index.spec.js:108:8)

I tried retrying the test and it failed in the same way.

@Josh-Cena
Copy link
MemberAuthor

That '🌞' used to be a part of the color mode toggle, and the latter is now SVG based.

@bradzacher
Copy link
Member

Ah. So then the test is failing not as a false positive, but because the upgrade broke it.

We'll need to fix that as part of this PR.

https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/website/cypress/integration/index.spec.js#L12

@Josh-Cena
Copy link
MemberAuthor

Ah, I see. Thanks for the pointer!

Copy link
Member

@bradzacherbradzacher left a comment

Choose a reason for hiding this comment

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

Noice. Thanks for this!

@bradzacherbradzacher merged commitb30f7ef intotypescript-eslint:mainApr 19, 2022
@Josh-CenaJosh-Cena deleted the upgrade-docusaurus branchApril 19, 2022 15:14
@github-actionsgithub-actionsbot locked asresolvedand limited conversation to collaboratorsMay 23, 2022
Sign up for freeto subscribe to this conversation on GitHub. Already have an account?Sign in.
Reviewers

@bradzacherbradzacherbradzacher approved these changes

@JoshuaKGoldbergJoshuaKGoldbergAwaiting requested review from JoshuaKGoldberg

Assignees
No one assigned
Labels
package: websiteIssues related to the @typescript-eslint website
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

4 participants
@Josh-Cena@JoshuaKGoldberg@armano2@bradzacher

[8]ページ先頭

©2009-2025 Movatter.jp