Override some Starlight components
This commit is contained in:
Korbs
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