Skip to content
This repository has been archived by the owner on Aug 8, 2024. It is now read-only.

Commit

Permalink
Merge pull request #33 from spryker-community/feature/docs-same-design
Browse files Browse the repository at this point in the history
Implements design sharing with docs section
  • Loading branch information
fsmeier authored Jun 21, 2024
2 parents f471359 + e063918 commit 4e127f1
Show file tree
Hide file tree
Showing 8 changed files with 2,155 additions and 3,654 deletions.
12 changes: 12 additions & 0 deletions astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import compressor from "astro-compressor";
import starlight from "@astrojs/starlight";
import { fileURLToPath } from 'node:url';

// https://astro.build/config
export default defineConfig({
Expand Down Expand Up @@ -67,6 +68,7 @@ export default defineConfig({
components: {
SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
Head: "./src/components/ui/starlight/Head.astro",
Page: "./src/components/ui/starlight/Page.astro",
},
head: [
{
Expand Down Expand Up @@ -100,5 +102,15 @@ export default defineConfig({
server: {
watch: { usePolling: true },
},
resolve: {
alias: [
{
find: /^.*\/Page\.astro$/,
replacement: fileURLToPath(
new URL('./src/components/ui/starlight/Page.astro', import.meta.url)
),
},
],
},
},
});
5,587 changes: 1,938 additions & 3,649 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@
"@astrojs/starlight": "^0.24.1",
"@astrojs/starlight-tailwind": "^2.0.3",
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.10.1",
"astro": "^4.10.3",
"astro-compressor": "^0.4.1",
"@astrojs/vercel": "^7.6.0",
"globby": "^14.0.1",
"gsap": "^3.12.5",
"html-minifier-terser": "^7.2.0",
Expand Down
3 changes: 3 additions & 0 deletions src/components/sections/Navbar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,9 @@ import BrandLogo from "@components/BrandLogo.astro";
.querySelector("html")
.classList.add(this.getOriginalAppearance());

// proxy for starlight
document.documentElement.dataset.theme = theme;

setTimeout(() => {
$resetStylesEl.remove();
});
Expand Down
83 changes: 83 additions & 0 deletions src/components/ui/starlight/Page.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
---
// Built-in CSS styles.
import '../../../../node_modules/@astrojs/starlight/style/props.css';
import '../../../styles/starlight/reset.css';
import '../../../../node_modules/@astrojs/starlight/style/shiki.css';
import '../../../../node_modules/@astrojs/starlight/style/util.css';
import MainLayout from "@/layouts/MainLayout.astro";
import ContentPanel from "@astrojs/starlight/components/ContentPanel.astro";
import DraftContentNotice from "@astrojs/starlight/components/DraftContentNotice.astro";
import FallbackContentNotice from "@astrojs/starlight/components/FallbackContentNotice.astro";
import Footer from "@astrojs/starlight/components/Footer.astro";
import MarkdownContent from '@astrojs/starlight/components/MarkdownContent.astro';
import PageTitle from "@astrojs/starlight/components/PageTitle.astro";
// Remark component CSS (needs to override `MarkdownContent.astro`)
import '../../../../node_modules/@astrojs/starlight/style/asides.css';
// Important that this is the last import so it can override built-in styles.
import 'virtual:starlight/user-css';
import Hero from "@astrojs/starlight/components/Hero.astro";
import Banner from "@astrojs/starlight/components/Banner.astro";
import PageSidebar from "@astrojs/starlight/components/PageSidebar.astro";
import TwoColumnContent from "@astrojs/starlight/components/TwoColumnContent.astro";
import MobileMenuToggle from "@astrojs/starlight/components/MobileMenuToggle.astro";
// disables page-sidebar (the right-side one)
Astro.props.toc = false;
const pagefindEnabled =
Astro.props.entry.slug !== '404' &&
!Astro.props.entry.slug.endsWith('/404') &&
Astro.props.entry.data.pagefind !== false;
---
{/* NOTE: Do not use any "id" attribute since it hangs up the application (keeps websocket connection open) */}

<MainLayout>


<div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
<TwoColumnContent {...Astro.props }>
<!--<PageSidebar slot="right-sidebar" {...Astro.props} />-->
<main
data-pagefind-body={pagefindEnabled}
lang={Astro.props.entryMeta.lang}
dir={Astro.props.entryMeta.dir}
>
{/* TODO: Revisit how this logic flows. */}
<Banner {...Astro.props} />
{
Astro.props.entry.data.hero ? (
<ContentPanel {...Astro.props}>
<Hero {...Astro.props} />
<MarkdownContent {...Astro.props}>
<slot />
</MarkdownContent>
<Footer {...Astro.props} />
</ContentPanel>
) : (
<>
<ContentPanel {...Astro.props}>
<PageTitle {...Astro.props} />
{Astro.props.entry.data.draft && <DraftContentNotice {...Astro.props} />}
{Astro.props.isFallback && <FallbackContentNotice {...Astro.props} />}
</ContentPanel>
<ContentPanel {...Astro.props}>
<MarkdownContent {...Astro.props}>
<slot />
</MarkdownContent>
<Footer {...Astro.props} />
</ContentPanel>
</>
)
}
</main>
</TwoColumnContent>
</div>

</MainLayout>

10 changes: 9 additions & 1 deletion src/layouts/MainLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ interface Props {
This is the main structure for the page.
We set the language of the page to English and add classes for scrollbar and scroll behavior.
-->
<html lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
<html
lang={lang}
class="scrollbar-hide lenis lenis-smooth scroll-pt-16"
data-theme="dark"
>
<head>
<!-- Adding metadata to the HTML document -->
<Meta meta={meta} structuredData={structuredData} />
Expand All @@ -35,8 +39,12 @@ We set the language of the page to English and add classes for scrollbar and scr
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
// proxy for starlight
document.documentElement.dataset.theme = 'dark';
} else {
document.documentElement.classList.remove("dark");
// proxy for starlight
document.documentElement.dataset.theme = 'light';
}
</script>
<script is:inline src="/scripts/vendor/lenis/lenis.js"></script>
Expand Down
99 changes: 97 additions & 2 deletions src/styles/starlight.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
}

header {
backdrop-filter: blur(12px) !important;
background-color: var(--backdrop-color) !important;
/*backdrop-filter: blur(12px) !important;
background-color: var(--backdrop-color) !important;*/
}

select {
Expand Down Expand Up @@ -102,3 +102,98 @@ article.card {
top: 13px;
width: 0.875rem;
}

/* TODO: move to sth else later */
html:not([data-has-toc]) {
--sl-mobile-toc-height: 0rem;
}
html:not([data-has-sidebar]) {
--sl-content-width: 67.5rem;
}
/* Add scroll padding to ensure anchor headings aren't obscured by nav */
html {
/* Additional padding is needed to account for the mobile TOC */
scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
}
main {
padding-bottom: 3vh;
}
@media (min-width: 50em) {
[data-has-sidebar] {
--sl-content-inline-start: var(--sl-sidebar-width);
}
}
@media (min-width: 72em) {
html {
scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
}
}

.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);
}
}
12 changes: 12 additions & 0 deletions src/styles/starlight/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
html {
color-scheme: dark;
}

html[data-theme='light'] {
color-scheme: light;
}

body {
color: var(--sl-color-text);
background-color: var(--sl-color-bg);
}

0 comments on commit 4e127f1

Please sign in to comment.