Front-end for Terragrunt Project #4494
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughA comprehensive redesign introduces a new landing page structure for the documentation site. Multiple custom Astro components are added, including navigation, hero, testimonials, feature sections, and footer. Supporting assets, styles, and utility scripts are included. The global CSS and TypeScript configuration are updated for new branding, theming, and cleaner imports. The previous header and page implementation are replaced. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Navbar
participant Hero
participant FeaturedBrands
participant OrchestrateSection
participant ConsistencySection
participant DrySection
participant Testimonials
participant PetAdvertise
participant Footer
User->>Navbar: Interacts with navigation/search/actions
User->>Hero: Views hero section and CTAs
User->>FeaturedBrands: Sees scrolling brand logos
User->>OrchestrateSection: Reads orchestrate features
User->>ConsistencySection: Reads consistency features
User->>DrySection: Reads DRY features
User->>Testimonials: Browses testimonials (carousel/grid)
User->>PetAdvertise: Views Gruntwork subscription promotion
User->>Footer: Interacts with newsletter/tools/copyright
Suggested labels
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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. 🪧 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
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 36
🧹 Nitpick comments (16)
docs-starlight/tree-l2.ps1 (1)
14-14: Minor: use-geto avoid an unnecessary extra recursion levelChanging the guard to
-gestops the function before making the extra call atDepth == MaxDepth + 1, saving a tiny bit of work:-if ($Depth -gt $MaxDepth) { return } +if ($Depth -ge $MaxDepth) { return }docs-starlight/src/components/dv-Eyebrown.astro (3)
1-1: Probable typo in component name – considerdv-Eyebrowinstead.“Eyebrown” looks like a misspelling of “Eyebrow”. Renaming early avoids propagating the typo to imports across the codebase.
3-3: Provide a fallback value fortextprop.If the caller forgets the prop you’ll render an empty paragraph. Add a default to keep the markup clean.
-const { text } = Astro.props; +const { text = '' } = Astro.props;
6-8: Prefer<span>for inline “eyebrow” text to avoid block-level nesting overhead.The wrapper already sets the desired block-level box; using
<span>prevents extra vertical spacing in some browsers.- <p>{text}</p> + <span>{text}</span>docs-starlight/src/components/dv-Divider.astro (1)
8-12: Decorative image should have emptyalttext for accessibility.Screen readers don’t need to announce a purely visual divider.
- <Image - src={PatternDivider} - alt="Pattern Divider" + <Image + src={PatternDivider} + alt="" class="absolute inset-0 w-full h-full object-cover" />docs-starlight/src/components/dv-FeaturedBrands.astro (1)
31-37: Improve alt text for logos to meet accessibility guidelines.“Logo Brand X” gives no information to assistive technology. Either use the real company names or mark decorative images with empty alt text if the surrounding heading already conveys the context.
-<Image src={LogoBrand1} alt="Logo Brand 1" class="h-8 flex-shrink-0" /> +<Image src={LogoBrand1} alt="Company A logo" class="h-8 flex-shrink-0" />Repeat for the other logos.
docs-starlight/src/components/dv-ConsistencySection.astro (1)
1-9: Consider making content configurable and add TypeScript interface.The component has hardcoded content that could be made configurable through props. Also consider adding TypeScript definitions.
--- import '@styles/global.css'; import { Image } from 'astro:assets'; import Eyebrown from '@components/dv-Eyebrown.astro'; import Card from '@components/dv-Card.astro'; import PatternDotsRight from '@assets/pattern-dots-right.svg'; + +interface Props { + eyebrownText?: string; + title?: string; + highlightedTitle?: string; +} + +const { + eyebrownText = "CONSISTENCY", + title = "Codify", + highlightedTitle = "Tribal" +} = Astro.props as Props; ---docs-starlight/src/components/dv-Hero.astro (2)
1-12: Add TypeScript interface for better type safety.Consider adding TypeScript definitions to improve type safety and developer experience, especially if you plan to make the content configurable.
--- import '@styles/global.css'; import { Image } from 'astro:assets'; import IconLabel from '@components/dv-IconButton.astro'; import Terminal from '@components/dv-Terminal.astro'; import OpentofuIcon from '@assets/icon-opentofu.png'; import TerraformIcon from '@assets/icon-terraform.png'; import MobileHeroBackground from '@assets/hero-bg.png'; import TerragruntLogo from '@assets/logo-light.svg'; import HeroCompleteBackground from '@assets/hero-bg-1440.png'; + +interface Props { + title?: string; + subtitle?: string; + quickStartHref?: string; + docsHref?: string; +} + +const { + title = "The Open Source IaC Orchestrator Platform Teams Trust", + subtitle = "Organize and speed up your Infrastructure as Code, with the #1 IaC Orchestrator", + quickStartHref = "#", + docsHref = "#" +} = Astro.props as Props; ---
34-34: Consider making the heading text configurable.The heading text is hardcoded and contains line breaks that might not work well on all screen sizes. Consider making it configurable and using responsive typography.
- <h1 class="text-[42px] md:text-[64px] text-white leading-18">The Open Source<br>IaC Orchestrator<br>Platform Teams Trust</h1> + <h1 class="text-[42px] md:text-[64px] text-white leading-tight"> + {title.split(' ').map((word, index, array) => ( + <> + {word} + {(index + 1) % 3 === 0 && index < array.length - 1 ? <br /> : ' '} + </> + ))} + </h1>This approach provides more flexibility for different title lengths while maintaining the visual layout.
docs-starlight/src/components/dv-PetAdvertise.astro (2)
13-17: Review complex absolute positioning for responsiveness.The pet image uses complex responsive positioning with multiple breakpoint overrides. This could be fragile across different screen sizes and devices.
Consider simplifying the positioning logic or using CSS Grid/Flexbox for more predictable layouts:
-class="absolute -bottom-24 md:-bottom-20 lg:-bottom-26 xl:-bottom-8 right-2.5 md:-right-4 lg:right-5 xl:-right-20 z-20 pointer-events-none select-none w-40 md:w-52 xl:w-60 h-auto" +class="absolute -bottom-20 right-0 z-20 pointer-events-none select-none w-40 md:w-52 xl:w-60 h-auto transform translate-x-1/4"
20-24: Optimize background pattern image positioning.The background pattern uses extreme negative transforms which might cause rendering issues or performance problems.
Consider using CSS background properties or a more predictable positioning approach:
-class="absolute bottom-68 md:bottom-0 transform -translate-x-36 lg:-translate-x-10 xl:-translate-x-40 min-w-[100vw] h-auto max-w-none z-0 pointer-events-none select-none" +class="absolute inset-0 w-full h-full object-cover object-left z-0 pointer-events-none select-none opacity-30"docs-starlight/src/components/dv-Footer.astro (1)
15-16: Improve text contrast and structure for newsletter description.The newsletter description uses gray text which may have insufficient contrast on the dark background.
Consider improving contrast and semantic structure:
- <p class="text-white w-full md:flex-1"> - Subscribe to newsletter <span class="text-[var(--color-gray-1)]">to hear about latest updates, features and innovations in Terragrunt</span> - </p> + <div class="text-white w-full md:flex-1"> + <p class="font-semibold">Subscribe to newsletter</p> + <p id="email-description" class="text-gray-300 text-sm">Get the latest updates, features and innovations in Terragrunt</p> + </div>docs-starlight/src/pages/index.astro (1)
26-41: Consider simplifying complex nested layout structure.The layout has deeply nested div structures with complex responsive classes that might be hard to maintain.
Consider using CSS Grid for cleaner layout management:
-<div class="lg:px-8 xl:px-24 2xl:px-76"> - <div class="flex flex-col lg:border-l-1 lg:border-r-1 lg:border-gray-3"> +<main class="container mx-auto max-w-7xl px-4 lg:px-8"> + <div class="flex flex-col lg:border-x border-gray-3"> <FeaturedBrands /> - <div class="flex flex-col gap-12 md:gap-44"> + <section class="flex flex-col gap-12 md:gap-44" aria-label="Main content sections"> <OrchestrateSection /> <ConsistencySection /> <DrySection /> <Testimonials /> - </div> - <!-- Content in Different Grid Layouts (x4) --> - <div class="flex flex-col gap-44"> + </section> + <section class="flex flex-col gap-44" aria-label="Additional content"> <PetAdvertise /> <Footer /> - </div> + </section> </div> -</div> +</main>docs-starlight/src/components/dv-Testimonials.astro (2)
50-53: Use CSS custom properties for gradient colors.The gradient overlays use hardcoded colors that should align with the design system variables.
- <div class="pointer-events-none absolute top-0 w-full h-[174px] z-10 bg-gradient-to-b from-[#FAFAFA] to-transparent"></div> + <div class="pointer-events-none absolute top-0 w-full h-[174px] z-10 bg-gradient-to-b from-white to-transparent"></div> - <div class="pointer-events-none absolute bottom-0 w-full h-[174px] z-10 bg-gradient-to-t from-[#FAFAFA] to-transparent"></div> + <div class="pointer-events-none absolute bottom-0 w-full h-[174px] z-10 bg-gradient-to-t from-white to-transparent"></div>
36-44: Implement functional mobile carousel indicators.The indicator dots are static and don't reflect actual scroll position or provide navigation functionality.
The mobile testimonial section needs scroll functionality and interactive indicators. Would you like me to help implement a working carousel with proper scroll behavior and active state management?
docs-starlight/src/styles/global.css (1)
1-5: Remove commented code.The commented import statements at the top should be removed to keep the codebase clean.
-/* @layer base, starlight, theme, components, utilities; */ - -/* @import '@astrojs/starlight-tailwind'; */ -/* @import 'tailwindcss/theme.css' layer(theme); */ -/* @import 'tailwindcss/utilities.css' layer(utilities); */
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (32)
docs-starlight/public/fonts/GeistMono-VariableFont_wght.ttfis excluded by!**/*.ttfdocs-starlight/public/fonts/Inter-Italic-VariableFont_opsz,wght.ttfis excluded by!**/*.ttfdocs-starlight/public/fonts/Inter-VariableFont_opsz,wght.ttfis excluded by!**/*.ttfdocs-starlight/src/assets/gruntwork-logo.pngis excluded by!**/*.pngdocs-starlight/src/assets/headset-icon.svgis excluded by!**/*.svgdocs-starlight/src/assets/hero-bg-1440.pngis excluded by!**/*.pngdocs-starlight/src/assets/hero-bg.pngis excluded by!**/*.pngdocs-starlight/src/assets/icon-boilerplate.svgis excluded by!**/*.svgdocs-starlight/src/assets/icon-circle-arrow.svgis excluded by!**/*.svgdocs-starlight/src/assets/icon-cloudnuke.svgis excluded by!**/*.svgdocs-starlight/src/assets/icon-gitxargs.svgis excluded by!**/*.svgdocs-starlight/src/assets/icon-opentofu.pngis excluded by!**/*.pngdocs-starlight/src/assets/icon-terraform.pngis excluded by!**/*.pngdocs-starlight/src/assets/icon-terratest.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-1.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-10.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-11.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-2.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-3.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-4.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-5.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-6.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-7.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-8.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-9.svgis excluded by!**/*.svgdocs-starlight/src/assets/menu-icon.svgis excluded by!**/*.svgdocs-starlight/src/assets/pattern-div.svgis excluded by!**/*.svgdocs-starlight/src/assets/pattern-dots-right.svgis excluded by!**/*.svgdocs-starlight/src/assets/pattern-dots.pngis excluded by!**/*.pngdocs-starlight/src/assets/pattern-pet-background.svgis excluded by!**/*.svgdocs-starlight/src/assets/pet-terragrunt.svgis excluded by!**/*.svgdocs-starlight/src/assets/pipelines.svgis excluded by!**/*.svg
📒 Files selected for processing (20)
docs-starlight/src/components/dv-Card.astro(1 hunks)docs-starlight/src/components/dv-ConsistencySection.astro(1 hunks)docs-starlight/src/components/dv-Divider.astro(1 hunks)docs-starlight/src/components/dv-DrySection.astro(1 hunks)docs-starlight/src/components/dv-Eyebrown.astro(1 hunks)docs-starlight/src/components/dv-FeaturedBrands.astro(1 hunks)docs-starlight/src/components/dv-Footer.astro(1 hunks)docs-starlight/src/components/dv-Hero.astro(1 hunks)docs-starlight/src/components/dv-IconButton.astro(1 hunks)docs-starlight/src/components/dv-Navbar.astro(1 hunks)docs-starlight/src/components/dv-OpenSourceCard.astro(1 hunks)docs-starlight/src/components/dv-OrchestrateSection.astro(1 hunks)docs-starlight/src/components/dv-PetAdvertise.astro(1 hunks)docs-starlight/src/components/dv-Terminal.astro(1 hunks)docs-starlight/src/components/dv-TestimonialCard.astro(1 hunks)docs-starlight/src/components/dv-Testimonials.astro(1 hunks)docs-starlight/src/pages/index.astro(1 hunks)docs-starlight/src/styles/global.css(1 hunks)docs-starlight/tree-l2.ps1(1 hunks)docs-starlight/tsconfig.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`docs-starlight/**/*.astro`: Review the Astro code in the `docs-starlight` direc...
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.
⚙️ Source: CodeRabbit Configuration File
List of files the instruction was applied to:
docs-starlight/src/components/dv-Eyebrown.astrodocs-starlight/src/components/dv-Divider.astrodocs-starlight/src/components/dv-FeaturedBrands.astrodocs-starlight/src/components/dv-IconButton.astrodocs-starlight/src/components/dv-Card.astrodocs-starlight/src/components/dv-TestimonialCard.astrodocs-starlight/src/components/dv-OrchestrateSection.astrodocs-starlight/src/components/dv-DrySection.astrodocs-starlight/src/components/dv-Testimonials.astrodocs-starlight/src/components/dv-OpenSourceCard.astrodocs-starlight/src/components/dv-Navbar.astrodocs-starlight/src/components/dv-ConsistencySection.astrodocs-starlight/src/pages/index.astrodocs-starlight/src/components/dv-Footer.astrodocs-starlight/src/components/dv-PetAdvertise.astrodocs-starlight/src/components/dv-Terminal.astrodocs-starlight/src/components/dv-Hero.astro
🔇 Additional comments (3)
docs-starlight/tsconfig.json (1)
13-24: Path aliases look good.The new
@assets/*and@styles/*mappings align with the folder structure and will keep import statements concise.docs-starlight/src/components/dv-TestimonialCard.astro (1)
16-27: Add conditional rendering for logo prop.The logo prop is optional but there's no validation before using it in the Image component, which could cause runtime errors if the logo is undefined.
<div class={`p-6 flex-1 border-4 border-solid rounded-lg ${bgClass} ${borderClass} ${customClass}`}> <div class="flex flex-col gap-8"> - {logo && <Image src={logo} alt="Logo Brand" />} + {logo && <Image src={logo} alt="Logo Brand" class="max-w-24 h-auto" />} <div class="flex flex-col gap-4"> <p class={`font-sand text-sm whitespace-pre-line ${textPrimary}`}>{content}</p> <div class="flex flex-col"> <p class={`font-sand text-sm ${textSecondary}`}>{author}</p> <p class={`font-sand text-xs ${jobText}`}>{job}</p> </div> </div> </div> </div>Consider adding size constraints to the logo image to prevent layout issues.
Likely an incorrect or invalid review comment.
docs-starlight/src/components/dv-OrchestrateSection.astro (1)
2-6: Component imports verifiedAll imported components are present under
docs-starlight/src/components/—no missing dependencies found. Good use of the@aliases for maintainability.• dv-Card.astro
• dv-Divider.astro
• dv-Eyebrown.astroNo further action required.
|
Looking good overall! I went through and added comments here section by section, as well as a few general notes. General
Header
Hero
Install
Orchestrate
Consistency
Dry
Testimonials
Supercharge
Footer
|
|
@Daniicecream is attempting to deploy a commit to the Gruntwork Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
docs-starlight/src/styles/global.css (2)
45-47: Missing semicolon still unresolvedLine 46 still lacks a terminating semicolon, breaking the whole declaration list.
- --color-dark-blue-1: #0F0934 + --color-dark-blue-1: #0F0934;
116-118: Add keyboard-visible focus styles for buttonsOnly a pointer cursor is set on hover; there are still no
:focus/:focus-visiblestyles, which harms accessibility.(See previous comment thread for a concrete snippet.)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs-starlight/src/components/dv-ConsistencySection.astro(1 hunks)docs-starlight/src/components/dv-Hero.astro(1 hunks)docs-starlight/src/components/dv-Navbar.astro(1 hunks)docs-starlight/src/components/dv-PetAdvertise.astro(1 hunks)docs-starlight/src/pages/index.astro(1 hunks)docs-starlight/src/styles/global.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- docs-starlight/src/components/dv-Hero.astro
- docs-starlight/src/components/dv-PetAdvertise.astro
- docs-starlight/src/components/dv-Navbar.astro
- docs-starlight/src/components/dv-ConsistencySection.astro
- docs-starlight/src/pages/index.astro
🧰 Additional context used
🪛 Biome (1.9.4)
docs-starlight/src/styles/global.css
[error] 49-49: Unexpected value or character.
Expected one of:
(parse)
gruntwork-io#4494 (comment) Note: - Some images I did the best I could searching them online, however I couldn't find all of them I used the ones from the figma file (the one provided hen I asked for the assets) - Didn't connect the newsletter. I was responsible only for the design. Appreciate your comprehension.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (8)
docs-starlight/src/styles/global.css (1)
31-47: Replace invalid@themeblock with standard CSS syntax.The
@themeat-rule is not valid CSS and will cause all contained variables to be ignored by browsers. This is a critical issue that breaks the color system.-@theme { +:root { /* Fonts */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; /* Colors Landing Page */ --color-accent: #4F2FD0; --color-accent-1: #7d5DFF; --color-accent-2: #87E0E1; --color-accent-3: #BFA6F2; --color-bg-dark: #0F1731; --color-stroke-dark: #2E375A; --color-gray-1: #A0A1AC; --color-gray-2: #6B6C7A; --color-gray-3: #DBDBDB; - --color-dark-blue-1: #0F0934 + --color-dark-blue-1: #0F0934; }docs-starlight/src/components/dv-Testimonials.astro (2)
124-129: Remove duplicate testimonial content.The testimonial from Yehor Fedorov is duplicated exactly. This creates unnecessary repetition and may confuse users.
<TestimonialCard class="shadow-[0_0_0_2px_white]" content={`Terragrunt didn't just handle complexity; it actively simplified the process of writing and managing IaC, thanks to its emphasis on modularity.\n\nTerragrunt is not just a tool for complex projects, but a game-changer in simplifying and optimizing the way we approach Infrastructure as Code.`} author="Yehor Fedorov" job="Senior DevOps Engineer" /> - <TestimonialCard - class="shadow-[0_0_0_2px_white]" - content={`Terragrunt didn't just handle complexity; it actively simplified the process of writing and managing IaC, thanks to its emphasis on modularity.\n\nTerragrunt is not just a tool for complex projects, but a game-changer in simplifying and optimizing the way we approach Infrastructure as Code.`} - author="Yehor Fedorov" - job="Senior DevOps Engineer" - />
155-161: Remove duplicate testimonial content.The testimonial from Dallas Slaughter is also duplicated exactly.
<TestimonialCard class="shadow-[0_0_0_2px_white]" logo={LogoBrand11} content="Gruntwork's Terragrunt makes managing our infrastructure across providers and environments consistent, safe, and easy to understand." author="Dallas Slaughter" job="Founding Engineer" /> - <TestimonialCard - class="shadow-[0_0_0_2px_white]" - logo={LogoBrand11} - content="Gruntwork's Terragrunt makes managing our infrastructure across providers and environments consistent, safe, and easy to understand." - author="Dallas Slaughter" - job="Founding Engineer" - />docs-starlight/src/pages/index.astro (2)
17-17: Improve page metadata for SEO.The page still uses generic "Astro description" which limits SEO effectiveness.
- <meta name="description" content="Astro description" /> + <meta name="description" content="Terragrunt helps you keep your Terraform code DRY, work with multiple Terraform modules, and manage remote state." />
23-48: Add semantic HTML structure for accessibility.The page lacks proper semantic landmarks which are important for accessibility and screen readers.
<body class="flex flex-col min-h-screen bg-[#FAFAFA]"> - <div class="fixed top-0 z-50"> + <header class="fixed top-0 z-50"> <Navbar /> - </div> - <div class="absolute top-[150px] md:top-[84px]"> + </header> + <main class="absolute top-[150px] md:top-[84px]"> <Hero /> <!-- rest of content --> - </div> + </main> </body>docs-starlight/src/components/dv-Terminal.astro (3)
78-79: Extract duplicated commands to constants.The installation commands are duplicated between display and script variables, making maintenance difficult.
+const MACOS_COMMAND = "curl -fsSL https://terragrunt.io/install | bash"; +const WINDOWS_COMMAND = "iwr -useb https://terragrunt.io/install.ps1 | iex"; + - let currentCommand = "curl -fsSL https://terragrunt.io/install | bash"; - let winCommand = "iwr -useb https://terragrunt.io/install.ps1 | iex"; + let currentCommand = MACOS_COMMAND; + let winCommand = WINDOWS_COMMAND;
17-27: Add proper ARIA attributes for tab accessibility.The tab interface lacks proper ARIA roles and keyboard navigation support for screen readers.
- <div class="flex gap-2 px-1.5 pt-1.5"> - <div id="tab-macos" class="tab transition .25s ease-in-out active-tab">MacOS/Linux</div> - <div id="tab-windows" class="tab transition .25s ease-in-out">Windows</div> + <div class="flex gap-2 px-1.5 pt-1.5" role="tablist" aria-label="Installation options"> + <button id="tab-macos" class="tab transition .25s ease-in-out active-tab" role="tab" aria-selected="true" tabindex="0">MacOS/Linux</button> + <button id="tab-windows" class="tab transition .25s ease-in-out" role="tab" aria-selected="false" tabindex="-1">Windows</button>
97-106: Add error handling for clipboard API.The clipboard functionality lacks error handling and browser compatibility checks.
copyBtn.addEventListener("click", () => { - navigator.clipboard.writeText(currentCommand).then(() => { - copyIcon.classList.add("hidden"); - checkIcon.classList.remove("hidden"); - setTimeout(() => { - copyIcon.classList.remove("hidden"); - checkIcon.classList.add("hidden"); - }, 2000); - }); + if (navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard.writeText(currentCommand).then(() => { + copyIcon.classList.add("hidden"); + checkIcon.classList.remove("hidden"); + setTimeout(() => { + copyIcon.classList.remove("hidden"); + checkIcon.classList.add("hidden"); + }, 2000); + }).catch((err) => { + console.error('Failed to copy text: ', err); + }); + } else { + console.warn('Clipboard API not supported'); + } });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
docs-starlight/src/assets/gruntwork-logo.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-10.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-11.pngis excluded by!**/*.pngdocs-starlight/src/assets/logo-brand-8.svgis excluded by!**/*.svgdocs-starlight/src/assets/logo-brand-9.svgis excluded by!**/*.svgdocs-starlight/src/assets/opentofu-logo.svgis excluded by!**/*.svgdocs-starlight/src/assets/pattern-div.svgis excluded by!**/*.svgdocs-starlight/src/assets/terraform-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
docs-starlight/src/components/dv-Card.astro(1 hunks)docs-starlight/src/components/dv-ConsistencySection.astro(1 hunks)docs-starlight/src/components/dv-Divider.astro(1 hunks)docs-starlight/src/components/dv-DrySection.astro(1 hunks)docs-starlight/src/components/dv-Eyebrown.astro(1 hunks)docs-starlight/src/components/dv-FeaturedBrands.astro(1 hunks)docs-starlight/src/components/dv-Footer.astro(1 hunks)docs-starlight/src/components/dv-Hero.astro(1 hunks)docs-starlight/src/components/dv-IconButton.astro(1 hunks)docs-starlight/src/components/dv-Navbar.astro(1 hunks)docs-starlight/src/components/dv-OpenSourceCard.astro(1 hunks)docs-starlight/src/components/dv-OrchestrateSection.astro(1 hunks)docs-starlight/src/components/dv-PetAdvertise.astro(1 hunks)docs-starlight/src/components/dv-Terminal.astro(1 hunks)docs-starlight/src/components/dv-TestimonialCard.astro(1 hunks)docs-starlight/src/components/dv-Testimonials.astro(1 hunks)docs-starlight/src/pages/index-og.astro(1 hunks)docs-starlight/src/pages/index.astro(1 hunks)docs-starlight/src/styles/global.css(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- docs-starlight/src/pages/index-og.astro
- docs-starlight/src/components/dv-ConsistencySection.astro
🚧 Files skipped from review as they are similar to previous changes (12)
- docs-starlight/src/components/dv-Eyebrown.astro
- docs-starlight/src/components/dv-FeaturedBrands.astro
- docs-starlight/src/components/dv-Navbar.astro
- docs-starlight/src/components/dv-OpenSourceCard.astro
- docs-starlight/src/components/dv-OrchestrateSection.astro
- docs-starlight/src/components/dv-Divider.astro
- docs-starlight/src/components/dv-Card.astro
- docs-starlight/src/components/dv-Footer.astro
- docs-starlight/src/components/dv-Hero.astro
- docs-starlight/src/components/dv-DrySection.astro
- docs-starlight/src/components/dv-PetAdvertise.astro
- docs-starlight/src/components/dv-TestimonialCard.astro
🧰 Additional context used
📓 Path-based instructions (1)
`docs-starlight/**/*.astro`: Review the Astro code in the `docs-starlight` direc...
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.
⚙️ Source: CodeRabbit Configuration File
List of files the instruction was applied to:
docs-starlight/src/components/dv-IconButton.astrodocs-starlight/src/components/dv-Testimonials.astrodocs-starlight/src/pages/index.astrodocs-starlight/src/components/dv-Terminal.astro
🔇 Additional comments (1)
docs-starlight/src/components/dv-IconButton.astro (1)
5-10: Great improvements with TypeScript interface and prop handling.The component now properly defines prop types and handles the configurable
eagerloading attribute as requested in previous reviews.
| color: white; | ||
| font-family: var(--font-sans); | ||
| font-weight: 400; | ||
| font-size: 14px; | ||
| text-decoration: none; | ||
| background-color: var(--color-accent-1); | ||
| padding: 10px 24px; | ||
| border-radius: 8px; | ||
| box-shadow: 0px 0px 15px 0px rgba(137, 107, 255, 0.30), | ||
| 0px 0px 1px 4px rgba(52, 49, 27, 0.22); | ||
| } | ||
|
|
||
| .secondary-button { | ||
| color: white; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use CSS variables for consistency instead of hardcoded colors.
The button styles use hardcoded "white" instead of CSS variables, which reduces maintainability and theme consistency.
.primary-button {
- color: white;
+ color: var(--sl-color-white);
font-family: var(--font-sans);
/* ... */
}
.secondary-button {
- color: white;
+ color: var(--sl-color-white);
font-family: var(--font-sans);
/* ... */
}📝 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.
| color: white; | |
| font-family: var(--font-sans); | |
| font-weight: 400; | |
| font-size: 14px; | |
| text-decoration: none; | |
| background-color: var(--color-accent-1); | |
| padding: 10px 24px; | |
| border-radius: 8px; | |
| box-shadow: 0px 0px 15px 0px rgba(137, 107, 255, 0.30), | |
| 0px 0px 1px 4px rgba(52, 49, 27, 0.22); | |
| } | |
| .secondary-button { | |
| color: white; | |
| .primary-button { | |
| color: var(--sl-color-white); | |
| font-family: var(--font-sans); | |
| font-weight: 400; | |
| font-size: 14px; | |
| text-decoration: none; | |
| background-color: var(--color-accent-1); | |
| padding: 10px 24px; | |
| border-radius: 8px; | |
| box-shadow: 0px 0px 15px 0px rgba(137, 107, 255, 0.30), | |
| 0px 0px 1px 4px rgba(52, 49, 27, 0.22); | |
| } | |
| .secondary-button { | |
| color: var(--sl-color-white); | |
| font-family: var(--font-sans); | |
| /* ...other existing rules... */ | |
| } |
🤖 Prompt for AI Agents
In docs-starlight/src/styles/global.css between lines 105 and 118, replace the
hardcoded color value "white" with the appropriate CSS variable that defines the
white color in the theme. This change ensures consistency and maintainability by
using the existing CSS variables instead of fixed color values.
| <button class="flex border-stroke-dark border rounded-md p-1 pr-2.5 gap-1.5 items-center"> | ||
| <Image | ||
| src={src} | ||
| alt={alt} | ||
| class="w-5 h-5 rounded-sm" | ||
| loading={loadingMode} | ||
| /> | ||
| <span class="text-xs font-mono text-white">{text}</span> | ||
| </button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add hover states for better user experience.
The button lacks hover states which would improve user feedback and align with the design system.
-<button class="flex border-stroke-dark border rounded-md p-1 pr-2.5 gap-1.5 items-center">
+<button class="flex border-stroke-dark border rounded-md p-1 pr-2.5 gap-1.5 items-center hover:bg-white/10 transition-colors duration-200">📝 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.
| <button class="flex border-stroke-dark border rounded-md p-1 pr-2.5 gap-1.5 items-center"> | |
| <Image | |
| src={src} | |
| alt={alt} | |
| class="w-5 h-5 rounded-sm" | |
| loading={loadingMode} | |
| /> | |
| <span class="text-xs font-mono text-white">{text}</span> | |
| </button> | |
| <button class="flex border-stroke-dark border rounded-md p-1 pr-2.5 gap-1.5 items-center hover:bg-white/10 transition-colors duration-200"> | |
| <Image | |
| src={src} | |
| alt={alt} | |
| class="w-5 h-5 rounded-sm" | |
| loading={loadingMode} | |
| /> | |
| <span class="text-xs font-mono text-white">{text}</span> | |
| </button> |
🤖 Prompt for AI Agents
In docs-starlight/src/components/dv-IconButton.astro around lines 16 to 24, the
button element lacks hover states for user interaction feedback. Add CSS classes
or inline styles to the button to define hover effects such as changing
background color, border color, or text color on hover. Ensure the hover styles
align with the existing design system for consistency.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
docs-starlight/src/components/dv-FeaturedBrands.astro (4)
42-60: Consider consolidating keyframe animations to reduce code duplication.The multiple keyframe definitions with similar structure create maintenance overhead. The transform percentages appear to be manually calculated for different screen sizes, which could lead to inconsistencies.
- @keyframes marquee-sm { - 0% { transform: translateX(0); } - 100% { transform: translateX(-172%); } - } - - @keyframes marquee-lg { - 0% { transform: translateX(0); } - 100% { transform: translateX(-140%); } - } - - @keyframes marquee-xl { - 0% { transform: translateX(0); } - 100% { transform: translateX(-159%); } - } - - @keyframes marquee-2xl { - 0% { transform: translateX(0); } - 100% { transform: translateX(-112%); } - } + @keyframes marquee { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } + }Then use CSS custom properties to adjust the animation distance dynamically, or consider using a more predictable calculation based on the actual content width.
66-71: Remove redundant media query for tablet breakpoint.The tablet media query (lines 67-71) applies the same animation as the default, making it redundant.
- /* Tablet */ - @media (min-width: 768px) { - .animate-marquee { - animation: marquee-sm 20s linear infinite; - } - }
26-29: Consider using CSS custom properties for consistent fade colors.The fade gradient colors are hardcoded to match the background color
#FAFAFA, which creates a maintenance risk if the background color changes.+/* Add to the style section */ +:root { + --fade-color: #FAFAFA; +} + - <div class="pointer-events-none absolute left-0 top-0 h-full w-20 md:w-40 z-10 bg-gradient-to-r from-[#FAFAFA] to-transparent"></div> + <div class="pointer-events-none absolute left-0 top-0 h-full w-20 md:w-40 z-10 bg-gradient-to-r from-[var(--fade-color)] to-transparent"></div>And apply the same change to the right fade gradient.
13-13: Consider making the logos array more maintainable.The current approach requires manual updates when adding/removing logos. Consider a more scalable approach for logo management.
-const logos = [LogoBrand1, LogoBrand2, LogoBrand3, LogoBrand4, LogoBrand5, LogoBrand6, LogoBrand7]; +const logos = [ + { src: LogoBrand1, alt: 'Company 1' }, + { src: LogoBrand2, alt: 'Company 2' }, + { src: LogoBrand3, alt: 'Company 3' }, + { src: LogoBrand4, alt: 'Company 4' }, + { src: LogoBrand5, alt: 'Company 5' }, + { src: LogoBrand6, alt: 'Company 6' }, + { src: LogoBrand7, alt: 'Company 7' } +];Then update the template to use the structured data:
- {[...logos, ...logos].map((logo, i) => ( - <Image src={logo} alt={`Logo ${i}`} class="h-8 flex-shrink-0" /> - ))} + {[...logos, ...logos].map((logo, i) => ( + <Image src={logo.src} alt={logo.alt} class="h-8 flex-shrink-0" /> + ))}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs-starlight/src/components/dv-FeaturedBrands.astro(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`docs-starlight/**/*.astro`: Review the Astro code in the `docs-starlight` direc...
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.
⚙️ Source: CodeRabbit Configuration File
List of files the instruction was applied to:
docs-starlight/src/components/dv-FeaturedBrands.astro
🔇 Additional comments (1)
docs-starlight/src/components/dv-FeaturedBrands.astro (1)
32-36: Marquee Animation Follows Best Practices—Ready to ShipWe’ve confirmed that:
- The keyframes for
marquee-*only animatetransform, ensuring GPU acceleration.- The logos array is duplicated (
[...logos, ...logos]) for a seamless, continuous loop.- Animations are set to
linear infinite, matching recommended smoothness patterns.Optional enhancements (no blockers):
- Add
will-change: transform;to.animate-marqueeif you observe jank under heavy load.- Honor
prefers-reduced-motionvia a no-animation override to respect user settings.- Mark duplicate elements with
aria-hidden="true"to prevent redundant screen-reader announcements.Please proceed with manual performance testing across target devices to confirm consistent 60 FPS.
| {[...logos, ...logos].map((logo, i) => ( | ||
| <Image src={logo} alt={`Logo ${i}`} class="h-8 flex-shrink-0" /> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve accessibility with descriptive alt text for brand logos.
The generic alt text pattern Logo ${i} doesn't provide meaningful information for screen readers. Consider using more descriptive alt text that identifies the actual brand or company.
- {[...logos, ...logos].map((logo, i) => (
- <Image src={logo} alt={`Logo ${i}`} class="h-8 flex-shrink-0" />
- ))}
+ {[...logos, ...logos].map((logo, i) => (
+ <Image src={logo} alt={`Partner company logo ${Math.floor(i / logos.length) + 1}`} class="h-8 flex-shrink-0" />
+ ))}Or better yet, create a mapping of logos to their actual company names for more descriptive alt text.
📝 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.
| {[...logos, ...logos].map((logo, i) => ( | |
| <Image src={logo} alt={`Logo ${i}`} class="h-8 flex-shrink-0" /> | |
| ))} | |
| {[...logos, ...logos].map((logo, i) => ( | |
| <Image | |
| src={logo} | |
| alt={`Partner company logo ${Math.floor(i / logos.length) + 1}`} | |
| class="h-8 flex-shrink-0" | |
| /> | |
| ))} |
🤖 Prompt for AI Agents
In docs-starlight/src/components/dv-FeaturedBrands.astro around lines 33 to 35,
the alt text for the logos is generic and not descriptive, which reduces
accessibility. Replace the alt text string with a more meaningful description by
mapping each logo to its corresponding brand or company name and use that name
in the alt attribute instead of a generic label.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
docs-starlight/src/pages/index.astro (2)
13-22: Improve page metadata and SEO optimization.The page still has basic HTML structure and a generic description. This needs to be updated with proper metadata for SEO and social sharing as mentioned in previous reviews.
Update the meta description and add comprehensive meta tags:
<head> <meta charset="UTF-8" /> - <meta name="description" content="Astro description" /> + <meta name="description" content="Terragrunt helps you keep your Terraform code DRY, work with multiple Terraform modules, and manage remote state." /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="generator" content={Astro.generator} /> + <meta property="og:title" content="Terragrunt - Keep your Terraform code DRY" /> + <meta property="og:description" content="Terragrunt helps you keep your Terraform code DRY, work with multiple Terraform modules, and manage remote state." /> + <meta property="og:type" content="website" /> + <meta property="og:url" content="https://terragrunt.gruntwork.io" /> + <meta name="twitter:card" content="summary_large_image" /> <title>Terragrunt</title> </head>
23-50: Add semantic HTML structure and improve layout approach.The page lacks semantic HTML landmarks and uses problematic positioning. Additionally, the fixed/absolute positioning approach could cause layout issues on different screen sizes.
Improve the structure and layout:
-<body class="flex flex-col min-h-screen bg-[#FAFAFA]"> - <div class="fixed top-0 z-50"> - <Navbar /> - </div> - <div class="absolute top-[149px] md:top-[83px] w-full"> +<body class="flex flex-col min-h-screen bg-[#FAFAFA]"> + <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded">Skip to main content</a> + <header class="sticky top-0 z-50"> + <Navbar /> + </header> + <main id="main-content" class="flex-1"> <Hero /> <div class="overflow-hidden lg:px-8 xl:px-24 2xl:px-76"> <!-- rest of content --> </div> - </div> + </main> </body>Using
stickypositioning instead offixedavoids the need for hardcoded top offsets and makes the layout more maintainable.
🧹 Nitpick comments (3)
docs-starlight/src/components/Header.astro (3)
20-35: Consider caching GitHub stars and removing console statements.The GitHub star count is fetched on every page load without caching, and errors are logged to console which isn't ideal for production.
Consider implementing a caching strategy and proper error handling:
let starCountDisplay = '8.6k'; +// Consider caching this value to reduce API calls +const CACHE_DURATION = 3600000; // 1 hour 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); + // Silently fall back to default value }
70-75: Remove commented out code.The commented searchbar code should be removed as it's been replaced by the Search component integration.
{shouldRenderSearch && <Search {...Astro.props} />} </div> - <!-- <div class="searchbar"> - <svg xmlns="http://www.w3.org/2000/svg" class="text-[var(--color-gray-1)]" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> - <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/> - </svg> - <input class="text-sm font-sans text-[var(--color-gray-1)]" placeholder="Search"></input> - </div> -->
120-149: Clean up unused styles and use utility classes.The
.searchbarstyles are unused since the corresponding HTML is commented out. Also, consider using Tailwind utility classes instead of custom CSS for responsive padding.Remove unused styles and simplify:
<style> - .searchbar { - display: flex; - align-items: center; - justify-content: start; - gap: 8px; - width: 280px; - height: 40px; - padding: 6px 12px; - background-color: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); - border-radius: 6px; - } - .menu-icon { display: none; } @media (min-width: 768px) and (max-width: 1023px) { .menu-icon { display: inline-flex; } } - - @media (width <= 375px) { - .primary-button, .secondary-button { - padding: 10px 10px; - } - } </style>For the responsive padding, use Tailwind's responsive modifiers directly on the buttons:
<a href="#" class="flex md:hidden secondary-button !p-3 max-[375px]:!p-2.5">
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs-starlight/src/components/Header.astro(2 hunks)docs-starlight/src/components/dv-ConsistencySection.astro(1 hunks)docs-starlight/src/components/dv-Divider.astro(1 hunks)docs-starlight/src/components/dv-DrySection.astro(1 hunks)docs-starlight/src/components/dv-Navbar.astro(1 hunks)docs-starlight/src/components/dv-OrchestrateSection.astro(1 hunks)docs-starlight/src/components/dv-Testimonials.astro(1 hunks)docs-starlight/src/pages/index.astro(1 hunks)docs-starlight/src/styles/global.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- docs-starlight/src/components/dv-Divider.astro
- docs-starlight/src/components/dv-OrchestrateSection.astro
- docs-starlight/src/components/dv-Navbar.astro
- docs-starlight/src/components/dv-Testimonials.astro
- docs-starlight/src/components/dv-DrySection.astro
- docs-starlight/src/components/dv-ConsistencySection.astro
- docs-starlight/src/styles/global.css
🧰 Additional context used
📓 Path-based instructions (1)
docs-starlight/**/*.astro
Instructions used from:
Sources:
⚙️ CodeRabbit Configuration File
docs-starlight/src/pages/index.astro
Outdated
| <!-- FIXME: Entre 1024px - 1046px las líneas punteadas no coinciden con el borde de las secciones --> | ||
| <div class="hidden md:block pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 md:w-[633px] lg:w-[852px] h-full z-0 border-x border-dashed border-gray-3"></div> |
There was a problem hiding this comment.
Address the FIXME comment about misaligned borders.
There's an unresolved issue with dotted line alignment between 1024px-1046px viewport widths. This visual bug should be fixed to ensure consistent appearance across all screen sizes.
Would you like me to help investigate and fix this alignment issue? I can analyze the CSS and provide a solution.
🤖 Prompt for AI Agents
In docs-starlight/src/pages/index.astro around lines 34 to 35, the dotted border
lines are misaligned between 1024px and 1046px viewport widths. To fix this,
adjust the CSS for the div's width or positioning specifically within this
breakpoint range, ensuring the border aligns perfectly with the section edges.
You may need to add a custom media query targeting this range and tweak the
width or translate-x values accordingly to achieve consistent alignment.
| <a href="#" class="hidden md:flex secondary-button h-[43px]"> | ||
| Automate your pipeline | ||
| </a> | ||
| </div> | ||
| <div class="sl-flex social-icons"> | ||
| <a href="https://www.gruntwork.io/services/terragrunt" class="support-btn"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem;"> | ||
| <path d="M12 1a9 9 0 0 0-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h4v1h-7v2h6c1.66 0 3-1.34 3-3V10a9 9 0 0 0-9-9z"/> | ||
| </svg> | ||
| <a href="#" class="flex md:hidden secondary-button !p-3"> | ||
| <Image | ||
| src={PipelineIcon} | ||
| alt="Pipeline Icon" | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| </a> | ||
| <a href="#" class="hidden md:flex primary-button h-[43px]"> | ||
| Support | ||
| <span class="support-arrow"> | ||
| <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8 6l4 4-4 4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> | ||
| </span> | ||
| </a> | ||
| <button class="menu-icon hover:cursor-pointer"> | ||
| <div class="flex items-center"> | ||
| <svg data-slot="icon" class="text-white w-6 h-6" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> | ||
| <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" /> | ||
| </svg> | ||
| </div> | ||
| </button> | ||
| <a href="#" class="flex md:hidden primary-button !p-3"> | ||
| <Image | ||
| src={HeadphonesIcon} | ||
| alt="Headphones Icon" | ||
| width={20} | ||
| height={20} | ||
| class={"aspect-[1/1] h-auto"} | ||
| /> | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
Add proper links and menu functionality.
Several buttons have placeholder href="#" values and the menu icon lacks functionality. Based on the PR objectives, these need proper implementations and hover states.
Update the following:
- Line 80: Add proper link for "Automate your pipeline"
- Line 91: Add proper link for pipeline icon on mobile
- Line 101: Add proper link for "Support"
- Line 94: Add click handler for menu toggle functionality
-<a href="#" class="hidden md:flex secondary-button h-[43px]">
+<a href="/pipelines" class="hidden md:flex secondary-button h-[43px] hover:opacity-80 transition-opacity">
Automate your pipeline
</a>
-<button class="menu-icon hover:cursor-pointer">
+<button class="menu-icon hover:cursor-pointer" onclick="toggleMobileMenu()">Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In docs-starlight/src/components/Header.astro between lines 80 and 110, replace
all placeholder href="#" attributes with the actual URLs for "Automate your
pipeline" (line 80), the pipeline icon on mobile (line 91), and "Support" (line
101). Additionally, add a click event handler to the button with class
"menu-icon" (line 94) to toggle the menu's visibility, implementing the required
menu open/close functionality and ensuring appropriate hover states are applied.
#4494 (comment) Note: - Some images I did the best I could searching them online, however I couldn't find all of them I used the ones from the figma file (the one provided hen I asked for the assets) - Didn't connect the newsletter. I was responsible only for the design. Appreciate your comprehension.
#4494 (comment) Note: - Some images I did the best I could searching them online, however I couldn't find all of them I used the ones from the figma file (the one provided hen I asked for the assets) - Didn't connect the newsletter. I was responsible only for the design. Appreciate your comprehension.
Description
The following PR contains the front-end based on Figma Design provided.
Fixes #000.
It is worked specifically in the Docs-Starlight folder. Components were added to develop the front-end based on the design of Figma. The aggregate components are: dv-Card, dv-Hero, dv-Footer, dv-Navbar, dv-Terminal, among others.
TODOs
Read the Gruntwork contribution guidelines.
Release Notes (draft)
Added / Removed / Updated [X].
Migration Guide
Summary by CodeRabbit
New Features
Style
Refactor
Chores