diff --git a/doc/anchor-use.js b/doc/anchor-use.js new file mode 100644 index 000000000000..06ec24883aa3 --- /dev/null +++ b/doc/anchor-use.js @@ -0,0 +1,3 @@ +document.addEventListener('DOMContentLoaded', function(event) { + anchors.add('h1:not(div.note h1, div.warning h1, div.tip h1, div.caution h1, div.important h1), h2:not(div.note h2, div.warning h2, div.tip h2, div.caution h2, div.important h2), h3:not(div.note h3, div.warning h3, div.tip h3, div.caution h3, div.important h3), h4:not(div.note h4, div.warning h4, div.tip h4, div.caution h4, div.important h4), h5:not(div.note h5, div.warning h5, div.tip h5, div.caution h5, div.important h5), h6:not(div.note h6, div.warning h6, div.tip h6, div.caution h6, div.important h6)'); +}); diff --git a/doc/anchor.min.js b/doc/anchor.min.js new file mode 100644 index 000000000000..00f80c058f6d --- /dev/null +++ b/doc/anchor.min.js @@ -0,0 +1,9 @@ +// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat +// +// AnchorJS - v5.0.0 - 2023-01-18 +// https://www.bryanbraun.com/anchorjs/ +// Copyright (c) 2023 Bryan Braun; Licensed MIT +// +// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat +!function(A,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():(A.AnchorJS=e(),A.anchors=new A.AnchorJS)}(globalThis,function(){"use strict";return function(A){function u(A){A.icon=Object.prototype.hasOwnProperty.call(A,"icon")?A.icon:"",A.visible=Object.prototype.hasOwnProperty.call(A,"visible")?A.visible:"hover",A.placement=Object.prototype.hasOwnProperty.call(A,"placement")?A.placement:"right",A.ariaLabel=Object.prototype.hasOwnProperty.call(A,"ariaLabel")?A.ariaLabel:"Anchor",A.class=Object.prototype.hasOwnProperty.call(A,"class")?A.class:"",A.base=Object.prototype.hasOwnProperty.call(A,"base")?A.base:"",A.truncate=Object.prototype.hasOwnProperty.call(A,"truncate")?Math.floor(A.truncate):64,A.titleText=Object.prototype.hasOwnProperty.call(A,"titleText")?A.titleText:""}function d(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new TypeError("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}this.options=A||{},this.elements=[],u(this.options),this.add=function(A){var e,t,o,i,n,s,a,r,l,c,h,p=[];if(u(this.options),0!==(e=d(A=A||"h2, h3, h4, h5, h6")).length){for(null===document.head.querySelector("style.anchorjs")&&((A=document.createElement("style")).className="anchorjs",A.appendChild(document.createTextNode("")),void 0===(h=document.head.querySelector('[rel="stylesheet"],style'))?document.head.appendChild(A):document.head.insertBefore(A,h),A.sheet.insertRule(".anchorjs-link{opacity:0;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}",A.sheet.cssRules.length),A.sheet.insertRule(":hover>.anchorjs-link,.anchorjs-link:focus{opacity:1}",A.sheet.cssRules.length),A.sheet.insertRule("[data-anchorjs-icon]::after{content:attr(data-anchorjs-icon)}",A.sheet.cssRules.length),A.sheet.insertRule('@font-face{font-family:anchorjs-icons;src:url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype")}',A.sheet.cssRules.length)),h=document.querySelectorAll("[id]"),t=[].map.call(h,function(A){return A.id}),i=0;i\]./()*\\\n\t\b\v\u00A0]/g,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()},this.hasAnchorJSLink=function(A){var e=A.firstChild&&-1<(" "+A.firstChild.className+" ").indexOf(" anchorjs-link "),A=A.lastChild&&-1<(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ");return e||A||!1}}}); +// @license-end diff --git a/doc/default.nix b/doc/default.nix index bcbc20b9f983..76aba1a03eaf 100644 --- a/doc/default.nix +++ b/doc/default.nix @@ -122,16 +122,17 @@ in pkgs.stdenv.mkDerivation { ${pkgs.documentation-highlighter}/mono-blue.css \ ${pkgs.documentation-highlighter}/loader.js - cp -t out ./overrides.css ./style.css + cp -t out ./style.css ./anchor.min.js ./anchor-use.js nixos-render-docs manual html \ --manpage-urls ./manpage-urls.json \ --revision ${pkgs.lib.trivial.revisionWithDefault (pkgs.rev or "master")} \ --stylesheet style.css \ - --stylesheet overrides.css \ --stylesheet highlightjs/mono-blue.css \ --script ./highlightjs/highlight.pack.js \ --script ./highlightjs/loader.js \ + --script ./anchor.min.js \ + --script ./anchor-use.js \ --toc-depth 1 \ --section-toc-depth 1 \ manual.md \ diff --git a/doc/overrides.css b/doc/overrides.css deleted file mode 100644 index 73901a3f543b..000000000000 --- a/doc/overrides.css +++ /dev/null @@ -1,22 +0,0 @@ -.docbook .xref img[src^=images\/callouts\/], -.screen img, -.programlisting img, -.literallayout img, -.synopsis img { - width: 1em; -} - -.calloutlist img { - width: 1.5em; -} - -.prompt, -.screen img, -.programlisting img, -.literallayout img, -.synopsis img { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} diff --git a/doc/style.css b/doc/style.css index 474dd32e3fb1..fddf4f4823c7 100644 --- a/doc/style.css +++ b/doc/style.css @@ -1,291 +1,416 @@ -/* Copied from http://bakefile.sourceforge.net/, which appears - licensed under the GNU GPL. */ - - -/*************************************************************************** - Basic headers and text: - ***************************************************************************/ - -body -{ - font-family: "Nimbus Sans L", sans-serif; - font-size: 1em; - background: white; - margin: 2em 1em 2em 1em; +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; } -h1, h2, h3, h4 -{ - color: #005aa0; +body { + margin: 0; } -h1 /* title */ -{ - font-size: 200%; -} - -h2 /* chapters, appendices, subtitle */ -{ - font-size: 180%; -} - -div.book -{ - text-align: center; -} - -div.book > div -{ - /* - * based on https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a - * we do 70 characters per line to fit code listings better - * 70 * (font-size / 1.618) - * expression for emacs: - * (* 70 (/ 1 1.618)) - */ - max-width: 43.2em; - text-align: left; +.book { margin: auto; + width: 100%; } -/* Extra space between chapters, appendices. */ -div.chapter > div.titlepage h2, div.appendix > div.titlepage h2 -{ - margin-top: 1.5em; +@media screen and (min-width: 768px) { + .book { + max-width: 46rem; + } } -div.section > div.titlepage h2 /* sections */ -{ - font-size: 150%; - margin-top: 1.5em; +@media screen and (min-width: 992px) { + .book { + max-width: 60rem; + } } -h3 /* subsections */ -{ - font-size: 125%; +@media screen and (min-width: 1200px) { + .book { + max-width: 73rem; + } } -div.simplesect h2 -{ - font-size: 110%; +.book .list-of-examples { + display: none; } -div.appendix h3 -{ - font-size: 150%; - margin-top: 1.5em; +h1 { + font-size: 2em; + margin: 0.67em 0; } -div.refnamediv h2, div.refsynopsisdiv h2, div.refsection h2 /* refentry parts */ -{ - margin-top: 1.4em; - font-size: 125%; +hr { + box-sizing: content-box; + height: 0; + overflow: visible; } -div.refsection h3 -{ - font-size: 110%; +pre { + font-family: monospace, monospace; + font-size: 1em; } - -/*************************************************************************** - Examples: - ***************************************************************************/ - -div.example -{ - border: 1px solid #b0b0b0; - padding: 6px 6px; - margin-left: 1.5em; - margin-right: 1.5em; - background: #f4f4f8; - border-radius: 0.4em; - box-shadow: 0.4em 0.4em 0.5em #e0e0e0; +a { + background-color: transparent; } -div.example p.title -{ - margin-top: 0em; +strong { + font-weight: bolder; } -div.example pre -{ - box-shadow: none; +code { + font-family: monospace, monospace; + font-size: 1em; } - -/*************************************************************************** - Screen dumps: - ***************************************************************************/ - -pre.screen, pre.programlisting -{ - border: 1px solid #b0b0b0; - padding: 3px 3px; - margin-left: 0.5em; - margin-right: 0.5em; - - background: #f4f4f8; - font-family: monospace; - border-radius: 0.4em; - box-shadow: 0.4em 0.4em 0.5em #e0e0e0; +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -div.example pre.programlisting -{ - border: 0px; - padding: 0 0; - margin: 0 0 0 0; +sup { + top: -0.5em; } -/*************************************************************************** - Notes, warnings etc: - ***************************************************************************/ - -.note, .warning -{ - border: 1px solid #b0b0b0; - padding: 3px 3px; - margin-left: 1.5em; - margin-right: 1.5em; - margin-bottom: 1em; - padding: 0.3em 0.3em 0.3em 0.3em; - background: #fffff5; - border-radius: 0.4em; - box-shadow: 0.4em 0.4em 0.5em #e0e0e0; +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } -div.note, div.warning -{ - font-style: italic; +pre { + overflow: auto; } -div.note h3, div.warning h3 -{ - color: red; +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { font-size: 100%; - padding-right: 0.5em; - display: inline; + line-height: 1.77777778; } -div.note p, div.warning p -{ - margin-bottom: 0em; +@media screen and (min-width: 4000px) { + html { + background: #000; + } + + html body { + margin: auto; + max-width: 250rem; + } } -div.note h3 + p, div.warning h3 + p -{ - display: inline; +@media screen and (max-width: 320px) { + html { + font-size: calc(16 / 320 * 100vw); + } } -div.note h3 -{ - color: blue; - font-size: 100%; +body { + font-size: 1rem; + font-family: 'Roboto', sans-serif; + font-weight: 300; + color: #000000; + background-color: #ffffff; + min-height: 100vh; + display: flex; + flex-direction: column; } -div.navfooter * -{ - font-size: 90%; +@media screen and (max-width: 767.9px) { + body { + padding-left: 1rem; + padding-right: 1rem; + } } - -/*************************************************************************** - Links colors and highlighting: - ***************************************************************************/ - -a { text-decoration: none; } -a:hover { text-decoration: underline; } -a:link { color: #0048b3; } -a:visited { color: #002a6a; } - - -/*************************************************************************** - Table of contents: - ***************************************************************************/ - -div.toc -{ - font-size: 90%; +a { + text-decoration: none; + border-bottom: 1px solid; + color: #405d99; } -div.toc dl -{ - margin-top: 0em; - margin-bottom: 0em; +ul { + padding: 0; + margin-top: 0; + margin-right: 0; + margin-bottom: 1rem; + margin-left: 1rem; } - -/*************************************************************************** - Special elements: - ***************************************************************************/ - -tt, code -{ - color: #400000; -} - -.term -{ - font-weight: bold; - -} - -div.variablelist dd p, div.glosslist dd p -{ - margin-top: 0em; -} - -div.variablelist dd, div.glosslist dd -{ - margin-left: 1.5em; -} - -div.glosslist dt -{ - font-style: italic; -} - -.varname -{ - color: #400000; -} - -span.command strong -{ - font-weight: normal; - color: #400000; -} - -div.calloutlist table -{ - box-shadow: none; -} - -table -{ +table { border-collapse: collapse; - box-shadow: 0.4em 0.4em 0.5em #e0e0e0; + width: 100%; + margin-bottom: 1rem; } -table.simplelist -{ +thead th { text-align: left; - color: #005aa0; +} + +hr { + margin-top: 1rem; + margin-bottom: 1rem; +} + +h1 { + font-weight: 800; + line-height: 110%; + font-size: 200%; + margin-bottom: 1rem; + color: #6586c8; +} + +h2 { + font-weight: 800; + line-height: 110%; + font-size: 170%; + margin-bottom: 0.625rem; + color: #6586c8; +} + +h2:not(:first-child) { + margin-top: 1rem; +} + +h3 { + font-weight: 800; + line-height: 110%; + margin-bottom: 1rem; + font-size: 150%; + color: #6586c8; +} + +.note h3, +.tip h3, +.warning h3, +.caution h3, +.important h3 { + font-size: 120%; +} + +h4 { + font-weight: 800; + line-height: 110%; + margin-bottom: 1rem; + font-size: 140%; + color: #6586c8; +} + +h5 { + font-weight: 800; + line-height: 110%; + margin-bottom: 1rem; + font-size: 130%; + color: #6a6a6a; +} + +h6 { + font-weight: 800; + line-height: 110%; + margin-bottom: 1rem; + font-size: 120% +} + +strong { + font-weight: bold; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +dt>*:first-child, +dd>*:first-child { + margin-top: 0; +} + +dt>*:last-child, +dd>*:last-child { + margin-bottom: 0; +} + +pre, +code { + font-family: monospace; +} + +code { + color: #ff8657; + background: #f4f4f4; + display: inline-block; + padding: 0 0.5rem; + border: 1px solid #d8d8d8; + border-radius: 0.5rem; + line-height: 1.57777778; +} + +div.book .programlisting, +div.appendix .programlisting { + border-radius: 0.5rem; + padding: 1rem; + overflow: auto; + background: #f2f8fd; + color: #000000; +} + +div.book .note, +div.book .tip, +div.book .warning, +div.book .caution, +div.book .important, +div.appendix .note, +div.appendix .tip, +div.appendix .warning, +div.appendix .caution, +div.appendix .important { + margin-bottom: 1rem; + border-radius: 0.5rem; + padding: 1.5rem; + overflow: auto; + background: #f4f4f4; +} + +div.book .note>.title, +div.book .tip>.title, +div.book .warning>.title, +div.book .caution>.title, +div.book .important>.title, +div.appendix .note>.title, +div.appendix .tip>.title, +div.appendix .warning>.title, +div.appendix .caution>.title, +div.appendix .important>.title { + font-weight: 800; + /* font-family: 'Overpass', serif; */ + line-height: 110%; + margin-bottom: 1rem; + color: inherit; + margin-bottom: 0; +} + +div.book .note> :first-child, +div.book .tip> :first-child, +div.book .warning> :first-child, +div.book .caution> :first-child, +div.book .important> :first-child, +div.appendix .note> :first-child, +div.appendix .tip> :first-child, +div.appendix .warning> :first-child, +div.appendix .caution> :first-child, +div.appendix .important> :first-child { + margin-top: 0; +} + +div.book .note> :last-child, +div.book .tip> :last-child, +div.book .warning> :last-child, +div.book .caution> :last-child, +div.book .important> :last-child, +div.appendix .note> :last-child, +div.appendix .tip> :last-child, +div.appendix .warning> :last-child, +div.appendix .caution> :last-child, +div.appendix .important> :last-child { + margin-bottom: 0; +} + +div.book .note, +div.book .tip, +div.appendix .note, +div.appendix .tip { + color: #5277c3; + background: #f2f8fd; +} + +div.book .warning, +div.book .caution, +div.appendix .warning, +div.appendix .caution { + color: #cc3900; + background-color: #fff5e1; +} + +div.book .section, +div.appendix .section { + margin-top: 2em; +} + +div.book div.example, +div.appendix div.example { + margin-top: 1.5em; +} + +div.book br.example-break, +div.appendix br.example-break { + display: none; +} + +div.book div.footnotes>hr, +div.appendix div.footnotes>hr { + border-color: #d8d8d8; +} + +div.book div.footnotes>br, +div.appendix div.footnotes>br { + display: none; +} + +div.book dt, +div.appendix dt { + margin-top: 1em; +} + +div.book .toc dt, +div.appendix .toc dt { + margin-top: 0; +} + +div.book .list-of-examples dt, +div.appendix .list-of-examples dt { + margin-top: 0; +} + +div.book code, +div.appendix code { + padding: 0; border: 0; - padding: 5px; - background: #fffff5; - font-weight: normal; - font-style: italic; - box-shadow: none; - margin-bottom: 1em; + background-color: inherit; + color: inherit; + font-size: 100%; + -webkit-hyphens: none; + -moz-hyphens: none; + hyphens: none; } -div.navheader table, div.navfooter table { - box-shadow: none; +div.book div.toc, +div.appendix div.toc { + margin-bottom: 3em; + border-bottom: 0.0625rem solid #d8d8d8; } -div.affiliation -{ - font-style: italic; +div.book div.toc dd, +div.appendix div.toc dd { + margin-left: 2em; +} + +div.book span.command, +div.appendix span.command { + font-family: monospace; + -webkit-hyphens: none; + -moz-hyphens: none; + hyphens: none; +} + +div.book .informaltable th, +div.book .informaltable td, +div.appendix .informaltable th, +div.appendix .informaltable td { + padding: 0.5rem; } diff --git a/nixos/doc/manual/default.nix b/nixos/doc/manual/default.nix index a368b16201f8..5f51bb53ad7f 100644 --- a/nixos/doc/manual/default.nix +++ b/nixos/doc/manual/default.nix @@ -105,7 +105,9 @@ in rec { mkdir -p $dst cp ${../../../doc/style.css} $dst/style.css - cp ${../../../doc/overrides.css} $dst/overrides.css + cp ${../../../doc/anchor.min.js} $dst/anchor.min.js + cp ${../../../doc/anchor-use.js} $dst/anchor-use.js + cp -r ${pkgs.documentation-highlighter} $dst/highlightjs ${prepareManualFromMD} @@ -115,10 +117,11 @@ in rec { --revision ${lib.escapeShellArg revision} \ --generator "nixos-render-docs ${lib.version}" \ --stylesheet style.css \ - --stylesheet overrides.css \ --stylesheet highlightjs/mono-blue.css \ --script ./highlightjs/highlight.pack.js \ --script ./highlightjs/loader.js \ + --script ./anchor.min.js \ + --script ./anchor-use.js \ --toc-depth 1 \ --chunk-toc-depth 1 \ ./manual.md \ diff --git a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py index b9227814dea2..3ee10a60568d 100644 --- a/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py +++ b/pkgs/tools/nix/nixos-render-docs/src/nixos_render_docs/html.py @@ -163,7 +163,7 @@ class HTMLRenderer(Renderer): # keycap-styled spans. (id_part, class_part) = ("", "") if s := token.attrs.get('id'): - id_part = f'' + id_part = f'' if s := token.attrs.get('class'): if s == 'keycap': class_part = '' @@ -181,7 +181,7 @@ class HTMLRenderer(Renderer): if hstyle: hstyle = f'style="{escape(hstyle, True)}"' if anchor := cast(str, token.attrs.get('id', '')): - anchor = f'' + anchor = f'' result = self._close_headings(hlevel) tag = self._heading_tag(token, tokens, i) toc_fragment = self._build_toc(tokens, i) @@ -220,7 +220,7 @@ class HTMLRenderer(Renderer): def example_open(self, token: Token, tokens: Sequence[Token], i: int) -> str: if id := cast(str, token.attrs.get('id', '')): id = f'id="{escape(id, True)}"' if id else '' - return f'
' + return f'
' def example_close(self, token: Token, tokens: Sequence[Token], i: int) -> str: return '

' def example_title_open(self, token: Token, tokens: Sequence[Token], i: int) -> str: @@ -239,7 +239,7 @@ class HTMLRenderer(Renderer): ) def figure_open(self, token: Token, tokens: Sequence[Token], i: int) -> str: if anchor := cast(str, token.attrs.get('id', '')): - anchor = f'' + anchor = f'' return f'
{anchor}' def figure_close(self, token: Token, tokens: Sequence[Token], i: int) -> str: return ( diff --git a/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py b/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py index fba0ce2679a4..9a3e07cb24c7 100644 --- a/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py +++ b/pkgs/tools/nix/nixos-render-docs/src/tests/test_html.py @@ -167,7 +167,7 @@ def test_full() -> None: man(1) reference

-

some nested anchors

+

some nested anchors

emph␣ strong␣