Skip to content

Commit af50d6e

Browse files
sarahssarahs
committed
re-add the dev toc in script/static form
1 parent b98a79b commit af50d6e

File tree

3 files changed

+158
-0
lines changed

3 files changed

+158
-0
lines changed

‎script/dev-toc/generate.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
#!/usr/bin/env node
2+
3+
import fs from 'fs'
4+
import path from 'path'
5+
import { execSync } from 'child_process'
6+
import fpt from '../../lib/non-enterprise-default-version.js'
7+
import { allVersionKeys } from '../../lib/all-versions.js'
8+
import { liquid } from '../../lib/render-content/index.js'
9+
import contextualize from '../../middleware/context.js'
10+
11+
const layoutFilename = path.posix.join(process.cwd(), 'script/dev-toc/layout.html')
12+
const layout = fs.readFileSync(layoutFilename, 'utf8')
13+
14+
const staticDirName = 'script/dev-toc/static'
15+
const staticDir = path.posix.join(process.cwd(), staticDirName)
16+
if (!fs.existsSync(staticDir)) fs.mkdirSync(staticDir)
17+
18+
main()
19+
20+
async function main() {
21+
const next = () => {}
22+
const res = {}
23+
const req = { language: 'en', cookies: {} }
24+
25+
for (const version of allVersionKeys) {
26+
req.pagePath = version === fpt ? '/' : `/${version}`
27+
28+
// Create a subdir for the version if one doesn't exist yet.
29+
const versionStaticDir = path.posix.join(staticDir, version)
30+
if (!fs.existsSync(versionStaticDir)) fs.mkdirSync(versionStaticDir)
31+
32+
// Create a versioned filename.
33+
const filename = path.posix.join(versionStaticDir, 'dev-toc.html')
34+
35+
// Create a minimal context object.
36+
await contextualize(req, res, next)
37+
38+
// Add the tree to the req.context.
39+
req.context.currentEnglishTree = req.context.siteTree.en[req.context.currentVersion]
40+
41+
// Parse the layout in script/dev-toc/layout.html with the context we created above.
42+
const outputHtml = await liquid.parseAndRender(layout, Object.assign({}, req.context))
43+
44+
// Write a static file for each version.
45+
fs.writeFileSync(filename, outputHtml)
46+
}
47+
48+
// Default to FPT for the file to open.
49+
const fptFile = path.posix.join(staticDirName, fpt, 'dev-toc.html')
50+
51+
execSync(`open ${fptFile}`)
52+
53+
console.log(`\nCreated the TOC! If it doesn't open automatically, open the following file in your browser to view it:\n
54+
${fptFile}`)
55+
}

‎script/dev-toc/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const expandText = 'Expand All'
2+
const closeText = 'Close All'
3+
4+
document.addEventListener('DOMContentLoaded', async () => {
5+
devToc()
6+
})
7+
8+
function devToc() {
9+
const expandButton = document.querySelector('.js-expand')
10+
if (!expandButton) return
11+
12+
const detailsElements = document.querySelectorAll('details')
13+
14+
expandButton.addEventListener('click', () => {
15+
// on click, toggle all the details elements open or closed
16+
const anyDetailsOpen = Array.from(detailsElements).find((details) => details.open)
17+
18+
for (const detailsElement of detailsElements) {
19+
anyDetailsOpen ? detailsElement.removeAttribute('open') : (detailsElement.open = true)
20+
}
21+
22+
// toggle the button text on click
23+
anyDetailsOpen
24+
? (expandButton.textContent = expandText)
25+
: (expandButton.textContent = closeText)
26+
})
27+
28+
// also toggle the button text on clicking any of the details elements
29+
for (const detailsElement of detailsElements) {
30+
detailsElement.addEventListener('click', () => {
31+
expandButton.textContent = closeText
32+
33+
// we can only get an accurate count of the open details elements if we wait a fraction after click
34+
setTimeout(() => {
35+
if (!Array.from(detailsElements).find((details) => details.open)) {
36+
expandButton.textContent = expandText
37+
}
38+
}, 50)
39+
})
40+
}
41+
}

‎script/dev-toc/layout.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="{{currentLanguage}}">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Docs TOC</title>
6+
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
7+
</head>
8+
9+
<body class="dev-toc p-3 m-3">
10+
<main class="width-full">
11+
12+
<h3>Versions</h3>
13+
<ul class="versions-list" style="list-style-type:none;">
14+
{% for version in allVersions %}
15+
<li style="margin: 3px 0 0 0;"><a href="../{{ version[0] }}/dev-toc.html">{{ version[1].versionTitle }}</a>
16+
{% endfor %}
17+
</ul>
18+
19+
{% assign docsRoot = "https://docs.github.com" %}
20+
21+
{% if allVersions[currentVersion] %}
22+
<h2 class="mt-3 mb-3"><abbr>TOC</abbr> for {{ allVersions[currentVersion].versionTitle }}</h2>
23+
24+
<button class="btn mb-3 js-expand" type="button">Expand All</button>
25+
<div/>
26+
27+
{% for productPage in currentEnglishTree.childPages %}
28+
<details class="mb-1"><summary>{{productPage.renderedFullTitle}}</summary>
29+
<ul class="products-list">
30+
<li title="{{productPage.renderedFullTitle}}" style="margin: 3px 0 0 30px;">
31+
<a title="{{ productPage.page.documentType }}" href="{{ docsRoot }}{{productPage.href}}">{{ productPage.renderedFullTitle }}</a>
32+
{% for categoryPage in productPage.childPages %}
33+
<ul>
34+
<li style="margin: 3px 0 0 30px;">
35+
<a title="{{ categoryPage.page.documentType }}" href="{{ docsRoot }}{{ categoryPage.href }}">{{ categoryPage.renderedFullTitle }}</a>
36+
<ul>
37+
{% for maptopicPage in categoryPage.childPages %}
38+
<li style="margin: 3px 0 0 30px;">
39+
<a title="{{ maptopicPage.page.documentType }}" href="{{ docsRoot }}{{ maptopicPage.href }}">{{ maptopicPage.renderedFullTitle }}</a>
40+
<ul>
41+
{% for articlePage in maptopicPage.childPages %}
42+
<li style="margin: 3px 0 0 30px;">
43+
<a title="{{ articlePage.page.documentType }}" href="{{ docsRoot }}{{ articlePage.href }}">{{ articlePage.renderedFullTitle }}</a>
44+
</li>
45+
{% endfor %}
46+
</ul>
47+
</li>
48+
{% endfor %}
49+
</ul>
50+
</li>
51+
{% endfor %}
52+
</ul>
53+
</li>
54+
</ul>
55+
</details>
56+
{% endfor %}
57+
{% endif %}
58+
59+
<script src="../../index.js"></script>
60+
</main>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)