jjj 0.2.1

A modal interface for Jujutsu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

---
// Built-in CSS styles.
import '../style/props.css';
import '../style/reset.css';
import '../style/shiki.css';
import '../style/util.css';

// Components — can override built-in CSS, but not user CSS.
import Banner from 'virtual:starlight/components/Banner';
import ContentPanel from 'virtual:starlight/components/ContentPanel';
import FallbackContentNotice from 'virtual:starlight/components/FallbackContentNotice';
import DraftContentNotice from 'virtual:starlight/components/DraftContentNotice';
import Footer from 'virtual:starlight/components/Footer';
import Head from 'virtual:starlight/components/Head';
import Header from 'virtual:starlight/components/Header';
import Hero from 'virtual:starlight/components/Hero';
import MarkdownContent from 'virtual:starlight/components/MarkdownContent';
import PageFrame from 'virtual:starlight/components/PageFrame';
import PageSidebar from 'virtual:starlight/components/PageSidebar';
import PageTitle from 'virtual:starlight/components/PageTitle';
import Sidebar from 'virtual:starlight/components/Sidebar';
import SkipLink from 'virtual:starlight/components/SkipLink';
import ThemeProvider from 'virtual:starlight/components/ThemeProvider';
import TwoColumnContent from 'virtual:starlight/components/TwoColumnContent';

// Remark component CSS (needs to override `MarkdownContent.astro`)
import '../style/asides.css';

// Important that this is the last import so it can override built-in styles.
import 'virtual:starlight/user-css';

import printHref from '../style/print.css?url&no-inline';

const { starlightRoute } = Astro.locals;

const pagefindEnabled =
	starlightRoute.entry.slug !== '404' &&
	!starlightRoute.entry.slug.endsWith('/404') &&
	starlightRoute.entry.data.pagefind !== false;

const htmlDataAttributes: DOMStringMap = { 'data-theme': 'dark' };
if (Boolean(starlightRoute.toc)) htmlDataAttributes['data-has-toc'] = '';
if (starlightRoute.hasSidebar) htmlDataAttributes['data-has-sidebar'] = '';
if (Boolean(starlightRoute.entry.data.hero)) htmlDataAttributes['data-has-hero'] = '';

const mainDataAttributes: DOMStringMap = {};
if (pagefindEnabled) mainDataAttributes['data-pagefind-body'] = '';
---

<html lang={starlightRoute.lang} dir={starlightRoute.dir} {...htmlDataAttributes}>
	<head>
		<Head />
		<style>
			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));
				}
			}
		</style>
		<ThemeProvider />
		<link rel="stylesheet" href={printHref} media="print" />
	</head>
	<body>
		<SkipLink />
		<PageFrame>
			<Header slot="header" />
			{starlightRoute.hasSidebar && <Sidebar slot="sidebar" />}
			<script src="./SidebarPersistState"></script>
			<TwoColumnContent>
				<PageSidebar slot="right-sidebar" />
				<main
					{...mainDataAttributes}
					lang={starlightRoute.entryMeta.lang}
					dir={starlightRoute.entryMeta.dir}
				>
					{/* TODO: Revisit how this logic flows. */}
					<Banner />
					{
						starlightRoute.entry.data.hero ? (
							<ContentPanel>
								<Hero />
								<MarkdownContent>
									<slot />
								</MarkdownContent>
								<Footer />
							</ContentPanel>
						) : (
							<>
								<ContentPanel>
									<PageTitle />
									{starlightRoute.entry.data.draft && <DraftContentNotice />}
									{starlightRoute.isFallback && <FallbackContentNotice />}
								</ContentPanel>
								<ContentPanel>
									<MarkdownContent>
										<slot />
									</MarkdownContent>
									<Footer />
								</ContentPanel>
							</>
						)
					}
				</main>
			</TwoColumnContent>
		</PageFrame>
	</body>
</html>