refactor: extract redundant max-width into utility (satnaing#525)

satnaing · web-flow · commit eb5cbf400161 · 2025-06-09T11:42:33.000+07:00
* refactor: extract redundant max-width into utility

Extract redundant max-width into a universal tailwind
utility class. By doing so, the width of the layout
in different pages can be customized easily.

* docs: update docs for modifying `max-w-app` utility
diff --git a/src/components/BackButton.astro b/src/components/BackButton.astro
@@ -6,7 +6,7 @@ import { SITE } from "@/config";
 
 {
   SITE.showBackButton && (
-    <div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">
+    <div class="mx-auto flex w-full max-w-app items-center justify-start px-2">
       <LinkButton
         id="back-button"
         href="/"
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
 }
 ---
 
-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">
+<nav class="mx-auto mt-8 mb-1 w-full max-w-app px-4" aria-label="breadcrumb">
   <ul
     class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
   >
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -33,7 +33,7 @@ const isActive = (path: string) => {
   </a>
   <div
     id="nav-container"
-    class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"
+    class="mx-auto flex max-w-app flex-col items-center justify-between sm:flex-row"
   >
     <div
       id="top-nav-wrap"
diff --git a/src/components/Hr.astro b/src/components/Hr.astro
@@ -7,6 +7,6 @@ export interface Props {
 const { noPadding = false, ariaHidden = true } = Astro.props;
 ---
 
-<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
+<div class:list={["mx-auto max-w-app", noPadding ? "px-0" : "px-4"]}>
   <hr class="border-border" aria-hidden={ariaHidden} />
 </div>
diff --git a/src/data/blog/how-to-configure-astropaper-theme.md b/src/data/blog/how-to-configure-astropaper-theme.md
@@ -69,6 +69,19 @@ Here are SITE configuration options
 | `lang`                | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`.                                                                                                                                                                                                                                                                                                                                                             |
 | `timezone`            | This option allows you to specify your timezone using the [IANA format](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). Setting this ensures consistent timestamps across your localhost and deployed site, eliminating time differences.                                                                                                                                                                          |
 
+## Update layout width
+
+The default `max-width` for the entire blog is `768px` (`max-w-3xl`). If you'd like to change it, you can easily update the `max-w-app` utility in your `src/styles/global.css` file:
+
+```css
+@utility max-w-app {
+  @apply max-w-4xl xl:max-w-5xl;
+  /* eg: max-w-4xl xl:max-w-5xl */
+}
+```
+
+You can explore more `max-width` values in the [Tailwind CSS docs](https://tailwindcss.com/docs/max-width).
+
 ## Configuring logo or title
 
 Prior to AstroPaper v5, you can update your site name/logo in `LOGO_IMAGE` object inside `src/config.ts` file. However, in AstroPaper v5, this option has been removed in favor of Astro's built-in SVG and Image components.
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props;
   <Header />
   <Breadcrumb />
   <main id="main-content">
-    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
+    <section id="about" class="prose mb-28 max-w-app prose-img:border-0">
       <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
       <slot />
     </section>
diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro
@@ -24,7 +24,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
 <main
   data-backUrl={backUrl}
   id="main-content"
-  class="mx-auto w-full max-w-3xl px-4 pb-4"
+  class="mx-auto w-full max-w-app px-4 pb-4"
 >
   {
     "titleTransition" in props ? (
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
@@ -87,7 +87,7 @@ const nextPost =
   <main
     id="main-content"
     class:list={[
-      "mx-auto w-full max-w-3xl px-4 pb-12",
+      "mx-auto w-full max-w-app px-4 pb-12",
       { "mt-8": !SITE.showBackButton },
     ]}
     data-pagefind-body
@@ -102,7 +102,7 @@ const nextPost =
       <Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
       <EditPost class="max-sm:hidden" {hideEditPost} {post} />
     </div>
-    <article id="article" class="mx-auto prose mt-8 max-w-3xl">
+    <article id="article" class="mx-auto prose mt-8 max-w-app">
       <Content />
     </article>
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -11,7 +11,7 @@ import { SITE } from "@/config";
 
   <main
     id="main-content"
-    class="mx-auto flex max-w-3xl flex-1 items-center justify-center"
+    class="mx-auto flex max-w-app flex-1 items-center justify-center"
   >
     <div class="mb-14 flex flex-col items-center justify-center">
       <h1 class="text-9xl font-bold text-accent">404</h1>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -50,10 +50,14 @@ html[data-theme="dark"] {
   }
   section,
   footer {
-    @apply mx-auto max-w-3xl px-4;
+    @apply mx-auto max-w-app px-4;
   }
 }
 
+@utility max-w-app {
+  @apply max-w-3xl;
+}
+
 .active-nav {
   @apply underline decoration-wavy decoration-2 underline-offset-4;
 }

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import { SITE } from "@/config";`
`6`	`6`
`7`	`7`	`{`
`8`	`8`	`SITE.showBackButton && (`
`9`		`- <div class="mx-auto flex w-full max-w-3xl items-center justify-start px-2">`
	`9`	`+ <div class="mx-auto flex w-full max-w-app items-center justify-start px-2">`
`10`	`10`	`<LinkButton`
`11`	`11`	`id="back-button"`
`12`	`12`	`href="/"`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {`
`23`	`23`	`}`
`24`	`24`	`---`
`25`	`25`
`26`		`-<nav class="mx-auto mt-8 mb-1 w-full max-w-3xl px-4" aria-label="breadcrumb">`
	`26`	`+<nav class="mx-auto mt-8 mb-1 w-full max-w-app px-4" aria-label="breadcrumb">`
`27`	`27`	`<ul`
`28`	`28`	`class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"`
`29`	`29`	`>`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ const isActive = (path: string) => {`
`33`	`33`	`</a>`
`34`	`34`	`<div`
`35`	`35`	`id="nav-container"`
`36`		`- class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"`
	`36`	`+ class="mx-auto flex max-w-app flex-col items-center justify-between sm:flex-row"`
`37`	`37`	`>`
`38`	`38`	`<div`
`39`	`39`	`id="top-nav-wrap"`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";`
`24`	`24`	`<main`
`25`	`25`	`data-backUrl={backUrl}`
`26`	`26`	`id="main-content"`
`27`		`- class="mx-auto w-full max-w-3xl px-4 pb-4"`
	`27`	`+ class="mx-auto w-full max-w-app px-4 pb-4"`
`28`	`28`	`>`
`29`	`29`	`{`
`30`	`30`	`"titleTransition" in props ? (`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import { SITE } from "@/config";`
`11`	`11`
`12`	`12`	`<main`
`13`	`13`	`id="main-content"`
`14`		`- class="mx-auto flex max-w-3xl flex-1 items-center justify-center"`
	`14`	`+ class="mx-auto flex max-w-app flex-1 items-center justify-center"`
`15`	`15`	`>`
`16`	`16`	`<div class="mb-14 flex flex-col items-center justify-center">`
`17`	`17`	`<h1 class="text-9xl font-bold text-accent">404</h1>`
Original file line number	Diff line number	Diff line change
`@@ -50,10 +50,14 @@ html[data-theme="dark"] {`
`50`	`50`	`}`
`51`	`51`	`section,`
`52`	`52`	`footer {`
`53`		`- @apply mx-auto max-w-3xl px-4;`
	`53`	`+ @apply mx-auto max-w-app px-4;`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`
	`57`	`+@utility max-w-app {`
	`58`	`+ @apply max-w-3xl;`
	`59`	`+}`
	`60`	`+`
`57`	`61`	`.active-nav {`
`58`	`62`	`@apply underline decoration-wavy decoration-2 underline-offset-4;`
`59`	`63`	`}`