New text-forward design #30
Conversation
Add BigText.astro to handle the sections with alternating large text.
Fix color style in TagOrnament.astro. Add paragraph spacing.
Use fragments to pass in the BigText contents. Add multiple weights of Barlow and Barlow Condensed.
Remove style block from BaseLayout.astro.
Tweak vertical spacing.
Use BigText for the news and code summary headers.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @fwextensions, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
This pull request migrates the SF Civic Tech website to use Tailwind CSS for styling. This involves adding Tailwind as a dependency, configuring it in the Astro configuration file, and replacing existing CSS styles with Tailwind classes across various components and layouts. The changes aim to improve maintainability and consistency in the website's design.
Highlights
- Tailwind CSS Integration: Tailwind CSS is added as a project dependency and configured in
astro.config.mjsto enable its utility classes throughout the project. - Component Restyling: Several components, including
BigText,BlogListItem,Card,CodeSummary,FooterNav,GetStartedStep,HackNightHero,HeaderNav,HomeSection,NewsSummaryItem,TeamList, andTeamMember, are updated to use Tailwind CSS classes instead of custom CSS. This includes changes to layout, typography, and spacing. - Layout Updates: The
BaseLayoutandPagelayouts are modified to remove Pico CSS and custom styles, and instead use Tailwind CSS classes for overall page structure and styling. - Global Styles: The
global.cssfile is updated to include Tailwind directives and custom styles, such as font families and colors, defined as CSS variables. - React Component Styling: The React component
GitHubEventCardis updated to use Tailwind CSS classes instead of module-specific CSS.
Changelog
Click here to see the changelog
- astro.config.mjs
- Added
@tailwindcss/viteas an import on line 4. - Added
tailwindcss()plugin to thepluginsarray on line 45.
- Added
- package.json
- Added
@tailwindcss/viteas a dev dependency on line 26. - Added
tailwindcssas a dev dependency on line 44.
- Added
- src/assets/icons/tag-ornament.svg
- Added a new SVG file for tag ornament icon.
- src/components/BigText.astro
- Created a new component
BigText.astroto display large text with optional ornament. - Uses Tailwind CSS classes for styling and layout.
- Created a new component
- src/components/BlogListItem.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated thumbnail image styling with
aspect-square,object-cover, andobject-centerclasses on line 42. - Added Tailwind classes for time, heading, and description on lines 52-53.
- src/components/Card.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated the component to use flexbox and Tailwind's spacing utilities on line 13.
- Adjusted media queries to use Tailwind's
@applydirective on lines 31-37.
- src/components/CodeSummary.astro
- Replaced
HomeSectionwithBigTextand Tailwind CSS classes for styling. - Removed the import of
HomeSectionon line 3. - Added import of
BigTexton line 3. - Added a wrapping
<section>element with margin bottom on line 11. - Used
<Fragment>to set the title slot on line 13. - Added a margin top div on line 17.
- Replaced
- src/components/FooterNav.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated footer container with flexbox classes on line 48.
- Styled navigation elements with Tailwind classes for typography and spacing on lines 51-54.
- src/components/GetStartedStep.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated list item styling with relative positioning and counter increment on line 13.
- Styled figure and figcaption elements with flexbox and Tailwind classes on lines 14-17.
- Changed the color of the counter to
--color-sf-redon line 28.
- src/components/HackNightHero.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated section layout with flexbox classes on line 7.
- Styled info and image divs with Tailwind classes for background, typography, and spacing on lines 8-25.
- src/components/HeaderNav.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated header container with flexbox classes on line 24.
- Styled navigation links with Tailwind classes for typography and spacing on lines 31-40.
- Added mobile menu toggle functionality using JavaScript on lines 70-77.
- src/components/HomeSection.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated section layout with flexbox classes on line 13.
- Styled heading with Tailwind classes for typography and spacing on line 14.
- Added TagOrnament on lines 20-22.
- src/components/NavLink.astro
- Removed custom CSS and replaced with Tailwind CSS classes.
- Removed the
baseimport on line 2. - Removed the logic for
aria-currenton lines 9-23. - Added
text-current no-underline hover:underlineclasses to the<a>tag on line 7.
- src/components/NewsSummary.astro
- Replaced
HomeSectionwithBigTextand Tailwind CSS classes for styling. - Removed the import of
HomeSectionon line 3. - Added import of
BigTextandTagOrnamenton lines 4-5. - Added a wrapping
<section>element with margin bottom on line 11. - Used
<Fragment>to set the title slot on line 13. - Added a grid layout on line 17.
- Added a TagOrnament on lines 20-22.
- Replaced
- src/components/NewsSummaryItem.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated article styling with
aspect-square,bg-cover, andbg-centerclasses on line 27. - Styled the link with Tailwind classes for typography and spacing on lines 36-38.
- Changed the
postURLto start with/on line 22.
- src/components/TagOrnament.astro
- Created a new component
TagOrnament.astroto display the tag ornament icon. - Uses
astro-iconand allows customization of the color.
- Created a new component
- src/components/TeamList.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated section layout with flexbox classes on line 10.
- src/components/TeamMember.astro
- Replaced custom CSS with Tailwind CSS classes for layout and styling.
- Updated figure styling with flexbox classes on line 14.
- Styled image with rounded corners and object fit on line 16.
- Styled heading and title with Tailwind classes for typography and spacing on lines 22-23.
- src/layouts/BaseLayout.astro
- Removed Pico CSS and custom styles.
- Updated main container with Tailwind CSS classes for margin and spacing on line 42.
- Styled heading with Tailwind classes for typography and spacing on line 44.
- Added a check for
frontmatter.descriptionwhenmeta.descriptionis not set on lines 28-31.
- src/layouts/Page.astro
- Removed Pico CSS import.
- Added Google Fonts link.
- Added Tailwind CSS classes for body styling.
- Imported global styles from
src/styles/global.csson line 6. - Added Google Fonts for Barlow and Barlow Condensed on lines 47-48.
- Added
font-body max-w-[920px] mx-autoclasses to the<body>tag on line 52.
- src/pages/about/index.astro
- Replaced custom CSS with Tailwind CSS classes for styling.
- Updated heading styles with Tailwind classes for typography and spacing on lines 44, 49, 62.
- Styled list elements with Tailwind classes for spacing on lines 51, 66.
- Styled the Code of Conduct link with Tailwind classes on line 88.
- src/pages/beta/index.astro
- Removed the entire file as it is no longer needed.
- src/pages/blog/[slug].astro
- Replaced custom CSS with Tailwind CSS classes for styling.
- Updated heading styles with Tailwind classes for typography and spacing on line 49.
- Styled date and link with Tailwind classes for spacing on line 50.
- Added
prose max-w-noneclasses to the<div>tag wrapping<Content />on line 58.
- src/pages/donate.astro
- Replaced custom CSS with Tailwind CSS classes for styling.
- Updated paragraph styles with Tailwind classes for spacing on lines 6, 12, 17.
- Styled the Donate Now link with Tailwind classes on line 18.
- src/pages/get-started.astro
- Replaced custom CSS with Tailwind CSS classes for styling.
- Updated paragraph styles with Tailwind classes for spacing on line 19.
- Styled list elements with Tailwind classes for spacing on lines 23, 36.
- Added
marker:initialclass to the<li>tag on line 37.
- src/react/GitHubEvents/GitHubEventCard.module.css
- Removed the entire file as it is no longer needed.
- src/react/GitHubEvents/GitHubEventCard.tsx
- Replaced module-specific CSS with Tailwind CSS classes for styling.
- Removed the import of
styleson line 3. - Added Tailwind classes to the
<a>tag on lines 26-37. - Added Tailwind classes to the
<img>tag on line 43. - Added Tailwind classes to the
<h3>tag on line 45. - Added Tailwind classes to the
<p>tag on line 49. - Added Tailwind classes to the
<footer>tag on line 55.
- src/react/GitHubEvents/GitHubEvents.module.css
- Removed the entire file as it is no longer needed.
- src/react/GitHubEvents/GitHubEvents.tsx
- Replaced module-specific CSS with Tailwind CSS classes for styling.
- Removed the import of
styleson line 6. - Added Tailwind classes to the
<div>tag on line 9.
- src/react/GitHubEvents/GitHubEventsList.module.css
- Removed the entire file as it is no longer needed.
- src/react/GitHubEvents/GitHubEventsList.tsx
- Replaced module-specific CSS with Tailwind CSS classes for styling.
- Removed the import of
styleson line 5. - Added Tailwind classes to the
<div>tag on line 94. - Added Tailwind classes to the
<div>tag on line 103. - Added Tailwind classes to the
<button>tag on line 28.
- src/react/GitHubEvents/getRecentEvents.tsx
- Added a type assertion to the
filterfunction on line 52 to ensure that the returned array only contains non-nullGitHubEventobjects. - Removed the
keyvariable on line 53. - Used
event.iddirectly on lines 53 and 58.
- Added a type assertion to the
- src/styles/global.css
- Created a new
global.cssfile to define global styles and Tailwind directives. - Includes font imports, CSS variables for colors and typography, and base styles for HTML elements.
- Created a new
- tailwind.config.js
- Created a new
tailwind.config.jsfile to configure Tailwind CSS. - Configures the content sources, theme extensions, and plugins.
- Created a new
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
With Tailwind's breeze,
Styles now dance with such ease,
A modern design.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request migrates the project from Pico CSS to Tailwind CSS. The changes involve updating the project's dependencies, configuring Tailwind CSS, and refactoring the components to use Tailwind CSS classes. The migration appears to be well-structured and organized. However, it's crucial to verify that the new styles provide the same functionality and visual appearance as the old styles, and that the component structure is semantically correct.
Summary of Findings
- Removal of Pico CSS: The pull request removes Pico CSS and replaces it with Tailwind CSS. This involves removing Pico CSS imports and styles, and adding Tailwind CSS classes to the components. Ensure that the new styles provide the same functionality and visual appearance as the old styles.
- Component Restructuring: Several components have been restructured to use Tailwind CSS classes instead of custom CSS. This includes changes to the HTML structure and the removal of custom CSS styles. Verify that the new component structure is semantically correct and that the Tailwind CSS classes are used appropriately.
- Global CSS Changes: The global CSS file has been updated to include Tailwind CSS imports and custom CSS variables. This involves removing the Pico CSS import and adding custom CSS variables for colors and fonts. Ensure that the new global styles are consistent with the overall design and that the custom CSS variables are used correctly.
Merge Readiness
The pull request introduces significant changes by migrating from Pico CSS to Tailwind CSS. While the changes seem well-structured, a thorough review is necessary to ensure that the new styles provide the same functionality and visual appearance as the old styles. Additionally, it's important to verify that the component structure is semantically correct and that the Tailwind CSS classes are used appropriately. I am unable to approve this pull request, and recommend that others review and approve this code before merging. Due to the scope of the changes, I recommend that the pull request not be merged until these concerns are addressed.
src/components/BlogListItem.astro
Outdated
| <a href={postURL}> | ||
| {thumbnailImage | ||
| ? <Image class="thumbnail" | ||
| ? <Image class="thumbnail aspect-square object-cover object-center w-56 h-56" |
There was a problem hiding this comment.
Consider adding loading="lazy" to the Image component to improve page load performance, especially for blog lists with many images.
<Image class="thumbnail aspect-square object-cover object-center w-56 h-56" loading="lazy"
src={thumbnailImage}
alt={image_alt}
widths={[Thumbnail2X]}
| if (!meta?.description && "description" in frontmatter) { | ||
| meta ??= {}; | ||
| meta.description = frontmatter.description; | ||
| } |
There was a problem hiding this comment.
This logic ensures that the meta description is populated from the frontmatter if it exists and isn't already set. This is good, but consider adding a fallback to a default description if neither the frontmatter nor the existing meta has a description. This ensures there's always a description for SEO purposes.
if (!meta?.description) {
meta ??= {};
meta.description = frontmatter?.description ?? "Default description for SF Civic Tech";
}
🚀 Preview URLhttps://pr-30.sfcivictech-pr-builds.pages.dev Last updated: 2025-04-28T02:17:32Z |
Use NavLink again for header and footer links. Convert HeaderLogo to use Tailwind. Update anchor styles.
Add 1u, 2u, etc. and 1col, 2col, etc. based on the 40px unit as a theme spacing. Add mainClass prop to BaseLayout.astro to style the container.
Use large digits for the getting started steps. Add BigHeading.astro component to show large uppercase text. Move the join the conversation item first. Tweak GitHubEventCard.tsx to use stone colors.
Rework project page. Add class props to BigHeading and OptionalAnchor. Add utility functions for trim-* styles.
Center the steps on Getting Started. Reduce width of About page. Add Button component. Tweak image sizing in projects. Tweak styling of GitHub events cards. Use routed.svg for the Routed project.
Move to using Tailwind