astro-ghostcms/packages/starlight-ghostcms/src/overrides/Sidebar.astro

112 lines
2.8 KiB
Plaintext

---
import StarlightSidebar from '@astrojs/starlight/components/Sidebar.astro'
import type { Props } from '@astrojs/starlight/props'
import config from 'virtual:starlight-ghost-config'
import { isBlogPostPage, isBlogRoot } from '../utils/page'
import { getAllPages, getAllPosts, getSluggedPage } from '../utils/api/api-functions.js'
import type { SidebarEntry } from './sidebartypes'
export async function getRecentBlogEntries(){
const entries = await getAllPosts()
return entries.slice(0, config.recentPostCount)
}
export async function getBlogPageEntries(){
const entries = await getAllPages()
return entries;
}
export function checkpath(path: string){
if ( path.slice(0, 5) === "/blog" ){
return true
} else { return false }
}
export function isAbout(path: string){
if ( path === "/blog/about" ){
return true
} else { return false }
}
export function isAuthors(path: string){
if ( path === "/blog/authors" ){
return true
} else { return false }
}
const isBlog = checkpath(Astro.url.pathname)
const recentEntries = isBlog ? await getRecentBlogEntries() : []
const aboutPage = await getSluggedPage("about");
const AboutEntry:SidebarEntry = {
attrs: {}, badge: undefined,
href: '/blog/about',
isCurrent: isAbout(Astro.url.pathname),
type: 'link',
label: aboutPage?.post?.title
}
const emptyEntry:SidebarEntry = { attrs: {}, badge: undefined,
href: '#', isCurrent: false, type: 'link', label: '', }
const about = aboutPage?AboutEntry:emptyEntry
const blogSidebar: Props['sidebar'] = isBlog
? [
about,
{
attrs: {},
badge: undefined,
href: '/blog/authors',
isCurrent: isAuthors(Astro.url.pathname),
label: 'Our Authors',
type: 'link',
},
{
attrs: {},
badge: undefined,
href: '/blog',
isCurrent: isBlogRoot(Astro.props.slug),
label: 'All posts',
type: 'link',
},
{
badge: undefined,
collapsed: false,
entries: recentEntries.map((blogEntry) => ({
attrs: {},
badge: blogEntry.featured?({text: "⭐", variant: "note"}):undefined,
href: `/blog/${blogEntry.slug}`,
isCurrent: isBlogPostPage(Astro.props.slug, `blog/${blogEntry.slug}`),
label: blogEntry.title,
type: 'link',
})),
label: 'Recent posts',
type: 'group',
},
]
: []
---
{
!isBlog && (
<div class="md:sl-hidden">
<a href="/blog">Blog</a>
</div>
)
}
<StarlightSidebar {...Astro.props} sidebar={isBlog ? blogSidebar : Astro.props.sidebar} />
<style>
div {
border-bottom: 1px solid var(--sl-color-gray-6);
padding-bottom: 1rem;
}
div a {
color: var(--sl-color-white);
font-size: var(--sl-text-lg);
font-weight: 600;
text-decoration: none;
display: block;
}
</style>