Open
Conversation
Introduce a new CollectionFeature component to render collection previews and DRY up the homepage. Update src/pages/index.astro to import CollectionFeature, limit each collection to the first 6 entries, sort them by title, and replace three manual section lists with CollectionFeature instances. Tweak ComponentCard styling and structure (remove emoji/tag, adjust markup, spacing, and hover/arrow behavior; keep formatted count), and adjust Hero spacing/layout to improve vertical rhythm.
Switch global font from Inter to Google Sans Flex and update theme variables and font references across styles and config. Standardize Tailwind color tokens (stone -> gray) and clean up various component classes/transitions. Replace old Hero/HeroUsps with new PageHero and PageHeroSlim components and update pages to use them; remove and simplify related header/footer pieces and add a sticky header with GitHub CTA. Improve search UI (input icon, result layout, remove emoji field) and make several small accessibility and layout tweaks (ads, previews, buttons).
Rename Header.astro -> SiteHeader.astro and Footer.astro -> SiteFooter.astro and update BaseLayout imports/usages accordingly. Remove Social.astro. Add a "Blog" nav link in the header. Replace Hero with PageHeroSlim on the blog index and adjust the hero copy to a shorter description. Changes clarify component naming and use a slimmer hero layout for the blog listing.
Add a BlogCard component and a readingTime util, then wire reading-time into BlogPost layout and blog index. Enable retainBody for blog collection in content.config so reading time can be calculated. Revamp search UI/logic: add a clear button to SearchInput, restructure SearchResults to render separate Components and Blog Posts sections, include component counts, and improve container styling and result rendering. Misc UI tweaks: adjust HeaderLink size, add top margin to SiteFooter, remove extra bottom padding on component listing pages, and fix a minor import ordering in ComponentCard.
Adjust layout and responsive styles for header, search, and dropdown components: - DropdownMenu: remove fixed divide/py classes, add z-50 and simplify sizing to rely on width/overflow handling. - DropdownToggle: update button classes for inline-flex/rounded-lg appearance and hide on md+, and reduce SVG icon size classes to size-4 with inline/hidden toggles. - SearchInput: make input full width (w-full) for better small-screen behavior. - SearchResults: constrain result panel widths (w-64, md:w-80), add z-50 and remove left-0 to align with dropdown positioning. - SearchWrapper: always render search (removed hidden sm:block) so search is available on all viewports. - SiteHeader: tweak header spacing and nav breakpoints (use lg), adjust header link spacing, reorder and align the search, GitHub button, and DropdownWrapper to the right for consistent layout. These changes improve responsive alignment, z-indexing, and sizing for a more consistent UX across breakpoints.
Revamp preview UI and component interactions across previews. Changes include: - Updated styling: standardized button styles, rounded corners, updated border/ring colors, spacing tweaks, and container layout changes for PreviewWrapper and ComponentPreview. - Replaced emoji labels with inline SVG icons for PreviewView, PreviewDirection and PreviewCopy and removed DOM emoji text updates; toggle logic now swaps icon visibility and updates text instead of mutating emoji nodes. - Simplified PreviewBreakpoints: shortened breakpoint names (SM/MD/LG), removed emoji usage, updated button classes and layout. - Simplified PreviewRefs by removing the `title` prop and its rendering; PreviewWrapper now supplies callers directly. - PreviewWrapper: added an `id` prop, reorganized markup (header, controls, refs row) and moved ComponentPreview below the info panel; passes new id from ComponentPost. - ComponentPost: pass `id` into PreviewWrapper and adjusted heading placement so wrapper renders its own title link. These changes modernize the UI, improve accessibility and make DOM updates simpler by toggling SVG visibility instead of manipulating text nodes.
Rename PageHeroSlim to BaseHero and replace usages across collection pages; remove legacy header/hero components (CollectionHeader, CollectionRelated, HeaderCta, PageHero) and unused layout/pages (PagePost, about route). Remove emoji fields from content frontmatter and the page collection from content.config.ts, and update many MDX files to import BaseHero and use title/description props. Also adjust PreviewWrapper breakpoints (remove emoji property) and move a couple of about entries into the blog collection with added terms. Overall: refactor hero/header components and clean content metadata across the site.
Introduce a new ErrorLayout (with Analytics) and update the 404 page to use it, providing a centered, accessible error UI and a back-home link. Fix PreviewWrapper markup by adding the id to the outer container and moving ComponentPreview inside the wrapper to correct DOM structure. Remove the ads prop from BaseLayout/BaseHead and update call sites accordingly. Tweak vertical spacing/responsive padding across several components and layouts (BaseHero, SiteFooter, BlogPost, ComponentPost, index) and simplify ComponentPost by removing an extra wrapper around PreviewWrapper instances. These changes harmonize page spacing and fix markup issues.
Expose an optional prefix prop on PreviewRefs and adjust its markup/classes (smaller, muted paragraph and remove link underline). In PreviewWrapper add a linked anchor icon next to the title (visible on hover) and reorganize the footer: keep repository contributors inline but move plugin links into a separated bottom bar using PreviewRefs with prefix="Plugins: ". Styling tweaks improve spacing and hover behavior.
Adjust layout and styling across several components: refine BaseAd utility classes for updated ad visuals; remove vertical spacing in SiteFooter container; simplify ComponentPost props by removing unused `terms`; change component index pages (application, marketing, neobrutalism) from 4 to 3 columns at lg breakpoints; increase number of items shown on the homepage collections from 6 to 9. These changes tighten visual spacing and alter listing density on larger screens.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request modernizes HyperUI's design system with a comprehensive UI redesign focused on clean, neutral aesthetics and improved component architecture. The update replaces the Inter font with Google Sans Flex, removes decorative emojis throughout, updates the color palette from stone to gray tones, and introduces new streamlined components while removing legacy code.
Changes:
- Font system updated from Inter to Google Sans Flex across all CSS and configuration files
- Removed emoji fields from all content schemas and components for a cleaner, more professional appearance
- Introduced new components: BlogCard, CollectionFeature, BaseHero, and ErrorLayout for improved structure
- Redesigned ComponentCard, PreviewWrapper, and search functionality with modern styling and updated interactions
- Removed legacy components: Hero, Footer, Header, CollectionRelated, HeroUsps, HeaderCta, and Social
- Updated color palette from stone-* to gray-* throughout for consistency
Reviewed changes
Copilot reviewed 123 out of 123 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| astro.config.js | Updates font provider configuration from Inter to Google Sans Flex |
| src/styles/global.css | Updates CSS variable for new font system |
| src/styles/component.css | Updates font-family declaration to Google Sans Flex |
| src/content.config.ts | Removes emoji field from blog and collection schemas, adds retainBody for blog posts, removes page collection |
| src/utils/readingTime.ts | New utility function to calculate reading time based on word count |
| src/components/BaseHero.astro | New simplified hero component replacing the old Hero component |
| src/components/BlogCard.astro | New blog post card component with reading time and modern layout |
| src/components/CollectionFeature.astro | New component for showcasing collection previews on homepage |
| src/components/ComponentCard.astro | Redesigned with cleaner layout, removed emoji/tag props, added hover animation |
| src/components/SiteHeader.astro | New header replacing old Header, with sticky positioning and updated navigation |
| src/components/SiteFooter.astro | New minimal footer replacing old Footer component |
| src/components/SearchWrapper.astro | Updated to calculate component counts and remove emoji from results |
| src/components/SearchInput.astro | Enhanced with clear button and updated styling |
| src/components/SearchResults.astro | Redesigned results display with sectioned layout and component counts |
| src/components/PreviewWrapper.astro | Major redesign with new layout structure and integrated heading/link |
| src/components/PreviewBreakpoints.astro | Removed emoji from breakpoint buttons, updated styling |
| src/components/PreviewView.astro | Replaced emoji with SVG icons for preview/code toggle |
| src/components/PreviewDirection.astro | Replaced emoji with SVG icon for LTR/RTL toggle |
| src/components/PreviewCopy.astro | Replaced emoji with SVG icon, updated button styling to black background |
| src/components/PreviewRefs.astro | Updated to use optional prefix instead of required title |
| src/components/ComponentPreview.astro | Updated border styling and ring colors |
| src/components/DropdownToggle.astro | Updated styling and icon sizes |
| src/components/DropdownMenu.astro | Updated border and overflow styling |
| src/components/HeaderLink.astro | Updated text and color classes to gray palette |
| src/components/BaseHead.astro | Updated font CSS variable reference |
| src/components/BaseAd.astro | Updated ad container styling with new gray palette |
| src/layouts/BaseLayout.astro | Updated to use new SiteHeader/SiteFooter, removed ads prop |
| src/layouts/ErrorLayout.astro | New layout for error pages with centered content |
| src/layouts/BlogPost.astro | Complete redesign with reading time, improved typography, navigation links |
| src/layouts/ComponentPost.astro | Removed terms prop and CollectionRelated usage |
| src/pages/index.astro | Redesigned homepage with new hero, BaseAd placement, CollectionFeature sections |
| src/pages/404.astro | Redesigned using ErrorLayout with navigation link |
| src/pages/blog/index.astro | Updated to use BlogCard components and BaseHero |
| src/pages/blog/[...slug].astro | Updated to pass full post object instead of just data |
| src/pages/components/*/index.astro | All collection index pages updated to use BaseHero and 3-column grid |
| src/content/collection//.mdx | All collection MDX files updated to use BaseHero and remove emoji field |
| src/content/blog/*.mdx | All blog posts updated to remove emoji field, some have terms added |
| src/components/Hero.astro | Removed legacy hero component |
| src/components/Footer.astro | Removed legacy footer component |
| src/components/Header.astro | Removed legacy header component |
| src/components/HeaderCta.astro | Removed CTA banner component |
| src/components/HeroUsps.astro | Removed USP list component |
| src/components/Social.astro | Removed social link component |
| src/components/CollectionHeader.astro | Removed collection header component |
| src/components/CollectionRelated.astro | Removed related components feature |
| src/layouts/PagePost.astro | Removed page post layout |
| src/pages/about/[...slug].astro | Removed about page routing |
Delete the FormattedCount component and inline its counting logic in ComponentCard (dark variants count double via components.length + darkCount). Update ComponentCard to remove the unused mapping and directy render the computed count. Tweak SiteHeader translucency classes (bg-white/95 -> bg-white/85 for both normal and supports-backdrop-filter) and update BlogPost to use data.updatedDate (and pass that to FormattedDate) instead of pubDate.
Bump astro (5.17.1 → 5.17.2) and typescript-eslint (8.54.0 → 8.55.0) in package.json. Update pnpm-lock.yaml to reflect the resolved dependency tree and integrity changes (astro resolution, @astrojs/mdx reference to astro@5.17.2, esbuild 0.27.3 and its platform binaries, and updated typescript-eslint package entries). This updates include patch fixes and dependency updates; lockfile updated so installs remain reproducible.
Small UI, accessibility, and utility improvements: - PreviewRefs: Only render prefix when provided (adds trailing space) to avoid rendering null/undefined. - PreviewWrapper: Render plugins section conditionally when plugins exist to avoid empty container. - SiteHeader: Add aria-label="GitHub" to the GitHub link for accessibility. - BaseLayout: Introduce optional ads prop (default true) and forward it to BaseHead. - pages/index.astro: Move collection slicing to after sorting so the first 9 items are taken post-sort. - utils/readingTime.ts: Handle empty/whitespace input by returning 0 and avoid splitting an empty string.
Remove the optional pubDate, tag, and updatedDate fields from the collection schema in src/content.config.ts. These fields were previously defined as z.coerce.date().optional() for dates and z.enum(['new','updated']).optional() for tag; removing them simplifies the content model. Update any content frontmatter or code that relied on these properties accordingly.
Simplify CollectionFeature by removing the explicit `button` prop and generating the call-to-action text using the component `slug` (e.g. "View all {slug} components"). Update usages in src/pages/index.astro to stop passing `button` and add trailing periods to section descriptions for consistency.
Remove the external Inter Google Fonts import from public/component.css to avoid the external dependency and potential FOUC, and delete the explicit "syntaxHighlight: false" entry from astro.config.js to restore syntax highlighting. Also apply related updates to component markup and styles (ComponentPreview.astro, DropdownMenu.astro, PreviewBreakpoints.astro, SearchResults.astro, src/styles/component.css) to keep previews and component styling in sync.
Import @vercel/analytics and instrument search UI to track user interactions. SearchInput now calls track('Search') on input events. SearchResults adds a resultClickHandler to track 'Search Result Clicked' with the clicked link href, registers the handler on mount, and removes it during disconnect along with proper cleanup of handler references.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 125 out of 127 changed files in this pull request and generated 4 comments.
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
src/components/SearchInput.astro:71
track('Search')is fired on everyinputevent, which can generate a very high volume of analytics events (one per keystroke). Consider tracking only on meaningful actions (e.g. debounce and track once per query, on Enter, or when results are clicked) to reduce noise and overhead.
this.inputHandler = () => {
track('Search')
this.dispatchEvent(
new CustomEvent('input:search', {
bubbles: true,
detail: { value: inputEl.value },
}),
)
Add an aria-label="Clear" to the clear button for accessibility and introduce updateButtonState to enable/disable the button based on the input's value. The method is called on component connect, on input events, and after clearing the input so the clear button is disabled when the field is empty and enabled when it has content.
Wrap the category output in a truthy check so the <span> is only rendered if category exists. This avoids emitting an empty span when no category is provided and matches the existing conditional pattern used for components in SearchResults.astro.
Set syntaxHighlight: false in astro.config.js and remove the Vercel Analytics import and track('Search') call from src/components/SearchInput.astro. These changes stop client-side search event tracking and disable syntax highlighting (likely for performance, bundle size, or privacy reasons).
|
|
||
| <p class="text-sm text-gray-600">{description}</p> | ||
|
|
||
| <div class="group inline-flex items-center gap-2 text-gray-700"> |
There was a problem hiding this comment.
The group class is used twice - once on the <article> element at line 22 and again on a nested <div> at line 36. This creates nested group contexts which may cause the hover effects to not work as intended. The inner div's group hover states will be triggered by hovering the inner div, not the article. Consider using a different naming strategy like group/article and group/link or removing the nested group.
Comment on lines
+10
to
+13
| components: | ||
| | CollectionEntry<'application'>['data']['components'] | ||
| | CollectionEntry<'marketing'>['data']['components'] | ||
| | CollectionEntry<'neobrutalism'>['data']['components'] |
There was a problem hiding this comment.
The Props type definition uses a union of component array types which is quite verbose. Consider extracting this to a shared type or using a more generic approach like Array<CollectionEntry<'application' | 'marketing' | 'neobrutalism'>['data']> for better maintainability.
Suggested change
| components: | |
| | CollectionEntry<'application'>['data']['components'] | |
| | CollectionEntry<'marketing'>['data']['components'] | |
| | CollectionEntry<'neobrutalism'>['data']['components'] | |
| components: CollectionEntry<'application' | 'marketing' | 'neobrutalism'>['data']['components'] |
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.
This pull request introduces significant UI and codebase updates focused on modernizing the design system, simplifying components, and improving consistency across the project. Key changes include the introduction of new components for blog and collection features, a comprehensive redesign of component cards and previews, updates to the font system, and the removal of several legacy or redundant components.
Component Additions and Redesigns:
BlogCard.astrofor blog post previews,CollectionFeature.astrofor collection showcases, andBaseHero.astrofor hero sections. These provide improved structure and modern styles. [1] [2] [3]ComponentCard.astrowith a cleaner layout, updated color palette, and simplified props (removedemojiandtag). The card now features a new hover effect and icon. (F26daf56L1, [1] [2]ComponentPreview.astroandPreviewBreakpoints.astrowith updated border, color, and button styles; removed emoji from breakpoints for a more minimal look. [1] [2] [3]Design System and Theming Updates:
Component and Layout Cleanup:
CollectionHeader.astro,CollectionRelated.astro,Hero.astro,HeroUsps.astro,Footer.astro,Header.astro, andHeaderCta.astro. This streamlines the codebase and reduces redundancy. [1] [2] [3] [4] [5] [6] [7]Minor Improvements and Refactoring:
These changes collectively modernize the UI, enhance maintainability, and set a consistent foundation for future development.
References: