docs: add copy button for the site #18855

gweesin · 2024-09-04T16:32:15Z

Prerequisites checklist

I have read the contributing guidelines.

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

[X] Documentation update
[ ] 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)

add a copy button for each code blocks

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

can we make the style better match the current website theme?

netlify · 2024-09-04T16:32:30Z

✅ Deploy Preview for docs-eslint ready!

Name	Link
🔨 Latest commit	`6bb6c07`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/67598d8a3ab5800008134e5d
😎 Deploy Preview	https://deploy-preview-18855--docs-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Tanujkanti4441 · 2024-09-06T06:26:10Z

Hi @gweesin, thanks for PR, but right now CI is failing, could you fix that?

gweesin · 2024-09-06T09:55:38Z

Hi @gweesin, thanks for PR, but right now CI is failing, could you fix that?

sure, it seems this is a lint problem, but now I can't run the trunk command. So you can see lots of format commits manually.

I will research it later.

gweesin · 2024-09-06T10:30:48Z

anybody can help?

PS D:\opensource\eslint> trunk
node:internal/deps/undici/undici:13185
      Error.captureStackTrace(err);
            ^

TypeError: fetch failed
    at node:internal/deps/undici/undici:13185:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  [cause]: Error: read ECONNRESET
      at TLSWrap.onStreamRead (node:internal/stream_base_commons:218:20) {
    errno: -4077,
    code: 'ECONNRESET',
    syscall: 'read'
  }
}

Node.js v22.8.0

Jay-Karia · 2024-09-06T11:20:19Z

anybody can help?

PS D:\opensource\eslint> trunk
node:internal/deps/undici/undici:13185
      Error.captureStackTrace(err);
            ^

TypeError: fetch failed
    at node:internal/deps/undici/undici:13185:13
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  [cause]: Error: read ECONNRESET
      at TLSWrap.onStreamRead (node:internal/stream_base_commons:218:20) {
    errno: -4077,
    code: 'ECONNRESET',
    syscall: 'read'
  }
}

Node.js v22.8.0

Seems like a network issue

Tanujkanti4441 · 2024-09-06T12:06:51Z

docs/src/assets/images/icons/copied.svg
fmt Unoptimized svg, fix by running 'trunk fmt'

i guess recommended command is trunk fmt to optimize the SVG that is creating the issue.

gweesin · 2024-09-06T14:06:59Z

docs/src/assets/images/icons/copied.svg
fmt Unoptimized svg, fix by running 'trunk fmt'

i guess recommended command is trunk fmt to optimize the SVG that is creating the issue.

Yes, the error caused by fetch https://trunk.io/releases/1.22.3/trunk-1.22.3.mingw.tar.gz

but my network really connect it successfully:

Hoping another collaborator can help me run the command trunk fmt to fix this lint ci problem.

nzakas · 2024-09-06T15:52:10Z

@gweesin what operating system are you on?

@det can you help us debug this trunk problem?

nzakas · 2024-09-06T15:53:58Z

Thanks for taking a look at this.

All of the code samples now have the language in the upper-right corner. I don't think we want that.

I think the copy button should be visible all the time, not just on hover. Also, the image disappears completely in light mode.

Also, we should not be applying this to valid/invalid code in the rules docs as it overlaps.

gweesin · 2024-09-06T16:03:21Z

@gweesin what operating system are you on?

@det can you help us debug this trunk problem?

my OS is Windows 11. I can provide more informations if you need.

gweesin · 2024-09-06T16:10:33Z

@nzakas Thanks for your review.
the language corner forked from vitepress, I haven't removed it before because it worked properly. Also I can remove it latter.

button's icon disapeers in light mode seems a bug.

shouldn't display in code block for validation demo is the good user experience.

I will fix for all of advertisements. Thanks a lot.

EliSchleifer · 2024-09-06T20:21:38Z

@det is on the case - working with reporter to understand why trunk fmt won't run on box

github-actions · 2024-09-22T22:33:19Z

Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update.

Tanujkanti4441 · 2024-09-23T17:27:19Z

Hi @gweesin, there are some suggestions, you can check them out :).

github-actions · 2024-10-03T22:34:07Z

Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update.

amareshsm · 2024-10-06T21:20:42Z

@gweesin Just a gentle reminder: there’s some feedback that I'd appreciate you taking a look at. If you're busy, please let us know, and I can handle it from here.

Additionally, I’ve addressed the lint issue for now and pushed the changes from my end.

github-actions · 2024-10-16T22:33:48Z

Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update.

amareshsm · 2024-10-18T18:06:11Z

@gweesin Just a gentle reminder: there’s some feedback that I'd appreciate you taking a look at. If you're busy, please let us know, and I can handle it from here.

Additionally, I’ve addressed the lint issue for now and pushed the changes from my end.

Since it has been pending for a long time I will take over the pr complete the remaining changes.

gweesin · 2024-10-25T12:40:11Z

@gweesin Just a gentle reminder: there’s some feedback that I'd appreciate you taking a look at. If you're busy, please let us know, and I can handle it from here.
Additionally, I’ve addressed the lint issue for now and pushed the changes from my end.

Since it has been pending for a long time I will take over the pr complete the remaining changes.

Thanks! I'm sorry I have no time to fix it recently. Also puzzled by running trunk command.

nzakas · 2024-10-25T15:20:36Z

@gweesin has someone reached out to you to discuss your issues with Trunk?

gweesin · 2024-10-26T05:57:25Z

@gweesin has someone reached out to you to discuss your issues with Trunk?

Chris Clearwater told me upgrade the trunk launcher package to version 1.3.2 on Slack, but nothing changed. And then the communication was stopped.

nzakas · 2024-10-28T13:43:24Z

Okay, I'll reach out to them and see if we can get you some help.

gweesin · 2024-11-28T14:03:15Z

Okay, I'll reach out to them and see if we can get you some help.

I'm sorry for resolving this issue so late. Here is my solution for the trunk installation:

Download trunk-1.22.3.mingw.tar.gz using Chrome.
Start a local static server to serve the file via an HTTP request.
Modify the download URL in /node_modules/@trunkio/launcher/src/download.js.
The program should now be able to download the file successfully.

It would be better if Trunk could support reading the download mirror from environment variables.

I will continue working on this PR.

nzakas · 2024-12-02T15:53:07Z

@gweesin thanks for the update, and glad you got things working. Do you want to finish up this PR?

gweesin · 2024-12-03T15:38:04Z

@gweesin thanks for the update, and glad you got things working. Do you want to finish up this PR?

I have rebased the branch and fixed the bugs you mentioned. However, I couldn't reproduce this particular issue. It seems to be a temporary compilation state during development.

Thank you for your review! We're now ready to revisit the code for further review.

nzakas · 2024-12-04T15:46:36Z

I've tested in both Firefox and Edge, and I'm still seeing the button without an icon. I'm using the deploy preview:
https://deploy-preview-18855--docs-eslint.netlify.app/

nzakas · 2024-12-09T16:34:20Z

I can see the icon now! 🎉

I think in dark mode the button should be darker. Basically, just slightly lighter than the background.

In light mode, we already have the button as slightly darker than the background.

nzakas · 2024-12-10T15:51:39Z

docs/src/assets/scss/components/copy-button.scss

+
+[class*="language-"] > .c-btn--copy:hover,
+[class*="language-"] > .c-btn--copy.copied {
+    opacity: 0.8;


The semi-transparency is a problem when the button overlaps text, making it harder to see the button on hover.

What do you think about doing a box-shadow on hover instead?

nzakas · 2024-12-11T15:28:12Z

At least on my screen, I don't see anything in dark mode and light mode is also difficult to see.

Maybe we should just go with a glow effect using box-shadow? So something along the lines of 0 0 5px rgba(0, 0, 0, 0.4) (although that only looks good in light mode and can't be seen in dark mode.)

gweesin requested a review from a team as a code owner September 4, 2024 16:32

eslint-github-bot bot added the documentation Relates to ESLint's documentation label Sep 4, 2024

github-actions bot added the Stale label Sep 22, 2024

Tanujkanti4441 removed the Stale label Sep 23, 2024

github-actions bot added the Stale label Oct 3, 2024

github-actions bot removed the Stale label Oct 6, 2024

github-actions bot added the Stale label Oct 16, 2024

amareshsm removed the Stale label Oct 18, 2024

amareshsm self-assigned this Oct 18, 2024

gweesin force-pushed the docs/add-copy-btn branch from 9d8ed2d to 282069c Compare November 28, 2024 14:52

gweesin force-pushed the docs/add-copy-btn branch from 171578b to abc0593 Compare December 3, 2024 15:31

gweesin and others added 10 commits December 5, 2024 10:00

feat: add copy button for the site

c5f1014

style: format code

f30f50e

style: format code

740bb34

style: remove whitespace

5503174

fix lint issue

2dc79f5

remove language

88eee89

make copy btn visible all time

312dc59

fix: should remove all language in the upper-right corner

124f18e

fix: fix copy button displayed in valid / invalid code block

8bf143c

fix: cannot find copy icon after build website

67791e3

gweesin force-pushed the docs/add-copy-btn branch from efe3242 to 67791e3 Compare December 5, 2024 02:00

fix: improve button and background color coordination

56b1bd1

nzakas added the contributor pool label Dec 10, 2024

nzakas reviewed Dec 10, 2024

View reviewed changes

fix: fix transparent buttons overlap problem

6bb6c07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: add copy button for the site #18855

docs: add copy button for the site #18855

gweesin commented Sep 4, 2024

netlify bot commented Sep 4, 2024 •

edited

Loading

Tanujkanti4441 commented Sep 6, 2024

gweesin commented Sep 6, 2024 •

edited

Loading

gweesin commented Sep 6, 2024

Jay-Karia commented Sep 6, 2024

Tanujkanti4441 commented Sep 6, 2024

gweesin commented Sep 6, 2024 •

edited

Loading

nzakas commented Sep 6, 2024

nzakas commented Sep 6, 2024

gweesin commented Sep 6, 2024

gweesin commented Sep 6, 2024

EliSchleifer commented Sep 6, 2024

github-actions bot commented Sep 22, 2024

Tanujkanti4441 commented Sep 23, 2024

github-actions bot commented Oct 3, 2024

amareshsm commented Oct 6, 2024

github-actions bot commented Oct 16, 2024

amareshsm commented Oct 18, 2024

gweesin commented Oct 25, 2024

nzakas commented Oct 25, 2024

gweesin commented Oct 26, 2024

nzakas commented Oct 28, 2024

gweesin commented Nov 28, 2024

nzakas commented Dec 2, 2024

gweesin commented Dec 3, 2024 •

edited

Loading

nzakas commented Dec 4, 2024

nzakas commented Dec 9, 2024

nzakas Dec 10, 2024

nzakas commented Dec 11, 2024

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

docs: add copy button for the site #18855

Are you sure you want to change the base?

docs: add copy button for the site #18855

Conversation

gweesin commented Sep 4, 2024

Prerequisites checklist

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

What changes did you make? (Give an overview)

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

netlify bot commented Sep 4, 2024 • edited Loading

✅ Deploy Preview for docs-eslint ready!

Tanujkanti4441 commented Sep 6, 2024

gweesin commented Sep 6, 2024 • edited Loading

gweesin commented Sep 6, 2024

Jay-Karia commented Sep 6, 2024

Tanujkanti4441 commented Sep 6, 2024

gweesin commented Sep 6, 2024 • edited Loading

nzakas commented Sep 6, 2024

nzakas commented Sep 6, 2024

gweesin commented Sep 6, 2024

gweesin commented Sep 6, 2024

EliSchleifer commented Sep 6, 2024

github-actions bot commented Sep 22, 2024

Tanujkanti4441 commented Sep 23, 2024

github-actions bot commented Oct 3, 2024

amareshsm commented Oct 6, 2024

github-actions bot commented Oct 16, 2024

amareshsm commented Oct 18, 2024

gweesin commented Oct 25, 2024

nzakas commented Oct 25, 2024

gweesin commented Oct 26, 2024

nzakas commented Oct 28, 2024

gweesin commented Nov 28, 2024

nzakas commented Dec 2, 2024

gweesin commented Dec 3, 2024 • edited Loading

nzakas commented Dec 4, 2024

nzakas commented Dec 9, 2024

nzakas Dec 10, 2024

Choose a reason for hiding this comment

nzakas commented Dec 11, 2024

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!

netlify bot commented Sep 4, 2024 •

edited

Loading

gweesin commented Sep 6, 2024 •

edited

Loading

gweesin commented Sep 6, 2024 •

edited

Loading

gweesin commented Dec 3, 2024 •

edited

Loading