refactor(templates): split resources detail parts - #21
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR migrates page-level rendering to a React/TSX component system (atoms/molecules/organisms/templates) and wires up Storybook + Vitest browser testing, refactoring existing Astro pages/layouts to consume the new components.
Changes:
- Introduces a TSX component library structure (atoms/molecules/organisms/templates/foundations) with Storybook stories and interaction tests.
- Refactors core site routes (home/about/blog/resources) and
BaseLayoutto use the new templates and organisms. - Adds Storybook + Vitest browser test configuration and CI execution (including Playwright install).
Reviewed changes
Copilot reviewed 152 out of 156 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.config.ts | Adds Vitest project for Storybook/browser tests |
| tsconfig.json | Enables React JSX + includes .storybook |
| src/pages/rss.xml.ts | Updates withBase import path |
| src/pages/resources/index.astro | Refactors to ResourcesIndexTemplate |
| src/pages/resources/[...slug].astro | Refactors to ResourcesDetailTemplate |
| src/pages/index.astro | Refactors to HomeTemplate |
| src/pages/blog/index.astro | Refactors to BlogIndexTemplate |
| src/pages/blog/[slug].astro | Refactors to BlogPostTemplate |
| src/pages/about.astro | Refactors to AboutTemplate |
| src/layouts/BaseLayout.astro | Uses new Navbar/Footer, updates withBase import |
| src/data/brand.ts | Adds designTokens content |
| src/data-models/brand.ts | Adds design-token typings |
| src/components/utils/with-base.ts | New base-URL utilities under components |
| src/components/ui/Card.astro | Removed (replaced by TSX Card molecule) |
| src/components/ui/Button.astro | Removed (replaced by TSX Button atom) |
| src/components/templates/index.ts | Exports new templates barrel |
| src/components/templates/ResourcesIndexTemplate/index.ts | Barrel for resources index template |
| src/components/templates/ResourcesIndexTemplate/ResourcesIndexTemplate.types.ts | Types for resources index items/props |
| src/components/templates/ResourcesIndexTemplate/ResourcesIndexTemplate.tsx | React resources index template |
| src/components/templates/ResourcesIndexTemplate/ResourcesIndexTemplate.stories.tsx | Storybook stories for resources index |
| src/components/templates/ResourcesDetailTemplate/index.ts | Barrel for resources detail template |
| src/components/templates/ResourcesDetailTemplate/ResourcesDetailTemplate.types.ts | Types for resources detail props |
| src/components/templates/ResourcesDetailTemplate/ResourcesDetailTemplate.tsx | React resources detail template |
| src/components/templates/ResourcesDetailTemplate/ResourcesDetailTemplate.stories.tsx | Storybook stories for resources detail |
| src/components/templates/HomeTemplate/index.ts | Barrel for home template |
| src/components/templates/HomeTemplate/HomeTemplate.types.ts | Types for home template inputs |
| src/components/templates/HomeTemplate/HomeTemplate.tsx | React home page template |
| src/components/templates/HomeTemplate/HomeTemplate.stories.tsx | Storybook stories for home template |
| src/components/templates/BlogPostTemplate/index.ts | Barrel for blog post template |
| src/components/templates/BlogPostTemplate/BlogPostTemplate.types.ts | Types for blog post template |
| src/components/templates/BlogPostTemplate/BlogPostTemplate.tsx | React blog post template wrapper |
| src/components/templates/BlogPostTemplate/BlogPostTemplate.stories.tsx | Storybook stories for blog post template |
| src/components/templates/BlogIndexTemplate/index.ts | Barrel for blog index template |
| src/components/templates/BlogIndexTemplate/BlogIndexTemplate.types.ts | Types for blog index |
| src/components/templates/BlogIndexTemplate/BlogIndexTemplate.tsx | React blog index template |
| src/components/templates/BlogIndexTemplate/BlogIndexTemplate.stories.tsx | Storybook stories for blog index |
| src/components/templates/AboutTemplate/index.ts | Barrel for about template |
| src/components/templates/AboutTemplate/AboutTemplate.types.ts | Types for about template |
| src/components/templates/AboutTemplate/AboutTemplate.tsx | React about page template |
| src/components/templates/AboutTemplate/AboutTemplate.stories.tsx | Storybook stories for about template |
| src/components/organisms/index.ts | Organisms barrel exports |
| src/components/organisms/Team/index.ts | Barrel for Team |
| src/components/organisms/Team/Team.types.ts | Types for Team organism |
| src/components/organisms/Team/Team.tsx | React Team organism |
| src/components/organisms/Team/Team.stories.tsx | Team stories |
| src/components/organisms/SocialLinks/index.ts | Barrel for SocialLinks |
| src/components/organisms/SocialLinks/SocialLinks.types.ts | Types for SocialLinks |
| src/components/organisms/SocialLinks/SocialLinks.tsx | React SocialLinks organism |
| src/components/organisms/SocialLinks/SocialLinks.stories.tsx | SocialLinks stories/tests |
| src/components/organisms/ResourcesRelatedList/index.ts | Barrel for related list |
| src/components/organisms/ResourcesRelatedList/ResourcesRelatedList.types.ts | Types for related list |
| src/components/organisms/ResourcesRelatedList/ResourcesRelatedList.tsx | Related resources list organism |
| src/components/organisms/ResourcesRelatedList/ResourcesRelatedList.stories.tsx | Related list stories |
| src/components/organisms/PageIntro/index.ts | Barrel for PageIntro |
| src/components/organisms/PageIntro/PageIntro.types.ts | Types for PageIntro |
| src/components/organisms/PageIntro/PageIntro.tsx | Page intro organism |
| src/components/organisms/PageIntro/PageIntro.stories.tsx | PageIntro stories |
| src/components/organisms/Navbar/index.ts | Barrel for Navbar |
| src/components/organisms/Navbar/Navbar.types.ts | Types for Navbar |
| src/components/organisms/Navbar/Navbar.tsx | Navbar organism using withBase |
| src/components/organisms/Navbar/Navbar.stories.tsx | Navbar stories/tests |
| src/components/organisms/HomeHero/index.ts | Barrel for HomeHero |
| src/components/organisms/HomeHero/HomeHero.types.ts | Types for HomeHero |
| src/components/organisms/HomeHero/HomeHero.tsx | Home hero organism |
| src/components/organisms/HomeHero/HomeHero.stories.tsx | HomeHero stories/tests |
| src/components/organisms/Footer/index.ts | Barrel for Footer |
| src/components/organisms/Footer/Footer.types.ts | Types for Footer |
| src/components/organisms/Footer/Footer.tsx | Footer organism |
| src/components/organisms/Footer/Footer.stories.tsx | Footer stories |
| src/components/organisms/FeaturesSection/index.ts | Barrel for FeaturesSection |
| src/components/organisms/FeaturesSection/FeaturesSection.types.ts | Types for FeaturesSection |
| src/components/organisms/FeaturesSection/FeaturesSection.tsx | Features section organism |
| src/components/organisms/FeaturesSection/FeaturesSection.stories.tsx | FeaturesSection stories |
| src/components/organisms/CallToActionSection/index.ts | Barrel for CTA section |
| src/components/organisms/CallToActionSection/CallToActionSection.types.ts | Types for CTA section |
| src/components/organisms/CallToActionSection/CallToActionSection.tsx | CTA section organism |
| src/components/organisms/CallToActionSection/CallToActionSection.stories.tsx | CTA stories/tests |
| src/components/organisms/ArticleHeader/index.ts | Barrel for ArticleHeader |
| src/components/organisms/ArticleHeader/ArticleHeader.types.ts | Types for article header |
| src/components/organisms/ArticleHeader/ArticleHeader.tsx | Shared header for blog/resources |
| src/components/organisms/ArticleHeader/ArticleHeader.stories.tsx | ArticleHeader stories |
| src/components/molecules/index.ts | Molecules barrel exports |
| src/components/molecules/TagList/index.ts | Barrel for TagList |
| src/components/molecules/TagList/TagList.types.ts | Types for TagList |
| src/components/molecules/TagList/TagList.tsx | Tag list molecule |
| src/components/molecules/TagList/TagList.stories.tsx | TagList stories |
| src/components/molecules/ResourceCanonicalLink/index.ts | Barrel for canonical link molecule |
| src/components/molecules/ResourceCanonicalLink/ResourceCanonicalLink.types.ts | Types for canonical link |
| src/components/molecules/ResourceCanonicalLink/ResourceCanonicalLink.tsx | Canonical link molecule |
| src/components/molecules/ResourceCanonicalLink/ResourceCanonicalLink.stories.tsx | Canonical link stories |
| src/components/molecules/MetaGroup/index.ts | Barrel for MetaGroup |
| src/components/molecules/MetaGroup/MetaGroup.types.ts | Types for MetaGroup |
| src/components/molecules/MetaGroup/MetaGroup.tsx | Metadata group molecule |
| src/components/molecules/MetaGroup/MetaGroup.stories.tsx | MetaGroup stories |
| src/components/molecules/HeroActions/index.ts | Barrel for HeroActions |
| src/components/molecules/HeroActions/HeroActions.types.ts | Types for HeroActions |
| src/components/molecules/HeroActions/HeroActions.tsx | Hero actions molecule |
| src/components/molecules/HeroActions/HeroActions.stories.tsx | HeroActions stories/tests |
| src/components/molecules/FeatureGrid/index.ts | Barrel for FeatureGrid |
| src/components/molecules/FeatureGrid/FeatureGrid.types.ts | Types for FeatureGrid |
| src/components/molecules/FeatureGrid/FeatureGrid.tsx | Feature grid molecule |
| src/components/molecules/FeatureGrid/FeatureGrid.stories.tsx | FeatureGrid stories |
| src/components/molecules/Card/index.ts | Barrel for Card |
| src/components/molecules/Card/Card.types.ts | Types for Card molecule |
| src/components/molecules/Card/Card.tsx | React Card molecule |
| src/components/molecules/Card/Card.stories.tsx | Card stories/tests |
| src/components/index.ts | Switches to layer barrels exports |
| src/components/foundations/index.ts | Adds foundations barrel |
| src/components/foundations/BrandTokens/index.ts | Barrel for BrandTokens |
| src/components/foundations/BrandTokens/BrandTokens.tsx | Brand tokens reference component |
| src/components/foundations/BrandTokens/BrandTokens.stories.tsx | BrandTokens story |
| src/components/features/Team.astro | Removed (migrated to TSX organism) |
| src/components/features/SocialLinks.astro | Removed (migrated to TSX organism) |
| src/components/atoms/index.ts | Atoms barrel exports |
| src/components/atoms/SectionHeading/index.ts | Barrel for SectionHeading |
| src/components/atoms/SectionHeading/SectionHeading.types.ts | Types for SectionHeading |
| src/components/atoms/SectionHeading/SectionHeading.tsx | Section heading atom |
| src/components/atoms/SectionHeading/SectionHeading.stories.tsx | SectionHeading stories |
| src/components/atoms/SectionDescription/index.ts | Barrel for SectionDescription |
| src/components/atoms/SectionDescription/SectionDescription.types.ts | Types for SectionDescription |
| src/components/atoms/SectionDescription/SectionDescription.tsx | Section description atom |
| src/components/atoms/SectionDescription/SectionDescription.stories.tsx | SectionDescription stories |
| src/components/atoms/Pill/index.ts | Barrel for Pill |
| src/components/atoms/Pill/Pill.types.ts | Types for Pill |
| src/components/atoms/Pill/Pill.tsx | Pill atom |
| src/components/atoms/Pill/Pill.stories.tsx | Pill stories |
| src/components/atoms/PageHeading/index.ts | Barrel for PageHeading |
| src/components/atoms/PageHeading/PageHeading.types.ts | Types for PageHeading |
| src/components/atoms/PageHeading/PageHeading.tsx | Page heading atom |
| src/components/atoms/PageHeading/PageHeading.stories.tsx | PageHeading stories |
| src/components/atoms/MetaLine/index.ts | Barrel for MetaLine |
| src/components/atoms/MetaLine/MetaLine.types.ts | Types for MetaLine |
| src/components/atoms/MetaLine/MetaLine.tsx | Meta line atom |
| src/components/atoms/MetaLine/MetaLine.stories.tsx | MetaLine stories |
| src/components/atoms/HighlightedTitle/index.ts | Barrel for HighlightedTitle |
| src/components/atoms/HighlightedTitle/HighlightedTitle.types.ts | Types for HighlightedTitle |
| src/components/atoms/HighlightedTitle/HighlightedTitle.tsx | Highlighted title atom |
| src/components/atoms/HighlightedTitle/HighlightedTitle.stories.tsx | HighlightedTitle stories |
| src/components/atoms/Button/index.ts | Barrel for Button atom |
| src/components/atoms/Button/Button.types.ts | Types for Button atom |
| src/components/atoms/Button/Button.tsx | React Button atom |
| src/components/atoms/Button/Button.stories.tsx | Button stories/tests |
| postcss.config.cjs | Adds PostCSS config for Tailwind/autoprefixer |
| package.json | Adds React/Storybook/Vitest/Playwright deps + scripts |
| eslint.config.mjs | Adds boundaries plugin + import rules |
| astro.config.mjs | Adds React integration |
| README.md | Documents new structure + Storybook commands |
| AGENTS.md | Updates repo guidance for new structure |
| .storybook/vitest.setup.ts | Vitest setup for Storybook tests |
| .storybook/preview.ts | Storybook preview params + global CSS |
| .storybook/preview-head.html | Injects CSS vars/fonts for Storybook |
| .storybook/main.ts | Storybook Vite config + addons |
| .gitignore | Ignores PLAN.md |
| .github/workflows/ci.yml | Adds Playwright install + Storybook tests |
| .agents/skills/storybook/SKILL.md | Adds Storybook repo skill doc |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Document relative imports within component folders and expand story coverage/layouts for clearer Storybook usage.
Extract canonical link and related list components, and let blog post template wrap content while updating stories and usage.
georg-schwarz
force-pushed
the
apply-storybook-on-all-pages
branch
from
March 6, 2026 09:15
750c8b1 to
e2e9dd1
Compare
Remove duplicate PageIntro spacing and switch template children types to ReactNode imports.
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
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
Testing
Notes