polish

content/showcase.md

@@ -17,3 +17,15 @@ Want to see what Quartz can do? Here are some cool community gardens :)
 - [Mike's AI Garden 🤖🪴](https://mwalton.me/)
 
 If you want to see your own on here, submit a [Pull Request adding yourself to this file](https://github.com/jackyzha0/quartz/blob/v4-alpha/content/showcase.md)!
+
+Left-aligned text | Center-aligned text | Right-aligned text
+:-- | :--: | --:
+Content | Content | Content
+
+```mermaid
+sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+```

quartz.config.ts

@@ -95,7 +95,7 @@ const config: QuartzConfig = {
       }),
       Plugin.ObsidianFlavoredMarkdown(),
       Plugin.GitHubFlavoredMarkdown(),
-      Plugin.CrawlLinks(),
+      Plugin.CrawlLinks({ markdownLinkResolution: 'absolute' }),
       Plugin.SyntaxHighlighting(),
       Plugin.Katex(),
       Plugin.Description(),

quartz/plugins/transformers/frontmatter.ts

@@ -30,7 +30,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
             })
 
             if (data.tags && !Array.isArray(data.tags)) {
-              data.tags = data.tags.toString().split(" ")
+              data.tags = data.tags.toString().split(",").map((tag: string) => tag.trim())
             }
 
             // fill in frontmatter

quartz/plugins/transformers/links.ts

@@ -6,7 +6,7 @@ import isAbsoluteUrl from "is-absolute-url"
 
 interface Options {
   /** How to resolve Markdown paths */
-  markdownLinkResolution: 'absolute' | 'relative'
+  markdownLinkResolution: 'absolute' | 'relative' | 'shortest'
   /** Strips folders from a link so that it looks nice */
   prettyLinks: boolean
   indexAnchorLinks: boolean
@@ -35,6 +35,7 @@ export const CrawlLinks: QuartzTransformerPlugin<Partial<Options> | undefined> =
             } else {
               return './' + relativeToRoot(curSlug, targetSlug)
             }
+            // todo: handle shortest path
           }
 
           const outgoing: Set<string> = new Set()

quartz/plugins/transformers/ofm.ts

@@ -22,7 +22,7 @@ const defaultOptions: Options = {
   highlight: true,
   wikilinks: true,
   callouts: true,
-  mermaid: false,
+  mermaid: true,
 }
 
 const icons = {

quartz/styles/base.scss

@@ -216,6 +216,10 @@ pre {
   overflow-x: auto;
   border: 1px solid var(--lightgray);
 
+  &:has(> code.mermaid) {
+    border: none;
+  }
+
   & > code {
     background: none;
     padding: 0;
@@ -261,15 +265,14 @@ tbody, li, p {
 }
 
 table {
-  border: 2px solid var(--gray);
-  width: 100%;
+  border: 1px solid var(--gray);
   padding: 1.5rem;
   border-collapse: collapse;
 }
 
 td, th {
   padding: 0.2rem 1rem;
-  border: 2px solid var(--gray);
+  border: 1px solid var(--gray);
 }
 
 img {