Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Sat Naing
2025-06-09 11:42:33 +07:00
committed by GitHub
parent c7702bb715
commit 5f72b93d92
10 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BackButton.astro
+1 -1
View File
@@ -6,7 +6,7 @@ import { SITE } from "@/config";
{ {
SITE.showBackButton && ( 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 <LinkButton
id="back-button" id="back-button"
href="/" href="/"
src/components/Breadcrumb.astro
+1 -1
View File
@@ -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 <ul
class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100" class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
> >
src/components/Header.astro
+1 -1
View File
@@ -33,7 +33,7 @@ const isActive = (path: string) => {
</a> </a>
<div <div
id="nav-container" 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 <div
id="top-nav-wrap" id="top-nav-wrap"
src/components/Hr.astro
+1 -1
View File
@@ -7,6 +7,6 @@ export interface Props {
const { noPadding = false, ariaHidden = true } = Astro.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} /> <hr class="border-border" aria-hidden={ariaHidden} />
</div> </div>
src/data/blog/how-to-configure-astropaper-theme.md
+13
View File
@@ -69,6 +69,19 @@ Here are SITE configuration options
| `lang` | Used as HTML ISO Language code in `<html lang"en">`. Default is `en`. | | `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. | | `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 ## 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. 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.
src/layouts/AboutLayout.astro
+1 -1
View File
@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props;
<Header /> <Header />
<Breadcrumb /> <Breadcrumb />
<main id="main-content"> <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> <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
<slot /> <slot />
</section> </section>
src/layouts/Main.astro
+1 -1
View File
@@ -24,7 +24,7 @@ const backUrl = SITE.showBackButton ? Astro.url.pathname : "/";
<main <main
data-backUrl={backUrl} data-backUrl={backUrl}
id="main-content" 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 ? ( "titleTransition" in props ? (
src/layouts/PostDetails.astro
+2 -2
View File
@@ -87,7 +87,7 @@ const nextPost =
<main <main
id="main-content" id="main-content"
class:list={[ 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 }, { "mt-8": !SITE.showBackButton },
]} ]}
data-pagefind-body data-pagefind-body
@@ -102,7 +102,7 @@ const nextPost =
<Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" /> <Datetime {pubDatetime} {modDatetime} {timezone} size="lg" class="my-2" />
<EditPost class="max-sm:hidden" {hideEditPost} {post} /> <EditPost class="max-sm:hidden" {hideEditPost} {post} />
</div> </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 /> <Content />
</article> </article>
src/pages/404.astro
+1 -1
View File
@@ -11,7 +11,7 @@ import { SITE } from "@/config";
<main <main
id="main-content" 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"> <div class="mb-14 flex flex-col items-center justify-center">
<h1 class="text-9xl font-bold text-accent">404</h1> <h1 class="text-9xl font-bold text-accent">404</h1>
src/styles/global.css
+5 -1
View File
@@ -50,10 +50,14 @@ html[data-theme="dark"] {
} }
section, section,
footer { 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 { .active-nav {
@apply underline decoration-wavy decoration-2 underline-offset-4; @apply underline decoration-wavy decoration-2 underline-offset-4;
} }