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

fix(content-blog): make footnote reference DOM ID unique on post listing page #7212

Merged
merged 5 commits into from
Apr 21, 2022

Conversation

AkiraVoid
Copy link
Contributor

@AkiraVoid AkiraVoid commented Apr 20, 2022

Motivation

Duplicated footnote references of many blog posts in blog list page will cause duplicated DOM id attributes, so I made a remark plugin to fix this.

Have you read the Contributing Guidelines on pull requests?

No.

Test Plan

I wrote three blog posts under website/_dogfooding/_blog tests named dup-footnote.md. Opening them in route /tests/blog, click each footnote reference, now they will navigate users to right place.

https://deploy-preview-7212--docusaurus-2.netlify.app/tests/blog/page/4

Related PRs

@facebook-github-bot
Copy link
Contributor

Hi @AkiraVoid!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@Josh-Cena Josh-Cena changed the title Fixed multiple duplicated DOM id attributes caused by duplicated footnote references from different blog posts. fix(content-blog): make footnote reference DOM id unique on post listing page Apr 20, 2022
@Josh-Cena Josh-Cena added the pr: bug fix This PR fixes a bug in a past release. label Apr 20, 2022
@netlify
Copy link

netlify bot commented Apr 20, 2022

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit d81167a
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/62616b9a66934c0008e51d24
😎 Deploy Preview https://deploy-preview-7212--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 Apr 20, 2022

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 64
🟢 Accessibility 100
🟢 Best practices 92
🟢 SEO 100
🟢 PWA 90

Lighthouse ran on https://deploy-preview-7212--docusaurus-2.netlify.app/

@Josh-Cena
Copy link
Collaborator

@AkiraVoid Please remember to sign the CLA so this can be properly reviewed.

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Apr 20, 2022
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!


export default function plugin(): Transformer {
return (root, vfile) => {
const suffix = `-${simpleHash(vfile.path!, 6)}`;
Copy link
Collaborator

@Josh-Cena Josh-Cena Apr 20, 2022

Choose a reason for hiding this comment

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

Using the file path as the ID suffix may always not be desirable, because if the file is moved, the anchor ID changes. However, I think it's fine because (1) file movements should be rare and (2) nobody links to a footnote anchor anyways. If we don't do it this way we have to have a "global state" that's persisted between all Remark plugin instances which seems even more cumbersome.

@Josh-Cena Josh-Cena changed the title fix(content-blog): make footnote reference DOM id unique on post listing page fix(content-blog): make footnote reference DOM ID unique on post listing page Apr 20, 2022
@slorber
Copy link
Collaborator

slorber commented Apr 21, 2022

Implementation looks fine but wonder if we really need this in Docusaurus?

There is a limited number of users using footnotes, and also many docusaurus blogs using <!-- truncate --> comment to render a small sample in list view (and thus likely excluding footnotes)

What's the use case for rendering footnotes in the list view? Can you explain what you are trying to do exactly?

I think this use-case is likely too niche and this plugin can be applied in userland through blog plugin config

@Josh-Cena
Copy link
Collaborator

Josh-Cena commented Apr 21, 2022

@slorber They already have this in userland, but I recommmended them to send this to core, because we can't let every user who stumbled upon it to fix it in user-land, considering not everyone may have the time/capability. It's, again, about making Docusaurus an intuitive tool that "just works".

And yes, they hit it because they have multiple posts with footnotes above the truncate marker. They already hit another edge-case where the footnote definition is below the marker and gets truncated and leads to incorrect markup. Scratch that, got confused with another user that used reference links, not footnotes. But anyways, it's certainly an edge-case worth fixing, and the implementation is 20 lines. Why not?

@slorber
Copy link
Collaborator

slorber commented Apr 21, 2022

ok, why not 🤷‍♂️

can we have a unit test for it to ensure it keeps working over time?

@slorber slorber merged commit 71ba449 into facebook:main Apr 21, 2022
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: bug fix This PR fixes a bug in a past release.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants