Skip to content

chore(theme-default/style): right asideContainer should exist even no headers#2036

Closed
SoonIter wants to merge 1 commit intomainfrom
style/aside
Closed

chore(theme-default/style): right asideContainer should exist even no headers#2036
SoonIter wants to merge 1 commit intomainfrom
style/aside

Conversation

@SoonIter
Copy link
Member

@SoonIter SoonIter commented Apr 3, 2025

Summary

revert a style adjust to original behavior

image

before

image

after

image

Related Issue

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@netlify
Copy link

netlify bot commented Apr 3, 2025

Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit 95d7eb3
🔍 Latest deploy log https://app.netlify.com/sites/rspress-v2/deploys/67ee015413dd4d0008be02d8
😎 Deploy Preview https://deploy-preview-2036--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify
Copy link

netlify bot commented Apr 3, 2025

Deploy Preview for aquamarine-blini-95325f ready!

Name Link
🔨 Latest commit 95d7eb3
🔍 Latest deploy log https://app.netlify.com/sites/aquamarine-blini-95325f/deploys/67ee01544db8c400081a1881
😎 Deploy Preview https://deploy-preview-2036--aquamarine-blini-95325f.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 76 (🔴 down 3 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (🟢 up 9 from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@SoonIter SoonIter requested a review from Timeless0911 April 3, 2025 03:40
<Aside headers={headers} outlineTitle={outlineTitle} />
{afterOutline}
{headers.length === 0 ? (
<></>
Copy link
Contributor

@Timeless0911 Timeless0911 Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If no headers, should beforeOutline and afterOutline take effect?

Copy link
Contributor

@Timeless0911 Timeless0911 Apr 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Users may use beforeOutline to customize outline, see #1637

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
It should be a breaking change I think.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JounQin seems to resolve issue of overview page style?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JounQin seems to resolve issue of overview page style?

Yes, I was.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

headers.length === 0 && <>
//...
</>

Shoud be fine here.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a new option for this behavior? We don't want to waste the window width.

@JounQin
Copy link
Collaborator

JounQin commented Apr 3, 2025

Can we provide an option for this?

@SoonIter
Copy link
Member Author

Can we provide an option for this?

😂 sorry,

after #2018, the TOC is only generated during CSR, so we need this UI placeholder in the right side for SSG.

Otherwise, there will be a CLS

@JounQin
Copy link
Collaborator

JounQin commented Apr 30, 2025

😂 sorry,

after #2018, the TOC is only generated during CSR, so we need this UI placeholder in the right side for SSG.

Otherwise, there will be a CLS

@SoonIter I think the headers.length could also be checked on SSG + CSR?

@SoonIter
Copy link
Member Author

SoonIter commented Apr 30, 2025

@SoonIter I think the headers.length could also be checked on SSG + CSR?

CSR: first screen(headers.length = 0) -> useEffect (headers.length = n)

SSG: html generation (headers.length = 0) -> first screen hydration(headers.length = 0) -> useEffect (headers.length = n)

So, I think this placeholder is necessary

To avoid CLS

in lg screen, I expect the first screen style to be like this, always with an AsideContainer for placeholder

image

in md screen, the first screen I expected would be

image

we can place a return to top or something else

BTW, not the current context...

I find a bug when entering https://v2.rspress.dev/plugin/official-plugins/llms#usage in md screen

image

pending ...

@JounQin
Copy link
Collaborator

JounQin commented Apr 30, 2025

CSR: first screen(headers.length = 0) -> useEffect (headers.length = n)

I'm not sure to follow, I mean we can check the correct headers.length on server like previous if no customization is required, so headers.length = 0 is unexpected to me.

in lg screen, I expect the first screen style to be like this, always with an AsideContainer for placeholder

I know what's your meaning, that's why I'm asking for a new option to opt-out.

in md screen, the first screen I expected would be

By the way, due to the limitation of useWindowSize at

width: initialWidth ?? Number.POSITIVE_INFINITY,
height: initialHeight ?? Number.POSITIVE_INFINITY,
on server, we're experiencing https://reactjs.org/docs/error-decoder.html?invariant=418 on sm/md screen unfortunately.

@JounQin JounQin deleted the style/aside branch June 26, 2025 12:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants