Override some Starlight components
This commit is contained in:
parent
4b60ff664a
commit
b8eb4420f4
3 changed files with 145 additions and 0 deletions
105
src/components/PageFrame.astro
Normal file
105
src/components/PageFrame.astro
Normal 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>
|
||||||
23
src/components/global/Head-Starlight.astro
Normal file
23
src/components/global/Head-Starlight.astro
Normal 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>
|
||||||
17
src/components/starlight/Pagination.astro
Normal file
17
src/components/starlight/Pagination.astro
Normal 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
|
||||||
|
}
|
||||||
Reference in a new issue