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

refactor: codeblock #1225

Merged
merged 41 commits into from
Apr 28, 2024
Merged

refactor: codeblock #1225

merged 41 commits into from
Apr 28, 2024

Conversation

HEIGE-PCloud
Copy link
Owner

@HEIGE-PCloud HEIGE-PCloud commented Mar 26, 2024

Use code block render hooks to revamp code blocks. The main goals are

  • Move initHighlight into build time
  • Remove ClipboardJS, use writeText instead
  • Support custom option: code wrap
  • Support individual open/close control
  • Support control over the display of code title
  • Document different options

See the preview here https://do-it-git-refactor-code-block-pcloud.vercel.app/codeblock-tests/

Task list

  • Documentation
  • Styling
    • Light mode
    • Dark mode
    • Remove old style in _code.scss
  • Functionality
    • Handle init registration in theme.js
    • Open and close state
      • Animination
    • Arrow Icon
      • Rotate between open/close state
    • Copy Button
      • Copy function
      • Copy success state
    • Wrap line Button
      • Wrapping state
    • Toggle line number button
      • Toggle state
    • Initialize all states in the render hook
    • Custom title
  • Printing experience
    • Hide unnecesary elements
    • Expand all code blocks on beforeprint
    • Wrap all code blocks on beforeprint

@HEIGE-PCloud HEIGE-PCloud self-assigned this Mar 26, 2024
Copy link

vercel bot commented Mar 26, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
do-it ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 28, 2024 7:17am

@eallion
Copy link
Contributor

eallion commented Mar 27, 2024

I found that you are refactoring some templates recently. If possible, you can also add the github embed permanent link to a code snippet.

The docs: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-a-permanent-link-to-a-code-snippet

Permanent link(with commit hash):

https://github.com/HEIGE-PCloud/DoIt/blob/a20d4805c99e37d1b0f021fde97eac3a4e19997a/layouts/index.html#L21-L28

Embed style preview:

Snipaste_2024-03-27_23-31-48

@HEIGE-PCloud HEIGE-PCloud marked this pull request as ready for review April 28, 2024 07:12
@HEIGE-PCloud HEIGE-PCloud merged commit be3cb04 into main Apr 28, 2024
5 checks passed
@HEIGE-PCloud HEIGE-PCloud deleted the refactor/code-block branch April 28, 2024 07:20
hodory pushed a commit to hodory/DoIt that referenced this pull request Dec 16, 2024
* refactor: codeblock

* feat: implement wrap and toggle open animation

* chore: handle max-height calculation correctly

* chore: remove unnecessary js

* chore: remove clipboardjs

* feat: use icons

* feat: add text wrap icon

* feat: add style to icons

* refactor: switch to typescript

* chore: add global declaration

* chore: optimise image resize method

* fix: sharer wechat and mastodon icon

Close HEIGE-PCloud#1247

* Disable autoplay (HEIGE-PCloud#1249)

* Improve the `bilibili` shortcode with more options (HEIGE-PCloud#1250)

* add variables

* finished the initial dev of bilibili improvement

next is documentation

* rearrange bilibili options

* added documentation for improved bilibili shortcode

* fluent chinese

* chore: disableHTTPCache for dev env

* refactor: color scheme HEIGE-PCloud#1245 (HEIGE-PCloud#1253)

* refactor: color scheme

* refactor: colors in Tailwind Config

* fix: scss variables use error

* feat: partially adopt Prime Design for the dark theme

* feat: pick selection color

* feat: pick link color

* feat: pick codeblock, table, blockquote color

* feat: pick more colors

* refactor: remove black theme

* fix: code background color

* refactor: extract primitive colors

* refactor: use primitive colors in tailwind config

* chore: use --verbose

* chore: sync github CI build step

---------

Co-authored-by: PCloud <[email protected]>

* chore: re-enable counter

* fix: syntax highlightning

* chore: format code

* fix(style):  do not wrap line number

* feat: make line numbers fix position

* chore: bad idea, revert

* refactor: move all js logic into theme.ts

* feat: support copy icon states

* feat: implement line number toggle

* feat: move all JavaScript to theme.ts

* feat: support custom title

* feat: init all states

* feat: support maxShownLines

* fix: correct color scheme

* chore: switch icon back to svg

* feat: expand code blocks before print

* deprecate copy option

* feat: add titles to buttons

* feat: add docs

* feat: support wrap option

---------

Co-authored-by: CXwudi <[email protected]>
Co-authored-by: 恐咖兵糖 <[email protected]>
Jatin794 pushed a commit to Jatin794/bog that referenced this pull request Dec 19, 2024
* refactor: codeblock

* feat: implement wrap and toggle open animation

* chore: handle max-height calculation correctly

* chore: remove unnecessary js

* chore: remove clipboardjs

* feat: use icons

* feat: add text wrap icon

* feat: add style to icons

* refactor: switch to typescript

* chore: add global declaration

* chore: optimise image resize method

* fix: sharer wechat and mastodon icon

Close HEIGE-PCloud#1247

* Disable autoplay (HEIGE-PCloud#1249)

* Improve the `bilibili` shortcode with more options (HEIGE-PCloud#1250)

* add variables

* finished the initial dev of bilibili improvement

next is documentation

* rearrange bilibili options

* added documentation for improved bilibili shortcode

* fluent chinese

* chore: disableHTTPCache for dev env

* refactor: color scheme HEIGE-PCloud#1245 (HEIGE-PCloud#1253)

* refactor: color scheme

* refactor: colors in Tailwind Config

* fix: scss variables use error

* feat: partially adopt Prime Design for the dark theme

* feat: pick selection color

* feat: pick link color

* feat: pick codeblock, table, blockquote color

* feat: pick more colors

* refactor: remove black theme

* fix: code background color

* refactor: extract primitive colors

* refactor: use primitive colors in tailwind config

* chore: use --verbose

* chore: sync github CI build step

---------

Co-authored-by: PCloud <[email protected]>

* chore: re-enable counter

* fix: syntax highlightning

* chore: format code

* fix(style):  do not wrap line number

* feat: make line numbers fix position

* chore: bad idea, revert

* refactor: move all js logic into theme.ts

* feat: support copy icon states

* feat: implement line number toggle

* feat: move all JavaScript to theme.ts

* feat: support custom title

* feat: init all states

* feat: support maxShownLines

* fix: correct color scheme

* chore: switch icon back to svg

* feat: expand code blocks before print

* deprecate copy option

* feat: add titles to buttons

* feat: add docs

* feat: support wrap option

---------

Co-authored-by: CXwudi <[email protected]>
Co-authored-by: 恐咖兵糖 <[email protected]>
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.

[FEATURE] Add more options to code block
4 participants