Skip to content

Commit f2d75d5

Browse files
committed
First quality pass
1 parent 58e14e5 commit f2d75d5

61 files changed

Lines changed: 1950 additions & 262 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

build.extend.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
const fs = require('fs')
2+
const path = require('path')
3+
4+
const parseMd = content => {
5+
const sectionMap = {}
6+
let title = '',
7+
synonyms = [],
8+
currentSection = null,
9+
currentLines = []
10+
const flush = () => {
11+
if (currentSection) sectionMap[currentSection] = currentLines.join('\n').trim()
12+
}
13+
content
14+
.trim()
15+
.split('\n')
16+
.forEach(line => {
17+
if (line.startsWith('# ')) title = line.slice(2).trim()
18+
else if (line.startsWith('## ')) {
19+
flush()
20+
currentSection = line.slice(3).trim()
21+
currentLines = []
22+
} else if (!currentSection && title && line.trim())
23+
synonyms = line
24+
.split(',')
25+
.map(s => s.trim())
26+
.filter(Boolean)
27+
else if (currentSection) currentLines.push(line)
28+
})
29+
flush()
30+
return { title, synonyms, sectionMap }
31+
}
32+
33+
const renderWord = (slug, { title, synonyms, sectionMap }) => {
34+
let html = `<section id="${slug}" class="word-section">\n <h2>${title}</h2>\n`
35+
if (synonyms.length)
36+
html += ` <ul class="synonyms">\n${synonyms.map(s => ` <li class="know">${s}</li>`).join('\n')}\n </ul>\n`
37+
38+
const renderSection = (name, body) => {
39+
let inner
40+
if (name === 'Demo') {
41+
inner = ` <div class="demo-placeholder"><p>Demo coming soon</p></div>`
42+
} else if (name === 'Examples') {
43+
inner = ` <ul class="examples-list">\n${body
44+
.split('\n')
45+
.filter(l => l.startsWith('- '))
46+
.map(l => ` <li>${l.slice(2)}</li>`)
47+
.join('\n')}\n </ul>`
48+
} else if (body.toLowerCase().trim() === 'coming soon.') {
49+
inner = ` <p class="coming-soon">Coming soon.</p>`
50+
} else {
51+
inner = body
52+
.split('\n\n')
53+
.filter(p => p.trim())
54+
.map(p => ` <p>${p.trim()}</p>`)
55+
.join('\n')
56+
}
57+
return ` <div class="entry-section">\n <h3>${name}</h3>\n${inner}\n </div>`
58+
}
59+
60+
;['Definition', 'Examples', 'Demo', "Claude's Commentary", "Matt's Commentary"].forEach(name => {
61+
if (sectionMap[name] !== undefined) html += renderSection(name, sectionMap[name]) + '\n'
62+
})
63+
return html + '</section>'
64+
}
65+
66+
module.exports = ({ content, pageDir }) => {
67+
if (!content.includes('{word-sections}') && !content.includes('{sidebar}')) return {}
68+
const meta = JSON.parse(fs.readFileSync(path.join(pageDir, 'tree.json'), 'utf8'))
69+
70+
const wordSections = meta
71+
.map(
72+
({ label, slugs }) =>
73+
`<h2 class="group-label">${label}</h2>\n` +
74+
slugs
75+
.map(slug => {
76+
const mdPath = path.join(pageDir, `${slug}.md`)
77+
return fs.existsSync(mdPath) ? renderWord(slug, parseMd(fs.readFileSync(mdPath, 'utf8'))) : ''
78+
})
79+
.join('\n'),
80+
)
81+
.join('\n')
82+
83+
const sidebar = meta
84+
.map(
85+
({ label, slugs }) =>
86+
`<div class="nav-group">\n <div class="nav-label">${label}</div>\n` +
87+
slugs
88+
.map(slug => {
89+
const mdPath = path.join(pageDir, `${slug}.md`)
90+
if (!fs.existsSync(mdPath)) return ''
91+
const { title } = parseMd(fs.readFileSync(mdPath, 'utf8'))
92+
return ` <a href="#${slug}">${title}</a>`
93+
})
94+
.join('\n') +
95+
'\n</div>',
96+
)
97+
.join('\n')
98+
99+
return { 'word-sections': wordSections, sidebar }
100+
}

build.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ const isDev = process.argv.includes('--dev')
1616
const repoName = getRepoName()
1717
const basePath = isDev || fs.existsSync('CNAME') ? '/' : `/${repoName}/`
1818

19+
const extend = fs.existsSync('build.extend.js') ? require('./build.extend.js') : null
20+
1921
const build = () => {
2022
fs.rmSync(buildDir, { force: true, recursive: true })
2123
fs.mkdirSync(buildDir, { recursive: true })
@@ -36,6 +38,7 @@ const build = () => {
3638
content,
3739
scripts,
3840
styles,
41+
...(extend ? extend({ content, pageDir, pageName, basePath }) : {}),
3942
...(pages['index'] || {}),
4043
...(pages[pageName] || {}),
4144
}
@@ -104,7 +107,10 @@ const build = () => {
104107
copyAsset(dir, targetDir, `${htmlFileName}.css`)
105108
copyAsset(dir, targetDir, `${htmlFileName}.js`)
106109
} else {
107-
const shouldSkip = entry.name.match(/\.(css|js)$/) && htmlFiles.includes(entry.name.replace(/\.(css|js)$/, ''))
110+
const shouldSkip =
111+
entry.name.endsWith('.md') ||
112+
entry.name === 'tree.json' ||
113+
(entry.name.match(/\.(css|js)$/) && htmlFiles.includes(entry.name.replace(/\.(css|js)$/, '')))
108114

109115
if (!shouldSkip) {
110116
fs.copyFileSync(srcPath, path.join(outputDir, entry.name))

src/doc.css

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
1-
header .layer-inset {
1+
.brand {
22
align-items: center;
33
display: flex;
4-
gap: 1.5rem;
5-
justify-content: space-between;
4+
font-size: 1.5rem;
5+
font-weight: 700;
6+
gap: 0.5rem;
7+
letter-spacing: -0.03em;
68
}
79

8-
header nav {
10+
footer {
11+
align-items: flex-end;
912
display: flex;
10-
gap: 1.5rem;
11-
flex: 1;
13+
padding: 1rem 1.5rem;
1214
}
1315

14-
header nav a {
15-
color: var(--color-half);
16-
}
17-
18-
header nav a:hover {
19-
color: var(--color-darkest);
16+
footer .layer-inset {
17+
align-items: flex-end;
18+
display: flex;
19+
justify-content: space-between;
20+
max-width: unset;
2021
}
2122

22-
.brand {
23-
align-items: center;
24-
display: flex;
25-
font-size: 1.5rem;
26-
font-weight: 700;
27-
gap: 0.5rem;
28-
letter-spacing: -0.03em;
23+
footer p {
24+
color: var(--color-half);
25+
font-size: 0.875rem;
2926
}
3027

31-
footer .layer-inset {
28+
header {
3229
align-items: center;
3330
display: flex;
3431
justify-content: space-between;
32+
left: 0;
33+
padding: 1rem;
34+
position: absolute;
35+
right: 0;
36+
top: 0;
37+
z-index: 1;
3538
}

src/global.css

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
.layer-inset {
10-
max-width: 60rem;
10+
max-width: 80rem;
1111
}
1212

1313
.logo {
@@ -23,14 +23,55 @@
2323
font-size: 2rem;
2424
}
2525

26-
.row {
27-
align-items: center;
26+
header {
27+
min-height: 4.5rem;
28+
}
29+
30+
footer a {
31+
color: var(--color-half);
32+
}
33+
34+
footer a:hover {
35+
color: var(--color-darker);
36+
}
37+
38+
footer .layer-inset > div {
2839
display: flex;
40+
flex-direction: column;
2941
gap: 0.5rem;
3042
}
3143

32-
section .layer-inset {
44+
footer p {
45+
font-size: inherit;
46+
}
47+
48+
#hero {
49+
height: 50vh;
50+
position: relative;
51+
}
52+
53+
#hero-bg {
54+
inset: 0;
55+
position: absolute;
56+
z-index: -2;
57+
}
58+
59+
#hero-fade {
60+
background: linear-gradient(transparent, var(--color-lightest));
61+
bottom: 0;
62+
height: 50%;
63+
left: 0;
64+
position: absolute;
65+
right: 0;
66+
z-index: -1;
67+
}
68+
69+
.know {
70+
color: var(--color-half);
71+
}
72+
73+
.row {
74+
align-items: center;
3375
display: flex;
34-
flex-direction: column;
35-
gap: var(--space-clamp);
76+
gap: 0.5rem;
3677
}

0 commit comments

Comments
 (0)