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

Copy to clipboard for codeblocks #275

Merged
merged 2 commits into from Mar 11, 2022
Merged

Conversation

oraNod
Copy link
Contributor

@oraNod oraNod commented Feb 25, 2022

Adds copy to clipboard hover for codeblocks.

After merge, need to update title html to link to js and css assets:

<link rel="stylesheet" href="/assets/css/clipboard.css">
<script src="/assets/javascript/clipboard.min.js" type="text/javascript"></script>
<script src="/assets/javascript/copy.js" type="text/javascript"></script>

@oraNod oraNod added enhancement preview WIP do not merge UX (user experience) Related to user experience. labels Feb 25, 2022
@oraNod
Copy link
Contributor Author

oraNod commented Feb 25, 2022

This is preview until the styling is improved. Currently it's just a clickable "Copy" on each codeblock:

image

The ideal is to show a clipboard or other icon on hover.

@tristantarrant
Copy link
Member

ideally we should be using fontawesome icons, like https://fontawesome.com/search?q=copy&s=brands%2Cregular

@tristantarrant
Copy link
Member

Apparently we already have FontAwesome in there, so it's just a matter of getting `

@insectengine
Copy link
Contributor

I can't get this to spin up locally... very frustrating. @oraNod - I looked at the code and I think you just need to add a little to the javascript/copy.js file. You're missing the css class to call the icon you want. Then remove the html "copy" text if you don't want both.

@insectengine
Copy link
Contributor

screengrab

@oraNod
Copy link
Contributor Author

oraNod commented Mar 3, 2022

@insectengine Awesome. Thank you!!

image

image

@oraNod
Copy link
Contributor Author

oraNod commented Mar 3, 2022

@insectengine Sorry to hear about the frustration. Was the site not building locally with Jekyll or was it trying to insert the clipboard into a document?

If the latter then we'll need to do that in a separate PR to reference the js and css in the HTML pages for the docs. With this PR you need to manually add to .html in the docs directory:

<link rel="stylesheet" href="/assets/css/clipboard.css">
<script src="/assets/javascript/clipboard.min.js" type="text/javascript"></script>
<script src="/assets/javascript/copy.js" type="text/javascript"></script>

I'm also evaluating how we can use assets/main.css in the docs. I'd like to switch to that instead of having separate stylesheets but think that's an area where more work is required.

@oraNod oraNod removed the preview WIP do not merge label Mar 4, 2022
@oraNod
Copy link
Contributor Author

oraNod commented Mar 4, 2022

@tristantarrant and @karesti We still need to modify the css files for html titles in core but this PR is ready. I'll hook it into the docs separately. I also want to remove $ from code blocks.

@karesti
Copy link
Contributor

karesti commented Mar 10, 2022

@oraNod this is good for me, we can go ahead and merge

@oraNod
Copy link
Contributor Author

oraNod commented Mar 10, 2022

@karesti Yes, please!

@karesti karesti merged commit 6327984 into infinispan:develop Mar 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement UX (user experience) Related to user experience.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants