Feat/new realese update - #5
Merged
Merged
Conversation
…nd improve layout - Updated SiteFooter.astro to use a dynamic logo import and reorganized footer links into a structured format. - Enhanced styling for footer and header, including responsive design adjustments. - Replaced image logos with an SVG logo for better scalability and performance. - Improved accessibility and semantics in navigation links. - Added a new ThemeShowcase component with a cleaner layout for displaying brand colors. - Introduced global styles for better consistency across components. - Added installation documentation for Mailify with multiple installation methods. - Created a script to generate rasterized Open Graph images for better compatibility with social media platforms. - Added a new SVG logo asset for branding purposes.
Reviewer's GuideIntegrates Tailwind v4 into the marketing site with a new CSS-first token system, migrates key marketing components to Tailwind utility classes while preserving legacy CSS variable aliases, tightens global vs docs styling boundaries, improves docs copy/structure, adds an OG image generation/build step, and enhances Astro/Starlight configuration (ExpressiveCode, sitemap) and branding assets. Flow diagram for marketing vs docs styling boundariesflowchart TB
root_html["<html> :root\nTokens, colors, fonts"]
body_marketing["<body class='marketing'>\nMarketing pages"]
body_docs["<body> (no marketing class)\nStarlight docs"]
global_css["global.css\n- box-sizing, fonts\n- focus-visible\n- selection\n- prefers-reduced-motion"]
marketing_scope["global.css (.marketing ...)\n- heading styles\n- link styles\n- code inline badges\n- buttons .btn-*\n- .skip-link"]
starlight_styles["Starlight core CSS\n(scoped reset + docs typography)"]
tokens_css["tokens.css\n@theme + CSS vars"]
marketing_components["Marketing components\n(Hero, FeatureGrid, SiteHeader, SiteFooter, etc.)\n- Tailwind utilities\n- var(--color-*) where needed"]
docs_pages["Docs pages\n(index.md, installation.md, troubleshooting, ...)"]
root_html --> tokens_css
root_html --> global_css
global_css --> body_marketing
global_css --> body_docs
body_marketing --> marketing_scope
marketing_scope --> marketing_components
body_docs --> starlight_styles
starlight_styles --> docs_pages
tokens_css --> marketing_components
tokens_css --> starlight_styles
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 3 issues, and left some high level feedback:
- The build pipeline now mixes
node(forprebuild) andbun run prebuildinpackage.json; consider standardizing on one runtime (e.g.,node scripts/gen-og.mjsvianpm run/pnpm run) to avoid requiring a globally installed Bun for builds. - The OG image URL (
https://mailify.donilite.me/og-default.png) is hardcoded in bothastro.config.mjsandMarketingLayout.astro; consider centralizing this in a single config/source to avoid them getting out of sync in future changes.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The build pipeline now mixes `node` (for `prebuild`) and `bun run prebuild` in `package.json`; consider standardizing on one runtime (e.g., `node scripts/gen-og.mjs` via `npm run`/`pnpm run`) to avoid requiring a globally installed Bun for builds.
- The OG image URL (`https://mailify.donilite.me/og-default.png`) is hardcoded in both `astro.config.mjs` and `MarketingLayout.astro`; consider centralizing this in a single config/source to avoid them getting out of sync in future changes.
## Individual Comments
### Comment 1
<location path="site/src/components/SiteFooter.astro" line_range="32-33" />
<code_context>
+];
+---
+
+<footer
+ class="border-t border-border bg-linear-to-b from-brand-primary-muted/30 to-bg pb-8 pt-16"
+>
+ <div
</code_context>
<issue_to_address>
**issue (bug_risk):** The `bg-linear-to-b` and `bg-linear-[…]` classes won’t generate Tailwind gradients.
These classes don’t match Tailwind’s gradient utilities, so the gradients won’t render. Use `bg-gradient-to-b` (or another `bg-gradient-*` utility) or an arbitrary value like `bg-[linear-gradient(...)]` instead.
Specifically:
- Footer: change `bg-linear-to-b from-brand-primary-muted/30 to-bg` to `bg-gradient-to-b ...`.
- Feature cards & ArchitectureDiagram highlighted node: replace `bg-linear-[135deg] from-brand-primary to-brand-primary/40` with a valid arbitrary gradient, e.g. `bg-[linear-gradient(135deg,var(--color-brand-primary),color-mix(in_srgb,var(--color-brand-primary)_40%,transparent))]`.
Updating these to valid Tailwind v4 gradient utilities or arbitrary values will make the gradients render correctly.
</issue_to_address>
### Comment 2
<location path="site/src/components/FeatureGrid.astro" line_range="44-45" />
<code_context>
- <div class="icon" aria-hidden="true"></div>
- <h3>{feature.title}</h3>
- <p>{feature.body}</p>
+ <article
+ class="group rounded-lg border border-border bg-paper-raised p-6 transition duration-150 hover:-translate-y-0.5 hover:border-brand-primary/30 hover:shadow-md"
+ >
+ <div
</code_context>
<issue_to_address>
**issue (bug_risk):** Feature card gradient class `bg-linear-[135deg]` is also non-standard for Tailwind.
`bg-linear-[135deg]` isn’t a valid Tailwind class, so no gradient will be generated. If you want a gradient, use either a standard utility (e.g. `bg-gradient-to-br from-brand-primary to-brand-primary/40`) or an arbitrary value such as:
```html
bg-[linear-gradient(135deg,var(--color-brand-primary),color-mix(in_srgb,var(--color-brand-primary)_40%,transparent))]
```
</issue_to_address>
### Comment 3
<location path="site/src/components/SiteFooter.astro" line_range="86-88" />
<code_context>
- .footer-links {
- grid-template-columns: repeat(3, minmax(0, 1fr));
- }
+ .brand-mark :global(svg) {
+ width: 100%;
+ height: 100%;
}
</style>
</code_context>
<issue_to_address>
**suggestion:** Repeated `.brand-mark :global(svg)` rules could be centralized to avoid duplication.
The same `.brand-mark :global(svg)` rule appears in both `SiteHeader.astro` and `SiteFooter.astro`. Since the logo and styling are shared, consider moving this to a common stylesheet (e.g. `global.css` under a `.marketing` scope) or a small utility partial to avoid keeping header/footer styles in sync if logo dimensions change later.
Suggested implementation:
```
</style>
```
To fully implement the suggestion and avoid duplication, you should also:
1. Remove the same `.brand-mark :global(svg)` rule from `site/src/components/SiteHeader.astro`.
2. Add a shared rule in a common stylesheet (for example `site/src/styles/global.css` or a marketing-specific stylesheet), something like:
```css
.marketing .brand-mark svg {
width: 100%;
height: 100%;
}
```
or, if you need to stay compatible with Astro's scoping:
```css
.marketing .brand-mark :global(svg) {
width: 100%;
height: 100%;
}
```
3. Ensure both `SiteHeader.astro` and `SiteFooter.astro` are wrapped in or otherwise rendered within the `.marketing` scope (or whatever shared scope you choose) so the centralized rule applies to both.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+32
to
+33
| <footer | ||
| class="border-t border-border bg-linear-to-b from-brand-primary-muted/30 to-bg pb-8 pt-16" |
There was a problem hiding this comment.
issue (bug_risk): The bg-linear-to-b and bg-linear-[…] classes won’t generate Tailwind gradients.
These classes don’t match Tailwind’s gradient utilities, so the gradients won’t render. Use bg-gradient-to-b (or another bg-gradient-* utility) or an arbitrary value like bg-[linear-gradient(...)] instead.
Specifically:
- Footer: change
bg-linear-to-b from-brand-primary-muted/30 to-bgtobg-gradient-to-b .... - Feature cards & ArchitectureDiagram highlighted node: replace
bg-linear-[135deg] from-brand-primary to-brand-primary/40with a valid arbitrary gradient, e.g.bg-[linear-gradient(135deg,var(--color-brand-primary),color-mix(in_srgb,var(--color-brand-primary)_40%,transparent))].
Updating these to valid Tailwind v4 gradient utilities or arbitrary values will make the gradients render correctly.
Comment on lines
+44
to
+45
| <article | ||
| class="group rounded-lg border border-border bg-paper-raised p-6 transition duration-150 hover:-translate-y-0.5 hover:border-brand-primary/30 hover:shadow-md" |
There was a problem hiding this comment.
issue (bug_risk): Feature card gradient class bg-linear-[135deg] is also non-standard for Tailwind.
bg-linear-[135deg] isn’t a valid Tailwind class, so no gradient will be generated. If you want a gradient, use either a standard utility (e.g. bg-gradient-to-br from-brand-primary to-brand-primary/40) or an arbitrary value such as:
bg-[linear-gradient(135deg,var(--color-brand-primary),color-mix(in_srgb,var(--color-brand-primary)_40%,transparent))]
Comment on lines
+86
to
+88
| .brand-mark :global(svg) { | ||
| width: 100%; | ||
| height: 100%; |
There was a problem hiding this comment.
suggestion: Repeated .brand-mark :global(svg) rules could be centralized to avoid duplication.
The same .brand-mark :global(svg) rule appears in both SiteHeader.astro and SiteFooter.astro. Since the logo and styling are shared, consider moving this to a common stylesheet (e.g. global.css under a .marketing scope) or a small utility partial to avoid keeping header/footer styles in sync if logo dimensions change later.
Suggested implementation:
</style>
To fully implement the suggestion and avoid duplication, you should also:
- Remove the same
.brand-mark :global(svg)rule fromsite/src/components/SiteHeader.astro. - Add a shared rule in a common stylesheet (for example
site/src/styles/global.cssor a marketing-specific stylesheet), something like:or, if you need to stay compatible with Astro's scoping:.marketing .brand-mark svg { width: 100%; height: 100%; }
.marketing .brand-mark :global(svg) { width: 100%; height: 100%; }
- Ensure both
SiteHeader.astroandSiteFooter.astroare wrapped in or otherwise rendered within the.marketingscope (or whatever shared scope you choose) so the centralized rule applies to both.
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
1 participant
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 by Sourcery
Integrate Tailwind v4 into the marketing site, centralize design tokens for both marketing and docs, and refresh the marketing layout and docs landing content to align with the new design system.
New Features:
Enhancements:
Build: