NotesOnAll — Workflow & Formatting Cheatsheet

Quartz 5 · Obsidian → Codeberg → GitHub → Cloudflare Pages. Quick reference, no styling guide.

1. From local notes to live website

Pipeline (all automatic after the sync):

Obsidian vault → npx quartz sync → Codeberg (v5) → push-mirror → GitHub → Cloudflare Pages (live)

The everyday publish flow:

# 1. Write/edit notes in Obsidian (the vault; content/ is a symlink to it)
 
# 2. (optional but recommended) preview locally before publishing
npx quartz build --serve        # → http://localhost:8080 , hot-reloads config
 
# 3. make sure you're on the production branch
git switch v5
 
# 4. publish — commits, pushes, AND pulls in one step
npx quartz sync

After step 4, Codeberg mirrors to GitHub and Cloudflare auto-builds. Nothing else to do. Check the live site in ~1–2 min.

Never publish content with plain git push

content/ is a symlink to the Obsidian vault. Plain git add/push commits the symlink, not the notes → Cloudflare builds 0 pages → whole-site 404. Only npx quartz sync dereferences the symlink. (Diagnose in the build log: Found N input files from content; 0 = symlink wasn’t resolved.)

Useful sync flags:

Flag	Effect
`-m "message"`	custom commit message
`--no-pull`	don’t pull before pushing
`--no-push`	commit only, don’t push
`--no-commit`	push existing commits without making a new one

Cloudflare Pages settings (set once, already configured):

Setting	Value
Production branch	`v5`
Framework preset	`None`
Build command	`npx quartz plugin install && npx quartz build`
Build output dir	`public`

baseUrl must be the bare domain (no https://, no trailing slash) — needed for RSS/sitemap/OG images.
Rollback: Cloudflare Pages dashboard keeps every past deploy → one click to revert a bad build.

2. Git repository management

# --- inspect ---
git status                         # what's changed
git remote -v                      # confirm origin = Codeberg
git log --oneline -10              # recent history
 
# --- branches (production = v5) ---
git switch v5                      # go to production branch
git switch -c experiment           # new experiment branch (safe sandbox)
git branch                         # list branches
 
# --- safe experimenting ---
#   edit on a non-v5 branch → pushing it makes a Cloudflare PREVIEW build
#   on a separate *.pages.dev URL; production (v5) stays untouched.
git push -u origin experiment      # creates preview deploy
 
# --- manual commit (when NOT using quartz sync, e.g. config-only edits) ---
git add -A
git commit -m "message"
git push
 
# --- undo / revert ---
git restore quartz.config.yaml quartz/styles/custom.scss   # discard uncommitted edits
git switch v5 && git branch -D experiment                  # nuke a whole experiment
git checkout upstream/v5 -- quartz.config.yaml             # restore pristine stock file from upstream

Rule of thumb

Content changes → npx quartz sync (handles the symlink). Config / SCSS / plugin changes → plain git is fine (those are real files, not symlinks). When in doubt, sync is always safe.

Plugin management (Quartz 5):

npx quartz plugin add github:quartz-community/<name>   # add a plugin
npx quartz plugin install --from-config                # install everything in config (fresh clone/CI)
npx quartz plugin install                              # install from lockfile
npx quartz plugin install --latest                     # refresh to latest if a clone won't build
npx quartz plugin prune                                # remove orphaned plugins

Commit quartz.lock.json — it makes builds reproducible.

3. Note formatting — full markdown reference

Quartz renders CommonMark + GitHub-Flavored Markdown (GFM) + Obsidian-Flavored Markdown (OFM).

3.1 Basic (CommonMark)

# H1   ## H2   ### H3 … up to ###### H6
 
**bold**   *italic*   ***bold italic***   ~~strikethrough~~
 
> Blockquote
>> Nested blockquote
 
- bullet      * also works     + also works
  - indent 2 spaces to nest
1. ordered
2. ordered
 
[link text](https://example.com)   "[link](url \"hover title\")"
![alt text](image.png)
 
`inline code`
 
```python
# fenced code block with language → syntax highlighting
print("hi")
```
 
---            ← horizontal rule
\*escaped\*    ← backslash escapes markdown chars

3.2 GitHub-Flavored (GFM)

Tables:
| Left | Center | Right |
|:-----|:------:|------:|
| a    |   b    |     c |
 
Task list:
- [ ] todo
- [x] done
 
Footnote:[^1]
[^1]: the footnote text (appears at end of page)
 
Autolinks: https://example.com  (bare URLs become clickable)

3.3 Obsidian-Flavored (OFM) — the wiki features

Wikilinks & embeds:

[[Page]]                    link to a page
[[Page|Custom text]]        link with alias
[[Page#Heading]]            link to a heading
[[Page#Heading|Custom]]     heading link with alias
[[Page#^block-id]]          link to a specific block
![[Page]]                   EMBED (transclude) another note
![[image.png]]              embed an image
![[image.png|alt 100x200]]  embed with alt text + dimensions
![[video.mp4]]              embed a video
 
In a table, escape the pipe:  | [[page\|alias]] |

Block references (target a specific paragraph):

Some paragraph you want to link to. ^my-block
 
…elsewhere…  [[Page#^my-block]]

Highlights, comments, tags:

==highlighted text==                          (background highlight)
visible %% this is a hidden comment %% visible (stripped from output)
%%
multi-line comment, also stripped
%%
#tag   #nested/tag   #tag-with-dashes          (links to a tag page)

Tag quirks

Tags are lowercased and slugified, so #MyTag and #mytag resolve to the same page. Pure-numeric tags like #123 are ignored (matching Obsidian).

Colored highlights & inline HTML. ==text== gives the one theme highlight color. For any other color (or other inline styling), drop to raw HTML — markdown passes it straight through, so it renders in both Obsidian and Quartz:

<mark style="background: #FFD60A">yellow highlight</mark>
<mark style="background: #A8E6CF">green highlight</mark>
<mark style="background: #FFB3BA66">soft red (8-digit hex = alpha/transparency)</mark>
 
<span style="color: #E63946">colored text</span>
<u>underline</u>   <sub>subscript</sub>   <sup>superscript</sup>   <kbd>Ctrl</kbd>

Notes & gotchas:

Use full 6- or 8-digit hex (e.g. #FFD60A); 3-digit and malformed values like #FFFFF render unreliably across browsers/themes.
8-digit hex adds alpha (last two digits) → translucent highlights that sit better over dark mode.
Raw HTML is not re-themed for dark mode automatically — a hardcoded light background can look harsh on the dark theme. If that bothers you, define a CSS class in custom.scss (with an html[saved-theme="dark"] variant) and use  instead of inline style.
By default Obsidian/Quartz won’t parse ==highlights==, [[wikilinks]], or #tags inside a raw HTML block. The OFM enableInHtmlEmbed: true option turns that parsing on.

Callouts (collapsible with -/+):

> [!note]
> 
> A standard note callout.
 
> [!warning]- Collapsed by default
> 
> Hidden until clicked.
 
> [!tip]+ Expanded by default
> 
> Visible, but collapsible.
 
> [!info] Custom title here
> 
> You can rename the header.

All built-in types: note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote (plus their aliases, e.g. summary/tldr, hint/important, check/done, help/faq, caution/attention, fail/missing, error, cite).

Math (LaTeX via KaTeX):

Inline: $E = mc^2$
Block:
$$
\int_0^\infty e^{-x}\,dx = 1
$$

Mermaid diagrams:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Cancel]
```

Media embeds (just use image syntax with a URL):

![](https://youtu.be/VIDEO_ID)          YouTube → embedded player
![](https://x.com/user/status/12345)    Tweet → static blockquote + link

Custom task characters (needs enableCheckbox: true on the OFM plugin; each renders a data-task attribute for CSS styling):

- [ ] unchecked   - [x] checked   - [?] question   - [!] important
- [>] forwarded   - [/] in progress   - [-] cancelled   - [s] special

Custom site syntax. This site also has custom-plugin syntax you can use in notes — e.g. animated … / … text from the fancy-text plugin. See §5.5.

4. Metadata header (frontmatter) — publication & properties

Goes at the very top of a note, between --- fences, in YAML:

---
title: Example Title
description: One-line summary used in link previews & search
tags:
  - example-tag
  - nested/tag
aliases:
  - alternative name
draft: false
date: 2026-06-17
---

4.1 All supported fields

Field	Key(s)	Purpose
Title	`title`	Page title. Falls back to filename if omitted.
Description	`description`	Used for link previews & search index.
Tags	`tags`, `tag`	Categorization; lowercased + slugified.
Aliases	`aliases`, `alias`	Other names → used for link resolution. List of strings.
Permalink	`permalink`	Fixed custom URL that survives file moves/renames.
CSS classes	`cssclasses`, `cssclass`	CSS classes applied to the page body.
Social image	`socialImage`, `image`, `cover`	Image for social/OG previews.
Social description	`socialDescription`	Description specifically for social previews.
Created date	`created`, `date`	When the note was created.
Modified date	`modified`, `lastmod`, `updated`, `last-modified`	Last modified; falls back to created.
Published date	`published`, `publishDate`, `date`	When the note was published.
Publish	`publish`	Publish this note (used by ExplicitPublish — see below).
Draft	`draft`	`true` = hidden from the built site (default filter).
Comments	`comments`	Enable/disable comments for the note.
Language	`lang`	Language code for the note.
Enable TOC	`enableToc`	Show/hide the table of contents on this page.
Unlisted	`unlisted`	Published but hidden from all discovery surfaces (needs UnlistedPages and/or EncryptedPages).
Password	`password`	Encrypt the page; viewer must enter it (needs EncryptedPages).
Stealth	`stealth`	Encrypted page stays hidden even after decryption — URL-only (needs EncryptedPages).
Properties panel	`quartz-properties` / `quartz-properties-collapse`	Force-show/hide the properties panel, or set its collapsed state, per note.

Dates normally use YYYY-MM-DD. Where multiple keys are listed, the first matching one wins.

4.2 Controlling what gets published

Two mechanisms — pick ONE filter approach for the whole site (they’re mutually exclusive in intent):

A. Default — hide drafts (RemoveDrafts): everything publishes except notes marked draft: true.

---
draft: true     # this note will NOT appear on the live site
---

B. Opt-in — only publish flagged notes (ExplicitPublish): nothing publishes unless explicitly marked. Best if you’ll mix private + public notes in one vault.

---
publish: true   # only notes with this line build; everything else is excluded
---

C. ignorePatterns — exclude files/folders entirely at the config level (quartz.config.yaml, fast-glob syntax):

ignorePatterns:
  - private          # exclude the "private" folder
  - "**/secret"      # any folder named "secret" at any depth
  - "*.excalidraw.md"

D. Unlisted — published but hidden (UnlistedPages plugin): page is built and reachable by direct URL, but absent from search, graph, explorer, backlinks, RSS, sitemap, folder/tag listings.

---
unlisted: true
---

E. Encrypted — password-protected (EncryptedPages plugin): content is AES-256 encrypted at build, decrypted client-side on correct password.

---
password: mysecretpassword     # required to view
unlisted: true                 # optional: also hide it from discovery until decrypted
stealth: true                  # stronger: stays hidden even AFTER decryption (URL-only)
---

Caveats: passwords live in plaintext frontmatter — don’t commit them to a public repo. It’s client-side encryption (stops casual browsing, not determined attackers). stealth: true implies unlisted: true.

Two things to know about "private"

Non-markdown files (images, PDFs, audio) are emitted publicly regardless of any filter — they’re not hidden by draft/publish/ignorePatterns in the same way. For truly private material, use page encryption or a separate Cloudflare Access-protected deploy, not just these filters.

Hiding a page from the built site doesn’t remove it from the git repo. If the repo is public, also add it to .gitignore.

5. Quartz 5 plugins — what each one does

Quartz 5’s functionality is plugins (first-party, in the quartz-community org). Each is enabled/disabled/configured in quartz.config.yaml under plugins:, with options:. Never edit installed plugin files — they’re overwritten on plugin install; configure via options: instead.

What's actually enabled on your site

I don’t have your quartz.config.yaml, so the list below is the full first-party set, not a readout of your exact config. The authoritative “what’s on” list is your plugins: block. If you have custom/locally-built plugins (source: ./plugins/<name>), they won’t be here — paste that block or your plugins/ folder and I’ll document them too.

5.1 Markdown / content transformers (how your notes get parsed)

Plugin	What it does	Key options
ObsidianFlavoredMarkdown	Wikilinks, embeds, callouts, `==highlights==`, tags, comments, block refs, Mermaid, media embeds. The core of section 3.3.	`enableCheckbox` (custom task chars), `enableInHtmlEmbed` (parse md inside raw HTML), `mermaid: false` (disable diagrams)
GitHubFlavoredMarkdown	Tables, task lists, strikethrough, footnotes, autolinks.	—
SyntaxHighlighting	Colors code blocks.	theme, line numbers
Latex	Math via KaTeX (default) or Typst — $inline$ / `$$block$$`.	`renderEngine` (katex/typst)
Frontmatter / NoteProperties	Parses YAML frontmatter; optionally shows a collapsible “Properties” panel above the note. Required — do not remove.	`includeAll`, `includedProperties`, `hidePropertiesView`
Description	Builds the page description for previews/metadata.	—
CreatedModifiedDate	Resolves created/modified dates from frontmatter → git → filesystem.	source priority
CrawlLinks	Resolves internal links & slugs. Don’t remove (backlinks/graph depend on it).	link resolution behavior
Citations	BibTeX academic citations + bibliography. (opt-in)	`.bib` path
HardLineBreaks	Treats every single newline as a `<br>`. (opt-in, taste-dependent)	—
OxHugoFlavoredMarkdown / RoamFlavoredMarkdown	Import compatibility for ox-hugo / Roam exports. (opt-in, only if importing)	—
UnlistedPages	Makes `unlisted: true` hide any (non-encrypted) page from discovery while still publishing it. (opt-in)	—
EncryptedPages	Per-page password encryption (`password:` / `unlisted:` / `stealth:`). (opt-in)	`passwordField`, `unlistWhenEncrypted`, `iterations`

5.2 Wiki UI components (the chrome around the note)

Plugin	What it does	Key options
Search	Full-text search modal, tag filtering, keyboard nav. (your wiki essential)	—
Explorer	Collapsible file-tree sidebar.	`title` (rename header), folder sort/order
Graph	Interactive link graph (local + global).	`localGraph` / `globalGraph` sub-objects, e.g. `showTags: false`, depth, scale
Backlinks	”What links here” list. (depends on CrawlLinks)	—
TableOfContents	Builds the on-page TOC from headings.	`minEntries`, `maxDepth`, `showByDefault`, `collapseByDefault`, `layout` — no `title` option (rename needs an override)
Breadcrumbs	Path trail at top of page.	separator, show current
TagList	Renders a note’s tags as clickable links.	—
Darkmode	Light/dark toggle (sets `saved-theme="dark"` on `<html>`).	—
ReaderMode	Distraction-free reading toggle.	—
Comments	Comment system integration (Giscus, Utterances, …). Respects the `comments:` frontmatter key. (needs setup + a public repo for Giscus)	provider, repo, category, theme mapping
ContentMeta	Shows created date + reading time under the title.	format
ArticleTitle	Renders the note title as the page `<h1>`.	—
PageTitle	Site title in the header, links home.	—
RecentNotes	List of recently modified notes.	limit, sort
Footer	Configurable footer links.	links
Spacer	Flexible spacer for arranging layout groups.	—
StackedPages	Andy-Matuschak-style sliding panes; stack encoded in URL hash; auto-disabled on mobile <800px. (opt-in)	—

5.3 Page-type generators (what kinds of pages get built)

ContentPage (one HTML page per note), FolderPage (folder listing pages), TagPage (per-tag listing pages), CanvasPage (renders JSON Canvas files as pannable pages), BasesPage (renders Obsidian Bases as database-style views). Plus the internal NotFoundPage (your 404).

5.4 Emitters & filters (build outputs + publish gating)

ContentIndex — generates the sitemap, RSS feed, and the search/graph content index.
Custom OG Images — auto-generates social preview images per page.
AliasRedirects — turns frontmatter aliases into redirect pages.
Favicon / CNAME — emit the favicon / custom-domain file.
RemoveDrafts (filter) — drops draft: true notes. (default publish gate)
ExplicitPublish (filter) — drops everything except publish: true. (swap in for opt-in publishing)
Internal emitters: Assets, Static, ComponentResources (copy assets, static files, and component CSS/JS into public/).

Reading the config

Each plugins: entry carries a layout: block (position ∈ head/header/beforeBody/pageBody/afterBody/left/right/footer, plus priority, group, condition, display). Lower order = earlier in the build pipeline — relevant when one transformer must run before another (e.g. CrawlLinks must run before EncryptedPages).

5.5 Custom plugins (built for this site)

Local plugins (source: ./plugins/<name>) unique to NotesOnAll. Numbered as you add them; their syntax is usable in any note.

2. Fancy text (fancy-text) — animated inline text. Wrap text in {{effect:text}}:

<span class="ft-letters ft-wave">surfing the waves</span>      → wave motion
<span class="ft-letters ft-rainbow">over the rainbow</span>    → cycling rainbow colors
<span class="ft-letters ft-shake">shaky text</span>            → shaking
<span class="ft-letters ft-spin">spinning around</span>        → spinning

6. Quick local-preview & build commands

npx quartz build --serve     # local dev server, hot-reload → localhost:8080
npx quartz build             # one-off static build into public/
npx quartz sync              # commit + push + pull (the publish command)

One-line mental model

Write in Obsidian → npx quartz build --serve to preview → git switch v5 → npx quartz sync → it’s live. Use draft:/publish: in the header to control what ships. Never git push content directly.

NotesOnAll

Stocazzo

NotesOnAll-Cheatsheet

NotesOnAll — Workflow & Formatting Cheatsheet

1. From local notes to live website

2. Git repository management

3. Note formatting — full markdown reference

3.1 Basic (CommonMark)

3.2 GitHub-Flavored (GFM)

3.3 Obsidian-Flavored (OFM) — the wiki features

4. Metadata header (frontmatter) — publication & properties

4.1 All supported fields

4.2 Controlling what gets published

5. Quartz 5 plugins — what each one does

5.1 Markdown / content transformers (how your notes get parsed)

5.2 Wiki UI components (the chrome around the note)

5.3 Page-type generators (what kinds of pages get built)

5.4 Emitters & filters (build outputs + publish gating)

5.5 Custom plugins (built for this site)

6. Quick local-preview & build commands

One-line mental model

Graph View

Table of Contents