From 5fcf7a9d33ef87dec0d28fdc4ba498c22d8be3a7 Mon Sep 17 00:00:00 2001 From: joyzhao Date: Thu, 19 Jun 2025 18:10:49 +0800 Subject: [PATCH] feat(ui): add Container component and replace manual container divs Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability. --- src/components/Footer.tsx | 5 ++-- src/components/GlassHeader.tsx | 5 ++-- src/components/ui/Container.tsx | 39 ++++++++++++++++++++++++++++ src/layouts/AboutLayout.astro | 5 ++-- src/layouts/BlogPostLayout.astro | 5 ++-- src/layouts/TaxonomyPageLayout.astro | 5 ++-- src/pages/blog/index.astro | 7 ++--- src/pages/index.astro | 25 +++++++++--------- src/pages/projects.astro | 7 ++--- src/pages/zh/blog/index.astro | 9 ++++--- src/pages/zh/index.astro | 22 +++++++++------- src/pages/zh/projects.astro | 9 ++++--- 12 files changed, 97 insertions(+), 46 deletions(-) create mode 100644 src/components/ui/Container.tsx diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 8e46652..328e8c7 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -3,6 +3,7 @@ import { personalInfo } from "@/lib/data"; import { motion } from "framer-motion"; import { useState, useEffect } from "react"; import { defaultLang } from "@/i18n/ui"; +import Container from "./ui/Container"; import { type FooterProps } from "@/types"; export default function Footer({ lang: propLang }: FooterProps) { @@ -20,7 +21,7 @@ export default function Footer({ lang: propLang }: FooterProps) { const t = useTranslations(lang); return ( ); } diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx index 8ecd821..16599fd 100644 --- a/src/components/GlassHeader.tsx +++ b/src/components/GlassHeader.tsx @@ -1,6 +1,7 @@ import { personalInfo } from "@/lib/data"; import LanguageSwitcher from "./LanguageSwitcher"; import ThemeToggle from "./ui/theme-toggle"; +import Container from "./ui/Container"; import { useTranslations, getLocalizedPath, type Lang } from "@/i18n/utils"; import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; @@ -43,7 +44,7 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) { ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20' : 'bg-transparent' }`}> -
+ : }
- + {/* Mobile Navigation */}
+ {children} +
+ ); +} \ No newline at end of file diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro index f1f1883..3d32436 100644 --- a/src/layouts/AboutLayout.astro +++ b/src/layouts/AboutLayout.astro @@ -5,6 +5,7 @@ import { type Lang, type FrontmatterProps } from '@/types'; import { defaultLang } from '@/i18n/ui'; import GlassHeader from '@/components/GlassHeader'; import Footer from '@/components/Footer'; +import Container from '../components/ui/Container'; // Use Astro's MarkdownLayoutProps for proper type safety export type Props = MarkdownLayoutProps; @@ -21,7 +22,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
-
+
@@ -29,7 +30,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
-
+
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro index 9557eef..f71f7e9 100644 --- a/src/layouts/BlogPostLayout.astro +++ b/src/layouts/BlogPostLayout.astro @@ -10,6 +10,7 @@ import AuthorCard from '@/components/AuthorCard'; import TableOfContents from '@/components/layout/TableOfContents.astro'; import BlogNavigation from '@/components/layout/BlogNavigation.astro'; import PostMeta from '@/components/blog/PostMeta.astro'; +import Container from '../components/ui/Container'; // Use Astro's MarkdownLayoutProps for proper type safety export type Props = MarkdownLayoutProps; @@ -41,7 +42,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
-
+
@@ -98,7 +99,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
-
+
diff --git a/src/layouts/TaxonomyPageLayout.astro b/src/layouts/TaxonomyPageLayout.astro index 84bfa30..24563b4 100644 --- a/src/layouts/TaxonomyPageLayout.astro +++ b/src/layouts/TaxonomyPageLayout.astro @@ -7,6 +7,7 @@ import BlogLayout from './BlogLayout.astro'; import BlogList from '../components/blog/BlogList.astro'; import CategoryCard from '../components/blog/CategoryCard.astro'; import TagCard from '../components/blog/TagCard.astro'; +import Container from '../components/ui/Container'; import { type Lang } from '@/i18n/utils'; import { defaultLang } from '@/i18n/ui'; import { type BlogPost } from '@/types'; @@ -53,7 +54,7 @@ const localizedText = getLocalizedText(); --- -
+

@@ -91,5 +92,5 @@ const localizedText = getLocalizedText(); )}

-
+ \ No newline at end of file diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 2fadc26..6435ec6 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -3,6 +3,7 @@ import BlogLayout from '../../layouts/BlogLayout.astro'; import BlogList from '../../components/blog/BlogList.astro'; import CategoryCard from '../../components/blog/CategoryCard.astro'; import TagCard from '../../components/blog/TagCard.astro'; +import Container from '../../components/ui/Container'; import { type BlogPost } from '@/types'; import { type Lang } from '@/i18n/utils'; import { defaultLang } from '@/i18n/ui'; @@ -43,7 +44,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
-
+

Our Latest Blog @@ -52,10 +53,10 @@ const sortedBlogPosts = sortPostsByDate(blogPosts); Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.

-
+ -
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 9991f18..33c0437 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,7 @@ import Layout from "@/layouts/Layout.astro"; import GlassHeader from "@/components/GlassHeader"; import SkillsMarquee from "@/components/SkillsMarquee"; import Footer from "@/components/Footer"; +import Container from "@/components/ui/Container"; import { useTranslations, type Lang } from "@/i18n/utils"; import { defaultLang } from "@/i18n/ui"; import { personalInfo, services } from "@/lib/data"; @@ -14,14 +15,14 @@ const pageTitle = t('site.title'); --- - +
-
+
-
+
@@ -162,14 +163,14 @@ const pageTitle = t('site.title');
-
+ -
-
+
+

Services I Offer

@@ -196,7 +197,7 @@ const pageTitle = t('site.title');
))}
-
+ @@ -204,7 +205,7 @@ const pageTitle = t('site.title');
-
+
@@ -331,15 +332,15 @@ const pageTitle = t('site.title');
-
+ - +
-
+

Latest Projects @@ -547,7 +548,7 @@ const pageTitle = t('site.title');

-
+