Skip to content

docs: split troubleshooting into granular sections #9024

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

Conversation

JoshuaKGoldberg
Copy link
Member

@JoshuaKGoldberg JoshuaKGoldberg commented Apr 28, 2024

PR Checklist

Overview

  • Move around the FAQs into a few new sections
  • Move around sidebar.base.js contents so the sidebar isn't now bigger than before
  • Add notes on followup issues we can file to fill out those new FAQs (💡!)
  • Add redirects so old user-facing code links included in code still work
Before After
Before screenshot showing the current menu with slightly more vertical height After screenshot showing the updated menu with slightly less vertical height

💖

@typescript-eslint
Copy link
Contributor

Thanks for the PR, @JoshuaKGoldberg!

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 on https://opencollective.com/typescript-eslint.

Copy link

netlify bot commented Apr 28, 2024

Deploy Preview for typescript-eslint ready!

Name Link
🔨 Latest commit 33cf02a
🔍 Latest deploy log https://app.netlify.com/sites/typescript-eslint/deploys/6679ac1ec46bf20007a1094d
😎 Deploy Preview https://deploy-preview-9024--typescript-eslint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 99 (🟢 up 1 from production)
Accessibility: 100 (no change from production)
Best Practices: 92 (no change from production)
SEO: 90 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports

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

Copy link
Member Author

@JoshuaKGoldberg JoshuaKGoldberg Apr 28, 2024

Choose a reason for hiding this comment

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

🤔 I'm on the fence of whether this deserves its own page. I think it could be moved to its own section in FAQs.mdx. Is there anything else we'd want to have here?

I was tempted to include typed linting .js info, but that's already covered in Typed Linting.

I'm leaning strongly towards this change (moving these two FAQs out) so we can reduce the size of the Troubleshooting portion of the sidebar.

Copy link
Member

@kirkwaiblinger kirkwaiblinger May 11, 2024

Choose a reason for hiding this comment

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

I think it's worth its own page! See also #8955 (comment)... maybe this is an opportunity to throw in an additional sentence or two that plenty of rules will have no effect on js files, but a few will enforce illegal syntax and must be disabled. And type-aware rules actually can work in js files.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah! Great. +1. I think that'd be an excellent followup to this (I suspect the discussion over how to phrase the .js recommendations might get long).

@JoshuaKGoldberg JoshuaKGoldberg requested review from rubiesonthesky and Josh-Cena and removed request for rubiesonthesky May 9, 2024 15:28
@JoshuaKGoldberg JoshuaKGoldberg marked this pull request as ready for review May 9, 2024 15:29
@JoshuaKGoldberg JoshuaKGoldberg requested review from a team and removed request for rubiesonthesky May 27, 2024 15:53
Copy link
Member

@kirkwaiblinger kirkwaiblinger left a comment

Choose a reason for hiding this comment

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

Overall looks sensible to me! A few teensy nits to resolve, and then a bunch of broken links, it looks like (including when using the search bar). But I'm assuming those are enforced by CI, rather than human eyes.
high five

@@ -1,189 +1,166 @@
---
id: faqs
title: FAQs
slug: /troubleshooting/
slug: /troubleshooting/faqs
Copy link
Member

Choose a reason for hiding this comment

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

This is going to break all of our historical links isn't it 😭

Maybe we need error code short URLs to make this easier huehuehue

Copy link
Member Author

@JoshuaKGoldberg JoshuaKGoldberg May 28, 2024

Choose a reason for hiding this comment

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

It shouldn't with this redirects config! I really hope it doesn't. That'd be a bug if it does.

// in docusaurus.config.mts > redirects
    {
      from: '/troubleshooting',
      to: '/troubleshooting/faqs',
    },

But yeah strong +1 to error code short URLs.

@bradzacher bradzacher added the documentation Documentation ("docs") that needs adding/updating label May 28, 2024
@bradzacher
Copy link
Member

bradzacher commented Jun 4, 2024

PERSONALLY I don't love having valuable content on a page that's accessible via an expandable header.
EG /troubleshooting/faqs is accessible via the FAQs menu item and that menu item is expandable.
It's a confusing UX paradigm, IMO. Cos if I click on the arrow to expand then I see no menu item for "general FAQ"s

I think that either:
a) there should only be cursory information in the link for the expandable item. eg /users and /developers just has a summary of the section. Or
b) there should be a concrete menu item for that page so that it shows up in the expanded list. EG if you click on the "Getting Started" heading it is also available as the "Quickstart" sub-item.

I personally find all the time that I click the arrow and don't find what i'm looking for - only to realise that I actually wanted to click 10px to the left on the item itself.
The UX confusion is that so many sites treat an expandable section header purely as a button to expand the section. Others also do what docusaurus does and treats it as its own menu item AND as a button to expand the section.

I hate it, personally!
One other point against it. On mobile if you click on the heading instead of the arrow (which is really easy to fat finger and do accidentally) then the entire menu disappears and you see the page. So if you were trying to view a sub-menu item you need to re-open the menu again.

I do this all the time on my phone and I hate it. For example I've done this a few times:

  1. open typescript-eslint.io
  2. tap the hamburger to open the menu
  3. tap docs
  4. the menu disappears and I'm on the "getting started" page
  5. tap the hamburger
  6. tap to expand the "contributing" section
  7. accidentally fat-fingered it and tapped the heading instead of the arrow
  8. the menu disappears and I'm on the "contributing" page
  9. tap the hamburger a 3rd time
  10. now I can get to the sub items

Super clunky UX - I hate it.


So I'd suggest adding a "General" item beneath FAQs which allows you to see the "general FAQs".

@JoshuaKGoldberg JoshuaKGoldberg requested review from bradzacher and removed request for bradzacher June 4, 2024 12:31
kirkwaiblinger
kirkwaiblinger previously approved these changes Jun 21, 2024
@JoshuaKGoldberg
Copy link
Member Author

So I'd suggest adding a "General" item beneath FAQs which allows you to see the "general FAQs".

Following up explicitly: I did this, so that when you click either Troubleshooting & FAQs or FAQs, it takes you to the child General page. 👍

Copy link

codecov bot commented Jun 22, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.17%. Comparing base (23e6468) to head (5e8c5c3).
Report is 1 commits behind head on main.

Current head 5e8c5c3 differs from pull request most recent head 33cf02a

Please upload reports for the commit 33cf02a to get more accurate results.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #9024      +/-   ##
==========================================
- Coverage   88.17%   88.17%   -0.01%     
==========================================
  Files         415      415              
  Lines       14363    14362       -1     
  Branches     4187     4187              
==========================================
- Hits        12665    12664       -1     
  Misses       1381     1381              
  Partials      317      317              
Flag Coverage Δ
unittest 88.17% <ø> (-0.01%) ⬇️

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

Files Coverage Δ
packages/typescript-estree/src/convert.ts 28.58% <ø> (ø)
...-estree/src/create-program/createProjectProgram.ts 100.00% <ø> (ø)
...eate-program/validateDefaultProjectForFilesGlob.ts 100.00% <ø> (ø)

... and 1 file with indirect coverage changes

@JoshuaKGoldberg JoshuaKGoldberg force-pushed the docs-troubleshooting-sections branch from d1ddbc2 to 585423d Compare June 22, 2024 19:55
@JoshuaKGoldberg
Copy link
Member Author

JoshuaKGoldberg commented Jun 22, 2024

Ugh. I messed up the Git merges. Will fix this in a bit.

Edit: done, I think.

@bradzacher bradzacher added the awaiting response Issues waiting for a reply from the OP or another party label Jun 23, 2024
@JoshuaKGoldberg JoshuaKGoldberg force-pushed the docs-troubleshooting-sections branch from 585423d to bafe6c8 Compare June 24, 2024 16:28
@JoshuaKGoldberg JoshuaKGoldberg force-pushed the docs-troubleshooting-sections branch from 052c190 to 03275e9 Compare June 24, 2024 17:15
@JoshuaKGoldberg
Copy link
Member Author

I'm going to merge this now, because it's been sitting for a while and the merge conflicts keep getting more painful 😅. I think as a followup we'll want to do two things:

@JoshuaKGoldberg JoshuaKGoldberg merged commit 635133a into typescript-eslint:main Jun 24, 2024
60 of 61 checks passed
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
awaiting response Issues waiting for a reply from the OP or another party documentation Documentation ("docs") that needs adding/updating
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Docs: Separate FAQs into discrete sections
5 participants