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

This comment has been minimized.

Copy link
Contributor Author

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

@xorz57

This comment has been minimized.

Copy link

xorz57 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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

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 Sieboldianus force-pushed the Sieboldianus:github-fork branch from 5e37b35 to d2c0991 Jul 24, 2019
@Sieboldianus

This comment has been minimized.

Copy link
Contributor Author

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.

@xorz57

This comment has been minimized.

Copy link

xorz57 commented Jul 24, 2019

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

@xorz57

This comment has been minimized.

Copy link

xorz57 commented Jul 24, 2019

@Track3 Can you use xenial instead of trusty?

@xorz57

This comment has been minimized.

Copy link

xorz57 commented Jul 24, 2019

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

@Sieboldianus

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Owner

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.

@xorz57

This comment has been minimized.

Copy link

xorz57 commented Jul 24, 2019

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

@Sieboldianus

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor Author

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..

@xorz57

This comment has been minimized.

Copy link

xorz57 commented Jul 26, 2019

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

@ruddra
ruddra approved these changes Jul 29, 2019
@Sieboldianus

This comment has been minimized.

Copy link
Contributor Author

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

xorz57 left a comment

Oh that is nice!

Sieboldianus and others added 4 commits Jul 10, 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 Sieboldianus force-pushed the Sieboldianus:github-fork branch from 059bfda to ee7a643 Aug 1, 2019
@Sieboldianus

This comment has been minimized.

Copy link
Contributor Author

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.

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

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
5 checks passed
Header rules No header rules processed
Details
Pages changed 21 new files uploaded
Details
Redirect rules No redirect rules processed
Details
Mixed content No mixed content detected
Details
deploy/netlify Deploy preview ready!
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.