Fix: code blocks in mdx + issues/868 #1422

muditjuneja · 2024-02-20T20:19:31Z

This PR fixes the following -

Show more button in Code blocks
Added a prop to enable/disable Show more button in Code blocls
Added text wrap to avoid horizontal scroll
Added a new package that is traversing hast and adding a new property named metaData which is being passed as a prop

Should close - #868

vercel · 2024-02-20T20:19:35Z

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

Name	Status	Preview	Comments	Updated (UTC)
gatsby-theme-carbon	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 2, 2024 10:36pm

packages/example/src/pages/components/code-blocks.mdx

packages/gatsby-theme-carbon/src/components/Code/Code.js

muditjuneja · 2024-02-20T20:22:05Z

Hi @eng618 can you review this PR?

netlify · 2024-02-20T20:22:52Z

✅ Deploy Preview for gatsby-theme-carbon ready!

Name	Link
🔨 Latest commit	`9ce6a1e`
🔍 Latest deploy log	https://app.netlify.com/sites/gatsby-theme-carbon/deploys/65e3a93a0e4b5e0009a7cc93
😎 Deploy Preview	https://deploy-preview-1422--gatsby-theme-carbon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

eng618

The changes look really good, the only thing I would like to see is the examples updated to reflect this change. Especially adding an example for the Show More prop. This would be in the packages/example/src/pages/components/code-blocks.mdx file.

eng618 · 2024-02-21T15:18:05Z

Also take a look at https://gatsby.carbondesignsystem.com/components/code-blocks this is the behavior we should see. Seems like instead of have horizontal scrolling we are automatically wrapping the lines.

Then for the folding one we should have the example of non folding and folding vertically.

…roll

packages/gatsby-theme-carbon/gatsby-config.mjs

eng618 · 2024-03-03T00:26:40Z

Lets add some padding to the show more button so it doesn’t overlap the content.

eng618

Approving now, but would be good to add the padding to the show more button before we merge this in.

muditjuneja · 2024-03-03T07:58:21Z

Lets add some padding to the show more button so it doesn’t overlap the content.

I will do that in another follow up PR. Merging this one now.

muditjuneja · 2024-03-03T07:59:11Z

Lets add some padding to the show more button so it doesn’t overlap the content.

I will do that in another follow up PR. Merging this one now.

I guess I can't merge. I will make that small change.

@commitlint

* feat(deps): update node to 18 (#1278) * build(deps): update node to 18 Also update all other dependencies - update all minor dependencies #1277 * chore: bump everything to node 18 * chore: update gatsby-plugin-sass * chore: update readme with status badge * docs: typo correction * docs: update structure * ci: update .github/workflows/manual-release.yml Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> * ci: update commitlint version and docs Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> * chore: release 4.0.0-next.0 * chore: release 4.0.0-next.1 * build: bump deps * chore: release 4.0.0-next.2 * build: update node version * build: update deps * build: gatsby v5 * fix: run gatsby codemods npx gatsby-codemods@latest sort-and-aggr-graphql . * build: define trailingSlash * build: bump dependencies * refactor: apply formatting * refactor(eslint): comment out unused imorts * refactor: apply formatting * start update mdx * build(deps): bump minor and below versions * build: update lerna * formatting... * feat: update release-it * feat: update @commitlint * ci: add github actions updater * build: move some deps down to devDependencies * build: update all things * formatting... * build: dep updates * fix: remove extraLayouts This is not longer supported as you can define your own layouts as components, following this guide: https://www.gatsbyjs.com/docs/how-to/routing/layout-components/ * build: bump dependencies * chore: update sass resources loader to compatible version * build: bump deps * docs: start migration doc * chore: rebuild yarn lock * build(deps): update minor and below * build(deps): update minor and below * feat(layouts): start converting to use layouts * build: rebuild lock file * build: cleanup unknown property * build(deps): update minor and below * build(deps): bump minor and below * fix(path): update layout path * linter fixes * chore: update changelog settings * build(deps): bump minor and below And other minor adjustments. * chore: add recommended plugins * fix(scss): import + other minor fixes (#1410) * Fixing scss import + other minor fixes * Fixing useMetadata in Default Layout * lint fixing * bring back defaultProps * Fixing inline code blocks * Minor info comment * More suggested changes * remove white space * testing vercel again * Fixing yarn * fixing yarn * chore(deps): bump minor and below * fix(format): run prettier * fix(lint): update wesbos * fix: linting,imports in code (#1414) * build(deps): update release-it workspaces * docs: update code block * chore: release 4.0.0-next.4 [skip ci], * chore: update lock file * Fix : mdx tables + port to esm v2 (#1418) * fix: mdx tables + port gatsby core to ESM * chore: bring back js files via using type * updating the order of remarkGfm Co-authored-by: Eric Garcia <engarcia618@gmail.com> * fix: updatng remarkGfm order Co-authored-by: Eric Garcia <engarcia618@gmail.com> * chore: add a space * fix: mdx-tables --------- Co-authored-by: Eric Garcia <engarcia618@gmail.com> * fix(yarn): revert lock file changes * fix: v5 issues (#1431) * fix: image spacing * fix: blockquote styles * fix: prop table display * fix: image gallery display * fix: markdown link with title * docs: update migration guide * build: maintian dependencies * build: rebuild lock file * Fix: code blocks in mdx + issues/868 (#1422) * fix: heading spacing * build: bump yarn * fix: nested list styling for v5 (#1438) Co-authored-by: Eric Garcia <eng618@garciaericn.com> * style: apply formatting * chore: release 4.0.0-next.5.0 [skip ci], * build(deps): bump minor * fix: copy button color token (#1441) * fix: copy button color token * chore: remove extra file changes * fix: regression in code blocks - default prop (#1442) * docs: code blocks docs page (#1443) * docs: code snippet docs page * fix: hidecode prop check * fix formatting * fix: release * chore: release 4.0.0-next.7 [skip ci], * refactor: change hideCode prop to showAll prop (#1445) * refactor: change hideCode prop to showAll prop * fix: yan lock file * fix: feedback form button style * fix: warnings (#1450) * fix: warnings * fix: swap back to mjs file * fix: caption styles (#1451) * fix formatting * chore: release 4.0.0-next.8 [skip ci], * feat(next): add gatsby-plugin-local-search (#1464) * feat(next): add gatsby-plugin-local-search remove gatsby-plugin-lunr * feat(next): add gatsby-plugin-local-search remove gatsby-plugin-lunr * feat: add path * chore: remove old code * chore: clean up code * chore: cleanup * feat: fix tabs * feat: create search config file * chore: release 4.0.0-next.9 [skip ci], * feat: add max results to search (#1466) * chore: release 4.0.0-next.10 [skip ci], * build(deps): bump minor and below * chore: release 4.0.0-next.11 [skip ci], * build(yarn): update lock file * docs: update migration guide * fix(deps): add missing preset * docs: update migration guide * chore: cleanup * fix: update homepage link to v4 migration --------- Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> Co-authored-by: Mudit Juneja <muditjuneja@outlook.com> Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>

muditjuneja commented Feb 20, 2024

View reviewed changes

packages/example/src/pages/components/code-blocks.mdx Show resolved Hide resolved

muditjuneja commented Feb 20, 2024

View reviewed changes

packages/gatsby-theme-carbon/src/components/Code/Code.js Outdated Show resolved Hide resolved

muditjuneja commented Feb 20, 2024

View reviewed changes

packages/gatsby-theme-carbon/src/components/Code/Code.js Show resolved Hide resolved

vercel bot deployed to Preview February 20, 2024 20:22 View deployment

eng618 requested changes Feb 21, 2024

View reviewed changes

vercel bot deployed to Preview February 29, 2024 22:06 View deployment

muditjuneja added 2 commits March 1, 2024 12:49

fix: show mode btn + mdx code block changes in themse

864c706

fix: issues-868-hide-show-more + add text wrap to avoid horizontal sc…

a14d7a2

…roll

eng618 force-pushed the fix-code-blocks-in-mdx branch from 22faa3f to a14d7a2 Compare March 1, 2024 17:49

vercel bot deployed to Preview March 1, 2024 17:53 View deployment

fix : props metaData in fenced code

356bce5

vercel bot deployed to Preview March 2, 2024 21:49 View deployment

fix(code): add props metaData in fenced code

8b3e282

vercel bot deployed to Preview March 2, 2024 21:54 View deployment

muditjuneja commented Mar 2, 2024

View reviewed changes

packages/gatsby-theme-carbon/gatsby-config.mjs Show resolved Hide resolved

update (dep) : vbump for rehype-mdx-fenced-code-meta-support

a65eed3

vercel bot had a problem deploying to Preview March 2, 2024 22:31 Failure

bump: update yarn file

9ce6a1e

vercel bot deployed to Preview March 2, 2024 22:36 View deployment

eng618 approved these changes Mar 3, 2024

View reviewed changes

eng618 merged commit 7aa23ec into carbon-design-system:next Mar 3, 2024
6 of 7 checks passed

alisonjoseph mentioned this pull request Mar 8, 2024

Gatsby v5 : code snippet bugs #1439

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: code blocks in mdx + issues/868 #1422

Fix: code blocks in mdx + issues/868 #1422

muditjuneja commented Feb 20, 2024 •

edited

Loading

vercel bot commented Feb 20, 2024 •

edited

Loading

muditjuneja commented Feb 20, 2024

netlify bot commented Feb 20, 2024 •

edited

Loading

eng618 left a comment

eng618 commented Feb 21, 2024

eng618 commented Mar 3, 2024

eng618 left a comment

muditjuneja commented Mar 3, 2024

muditjuneja commented Mar 3, 2024

Fix: code blocks in mdx + issues/868 #1422

Fix: code blocks in mdx + issues/868 #1422

Conversation

muditjuneja commented Feb 20, 2024 • edited Loading

vercel bot commented Feb 20, 2024 • edited Loading

muditjuneja commented Feb 20, 2024

netlify bot commented Feb 20, 2024 • edited Loading

✅ Deploy Preview for gatsby-theme-carbon ready!

eng618 left a comment

Choose a reason for hiding this comment

eng618 commented Feb 21, 2024

eng618 commented Mar 3, 2024

eng618 left a comment

Choose a reason for hiding this comment

muditjuneja commented Mar 3, 2024

muditjuneja commented Mar 3, 2024

muditjuneja commented Feb 20, 2024 •

edited

Loading

vercel bot commented Feb 20, 2024 •

edited

Loading

netlify bot commented Feb 20, 2024 •

edited

Loading