fix: fix sidebar for blog pages

This commit is contained in:
Duro
2024-05-22 20:15:07 -04:00
committed by GitHub
parent 812788e610
commit e43df2f5a7

View File

@@ -2,6 +2,7 @@
// Heavily inspired from https://github.com/lorenzolewis/starlight-multi-sidebar/blob/main/src/components/Sidebar.astro
import type { Props } from "@astrojs/starlight/props";
import StarlightSidebar from "@astrojs/starlight/components/Sidebar.astro";
import BlogSidebar from "starlight-blog/overrides/Sidebar.astro";
import { AstroError } from "astro/errors";
const sidebarConfig: [string, boolean, Props][] = Astro.props.sidebar.map(
@@ -12,7 +13,7 @@ const sidebarConfig: [string, boolean, Props][] = Astro.props.sidebar.map(
Each top-level \`sidebar\` item in the Starlight config must be either a group or autogenerated.
See https://starlight.astro.build/guides/sidebar/#groups and https://starlight.astro.build/guides/sidebar/#autogenerated-groups`,
See https://starlight.astro.build/guides/sidebar/#groups and https://starlight.astro.build/guides/sidebar/#autogenerated-groups`
);
}
@@ -20,30 +21,38 @@ const sidebarConfig: [string, boolean, Props][] = Astro.props.sidebar.map(
s.type === "link" ? s.isCurrent : s.entries.some(isCurrent);
return [s.label, isCurrent(s), { ...Astro.props, sidebar: [...s.entries] }];
},
}
);
const isBlog = Astro.url.pathname.split("/")[1] === "blog";
---
<div class="__collapse">
{
sidebarConfig.map(([label, isCurrent, props]) => (
<>
<input
type="radio"
name="sidebar"
role="tab"
aria-label={label}
checked={isCurrent}
/>
<div class="__collapse-content">
<StarlightSidebar {...props}>
<slot />
</StarlightSidebar>
</div>
</>
))
}
</div>
{
isBlog ? (
<BlogSidebar {...Astro.props}>
<slot />
</BlogSidebar>
) : (
<div class="__collapse">
{sidebarConfig.map(([label, isCurrent, props]) => (
<>
<input
type="radio"
name="sidebar"
role="tab"
aria-label={label}
checked={isCurrent}
/>
<div class="__collapse-content">
<StarlightSidebar {...props}>
<slot />
</StarlightSidebar>
</div>
</>
))}
</div>
)
}
<style>
.__collapse {