feat: Adding homepage to Starlight docs #4250
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThis update integrates Tailwind CSS into the documentation site, customizes the site's header and branding, and restructures the splash page. It introduces new Astro components for the header and site title, updates configuration and dependencies for Tailwind support, applies global theming, and replaces the main index page with a new design. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant AstroApp
participant HeaderComponent
participant GitHubAPI
User->>Browser: Navigate to site
Browser->>AstroApp: Request index page
AstroApp->>HeaderComponent: Render header
HeaderComponent->>GitHubAPI: Fetch star count
GitHubAPI-->>HeaderComponent: Return star count
HeaderComponent-->>AstroApp: Rendered header with stars, logos, links
AstroApp-->>Browser: Serve complete page with Tailwind styles
Possibly related PRs
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
yhakbar
force-pushed
the
feat/adding-homepage
branch
from
62ee730 to
6d8aa03
Compare
yhakbar
force-pushed
the
feat/adding-homepage
branch
from
a742009 to
5295c4c
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (9)
docs-starlight/src/styles/global.css (1)
7-36: Theme customization looks good.The font choices and color mappings create a consistent design system. The use of Tailwind's color variables for the accent and gray scales allows for a cohesive theme across the documentation site.
Consider adding a comment about font availability - if these fonts aren't automatically loaded by Starlight, you might need to include them via a font provider or local files.
docs-starlight/src/layouts/BaseLayout.astro (1)
8-21: HTML structure follows best practices.The HTML structure is well-formed with appropriate meta tags. Consider the following improvements:
- Add a
<meta name="theme-color">for mobile browser theming- Consider adding Open Graph and Twitter card meta tags for better social sharing
<head> <meta charset="UTF-8" /> <meta name="description" content="Terragrunt Homepage" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="generator" content={Astro.generator} /> + <meta name="theme-color" content="#4f46e5" media="(prefers-color-scheme: light)"> + <meta name="theme-color" content="#4f46e5" media="(prefers-color-scheme: dark)"> + <meta property="og:title" content={title} /> + <meta property="og:description" content="Terragrunt Homepage" /> + <meta property="og:type" content="website" /> + <meta property="twitter:card" content="summary_large_image" /> <title>{title}</title> </head>docs-starlight/src/components/SiteTitle.astro (1)
19-20: Small typo in comment.The comment says "if a user configure both" but should say "if a user configures both".
- {/* Show light alternate if a user configure both light and dark logos. */} + {/* Show light alternate if a user configures both light and dark logos. */}docs-starlight/src/components/Header.astro (6)
39-41: Remove commented-out code.There's commented-out code that should be removed for cleaner maintenance.
<div class="header sl-flex"> - <!-- <div class="title-wrapper sl-flex"> --> <SiteTitle {...Astro.props} /> - <!-- </div> -->
48-52: Extract SVG icons to separate components.Multiple inline SVGs make the template harder to read and maintain. Consider extracting them to separate components or using an icon library.
For example, create a new component like
IconGitHub.astro:--- const { width = 20, height = 20 } = Astro.props; --- <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="currentColor"> <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/> </svg>Then update the template:
- <span class="github-icon"> - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> - </span> + <span class="github-icon"> + <IconGitHub /> + </span>Apply similar changes to other SVG icons in the file.
Also applies to: 65-67, 76-78
72-74: Move inline style to CSS.The inline style on the SVG should be moved to the CSS section.
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem;"> + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" class="support-icon">Then add to the CSS:
.support-icon { margin-right: 0.5rem; }
139-139: Remove commented-out CSS.There's a commented-out background property in the CSS that should be removed.
.pipeline-pill { display: flex; align-items: center; - /* background: rgba(167, 139, 250, 0.08); */ border-radius: 999px;
176-178: Use CSS variables for colors instead of hardcoded values.Hardcoded color values like
#7c3aedand#fffmake theme customization difficult and maintenance harder. Consider using CSS variables for consistent theming..support-btn { display: flex; align-items: center; - background: #7c3aed; - color: #fff; + background: var(--sl-color-accent); + color: var(--sl-color-white); border-radius: 999px;Apply similar changes to other hardcoded colors in the file to ensure consistency with the theming system.
113-133: Add documentation for complex grid calculation.The complex grid calculation for the header layout would benefit from clearer documentation to aid future maintenance.
.header { + /* + * This grid layout dynamically adjusts based on: + * 1. The sidebar width + * 2. The main content width + * 3. The TOC width (when present) + * + * The goal is to align the header elements with the content below + * while maintaining appropriate spacing. + */ --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x)); --__main-column-fr: calc( (
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
docs-starlight/bun.lockis excluded by!**/*.lockdocs-starlight/src/assets/gruntwork-logo-mark-black.svgis excluded by!**/*.svgdocs-starlight/src/assets/gruntwork-logo-mark-white.svgis excluded by!**/*.svgdocs-starlight/src/assets/horizontal-logo-dark.svgis excluded by!**/*.svgdocs-starlight/src/assets/horizontal-logo-light.svgis excluded by!**/*.svgdocs-starlight/src/assets/pipelines.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
docs-starlight/astro.config.mjs(3 hunks)docs-starlight/package.json(1 hunks)docs-starlight/src/components/Header.astro(1 hunks)docs-starlight/src/components/SiteTitle.astro(1 hunks)docs-starlight/src/content/docs/index.mdx(0 hunks)docs-starlight/src/layouts/BaseLayout.astro(1 hunks)docs-starlight/src/pages/index.astro(1 hunks)docs-starlight/src/styles/global.css(1 hunks)
💤 Files with no reviewable changes (1)
- docs-starlight/src/content/docs/index.mdx
🧰 Additional context used
📓 Path-based instructions (1)
`docs-starlight/**/*.astro`: Review the Astro code in the `docs-starlight` directory for quality and correctness. Make sure that the Astro code follows best practices and is easy t...
docs-starlight/**/*.astro: Review the Astro code in thedocs-starlightdirectory for quality and correctness. Make sure that the Astro code follows best practices and is easy to understand, maintain, and follows best practices. When possible, suggest improvements to the Astro code to make it better.
docs-starlight/src/layouts/BaseLayout.astrodocs-starlight/src/pages/index.astrodocs-starlight/src/components/SiteTitle.astrodocs-starlight/src/components/Header.astro
⏰ Context from checks skipped due to timeout of 90000ms (13)
- GitHub Check: Test (Windows)
- GitHub Check: Test (macos)
- GitHub Check: Test (Fixtures)
- GitHub Check: Test (ubuntu)
- GitHub Check: Build (linux/arm64)
- GitHub Check: Build (darwin/arm64)
- GitHub Check: Build (linux/amd64)
- GitHub Check: Build (windows/amd64)
- GitHub Check: Build (windows/386)
- GitHub Check: Build (darwin/amd64)
- GitHub Check: Build (linux/386)
- GitHub Check: build-and-test
- GitHub Check: Pull Request has non-contributor approval
🔇 Additional comments (11)
docs-starlight/package.json (1)
14-14: Package dependencies look well-structured.The addition of Tailwind CSS and related packages looks appropriate for adding styling to the Starlight docs. The version constraints with the caret (^) allow for compatible minor and patch updates, which is a good practice for dependencies.
Also applies to: 16-16, 22-23
docs-starlight/src/styles/global.css (1)
1-6: Layer structure follows best practices.The layer structure properly separates concerns and follows the recommended approach for integrating Tailwind with Starlight. The imports are organized in the correct order to ensure proper CSS cascade.
docs-starlight/src/layouts/BaseLayout.astro (1)
1-7: Clean component interface with proper TypeScript typing.The Props interface with the title property is well-defined and properly destructured from Astro.props.
docs-starlight/src/pages/index.astro (2)
1-8: Clean import structure with proper asset handling.The imports are well-organized, with clear naming for different logo variants and proper usage of the Astro Image component.
10-39: Hero configuration is well-structured and comprehensive.The hero section configuration provides all necessary elements for a compelling landing page. The action buttons provide clear navigation paths for different user needs.
docs-starlight/astro.config.mjs (4)
7-7: Tailwind plugin import looks good.The import statement for the Tailwind CSS Vite plugin follows the standard pattern.
81-85: Custom component configuration is well-structured.The configuration properly registers custom Starlight components for the Header and SiteTitle. The file paths are correctly specified relative to the project root.
87-89: Logo paths updated correctly.The logo paths are properly updated to use the new horizontal logo SVG files.
169-171: Vite configuration for Tailwind is correct.The Vite configuration correctly includes the Tailwind CSS plugin.
docs-starlight/src/components/SiteTitle.astro (1)
45-51: Well-structured image styling for consistent logo presentation.The image styling ensures consistent logo display while maintaining proper aspect ratios with
object-fit: contain. This is a good practice for responsive logos that may have different dimensions.docs-starlight/src/components/Header.astro (1)
105-134: Well-implemented responsive header layout.The header layout uses a sophisticated and flexible grid system that adapts to various screen sizes and content configurations. It properly accounts for the sidebar, main content, and table of contents widths, which helps maintain a consistent layout across different pages.
| <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 mt-auto"> | ||
| <div class="flex items-center gap-[0.5em]"> | ||
| <Image src={GruntworkLogoBlack} alt="Gruntwork Logo" class="w-6 h-6 dark:sl-hidden" /> | ||
| <Image src={GruntworkLogoWhite} alt="Gruntwork Logo" class="w-6 h-6 light:sl-hidden" /> | ||
| <span> From the DevOps experts at </span> | ||
| </div> | ||
| <a href="https://gruntwork.io" class="text-blue-600 dark:text-blue-400 no-underline hover:underline">Gruntwork</a> | ||
| </footer> | ||
| </div> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Footer design could be improved for accessibility.
The footer structure is good, but consider these improvements:
- The text contrast ratio might be insufficient for accessibility in dark mode
- The HTML structure has some inconsistent spacing and could be improved
- <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 mt-auto">
+ <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 mt-auto">
<div class="flex items-center gap-[0.5em]">
<Image src={GruntworkLogoBlack} alt="Gruntwork Logo" class="w-6 h-6 dark:sl-hidden" />
<Image src={GruntworkLogoWhite} alt="Gruntwork Logo" class="w-6 h-6 light:sl-hidden" />
- <span> From the DevOps experts at </span>
+ <span>From the DevOps experts at</span>
</div>
- <a href="https://gruntwork.io" class="text-blue-600 dark:text-blue-400 no-underline hover:underline">Gruntwork</a>
+ <a href="https://gruntwork.io" class="ml-1 text-blue-700 dark:text-blue-300 no-underline hover:underline">Gruntwork</a>
</footer>🏁 Script executed:
#!/bin/bash
# Check if there are any other components using similar footer styling for consistency
fd -e astro | xargs grep -l "footer" | xargs grep -A 10 -B 10 "footer" 2>/dev/nullLength of output: 750
Improve footer accessibility and spacing
The footer is currently the only instance in the codebase, so let’s focus on making it fully accessible and tidy:
• Update text colors to meet a minimum 4.5:1 contrast ratio in both light and dark modes
• Remove hard-coded non-breaking spaces and use Tailwind’s margin utilities for consistent spacing
File: docs-starlight/src/pages/index.astro (around lines 40–48)
- <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 mt-auto">
+ <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 mt-auto">
<div class="flex items-center gap-[0.5em]">
<Image src={GruntworkLogoBlack} alt="Gruntwork Logo" class="w-6 h-6 dark:sl-hidden" />
<Image src={GruntworkLogoWhite} alt="Gruntwork Logo" class="w-6 h-6 light:sl-hidden" />
- <span> From the DevOps experts at </span>
+ <span>From the DevOps experts at</span>
</div>
- <a href="https://gruntwork.io" class="text-blue-600 dark:text-blue-400 no-underline hover:underline">Gruntwork</a>
+ <a href="https://gruntwork.io" class="ml-1 text-blue-700 dark:text-blue-300 no-underline hover:underline">Gruntwork</a>
</footer>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 mt-auto"> | |
| <div class="flex items-center gap-[0.5em]"> | |
| <Image src={GruntworkLogoBlack} alt="Gruntwork Logo" class="w-6 h-6 dark:sl-hidden" /> | |
| <Image src={GruntworkLogoWhite} alt="Gruntwork Logo" class="w-6 h-6 light:sl-hidden" /> | |
| <span> From the DevOps experts at </span> | |
| </div> | |
| <a href="https://gruntwork.io" class="text-blue-600 dark:text-blue-400 no-underline hover:underline">Gruntwork</a> | |
| </footer> | |
| </div> | |
| <footer class="flex items-center justify-center py-6 px-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 mt-auto"> | |
| <div class="flex items-center gap-[0.5em]"> | |
| <Image src={GruntworkLogoBlack} alt="Gruntwork Logo" class="w-6 h-6 dark:sl-hidden" /> | |
| <Image src={GruntworkLogoWhite} alt="Gruntwork Logo" class="w-6 h-6 light:sl-hidden" /> | |
| <span>From the DevOps experts at</span> | |
| </div> | |
| <a href="https://gruntwork.io" class="ml-1 text-blue-700 dark:text-blue-300 no-underline hover:underline">Gruntwork</a> | |
| </footer> |
| @media (max-width: 768px) { | ||
| img.dark-logo { | ||
| content: url('/src/assets/logo-dark.svg'); | ||
| } | ||
|
|
||
| img.light-logo { | ||
| content: url('/src/assets/logo-light.svg'); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Hardcoded asset paths in media query could be problematic.
The media query overrides the image sources with hardcoded paths. This approach is brittle and might break if the asset structure changes or during build processes that transform asset paths.
Consider using a more maintainable approach such as:
- Using imported assets through Astro's asset handling system
- Using CSS variables that can be defined at the theme level
- Creating smaller logo variants and importing them properly
@media (max-width: 768px) {
- img.dark-logo {
- content: url('/src/assets/logo-dark.svg');
- }
-
- img.light-logo {
- content: url('/src/assets/logo-light.svg');
- }
+ /* Use a different approach such as:
+ .site-title {
+ --mobile-logo-width: 120px;
+ }
+ img {
+ max-width: var(--mobile-logo-width);
+ }
+ */
}Committable suggestion skipped: line range outside the PR's diff.
| let starCountDisplay = '8.6k'; | ||
|
|
||
| try { | ||
| const response = await fetch('https://api.github.com/repos/gruntwork-io/terragrunt'); | ||
| if (response.ok) { | ||
| const data = await response.json(); | ||
| const stars = data.stargazers_count; | ||
| if (typeof stars === 'number') { | ||
| starCountDisplay = (stars / 1000).toFixed(1) + 'k'; | ||
| } | ||
| } else { | ||
| console.error('Failed to fetch GitHub stars:', response.status, await response.text()); | ||
| } | ||
| } catch (error) { | ||
| console.error('Error fetching GitHub stars:', error); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
GitHub star count fetching could lead to rate limiting.
The current implementation fetches GitHub stars at build time without caching. This approach has several issues:
- It may hit GitHub API rate limits if the site is rebuilt frequently
- The star count becomes stale after build
- The hardcoded fallback value (8.6k) will need manual updates
Consider these alternatives:
- Use a client-side script to fetch the star count on page load
- Add build-time caching with a longer expiry
- Use a GitHub webhook to trigger rebuilds when star count changes significantly
- let starCountDisplay = '8.6k';
-
- try {
- const response = await fetch('https://api.github.com/repos/gruntwork-io/terragrunt');
- if (response.ok) {
- const data = await response.json();
- const stars = data.stargazers_count;
- if (typeof stars === 'number') {
- starCountDisplay = (stars / 1000).toFixed(1) + 'k';
- }
- } else {
- console.error('Failed to fetch GitHub stars:', response.status, await response.text());
- }
- } catch (error) {
- console.error('Error fetching GitHub stars:', error);
- }
+ // Client-side approach (recommended)
+ const starCountDisplay = '8.6k'; // Default fallback shown during hydrationThen add a client-side script element:
<script>
// Fetch star count client-side to avoid build-time rate limiting
async function updateStarCount() {
try {
const response = await fetch('https://api.github.com/repos/gruntwork-io/terragrunt');
if (response.ok) {
const data = await response.json();
if (typeof data.stargazers_count === 'number') {
const formatted = (data.stargazers_count / 1000).toFixed(1) + 'k';
document.querySelector('.github-count').textContent = formatted;
}
}
} catch (error) {
console.error('Error fetching GitHub stars:', error);
}
}
updateStarCount();
</script>
Description
Adds homepage to the Starlight docs.
TODOs
Read the Gruntwork contribution guidelines.
Release Notes (draft)
Added homepage to the Starlight docs.
Summary by CodeRabbit
New Features
Bug Fixes
Chores