My quartz configuration

Before reading please look at the beautifully named AHHHH README AHHHHHHH

This note details some steps I took in my personal quartz configuration. Mostly intended for my own memory but also in case anyone want to replicate it. Note to self: many of these changes are outdated, since I pulled from the main quartz branch and a lot of stuff got broken. At this point it's probably safest to stay on my branch :)

• Removal of the backlinks view by commenting out the usage of Component.Backlinks() from quartz.layout.ts.
• Moved the graph view to the left.
• Modification of the footer in Footer.tsx
• Added a header with LinksHeader.tsx and linksHeader.scss.
• Moved the light/dark mode switch button to the top right corner of the centre div.
• Had to set markdownLinkResolution: "relative" to prevent broken links.
• Typography used:

1typography: {  
2      header: "Fredericka the Great",  
3      body: "Source Sans Pro",  
4      code: "IBM Plex Mono",  
5}

• Colours used:

1colors: {  
2  lightMode: {  
3    light: "#faf8f8",  
4    lightgray: "#e5e5e5",  
5    gray: "#b8b8b8",  
6    darkgray: "#4e4e4e",  
7    dark: "#2b2b2b",  
8    secondary: "#284b63",  
9    tertiary: "#84a59d",  
10    highlight: "rgba(143, 159, 169, 0.15)",  
11  },  
12  darkMode: {  
13    light: "#161618",  
14    lightgray: "#393639",  
15    gray: "#646464",  
16    darkgray: "#d4d4d4",  
17    dark: "#ebebec",  
18    secondary: "#aa7ba9",  
19    tertiary: "#a58484",  
20    highlight: "rgba(255, 0, 179, 0.15)",  
21  }
22}

RTL Support

RTL used to be supported in quartz (v3.2) but is absent in the latest version (v4). A solution for page-specific right-to-left support was to add a cssclass to the frontmatter of specific notes. In the notes:

1---
2title: some page with right to left text.
3cssclass: rtl-class
4---

In the custom.scss file:

1.rtl-class,
2.rtl-class * {
3  direction: rtl;
4}
5
6.rtl-class {
7  .katex,
8  .katex *,
9  .math,
10  .math *,
11  pre,
12  pre *,
13  code,
14  code * {
15    direction: ltr;
16    unicode-bidi: isolate;
17  }
18}