Skip to content

Commit 0bc261d

Browse files
llimllibllimllib
committed
docs: left nav for web page
1 parent 8902fe6 commit 0bc261d

1 file changed

Lines changed: 123 additions & 13 deletions

File tree

‎tools/build-site.sh‎

Lines changed: 123 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,27 @@ rm -rf _site
2525
mkdir -p _site/transcripts
2626

2727
# Build index.html from README
28+
# First, generate the HTML body content
29+
pandoc README.md -f markdown -t html -o _site/_body.html
30+
31+
# Extract headings (h2 and h3) to build the TOC
32+
# Format: level|id|text
33+
TOC_ENTRIES=$(grep -oE '<h[23] id="[^"]*">[^<]*</h[23]>' _site/_body.html | \
34+
sed -E 's/<h([23]) id="([^"]*)">([^<]*)<\/h[23]>/\1|\2|\3/')
35+
36+
# Build the TOC HTML
37+
TOC_HTML='<nav class="toc-sidebar" id="toc-sidebar">'
38+
TOC_HTML+='<ul class="toc-list">'
39+
40+
while IFS='|' read -r level id text; do
41+
if [ -n "$level" ]; then
42+
class="toc-h${level}"
43+
TOC_HTML+="<li class=\"${class}\"><a href=\"#${id}\">${text}</a></li>"
44+
fi
45+
done <<< "$TOC_ENTRIES"
46+
47+
TOC_HTML+='</ul></nav>'
48+
2849
cat > _site/index.html << HTMLEOF
2950
<!DOCTYPE html>
3051
<html lang="en">
@@ -33,13 +54,90 @@ cat > _site/index.html << HTMLEOF
3354
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3455
<title>mdriver - streaming markdown viewer</title>
3556
<style>
57+
* {
58+
box-sizing: border-box;
59+
}
3660
body {
3761
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
3862
line-height: 1.6;
39-
max-width: 800px;
63+
margin: 0;
64+
padding: 0;
65+
color: #333;
66+
}
67+
.top-nav {
68+
background: #f8f9fa;
69+
padding: 0.75rem 2rem;
70+
border-bottom: 1px solid #e1e4e8;
71+
position: sticky;
72+
top: 0;
73+
z-index: 100;
74+
}
75+
.top-nav a {
76+
margin-right: 1rem;
77+
color: #0366d6;
78+
text-decoration: none;
79+
}
80+
.top-nav a:hover {
81+
text-decoration: underline;
82+
}
83+
.page-layout {
84+
display: flex;
85+
max-width: 1200px;
4086
margin: 0 auto;
87+
}
88+
.toc-sidebar {
89+
width: 240px;
90+
flex-shrink: 0;
91+
position: sticky;
92+
top: 52px; /* height of top-nav */
93+
height: calc(100vh - 52px);
94+
overflow-y: auto;
95+
padding: 1.5rem 1rem 1.5rem 1.5rem;
96+
border-right: 1px solid #e1e4e8;
97+
}
98+
.toc-title {
99+
font-size: 0.75rem;
100+
font-weight: 600;
101+
text-transform: uppercase;
102+
letter-spacing: 0.05em;
103+
color: #666;
104+
margin-bottom: 0.75rem;
105+
}
106+
.toc-list {
107+
list-style: none;
108+
padding: 0;
109+
margin: 0;
110+
}
111+
.toc-list li {
112+
margin: 0;
113+
}
114+
.toc-list li a {
115+
display: block;
116+
padding: 0.2rem 0 0.2rem 0;
117+
color: #555;
118+
text-decoration: none;
119+
font-size: 0.85rem;
120+
border-left: 2px solid transparent;
121+
padding-left: 0.75rem;
122+
transition: color 0.15s, border-color 0.15s;
123+
}
124+
.toc-list li a:hover {
125+
color: #0366d6;
126+
}
127+
.toc-list li a.active {
128+
color: #0366d6;
129+
border-left-color: #0366d6;
130+
font-weight: 500;
131+
}
132+
.toc-h3 a {
133+
padding-left: 1.5rem !important;
134+
font-size: 0.8rem !important;
135+
}
136+
.main-content {
137+
flex: 1;
138+
min-width: 0;
139+
max-width: 800px;
41140
padding: 2rem;
42-
color: #333;
43141
}
44142
pre {
45143
background: #f4f4f4;
@@ -78,29 +176,41 @@ cat > _site/index.html << HTMLEOF
78176
}
79177
h1, h2, h3 {
80178
margin-top: 1.5rem;
179+
scroll-margin-top: 60px;
81180
}
82-
nav {
83-
background: #f8f9fa;
84-
padding: 1rem;
85-
margin-bottom: 2rem;
86-
border-radius: 4px;
87-
}
88-
nav a {
89-
margin-right: 1rem;
181+
/* On narrow screens, hide the sidebar */
182+
@media (max-width: 768px) {
183+
.toc-sidebar {
184+
display: none;
185+
}
186+
.main-content {
187+
padding: 1rem;
188+
}
90189
}
91190
</style>
92191
</head>
93192
<body>
94-
<nav>
193+
<nav class="top-nav">
95194
<a href="/">Home</a>
96195
<a href="./transcripts/">Transcripts</a>
97196
<a href="https://github.com/llimllib/mdriver">${GITHUB_ICON}GitHub</a>
98197
</nav>
198+
<div class="page-layout">
199+
${TOC_HTML}
200+
<main class="main-content">
99201
HTMLEOF
100202

101-
pandoc README.md -f markdown -t html >> _site/index.html
203+
cat _site/_body.html >> _site/index.html
204+
205+
cat >> _site/index.html << 'HTMLEOF'
206+
</main>
207+
</div>
208+
</body>
209+
</html>
210+
HTMLEOF
102211

103-
echo '</body></html>' >> _site/index.html
212+
# Clean up temp file
213+
rm -f _site/_body.html
104214

105215
# Copy docs (images, etc.)
106216
if [ -d docs ] && [ "$(ls -A docs)" ]; then

0 commit comments

Comments
 (0)