zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Container): simplify container component and remove size prop

Browse Source 
Remove size variants from Container component and set a default max-width
Update all instances where Container was used with size prop to use default
This commit is contained in:
joyzhao
2025-06-19 18:26:05 +08:00
parent 5fcf7a9d33
commit f4ff971c85
12 changed files with 23 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/blog/index.astro
View File

@@ -44,7 +44,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
<BlogLayout title="Blog - Joy Zhao" description="Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.">
<main class="min-h-screen">
<!-- Header Section -->
<Container client:load size="md" className="pt-24 pb-12">
<Container client:load className="pt-24 pb-12">
<div class="text-center mb-16">
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
Our <span class="text-purple-500">Latest</span> Blog
@@ -56,7 +56,7 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
</Container>
<!-- Main Content -->
<Container client:load size="md" className="pb-20">
<Container client:load className="pb-20">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- 侧边栏 -->
<div class="lg:col-span-1 space-y-8">

8
src/pages/index.astro
View File

@@ -22,7 +22,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Greeting -->
<div class="flex items-center justify-center mb-6">
@@ -170,7 +170,7 @@ const pageTitle = t('site.title');
<!-- Services Section - Inlined Content -->
<section id="services" class="py-20 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
<Container client:load size="md">
<Container client:load>
<h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
Services I Offer
</h2>
@@ -205,7 +205,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Section Title -->
<div class="flex items-center justify-center mb-6">
@@ -340,7 +340,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
Latest Projects

4
src/pages/projects.astro
View File

@@ -24,7 +24,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Main title -->
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
@@ -44,7 +44,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
{currentProjects.map((project) => (
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>

4
src/pages/zh/blog/index.astro
View File

@@ -56,7 +56,7 @@ const tags = extractTags(allPostsArray);
<BlogLayout title="博客 - 赵桂阳" description="深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。">
<main class="min-h-screen">
<!-- 头部区域 -->
<Container client:load size="md" className="pt-24 pb-12">
<Container client:load className="pt-24 pb-12">
<div class="text-center mb-16">
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
我的<span class="text-purple-500">博客</span>
@@ -68,7 +68,7 @@ const tags = extractTags(allPostsArray);
</Container>
<!-- 主要内容 -->
<Container client:load size="md" className="pb-20">
<Container client:load className="pb-20">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- 侧边栏 -->
<div class="lg:col-span-1 space-y-8">

8
src/pages/zh/index.astro
View File

@@ -22,7 +22,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Greeting -->
<div class="flex items-center justify-center mb-6">
@@ -171,7 +171,7 @@ const pageTitle = t('site.title');
<!-- Services Section - Inlined Content -->
<section id="services" class="py-20 px-4 bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
<Container client:load size="md">
<Container client:load>
<h2 class="text-4xl font-bold text-center mb-16 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
我提供的服务
</h2>
@@ -206,7 +206,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-900/10 via-purple-800/5 to-indigo-700/10 dark:from-blue-900/20 dark:via-purple-800/10 dark:to-indigo-700/20"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Section Title -->
<div class="flex items-center justify-center mb-6">
@@ -341,7 +341,7 @@ const pageTitle = t('site.title');
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-transparent">
我的项目

4
src/pages/zh/projects.astro
View File

@@ -24,7 +24,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-purple-800/10 to-purple-700/20 dark:from-purple-900/30 dark:via-purple-800/20 dark:to-purple-700/30"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="text-center mb-16">
<!-- Main title -->
<h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-gray-900 via-purple-600 to-purple-800 dark:from-white dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent">
@@ -44,7 +44,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
<!-- Background gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-900/5 to-transparent"></div>
<Container client:load size="md" className="relative z-10">
<Container client:load className="relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-stretch">
{currentProjects.map((project) => (
<div class={`group overflow-hidden border border-${project.color}-500/20 hover:border-${project.color}-500/40 h-full flex flex-col transition-all duration-500 hover:scale-105 bg-white/10 dark:bg-gray-800/50 backdrop-blur-sm rounded-xl relative`}>