Skip to content

docs(www): add code tabs and copy functionality #4897

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

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

Conversation

timdeschryver
Copy link
Member

@timdeschryver timdeschryver commented Jul 23, 2025

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Closes #4877

There's currently no implementation for code tabs.

What is the new behavior?

This PR implements a code tabs component, and updates the content to use the new component.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Some notes:

  • Styling is not my strongest point, Copilot helped me a hand here
  • I added a copy functionality because I find it easier to copy paste code from the docs
  • Because the current state of the docs don't have a tabs component with content, here are some screenshots to show it in action.
image image

Copy link

netlify bot commented Jul 23, 2025

Deploy Preview for ngrx-io canceled.

Name Link
🔨 Latest commit ad89cd0
🔍 Latest deploy log https://app.netlify.com/projects/ngrx-io/deploys/6898e1faea19ba000880bf3d

Copy link

netlify bot commented Jul 23, 2025

Deploy Preview for ngrx-site-v19 ready!

Name Link
🔨 Latest commit ad89cd0
🔍 Latest deploy log https://app.netlify.com/projects/ngrx-site-v19/deploys/6898e1fa680cc70008ac4854
😎 Deploy Preview https://deploy-preview-4897--ngrx-site-v19.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 project configuration.

<mat-tab-group [preserveContent]="true">
@for (tab of tabs(); track tab) {
<mat-tab [label]="tab.header">
<ngrx-code-example [innerHTML]="tab.code"> </ngrx-code-example>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe not the best implementation, but it works.
The idea is to reuse the ngrx-code-example in the content, and re-render it here using it's own rendered HTML.
The ngrx-code-example is re-used here to have the copy functionality.

@markostanimirovic markostanimirovic added the Needs Cleanup Review changes needed label Aug 6, 2025
@timdeschryver timdeschryver removed the Needs Cleanup Review changes needed label Aug 10, 2025
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.

[New Docs]: Code tabs
4 participants