s (use some hacked mdhast component to achieve this) of
+ // class `callout-content` and `callout-content-inner` respectively for
+ // grid-based collapsible animation.
+ if (calloutContent.length > 0) {
+ node.children = [
+ node.children[0],
+ {
+ data: { hProperties: { className: ["callout-content"] }, hName: "div" },
+ type: "blockquote",
+ children: [
+ {
+ data: {
+ hProperties: { className: ["callout-content-inner"] },
+ hName: "div",
+ },
+ type: "blockquote",
+ children: [...calloutContent],
+ },
+ ],
+ },
+ ]
+ }
+
// replace first line of blockquote with title and rest of the paragraph text
node.children.splice(0, 1, ...blockquoteContent)
@@ -485,21 +509,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin
>
"data-callout-metadata": calloutMetaData,
},
}
-
- // Add callout-content class to callout body if it has one.
- if (calloutContent.length > 0) {
- const contentData: BlockContent | DefinitionContent = {
- data: {
- hProperties: {
- className: "callout-content",
- },
- hName: "div",
- },
- type: "blockquote",
- children: [...calloutContent],
- }
- node.children = [node.children[0], contentData]
- }
}
})
}
diff --git a/quartz/styles/callouts.scss b/quartz/styles/callouts.scss
index d6f65aadc..02921aed1 100644
--- a/quartz/styles/callouts.scss
+++ b/quartz/styles/callouts.scss
@@ -7,11 +7,19 @@
border-radius: 5px;
padding: 0 1rem;
overflow-y: hidden;
- transition: max-height 0.3s ease;
box-sizing: border-box;
- & > .callout-content > :first-child {
- margin-top: 0;
+ & > .callout-content {
+ display: grid;
+ transition: grid-template-rows 0.3s ease;
+
+ & > .callout-content-inner {
+ overflow: hidden;
+
+ & > :first-child {
+ margin-top: 0;
+ }
+ }
}
--callout-icon-note: url('data:image/svg+xml; utf8, ');
diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts
index 4a064255f..ff4453b9f 100644
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -107,6 +107,13 @@ export interface GoogleFontFile {
extension: string
}
+const fontMimeMap: Record = {
+ truetype: "ttf",
+ woff: "woff",
+ woff2: "woff2",
+ opentype: "otf",
+}
+
export async function processGoogleFonts(
stylesheet: string,
baseUrl: string,
@@ -114,14 +121,16 @@ export async function processGoogleFonts(
processedStylesheet: string
fontFiles: GoogleFontFile[]
}> {
- const fontSourceRegex = /url\((https:\/\/fonts.gstatic.com\/s\/[^)]+\.(woff2|ttf))\)/g
+ const fontSourceRegex =
+ /url\((https:\/\/fonts.gstatic.com\/.+(?:\/|(?:kit=))(.+?)[.&].+?)\)\sformat\('(\w+?)'\);/g
const fontFiles: GoogleFontFile[] = []
let processedStylesheet = stylesheet
let match
while ((match = fontSourceRegex.exec(stylesheet)) !== null) {
const url = match[1]
- const [filename, extension] = url.split("/").pop()!.split(".")
+ const filename = match[2]
+ const extension = fontMimeMap[match[3].toLowerCase()]
const staticUrl = `https://${baseUrl}/static/fonts/${filename}.${extension}`
processedStylesheet = processedStylesheet.replace(url, staticUrl)