diff --git a/package-lock.json b/package-lock.json
index 0b292c07..e53a3e58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
"@napi-rs/simple-git": "^0.1.8",
"chalk": "^4.1.2",
"cli-spinner": "^0.2.10",
+ "env-paths": "^3.0.0",
"esbuild-sass-plugin": "^2.9.0",
"github-slugger": "^2.0.0",
"globby": "^13.1.4",
@@ -1346,6 +1347,17 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
+ "node_modules/env-paths": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
+ "integrity": "sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==",
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/esbuild": {
"version": "0.17.19",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
diff --git a/package.json b/package.json
index 32175204..83ddd542 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"@napi-rs/simple-git": "^0.1.8",
"chalk": "^4.1.2",
"cli-spinner": "^0.2.10",
+ "env-paths": "^3.0.0",
"esbuild-sass-plugin": "^2.9.0",
"github-slugger": "^2.0.0",
"globby": "^13.1.4",
diff --git a/quartz/bootstrap.mjs b/quartz/bootstrap.mjs
index 4886e3da..16a0c695 100755
--- a/quartz/bootstrap.mjs
+++ b/quartz/bootstrap.mjs
@@ -1,6 +1,7 @@
#!/usr/bin/env node
-import { readFileSync } from 'fs'
+import { promises, readFileSync } from 'fs'
import yargs from 'yargs'
+import path from 'path'
import { hideBin } from 'yargs/helpers'
import esbuild from 'esbuild'
import chalk from 'chalk'
@@ -61,9 +62,34 @@ yargs(hideBin(process.argv))
jsx: "automatic",
jsxImportSource: "preact",
external: ["@napi-rs/simple-git", "shiki"],
- plugins: [sassPlugin({
- type: 'css-text'
- })]
+ plugins: [
+ sassPlugin({
+ type: 'css-text'
+ }),
+ {
+ name: 'inline-script-loader',
+ setup(build) {
+ build.onLoad({ filter: /\.inline\.(ts|js)$/ }, async (args) => {
+ let text = await promises.readFile(args.path, 'utf8')
+ const transpiled = await esbuild.build({
+ stdin: {
+ contents: text,
+ sourcefile: path.relative(path.resolve('.'), args.path),
+ },
+ write: false,
+ bundle: true,
+ platform: "browser",
+ format: "esm",
+ })
+ const rawMod = transpiled.outputFiles[0].text
+ return {
+ contents: rawMod,
+ loader: 'text',
+ }
+ })
+ }
+ }
+ ]
}).catch(err => {
console.error(`${chalk.red("Couldn't parse Quartz configuration:")} ${fp}`)
console.log(`Reason: ${chalk.grey(err)}`)
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 868294dd..29050a79 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -8,10 +8,9 @@ export interface HeadProps {
externalResources: StaticResources
}
-export default function({ title, description, slug, externalResources }: HeadProps) {
+export function Component({ title, description, slug, externalResources }: HeadProps) {
const { css, js } = externalResources
const baseDir = resolveToRoot(slug)
- const stylePath = baseDir + "/index.css"
const iconPath = baseDir + "/static/icon.png"
const ogImagePath = baseDir + "/static/og-image.png"
return
@@ -28,16 +27,7 @@ export default function({ title, description, slug, externalResources }: HeadPro
-
{css.map(href => )}
- {js.filter(resource => resource.loadTime === "beforeDOMReady").map(resource => )}
+ {js.filter(resource => resource.loadTime === "beforeDOMReady").map(resource => )}
}
-
-export function beforeDOMLoaded() {
-
-}
-
-export function onDOMLoaded() {
-
-}
diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
index 7da4a8e7..229e210e 100644
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@@ -5,10 +5,10 @@ export interface HeaderProps {
slug: string
}
-export default function({ title, slug }: HeaderProps) {
+export function Component({ title, slug }: HeaderProps) {
const baseDir = resolveToRoot(slug)
return
-
}
+
diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts
new file mode 100644
index 00000000..c17013aa
--- /dev/null
+++ b/quartz/components/scripts/darkmode.inline.ts
@@ -0,0 +1,3 @@
+export default "Darkmode"
+
+console.log("HELLOOOO FROM CONSOLE")
diff --git a/quartz/components/types.ts b/quartz/components/types.ts
new file mode 100644
index 00000000..e1bdebc3
--- /dev/null
+++ b/quartz/components/types.ts
@@ -0,0 +1,8 @@
+import { ComponentType } from "preact"
+
+export type QuartzComponent = {
+ Component: ComponentType
+ css?: string,
+ beforeDOMLoaded?: string,
+ afterDOMLoaded?: string,
+}
diff --git a/quartz/index.ts b/quartz/index.ts
index a65597a4..c64f0127 100644
--- a/quartz/index.ts
+++ b/quartz/index.ts
@@ -60,7 +60,7 @@ export function buildQuartz(cfg: QuartzConfig) {
const parsedFiles = await parseMarkdown(processor, argv.directory, filePaths, argv.verbose)
const filteredContent = filterContent(cfg.plugins.filters, parsedFiles, argv.verbose)
await emitContent(argv.directory, output, cfg, filteredContent, argv.verbose)
- console.log(chalk.green(`Done in ${perf.timeSince()}`))
+ console.log(chalk.green(`Done processing ${fps.length} files in ${perf.timeSince()}`))
if (argv.serve) {
const server = http.createServer(async (req, res) => {
diff --git a/quartz/path.ts b/quartz/path.ts
index 4f3bfa7f..aa3870b9 100644
--- a/quartz/path.ts
+++ b/quartz/path.ts
@@ -22,11 +22,15 @@ export function slugify(s: string): string {
// resolve /a/b/c to ../../
export function resolveToRoot(slug: string): string {
let fp = slug
- if (fp.endsWith("/index")) {
- fp = fp.slice(0, -"/index".length)
+ if (fp.endsWith("index")) {
+ fp = fp.slice(0, -"index".length)
}
- return fp
+ if (fp === "") {
+ return "."
+ }
+
+ return "./" + fp
.split('/')
.filter(x => x !== '')
.map(_ => '..')
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index fa17a7e5..05c4c4b4 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -4,17 +4,15 @@ import { EmitCallback, QuartzEmitterPlugin } from "../types"
import { ProcessedContent } from "../vfile"
import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { render } from "preact-render-to-string"
-import { ComponentType } from "preact"
import { HeadProps } from "../../components/Head"
-import { googleFontHref, templateThemeStyles } from "../../theme"
import { GlobalConfiguration } from "../../cfg"
import { HeaderProps } from "../../components/Header"
-
-import styles from '../../styles/base.scss'
+import { QuartzComponent } from "../../components/types"
+import { resolveToRoot } from "../../path"
interface Options {
- Head: ComponentType
- Header: ComponentType
+ Head: QuartzComponent
+ Header: QuartzComponent
}
export class ContentPage extends QuartzEmitterPlugin {
@@ -26,40 +24,45 @@ export class ContentPage extends QuartzEmitterPlugin {
this.opts = opts
}
+ getQuartzComponents(): QuartzComponent[] {
+ return [...Object.values(this.opts)]
+ }
+
async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise {
const fps: string[] = []
- // emit styles
- emit({
- slug: "index",
- ext: ".css",
- content: templateThemeStyles(cfg.theme, styles)
- })
- fps.push("index.css")
- resources.css.push(googleFontHref(cfg.theme))
-
+ const { Head, Header } = this.opts
for (const [tree, file] of content) {
// @ts-ignore (preact makes it angry)
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
+ const baseDir = resolveToRoot(file.data.slug!)
+ const pageResources: StaticResources = {
+ css: [baseDir + "/index.css", ...resources.css,],
+ js: [
+ { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", type: 'module' },
+ ...resources.js,
+ { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", type: 'module' }
+ ]
+ }
+
const title = file.data.frontmatter?.title
- const { Head, Header } = this.opts
const doc =
-
+ externalResources={pageResources} />
-
+
{file.data.slug !== "index" && {title}
}
{content}