[Code Blocks] no-line-numbers variant

[seshrs]

Context

Resolves #159.

@awdeorio noted that line numbers don't work great for all code blocks. (@eecs441staff shared the same feedback with me earlier this year.)

This PR introduces a new code-block "variant" called no-line-numbers. This variant is exactly identical to enhanced, except that line numbers aren't shown. (Other "enhanced" features are retained — copying the block, clicking a line, highlighting lines, etc. continue to work!)

With these changes, the data-variant attribute on code blocks supports these three options:

• enhanced (the default)
• no-line-numbers (identical to enhanced but without line numbers)
• legacy (the old style)

Additionally, this PR adds a new page-wide/site-wide configuration option defaultCodeblockVariant that can be used to set the global default variant!

Documentation

See the documentation in the demo URL: https://preview.sesh.rs/previews/eecs485staff/primer-spec/165/demo/enhanced-code-blocks.html#no-line-numbers

(After this PR is merged into main, the docs will be live at: https://eecs485staff.github.io/primer-spec/165/demo/enhanced-code-blocks.html#no-line-numbers)

⚠️ DEPRECATION NOTICE

After this PR, the useLegacyCodeBlocks config options are deprecated. They will continue to work for now, but may be removed in a future major release.

Instead, use defaultCodeblockVariant (see the documentation pages for usage info).

Validation

Visit the demo at: https://preview.sesh.rs/previews/eecs485staff/primer-spec/165/demo/enhanced-code-blocks.html#no-line-numbers

Notice that the code block looks identical to the enhanced variant — hover over the block to see the "copy" button, and click on the left-margin to select lines.

Screenshot:

[github-actions]

The spec from this PR is available at https://preview.sesh.rs/previews/eecs485staff/primer-spec/165/.

^{(Available until Fri May 13 2022.)}

[eecs441staff]

Sesh, thanks for the update. It will be nice to be able to set site-wide code block variant to no-line-numbers instead of useLegacyCodeBlocks to be a binary choice between enhanced and legacy. Either that or make no-line-numbers, instead of enhanced, the default. Thanks. Regards, — sugih

…

On Apr 12, 2022, at 01:42, Sesh Sadasivam ***@***.***> wrote: Context Resolves #159. @awdeorio noted that line numbers don't work great for all code blocks. ***@***.*** shared the same feedback with me earlier this year.) This PR introduces a new code-block "variant" called no-line-numbers. This variant is exactly identical to enhanced, except that line numbers aren't shown. (Other "enhanced" features are retained — copying the block, clicking a line, highlighting lines, etc. continue to work!) With these changes, the data-variant attribute on code blocks supports these three options: • enhanced (the default) • no-line-numbers (identical to enhanced but without line numbers) • legacy (the old style) Documentation See the documentation in the demo URL: TODO (After this PR is merged into main, the docs will be live at: TODO) Validation Visit the demo at: [TODO] Notice that the code block looks identical to the enhanced variant — hover over the block to see the "copy" button, and click on the left-margin to select lines. Screenshot: You can view, comment on, or merge this pull request online at: #165 Commit Summary • 1020e07 Refactor codeblocks to handle generic variant input • 237c7db Add new code-block variant to hide line numbers File Changes (9 files) • M _layouts/spec.html (8) • M _sass/spec/base.scss (25) • M demo/enhanced-code-blocks.md (84) • M demo/page-configuration-options.md (6) • M docs/USAGE_ADVANCED.md (24) • M src_js/Config.ts (13) • A src_js/components/main_content/types.ts (5) • M src_js/components/main_content/useEnhancedCodeBlocks.tsx (96) • M src_js/global.d.ts (3) Patch Links: • https://github.com/eecs485staff/primer-spec/pull/165.patch • https://github.com/eecs485staff/primer-spec/pull/165.diff — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[seshrs]

@eecs441staff thanks! I missed to mention in the description of this PR that I added a new configuration option defaultCodeblockVariant. You can use this to set page-wide or site-wide defaults 😃

(Will update the PR description with this.)

[awdeorio]

Looks great!