mirror of https://github.com/logos-co/roadmap.git
147 lines
22 KiB
HTML
147 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html><head><title>Configuration</title><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta property="og:title" content="Configuration"/><meta property="og:description" content="Quartz is meant to be extremely configurable, even if you don’t know any coding. Most of the configuration you should need can be done by just editing quartz."/><meta property="og:image" content="https://roadmap.logos.co/static/og-image.png"/><meta property="og:width" content="1200"/><meta property="og:height" content="675"/><link rel="icon" href="./static/icon.png"/><meta name="description" content="Quartz is meant to be extremely configurable, even if you don’t know any coding. Most of the configuration you should need can be done by just editing quartz."/><meta name="generator" content="Logos Roadmaps"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com"/><link href="./index.css" rel="stylesheet" type="text/css" spa-preserve/><link href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" rel="stylesheet" type="text/css" spa-preserve/><link href="https://fonts.googleapis.com/css2?family=IBM Plex Mono&family=Schibsted Grotesk:wght@400;700&family=Source Sans Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet" type="text/css" spa-preserve/><script src="./prescript.js" type="application/javascript" spa-preserve></script><script type="application/javascript" spa-preserve>const fetchData = fetch(`./static/contentIndex.json`).then(data => data.json())</script></head><body data-slug="configuration"><div id="quartz-root" class="page"><div id="quartz-body"><div class="left sidebar"><h1 class="page-title"><a href=".">Logos Collective Project Roadmaps</a></h1><div class="spacer mobile-only"></div><div class="search"><div id="search-icon"><p>Search</p><div></div><svg tabIndex="0" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search</title><desc id="desc">Search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"></path><circle cx="8" cy="8" r="7"></circle></g></svg></div><div id="search-container"><div id="search-space"><input autocomplete="off" id="search-bar" name="search" type="text" aria-label="Search for something" placeholder="Search for something"/><div id="results-container"></div></div></div></div><div class="darkmode"><input class="toggle" id="darkmode-toggle" type="checkbox" tabIndex="-1"/><label id="toggle-label-light" for="darkmode-toggle" tabIndex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xmlSpace="preserve"><title>Light mode</title><path d="M6,17.5C6,16.672,5.328,16,4.5,16h-3C0.672,16,0,16.672,0,17.5 S0.672,19,1.5,19h3C5.328,19,6,18.328,6,17.5z M7.5,26c-0.414,0-0.789,0.168-1.061,0.439l-2,2C4.168,28.711,4,29.086,4,29.5 C4,30.328,4.671,31,5.5,31c0.414,0,0.789-0.168,1.06-0.44l2-2C8.832,28.289,9,27.914,9,27.5C9,26.672,8.329,26,7.5,26z M17.5,6 C18.329,6,19,5.328,19,4.5v-3C19,0.672,18.329,0,17.5,0S16,0.672,16,1.5v3C16,5.328,16.671,6,17.5,6z M27.5,9 c0.414,0,0.789-0.168,1.06-0.439l2-2C30.832,6.289,31,5.914,31,5.5C31,4.672,30.329,4,29.5,4c-0.414,0-0.789,0.168-1.061,0.44 l-2,2C26.168,6.711,26,7.086,26,7.5C26,8.328,26.671,9,27.5,9z M6.439,8.561C6.711,8.832,7.086,9,7.5,9C8.328,9,9,8.328,9,7.5 c0-0.414-0.168-0.789-0.439-1.061l-2-2C6.289,4.168,5.914,4,5.5,4C4.672,4,4,4.672,4,5.5c0,0.414,0.168,0.789,0.439,1.06 L6.439,8.561z M33.5,16h-3c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3c0.828,0,1.5-0.672,1.5-1.5S34.328,16,33.5,16z M28.561,26.439C28.289,26.168,27.914,26,27.5,26c-0.828,0-1.5,0.672-1.5,1.5c0,0.414,0.168,0.789,0.439,1.06l2,2 C28.711,30.832,29.086,31,29.5,31c0.828,0,1.5-0.672,1.5-1.5c0-0.414-0.168-0.789-0.439-1.061L28.561,26.439z M17.5,29 c-0.829,0-1.5,0.672-1.5,1.5v3c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5v-3C19,29.672,18.329,29,17.5,29z M17.5,7 C11.71,7,7,11.71,7,17.5S11.71,28,17.5,28S28,23.29,28,17.5S23.29,7,17.5,7z M17.5,25c-4.136,0-7.5-3.364-7.5-7.5 c0-4.136,3.364-7.5,7.5-7.5c4.136,0,7.5,3.364,7.5,7.5C25,21.636,21.636,25,17.5,25z"></path></svg></label><label id="toggle-label-dark" for="darkmode-toggle" tabIndex="-1"><svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background='new 0 0 100 100'" xmlSpace="preserve"><title>Dark mode</title><path d="M96.76,66.458c-0.853-0.852-2.15-1.064-3.23-0.534c-6.063,2.991-12.858,4.571-19.655,4.571 C62.022,70.495,50.88,65.88,42.5,57.5C29.043,44.043,25.658,23.536,34.076,6.47c0.532-1.08,0.318-2.379-0.534-3.23 c-0.851-0.852-2.15-1.064-3.23-0.534c-4.918,2.427-9.375,5.619-13.246,9.491c-9.447,9.447-14.65,22.008-14.65,35.369 c0,13.36,5.203,25.921,14.65,35.368s22.008,14.65,35.368,14.65c13.361,0,25.921-5.203,35.369-14.65 c3.872-3.871,7.064-8.328,9.491-13.246C97.826,68.608,97.611,67.309,96.76,66.458z"></path></svg></label></div><div class="toc desktop-only"><button type="button" id="toc"><h3>Table of Contents</h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold"><polyline points="6 9 12 15 18 9"></polyline></svg></button><div id="toc-content"><ul class="overflow"><li class="depth-0"><a href="#general-configuration" data-for="general-configuration">General Configuration</a></li><li class="depth-0"><a href="#plugins" data-for="plugins">Plugins</a></li></ul></div></div></div><div class="center"><div class="page-header"><div class="popover-hint"><h1 class="article-title">Configuration</h1><p class="content-meta">Aug 22, 2023, 4 min read</p></div></div><article class="popover-hint"><p>Quartz is meant to be extremely configurable, even if you don’t know any coding. Most of the configuration you should need can be done by just editing <code>quartz.config.ts</code> or changing <a href="./layout" class="internal">the layout</a> in <code>quartz.layout.ts</code>.</p>
|
||
<blockquote class="callout" data-callout="tip">
|
||
<div class="callout-title">
|
||
<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></div>
|
||
<div class="callout-title-inner"><p>Tip </p></div>
|
||
|
||
</div>
|
||
<p>If you edit Quartz configuration using a text-editor that has TypeScript language support like VSCode, it will warn you when you you’ve made an error in your configuration, helping you avoid configuration mistakes!</p>
|
||
</blockquote>
|
||
<p>The configuration of Quartz can be broken down into two main parts:</p>
|
||
<div data-rehype-pretty-code-fragment><div data-rehype-pretty-code-title data-language="ts" data-theme="default">quartz.config.ts</div><pre style="background-color:var(--shiki-color-background);" tabindex="0" data-language="ts" data-theme="default"><code data-language="ts" data-theme="default"><span data-line><span style="color:var(--shiki-token-keyword);">const</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-constant);">config</span><span style="color:var(--shiki-token-keyword);">:</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-function);">QuartzConfig</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-keyword);">=</span><span style="color:var(--shiki-color-text);"> {</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> configuration</span><span style="color:var(--shiki-token-keyword);">:</span><span style="color:var(--shiki-color-text);"> { </span><span style="color:var(--shiki-token-keyword);">...</span><span style="color:var(--shiki-color-text);"> }</span><span style="color:var(--shiki-token-punctuation);">,</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> plugins</span><span style="color:var(--shiki-token-keyword);">:</span><span style="color:var(--shiki-color-text);"> { </span><span style="color:var(--shiki-token-keyword);">...</span><span style="color:var(--shiki-color-text);"> }</span><span style="color:var(--shiki-token-punctuation);">,</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);">}</span></span></code></pre></div>
|
||
<h2 id="general-configuration">General Configuration<a aria-hidden="true" tabindex="-1" href="#general-configuration" class="internal"> §</a></h2>
|
||
<p>This part of the configuration concerns anything that can affect the whole site. The following is a list breaking down all the things you can configure:</p>
|
||
<ul>
|
||
<li><code>pageTitle</code>: title of the site. This is also used when generating the <a href="./RSS-Feed" class="internal">RSS Feed</a> for your site.</li>
|
||
<li><code>enableSPA</code>: whether to enable <a href="./SPA-Routing" class="internal">SPA Routing</a> on your site.</li>
|
||
<li><code>enablePopovers</code>: whether to enable <a href="./popover-previews" class="internal">popover previews</a> on your site.</li>
|
||
<li><code>analytics</code>: what to use for analytics on your site. Values can be
|
||
<ul>
|
||
<li><code>null</code>: don’t use analytics;</li>
|
||
<li><code>{ provider: 'plausible' }</code>: use <a href="https://plausible.io/" class="external">Plausible</a>, a privacy-friendly alternative to Google Analytics; or</li>
|
||
<li><code>{ provider: 'google', tagId: <your-google-tag> }</code>: use Google Analytics</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>baseUrl</code>: this is used for sitemaps and RSS feeds that require an absolute URL to know where the canonical ‘home’ of your site lives. This is normally the deployed URL of your site (e.g. <code>quartz.jzhao.xyz</code> for this site). Do not include the protocol (i.e. <code>https://</code>) or any leading or trailing slashes.
|
||
<ul>
|
||
<li>This should also include the subpath if you are <a href="./hosting" class="internal">hosting</a> on GitHub pages without a custom domain. For example, if my repository is <code>jackyzha0/quartz</code>, GitHub pages would deploy to <code>https://jackyzha0.github.io/quartz</code> and the <code>baseUrl</code> would be <code>jackyzha0.github.io/quartz</code></li>
|
||
<li>Note that Quartz 4 will avoid using this as much as possible and use relative URLs whenever it can to make sure your site works no matter <em>where</em> you end up actually deploying it.</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>ignorePatterns</code>: a list of <a href="https://en.wikipedia.org/wiki/Glob_(programming)" class="external">glob</a> patterns that Quartz should ignore and not search through when looking for files inside the <code>content</code> folder. See <a href="./private-pages" class="internal">private pages</a> for more details.</li>
|
||
<li><code>theme</code>: configure how the site looks.
|
||
<ul>
|
||
<li><code>typography</code>: what fonts to use. Any font available on <a href="https://fonts.google.com/" class="external">Google Fonts</a> works here.
|
||
<ul>
|
||
<li><code>header</code>: Font to use for headers</li>
|
||
<li><code>code</code>: Font for inline and block quotes.</li>
|
||
<li><code>body</code>: Font for everything</li>
|
||
</ul>
|
||
</li>
|
||
<li><code>colors</code>: controls the theming of the site.
|
||
<ul>
|
||
<li><code>light</code>: page background</li>
|
||
<li><code>lightgray</code>: borders</li>
|
||
<li><code>gray</code>: graph links, heavier borders</li>
|
||
<li><code>darkgray</code>: body text</li>
|
||
<li><code>dark</code>: header text and icons</li>
|
||
<li><code>secondary</code>: link colour, current <a href="./graph-view" class="internal">graph</a> node</li>
|
||
<li><code>tertiary</code>: hover states and visited <a href="./graph-view" class="internal">graph</a> nodes</li>
|
||
<li><code>highlight</code>: internal link background, highlighted text, <a href="./syntax-highlighting" class="internal">highlighted lines of code</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h2 id="plugins">Plugins<a aria-hidden="true" tabindex="-1" href="#plugins" class="internal"> §</a></h2>
|
||
<p>You can think of Quartz plugins as a series of transformations over content.</p>
|
||
<p><img src="./images/quartz-transform-pipeline.png" width="auto" height="auto"/></p>
|
||
<div data-rehype-pretty-code-fragment><pre style="background-color:var(--shiki-color-background);" tabindex="0" data-language="ts" data-theme="default"><code data-language="ts" data-theme="default"><span data-line><span style="color:var(--shiki-color-text);">plugins</span><span style="color:var(--shiki-token-punctuation);">:</span><span style="color:var(--shiki-color-text);"> {</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> transformers</span><span style="color:var(--shiki-token-punctuation);">:</span><span style="color:var(--shiki-color-text);"> [</span><span style="color:var(--shiki-token-keyword);">...</span><span style="color:var(--shiki-color-text);">]</span><span style="color:var(--shiki-token-punctuation);">,</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> filters</span><span style="color:var(--shiki-token-punctuation);">:</span><span style="color:var(--shiki-color-text);"> [</span><span style="color:var(--shiki-token-keyword);">...</span><span style="color:var(--shiki-color-text);">]</span><span style="color:var(--shiki-token-punctuation);">,</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> emitters</span><span style="color:var(--shiki-token-punctuation);">:</span><span style="color:var(--shiki-color-text);"> [</span><span style="color:var(--shiki-token-keyword);">...</span><span style="color:var(--shiki-color-text);">]</span><span style="color:var(--shiki-token-punctuation);">,</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);">}</span></span></code></pre></div>
|
||
<ul>
|
||
<li><a href="./making-plugins#transformers" class="internal">Transformers</a> <strong>map</strong> over content (e.g. parsing frontmatter, generating a description)</li>
|
||
<li><a href="./making-plugins#filters" class="internal">Filters</a> <strong>filter</strong> content (e.g. filtering out drafts)</li>
|
||
<li><a href="./making-plugins#emitters" class="internal">Emitters</a> <strong>reduce</strong> over content (e.g. creating an RSS feed or pages that list all files with a specific tag)</li>
|
||
</ul>
|
||
<p>By adding, removing, and reordering plugins from the <code>tranformers</code>, <code>filters</code>, and <code>emitters</code> fields, you can customize the behaviour of Quartz.</p>
|
||
<blockquote class="callout" data-callout="note">
|
||
<div class="callout-title">
|
||
<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg></div>
|
||
<div class="callout-title-inner"><p>Note </p></div>
|
||
|
||
</div>
|
||
<p>Each node is modified by every transformer <em>in order</em>. Some transformers are position-sensitive so you may need to take special note of whether it needs come before or after any other particular plugins.</p>
|
||
</blockquote>
|
||
<p>Additionally, plugins may also have their own configuration settings that you can pass in. For example, the <a href="./Latex" class="internal">Latex</a> plugin allows you to pass in a field specifying the <code>renderEngine</code> to choose between Katex and MathJax.</p>
|
||
<div data-rehype-pretty-code-fragment><pre style="background-color:var(--shiki-color-background);" tabindex="0" data-language="ts" data-theme="default"><code data-language="ts" data-theme="default"><span data-line><span style="color:var(--shiki-color-text);">transformers</span><span style="color:var(--shiki-token-punctuation);">:</span><span style="color:var(--shiki-color-text);"> [</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-constant);">Plugin</span><span style="color:var(--shiki-token-function);">.FrontMatter</span><span style="color:var(--shiki-color-text);">()</span><span style="color:var(--shiki-token-punctuation);">,</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-comment);">// uses default options</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-constant);">Plugin</span><span style="color:var(--shiki-token-function);">.Latex</span><span style="color:var(--shiki-color-text);">({ renderEngine</span><span style="color:var(--shiki-token-keyword);">:</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-string-expression);">"katex"</span><span style="color:var(--shiki-color-text);"> })</span><span style="color:var(--shiki-token-punctuation);">,</span><span style="color:var(--shiki-color-text);"> </span><span style="color:var(--shiki-token-comment);">// specify some options</span></span>
|
||
<span data-line><span style="color:var(--shiki-color-text);">]</span></span></code></pre></div>
|
||
<p>If you’d like to make your own plugins, read the guide on <a href="./making-plugins" class="internal">making plugins</a> for more information.</p></article></div><div class="right sidebar"><div class="graph"><h3>Graph View</h3><div class="graph-outer"><div id="graph-container" data-cfg="{"drag":true,"zoom":true,"depth":1,"scale":1.1,"repelForce":0.5,"centerForce":0.3,"linkDistance":30,"fontSize":0.6,"opacityScale":1}"></div><svg version="1.1" id="global-graph-icon" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55 55" fill="currentColor" xmlSpace="preserve"><path d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
|
||
s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
|
||
c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
|
||
C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
|
||
c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
|
||
v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
|
||
s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
|
||
C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
|
||
S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
|
||
s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
|
||
s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"></path></svg></div><div id="global-graph-outer"><div id="global-graph-container" data-cfg="{"drag":true,"zoom":true,"depth":-1,"scale":0.9,"repelForce":0.5,"centerForce":0.3,"linkDistance":30,"fontSize":0.6,"opacityScale":1}"></div></div></div><div class="backlinks"><h3>Backlinks</h3><ul class="overflow"><li><a href="./hosting" class="internal">Hosting</a></li><li><a href="./layout" class="internal">Layout</a></li><li><a href="./migrating-from-Quartz-3" class="internal">Migrating from Quartz 3</a></li></ul></div></div></div><footer><hr/><p>Created by Logos with <a href="https://quartz.jzhao.xyz/">Quartz v4.0.8</a>, © 2023</p><ul><li><a href="https://github.com/logos-co/roadmap">GitHub</a></li><li><a href="https://discord.com/invite/logos-state">Discord Community</a></li></ul></footer></div></body><script type="application/javascript">// quartz/components/scripts/quartz/components/scripts/callout.inline.ts
|
||
function toggleCallout() {
|
||
const outerBlock = this.parentElement;
|
||
outerBlock.classList.toggle(`is-collapsed`);
|
||
const collapsed = outerBlock.classList.contains(`is-collapsed`);
|
||
const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight;
|
||
outerBlock.style.maxHeight = height + `px`;
|
||
let current = outerBlock;
|
||
let parent = outerBlock.parentElement;
|
||
while (parent) {
|
||
if (!parent.classList.contains(`callout`)) {
|
||
return;
|
||
}
|
||
const collapsed2 = parent.classList.contains(`is-collapsed`);
|
||
const height2 = collapsed2 ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight;
|
||
parent.style.maxHeight = height2 + `px`;
|
||
current = parent;
|
||
parent = parent.parentElement;
|
||
}
|
||
}
|
||
function setupCallout() {
|
||
const collapsible = document.getElementsByClassName(
|
||
`callout is-collapsible`
|
||
);
|
||
for (const div of collapsible) {
|
||
const title = div.firstElementChild;
|
||
if (title) {
|
||
title.removeEventListener(`click`, toggleCallout);
|
||
title.addEventListener(`click`, toggleCallout);
|
||
const collapsed = div.classList.contains(`is-collapsed`);
|
||
const height = collapsed ? title.scrollHeight : div.scrollHeight;
|
||
div.style.maxHeight = height + `px`;
|
||
}
|
||
}
|
||
}
|
||
document.addEventListener(`nav`, setupCallout);
|
||
window.addEventListener(`resize`, setupCallout);
|
||
</script><script type="module">
|
||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
|
||
const darkMode = document.documentElement.getAttribute('saved-theme') === 'dark'
|
||
mermaid.initialize({
|
||
startOnLoad: false,
|
||
securityLevel: 'loose',
|
||
theme: darkMode ? 'dark' : 'default'
|
||
});
|
||
document.addEventListener('nav', async () => {
|
||
await mermaid.run({
|
||
querySelector: '.mermaid'
|
||
})
|
||
});
|
||
</script><script src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/copy-tex.min.js" type="application/javascript"></script><script src="./postscript.js" type="module"></script></html> |