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

Feat: Add fill-in-blank and copy feature to the codesplit block #1014

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

jasongao97
Copy link
Contributor

This PR introduces a new Codesplit component with the following features:

  • allows for toggling visibility of answers which were defined as <span class="blank">{{code}}</span>
  • a 'copy' button to copy the whole block in raw text to clipboard
Screen.Recording.2024-09-13.at.00.01.47.mov

Note: Code snippet without any blank will only have the 'copy' button

image

Some other changes:

  • code languages are now displayed
  • the build process now handles HTML content within code blocks more accurately

Copy link

netlify bot commented Sep 12, 2024

Deploy Preview for nature-of-code-2nd-edition ready!

Name Link
🔨 Latest commit f5d2147
🔍 Latest deploy log https://app.netlify.com/sites/nature-of-code-2nd-edition/deploys/66e310f4327f6a0007bd3968
😎 Deploy Preview https://deploy-preview-1014--nature-of-code-2nd-edition.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Sep 12, 2024

Deploy Preview for nature-of-code-pdf ready!

Name Link
🔨 Latest commit f5d2147
🔍 Latest deploy log https://app.netlify.com/sites/nature-of-code-pdf/deploys/66e310f451c83800086e5caf
😎 Deploy Preview https://deploy-preview-1014--nature-of-code-pdf.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@shiffman
Copy link
Member

Thank you for this @jasongao97, it's really terrific! I have two small comments:

  1. Since the entire book is JavaScript I don't think it's necessary to show the code language. It's visually very prominent and I think distracting. I'm open to discussing this though! If it's important to include maybe we can change the design to be more subtle. @tuantinghuang curious for your thoughts.
Screenshot 2024-09-22 at 11 04 03 AM
  1. This is maybe a silly thing but would it be possible for the "copy" button to copy the source code with the blanks if "reveal answer" is not selected?

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.

2 participants