Update to Starlight 0.34.4
#11870
Update to Starlight 0.34.4
#11870
Conversation
This should makes updating easier
✅ Deploy Preview for astro-docs-2 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
bot
added
the
i18n
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
HiDeoo
added
the
site improvement
|
I noticed some small differences on the homepage, using Firefox on Linux. There are slight spacing differences (not a big deal I think) in the:
And, in 810x1080, look at the height of the cards icons:
|
|
We can handle the Lunaria stuff by adding: |
|
Thanks for the reports @ArmandPhilippot 🙌
Interesting, this does not happen in Chrome, but I found why this happens:
This float seems to slightly offset things rendered after the image causing the slight changes you noticed in the "Learn Astro" ad too. Enforcing a height of In this case, I think we can conclude that the new version is actually correct and we use the authored height of
I've opened withastro/starlight#3248 to fix the issue in Starlight itself. |
|
Nice finding! Houston is so powerful that he can move things from a distance. 😆 I noticed two other things, still on Linux. Using Firefox in 810x1080, the search box in the header is shorter. Here's a short video showing the preview (first) vs the live docs: astro-docs-search-width.webmThis doesn't seem to be the case on Chromium though! And conversely, using Chromium in 1180x820, I noticed the text baseline doesn't seem the same in various places (header, sidebar, page title, ad). Here's a short video showing the preview (first) vs the live docs: astro-docs-text-alignment.webmBut this doesn't seem to be the case on Firefox. 😅 I haven't been able to identify what's different in both cases...
So, after your fix in Starlight, I think everything looks fine. Great job, again! 🙌🏽 |
|
Intriguing 🤔 I was not able to reproduce both of the issues in both Chrome or Firefox. I'll try on a Windows machine when I can get access to one, maybe it's not visible on macOS due to Retina resolution or something like that. In the meantime, I'm also setting up in this branch the visual diffing tool we used when introducing cascade layers in Starlight, should be easier to spot tiny differences that can easily be missed by eye. |
|
Oh, the search box shift doesn't seem to happen on all the pages! This happens on Install Astro and Develop and build. However, Why Astro and Project Structure seems fine! So maybe you tried on a different page than the video? And that explains why I couldn't get a reproduction yesterday... I had noticed that in T&D but I must have been on another page while writing my initial comment because I couldn't reproduce that anymore so I skipped it... It seems to happen only between 800 and 812... 👀 I tried to check on my tablet but the viewport size is not the same so everything is fine there. However, I noticed another strange thing: in portrait mode on my tablet, the preview appears as in mobile view (ie. hamburger menu) while the live docs appears with the sidebar visible. 😅 I don't get why I get a different view... But, it doesn't seem related to your PR! I tried a deploy preview on another PR and I have the same thing. |
Funny thing, as I could not reproduce, I actually checked which page you were on in the video you shared and tested on the same page 😅 I hope me testing on a non-apple device will share more insight into the issue. |
|
I tried to investigate a bit more about those two issues. I have a new build and a fresh install of Windows 11 and Linux, so I tried to see if I was able to reproduce them. I think I solved the Firefox mystery! I was surprised because the Install page is now fine on my side, but I still see the shorter searchbox on some pages... 😅 The pages where the search box seems longer on live docs have a slight horizontal overflow because of headings links (what I was describing on Discord during T&D):
So the live version is wrong, and your PR fixes that as well! However, regarding the text alignment issue:
So maybe this is one is Linux-only or at least Arch-based only? |
|
As brilliantly suggested by Chris, I ported the visual diffing tool we used in Starlight when implementing cascade layers and used it to compare the local version of this branch with the live version of the docs. I temporarily pushed the tool to this branch too in case anyone wants to try it out ( Here are the results of the visual diffing:
|
That's quite the investigation and good news 🕵️ Thanks a lot @ArmandPhilippot
Interesting, would you be able to provide 4 extra screenshots?
To get the the computed styles and rendered font visible, if needed, here is a screenshot with numbered steps: 
|
|
Thanks for the steps, really helpful (I don't use Chromium often)! With the page title selected since it seems different between the two:
(the screenshots should be the same sizes if you open them in full screen, in another tab) I also checked the values for: @media (min-width: 50em) {
:root {
--sl-nav-height: 4rem;
--sl-nav-pad-x: 1.5rem;
--sl-text-h1: var(--sl-text-5xl);
--sl-text-h2: var(--sl-text-4xl);
--sl-text-h3: var(--sl-text-3xl);
--sl-text-h4: var(--sl-text-2xl);
}
}Everything looks the same... except the rendering. |
|
I just installed EndeavourOS in a virtual machine, with xfce4 as the desktop environment based on your screenshots (not entirely sure about the guess but should not matter hopefully), installed Chromium using
I guess the fact that I was in a virtual machine, or using a slightly different versions of Chromium, or maybe it's something else entirely, can still play a role in this. I'll see if I can think of any other way to reproduce the issue. |
|
You guessed correctly it's XFCE, sorry I didn't think of precising the DE! I upgraded my packages to have the same version of Chromium and it still there. However, looking at your screenshots, have you only tested in full desktop view (ie. without responsive tools opened)? In my tests:
I just tried to resize the window instead (by superposing the live and preview websites and using alt+tab) and I don't see any shift or misaligned text! So, it seems this is only reproducible with dev tools opened (at least on my side 😅 )! If that's the case, maybe it's not important after all? (and sorry that you spent time on this...) |
|
Ok, spent a bit more time on this and I think I may have found a set of steps not involving the preview branch at all, which I think would show that this may be a Chrome/Linux/EndeavourOS or w/e issue:
The text we were focusing on (and all other text basically) should have shifted slightly. Could you confirm this behavior on your end? |
|
Amazing! 🙌🏽 Yeah, I can totally reproduce that on the live site with your steps! I think I identified simpler steps:
The only difference is WHEN I opened the dev tools: before or after navigating to a page. But the why remains a mystery to me... I tried to reproduce the same steps on other websites and I can't see any difference between the tabs. Even on Starlight. But looking at Astro Docs vs Starlight:
By focusing only on the header, where the content is the same, Starlight alignment matches the one after the shift on Astro Docs. So, I guess the "bug" is the state before opening the dev tools... and then it gets fixed!? This is really weird. 😅 |
|
From the limited investigation I made by simplifying the DOM to the point where I only add 1 text node and a very few CSS rules applied, this may be a Linux-only (no idea if the distribution or desktop environment matters), Chrome-only, Devtools-only, Responsive-mode-only issue related to antialiasing. Small additional question: for the Starlight docs screenshot, is that in a fresh tab? I was only able to repoduce it on the Starlight docs after doing all the shenanigans of opening the devtools and refreshing the page. Otherwise, it looks normal for me. |
|
Yes, in a new tab and from the moment I open the dev tools on a page (without navigating anywhere after that, unlike Astro Docs). But the alignment seems fine if I resize the windows instead of using dev tools! |
Ok, yeah, so it's fine without opening the devtools, that's what I wanted to make sure, thanks for the clarification 👍 |
|
Tested a few pages in Edge (someone had to do it) Everything seems to appear and function normally from some random clicking around |
sarah11918
left a comment
sarah11918
left a comment
There was a problem hiding this comment.
Confirmed confetti in the tutorial on Talking and Doc'ing! 🫡
|
Went through the entire blog tutorial on Zen (Firefox) and it looks fine! |
ArmandPhilippot
left a comment
ArmandPhilippot
left a comment
There was a problem hiding this comment.
I didn't noticed any other differences! So, LGTM! Good job! 🚀
delucis
left a comment
delucis
left a comment
There was a problem hiding this comment.
Looks great! Thanks for taking all the care taken here and shout out to @ArmandPhilippot for battle testing the tiniest of differences 🚀
8 participants
Description (required)
Why is this PR a draft? Due to the nature of the Starlight updates (cascade layers), there is a lot of potential for some undesired UI changes. I need to spend some time testing many pages and this PR could also be a really good candidate for a T&D review with many eyes on it.
This PR updates the documentation from Starlight
0.31.1to Starlight0.34.4.This update is relatively heavy compared to some of the previous ones, as some important changes were made to Starlight in the meantime, included adding features that were previously only available in Astro Docs. Some of the most notable changes include:
Astro.localsin Starlight0.32.0<Pagination>or<Head>components.0.34.00.34.0Related issues & labels (optional)
Potential future improvements
src/components/Button.astroand use Starlight link buttonsRemaining tasks
src/content/i18n/