fix indexing causing main thread freeze, various polish

This commit is contained in:
Jacky Zhao 2023-07-04 10:08:32 -07:00
parent 83c5fa64ea
commit 79aff12b3f
33 changed files with 255 additions and 141 deletions

9
package-lock.json generated
View File

@ -25,6 +25,7 @@
"mdast-util-find-and-replace": "^2.2.2", "mdast-util-find-and-replace": "^2.2.2",
"mdast-util-to-string": "^3.2.0", "mdast-util-to-string": "^3.2.0",
"micromorph": "^0.4.5", "micromorph": "^0.4.5",
"plausible-tracker": "^0.3.8",
"preact": "^10.14.1", "preact": "^10.14.1",
"preact-render-to-string": "^6.0.3", "preact-render-to-string": "^6.0.3",
"pretty-time": "^1.1.0", "pretty-time": "^1.1.0",
@ -3619,6 +3620,14 @@
"url": "https://github.com/sponsors/jonschlinkert" "url": "https://github.com/sponsors/jonschlinkert"
} }
}, },
"node_modules/plausible-tracker": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/plausible-tracker/-/plausible-tracker-0.3.8.tgz",
"integrity": "sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==",
"engines": {
"node": ">=10"
}
},
"node_modules/preact": { "node_modules/preact": {
"version": "10.15.1", "version": "10.15.1",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.15.1.tgz", "resolved": "https://registry.npmjs.org/preact/-/preact-10.15.1.tgz",

View File

@ -41,6 +41,7 @@
"mdast-util-find-and-replace": "^2.2.2", "mdast-util-find-and-replace": "^2.2.2",
"mdast-util-to-string": "^3.2.0", "mdast-util-to-string": "^3.2.0",
"micromorph": "^0.4.5", "micromorph": "^0.4.5",
"plausible-tracker": "^0.3.8",
"preact": "^10.14.1", "preact": "^10.14.1",
"preact-render-to-string": "^6.0.3", "preact-render-to-string": "^6.0.3",
"pretty-time": "^1.1.0", "pretty-time": "^1.1.0",

View File

@ -23,8 +23,8 @@ const contentPageLayout: PageLayout = {
left: [ left: [
Component.PageTitle(), Component.PageTitle(),
Component.Search(), Component.Search(),
Component.TableOfContents(), Component.Darkmode(),
Component.Darkmode() Component.DesktopOnly(Component.TableOfContents()),
], ],
right: [ right: [
Component.Graph(), Component.Graph(),

View File

@ -0,0 +1,20 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
export default ((component?: QuartzComponent) => {
if (component) {
const Component = component
function DesktopOnly(props: QuartzComponentProps) {
return <div class="desktop-only">
<Component {...props} />
</div>
}
DesktopOnly.displayName = component.displayName
DesktopOnly.afterDOMLoaded = component?.afterDOMLoaded
DesktopOnly.beforeDOMLoaded = component?.beforeDOMLoaded
DesktopOnly.css = component?.css
return DesktopOnly
} else {
return () => <></>
}
}) satisfies QuartzComponentConstructor

View File

@ -25,23 +25,23 @@ const defaultOptions: GraphOptions = {
drag: true, drag: true,
zoom: true, zoom: true,
depth: 1, depth: 1,
scale: 1.2, scale: 1.1,
repelForce: 2, repelForce: 0.5,
centerForce: 1, centerForce: 0.3,
linkDistance: 30, linkDistance: 30,
fontSize: 0.6, fontSize: 0.6,
opacityScale: 3 opacityScale: 1
}, },
globalGraph: { globalGraph: {
drag: true, drag: true,
zoom: true, zoom: true,
depth: -1, depth: -1,
scale: 1.2, scale: 0.9,
repelForce: 1, repelForce: 0.5,
centerForce: 1, centerForce: 0.3,
linkDistance: 30, linkDistance: 30,
fontSize: 0.5, fontSize: 0.6,
opacityScale: 3 opacityScale: 1
} }
} }

View File

@ -1,10 +1,10 @@
import { resolveToRoot } from "../path" import { clientSideSlug, resolveToRoot } from "../path"
import { JSResourceToScriptElement } from "../resources" import { JSResourceToScriptElement } from "../resources"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
export default (() => { export default (() => {
function Head({ fileData, externalResources }: QuartzComponentProps) { function Head({ fileData, externalResources }: QuartzComponentProps) {
const slug = fileData.slug! const slug = clientSideSlug(fileData.slug!)
const title = fileData.frontmatter?.title ?? "Untitled" const title = fileData.frontmatter?.title ?? "Untitled"
const description = fileData.description ?? "No description provided" const description = fileData.description ?? "No description provided"
const { css, js } = externalResources const { css, js } = externalResources

View File

@ -0,0 +1,20 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
export default ((component?: QuartzComponent) => {
if (component) {
const Component = component
function MobileOnly(props: QuartzComponentProps) {
return <div class="mobile-only">
<Component {...props} />
</div>
}
MobileOnly.displayName = component.displayName
MobileOnly.afterDOMLoaded = component?.afterDOMLoaded
MobileOnly.beforeDOMLoaded = component?.beforeDOMLoaded
MobileOnly.css = component?.css
return MobileOnly
} else {
return () => <></>
}
}) satisfies QuartzComponentConstructor

View File

@ -23,7 +23,7 @@ function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): numb
export function PageList({ fileData, allFiles }: QuartzComponentProps) { export function PageList({ fileData, allFiles }: QuartzComponentProps) {
const slug = fileData.slug! const slug = fileData.slug!
return <ul class="section-ul popover-hint"> return <ul class="section-ul">
{allFiles.sort(byDateAndAlphabetical).map(page => { {allFiles.sort(byDateAndAlphabetical).map(page => {
const title = page.frontmatter?.title const title = page.frontmatter?.title
const pageSlug = page.slug! const pageSlug = page.slug!

View File

@ -3,8 +3,7 @@ import readingTime from "reading-time"
function ReadingTime({ fileData }: QuartzComponentProps) { function ReadingTime({ fileData }: QuartzComponentProps) {
const text = fileData.text const text = fileData.text
const isHomePage = fileData.slug === "index" if (text) {
if (text && !isHomePage) {
const { text: timeTaken, words } = readingTime(text) const { text: timeTaken, words } = readingTime(text)
return <p class="reading-time">{words} words, {timeTaken}</p> return <p class="reading-time">{words} words, {timeTaken}</p>
} else { } else {

View File

@ -18,7 +18,7 @@ function TableOfContents({ fileData }: QuartzComponentProps) {
return null return null
} }
return <div> return <div class="desktop-only">
<button type="button" id="toc"> <button type="button" id="toc">
<h3>Table of Contents</h3> <h3>Table of Contents</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="fold">

View File

@ -29,6 +29,7 @@ TagList.css = `
.tags > li { .tags > li {
display: inline-block; display: inline-block;
white-space: nowrap;
margin: 0; margin: 0;
overflow-wrap: normal; overflow-wrap: normal;
} }

View File

@ -13,6 +13,8 @@ import Graph from "./Graph"
import Backlinks from "./Backlinks" import Backlinks from "./Backlinks"
import Search from "./Search" import Search from "./Search"
import Footer from "./Footer" import Footer from "./Footer"
import DesktopOnly from "./DesktopOnly"
import MobileOnly from "./MobileOnly"
export { export {
ArticleTitle, ArticleTitle,
@ -29,5 +31,7 @@ export {
Graph, Graph,
Backlinks, Backlinks,
Search, Search,
Footer Footer,
DesktopOnly,
MobileOnly
} }

View File

@ -6,7 +6,7 @@ import path from "path"
import style from '../styles/listPage.scss' import style from '../styles/listPage.scss'
import { PageList } from "../PageList" import { PageList } from "../PageList"
function TagContent(props: QuartzComponentProps) { function FolderContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props const { tree, fileData, allFiles } = props
const folderSlug = fileData.slug! const folderSlug = fileData.slug!
const allPagesInFolder = allFiles.filter(file => { const allPagesInFolder = allFiles.filter(file => {
@ -25,13 +25,15 @@ function TagContent(props: QuartzComponentProps) {
// @ts-ignore // @ts-ignore
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' }) const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div> return <div class="popover-hint">
<article>{content}</article> <article>{content}</article>
<hr/>
<p>{allPagesInFolder.length} items under this folder.</p>
<div> <div>
<PageList {...listProps} /> <PageList {...listProps} />
</div> </div>
</div> </div>
} }
TagContent.css = style + PageList.css FolderContent.css = style + PageList.css
export default (() => TagContent) satisfies QuartzComponentConstructor export default (() => FolderContent) satisfies QuartzComponentConstructor

View File

@ -3,13 +3,14 @@ import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { toJsxRuntime } from "hast-util-to-jsx-runtime" import { toJsxRuntime } from "hast-util-to-jsx-runtime"
import style from '../styles/listPage.scss' import style from '../styles/listPage.scss'
import { PageList } from "../PageList" import { PageList } from "../PageList"
import { clientSideSlug } from "../../path"
function TagContent(props: QuartzComponentProps) { function TagContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props const { tree, fileData, allFiles } = props
const slug = fileData.slug const slug = fileData.slug
if (slug?.startsWith("tags/")) {
const tag = slug.slice("tags/".length)
if (slug?.startsWith("tags/")) {
const tag = clientSideSlug(slug.slice("tags/".length))
const allPagesWithTag = allFiles.filter(file => (file.frontmatter?.tags ?? []).includes(tag)) const allPagesWithTag = allFiles.filter(file => (file.frontmatter?.tags ?? []).includes(tag))
const listProps = { const listProps = {
...props, ...props,
@ -18,8 +19,10 @@ function TagContent(props: QuartzComponentProps) {
// @ts-ignore // @ts-ignore
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' }) const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div> return <div class="popover-hint">
<article>{content}</article> <article>{content}</article>
<hr/>
<p>{allPagesWithTag.length} items with this tag.</p>
<div> <div>
<PageList {...listProps} /> <PageList {...listProps} />
</div> </div>

View File

@ -25,7 +25,7 @@ export function pageResources(slug: string, staticResources: StaticResources): S
css: [baseDir + "/index.css", ...staticResources.css], css: [baseDir + "/index.css", ...staticResources.css],
js: [ js: [
{ src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" }, { src: baseDir + "/prescript.js", loadTime: "beforeDOMReady", contentType: "external" },
{ loadTime: "afterDOMReady", contentType: "inline", spaPreserve: true, script: contentIndexScript }, { loadTime: "beforeDOMReady", contentType: "inline", spaPreserve: true, script: contentIndexScript },
...staticResources.js, ...staticResources.js,
{ src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: 'module', contentType: "external" } { src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: 'module', contentType: "external" }
] ]

View File

@ -110,12 +110,12 @@ async function renderGraph(container: string, slug: string) {
.join("line") .join("line")
.attr("class", "link") .attr("class", "link")
.attr("stroke", "var(--lightgray)") .attr("stroke", "var(--lightgray)")
.attr("stroke-width", 2) .attr("stroke-width", 1)
// svg groups // svg groups
const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g") const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
// calculate radius // calculate color
const color = (d: NodeData) => { const color = (d: NodeData) => {
const isCurrent = d.id === slug const isCurrent = d.id === slug
if (isCurrent) { if (isCurrent) {
@ -182,7 +182,12 @@ async function renderGraph(container: string, slug: string) {
neighbourNodes.transition().duration(200).attr("fill", color) neighbourNodes.transition().duration(200).attr("fill", color)
// highlight links // highlight links
linkNodes.transition().duration(200).attr("stroke", "var(--gray)") linkNodes
.transition()
.duration(200)
.attr("stroke", "var(--gray)")
.attr("stroke-width", 1)
const bigFont = fontSize * 1.5 const bigFont = fontSize * 1.5
@ -220,7 +225,7 @@ async function renderGraph(container: string, slug: string) {
const labels = graphNode const labels = graphNode
.append("text") .append("text")
.attr("dx", 0) .attr("dx", 0)
.attr("dy", (d) => nodeRadius(d) + 8 + "px") .attr("dy", (d) => nodeRadius(d) - 8 + "px")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " ")) .text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
.style('opacity', (opacityScale - 1) / 3.75) .style('opacity', (opacityScale - 1) / 3.75)
@ -266,12 +271,11 @@ async function renderGraph(container: string, slug: string) {
}) })
} }
async function renderGlobalGraph() { function renderGlobalGraph() {
const slug = document.body.dataset["slug"]! const slug = document.body.dataset["slug"]!
await renderGraph("global-graph-container", slug)
const container = document.getElementById("global-graph-outer") const container = document.getElementById("global-graph-outer")
container?.classList.add("active") container?.classList.add("active")
renderGraph("global-graph-container", slug)
function hideGlobalGraph() { function hideGlobalGraph() {
container?.classList.remove("active") container?.classList.remove("active")

View File

@ -19,11 +19,9 @@ export function normalizeRelativeURLs(
) )
} }
document.addEventListener("nav", () => {
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
const p = new DOMParser() const p = new DOMParser()
for (const link of links) { async function mouseEnterHandler(this: HTMLLinkElement, { clientX, clientY }: { clientX: number, clientY: number }) {
link.addEventListener("mouseenter", async ({ clientX, clientY }) => { const link = this
async function setPosition(popoverElement: HTMLElement) { async function setPosition(popoverElement: HTMLElement) {
const { x, y } = await computePosition(link, popoverElement, { const { x, y } = await computePosition(link, popoverElement, {
middleware: [ middleware: [
@ -38,7 +36,8 @@ document.addEventListener("nav", () => {
}) })
} }
if (link.dataset.fetchedPopover === "true") { // dont refetch if there's already a popover
if ([...link.children].some(child => child.classList.contains("popover"))) {
return setPosition(link.lastChild as HTMLElement) return setPosition(link.lastChild as HTMLElement)
} }
@ -73,7 +72,6 @@ document.addEventListener("nav", () => {
setPosition(popoverElement) setPosition(popoverElement)
link.appendChild(popoverElement) link.appendChild(popoverElement)
link.dataset.fetchedPopover = "true"
if (hash !== "") { if (hash !== "") {
const heading = popoverInner.querySelector(hash) as HTMLElement | null const heading = popoverInner.querySelector(hash) as HTMLElement | null
@ -82,6 +80,12 @@ document.addEventListener("nav", () => {
popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' }) popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
} }
} }
}) }
document.addEventListener("nav", () => {
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
for (const link of links) {
link.removeEventListener("mouseenter", mouseEnterHandler)
link.addEventListener("mouseenter", mouseEnterHandler)
} }
}) })

View File

@ -11,7 +11,8 @@ let index: Document<Item> | undefined = undefined
const contextWindowWords = 30 const contextWindowWords = 30
function highlight(searchTerm: string, text: string, trim?: boolean) { function highlight(searchTerm: string, text: string, trim?: boolean) {
const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "") // try to highlight longest tokens first
const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "").sort((a, b) => b.length - a.length)
let tokenizedText = text let tokenizedText = text
.split(/\s+/) .split(/\s+/)
.filter(t => t !== "") .filter(t => t !== "")
@ -42,7 +43,7 @@ function highlight(searchTerm: string, text: string, trim?: boolean) {
// see if this tok is prefixed by any search terms // see if this tok is prefixed by any search terms
for (const searchTok of tokenizedTerms) { for (const searchTok of tokenizedTerms) {
if (tok.toLowerCase().includes(searchTok.toLowerCase())) { if (tok.toLowerCase().includes(searchTok.toLowerCase())) {
const regex = new RegExp(searchTok, "gi") const regex = new RegExp(searchTok.toLowerCase(), "gi")
return tok.replace(regex, `<span class="highlight">$&</span>`) return tok.replace(regex, `<span class="highlight">$&</span>`)
} }
} }
@ -81,7 +82,7 @@ document.addEventListener("nav", async (e: unknown) => {
}) })
for (const [slug, fileData] of Object.entries<ContentDetails>(data)) { for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
index.add({ await index.addAsync(slug, {
slug, slug,
title: fileData.title, title: fileData.title,
content: fileData.content content: fileData.content
@ -169,7 +170,6 @@ document.addEventListener("nav", async (e: unknown) => {
displayResults(finalResults) displayResults(finalResults)
} }
document.removeEventListener("keydown", shortcutHandler) document.removeEventListener("keydown", shortcutHandler)
document.addEventListener("keydown", shortcutHandler) document.addEventListener("keydown", shortcutHandler)
searchIcon?.removeEventListener("click", showSearch) searchIcon?.removeEventListener("click", showSearch)

View File

@ -2,6 +2,7 @@
position: relative; position: relative;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 1rem;
& > .toggle { & > .toggle {
display: none; display: none;

View File

@ -40,9 +40,9 @@
top: 0; top: 0;
width: 100vw; width: 100vw;
height: 100%; height: 100%;
overflow: scroll;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
display: none; display: none;
overflow: hidden;
&.active { &.active {
display: inline-block; display: inline-block;

View File

@ -1,3 +1,5 @@
@use "../../styles/variables.scss" as *;
ul.section-ul { ul.section-ul {
list-style: none; list-style: none;
margin-top: 2em; margin-top: 2em;
@ -11,7 +13,7 @@ li.section-li {
display: grid; display: grid;
grid-template-columns: 6em 3fr 1fr; grid-template-columns: 6em 3fr 1fr;
@media all and (max-width: 600px) { @media all and (max-width: $mobileBreakpoint) {
& > .tags { & > .tags {
display: none; display: none;
} }
@ -22,7 +24,7 @@ li.section-li {
margin-left: 1rem; margin-left: 1rem;
} }
& > .desc a { & > .desc > h3 > a {
background-color: transparent; background-color: transparent;
} }

View File

@ -1,3 +1,5 @@
@use "../../styles/variables.scss" as *;
@keyframes dropin { @keyframes dropin {
0% { 0% {
opacity: 0; opacity: 0;
@ -42,7 +44,7 @@
opacity: 0; opacity: 0;
transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease;
@media all and (max-width: 600px) { @media all and (max-width: $mobileBreakpoint) {
display: none !important; display: none !important;
} }
} }

View File

@ -1,3 +1,5 @@
@use "../../styles/variables.scss" as *;
.search { .search {
min-width: 5rem; min-width: 5rem;
max-width: 14rem; max-width: 14rem;
@ -55,7 +57,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media all and (max-width: 1200px) { @media all and (max-width: $tabletBreakpoint) {
width: 90%; width: 90%;
} }

View File

@ -7,10 +7,16 @@ function slugSegment(s: string): string {
// on the client, 'index' isn't ever rendered so we should clean it up // on the client, 'index' isn't ever rendered so we should clean it up
export function clientSideSlug(fp: string): string { export function clientSideSlug(fp: string): string {
// remove index
if (fp.endsWith("index")) { if (fp.endsWith("index")) {
fp = fp.slice(0, -"index".length) fp = fp.slice(0, -"index".length)
} }
// remove trailing slash
if (fp.endsWith("/")) {
fp = fp.slice(0, -1)
}
return fp return fp
} }
@ -23,7 +29,7 @@ export function trimPathSuffix(fp: string): string {
} }
export function slugify(s: string): string { export function slugify(s: string): string {
const [fp, anchor] = s.split("#", 2) let [fp, anchor] = s.split("#", 2)
const sluggedAnchor = anchor === undefined ? "" : "#" + slugAnchor(anchor) const sluggedAnchor = anchor === undefined ? "" : "#" + slugAnchor(anchor)
const withoutFileExt = fp.replace(new RegExp(path.extname(fp) + '$'), '') const withoutFileExt = fp.replace(new RegExp(path.extname(fp) + '$'), '')
const rawSlugSegments = withoutFileExt.split(path.sep) const rawSlugSegments = withoutFileExt.split(path.sep)

View File

@ -15,11 +15,13 @@ export type ContentDetails = {
interface Options { interface Options {
enableSiteMap: boolean enableSiteMap: boolean
enableRSS: boolean enableRSS: boolean
includeEmptyFiles: boolean
} }
const defaultOptions: Options = { const defaultOptions: Options = {
enableSiteMap: true, enableSiteMap: true,
enableRSS: true, enableRSS: true,
includeEmptyFiles: false,
} }
function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string { function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
@ -57,7 +59,7 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex): string {
</rss>` </rss>`
} }
export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => { export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
opts = { ...defaultOptions, ...opts } opts = { ...defaultOptions, ...opts }
return { return {
name: "ContentIndex", name: "ContentIndex",
@ -67,6 +69,7 @@ export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
for (const [_tree, file] of content) { for (const [_tree, file] of content) {
const slug = file.data.slug! const slug = file.data.slug!
const date = file.data.dates?.modified ?? new Date() const date = file.data.dates?.modified ?? new Date()
if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) {
linkIndex.set(slug, { linkIndex.set(slug, {
title: file.data.frontmatter?.title!, title: file.data.frontmatter?.title!,
links: file.data.links ?? [], links: file.data.links ?? [],
@ -76,6 +79,7 @@ export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
description: file.data.description ?? "" description: file.data.description ?? ""
}) })
} }
}
if (opts?.enableSiteMap) { if (opts?.enableSiteMap) {
await emit({ await emit({
@ -106,6 +110,7 @@ export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
return [slug, content] return [slug, content]
}) })
) )
await emit({ await emit({
content: JSON.stringify(simplifiedIndex), content: JSON.stringify(simplifiedIndex),
slug: fp, slug: fp,

View File

@ -6,6 +6,7 @@ import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, defaultProcessedContent } from "../vfile" import { ProcessedContent, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
import path from "path" import path from "path"
import { clientSideSlug } from "../../path"
export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => { export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
if (!opts) { if (!opts) {
@ -36,7 +37,7 @@ export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
]))) ])))
for (const [tree, file] of content) { for (const [tree, file] of content) {
const slug = file.data.slug! const slug = clientSideSlug(file.data.slug!)
if (folders.has(slug)) { if (folders.has(slug)) {
folderDescriptions[slug] = [tree, file] folderDescriptions[slug] = [tree, file]
} }

View File

@ -5,6 +5,7 @@ import BodyConstructor from "../../components/Body"
import { pageResources, renderPage } from "../../components/renderPage" import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, defaultProcessedContent } from "../vfile" import { ProcessedContent, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
import { clientSideSlug } from "../../path"
export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => { export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
if (!opts) { if (!opts) {
@ -30,7 +31,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
]))) ])))
for (const [tree, file] of content) { for (const [tree, file] of content) {
const slug = file.data.slug! const slug = clientSideSlug(file.data.slug!)
if (slug.startsWith("tags/")) { if (slug.startsWith("tags/")) {
const tag = slug.slice("tags/".length) const tag = slug.slice("tags/".length)
if (tags.has(tag)) { if (tags.has(tag)) {

View File

@ -20,26 +20,30 @@ export function getComponentResources(plugins: PluginTypes): ComponentResources
} }
} }
const componentResources: ComponentResources = { const componentResources = {
css: [], css: new Set<string>(),
beforeDOMLoaded: [], beforeDOMLoaded: new Set<string>(),
afterDOMLoaded: [] afterDOMLoaded: new Set<string>()
} }
for (const component of allComponents) { for (const component of allComponents) {
const { css, beforeDOMLoaded, afterDOMLoaded } = component const { css, beforeDOMLoaded, afterDOMLoaded } = component
if (css) { if (css) {
componentResources.css.push(css) componentResources.css.add(css)
} }
if (beforeDOMLoaded) { if (beforeDOMLoaded) {
componentResources.beforeDOMLoaded.push(beforeDOMLoaded) componentResources.beforeDOMLoaded.add(beforeDOMLoaded)
} }
if (afterDOMLoaded) { if (afterDOMLoaded) {
componentResources.afterDOMLoaded.push(afterDOMLoaded) componentResources.afterDOMLoaded.add(afterDOMLoaded)
} }
} }
return componentResources return {
css: [...componentResources.css],
beforeDOMLoaded: [...componentResources.beforeDOMLoaded],
afterDOMLoaded: [...componentResources.afterDOMLoaded]
}
} }
function joinScripts(scripts: string[]): string { function joinScripts(scripts: string[]): string {
@ -78,10 +82,10 @@ export function getStaticResourcesFromPlugins(plugins: PluginTypes) {
for (const transformer of plugins.transformers) { for (const transformer of plugins.transformers) {
const res = transformer.externalResources ? transformer.externalResources() : {} const res = transformer.externalResources ? transformer.externalResources() : {}
if (res?.js) { if (res?.js) {
staticResources.js = staticResources.js.concat(res.js) staticResources.js.push(...res.js)
} }
if (res?.css) { if (res?.css) {
staticResources.css = staticResources.css.concat(res.css) staticResources.css.push(...res.css)
} }
} }

View File

@ -8,7 +8,6 @@ import { ProcessedContent } from "../plugins/vfile"
import { QUARTZ, slugify } from "../path" import { QUARTZ, slugify } from "../path"
import { globbyStream } from "globby" import { globbyStream } from "globby"
import chalk from "chalk" import chalk from "chalk"
import { googleFontHref } from '../theme'
// @ts-ignore // @ts-ignore
import spaRouterScript from '../components/scripts/spa.inline' import spaRouterScript from '../components/scripts/spa.inline'
@ -18,9 +17,10 @@ import plausibleScript from '../components/scripts/plausible.inline'
import popoverScript from '../components/scripts/popover.inline' import popoverScript from '../components/scripts/popover.inline'
import popoverStyle from '../components/styles/popover.scss' import popoverStyle from '../components/styles/popover.scss'
import { StaticResources } from "../resources" import { StaticResources } from "../resources"
import { QuartzLogger } from "../log"
import { googleFontHref } from "../theme"
function addGlobalPageResources(cfg: GlobalConfiguration, staticResources: StaticResources, componentResources: ComponentResources) { function addGlobalPageResources(cfg: GlobalConfiguration, staticResources: StaticResources, componentResources: ComponentResources) {
// font and other resources
staticResources.css.push(googleFontHref(cfg.theme)) staticResources.css.push(googleFontHref(cfg.theme))
// popovers // popovers
@ -67,6 +67,9 @@ function addGlobalPageResources(cfg: GlobalConfiguration, staticResources: Stati
export async function emitContent(contentFolder: string, output: string, cfg: QuartzConfig, content: ProcessedContent[], verbose: boolean) { export async function emitContent(contentFolder: string, output: string, cfg: QuartzConfig, content: ProcessedContent[], verbose: boolean) {
const perf = new PerfTimer() const perf = new PerfTimer()
const log = new QuartzLogger(verbose)
log.start(`Emitting output files`)
const emit: EmitCallback = async ({ slug, ext, content }) => { const emit: EmitCallback = async ({ slug, ext, content }) => {
const pathToPage = path.join(output, slug + ext) const pathToPage = path.join(output, slug + ext)
const dir = path.dirname(pathToPage) const dir = path.dirname(pathToPage)
@ -80,6 +83,7 @@ export async function emitContent(contentFolder: string, output: string, cfg: Qu
// component specific scripts and styles // component specific scripts and styles
const componentResources = getComponentResources(cfg.plugins) const componentResources = getComponentResources(cfg.plugins)
// important that this goes *after* component scripts // important that this goes *after* component scripts
// as the "nav" event gets triggered here and we should make sure // as the "nav" event gets triggered here and we should make sure
// that everyone else had the chance to register a listener for it // that everyone else had the chance to register a listener for it
@ -136,5 +140,5 @@ export async function emitContent(contentFolder: string, output: string, cfg: Qu
} }
} }
console.log(`Emitted ${emittedFiles} files to \`${output}\` in ${perf.timeSince()}`) log.success(`Emitted ${emittedFiles} files to \`${output}\` in ${perf.timeSince()}`)
} }

View File

@ -1,5 +1,6 @@
@import "./syntax.scss"; @use "./syntax.scss";
@import "./callouts.scss"; @use "./callouts.scss";
@use "./variables.scss" as *;
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
@ -11,9 +12,6 @@ body {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--light); background-color: var(--light);
font-family: var(--bodyFont); font-family: var(--bodyFont);
--pageWidth: 800px;
--sidePanelWidth: 400px;
--topSpacing: 6rem;
} }
.text-highlight { .text-highlight {
@ -47,8 +45,8 @@ a {
.page { .page {
& > .page-header { & > .page-header {
max-width: var(--pageWidth); max-width: $pageWidth;
margin: var(--topSpacing) auto 0 auto; margin: $topSpacing auto 0 auto;
} }
& > #quartz-body { & > #quartz-body {
@ -57,7 +55,7 @@ a {
& .left, & .right { & .left, & .right {
flex: 1; flex: 1;
width: calc(calc(100vw - var(--pageWidth)) / 2); width: calc(calc(100vw - $pageWidth) / 2);
} }
& .left-inner, & .right-inner { & .left-inner, & .right-inner {
@ -65,30 +63,44 @@ a {
flex-direction: column; flex-direction: column;
gap: 2rem; gap: 2rem;
top: 0; top: 0;
width: var(--sidePanelWidth); width: $sidePanelWidth;
margin-top: calc(var(--topSpacing)); margin-top: $topSpacing;
box-sizing: border-box; box-sizing: border-box;
padding: 0 4rem; padding: 0 4rem;
position: fixed; position: fixed;
} }
& .left-inner { & .left-inner {
left: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth)); left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
} }
& .right-inner { & .right-inner {
right: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth)); right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
} }
& .center { & .center {
width: var(--pageWidth); width: $pageWidth;
margin: 0 auto; margin: 0 auto;
} }
} }
} }
.desktop-only {
display: initial;
@media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
display: none;
}
}
.mobile-only {
display: none;
@media all and (max-width: ($pageWidth + 2 * $sidePanelWidth)) {
display: initial;
}
}
.page { .page {
@media all and (max-width: 1200px) { @media all and (max-width: $tabletBreakpoint) {
margin: 25px 5vw; margin: 25px 5vw;
& .left, & .right { & .left, & .right {
padding: 0; padding: 0;

View File

@ -0,0 +1,5 @@
$pageWidth: 800px;
$mobileBreakpoint: 600px;
$tabletBreakpoint: 1200px;
$sidePanelWidth: 400px;
$topSpacing: 6rem;

View File

@ -21,6 +21,8 @@ export interface Theme {
} }
} }
const DEFAULT_SANS_SERIF = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif"
const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
export function googleFontHref(theme: Theme) { export function googleFontHref(theme: Theme) {
const { code, header, body } = theme.typography const { code, header, body } = theme.typography
return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap` return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap`
@ -37,9 +39,9 @@ export function joinStyles(theme: Theme, ...stylesheet: string[]) {
--tertiary: ${theme.colors.lightMode.tertiary}; --tertiary: ${theme.colors.lightMode.tertiary};
--highlight: ${theme.colors.lightMode.highlight}; --highlight: ${theme.colors.lightMode.highlight};
--headerFont: ${theme.typography.header}; --headerFont: ${theme.typography.header}, ${DEFAULT_SANS_SERIF};
--bodyFont: ${theme.typography.body}; --bodyFont: ${theme.typography.body}, ${DEFAULT_SANS_SERIF};
--codeFont: ${theme.typography.code}; --codeFont: ${theme.typography.code}, ${DEFAULT_MONO};
} }
:root[saved-theme="dark"] { :root[saved-theme="dark"] {