refactor: extract redundant max-width into utility

[satnaing]

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.

Demo

extracted-max-w-demo.mp4

Types of changes

• Bug Fix (non-breaking change which fixes an issue)
• New Feature (non-breaking change which adds functionality)
• Documentation Update (if none of the other choices apply)
• Others (any other types not listed above)

Checklist

• I have read the Contributing Guide
• I have added the necessary documentation (if appropriate)
• Breaking Change (fix or feature that would cause existing functionality to not work as expected)

Remark

Obviously, there's a problem with BackToTop button.
Currently, we have to update the position property inside the BackToTop button when we update the max-w-app.
There's gonna be a PR for that.

Related PR & discussion

#490 #436

[fre-ben]

Great idea!

[eerison]

Hi @satnaing thank you to move this feature forward,

I am trying to test your branch locally, but I am getting this error

> astro-paper@5.2.0 dev
app-1  | > astro dev --host 0.0.0.0
app-1  | 
app-1  | [config] Astro found issue(s) with your configuration:
app-1  | 
app-1  | ! image.experimentalLayout: Invalid enum value. Expected 'constrained' | 'fixed' | 'full-width' | 'none', received 'responsive'
app-1  | 
app-1  | ! experimental: Invalid or outdated experimental feature.
app-1  |   Check for incorrect spelling or outdated Astro version.
app-1  |   See https://docs.astro.build/en/reference/experimental-flags/ for a list of all current experiments.

edit: I guess it is related with #521
edit 2: After apply the changes like in this PR #521, it worked!

[eerison]

It is doing exactly what I was wanting ❤️

in case I want to build another layout like mantioned here: #436, it is possible 🥳

Just one point but it is not direct related with this PR, But maybe we could replace those hr (https://github.com/satnaing/astro-paper/blob/main/src/components/Hr.astro) for a bottom line in css. in this way I can remove the line if I need :)

[satnaing]

Hi @eerison

in case I want to build another layout like mantioned here: #436, it is possible 🥳

Yes, exactly.
In terms of the layout width, you now have a lot of flexibility. For example, we can target specific breakpoints easily.

@utility max-w-app {
  @apply max-w-3xl lg:max-w-5xl xl:max-w-full;
}

I don't recommend doing "full-screen" for blog posts tho; as it will affect the readability and user experience.
If we want to have the layout shown in #436, we'll have to do some more customizations.
But it can be done with the current styling solution.

[eerison]

Hi @eerison

in case I want to build another layout like mantioned here: #436, it is possible 🥳

Yes, exactly. In terms of the layout width, you now have a lot of flexibility. For example, we can target specific breakpoints easily.

@utility max-w-app {
  @apply max-w-3xl lg:max-w-5xl xl:max-w-full;
}

I don't recommend doing "full-screen" for blog posts tho; as it will affect the readability and user experience. If we want to have the layout shown in #436, we'll have to do some more customizations. But it can be done with the current styling solution.

I guess it's a good start 😁

[eerison]

And what about Hr component?

[satnaing]

Just one point but it is not direct related with this PR, But maybe we could replace those hr (https://github.com/satnaing/astro-paper/blob/main/src/components/Hr.astro) for a bottom line in css. in this way I can remove the line if I need :)

You meant something like border-b?
If so, I prefer the component <Hr />. It's more semantic. Plus, you don't need to touch css classes if you want to add or remove those lines. You just have to remove the <Hr /> component.
But let me know if you think otherwise. @eerison

[eerison]

Yeah i know I can remove the Component, but the problem with this is, I gonna change files from astro-paper repository, and I want to avoid this, because it gonna be a way easier to update my repository... if i keep doing custom changes in many files I gonna get many conflicts :/

For this reason I would like to change this via css, because I could just keep changes in one file.

[cloudflare-workers-and-pages]

Deploying astro-paper with    Cloudflare Pages

Latest commit:	6dc3609
Status:	✅  Deploy successful!
Preview URL:	https://c25f4eae.astro-paper.pages.dev
Branch Preview URL:	https://refactor-extract-max-width-f.astro-paper.pages.dev

View logs

[satnaing]

@eerison
I got your point, and I think we could replace unnecessary <Hr /> with border styling.
The issue is that a lot of code and layout structures need to be updated to achieve the same result as the current implementation.
Thus, I'll focus on other issues for now. In the future, I'll look into that issue again.

[eerison]

I don't recommend doing "full-screen" for blog posts tho;

Hey @satnaing

just a question is it possible apply different max-w-* by pages?
like in index (#main-content) uses max-w-full and others pages keep the default one (max-w-3xl) ?

[satnaing]

just a question is it possible apply different max-w-* by pages?
like in index (#main-content) uses max-w-full and others pages keep the default one (max-w-3xl) ?

@eerison

Technically, yes.
I've seen some AstroPaper-based blogs with customized full-screen layouts.
However, to do so, the user needs to be able to do custom CSS styling.
The hard part is that it wouldn't be as easy as updating a custom class.