Add code copy button to all code fields in the blog #81

Sieboldianus · 2019-07-10T09:13:36Z

This PR adds a code copy button to all code fields in the blog.

Note:
I have a blog with lots of code fields and thought this was helpful for users who want to follow code examples. The actual code is from Tom Spencer and properly referenced. I have recompiled the scss in assets folder, so this can be used without the extended version.

Sieboldianus · 2019-07-10T09:17:52Z

Can someone explain why checks are failing? I am using this successfully in Gitlab CI and with local hugo server

ghost · 2019-07-23T15:54:32Z

@Sieboldianus, take a look at this.

12:13:54 PM: Error: failed to prune cache "assets": remove /opt/build/repo/exampleSite/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content: no such file or directory

Also check this out gohugoio/hugo#5745

Sieboldianus · 2019-07-24T06:10:16Z

@Sieboldianus, take a look at this.

12:13:54 PM: Error: failed to prune cache "assets": remove /opt/build/repo/exampleSite/resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content: no such file or directory

Also check this out gohugoio/hugo#5745

Thanks! I still don't get it:

in the original branch there's a main.js_d11fe7b62c27961c87ecd0f2490357b9.content
in my PR branch there's the same file
I haven't touched nor modified this file
I've added a minified version of code-copy.js in the latest commit, since this was obviously missing, but the issue is still there

Netlify complains about the file main.js_d11fe7b62c27961c87ecd0f2490357b9.content missing - but it exists.

Sieboldianus · 2019-07-24T06:17:41Z

Well, just saw that the original branch has the same problem:
https://app.netlify.com/sites/hugo-theme-hermit/deploys

That's why shows broken sign on main page. So this seems not a problem with this PR.

Sieboldianus · 2019-07-24T06:28:16Z

I've tried to remove resources folder completely, according to #5745, but this results in netlify error:

8:25:42 AM: ERROR 2019/07/24 06:25:42 error: failed to transform resource: TOCSS: failed to transform "css/style.css" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information

Somehow to be expected: to build resources folder, hugo extended is needed.

I have no experience with netlify, so maybe someone else can solve this problem.

Sieboldianus · 2019-07-24T06:42:09Z

According to, this can only be fixed by the project maintainer by switching to Xenial Image in the Netlify Dashboard.

In your Netlify Dashboard go to "Deploy Settings" > "Build image selection" and switch to Ubuntu 16.04. The 14.04 build image doesn't support the extended Hugo 0.54 version.

There's a closed issue on Netlify that is addressing this.

After that, remove resouces folder and let it build by Netlify hugo extended.

ghost · 2019-07-24T12:10:33Z

@Sieboldianus I have no experience with web development at all. But, I think I understand the problem now!

ghost · 2019-07-24T12:14:12Z

@Track3 Can you use xenial instead of trusty?

ghost · 2019-07-24T12:16:02Z

@Sieboldianus I have one question. Can I turn off that copy button if I want to?

Sieboldianus · 2019-07-24T12:29:02Z

@Track3 Can you use xenial instead of trusty?

I can't since I have no access to the repository netlify dashboard, this needs to be done by the maintainer of this repository.

@Track3 @Sieboldianus I have one question. Can I turn off that copy button if I want to?

Simplest way to disable the feature is to override default behaviour of showing code copy button, e.g.:

/themes/themename/layouts/_default/baseof.html

… would be overridden by:

/layouts/_default/baseof.html

where you removed the following line see:

{{ $script := resources.Get "js/code-copy.js" | minify | fingerprint -}}

The other way around would be to make code-copy button optional by removing the line above in the master branch.

Track3 · 2019-07-24T12:56:34Z

Hi @Sieboldianus @xorz57

I've switched to Ubuntu Xenial build image, but it still won't build. I think it has something to do with "hugo --gc" command, you can try to edit netlify.toml, remove --gc from the build command. I'll take a closer look into this this weekend.

ghost · 2019-07-24T13:59:22Z

@Sieboldianus Is it possible to enable or disable the copy button from within the config.toml file?

Sieboldianus · 2019-07-25T18:30:47Z

Hi @Sieboldianus @xorz57

I've switched to Ubuntu Xenial build image, but it still won't build. I think it has something to do with "hugo --gc" command, you can try to edit netlify.toml, remove --gc from the build command. I'll take a closer look into this this weekend.

Will look into this as soon as possible! Many thanks

Sieboldianus · 2019-07-25T18:32:19Z

@Sieboldianus Is it possible to enable or disable the copy button from within the config.toml file?

I'll consider adding this option to the PR, need to look into this..

ghost · 2019-07-26T01:42:27Z

@Sieboldianus Can you also make the button have 50% opacity?

Sieboldianus · 2019-07-30T07:50:45Z

Thanks for fixing the CI pipe!

I've added transparency to the button:

I think this helps to prevent code being hidden behind the button.

I've also added the option to enable/disable the button in config.toml. The way I implemented the optional bundle.js function perhaps isn't ideal, but it works. Please feel free to change this in baseof.html.

Remaining things to do:

reference Tom Spencer in README.md Acknowledgments
add instructions to disable code-copy-button to README.md
Merge PR :)

ghost

Oh that is nice!

Update compiled scss add minified version of code-copy.js to resources

Add code copy button to code fields Update compiled scss

Update compiled style.scss Revert "Update compiled style.scss" This reverts commit 9a0a5e99ad2c038f81e1f3c1c54f7b570ec74d80. Add transparency to code-copy button Add code-copy-button option to config.toml Update resource assets Remove code-copy.js_d11fe7b62c27961c87ecd0f2490357b9.content Fix netlify ci with .content files in assets Fix netlify ci with .content files in assets

Sieboldianus · 2019-08-01T07:39:46Z

Ok, some final work on this PR:

add compiled scss including reduced opacity for code-copy-button
clean up all commits for PR into major ones (squash commits)

From my perspective it looks like the PR is ready for merge into master.

Track3

A massive thanks to everyone involved! I just noticed this will only work with codefences, not with Hugo highlight shortcode. Shall we add support for that? I think for now, we can just merge this and improve this feature later.

Sieboldianus changed the title ~~GitHub fork~~ Add code copy button to all code fields in the blog Jul 10, 2019

Sieboldianus force-pushed the github-fork branch from 5e37b35 to d2c0991 Compare July 24, 2019 06:30

ruddra approved these changes Jul 29, 2019

View reviewed changes

ghost reviewed Jul 30, 2019

View reviewed changes

Sieboldianus and others added 4 commits August 1, 2019 09:31

Add code copy button to code fields

90fa2dd

Update compiled scss add minified version of code-copy.js to resources

Change how javascript is referenced

d28d221

Add code copy button to code fields Update compiled scss

Add transparency to code-copy button

ec2fc36

Sieboldianus force-pushed the github-fork branch from 059bfda to ee7a643 Compare August 1, 2019 07:36

Update Readme and Acknowledgments

9e0e96c

ghost approved these changes Aug 2, 2019

View reviewed changes

Track3 approved these changes Aug 18, 2019

View reviewed changes

Merge branch 'master' into github-fork

18eb7ac

Track3 self-requested a review August 18, 2019 14:26

Track3 merged commit 16c9d78 into Track3:master Aug 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add code copy button to all code fields in the blog #81

Add code copy button to all code fields in the blog #81

Sieboldianus commented Jul 10, 2019 •

edited

Loading

Sieboldianus commented Jul 10, 2019

ghost commented Jul 23, 2019 •

edited by ghost

Loading

Sieboldianus commented Jul 24, 2019 •

edited

Loading

Sieboldianus commented Jul 24, 2019

Sieboldianus commented Jul 24, 2019

Sieboldianus commented Jul 24, 2019

ghost commented Jul 24, 2019

ghost commented Jul 24, 2019

ghost commented Jul 24, 2019

Sieboldianus commented Jul 24, 2019

Track3 commented Jul 24, 2019

ghost commented Jul 24, 2019

Sieboldianus commented Jul 25, 2019

Sieboldianus commented Jul 25, 2019

ghost commented Jul 26, 2019

Sieboldianus commented Jul 30, 2019 •

edited

Loading

ghost left a comment

Sieboldianus commented Aug 1, 2019 •

edited

Loading

Track3 left a comment

Add code copy button to all code fields in the blog #81

Add code copy button to all code fields in the blog #81

Conversation

Sieboldianus commented Jul 10, 2019 • edited Loading

Sieboldianus commented Jul 10, 2019

ghost commented Jul 23, 2019 • edited by ghost Loading

Sieboldianus commented Jul 24, 2019 • edited Loading

Sieboldianus commented Jul 24, 2019

Sieboldianus commented Jul 24, 2019

Sieboldianus commented Jul 24, 2019

ghost commented Jul 24, 2019

ghost commented Jul 24, 2019

ghost commented Jul 24, 2019

Sieboldianus commented Jul 24, 2019

Track3 commented Jul 24, 2019

ghost commented Jul 24, 2019

Sieboldianus commented Jul 25, 2019

Sieboldianus commented Jul 25, 2019

ghost commented Jul 26, 2019

Sieboldianus commented Jul 30, 2019 • edited Loading

ghost left a comment

Choose a reason for hiding this comment

Sieboldianus commented Aug 1, 2019 • edited Loading

Track3 left a comment

Choose a reason for hiding this comment

Sieboldianus commented Jul 10, 2019 •

edited

Loading

ghost commented Jul 23, 2019 •

edited by ghost

Loading

Sieboldianus commented Jul 24, 2019 •

edited

Loading

Sieboldianus commented Jul 30, 2019 •

edited

Loading

Sieboldianus commented Aug 1, 2019 •

edited

Loading