docs: compile stylesheet via dart-sass

This commit is contained in:
raf 2024-11-08 12:19:19 +03:00
parent e89f074c09
commit 8a98147d5b
Signed by: NotAShelf
GPG key ID: AF26552424E53993
2 changed files with 11 additions and 835 deletions

View file

@ -4,6 +4,7 @@
# build inputs
nixos-render-docs,
documentation-highlighter,
dart-sass,
path,
# nrd configuration
release,
@ -18,7 +19,9 @@ in
path = lib.sourceFilesBySuffices ./manual [".md" ".md.in"];
};
strictDependencies = true;
nativeBuildInputs = [nixos-render-docs];
buildInputs = [dart-sass];
postPatch = ''
ln -s ${optionsJSON}/share/doc/nixos/options.json ./config-options.json
@ -36,6 +39,7 @@ in
${documentation-highlighter}/mono-blue.css \
${documentation-highlighter}/loader.js
# Copy anchor scripts to the script directory in document root.
cp -vt $dest/script \
${./static/script}/anchor-min.js \
${./static/script}/anchor-use.js
@ -44,14 +48,15 @@ in
--subst-var-by OPTIONS_JSON ./config-options.json
substituteInPlace ./manual.md \
--subst-var-by NVF_VERSION ${manual-release} \
--subst-var-by NVF_SRC "https://github.com/nvf/blob/${manual-release}"
--subst-var-by NVF_VERSION ${manual-release}
# copy stylesheet
cp ${./static/style.css} "$dest/style.css"
substituteInPlace ./hacking/additional-plugins.md \
--subst-var-by NVF_REPO "https://github.com/nvf/blob/${manual-release}"
# Compile and copy stylesheet to the project root.
sass ${./static/style.css} "$dest/style.css"
# copy release notes
# Move release notes
cp -vr ${./release-notes} release-notes
# Generate final manual from a set of parameters. Explanation of the CLI flags are
@ -79,6 +84,7 @@ in
manual.md \
"$dest/index.xhtml"
# Hydra support. Probably not necessary.
mkdir -p $out/nix-support/
echo "doc manual $dest index.html" >> $out/nix-support/hydra-build-products
'';

830
docs/static/style.css vendored
View file

@ -1,830 +0,0 @@
:root {
--nmd-color0: #0a3e68;
--nmd-color1: #268598;
--nmd-color2: #b8d09e;
--nmd-color3: #f6cf5e;
--nmd-color4: #ec733b;
--nmd-color-info: #167cb9;
--nmd-color-warn: #ff6700;
}
html {
-webkit-text-size-adjust: 100%;
}
html:focus-within {
scroll-behavior: smooth;
}
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
position: relative;
text-rendering: optimizeSpeed;
width: 100%;
}
*,
:after,
:before {
box-sizing: border-box;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
border: 0;
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
:focus {
outline: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: "";
content: none;
}
input,
input:required {
box-shadow: none;
}
input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
-webkit-box-shadow: inset 0 0 0 30px #fff;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
-moz-appearance: none;
}
input[type="search"] {
-webkit-appearance: none;
-moz-appearance: none;
}
input:focus {
outline: 0;
}
audio,
canvas,
video {
display: inline-block;
max-width: 100%;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
a:active,
a:hover {
outline: 0;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
img,
picture {
display: inline-block;
}
button,
input {
line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
background: 0 0;
border: 0;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
[disabled] {
pointer-events: none;
}
input[type="checkbox"],
input[type="radio"] {
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button {
background: 0 0;
border: 0;
}
textarea {
overflow: auto;
resize: vertical;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
text-indent: 0;
}
hr {
background: #000;
border: 0;
box-sizing: content-box;
height: 1px;
line-height: 0;
margin: 0;
overflow: visible;
padding: 0;
page-break-after: always;
width: 100%;
}
pre {
font-family: monospace, monospace;
font-size: 100%;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: none;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
}
small,
sub,
sup {
font-size: 75%;
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -5px;
}
sup {
top: -5px;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1;
margin: 0;
padding: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
outline: 0;
padding: 0;
}
legend {
border: 0;
color: inherit;
display: block;
max-width: 100%;
white-space: normal;
width: 100%;
}
fieldset {
min-width: 0;
}
body:not(:-moz-handler-blocked) fieldset {
display: block;
}
progress {
vertical-align: baseline;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
template {
display: none;
}
body {
background: white;
color: #111827;
max-width: min(100ch, 1024px);
margin: 0 auto;
padding: 10px;
font-family: "Lucida Sans", Arial, sans-serif;
font-size: 16px;
line-height: 1.4em;
}
@media (prefers-color-scheme: dark) {
body {
background: #111827;
color: #f9fafb;
}
}
h1,
h2,
h3 {
color: var(--nmd-color0);
font-family: "Lato", sans-serif;
font-weight: 300;
line-height: 1.125;
}
@media (prefers-color-scheme: dark) {
h1,
h2,
h3 {
color: var(--nmd-color4);
}
}
h1 {
font-size: 48px;
font-weight: 300;
margin: 4rem 0 1.5rem;
}
h2 {
font-size: 32px;
font-weight: 300;
margin: 2rem 0 1rem;
}
h3 {
font-size: 20px;
font-weight: 400;
margin: 0.5rem 0.25rem;
}
p {
margin: 0.9rem 0;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--nmd-color0);
text-decoration: underline;
text-underline-offset: 3px;
}
a:visited {
color: var(--nmd-color1);
}
a:hover {
color: var(--nmd-color1);
}
@media (prefers-color-scheme: dark) {
a {
color: var(--nmd-color3);
}
a:visited {
color: var(--nmd-color2);
}
a:hover {
color: var(--nmd-color4);
}
}
code {
font-size: 90%;
}
span.command {
font-size: 90%;
font-family: monospace;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
pre {
background: #f9fafb;
margin: 2rem 16px;
padding: 10px;
border: 1px solid #e5e7eb;
border-radius: 4px;
box-shadow: 4px 4px 8px #e5e7eb;
font-size: 90%;
margin-bottom: 1.5rem;
padding: 6px;
overflow: auto;
}
@media (prefers-color-scheme: dark) {
pre {
background: #1f2937;
border-color: black;
box-shadow: 4px 4px 8px black;
}
}
pre span img {
user-select: none;
}
pre:has(code) {
padding: 0;
}
td,
th {
padding: 2px 5px;
}
td:first-child,
th:first-child {
padding-left: 0;
}
td:last-child,
th:last-child {
padding-right: 0;
}
dt {
margin: 1.2rem 0 0.8rem;
}
dd {
margin-left: 2rem;
}
ul {
margin: 0.9rem 0;
padding-left: 30px;
list-style: disc;
}
ul:first-child {
margin-top: 0;
}
ul:last-child {
margin-bottom: 0;
}
ol {
margin: 0.9rem 0;
padding-left: 30px;
list-style: decimal;
}
ol:first-child {
margin-top: 0;
}
ol:last-child {
margin-bottom: 0;
}
li {
margin: 0.9rem 0;
padding-left: 5px;
}
li:first-child {
margin-top: 0;
}
li:last-child {
margin-bottom: 0;
}
.navheader hr,
.navfooter hr {
margin: 1rem 0;
background: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
.navheader hr,
.navfooter hr {
background: #4b5563;
}
}
.navheader a,
.navfooter a {
text-decoration: none;
}
div.titlepage {
margin: 40px 0;
}
div.titlepage hr {
display: none;
}
div.toc {
background: #f9fafb;
margin: 2rem 16px;
padding: 10px;
border: 1px solid #e5e7eb;
border-radius: 4px;
box-shadow: 4px 4px 8px #e5e7eb;
}
@media (prefers-color-scheme: dark) {
div.toc {
background: #1f2937;
border-color: black;
box-shadow: 4px 4px 8px black;
}
}
div.toc a {
text-decoration: none;
}
div.note,
div.warning {
background: #f9fafb;
margin: 2rem 16px;
padding: 10px;
border: 1px solid #e5e7eb;
border-radius: 4px;
box-shadow: 4px 4px 8px #e5e7eb;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
div.note,
div.warning {
background: #1f2937;
border-color: black;
box-shadow: 4px 4px 8px black;
}
}
div.note h3,
div.warning h3 {
float: right;
margin: 0 0 1rem 1rem;
width: 42px;
height: 42px;
content: url();
}
div.note h3 + p,
div.warning h3 + p {
margin-top: 0;
}
div.note h3 {
background-color: var(--nmd-color-info);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3Cpath d='M11 12h1v4h1'%3E%3C/path%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z'%3E%3C/path%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 8h.01'%3E%3C/path%3E%3Cpath d='M11 12h1v4h1'%3E%3C/path%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z'%3E%3C/path%3E%3C/svg%3E");
}
div.warning h3 {
background-color: var(--nmd-color-warn);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 9v2m0 4v.01'%3E%3C/path%3E%3Cpath d='M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75'%3E%3C/path%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' stroke-width='2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M12 9v2m0 4v.01'%3E%3C/path%3E%3Cpath d='M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75'%3E%3C/path%3E%3C/svg%3E");
}
.term {
font-weight: 300;
}
.docbook .xref img[src^="images\/callouts\/"],
.screen img,
.programlisting img {
width: 1em;
}
.calloutlist img {
width: 1.3em;
}
.programlisting.language-shell .hljs-meta.prompt_ {
user-select: none;
} /*!
Theme: Tomorrow
Author: Chris Kempson (http://chriskempson.com)
License: ~ MIT (or more permissive) [via base16-schemes-source]
Maintainer: @highlightjs/core-team
Version: 2021.09.0
*/
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px;
}
.hljs {
color: #4d4d4c;
background: #fff;
}
.hljs ::selection,
.hljs::selection {
background-color: #d6d6d6;
color: #4d4d4c;
}
.hljs-comment {
color: #8e908c;
}
.hljs-tag {
color: #969896;
}
.hljs-operator,
.hljs-punctuation,
.hljs-subst {
color: #4d4d4c;
}
.hljs-operator {
opacity: 0.7;
}
.hljs-bullet,
.hljs-deletion,
.hljs-name,
.hljs-selector-tag,
.hljs-template-variable,
.hljs-variable {
color: #c82829;
}
.hljs-attr,
.hljs-link,
.hljs-literal,
.hljs-number,
.hljs-symbol,
.hljs-variable.constant_ {
color: #f5871f;
}
.hljs-class .hljs-title,
.hljs-title,
.hljs-title.class_ {
color: #eab700;
}
.hljs-strong {
font-weight: 700;
color: #eab700;
}
.hljs-addition,
.hljs-code,
.hljs-string,
.hljs-title.class_.inherited__ {
color: #718c00;
}
.hljs-built_in,
.hljs-doctag,
.hljs-keyword.hljs-atrule,
.hljs-quote,
.hljs-regexp {
color: #3e999f;
}
.hljs-attribute,
.hljs-function .hljs-title,
.hljs-section,
.hljs-title.function_,
.ruby .hljs-property {
color: #4271ae;
}
.diff .hljs-meta,
.hljs-keyword,
.hljs-template-tag,
.hljs-type {
color: #8959a8;
}
.hljs-emphasis {
color: #8959a8;
font-style: italic;
}
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
color: #a3685a;
}
.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
font-weight: 700;
}
@media (prefers-color-scheme: dark) {
/*! Theme: Tomorrow Night Author: Chris Kempson (http://chriskempson.com) License: ~ MIT (or more permissive) [via base16-schemes-source] Maintainer: @highlightjs/core-team Version: 2021.09.0*/
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px;
}
.hljs {
color: #ccc;
background: #2d2d2d;
}
.hljs ::selection,
.hljs::selection {
background-color: #515151;
color: #ccc;
}
.hljs-comment {
color: #999;
}
.hljs-tag {
color: #b4b7b4;
}
.hljs-operator,
.hljs-punctuation,
.hljs-subst {
color: #ccc;
}
.hljs-operator {
opacity: 0.7;
}
.hljs-bullet,
.hljs-deletion,
.hljs-name,
.hljs-selector-tag,
.hljs-template-variable,
.hljs-variable {
color: #f2777a;
}
.hljs-attr,
.hljs-link,
.hljs-literal,
.hljs-number,
.hljs-symbol,
.hljs-variable.constant_ {
color: #f99157;
}
.hljs-class .hljs-title,
.hljs-title,
.hljs-title.class_ {
color: #fc6;
}
.hljs-strong {
font-weight: 700;
color: #fc6;
}
.hljs-addition,
.hljs-code,
.hljs-string,
.hljs-title.class_.inherited__ {
color: #9c9;
}
.hljs-built_in,
.hljs-doctag,
.hljs-keyword.hljs-atrule,
.hljs-quote,
.hljs-regexp {
color: #6cc;
}
.hljs-attribute,
.hljs-function .hljs-title,
.hljs-section,
.hljs-title.function_,
.ruby .hljs-property {
color: #69c;
}
.diff .hljs-meta,
.hljs-keyword,
.hljs-template-tag,
.hljs-type {
color: #c9c;
}
.hljs-emphasis {
color: #c9c;
font-style: italic;
}
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
color: #a3685a;
}
.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
font-weight: 700;
}
}