martrapp / astro-vtbot

The 👜 Bag of Tricks ✨ for Astro's View Transitions. ⭐️ Please star to support this work!

Hi there 👋 I'm Martin!

I have often benefited from open source and am now happy to be able to give something back!
I am currently enjoying being a maintainer at https://github.com/withastro.

astro-vtbot's Issues

not work starlight-image-zoom plugin

Describe the Bug

The plugin doesn't work when I go to the page.
starts working only after page reload

I use
https://events-3bg.pages.dev/jotter/starlight/guide/#step-2-create-the-new-head-component

What's the expected result?

After going to the page, zoom should work

Link to Minimal Reproducible Example

Unfortunately locally

Participation

• I am willing to submit a pull request for this issue.

Starlight sidebar badges outlined style issue

Describe the Bug

Note: the issue has initially been reported in withastro/starlight#1764

1. Navigate to https://events-3bg.pages.dev/jotter/history-of-changes/ and notice the sidebar entry for this page containing a badge with an outlined style as expected for the current page:

2. Navigate with a full navigation to https://events-3bg.pages.dev/jotter/ and notice the sidebar entry for the previous page ("Recent changes") with a colored badge as expected as it's not the current page:

3. Navigate to the "Recent changes" page using the sidebar link and notice that the sidebar badge is not updated to an outlined style as expected for the current page:

What's the expected result?

The sidebar badges should be updated to an outlined style when the page is the current one (and vice versa when it's no longer the current one).

Link to Minimal Reproducible Example

https://events-3bg.pages.dev/jotter/history-of-changes/

Participation

• I am willing to submit a pull request for this issue.

Site header link is not responding on clicks

Describe the Bug

Hello, Martin! I'm reaching out this time regarding an issue I've encountered with the SiteTitle component, possibly related to vtbot or my setup, not sure yet. This problem arose after integrating VT into the system.

I've implemented a custom SiteTitle component featuring two links/logos. However, upon testing, I noticed that clicking on the first link doesn't redirect to the main website. The second link/logo functions correctly, directing to the main page of docs.

Upon inspecting the dev console, I encountered the following error: "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'setAttribute')", which points to StarlightConnector.astro.

To provide more context, here's the link to the custom component:
https://github.com/mearashadowfax/ScrewFast/blob/main/src/components/ui/starlight/SiteTitle.astro

The docs link: https://screwfast.uk/welcome-to-docs/

What's the expected result?

When clicking on either of the two links/logos in the SiteTitle component, the user should be redirected to the corresponding URL.

Link to Minimal Reproducible Example

https://github.com/mearashadowfax/ScrewFast/tree/add-starlight-vt

Participation

• I am willing to submit a pull request for this issue.

LoadingIndicator can't find some image to display and generates 404s

Describe the Bug

Without an explicit link[rel="icon"] in the page, the <LoadingIndicator /> tries to load undefined from the server ;-)

What's the expected result?

No errors

Link to Minimal Reproducible Example

just remove favicon from the site

Participation

• I am willing to submit a pull request for this issue.

Starlight's sidebar visibility issues with view transitions

Describe the Bug

First of all, thank you for these great tools and tricks!

I am encountering a couple of issues with the view transitions implementation on my Starlight site. These issues include:

Sidebar initially invisible: When landing on a page with active view transitions, the sidebar is initially invisible. However, after reloading the page, the sidebar becomes visible and remains so for subsequent navigation.

Sidebar showing up on inappropriate pages: When navigating to certain pages, such as the docs home page, the sidebar is displayed even though it shouldn't be. Reloading the page seems to resolve this issue temporarily.

Steps to Reproduce:

1. Navigate to the docs site (link is in the footer).
2. Click on Get started button.
3. Observe that the sidebar is initially invisible.
4. Reload the page.
5. Note that the sidebar becomes visible after reloading.
6. Navigate to a page where the sidebar should not be displayed (e.g., docs home page).
7. Observe that the sidebar is still visible on the page.
8. Reload the page.
9. Note that the sidebar disappears after reloading.

What's the expected result?

Display a sidebar without the need to reload the page.

Link to Minimal Reproducible Example

mearashadowfax/ScrewFast#40

Participation

• I am willing to submit a pull request for this issue.

Support for fallback

First off, astro-vtbot is great! It allows me to keep a persistent CSS animation going across page transitions, so thank you!

One request: please add support for <ViewTransitions fallback="animate | swap | none" />. Astro's View Transitions allow for setting a fallback method in browsers that don't natively support the View Transitions API, like currently Safari and Firefox. I'm using fallback="swap" because I don't like the way fallback="animate" first hides the existing content before it shows the new content instead of a cross-fade (feels glitchy to me), so I prefer instant replacement SPA-style as a fallback. Unfortunately at the moment astro-vtbot seems to ignore this and instead enforces the fallback animation in those browsers (which I understand is the Astro default). Would be great if it could preserve the original functionality there.

Typings stop working inside slugs

Describe the Bug

After bootstraping a fresh Astro project using the blog template and installing the astro-vtbot integration the typings of the slug are set to any like in the following example.

Before installing:

After installing

I've tried reloading the window on VSCode and even restarting the ts-server after installing the package but for some reason the issue persists.

What's the expected result?

The expected result is to not have typing issues 😁

Link to Minimal Reproducible Example

I don't have a repro link

Participation

• I am willing to submit a pull request for this issue.

The connected script is not working correctly (chat)

Describe the Bug

I use this service, I connected it in astro.config in the head, when it loads everything works correctly, but when I go to the page inside the documentation it stops working.

Please tell me how can I connect it correctly so that it works correctly? maybe inside the plugin?
I connected this plugin https://events-3bg.pages.dev/jotter/starlight/inner-workings/integration/#overriding-the-head-component

Thank you for your attention

What's the expected result?

loaded correctly when going to another page

Link to Minimal Reproducible Example

https://github.com/testomatio/docs

Participation

• I am willing to submit a pull request for this issue.

docsearch is not working correctly

Describe the Bug

when clicking on the result the modal window should close
Example https://docs.testomat.io/ not close

close https://docusaurus.io/ after search result

What's the expected result?

Close modal

Link to Minimal Reproducible Example

https://github.com/testomatio/docs

Participation

• I am willing to submit a pull request for this issue.