From b2d62702c15363f16d0ecf4d8e3ec3e510f8c456 Mon Sep 17 00:00:00 2001 From: Cyd Stumpel Date: Tue, 29 Aug 2023 16:59:36 +0200 Subject: [PATCH 1/4] styling updates --- .vscode/settings.json | 25 +++ docs/assets/img/link.svg | 1 + docs/assets/script/main.js | 11 + docs/assets/style/style.css | 381 +++++++++++++++++++++++++++------ docs/index.md | 10 +- package-lock.json | 87 ++++---- package.json | 3 + src/helpers/markdown-parser.js | 2 + 8 files changed, 406 insertions(+), 114 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 docs/assets/img/link.svg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c047ab8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,25 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#fa1b49", + "activityBar.background": "#fa1b49", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#155e02", + "activityBarBadge.foreground": "#e7e7e7", + "commandCenter.border": "#e7e7e799", + "panel.border": "#fa1b49", + "sash.hoverBorder": "#fa1b49", + "sideBar.border": "#fa1b49", + "statusBar.background": "#dd0531", + "statusBar.foreground": "#e7e7e7", + "statusBarItem.hoverBackground": "#fa1b49", + "statusBarItem.remoteBackground": "#dd0531", + "statusBarItem.remoteForeground": "#e7e7e7", + "tab.activeBorder": "#fa1b49", + "titleBar.activeBackground": "#dd0531", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveBackground": "#dd053199", + "titleBar.inactiveForeground": "#e7e7e799" + }, + "peacock.color": "#dd0531" +} \ No newline at end of file diff --git a/docs/assets/img/link.svg b/docs/assets/img/link.svg new file mode 100644 index 0000000..7b3654b --- /dev/null +++ b/docs/assets/img/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/script/main.js b/docs/assets/script/main.js index 1d7a5ba..fdbefe1 100644 --- a/docs/assets/script/main.js +++ b/docs/assets/script/main.js @@ -79,8 +79,19 @@ function scrollHandler() { if (Math.abs(lastScrollTop - scrollTop) <= delta) return if (scrollTop > lastScrollTop && scrollTop > headerHeight) { header.classList.add('header-up') + header.classList.remove('header-visible') } else if (scrollTop < lastScrollTop) { header.classList.remove('header-up') + header.classList.add('header-visible') + } + if (scrollTop > headerHeight) { + header.classList.add('has-scroll') + setTimeout(() => { + header.classList.add('add-transitions') + }, 401); + } else { + header.classList.remove('has-scroll') + header.classList.remove('add-transitions') } lastScrollTop = scrollTop <= 0 ? 0 : scrollTop diff --git a/docs/assets/style/style.css b/docs/assets/style/style.css index 022a773..361f8a2 100644 --- a/docs/assets/style/style.css +++ b/docs/assets/style/style.css @@ -39,7 +39,8 @@ --rounded: 0.5rem; --pilled: 2rem; --shadow: 0.15rem; - --gap: 1rem; + --gap: clamp(1rem, calc(100vw / 24 * 0.5), 2rem); + --large-gap: clamp(1rem, calc(100vw / 24), 4rem); --padding: 1rem; } @@ -58,12 +59,31 @@ html { height: 100%; + scroll-behavior: smooth; + + @media (prefers-reduced-motion) { + scroll-behavior: auto; + } } + +:target:before { + content: ""; + display: block; + height: 100px; + margin: -100px 0 0; +} + + body { --spacing: max(8vh, 3em); height: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; font-family: Open Sans, sans-serif; background: var(--color-background); @@ -77,30 +97,37 @@ header { top: 0; left: 0; right: 0; - height: 4.2rem; z-index: 99; - + background: var(--color-background); color: var(--color-text); - + display: flex; flex-flow: row nowrap; justify-content: space-between; + align-items: center; gap: var(--gap); - padding: var(--padding); + padding: 1.5rem var(--padding) 10px; overflow: scroll; + max-width: 1440px; + margin: 0 auto; + transition: transform 0.4s ease-out; +} - transition: top 0.2s ease-in-out; +.has-scroll { + transform: translateY(-14px); } + .header-up { - top: -4.2rem; + transform: translateY(-101%); } /* FDND LOGO */ -header h1 > abbr { +header h1>abbr { text-decoration: none; } -header h1 > abbr > span { + +header h1>abbr>span { display: block; width: fit-content; color: var(--color-logo); @@ -116,6 +143,7 @@ header h1 > abbr > span { .top h2 { display: none; } + .top a { display: block; padding: 0.25rem 0.5rem; @@ -129,21 +157,26 @@ header h1 > abbr > span { text-decoration: none; transform-origin: center center; } + .top a.active { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-blue); } + .top ul { display: flex; flex-flow: row nowrap; justify-content: flex-end; list-style: none; gap: calc(var(--gap) / 2); + margin: 0; } + .top ul li { white-space: nowrap; } + .top ul li:nth-of-type(1) a, .top ul li:nth-of-type(2) a, .top ul li:nth-of-type(5) a, @@ -171,18 +204,22 @@ header h1 > abbr > span { --webkit-tap-highlight-color: transparent; outline-offset: 5px; } + .top a.github span { display: none; } + .theme-toggle svg, .top a.github svg { inline-size: 100%; block-size: 100%; stroke-linecap: round; } + .top a.github svg { stroke: var(--color-text); } + /* [data-scheme='dark'] svg .rays { stroke: transparent; } */ @@ -190,24 +227,27 @@ header h1 > abbr > span { .top a.github:focus { background: var(--color-yellow); } + .top a.github:hover svg, .top a.github:focus svg { stroke: var(--color-blue) !important; } .sun-and-moon { - & > :is(.moon, .sun, .sun-beams) { + &> :is(.moon, .sun, .sun-beams) { transform-origin: center center; } - & > :is(.moon, .sun) { + + &> :is(.moon, .sun) { fill: var(--color-text); - @nest .theme-toggle:is(:hover, :focus-visible) > & { + @nest .theme-toggle:is(:hover, :focus-visible)>& { background: var(--color-yellow); fill: var(--color-blue); } } - & > .sun-beams { + + &>.sun-beams { stroke: var(--color-text); stroke-width: 2px; @@ -218,13 +258,15 @@ header h1 > abbr > span { } @nest [data-scheme='dark'] & { - & > .sun { + &>.sun { transform: scale(1.75); } - & > .sun-beams { + + &>.sun-beams { opacity: 0; } - & > .moon > circle { + + &>.moon>circle { transform: translateX(-7px); @supports (cx: 1) { @@ -257,36 +299,51 @@ header h1 > abbr > span { min-width: 18rem; height: fit-content; max-height: calc(100vh - 2 * var(--padding)); - padding: var(--padding); - background: var(--color-nav); - color: var(--color-nav-text); + background: var(--color-nav-text); + color: var(--color-nav); border-radius: var(--rounded); + border: var(--color-nav) 1px solid; font-size: 0.9rem; overflow: scroll; + transition: transform 0.4s ease-out; + padding-bottom: 1em; } + /* #toc-toggle:checked ~ nav.toc { } */ .toc ol { list-style: none; } +.toc li a { + display: block; + padding: 0.4em var(--padding); + text-decoration: none; +} +.toc li { + line-height: 1.2; +} + .toc a { color: currentColor; } + .toc a.active { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-blue); } -.toc-link-h2, -.toc-link-h3 { - font-weight: bold; + +.toc-link-h2 { + margin-top: 1em; } -.toc-level-3 .toc-link { - padding-left: 0.5rem; +.toc-link-h3 { + margin-top: 0.5em; } -.toc-level-4 .toc-link { - padding-left: 1rem; +.toc-link-h2, +.toc-link-h3 { + font-weight: bold; } + .toc-link { display: block; width: 100%; @@ -300,8 +357,12 @@ header h1 > abbr > span { /* FOOTER */ footer { padding: var(--padding); + max-width: 1440px; + width: 100%; + margin: 0 auto; } -footer > p > span { + +footer>p>span { display: inline-block; transform: rotate(180deg); } @@ -315,11 +376,19 @@ footer > p > span { main { position: relative; - margin-top: 4.2rem; display: flex; flex-flow: row nowrap; - gap: var(--gap); + gap: var(--large-gap); padding: var(--padding); + max-width: 1440px; + width: 100%; + margin: 4.2rem auto 0; +} + +body:has(header.header-visible.has-scroll) { + & main nav { + transform: translateY(4.5rem); + } } article { @@ -327,86 +396,253 @@ article { min-width: calc(100vw - 2 * var(--padding)); } +/* Section headings specific styling */ +section { + + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { + position: relative; + width: max-content; + max-width: 100%; + &:target { + & .icon-link { + opacity: 0 !important; + transition: opacity 0s ease-out; + } + & a { + pointer-events: none; + &::before { + transition: clip-path 0s ease-out; + } + } + } + + & a { + display: flex; + align-items: center; + position: absolute; + inset: 0 0 0 -0.75em; + background: none; + &::before { + content: ''; + position: absolute; + z-index: -1; + inset: 0; + background-color: var(--color-active) !important; + border-color: var(--color-active) !important; + /* clip-path: polygon(-2% 0%, -2% 0, 100% 100%, 0% 100%); */ + transition: clip-path 0.4s ease-out; + clip-path: polygon(3% 0%, 3% 0%, 0% 100%, 0% 100%); + } + + } + + & a:hover::before, + & a:focus::after { + clip-path: polygon(3% 0%, 100% 0%, 98% 100%, 0% 100%); + } + &:hover, + &:focus { + color: var(--color-active-text) !important; + } + + .icon-link { + display: inline-block; + width: 0.5em; + height: 0.5em; + background-image: url('../img/link.svg'); + background-repeat: none; + background-size: contain; + opacity: 0; + transition: opacity 0.1s ease-out; + + } + + &:hover .icon-link { + opacity: 1; + } + } +} + +@media (prefers-reduced-motion) { + section a::before { + transition: none !important; + } +} +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 { + + &>h1, + &>h2, + &>h3 { + margin-top: 0.75em; + } + + &>h4, + &>h5, + &>h6 { + margin-top: 1em; + } +} + /* DOCUMENT TEXT ITEMS */ a { color: var(--color-text); } + a:hover, a:focus { outline: var(--color-nav-text) !important; - background-color: var(--color-active) !important; - border-color: var(--color-active) !important; - color: var(--color-active-text) !important; } + + +h1, h2, h3, h4, h5, h6 { - margin-bottom: 0.4rem; - line-height: 1em; - font-weight: bold; - overflow-wrap: break-word; + + &+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 { - padding-top: 1.2rem; + line-height: 1em; + font-weight: bold; + overflow-wrap: break-word; } -/* https://typescale.com Perfect fourth */ h2 { - margin-left: -0.15rem; - font-size: 4.209rem; - letter-spacing: -0.1rem; + font-size: 3rem; + letter-spacing: -0.04em; } + h3 { - font-size: 3.157rem; - letter-spacing: -0.15rem; + font-size: 2.5rem; + line-height: 1.1; + letter-spacing: -0.04em; } + h4 { - font-size: 2.369rem; - letter-spacing: -0.15rem; + 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; } -p + p, -p + ul, -ul + p, -p + pre, -pre + p, -table + p, -p + table, -p + blockquote, -blockquote + p { - margin-top: var(--padding); -} + blockquote { margin-left: 1rem; font-style: italic; } + img { border-radius: var(--rounded); max-width: 100%; } -ul { - list-style: disc inside; -} -ol { - list-style: decimal inside; +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); } @@ -414,6 +650,7 @@ pre { table { margin-bottom: 1rem; } + table, tbody, th, @@ -423,15 +660,18 @@ 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; @@ -443,15 +683,15 @@ thead { position: absolute; width: 1px; } + tbody { border: 1px solid var(--color-accent); padding: var(--padding); } -sup { -} -sub { -} +sup {} + +sub {} section.footnotes p { display: inline; @@ -462,24 +702,31 @@ section.footnotes p { nav.top ul li:nth-of-type(1n) a { transform: rotate(-5deg); } + nav.top ul li:nth-of-type(2n) a { transform: rotate(5deg); } + nav.top ul li:nth-of-type(3n) a { transform: rotate(3deg); } + nav.top ul li:nth-of-type(4n) a { transform: rotate(-2deg); } + nav.top ul li:nth-of-type(5n) a { transform: rotate(4deg); } + nav.top ul li:nth-of-type(6n) a { transform: rotate(1deg); } + nav.top ul li:nth-of-type(7n) a { transform: rotate(-2deg); } + nav.top ul li:nth-of-type(8n) a { transform: rotate(3deg); } @@ -489,6 +736,6 @@ section.footnotes p { article { padding: 0; min-width: unset; - max-width: 40rem; + max-width: 800px; } -} +} \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index fd9ca9b..f90d04e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,19 +4,21 @@ docs.fdnd.nl beschrijft de _Associate degree_ Frontend Design & Development, een Al onze visie en beleidsstukken zonder AVG-impact zijn publiek toegankelijk omdat we het belangrijk vinden dat iedereen dit kan inzien en daarop kan reageren. + diff --git a/package-lock.json b/package-lock.json index 8e375d1..e4e3066 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "docs.fdnd.nl", "version": "0.0.2", "license": "MIT", + "dependencies": { + "rehype-autolink-headings": "^6.1.1" + }, "devDependencies": { "file-type": "^18.2.1", "fs-extra": "^11.1.1", @@ -71,7 +74,6 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz", "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==", - "dev": true, "dependencies": { "@types/unist": "*" } @@ -115,8 +117,7 @@ "node_modules/@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", - "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==", - "dev": true + "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, "node_modules/abbrev": { "version": "1.1.1", @@ -163,7 +164,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -565,8 +565,7 @@ "node_modules/extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" }, "node_modules/file-type": { "version": "18.2.1", @@ -721,7 +720,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.1.tgz", "integrity": "sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==", - "dev": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/unified" @@ -731,7 +729,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-2.1.1.tgz", "integrity": "sha512-iAuRp+ESgJoRFJbSyaqsfvJDY6zzmFoEnL1gtz1+U8gKtGGj1p0CVlysuUAUjq95qlZESHINLThwJzNGmgGZxA==", - "dev": true, "dependencies": { "@types/hast": "^2.0.0" }, @@ -759,7 +756,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz", "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==", - "dev": true, "dependencies": { "@types/hast": "^2.0.0", "@types/unist": "^2.0.0" @@ -1150,7 +1146,6 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", - "dev": true, "funding": [ { "type": "github", @@ -1218,7 +1213,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", - "dev": true, "engines": { "node": ">=12" }, @@ -2567,6 +2561,24 @@ "node": ">=6.0.0" } }, + "node_modules/rehype-autolink-headings": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-6.1.1.tgz", + "integrity": "sha512-NMYzZIsHM3sA14nC5rAFuUPIOfg+DFmf9EY1YMhaNlB7+3kK/ZlE6kqPfuxr1tsJ1XWkTrMtMoyHosU70d35mA==", + "dependencies": { + "@types/hast": "^2.0.0", + "extend": "^3.0.0", + "hast-util-has-property": "^2.0.0", + "hast-util-heading-rank": "^2.0.0", + "hast-util-is-element": "^2.0.0", + "unified": "^10.0.0", + "unist-util-visit": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/rehype-document": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/rehype-document/-/rehype-document-6.1.0.tgz", @@ -3353,7 +3365,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz", "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==", - "dev": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" @@ -3385,7 +3396,6 @@ "version": "10.1.2", "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz", "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0", "bail": "^2.0.0", @@ -3424,7 +3434,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz", "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0" }, @@ -3463,7 +3472,6 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz", "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0" }, @@ -3476,7 +3484,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz", "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0", "unist-util-is": "^5.0.0", @@ -3501,7 +3508,6 @@ "version": "5.1.3", "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz", "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0", "unist-util-is": "^5.0.0" @@ -3557,7 +3563,6 @@ "version": "5.3.7", "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz", "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0", "is-buffer": "^2.0.0", @@ -3587,7 +3592,6 @@ "version": "3.1.4", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz", "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==", - "dev": true, "dependencies": { "@types/unist": "^2.0.0", "unist-util-stringify-position": "^3.0.0" @@ -3744,7 +3748,6 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz", "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==", - "dev": true, "requires": { "@types/unist": "*" } @@ -3788,8 +3791,7 @@ "@types/unist": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz", - "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==", - "dev": true + "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, "abbrev": { "version": "1.1.1", @@ -3822,8 +3824,7 @@ "bail": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", - "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==", - "dev": true + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==" }, "balanced-match": { "version": "1.0.2", @@ -4125,8 +4126,7 @@ "extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" }, "file-type": { "version": "18.2.1", @@ -4246,14 +4246,12 @@ "hast-util-has-property": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-2.0.1.tgz", - "integrity": "sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==", - "dev": true + "integrity": "sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==" }, "hast-util-heading-rank": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-2.1.1.tgz", "integrity": "sha512-iAuRp+ESgJoRFJbSyaqsfvJDY6zzmFoEnL1gtz1+U8gKtGGj1p0CVlysuUAUjq95qlZESHINLThwJzNGmgGZxA==", - "dev": true, "requires": { "@types/hast": "^2.0.0" } @@ -4273,7 +4271,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-2.1.3.tgz", "integrity": "sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==", - "dev": true, "requires": { "@types/hast": "^2.0.0", "@types/unist": "^2.0.0" @@ -4549,8 +4546,7 @@ "is-buffer": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz", - "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==", - "dev": true + "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==" }, "is-docker": { "version": "2.2.1", @@ -4582,8 +4578,7 @@ "is-plain-obj": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", - "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", - "dev": true + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==" }, "is-promise": { "version": "2.2.2", @@ -5497,6 +5492,20 @@ "minimatch": "^3.0.5" } }, + "rehype-autolink-headings": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-6.1.1.tgz", + "integrity": "sha512-NMYzZIsHM3sA14nC5rAFuUPIOfg+DFmf9EY1YMhaNlB7+3kK/ZlE6kqPfuxr1tsJ1XWkTrMtMoyHosU70d35mA==", + "requires": { + "@types/hast": "^2.0.0", + "extend": "^3.0.0", + "hast-util-has-property": "^2.0.0", + "hast-util-heading-rank": "^2.0.0", + "hast-util-is-element": "^2.0.0", + "unified": "^10.0.0", + "unist-util-visit": "^4.0.0" + } + }, "rehype-document": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/rehype-document/-/rehype-document-6.1.0.tgz", @@ -6093,8 +6102,7 @@ "trough": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz", - "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==", - "dev": true + "integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==" }, "type": { "version": "1.2.0", @@ -6118,7 +6126,6 @@ "version": "10.1.2", "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz", "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==", - "dev": true, "requires": { "@types/unist": "^2.0.0", "bail": "^2.0.0", @@ -6145,7 +6152,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz", "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==", - "dev": true, "requires": { "@types/unist": "^2.0.0" } @@ -6172,7 +6178,6 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz", "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==", - "dev": true, "requires": { "@types/unist": "^2.0.0" } @@ -6181,7 +6186,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz", "integrity": "sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==", - "dev": true, "requires": { "@types/unist": "^2.0.0", "unist-util-is": "^5.0.0", @@ -6198,7 +6202,6 @@ "version": "5.1.3", "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz", "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==", - "dev": true, "requires": { "@types/unist": "^2.0.0", "unist-util-is": "^5.0.0" @@ -6238,7 +6241,6 @@ "version": "5.3.7", "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz", "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==", - "dev": true, "requires": { "@types/unist": "^2.0.0", "is-buffer": "^2.0.0", @@ -6260,7 +6262,6 @@ "version": "3.1.4", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz", "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==", - "dev": true, "requires": { "@types/unist": "^2.0.0", "unist-util-stringify-position": "^3.0.0" diff --git a/package.json b/package.json index b06909b..059c362 100644 --- a/package.json +++ b/package.json @@ -49,5 +49,8 @@ "to-vfile": "^7.2.4", "unified": "^10.1.2", "vfile-reporter": "^7.0.5" + }, + "dependencies": { + "rehype-autolink-headings": "^6.1.1" } } diff --git a/src/helpers/markdown-parser.js b/src/helpers/markdown-parser.js index ce92401..16dfeab 100644 --- a/src/helpers/markdown-parser.js +++ b/src/helpers/markdown-parser.js @@ -3,6 +3,7 @@ import fdndWrapper from './fdnd-wrapper.js' import rehypeDocument from 'rehype-document' import rehypeFormat from 'rehype-format' import rehypeRaw from 'rehype-raw' +import rehypeAutolinkHeadings from 'rehype-autolink-headings' import rehypeSectionHeadings from 'rehype-section-headings' import rehypeShiftHeading from 'rehype-shift-heading' import rehypeSlug from 'rehype-slug' @@ -24,6 +25,7 @@ export default unified() .use(rehypeSlug) .use(rehypeWrap, { wrapper: 'article' }) .use(rehypeToc) + .use(rehypeAutolinkHeadings) .use(rehypeSectionHeadings, { sectionDataAttribute: 'data-heading-id' }) .use(shiki, { theme: 'monokai' }) .use(fdndWrapper) From 1ac1fffb4f16518c9b7acfa8f359bda009bf0f6e Mon Sep 17 00:00:00 2001 From: Cyd Stumpel Date: Tue, 29 Aug 2023 17:00:47 +0200 Subject: [PATCH 2/4] styling updates --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index e5430af..571a462 100644 --- a/.gitignore +++ b/.gitignore @@ -121,7 +121,7 @@ dist # Stores VSCode versions used for testing VSCode extensions .vscode-test - +.vs-code # yarn v2 .yarn/cache .yarn/unplugged From e8dc9fed3a42725072ee77b560763be0a84cf12e Mon Sep 17 00:00:00 2001 From: Cyd Stumpel Date: Tue, 29 Aug 2023 17:01:06 +0200 Subject: [PATCH 3/4] styling updates --- .vscode/settings.json | 25 ------------------------- 1 file changed, 25 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index c047ab8..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "workbench.colorCustomizations": { - "activityBar.activeBackground": "#fa1b49", - "activityBar.background": "#fa1b49", - "activityBar.foreground": "#e7e7e7", - "activityBar.inactiveForeground": "#e7e7e799", - "activityBarBadge.background": "#155e02", - "activityBarBadge.foreground": "#e7e7e7", - "commandCenter.border": "#e7e7e799", - "panel.border": "#fa1b49", - "sash.hoverBorder": "#fa1b49", - "sideBar.border": "#fa1b49", - "statusBar.background": "#dd0531", - "statusBar.foreground": "#e7e7e7", - "statusBarItem.hoverBackground": "#fa1b49", - "statusBarItem.remoteBackground": "#dd0531", - "statusBarItem.remoteForeground": "#e7e7e7", - "tab.activeBorder": "#fa1b49", - "titleBar.activeBackground": "#dd0531", - "titleBar.activeForeground": "#e7e7e7", - "titleBar.inactiveBackground": "#dd053199", - "titleBar.inactiveForeground": "#e7e7e799" - }, - "peacock.color": "#dd0531" -} \ No newline at end of file From 88b26a9cb218e1fc917835866c8c26119783658d Mon Sep 17 00:00:00 2001 From: Cyd Stumpel Date: Tue, 29 Aug 2023 17:01:31 +0200 Subject: [PATCH 4/4] styling updates --- docs/assets/script/main.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/assets/script/main.js b/docs/assets/script/main.js index fdbefe1..b822273 100644 --- a/docs/assets/script/main.js +++ b/docs/assets/script/main.js @@ -86,12 +86,8 @@ function scrollHandler() { } if (scrollTop > headerHeight) { header.classList.add('has-scroll') - setTimeout(() => { - header.classList.add('add-transitions') - }, 401); } else { header.classList.remove('has-scroll') - header.classList.remove('add-transitions') } lastScrollTop = scrollTop <= 0 ? 0 : scrollTop