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: add link from every category index page to the guide page #7665

Merged
merged 2 commits into from
Jun 23, 2022

Conversation

Josh-Cena
Copy link
Collaborator

@Josh-Cena Josh-Cena commented Jun 23, 2022

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

I've seen many people asking how to implement the generated index page. Let's make it even more visible.

Also a dogfooding for wrap swizzling.

Test Plan

Test links

Deploy preview: https://deploy-preview-7665--docusaurus-2.netlify.app/docs/category/getting-started/

Related issues/PRs

@Josh-Cena Josh-Cena added the pr: documentation This PR works on the website or other text documents in the repo. label Jun 23, 2022
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jun 23, 2022
@netlify
Copy link

netlify bot commented Jun 23, 2022

[V2]

Name Link
🔨 Latest commit 72003e7
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/62b43f0a03a97f00089f1dc8
😎 Deploy Preview https://deploy-preview-7665--docusaurus-2.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.

@github-actions
Copy link

github-actions bot commented Jun 23, 2022

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟢 93 🟢 100 🟢 100 🟢 100 🟢 90 Report
/docs/installation 🟠 86 🟢 100 🟢 100 🟢 100 🟢 90 Report

@github-actions
Copy link

github-actions bot commented Jun 23, 2022

Size Change: +349 B (0%)

Total Size: 802 kB

Filename Size Change
website/build/assets/css/styles.********.css 107 kB +152 B (0%)
website/build/assets/js/main.********.js 604 kB +211 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 52.6 kB 0 B
website/build/index.html 38.9 kB -14 B (0%)

compressed-size-action

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

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

LGTM 👍

Something to consider: I think the "category generated index" name may not be very clear and users might not understand how it looks like visually.

Can we display an example index on that page?

https://deploy-preview-7665--docusaurus-2.netlify.app/docs/sidebar/items/#generated-index-page

Like <BrowserWindow><SampleGeneratedIndex/></BrowserWindow>

Just to make it clear what it looks like?


Separate PR but I'd also like to have a global plugin option so that all categories can have an index by default (instead of using additional config on each category => not convenient)

website/src/theme/DocCategoryGeneratedIndexPage/index.tsx Outdated Show resolved Hide resolved
<Translate
values={{
guideLink: (
<Link to={`${docPath}#category-link`}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
<Link to={`${docPath}#category-link`}>
<Link to={`${docPath}#generated-index-page`}>

Should it link to the parent of child heading? 🤔 not really sure what is best

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I deliberately linked to this section, and even reordered the headings, because I added an extra tip at the top about how this should be implemented with autogenerated.

@Josh-Cena
Copy link
Collaborator Author

Can we display an example index on that page?

Directly beneath that there's a link to an actual page, though. A demo for the entire page would take up quite some space.

I'd also like to have a global plugin option so that all categories can have an index by default

I think that makes sense

import styles from './styles.module.css';

function HintFooter() {
const docPath = useLayoutDoc('guides/docs/sidebar/items', undefined)?.path;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ref #7402 a DocLink component will make this a bit easier

@slorber
Copy link
Collaborator

slorber commented Jun 23, 2022

Directly beneath that there's a link to an actual page, though. A demo for the entire page would take up quite some space.

That can be enough for now

I was thinking of something simpler though, like

<BrowserWindow>
  <DocCardList items={useCurrentSidebarCategory().items}/>
</BrowserWindow>

Or just a hardcoded list eventually.

@slorber slorber merged commit 8e3e89d into main Jun 23, 2022
@slorber slorber deleted the jc/generated-index-link branch June 23, 2022 11:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: documentation This PR works on the website or other text documents in the repo.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants