From da9a1c0818fa8c496c590f4dca3eb2c7b33afd7f Mon Sep 17 00:00:00 2001 From: Justus Sturkenboom Date: Tue, 23 Jan 2024 09:43:37 +0100 Subject: [PATCH] Bare essentials done --- docs/assets/style/style.css | 345 ++++++++++++++++++++++++++++++-- package.json | 6 +- src/helpers/fdnd-discussions.js | 2 - src/helpers/fdnd-wrapper.js | 23 ++- src/helpers/markdown-parser.js | 2 +- 5 files changed, 350 insertions(+), 28 deletions(-) diff --git a/docs/assets/style/style.css b/docs/assets/style/style.css index 9f20579..103064a 100644 --- a/docs/assets/style/style.css +++ b/docs/assets/style/style.css @@ -31,7 +31,7 @@ *:before, *:after { box-sizing: border-box; - /* margin: 0; */ + margin: 0; padding: 0; } @@ -63,6 +63,8 @@ body { font-family: Open Sans, sans-serif; background: var(--color-background); color: var(--color-text); + + padding: var(--gap); } header { @@ -103,14 +105,6 @@ header { } /* Top menu (https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/) */ -.dropdown__title { - background: var(--color-background); - border: 0; - border-radius: var(--rounded); - font-size: 1rem; - font-family: inherit; -} - header nav { display: grid; place-items: center; @@ -140,7 +134,15 @@ header nav { } } -.dropdown { +& .dropdown__title { + background: var(--color-background); + border: 0; + border-radius: var(--rounded); + font-size: 1rem; + font-family: inherit; +} + +& .dropdown { position: relative; & .dropdown__menu { @@ -150,6 +152,7 @@ header nav { box-shadow: var(--shadow); padding: var(--padding); min-width: 100%; + z-index: 99; /* Put centered below button */ position: absolute; @@ -197,7 +200,7 @@ header nav { } } -/* header settings */ +/* header settings panel */ .settings { display: none; } @@ -276,7 +279,325 @@ footer { margin-top: auto; } -/* HTML ELEMENTS */ +/* DOCUMENT TEXT ITEMS */ + +/* Section headings specific styling */ +section { + position: relative; + padding-right: 0.5em; + border-right-width: 1px; + border-right-style: solid; + border-right-color: transparent; + max-width: 34rem; + transition: 0.2s; + + &:has(.icon-discussion) { + border-right-color: var(--color-text); + } + &:has(.icon-discussion:hover), + &:has(.icon-discussion:focus), + &:has(.icon-new-discussion:hover), + &:has(.icon-new-discussion:focus) { + background: var(--color-active); + border-right-color: var(--color-text); + } + + & h2, + & h3, + & h4, + & h5, + & h6 { + & a:first-of-type { + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + &:after { + content: ''; + display: inline-block; + margin-left: calc(var(--gap) / 4); + width: 1.2rem; + height: 1.2rem; + background-repeat: none; + background-size: contain; + background-image: url('../img/link.svg'); + } + } + + & a.discussion-link { + position: absolute; + top: -0.2rem; + right: -0.7rem; + line-height: 1.2rem; + + & .icon { + display: inline-block; + width: 1.2rem; + height: 1.2rem; + background-repeat: none; + background-size: contain; + background: var(--color-background); + border-radius: var(--rounded); + } + & .icon-discussion { + background-image: url('../img/message-exclamation.svg'); + } + & .icon-new-discussion { + background-image: url('../img/message-plus.svg'); + } + } + } +} + +main section:first-of-type { + & p { + font-size: 1.1rem; + font-weight: 600; + & + p { + font-size: 1rem; + font-weight: 400; + } + } +} + +section { + & p { + line-height: 1.5; + } +} + +section + section { + & > h2, + & > h3 { + margin-top: 0.75em; + } + + & > h4, + & > h5, + & > h6 { + margin-top: 1em; + } +} + +main a, +footer a { + color: var(--color-text); + white-space: inherit; + + &:not(.discussion-link) { + &[href^='http://']:after, + &[href^='https://']:after, + &[href$='.pdf']:after, + &[href$='.doc']:after, + &[href$='.zip']:after, + &[href$='.rar']:after, + &[href$='.tar']:after { + content: ''; + margin: 0 0 -0.1em 0.1em; + display: inline-block; + line-height: 1em; + font-size: 0.8em; + width: 1em; + height: 1em; + background: url('../img/link-external.svg') no-repeat 100% 0; + background-size: contain; + } + &[href^='http://']:after, + &[href^='https://']:after + { + background: url('../img/link-external.svg') no-repeat 100% 0; + } + &[href$='.pdf']:after, + &[href$='.doc']:after { + background: url('../img/file-text.svg') no-repeat 100% 0; + } + &[href$='.zip']:after, + &[href$='.rar']:after, + &[href$='.tar']:after { + background: url('../img/file-zip.svg') no-repeat 100% 0; + } + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + & + p, + & + ul, + & + ol, + & + blockquote, + & + table { + margin-top: 1em; + } +} + +blockquote { + position: relative; + margin-left: 1em; + + &::before { + position: absolute; + inset: 0.2em 0 0.2em -1em; + background: currentColor; + content: ''; + width: 0.3em; + border-radius: 2px; + opacity: 0.3; + } +} + +p, +blockquote, +ul, +ol, +table { + & + h1, + & + h2, + & + h3, + & + h4, + & + h5, + & + h6, + & + p, + & + ul, + & + ol, + & + blockquote, + & + table { + margin-top: 1em; + } +} + +h2, +h3, +h4, +h5, +h6 { + line-height: 1em; + font-weight: bold; + overflow-wrap: break-word; +} + +h2 { + font-size: 3rem; + letter-spacing: -0.04em; +} + +h3 { + font-size: 2.5rem; + line-height: 1.1; + letter-spacing: -0.04em; +} + +h4 { + font-size: 2rem; + line-height: 1.1; + letter-spacing: -0.04em; +} + +h5 { + line-height: 1.1; + font-size: 1.777rem; +} + +h6 { + line-height: 1.1; + font-size: 1.333rem; +} + +small, +sup, +sub { + font-size: 0.75rem; +} + +blockquote { + margin-left: 1rem; + font-style: italic; +} + +img { + border-radius: var(--rounded); + max-width: 100%; +} +article { + & ul { + list-style: disc; + padding-left: 1rem; + + & li + li { + margin-top: 0.4em; + } + } + + & ol { + list-style: decimal; + padding-left: 1rem; + + & li + li { + margin-top: 0.4em; + } + } +} + +pre { + padding: var(--padding); +} + +table { + margin-bottom: 1rem; +} + +table, +tbody, +th, +td, +tr, +caption { + display: block; + text-align: left; +} + +tr, +caption { + margin-bottom: 0.625em; +} + +caption { + display: block; + font-size: 0.75em; + font-style: italic; +} + +thead { + display: block; + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +tbody { + border: 1px solid var(--color-accent); + padding: var(--padding); +} + +sup { +} + +sub { +} + +section.footnotes p { + display: inline; +} img { border-radius: var(--rounded); diff --git a/package.json b/package.json index f4df925..f1e0b73 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,9 @@ "main": "main.js", "type": "module", "scripts": { - "reload-browser": "reload -b -w ./ -e now -d build", - "watch-src": "nodemon -e \"*\" --watch src --delay 50ms --exec \"npm run build && touch .reload.now\"", - "watch-docs": "nodemon -e \"*\" --watch docs --delay 50ms --exec \"npm run build && touch .reload.now\"", + "reload-browser": "reload -v -b -w ./ -e now -d build", + "watch-src": "nodemon -e \"*\" --watch src --delay 150ms --exec \"npm run build && touch .reload.now\"", + "watch-docs": "nodemon -e \"*\" --watch docs --delay 150ms --exec \"npm run build && touch .reload.now\"", "build": "node ./src/main.js", "dev": "npm-run-all --parallel reload-browser watch-src watch-docs", "write": "npm-run-all --parallel reload-browser watch-docs" diff --git a/src/helpers/fdnd-discussions.js b/src/helpers/fdnd-discussions.js index 1de1769..fbf7832 100644 --- a/src/helpers/fdnd-discussions.js +++ b/src/helpers/fdnd-discussions.js @@ -46,8 +46,6 @@ export default function fdndDiscussions(options = {}) { const discussion = discussions.length > 0 ? discussions.find((discussion) => discussion.title === node.properties.id) : null - node.children[0] = h('span', node.children[0]) - if (discussion) { node.children.push( h( diff --git a/src/helpers/fdnd-wrapper.js b/src/helpers/fdnd-wrapper.js index 34e0bcb..c0d416b 100644 --- a/src/helpers/fdnd-wrapper.js +++ b/src/helpers/fdnd-wrapper.js @@ -9,7 +9,7 @@ import { h } from 'hastscript' export default function fdndWrap() { return function (tree, file) { let submenu = selectAll('h3', tree).map((element) => { - return h('li', h('a', { href: `#${element.properties.id}` }, element.children[1].children[0].value)) + return h('li', h('a', { href: `#${element.properties.id}` }, element.children[0].children[0].value)) }) if (submenu.length > 0) { @@ -82,15 +82,18 @@ export default function fdndWrap() { ]), ]), h('main', tree), - h('footer', [ - h('h2', 'Help ons dit document te verbeteren!'), - h( - 'p', - 'Alle fdnd documenten zijn open source. Zie je iets wat verkeerd of onduidelijk is? Doe een pull-request.' - ), - h('a.github', { href: 'https://github.com/fdnd/docs.fdnd.nl/blob/main/docs/' + file.basename }, 'Draag bij'), - h('p.copy', [h('span', '©'), ' Copyleft, all wrongs reversed.']), - ]), + h( + 'footer', + h('section', [ + h('h2', 'Help ons dit document te verbeteren!'), + h( + 'p', + 'Alle fdnd documenten zijn open source. Zie je iets wat verkeerd of onduidelijk is? Doe een pull-request.' + ), + h('a.github', { href: 'https://github.com/fdnd/docs.fdnd.nl/blob/main/docs/' + file.basename }, 'Draag bij'), + h('p.copy', [h('span', '©'), ' Copyleft, all wrongs reversed.']), + ]) + ), ] } } diff --git a/src/helpers/markdown-parser.js b/src/helpers/markdown-parser.js index 08fbf13..7c29a63 100644 --- a/src/helpers/markdown-parser.js +++ b/src/helpers/markdown-parser.js @@ -24,10 +24,10 @@ export default unified() .use(rehypeRaw) .use(rehypeShiftHeading, { shift: 1 }) // Shift headings up, only h1 in header, h2 in documents .use(rehypeSlug) + .use(rehypeAutolinkHeadings, { behaviour: 'wrap' }) .use(fdndDiscussions) .use(rehypeWrap, { wrapper: 'article' }) .use(rehypeToc, { headings: ['h3', 'h4'], cssClasses: { toc: 'subnav' } }) - .use(rehypeAutolinkHeadings, { properties: { class: 'auto-link', 'aria-hidden': 'true' } }) .use(rehypeSectionHeadings, { sectionDataAttribute: 'data-heading-id' }) .use(shiki, { theme: 'monokai' }) .use(fdndWrapper)