Archived
Template
1
Fork 0

Override some Starlight components

This commit is contained in:
Korbs 2024-01-31 06:58:44 -05:00
parent 4b60ff664a
commit b8eb4420f4
No known key found for this signature in database
3 changed files with 145 additions and 0 deletions

View file

@ -0,0 +1,105 @@
---
import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle'
import type { Props } from '@astrojs/starlight/props'
const { hasSidebar, labels } = Astro.props;
import { fade, ViewTransitions } from 'astro:transitions'
import Search from '@astrojs/starlight/components/Search.astro'
---
<div class="page sl-flex">
<ViewTransitions/>
<header class="header"><slot name="header" /></header>
<div class="main-frame">
{
hasSidebar && (
<nav class="sidebar" aria-label={labels['sidebarNav.accessibleLabel']}>
<MobileMenuToggle {...Astro.props} />
<div class="support-center-search-sidebar">
<Search {...Astro.props}><slot /></Search>
</div>
<div id="starlight__sidebar" class="sidebar-pane">
<div class="sidebar-content sl-flex">
<slot name="sidebar" />
</div>
</div>
</nav>
)
}
<div class="sl-content">
<slot />
</div>
</div>
</div>
<style>
.page {
flex-direction: column;
min-height: 100vh;
}
.header {
z-index: var(--sl-z-index-navbar);
position: fixed;
inset-inline-start: 0;
inset-block-start: 0;
width: 100%;
height: var(--sl-nav-height);
border-bottom: 1px solid var(--sl-color-hairline-shade);
padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
padding-inline-end: var(--sl-nav-pad-x);
background-color: var(--sl-color-bg-nav);
}
:global([data-has-sidebar]) .header {
padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
}
.sidebar-pane {
visibility: var(--sl-sidebar-visibility, hidden);
position: fixed;
z-index: var(--sl-z-index-menu);
inset-block: var(--sl-nav-height) 0;
inset-inline-start: 0;
width: 100%;
background-color: var(--sl-color-black);
overflow-y: auto;
}
:global([aria-expanded='true']) ~ .sidebar-pane {
--sl-sidebar-visibility: visible;
}
.sidebar-content {
height: 100%;
min-height: max-content;
padding: 1rem var(--sl-sidebar-pad-x) 0;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 50rem) {
.sidebar-content::after {
content: '';
padding-bottom: 1px;
}
}
.main-frame {
padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
padding-inline-start: var(--sl-content-inline-start);
}
@media (min-width: 50rem) {
:global([data-has-sidebar]) .header {
padding-inline-end: var(--sl-nav-pad-x);
}
.sidebar-pane {
--sl-sidebar-visibility: visible;
width: var(--sl-sidebar-width);
background-color: var(--sl-color-bg-sidebar);
border-inline-end: 1px solid var(--sl-color-hairline-shade);
}
}
</style>

View file

@ -0,0 +1,23 @@
---
const { Title, Description } = Astro.props
---
<head>
<!-- Metadata -->
<title>{Title}</title>
<meta name="description" content={Description}>
<!-- Options -->
<meta charset="UTF-8">
<meta name="theme-color" content="#2970cc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
<!-- Favicon -->
<link rel="apple-touch-icon" type="image/png" sizes="256x256" href="/assets/images/favicon/256x256.png">
<link rel="apple-touch-icon" type="image/png" sizes="32x32" href="/assets/images/favicon/32x32.png">
<link rel="icon" type="image/png" sizes="256x256" href="/assets/images/favicon/256x256.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/32x32.png">
<link rel="stylesheet" href="/@shoelace-style/shoelace/cdn/themes/dark.css" onload="document.documentElement.classList.add('sl-theme-dark');"/>
<script type="module" src="/@shoelace-style/shoelace/cdn/shoelace.js"></script>
</head>

View file

@ -0,0 +1,17 @@
---
import "astro-feelback/styles/feelback.css"
import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"
// Check if user is on Support Center
if (Astro.url.pathname.startsWith("/support")) {
var IsOnSupport = true
} else {
var IsOnSupport = false
}
---
{IsOnSupport ?
<div class="container"><FeelbackYesNo contentSetId="98b1b74f-cd4d-4808-bfd4-0498f52ee448" preset="check" showCount/></div>
:
null
}