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

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

Merged
merged 6 commits into from Aug 18, 2019

Conversation

Sieboldianus
Copy link
Contributor

@Sieboldianus Sieboldianus commented Jul 10, 2019

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

screen_code_button

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 Sieboldianus changed the title GitHub fork Add code copy button to all code fields in the blog Jul 10, 2019
@Sieboldianus
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 10, 2019

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

@ghost
Copy link

@ghost ghost commented Jul 23, 2019

@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
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 24, 2019

@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
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 24, 2019

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

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

@Sieboldianus
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 24, 2019

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
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 24, 2019

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
Copy link

@ghost ghost commented Jul 24, 2019

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

@ghost
Copy link

@ghost ghost commented Jul 24, 2019

@Track3 Can you use xenial instead of trusty?

@ghost
Copy link

@ghost ghost commented Jul 24, 2019

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

@Sieboldianus
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 24, 2019

@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
Copy link
Owner

@Track3 Track3 commented Jul 24, 2019

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
Copy link

@ghost ghost commented Jul 24, 2019

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

@Sieboldianus
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 25, 2019

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
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 25, 2019

@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
Copy link

@ghost ghost commented Jul 26, 2019

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

ruddra
ruddra approved these changes Jul 29, 2019
@Sieboldianus
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Jul 30, 2019

Thanks for fixing the CI pipe!

I've added transparency to the button:
transp_ex

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 :)

Copy link

@ghost ghost left a comment

Oh that is nice!

Sieboldianus and others added 4 commits Aug 1, 2019
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
Copy link
Contributor Author

@Sieboldianus Sieboldianus commented Aug 1, 2019

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.

ghost
ghost approved these changes Aug 2, 2019
Track3
Track3 approved these changes Aug 18, 2019
Copy link
Owner

@Track3 Track3 left a comment

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.

@Track3 Track3 self-requested a review Aug 18, 2019
@Track3 Track3 merged commit 16c9d78 into Track3:master Aug 18, 2019
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants