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: create code switcher tab #8

Merged
merged 4 commits into from
Apr 1, 2024

Conversation

itsacoyote
Copy link
Contributor

@itsacoyote itsacoyote commented Mar 27, 2024

What 💻

  • Create a component that tabs content for display
  • Create a component that displays partial markdown files for re-use across documents

Why ✋

  • Breaks down complex instructions that will be hidden in tabs into partials for easier editing.
  • Makes it easier to re-use content versus re-writing content.

Evidence 📷

Screenshot 2024-03-27 at 3 21 48 PM

Example set up in the Getting Started page to show how it can be used.
NuxtUI has a UTabs component that can be used plainly if we didn't want to use this. This new component provides a way to have tabbed content that can be loaded from partial markdown files to help split up content and make editing potentially easier.

A future feature to implement in this component would be to have a way to track which tab is actively selected and update similar tabs to the same selected tab. Also store this selected tab in localStorage potentially so that the preferred tab for the user is always selected across the site.

@itsacoyote itsacoyote requested a review from a team as a code owner March 27, 2024 19:25
Copy link

github-actions bot commented Mar 27, 2024

Visit the preview URL for this PR (updated for commit 40708ac):

https://zksync-docs-staging-5eb09--pr8-itsacoyote-devrl-448-blokitwu.web.app

(expires Mon, 08 Apr 2024 15:44:12 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: bfaafba5fa82d4f63473aaa76a21fabf1fbb3a11

@itsacoyote itsacoyote force-pushed the itsacoyote-devrl-448-tab-content-component branch from e52be8e to 678de53 Compare March 27, 2024 20:25
@@ -0,0 +1,37 @@
<script setup lang="ts">
defineProps<{
items: CodeSwitcherTabItem[];
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: Can we update the name. CodeSwitcher seems to focused on code whereas its more like a content swticher. Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sounds good to me, I'll rename 👍🏻

Comment on lines +14 to +18
label: 'HardHat',
partial: '_getting-started/_aPartial'
}, {
label: 'Forge',
partial: '_getting-started/_anotherpartial'
Copy link
Contributor

Choose a reason for hiding this comment

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

This is perfect, being able to specify dedicated pages for each partial 💯

Copy link
Contributor

@dutterbutter dutterbutter left a comment

Choose a reason for hiding this comment

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

Just the one comment on name change from CodeSwitcher to something along the lines of ContentSwitcher.

@dutterbutter dutterbutter merged commit a16e1b4 into staging Apr 1, 2024
7 checks passed
@dutterbutter dutterbutter deleted the itsacoyote-devrl-448-tab-content-component branch April 1, 2024 18:02
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