Improve GettingStarted page (#11824)

[msynk]

closes #11824

Summary by CodeRabbit

• Documentation
  • Updated "Getting Started" page with improved visual hierarchy and card-based layout.
  • Reorganized installation instructions into clearer, step-focused sections.
  • Consolidated guidance on namespaces, styles, scripts, and cache busting into compact, hierarchical format.
  • Simplified content flow while maintaining feedback mechanism.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The GettingStartedPage.razor component has been restructured with updated metadata, reorganized content using card-based layouts, and consolidated instructional sections. The page now uses BitCard components to present installation and configuration steps hierarchically, replacing previous inline content blocks and code examples with summarized messaging.

Changes

Cohort / File(s)

Summary

Page Content Restructuring src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor

Updated page metadata (Title: "Getting Started"; Description: "Install and configure bit BlazorUI in your project"). Added @code block with cascading parameters. Wrapped content in page-container section with BitParams component. Replaced inline instructional content with card-based layout featuring BitCard sections for Install, Namespace, Styles and Scripts, and Cache busting. Consolidated code examples and removed verbose instruction blocks in favor of compact messaging. Reorganized guidance into hierarchical accordion-like structure while retaining FeedbackSection.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Single file change with straightforward content and layout reorganization
• No logic modifications or complex interactions to verify
• Review focus areas:
  • Verify cascading parameters structure is correctly initialized
  • Confirm card layout and section hierarchy displays as intended
  • Validate that all removal of code examples doesn't omit critical information
  • Check that BitParams component integrates properly with new layout

Poem

🐰 A page redesigned with cards so neat,
Getting started now looks so sweet,
From chaos to calm, content aligned,
Steps unfold in structure refined,
Welcome aboard with ease you'll greet! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improve GettingStarted page' directly summarizes the main change: improving the GettingStarted page layout and content structure.
Linked Issues check	✅ Passed	The pull request addresses both linked issue requirements: content text improvements (updated descriptions, consolidated messaging) and structure improvements (new card-based layout, reorganized sections).
Out of Scope Changes check	✅ Passed	All changes in the GettingStarted page component are directly aligned with the stated objectives of improving content text and structure; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor (1)

31-111: Consider wrapping standalone “Or” lines in BitText for consistency

Inside the “Install” card’s optional steps accordion (lines 77, 92, 107), the bare Or strings are not wrapped in BitText, unlike almost all other text on the page. For typography and spacing consistency, you can wrap them in BitText:

-                <CodeBox>dotnet add package Bit.BlazorUI.Extras</CodeBox>
-
-                Or
-
-                <CodeBox>Install-Package Bit.BlazorUI.Extras</CodeBox>
+                <CodeBox>dotnet add package Bit.BlazorUI.Extras</CodeBox>
+
+                <BitText>Or</BitText>
+
+                <CodeBox>Install-Package Bit.BlazorUI.Extras</CodeBox>

-                <CodeBox>dotnet add package Bit.BlazorUI.Assets</CodeBox>
-
-                Or
-
-                <CodeBox>Install-Package Bit.BlazorUI.Assets</CodeBox>
+                <CodeBox>dotnet add package Bit.BlazorUI.Assets</CodeBox>
+
+                <BitText>Or</BitText>
+
+                <CodeBox>Install-Package Bit.BlazorUI.Assets</CodeBox>

-                <CodeBox>dotnet add package Bit.BlazorUI.Icons</CodeBox>
-
-                Or
-
-                <CodeBox>Install-Package Bit.BlazorUI.Icons</CodeBox>
+                <CodeBox>dotnet add package Bit.BlazorUI.Icons</CodeBox>
+
+                <BitText>Or</BitText>
+
+                <CodeBox>Install-Package Bit.BlazorUI.Icons</CodeBox>

This keeps all textual content going through the same component pipeline.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 36e97fd and e92e67a.

📒 Files selected for processing (1)

• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build Bit.BlazorUI

🔇 Additional comments (4)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/GettingStartedPage.razor (4)

3-10: Centralized BitParams configuration looks good

Using _cascadingParams to push shared BitCard, BitText, and BitTag defaults through BitParams keeps the layout consistent and reduces repetition on this page.

---

12-27: Top-level layout and metadata restructuring is clear

PageOutlet metadata plus the new <section class="page-container"> and BitParams wrapper give the page a clean, hierarchical structure around the “Getting Started” heading without adding complexity.

---

115-125: Namespace step is concise and actionable

The “2. Namespace” card clearly points to _Imports.razor with an inline BitTag and a single CodeBox line; this is easy to follow and matches typical Blazor conventions.

---

129-175: Styles & Scripts card reads well and covers optional assets cleanly

The separation between required CSS/JS and the optional extras/assets/icons in the accordion is clear and keeps the main path simple while still exposing the advanced options.