Tabs in header? | Astro Lounge | Page 1

stone ridge Nov 8, 2024, 11:30 PM

#

I really like how the swagger docs have multiple sections in the header bar on their site. Is there an easy way to copy this set up?

(I am not at all a frontend developer, have been attempting to copy and paste things from their github repo https://github.com/swagger-api/swagger.io-docs/tree/main but not having much luck so far since I don't know which bits are essential to copy across.)

GitHub

GitHub - swagger-api/swagger.io-docs: The content of swagger.io

The content of swagger.io. Contribute to swagger-api/swagger.io-docs development by creating an account on GitHub.

wet sparrow Nov 8, 2024, 11:44 PM

#

Hey! So they are using a custom Header.astro component: https://github.com/swagger-api/swagger.io-docs/blob/main/astro.config.mjs#L288

Inside that, they have defined their menu and then a dropdown within each list item: https://github.com/swagger-api/swagger.io-docs/blob/main/src/components/Header.astro#L274

Then in the script, they have listeners for clicks inside the .dropdown class which toggles the actual dropdown to show/hide: https://github.com/swagger-api/swagger.io-docs/blob/main/src/components/Header.astro#L1579

stone ridge Nov 11, 2024, 5:21 PM

#

thanks I'll try to copy those across

wet sparrow Nov 11, 2024, 7:42 PM

#

https://tenor.com/view/parks-and-rec-april-ludgate-whatever-i-dont-like-labels-i-dont-like-labels-i-hate-labels-gif-20297565

Tenor

stone ridge Nov 11, 2024, 7:44 PM

#

haha I tried copying and keep getting this error: The \labels` prop in component overrides has been removed., Replace `Astro.props.labels["${label}"]` with `Astro.locals.t("${label}")` instead.\n` +
'For more information see https://starlight.astro.build/guides/i18n/#using-ui-translations'

Starlight

Internationalization (i18n)

Learn how to configure your Starlight site to support multiple languages.

#

but can't figure out where it is used actually

wet sparrow Nov 11, 2024, 7:57 PM

#

So I probably wouldn't just copy+paste it verbatim, it's probably easier for you to work out how it's working and implement it yourself tbh! Copy and pasting directly into a different project is tricky!

grave temple Nov 11, 2024, 9:00 PM

#

The labels prop was removed in newer versions of Starlight, yeah. You’d want to use Astro.locals.t() instead. So for example, if a component is doing Astro.props.labels['some.key'], you’d want to refactor that to Astro.locals.t('some.key').

#

(Basically, do what the error message tells you to do 😄)

stone ridge Nov 12, 2024, 6:35 PM

#

@wet sparrow not easier to work it out because I have no idea how any of this works lol. @grave temple thanks, but I have tried searching for the key it is telling me to replace but it is not anywhere in the code

grave temple Nov 12, 2024, 6:38 PM

#

Hmm, hard to say then with out more to go on. I’d recommend sharing your code if possible so folks can take a look.

stone ridge Nov 12, 2024, 7:06 PM

#

Maybe I can ask a simpler question. If I am making a custom component, and I want to import other existing components , should the following import statements work? ```

#


import { Icon } from '@astrojs/starlight/components';
import { ThemeSelect } from '@astrojs/starlight/components';
import type { Props } from '@astrojs/starlight/props';
---

#

currently I get the error: Unable to render ThemeSelect because it is undefined! Did you forget to import the component or is it possible there is a typo?

grave temple Nov 12, 2024, 7:07 PM

#

Are you missing the initial --- up top?

stone ridge Nov 12, 2024, 7:07 PM

#

But do not at all understand why one seems to import fine, and the other doesnt

grave temple Nov 12, 2024, 7:08 PM

#

---
import { Icon } from '@astrojs/starlight/components';
import { ThemeSelect } from '@astrojs/starlight/components';
import type { Props } from '@astrojs/starlight/props';
---

#

Oh wait

#

Right, ThemeSelect

#

That is not exported that way

#

There are basically two different places you can get Starlight components on depending on the kind of components:

@astrojs/starlight/components — contains all the components intended for use in your docs content, like Tabs, Icon, Steps etc. (the components you see in the sidebar in Starlight’s docs)
@astrojs/starlight/components/ComponentName.astro — directly import a component used in Starlight’s layout etc., like ThemeSelect

So the correct imports in your example would be:

---
import { Icon } from '@astrojs/starlight/components';
import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro';
import type { Props } from '@astrojs/starlight/props';
---

stone ridge Nov 12, 2024, 7:13 PM

#

I get the same error if I change it to that way of importing.

#

---

import { Icon } from '@astrojs/starlight/components';
import { ThemeSelect } from '@astrojs/starlight/components/ThemeSelect.astro';
import type { Props } from '@astrojs/starlight/props';
---

#

Error: Unable to render ThemeSelect because it is undefined!
Did you forget to import the component or is it possible there is a typo?
    at renderFrameworkComponent (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/render/component.js:60:11)
    at Module.renderComponent (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/render/component.js:384:16)
    at /Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/src/components/Header.astro:1:1
    at AstroComponentInstance.Header [as factory] (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/astro-component.js:16:12)
    at AstroComponentInstance.init (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/render/astro/instance.js:32:29)
    at AstroComponentInstance.render (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/render/astro/instance.js:42:36)
    at Object.render (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/render/component.js:366:22)
    at Module.renderChild (/Users/marionshadbolt/Documents/GitHub/CanDIGv2/docs/node_modules/astro/dist/runtime/server/render/any.js:31:17)

#

wait I left in the curly brackets

#

it is working now

#

thank you!

#

I will keep messing around

stone ridge Nov 12, 2024, 7:39 PM

#

I think I give up on this, it would be great to see tabs in the header as a future option for navigation incorporated into Starlight/astro

grave temple Nov 12, 2024, 7:40 PM

#

Just to check, have you seen some of the plugins that provide this feature?

#

https://starlight-utils.pages.dev/utilities/nav-links/ for example

🧰 Starlight Utils

Nav Links

Add additional links to the Starlight navigation.

#

Not sure if it fits your use case, but if it does, it’s probably easier to set up.

stone ridge Nov 14, 2024, 5:37 PM

#

Nope I hadn't seen that. Thanks I will look into it

stone ridge Nov 14, 2024, 6:10 PM

#

Thanks! I have now implemented this and it was so easy. Wish I didn't waste so much time .... https://candig.github.io/CanDIGv2/

Docs

Welcome to the documentation for CanDIG.

Help with all things CanDIG

#

grave temple Nov 14, 2024, 9:31 PM

#

remote scaffold Dec 17, 2024, 10:53 AM

#

stone ridge haha I tried copying and keep getting this error: `The \`labels\` prop in co...

Did you find a solution? Running into the same problem :/

grave temple Dec 17, 2024, 10:55 AM

#

Do you have any plugins? If not, try searching for Astro.props.labels in your project to see where it is being used. And if you do have plugins, you may need to check if they have newer versions and update these.

remote scaffold Dec 17, 2024, 11:06 AM

#

grave temple Do you have any plugins? If not, try searching for `Astro.props.labels` in your ...

I looked in the whole repo + node_modules but no finding except of the changelog files. It happens whenever i try to JSON.stringify Astro.props or do any other string conversion there. Could it be that labels is not even set but the pure iterating through that triggers the exception?

grave temple Dec 17, 2024, 11:07 AM

#

Oh, yeah, you can’t stringify the full props object like that. Astro.props.labels is a getter that throws when trying to read one of its values. So something that tries to enumerate like stringify() will throw the error.

remote scaffold Dec 17, 2024, 11:08 AM

#

hmpf; yes, whenever I somehow call Astro.props.labels it is getting triggered. So i think this is not a nice behaviour 😄

grave temple Dec 17, 2024, 11:08 AM

#

You can do this if you need to:

const { labels, ...props } = Astro.props;
JSON.stringify(props);

#

I’m guessing you’re just stringifying for debugging purposes?

remote scaffold Dec 17, 2024, 11:09 AM

#

does this exclude the labels property? - yes, just for debugging. This really bugged me

grave temple Dec 17, 2024, 11:09 AM

#

Yeah, the above code snippet creates a new props variable that excludes labels

#

So it’s safe to stringify

#

You can also see the full docs for what is in props here: https://starlight.astro.build/reference/overrides/#component-props

#

So you could opt to just do JSON.stringify(Astro.props.entry) or whatever you were interested in

remote scaffold Dec 17, 2024, 11:11 AM

#

this unblocks me! thank you very much.
For others I think this should somewhere be documented since its not obvious at all 😅 because technically i have not set labels but it tells me i did and should not use it anymore

#Tabs in header?