tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added optional rendering of code block titles (#148)

Browse Source
This commit is contained in:
Geoffrey Garrett 2022-07-01 20:03:52 +02:00 committed by GitHub
parent 3912c98dad
commit c67ffb76ef
9 changed files with 321 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/js/code-title.js Normal file
View File

@ -0,0 +1,13 @@
function addTitleToCodeBlocks() {
var els = document.getElementsByClassName("highlight");
for (var i = 0; i < els.length; i++) {
if (els[i].title.length) {
let div = document.createElement("div");
if (els[i].getElementsByClassName("code-title").length) continue;
div.textContent=els[i].title;
div.classList.add("code-title")
els[i].insertBefore(div, els[i].firstChild);
}
}
};

12
assets/js/darkmode.js
View File

@ -1,18 +1,26 @@
const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
const currentTheme = localStorage.getItem('theme') ?? userPref const currentTheme = localStorage.getItem('theme') ?? userPref
const syntaxTheme = document.querySelector("#theme-link");
{{ $darkSyntax := resources.Get "styles/_dark_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify }}
{{ $lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify }}
if (currentTheme) { if (currentTheme) {
document.documentElement.setAttribute('saved-theme', currentTheme); document.documentElement.setAttribute('saved-theme', currentTheme);
(currentTheme === 'dark') ? syntaxTheme.href = '{{ $darkSyntax.Permalink }}' : syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
} }
const switchTheme = (e) => { const switchTheme = (e) => {
if (e.target.checked) { if (e.target.checked) {
document.documentElement.setAttribute('saved-theme', 'dark') document.documentElement.setAttribute('saved-theme', 'dark');
localStorage.setItem('theme', 'dark') localStorage.setItem('theme', 'dark');
syntaxTheme.href = '{{ $darkSyntax.Permalink }}';
} }
else { else {
document.documentElement.setAttribute('saved-theme', 'light') document.documentElement.setAttribute('saved-theme', 'light')
localStorage.setItem('theme', 'light') localStorage.setItem('theme', 'light')
syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
} }
} }

85
assets/styles/_dark_syntax.scss Normal file
View File

@ -0,0 +1,85 @@
/* Background */ .bg { color: #f8f8f2; background-color: #282a36; }
/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #282a36; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { }
/* CodeLine */ .chroma .cl { }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #ff79c6 }
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
/* KeywordType */ .chroma .kt { color: #8be9fd }
/* Name */ .chroma .n { }
/* NameAttribute */ .chroma .na { color: #50fa7b }
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
/* NameBuiltinPseudo */ .chroma .bp { }
/* NameClass */ .chroma .nc { color: #50fa7b }
/* NameConstant */ .chroma .no { }
/* NameDecorator */ .chroma .nd { }
/* NameEntity */ .chroma .ni { }
/* NameException */ .chroma .ne { }
/* NameFunction */ .chroma .nf { color: #50fa7b }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
/* NameNamespace */ .chroma .nn { }
/* NameOther */ .chroma .nx { }
/* NameProperty */ .chroma .py { }
/* NameTag */ .chroma .nt { color: #ff79c6 }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
/* NameVariableMagic */ .chroma .vm { }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { }
/* LiteralString */ .chroma .s { color: #f1fa8c }
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
/* Operator */ .chroma .o { color: #ff79c6 }
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #6272a4 }
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #ff5555 }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericError */ .chroma .gr { }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
/* GenericOutput */ .chroma .go { color: #44475a }
/* GenericPrompt */ .chroma .gp { }
/* GenericStrong */ .chroma .gs { }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericTraceback */ .chroma .gt { }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { }

85
assets/styles/_light_syntax.scss Normal file
View File

@ -0,0 +1,85 @@
/* Background */ .bg { color: #272822; background-color: #fafafa; }
/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
/* CodeLine */ .chroma .cl { }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #00a8c8 }
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
/* KeywordType */ .chroma .kt { color: #00a8c8 }
/* Name */ .chroma .n { color: #111111 }
/* NameAttribute */ .chroma .na { color: #75af00 }
/* NameBuiltin */ .chroma .nb { color: #111111 }
/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
/* NameClass */ .chroma .nc { color: #75af00 }
/* NameConstant */ .chroma .no { color: #00a8c8 }
/* NameDecorator */ .chroma .nd { color: #75af00 }
/* NameEntity */ .chroma .ni { color: #111111 }
/* NameException */ .chroma .ne { color: #75af00 }
/* NameFunction */ .chroma .nf { color: #75af00 }
/* NameFunctionMagic */ .chroma .fm { color: #111111 }
/* NameLabel */ .chroma .nl { color: #111111 }
/* NameNamespace */ .chroma .nn { color: #111111 }
/* NameOther */ .chroma .nx { color: #75af00 }
/* NameProperty */ .chroma .py { color: #111111 }
/* NameTag */ .chroma .nt { color: #f92672 }
/* NameVariable */ .chroma .nv { color: #111111 }
/* NameVariableClass */ .chroma .vc { color: #111111 }
/* NameVariableGlobal */ .chroma .vg { color: #111111 }
/* NameVariableInstance */ .chroma .vi { color: #111111 }
/* NameVariableMagic */ .chroma .vm { color: #111111 }
/* Literal */ .chroma .l { color: #ae81ff }
/* LiteralDate */ .chroma .ld { color: #d88200 }
/* LiteralString */ .chroma .s { color: #d88200 }
/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
/* LiteralStringChar */ .chroma .sc { color: #d88200 }
/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
/* LiteralStringEscape */ .chroma .se { color: #8045ff }
/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
/* LiteralStringOther */ .chroma .sx { color: #d88200 }
/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
/* LiteralNumber */ .chroma .m { color: #ae81ff }
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
/* Operator */ .chroma .o { color: #f92672 }
/* OperatorWord */ .chroma .ow { color: #f92672 }
/* Punctuation */ .chroma .p { color: #111111 }
/* Comment */ .chroma .c { color: #75715e }
/* CommentHashbang */ .chroma .ch { color: #75715e }
/* CommentMultiline */ .chroma .cm { color: #75715e }
/* CommentSingle */ .chroma .c1 { color: #75715e }
/* CommentSpecial */ .chroma .cs { color: #75715e }
/* CommentPreproc */ .chroma .cp { color: #75715e }
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { }
/* GenericHeading */ .chroma .gh { }
/* GenericInserted */ .chroma .gi { }
/* GenericOutput */ .chroma .go { }
/* GenericPrompt */ .chroma .gp { }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { }
/* GenericTraceback */ .chroma .gt { }
/* GenericUnderline */ .chroma .gl { }
/* TextWhitespace */ .chroma .w { }

20
assets/styles/code-title.scss Normal file
View File

@ -0,0 +1,20 @@
.code-title {
color: var(--primary) ;
font-family: monospace;
width: max-content;
overflow-x: auto;
display: inline-block;
vertical-align: middle;
font-weight: normal;
line-height: 1em;
position: relative;
padding: 0.5em 0.6em 0.6em; // + 1.2 em
max-width: calc(100% - 1.2em); // (-1.2 em) fits article width exactly
margin-bottom: -0.2em;
z-index: -1;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
font-size: 0.9em;
background-color: var(--lightgray);
filter: hue-rotate(-30deg) contrast(1.0) opacity(0.8);
}

137
assets/styles/syntax.scss
View File

@ -1,99 +1,58 @@
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36; overflow: hidden } // Overrides
/* Other */ .chroma .x { } /* Background */
/* Error */ .chroma .err { } .chroma {
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } overflow: hidden !important;
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } background-color: var(--lightgray) !important;
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } /* LineTable */
/* Keyword */ .chroma .k { color: #ff79c6 } .chroma .lntable {
/* KeywordConstant */ .chroma .kc { color: #ff79c6 } width: auto !important;
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic } overflow: auto !important;
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 } display: block !important;
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 } }
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
/* KeywordType */ .chroma .kt { color: #8be9fd } /* LineHighlight */
/* Name */ .chroma .n { } .chroma .hl {
/* NameAttribute */ .chroma .na { color: #50fa7b } display: block !important;
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic } width: 100% !important;
/* NameBuiltinPseudo */ .chroma .bp { } }
/* NameClass */ .chroma .nc { color: #50fa7b }
/* NameConstant */ .chroma .no { } /* LineNumbersTable */
/* NameDecorator */ .chroma .nd { } .chroma .lnt {
/* NameEntity */ .chroma .ni { } margin-right: 0.0em !important;
/* NameException */ .chroma .ne { } padding: 0 0.0em 0 0.0em !important;
/* NameFunction */ .chroma .nf { color: #50fa7b } }
/* NameFunctionMagic */ .chroma .fm { }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic } /* LineNumbers */
/* NameNamespace */ .chroma .nn { } .chroma .ln {
/* NameOther */ .chroma .nx { } margin-right: 0.0em !important;
/* NameProperty */ .chroma .py { } padding: 0 0.0em 0 0.0em !important;
/* NameTag */ .chroma .nt { color: #ff79c6 } }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic } /* GenericDeleted */
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic } .chroma .gd {
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic } color: #8b080b !important;
/* NameVariableMagic */ .chroma .vm { } }
/* Literal */ .chroma .l { }
/* LiteralDate */ .chroma .ld { } /* GenericInserted */
/* LiteralString */ .chroma .s { color: #f1fa8c } .chroma .gi {
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c } font-weight: bold !important;
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c } }
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
/* Operator */ .chroma .o { color: #ff79c6 }
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
/* Punctuation */ .chroma .p { }
/* Comment */ .chroma .c { color: #6272a4 }
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
/* Generic */ .chroma .g { }
/* GenericDeleted */ .chroma .gd { color: #8b080b }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericError */ .chroma .gr { }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { font-weight: bold }
/* GenericOutput */ .chroma .go { color: #44475a }
/* GenericPrompt */ .chroma .gp { }
/* GenericStrong */ .chroma .gs { }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericTraceback */ .chroma .gt { }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
/* TextWhitespace */ .chroma .w { }
.lntd:first-of-type > .chroma { .lntd:first-of-type > .chroma {
padding-right: 0; padding-right: 0 !important;
} }
.chroma code { .chroma code {
font-family: 'Fira Code' !important; font-family: 'Fira Code' !important;
font-size: 0.85em; font-size: 0.85em !important;
line-height: 1em; line-height: 2em !important;
background: none; background: none !important;
padding: 0; padding: 0 !important;
} }
.chroma { .chroma {
border-radius: 3px; border-radius: 3px !important;
margin: 0; margin: 0 !important;
} }

42
content/notes/config.md
View File

@ -8,9 +8,9 @@ weight: 0
## Configuration ## Configuration
Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get. Quartz is designed to be extremely configurable. You can find the bulk of the configuration scattered throughout the repository depending on how in-depth you'd like to get.
The majority of configuration can be be found under `data/config.yaml`. An annotated example configuration is shown below. The majority of configuration can be found under `data/config.yaml`. An annotated example configuration is shown below.
```yaml ```yaml {title="data/config.yaml"}
# The name to display in the footer # The name to display in the footer
name: Jacky Zhao name: Jacky Zhao
@ -25,6 +25,9 @@ openToc: false
# whether to display on-hover link preview cards # whether to display on-hover link preview cards
enableLinkPreview: true enableLinkPreview: true
# whether to render titles for code blocks
enableCodeBlockTitle: true
# whether to try to process Latex # whether to try to process Latex
enableLatex: true enableLatex: true
@ -60,12 +63,34 @@ links:
link: https://github.com/jackyzha0 link: https://github.com/jackyzha0
``` ```
### Code Block Titles
To add code block titles with Quartz:
1. Ensure that code block titles are enabled in Quartz's configuration:
```yaml {title="data/config.yaml", linenos=false}
enableCodeBlockTitle: true
```
2. Add the `title` attribute to the desired [code block
fence](https://gohugo.io/content-management/syntax-highlighting/#highlighting-in-code-fences):
```markdown {linenos=false}
```yaml {title="data/config.yaml"}
enableCodeBlockTitle: true # example from step 1
```
```
**Note** that if `{title=<my-title>}` is included, and code block titles are not
enabled, no errors will occur and the title attribute will be ignored.
### HTML Favicons ### HTML Favicons
If you would like to customize the favicons of your quartz-based website, you If you would like to customize the favicons of your quartz-based website, you
can add them to the `data/config.yaml` file. The **default** without any set can add them to the `data/config.yaml` file. The **default** without any set
`favicon` key is: `favicon` key is:
```html ```html {title="layouts/partials/head.html", linenostart=15}
<link rel="shortcut icon" href="icon.png" type="image/png"> <link rel="shortcut icon" href="icon.png" type="image/png">
``` ```
@ -73,7 +98,7 @@ The default can be overridden by defining a value to the `favicon` key in your
`data/config.yaml` file. Here is a `List[Dictionary]` example format, which is `data/config.yaml` file. Here is a `List[Dictionary]` example format, which is
equivalent to the default: equivalent to the default:
```yaml ```yaml {title="data/config.yaml", linenos=false}
favicon: favicon:
- { rel: "shortcut icon", href: "icon.png", type: "image/png" } - { rel: "shortcut icon", href: "icon.png", type: "image/png" }
# - { ... } # Repeat for each additional favicon you want to add # - { ... } # Repeat for each additional favicon you want to add
@ -85,7 +110,7 @@ If you plan to add multiple favicons generated by a website (see list below), it
may be easier to define it as HTML. Here is an example which appends the may be easier to define it as HTML. Here is an example which appends the
**Apple touch icon** to quartz's default favicon: **Apple touch icon** to quartz's default favicon:
```yaml ```yaml {title="data/config.yaml", linenos=false}
favicon: | favicon: |
<link rel="shortcut icon" href="icon.png" type="image/png"> <link rel="shortcut icon" href="icon.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@ -102,7 +127,8 @@ attribute, are relative to the `static/` directory.
### Graph View ### Graph View
To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`. To customize the Interactive Graph view, you can poke around `data/graphConfig.yaml`.
```yaml
```yaml {title="data/graphConfig.yaml"}
# if true, a Global Graph will be shown on home page with full width, no backlink. # if true, a Global Graph will be shown on home page with full width, no backlink.
# A different set of Local Graphs will be shown on sub pages. # A different set of Local Graphs will be shown on sub pages.
# if false, Local Graph will be default on every page as usual # if false, Local Graph will be default on every page as usual
@ -128,10 +154,10 @@ localGraph:
# how strongly nodes should repel each other # how strongly nodes should repel each other
repelForce: 2 repelForce: 2
# how strongly should nodes be attracted to the center of gravity # how strongly should nodes be attracted to the center of gravity
centerForce: 1 centerForce: 1
# what the default link length should be # what the default link length should be
linkDistance: 1 linkDistance: 1
# how big the node labels should be # how big the node labels should be

1
data/config.yaml
View File

@ -3,6 +3,7 @@ enableToc: true
openToc: false openToc: false
enableLinkPreview: true enableLinkPreview: true
enableLatex: true enableLatex: true
enableCodeBlockTitle: true
enableSPA: true enableSPA: true
enableFooter: true enableFooter: true
enableContextualBacklinks: true enableContextualBacklinks: true

24
layouts/partials/head.html
View File

@ -36,7 +36,11 @@
{{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify }} {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify }}
<link href="{{$finalCss.Permalink}}" rel="stylesheet" /> <link href="{{$finalCss.Permalink}}" rel="stylesheet" />
{{ $darkMode := resources.Get "js/darkmode.js" | resources.Fingerprint "md5" | resources.Minify }} {{$lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify }}
<link href="{{$lightSyntax.Permalink}}" rel="stylesheet" id="theme-link">
<!-- Base scripts -->
{{ $darkMode := resources.Get "js/darkmode.js" | resources.ExecuteAsTemplate "js/darkmode.js" . | resources.Fingerprint "md5" | resources.Minify }}
<script src="{{$darkMode.Permalink}}"></script> <script src="{{$darkMode.Permalink}}"></script>
{{partial "katex.html" .}} {{partial "katex.html" .}}
@ -44,6 +48,12 @@
resources.Minify }} resources.Minify }}
<script src="{{$popover.Permalink}}"></script> <script src="{{$popover.Permalink}}"></script>
<!-- Optional scripts -->
{{ if $.Site.Data.config.enableCodeBlockTitle }}
{{ $codeTitle := resources.Get "js/code-title.js" | resources.Fingerprint "md5" | resources.Minify }}
<script src="{{$codeTitle.Permalink}}"></script>
{{end}}
<!-- Preload page vars --> <!-- Preload page vars -->
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
"md5" | resources.Minify | }} {{$contentIndex := resources.Get "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@ -75,6 +85,10 @@
const pathWindow = window.location.pathname; const pathWindow = window.location.pathname;
const isHome = pathBase == pathWindow; const isHome = pathBase == pathWindow;
{{if $.Site.Data.config.enableSPA -}}
addTitleToCodeBlocks();
{{ end }}
{{if $.Site.Data.config.enableFooter}} {{if $.Site.Data.config.enableFooter}}
const container = document.getElementById("graph-container") const container = document.getElementById("graph-container")
// retry if the graph is not ready // retry if the graph is not ready
@ -92,6 +106,7 @@
{{end}} {{end}}
{{if $.Site.Data.config.enableLinkPreview}} {{if $.Site.Data.config.enableLinkPreview}}
initPopover( initPopover(
{{strings.TrimRight "/" .Site.BaseURL }}, {{strings.TrimRight "/" .Site.BaseURL }},
@ -103,6 +118,13 @@
const init = (doc = document) => { const init = (doc = document) => {
// NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes. // NOTE: everything within this callback will be executed for initial page navigation. This is a good place to put JavaScript that only replaces DOM nodes.
{{if $.Site.Data.config.enableCodeBlockTitle -}}
{{if $.Site.Data.config.enableSPA -}}
addTitleToCodeBlocks();
{{ else }}
window.addEventListener("DOMContentLoaded", addTitleToCodeBlocks);
{{- end -}}
{{- end -}}
{{if $.Site.Data.config.enableLatex}} {{if $.Site.Data.config.enableLatex}}
renderMathInElement(doc.body, { renderMathInElement(doc.body, {
delimiters: [ delimiters: [