Skip to content

Commit 7e0a924

Browse files
stormwarningstormwarning
committed
Update site-nav to show draft pages differently
1 parent f27da33 commit 7e0a924

File tree

8 files changed

+65
-15
lines changed

8 files changed

+65
-15
lines changed

‎docs/eleventy.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default async function config(eleventyConfig) {
4141
async (content, outputPath) => {
4242
let newContent = content
4343

44-
if (outputPath?.endsWith('.html')) {
44+
if (String(outputPath)?.endsWith('.html')) {
4545
let result = await rehype()
4646
.use(rehypeSlug)
4747
.use(rehypeAutolinkHeadings, {

‎docs/remark/table-of-contents.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import classnames from '../src/data/classnames.js'
1515

1616
const HEADINGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
1717

18-
export function rehypeTableOfContents() {
18+
export function rehypeTableOfContents(hasReference = false) {
1919
/** @param {import('hast').Root} tree */
2020
return (tree) => {
2121
/** @type {HeadingObject[]} */
@@ -69,16 +69,18 @@ export function rehypeTableOfContents() {
6969
* @returns
7070
*/
7171
function buildAnchor(id, text, nested = false) {
72-
let classNames = `${classnames.anchorClass} ${nested ? 'sm:pl-7.5' : ''}`
72+
let classNames = `${classnames.commonTextClass} ${classnames.anchorClass} ${nested ? 'sm:pl-7.5' : ''}`
7373
return h('a', { class: classNames, href: `#${id}` }, [text])
7474
}
7575

7676
visit(tree, 'root', (node) => {
7777
node.children = [
7878
h('ul', { class: classnames.listClass }, [
79-
h('li', { class: classnames.listItemClass }, [
80-
buildAnchor('quick-reference', 'Quick reference'),
81-
]),
79+
hasReference
80+
? h('li', { class: classnames.listItemClass }, [
81+
buildAnchor('quick-reference', 'Quick reference'),
82+
])
83+
: undefined,
8284
headings.map((item, index) =>
8385
h('li', { class: classnames.listItemClass }, [
8486
buildAnchor(item.id, item.text),

‎docs/src/data/classnames.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ const classnames = {
22
listClass:
33
'flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,_var(--color-gray-900),white_20%)] border-[color-mix(in_oklab,_var(--color-gray-900),white_90%)]',
44
listItemClass: '-ml-px flex flex-col items-start gap-2',
5+
commonTextClass:
6+
'inline-block border-l border-transparent text-base/8 sm:text-sm/6 pl-5 sm:pl-4',
57
anchorClass:
6-
'inline-block border-l border-transparent text-base/8 text-gray-600 hover:border-gray-900/25 hover:text-gray-900 sm:text-sm/6 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-900 aria-[current]:font-semibold aria-[current]:text-gray-900 dark:aria-[current]:border-white dark:aria-[current]:text-white pl-5 sm:pl-4',
8+
'text-gray-600 hover:border-gray-900/25 hover:text-gray-900 dark:text-gray-300 dark:hover:border-white/25 dark:hover:text-white aria-[current]:border-gray-900 aria-[current]:font-semibold aria-[current]:text-gray-900 dark:aria-[current]:border-white dark:aria-[current]:text-white',
79
}
810

911
export default classnames

‎docs/src/font-variant-east-asian.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22
layout: page
33
title: font-variant-east-asian
44
description: Utilities for controlling alternate glyphs for East Asian scripts, like Japanese and Chinese.
5-
# tags: Font variants
6-
# eleventyNavigation:
7-
# key: font-variant-east-asian
8-
# order: 4
5+
tags: Font variants
6+
eleventyNavigation:
7+
key: font-variant-east-asian
8+
order: 4
9+
url: null
10+
permalink: false
911
---
12+
13+
tk.

‎docs/src/font-variant-position.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
layout: page
3+
title: font-variant-position
4+
description: Utilities for controlling alternate, smaller glyphs that are positioned as superscript or subscript.
5+
tags: Font variants
6+
eleventyNavigation:
7+
key: font-variant-position
8+
order: 5
9+
url: null
10+
permalink: false
11+
---
12+
13+
tk.

‎docs/src/includes/site-nav-list.njk‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% macro navList(collection, currentKey) %}
2+
<ul class="flex flex-col gap-2 border-l dark:border-[color-mix(in_oklab,_var(--color-gray-900),white_20%)] border-[color-mix(in_oklab,_var(--color-gray-900),white_90%)]">
3+
{%- for item in collection %}
4+
<li class="{{ classnames.listItemClass }}">
5+
{%- if item.url %}
6+
<a
7+
class="{{ classnames.commonTextClass }} {{ classnames.anchorClass }}"
8+
href="{{ item.url }}"
9+
{% if item.key === currentKey %}aria-current="page"{% endif %}
10+
>
11+
{{ item.title }}
12+
</a>
13+
{%- else %}
14+
<span class="{{ classnames.commonTextClass }} text-gray-600/50 dark:text-gray-300/50 cursor-default">{{ item.title }}</span>
15+
{%- endif %}
16+
{%- endfor %}
17+
</ul>
18+
{% endmacro %}

‎docs/src/includes/site-nav.njk‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
1+
{% from 'site-nav-list.njk' import navList with context %}
2+
13
<nav class="flex flex-col gap-8" id="nav">
24
{%- if eleventyNavigation -%}
35
{%- set navKey = eleventyNavigation.key -%}
46
{%- endif -%}
7+
<div class="flex flex-col gap-3">
8+
<h5
9+
class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400"
10+
>
11+
Getting started
12+
</h5>
13+
{{ navList(collections['Getting started'] | eleventyNavigation, navKey) }}
14+
</div>
15+
516
<div class="flex flex-col gap-3">
617
<h5
718
class="font-mono text-sm/6 font-medium tracking-widest text-gray-500 uppercase sm:text-xs/6 dark:text-gray-400"
819
>
920
Typography
1021
</h5>
11-
{{ collections['Typography'] | eleventyNavigation | eleventyNavigationToHtml({ listClass: classnames.listClass, listItemClass: classnames.listItemClass, anchorClass: classnames.anchorClass, useAriaCurrentAttr: true, activeKey: navKey }) | safe }}
22+
{{ navList(collections['Typography'] | eleventyNavigation, navKey) }}
1223
</div>
1324

1425
<div class="flex flex-col gap-3">
@@ -17,7 +28,7 @@
1728
>
1829
Font variants
1930
</h5>
20-
{{ collections['Font variants'] | eleventyNavigation | eleventyNavigationToHtml({ listClass: classnames.listClass, listItemClass: classnames.listItemClass, anchorClass: classnames.anchorClass, useAriaCurrentAttr: true, activeKey: navKey }) | safe }}
31+
{{ navList(collections['Font variants'] | eleventyNavigation, navKey) }}
2132
</div>
2233

2334
<div class="flex flex-col gap-3">
@@ -26,6 +37,6 @@
2637
>
2738
OpenType features
2839
</h5>
29-
{{ collections['OpenType features'] | eleventyNavigation | eleventyNavigationToHtml({ listClass: classnames.listClass, listItemClass: classnames.listItemClass, anchorClass: classnames.anchorClass, useAriaCurrentAttr: true, activeKey: navKey }) | safe }}
40+
{{ navList(collections['OpenType features'] | eleventyNavigation, navKey) }}
3041
</div>
3142
</nav>

‎docs/src/layouts/page.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ layout: base
3030
>
3131
On this page
3232
</h5>
33-
{{ content | toc | safe }}
33+
{{ content | toc(classData) | safe }}
3434
</nav>
3535
</div>
3636
</div>

0 commit comments

Comments
 (0)