docs: add an interactive Getting Started wizard to the guide - #303
Merged
Conversation
Adds a checkbox-based questionnaire (data source, target environments, data availability, frontend approach, agent support, and other requirements) that recommends a tailored reading list from the guide, adapters, frameworks, and plugins docs. Selections persist to localStorage so a reader can leave and come back to the page.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replace the plain checkbox list with a grid of selectable cards - each with an icon badge, title, and description - matching the card-picker pattern used elsewhere for this kind of preference UI. Selected cards get a highlighted border, tinted icon badge, and a check mark.
Lay each card out horizontally (icon beside the label) and put each section's title and hint on one line, trimming section and card padding so the whole wizard takes far less vertical space.
- Give each option its own tinted icon badge via a static color map, and restore a check mark for the selected state (the badge no longer carries it). - Render the recommended-docs list as inline NuxtLink rows instead of UPageList/UPageCard. - Realign the recommendation map with the reworked sections: map the moved 'agent' item, broaden the merged 'specific framework' option, and drop the now-dead keys.
… icons - Apply each item's accent color to the card's border/background/ring and its icon badge only when selected; unselected cards stay neutral gray. - Remove the corner check mark (color now signals selection). - Add a leading icon to every question heading.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a Getting Started page (
/guide/getting-started) with an interactive wizard for picking what kind of devtool you're building, then recommending a tailored reading list.localStorage, so a reader's answers survive a reload or a later visit.The wizard is a plain Vue component (
docs/app/components/global/GettingStartedWizard.vue) using Nuxt UI'sUCheckboxGroup/UPageCard/UPageList, embedded into the markdown page via the::getting-started-wizardMDC syntax. It lives undercomponents/global/because components used inside dynamically-rendered MDC content (outside the homepage's hardcoded component map) need Nuxt's global-component registration to resolve at runtime.Verified interactively (checkbox toggling, live recommendation updates, and localStorage persistence across reloads) against a local
nuxt devserver.This PR was created with the help of an agent.