Colophon

─── 🖊⋅🖊⋅🖊 ───

How it’s made!

The upstream: Eilleen’s (online!) Everything Notebook

Remove certain things

• Graph view
• Backlinks tab
• Explorer
• Git history in frontmatter (ContentMeta)
• Breadcrumbs
• Frontmatter created, modified
• Darkmode

Changed

• The colors: brown
• The icon: wood texture
• The social preview: auto-generate og images
• Some styling and title stuff
• The fonts: Grenze Gotisch for titles, PT Serif for body, Ubuntu mono for code
  • Force body font for table headings (<th>) and the Table of Contents title <h3>

Code tester

Ubuntu mono
The little brown fox jumped over the big red dog, or something.

Deploy/Hosting

On the web: Vercel, based on the Quartz hosting instructions

npx quartz build -d blog_content

I use GoatCounter – open source web analytics for some basic tracking.

Additional credits and changes

Almost all of the changes and external additions are explained (& credited) in my Quartz customization log if they apply to both of my Quartz sites. The below will be anything specific to this current blog site.

Page navigation

From here: catcodeme.github.io · PageNavigation.tsx · GitHub, credits to catcodeme and 8cat.life.

I excluded files with a frontmatter property “non-post”, and made it loop around back to the Homepage (circular instead of a start and end).

Extra subtitles handling

Show subtitles in the page listing if they exist:

PageList.tsx

<ul class="section-ul">
      {list.map((page) => {
        const title = page.frontmatter?.title
        {/* blog-specific: show subtitle if it exists, otherwise show title as usual */}
        const subtitle = page.frontmatter?.subtitle
...
<div class="desc">
	<h3>
	  <a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
		{/* blog-specific: show subtitle if it exists, otherwise show title as usual */}
		{subtitle ? subtitle : title}
	  </a>
	</h3>
</div>

Show subtitles as the title in the search, by making a lot of changes to search.inline.ts, and adding subtitles to contentIndex.ts.

Numbering on mobile table of contents, because it’s centered

It’s hard to tell the table of contents hierarchy on mobile because I centered the top part of the page. This implementation is a little hacky and only goes up to heading 3.

TableOfContents.tsx

  const generateTocNumbering = (toc: any[]) => {
    let numbering = [0]; // Track numbering for levels
    let lastDepth = -1;
  
    return toc.map((entry) => {
      if (entry.depth > lastDepth) {
        // Going deeper, add new level
        numbering.push(0);
      } else if (entry.depth < lastDepth) {
        // Going up, remove lower levels
        numbering = numbering.slice(0, entry.depth + 1);
      }
      
      // Increment current level
      numbering[entry.depth]++;
  
      lastDepth = entry.depth;
  
      // Generate numbering string
      const numberStr = numbering
        .slice(0, entry.depth + 1)
        .map((num, index) => {
          if (index === 0) return num;
          if (index === 1) return String.fromCharCode(96 + num); // a, b, c
          return ['i', 'ii', 'iii', 'iv', 'v'][num - 1]; // i, ii, iii, iv, v
        })
        .join('.');
  
      return { ...entry, number: numberStr };
    });
  };  
  const numberedToc = generateTocNumbering(fileData.toc);

And also:

[{tocEntry.number && `${tocEntry.number}`}] {tocEntry.text}

─── 🖊⋅🖊⋅🖊 ───