fix indexing causing main thread freeze, various polish
This commit is contained in:
parent
20b2d88a06
commit
1547c8af0d
9
package-lock.json
generated
9
package-lock.json
generated
@ -25,6 +25,7 @@
|
||||
"mdast-util-find-and-replace": "^2.2.2",
|
||||
"mdast-util-to-string": "^3.2.0",
|
||||
"micromorph": "^0.4.5",
|
||||
"plausible-tracker": "^0.3.8",
|
||||
"preact": "^10.14.1",
|
||||
"preact-render-to-string": "^6.0.3",
|
||||
"pretty-time": "^1.1.0",
|
||||
@ -3619,6 +3620,14 @@
|
||||
"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": {
|
||||
"version": "10.15.1",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.15.1.tgz",
|
||||
|
@ -41,6 +41,7 @@
|
||||
"mdast-util-find-and-replace": "^2.2.2",
|
||||
"mdast-util-to-string": "^3.2.0",
|
||||
"micromorph": "^0.4.5",
|
||||
"plausible-tracker": "^0.3.8",
|
||||
"preact": "^10.14.1",
|
||||
"preact-render-to-string": "^6.0.3",
|
||||
"pretty-time": "^1.1.0",
|
||||
|
@ -23,8 +23,8 @@ const contentPageLayout: PageLayout = {
|
||||
left: [
|
||||
Component.PageTitle(),
|
||||
Component.Search(),
|
||||
Component.TableOfContents(),
|
||||
Component.Darkmode()
|
||||
Component.Darkmode(),
|
||||
Component.DesktopOnly(Component.TableOfContents()),
|
||||
],
|
||||
right: [
|
||||
Component.Graph(),
|
||||
|
20
quartz/components/DesktopOnly.tsx
Normal file
20
quartz/components/DesktopOnly.tsx
Normal 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
|
@ -25,23 +25,23 @@ const defaultOptions: GraphOptions = {
|
||||
drag: true,
|
||||
zoom: true,
|
||||
depth: 1,
|
||||
scale: 1.2,
|
||||
repelForce: 2,
|
||||
centerForce: 1,
|
||||
scale: 1.1,
|
||||
repelForce: 0.5,
|
||||
centerForce: 0.3,
|
||||
linkDistance: 30,
|
||||
fontSize: 0.6,
|
||||
opacityScale: 3
|
||||
opacityScale: 1
|
||||
},
|
||||
globalGraph: {
|
||||
drag: true,
|
||||
zoom: true,
|
||||
depth: -1,
|
||||
scale: 1.2,
|
||||
repelForce: 1,
|
||||
centerForce: 1,
|
||||
scale: 0.9,
|
||||
repelForce: 0.5,
|
||||
centerForce: 0.3,
|
||||
linkDistance: 30,
|
||||
fontSize: 0.5,
|
||||
opacityScale: 3
|
||||
fontSize: 0.6,
|
||||
opacityScale: 1
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { resolveToRoot } from "../path"
|
||||
import { clientSideSlug, resolveToRoot } from "../path"
|
||||
import { JSResourceToScriptElement } from "../resources"
|
||||
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
||||
|
||||
export default (() => {
|
||||
function Head({ fileData, externalResources }: QuartzComponentProps) {
|
||||
const slug = fileData.slug!
|
||||
const slug = clientSideSlug(fileData.slug!)
|
||||
const title = fileData.frontmatter?.title ?? "Untitled"
|
||||
const description = fileData.description ?? "No description provided"
|
||||
const { css, js } = externalResources
|
||||
|
20
quartz/components/MobileOnly.tsx
Normal file
20
quartz/components/MobileOnly.tsx
Normal 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
|
@ -23,7 +23,7 @@ function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): numb
|
||||
|
||||
export function PageList({ fileData, allFiles }: QuartzComponentProps) {
|
||||
const slug = fileData.slug!
|
||||
return <ul class="section-ul popover-hint">
|
||||
return <ul class="section-ul">
|
||||
{allFiles.sort(byDateAndAlphabetical).map(page => {
|
||||
const title = page.frontmatter?.title
|
||||
const pageSlug = page.slug!
|
||||
|
@ -3,8 +3,7 @@ import readingTime from "reading-time"
|
||||
|
||||
function ReadingTime({ fileData }: QuartzComponentProps) {
|
||||
const text = fileData.text
|
||||
const isHomePage = fileData.slug === "index"
|
||||
if (text && !isHomePage) {
|
||||
if (text) {
|
||||
const { text: timeTaken, words } = readingTime(text)
|
||||
return <p class="reading-time">{words} words, {timeTaken}</p>
|
||||
} else {
|
||||
|
@ -18,7 +18,7 @@ function TableOfContents({ fileData }: QuartzComponentProps) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <div>
|
||||
return <div class="desktop-only">
|
||||
<button type="button" id="toc">
|
||||
<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">
|
||||
|
@ -29,6 +29,7 @@ TagList.css = `
|
||||
|
||||
.tags > li {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
@ -13,6 +13,8 @@ import Graph from "./Graph"
|
||||
import Backlinks from "./Backlinks"
|
||||
import Search from "./Search"
|
||||
import Footer from "./Footer"
|
||||
import DesktopOnly from "./DesktopOnly"
|
||||
import MobileOnly from "./MobileOnly"
|
||||
|
||||
export {
|
||||
ArticleTitle,
|
||||
@ -29,5 +31,7 @@ export {
|
||||
Graph,
|
||||
Backlinks,
|
||||
Search,
|
||||
Footer
|
||||
Footer,
|
||||
DesktopOnly,
|
||||
MobileOnly
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ import path from "path"
|
||||
import style from '../styles/listPage.scss'
|
||||
import { PageList } from "../PageList"
|
||||
|
||||
function TagContent(props: QuartzComponentProps) {
|
||||
function FolderContent(props: QuartzComponentProps) {
|
||||
const { tree, fileData, allFiles } = props
|
||||
const folderSlug = fileData.slug!
|
||||
const allPagesInFolder = allFiles.filter(file => {
|
||||
@ -25,13 +25,15 @@ function TagContent(props: QuartzComponentProps) {
|
||||
|
||||
// @ts-ignore
|
||||
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
|
||||
return <div>
|
||||
return <div class="popover-hint">
|
||||
<article>{content}</article>
|
||||
<hr/>
|
||||
<p>{allPagesInFolder.length} items under this folder.</p>
|
||||
<div>
|
||||
<PageList {...listProps} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
TagContent.css = style + PageList.css
|
||||
export default (() => TagContent) satisfies QuartzComponentConstructor
|
||||
FolderContent.css = style + PageList.css
|
||||
export default (() => FolderContent) satisfies QuartzComponentConstructor
|
||||
|
@ -3,13 +3,14 @@ import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
|
||||
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
|
||||
import style from '../styles/listPage.scss'
|
||||
import { PageList } from "../PageList"
|
||||
import { clientSideSlug } from "../../path"
|
||||
|
||||
function TagContent(props: QuartzComponentProps) {
|
||||
const { tree, fileData, allFiles } = props
|
||||
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 listProps = {
|
||||
...props,
|
||||
@ -18,8 +19,10 @@ function TagContent(props: QuartzComponentProps) {
|
||||
|
||||
// @ts-ignore
|
||||
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
|
||||
return <div>
|
||||
return <div class="popover-hint">
|
||||
<article>{content}</article>
|
||||
<hr/>
|
||||
<p>{allPagesWithTag.length} items with this tag.</p>
|
||||
<div>
|
||||
<PageList {...listProps} />
|
||||
</div>
|
||||
|
@ -25,7 +25,7 @@ export function pageResources(slug: string, staticResources: StaticResources): S
|
||||
css: [baseDir + "/index.css", ...staticResources.css],
|
||||
js: [
|
||||
{ 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,
|
||||
{ src: baseDir + "/postscript.js", loadTime: "afterDOMReady", moduleType: 'module', contentType: "external" }
|
||||
]
|
||||
|
@ -110,12 +110,12 @@ async function renderGraph(container: string, slug: string) {
|
||||
.join("line")
|
||||
.attr("class", "link")
|
||||
.attr("stroke", "var(--lightgray)")
|
||||
.attr("stroke-width", 2)
|
||||
.attr("stroke-width", 1)
|
||||
|
||||
// svg groups
|
||||
const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
|
||||
|
||||
// calculate radius
|
||||
// calculate color
|
||||
const color = (d: NodeData) => {
|
||||
const isCurrent = d.id === slug
|
||||
if (isCurrent) {
|
||||
@ -182,7 +182,12 @@ async function renderGraph(container: string, slug: string) {
|
||||
neighbourNodes.transition().duration(200).attr("fill", color)
|
||||
|
||||
// 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
|
||||
|
||||
@ -220,7 +225,7 @@ async function renderGraph(container: string, slug: string) {
|
||||
const labels = graphNode
|
||||
.append("text")
|
||||
.attr("dx", 0)
|
||||
.attr("dy", (d) => nodeRadius(d) + 8 + "px")
|
||||
.attr("dy", (d) => nodeRadius(d) - 8 + "px")
|
||||
.attr("text-anchor", "middle")
|
||||
.text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
|
||||
.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"]!
|
||||
await renderGraph("global-graph-container", slug)
|
||||
const container = document.getElementById("global-graph-outer")
|
||||
container?.classList.add("active")
|
||||
|
||||
renderGraph("global-graph-container", slug)
|
||||
|
||||
function hideGlobalGraph() {
|
||||
container?.classList.remove("active")
|
||||
|
@ -19,69 +19,73 @@ export function normalizeRelativeURLs(
|
||||
)
|
||||
}
|
||||
|
||||
document.addEventListener("nav", () => {
|
||||
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
|
||||
const p = new DOMParser()
|
||||
for (const link of links) {
|
||||
link.addEventListener("mouseenter", async ({ clientX, clientY }) => {
|
||||
async function setPosition(popoverElement: HTMLElement) {
|
||||
const { x, y } = await computePosition(link, popoverElement, {
|
||||
middleware: [
|
||||
inline({ x: clientX, y: clientY }),
|
||||
shift(),
|
||||
flip()
|
||||
]
|
||||
})
|
||||
Object.assign(popoverElement.style, {
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
})
|
||||
}
|
||||
|
||||
if (link.dataset.fetchedPopover === "true") {
|
||||
return setPosition(link.lastChild as HTMLElement)
|
||||
}
|
||||
|
||||
const thisUrl = new URL(document.location.href)
|
||||
thisUrl.hash = ""
|
||||
thisUrl.search = ""
|
||||
const targetUrl = new URL(link.href)
|
||||
const hash = targetUrl.hash
|
||||
targetUrl.hash = ""
|
||||
targetUrl.search = ""
|
||||
// prevent hover of the same page
|
||||
if (thisUrl.toString() === targetUrl.toString()) return
|
||||
|
||||
const contents = await fetch(`${targetUrl}`)
|
||||
.then((res) => res.text())
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
if (!contents) return
|
||||
const html = p.parseFromString(contents, "text/html")
|
||||
normalizeRelativeURLs(html, targetUrl)
|
||||
const elts = [...html.getElementsByClassName("popover-hint")]
|
||||
if (elts.length === 0) return
|
||||
|
||||
const popoverElement = document.createElement("div")
|
||||
popoverElement.classList.add("popover")
|
||||
const popoverInner = document.createElement("div")
|
||||
popoverInner.classList.add("popover-inner")
|
||||
popoverElement.appendChild(popoverInner)
|
||||
elts.forEach(elt => popoverInner.appendChild(elt))
|
||||
|
||||
setPosition(popoverElement)
|
||||
link.appendChild(popoverElement)
|
||||
link.dataset.fetchedPopover = "true"
|
||||
|
||||
if (hash !== "") {
|
||||
const heading = popoverInner.querySelector(hash) as HTMLElement | null
|
||||
if (heading) {
|
||||
// leave ~12px of buffer when scrolling to a heading
|
||||
popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
|
||||
}
|
||||
}
|
||||
const p = new DOMParser()
|
||||
async function mouseEnterHandler(this: HTMLLinkElement, { clientX, clientY }: { clientX: number, clientY: number }) {
|
||||
const link = this
|
||||
async function setPosition(popoverElement: HTMLElement) {
|
||||
const { x, y } = await computePosition(link, popoverElement, {
|
||||
middleware: [
|
||||
inline({ x: clientX, y: clientY }),
|
||||
shift(),
|
||||
flip()
|
||||
]
|
||||
})
|
||||
Object.assign(popoverElement.style, {
|
||||
left: `${x}px`,
|
||||
top: `${y}px`,
|
||||
})
|
||||
}
|
||||
|
||||
// dont refetch if there's already a popover
|
||||
if ([...link.children].some(child => child.classList.contains("popover"))) {
|
||||
return setPosition(link.lastChild as HTMLElement)
|
||||
}
|
||||
|
||||
const thisUrl = new URL(document.location.href)
|
||||
thisUrl.hash = ""
|
||||
thisUrl.search = ""
|
||||
const targetUrl = new URL(link.href)
|
||||
const hash = targetUrl.hash
|
||||
targetUrl.hash = ""
|
||||
targetUrl.search = ""
|
||||
// prevent hover of the same page
|
||||
if (thisUrl.toString() === targetUrl.toString()) return
|
||||
|
||||
const contents = await fetch(`${targetUrl}`)
|
||||
.then((res) => res.text())
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
if (!contents) return
|
||||
const html = p.parseFromString(contents, "text/html")
|
||||
normalizeRelativeURLs(html, targetUrl)
|
||||
const elts = [...html.getElementsByClassName("popover-hint")]
|
||||
if (elts.length === 0) return
|
||||
|
||||
const popoverElement = document.createElement("div")
|
||||
popoverElement.classList.add("popover")
|
||||
const popoverInner = document.createElement("div")
|
||||
popoverInner.classList.add("popover-inner")
|
||||
popoverElement.appendChild(popoverInner)
|
||||
elts.forEach(elt => popoverInner.appendChild(elt))
|
||||
|
||||
setPosition(popoverElement)
|
||||
link.appendChild(popoverElement)
|
||||
|
||||
if (hash !== "") {
|
||||
const heading = popoverInner.querySelector(hash) as HTMLElement | null
|
||||
if (heading) {
|
||||
// leave ~12px of buffer when scrolling to a heading
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
@ -11,7 +11,8 @@ let index: Document<Item> | undefined = undefined
|
||||
|
||||
const contextWindowWords = 30
|
||||
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
|
||||
.split(/\s+/)
|
||||
.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
|
||||
for (const searchTok of tokenizedTerms) {
|
||||
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>`)
|
||||
}
|
||||
}
|
||||
@ -81,7 +82,7 @@ document.addEventListener("nav", async (e: unknown) => {
|
||||
})
|
||||
|
||||
for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
|
||||
index.add({
|
||||
await index.addAsync(slug, {
|
||||
slug,
|
||||
title: fileData.title,
|
||||
content: fileData.content
|
||||
@ -169,7 +170,6 @@ document.addEventListener("nav", async (e: unknown) => {
|
||||
displayResults(finalResults)
|
||||
}
|
||||
|
||||
|
||||
document.removeEventListener("keydown", shortcutHandler)
|
||||
document.addEventListener("keydown", shortcutHandler)
|
||||
searchIcon?.removeEventListener("click", showSearch)
|
||||
|
@ -2,6 +2,7 @@
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 1rem;
|
||||
|
||||
& > .toggle {
|
||||
display: none;
|
||||
|
@ -40,9 +40,9 @@
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
backdrop-filter: blur(4px);
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
display: inline-block;
|
||||
|
@ -1,3 +1,5 @@
|
||||
@use "../../styles/variables.scss" as *;
|
||||
|
||||
ul.section-ul {
|
||||
list-style: none;
|
||||
margin-top: 2em;
|
||||
@ -11,7 +13,7 @@ li.section-li {
|
||||
display: grid;
|
||||
grid-template-columns: 6em 3fr 1fr;
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
@media all and (max-width: $mobileBreakpoint) {
|
||||
& > .tags {
|
||||
display: none;
|
||||
}
|
||||
@ -22,7 +24,7 @@ li.section-li {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
& > .desc a {
|
||||
& > .desc > h3 > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
@ -1,3 +1,5 @@
|
||||
@use "../../styles/variables.scss" as *;
|
||||
|
||||
@keyframes dropin {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@ -42,7 +44,7 @@
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
@media all and (max-width: $mobileBreakpoint) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,5 @@
|
||||
@use "../../styles/variables.scss" as *;
|
||||
|
||||
.search {
|
||||
min-width: 5rem;
|
||||
max-width: 14rem;
|
||||
@ -55,7 +57,7 @@
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
@media all and (max-width: $tabletBreakpoint) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
@ -7,10 +7,16 @@ function slugSegment(s: string): string {
|
||||
|
||||
// on the client, 'index' isn't ever rendered so we should clean it up
|
||||
export function clientSideSlug(fp: string): string {
|
||||
// remove index
|
||||
if (fp.endsWith("index")) {
|
||||
fp = fp.slice(0, -"index".length)
|
||||
}
|
||||
|
||||
// remove trailing slash
|
||||
if (fp.endsWith("/")) {
|
||||
fp = fp.slice(0, -1)
|
||||
}
|
||||
|
||||
return fp
|
||||
}
|
||||
|
||||
@ -23,7 +29,7 @@ export function trimPathSuffix(fp: 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 withoutFileExt = fp.replace(new RegExp(path.extname(fp) + '$'), '')
|
||||
const rawSlugSegments = withoutFileExt.split(path.sep)
|
||||
|
@ -15,11 +15,13 @@ export type ContentDetails = {
|
||||
interface Options {
|
||||
enableSiteMap: boolean
|
||||
enableRSS: boolean
|
||||
includeEmptyFiles: boolean
|
||||
}
|
||||
|
||||
const defaultOptions: Options = {
|
||||
enableSiteMap: true,
|
||||
enableRSS: true,
|
||||
includeEmptyFiles: false,
|
||||
}
|
||||
|
||||
function generateSiteMap(cfg: GlobalConfiguration, idx: ContentIndex): string {
|
||||
@ -57,7 +59,7 @@ function generateRSSFeed(cfg: GlobalConfiguration, idx: ContentIndex): string {
|
||||
</rss>`
|
||||
}
|
||||
|
||||
export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
|
||||
export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => {
|
||||
opts = { ...defaultOptions, ...opts }
|
||||
return {
|
||||
name: "ContentIndex",
|
||||
@ -67,6 +69,7 @@ export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
|
||||
for (const [_tree, file] of content) {
|
||||
const slug = file.data.slug!
|
||||
const date = file.data.dates?.modified ?? new Date()
|
||||
if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) {
|
||||
linkIndex.set(slug, {
|
||||
title: file.data.frontmatter?.title!,
|
||||
links: file.data.links ?? [],
|
||||
@ -75,6 +78,7 @@ export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
|
||||
date: date,
|
||||
description: file.data.description ?? ""
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (opts?.enableSiteMap) {
|
||||
@ -106,6 +110,7 @@ export const ContentIndex: QuartzEmitterPlugin<Options> = (opts) => {
|
||||
return [slug, content]
|
||||
})
|
||||
)
|
||||
|
||||
await emit({
|
||||
content: JSON.stringify(simplifiedIndex),
|
||||
slug: fp,
|
||||
|
@ -6,6 +6,7 @@ import { pageResources, renderPage } from "../../components/renderPage"
|
||||
import { ProcessedContent, defaultProcessedContent } from "../vfile"
|
||||
import { FullPageLayout } from "../../cfg"
|
||||
import path from "path"
|
||||
import { clientSideSlug } from "../../path"
|
||||
|
||||
export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
|
||||
if (!opts) {
|
||||
@ -36,7 +37,7 @@ export const FolderPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
|
||||
])))
|
||||
|
||||
for (const [tree, file] of content) {
|
||||
const slug = file.data.slug!
|
||||
const slug = clientSideSlug(file.data.slug!)
|
||||
if (folders.has(slug)) {
|
||||
folderDescriptions[slug] = [tree, file]
|
||||
}
|
||||
|
@ -5,6 +5,7 @@ import BodyConstructor from "../../components/Body"
|
||||
import { pageResources, renderPage } from "../../components/renderPage"
|
||||
import { ProcessedContent, defaultProcessedContent } from "../vfile"
|
||||
import { FullPageLayout } from "../../cfg"
|
||||
import { clientSideSlug } from "../../path"
|
||||
|
||||
export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
|
||||
if (!opts) {
|
||||
@ -30,7 +31,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
|
||||
])))
|
||||
|
||||
for (const [tree, file] of content) {
|
||||
const slug = file.data.slug!
|
||||
const slug = clientSideSlug(file.data.slug!)
|
||||
if (slug.startsWith("tags/")) {
|
||||
const tag = slug.slice("tags/".length)
|
||||
if (tags.has(tag)) {
|
||||
|
@ -20,26 +20,30 @@ export function getComponentResources(plugins: PluginTypes): ComponentResources
|
||||
}
|
||||
}
|
||||
|
||||
const componentResources: ComponentResources = {
|
||||
css: [],
|
||||
beforeDOMLoaded: [],
|
||||
afterDOMLoaded: []
|
||||
const componentResources = {
|
||||
css: new Set<string>(),
|
||||
beforeDOMLoaded: new Set<string>(),
|
||||
afterDOMLoaded: new Set<string>()
|
||||
}
|
||||
|
||||
for (const component of allComponents) {
|
||||
const { css, beforeDOMLoaded, afterDOMLoaded } = component
|
||||
if (css) {
|
||||
componentResources.css.push(css)
|
||||
componentResources.css.add(css)
|
||||
}
|
||||
if (beforeDOMLoaded) {
|
||||
componentResources.beforeDOMLoaded.push(beforeDOMLoaded)
|
||||
componentResources.beforeDOMLoaded.add(beforeDOMLoaded)
|
||||
}
|
||||
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 {
|
||||
@ -78,10 +82,10 @@ export function getStaticResourcesFromPlugins(plugins: PluginTypes) {
|
||||
for (const transformer of plugins.transformers) {
|
||||
const res = transformer.externalResources ? transformer.externalResources() : {}
|
||||
if (res?.js) {
|
||||
staticResources.js = staticResources.js.concat(res.js)
|
||||
staticResources.js.push(...res.js)
|
||||
}
|
||||
if (res?.css) {
|
||||
staticResources.css = staticResources.css.concat(res.css)
|
||||
staticResources.css.push(...res.css)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -8,7 +8,6 @@ import { ProcessedContent } from "../plugins/vfile"
|
||||
import { QUARTZ, slugify } from "../path"
|
||||
import { globbyStream } from "globby"
|
||||
import chalk from "chalk"
|
||||
import { googleFontHref } from '../theme'
|
||||
|
||||
// @ts-ignore
|
||||
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 popoverStyle from '../components/styles/popover.scss'
|
||||
import { StaticResources } from "../resources"
|
||||
import { QuartzLogger } from "../log"
|
||||
import { googleFontHref } from "../theme"
|
||||
|
||||
function addGlobalPageResources(cfg: GlobalConfiguration, staticResources: StaticResources, componentResources: ComponentResources) {
|
||||
// font and other resources
|
||||
staticResources.css.push(googleFontHref(cfg.theme))
|
||||
|
||||
// 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) {
|
||||
const perf = new PerfTimer()
|
||||
const log = new QuartzLogger(verbose)
|
||||
|
||||
log.start(`Emitting output files`)
|
||||
const emit: EmitCallback = async ({ slug, ext, content }) => {
|
||||
const pathToPage = path.join(output, slug + ext)
|
||||
const dir = path.dirname(pathToPage)
|
||||
@ -80,6 +83,7 @@ export async function emitContent(contentFolder: string, output: string, cfg: Qu
|
||||
|
||||
// component specific scripts and styles
|
||||
const componentResources = getComponentResources(cfg.plugins)
|
||||
|
||||
// important that this goes *after* component scripts
|
||||
// as the "nav" event gets triggered here and we should make sure
|
||||
// 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()}`)
|
||||
}
|
||||
|
@ -17,7 +17,7 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
|
||||
const scriptType = resource.moduleType ?? 'application/javascript'
|
||||
const spaPreserve = preserve ?? resource.spaPreserve
|
||||
if (resource.contentType === 'external') {
|
||||
return <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve} />
|
||||
return <script key={resource.src} src={resource.src} type={scriptType} spa-preserve={spaPreserve}/>
|
||||
} else {
|
||||
const content = resource.script
|
||||
return <script key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>{content}</script>
|
||||
|
@ -1,5 +1,6 @@
|
||||
@import "./syntax.scss";
|
||||
@import "./callouts.scss";
|
||||
@use "./syntax.scss";
|
||||
@use "./callouts.scss";
|
||||
@use "./variables.scss" as *;
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
@ -11,9 +12,6 @@ body {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--light);
|
||||
font-family: var(--bodyFont);
|
||||
--pageWidth: 800px;
|
||||
--sidePanelWidth: 400px;
|
||||
--topSpacing: 6rem;
|
||||
}
|
||||
|
||||
.text-highlight {
|
||||
@ -47,8 +45,8 @@ a {
|
||||
|
||||
.page {
|
||||
& > .page-header {
|
||||
max-width: var(--pageWidth);
|
||||
margin: var(--topSpacing) auto 0 auto;
|
||||
max-width: $pageWidth;
|
||||
margin: $topSpacing auto 0 auto;
|
||||
}
|
||||
|
||||
& > #quartz-body {
|
||||
@ -57,7 +55,7 @@ a {
|
||||
|
||||
& .left, & .right {
|
||||
flex: 1;
|
||||
width: calc(calc(100vw - var(--pageWidth)) / 2);
|
||||
width: calc(calc(100vw - $pageWidth) / 2);
|
||||
}
|
||||
|
||||
& .left-inner, & .right-inner {
|
||||
@ -65,30 +63,44 @@ a {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
top: 0;
|
||||
width: var(--sidePanelWidth);
|
||||
margin-top: calc(var(--topSpacing));
|
||||
width: $sidePanelWidth;
|
||||
margin-top: $topSpacing;
|
||||
box-sizing: border-box;
|
||||
padding: 0 4rem;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
& .left-inner {
|
||||
left: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth));
|
||||
left: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
|
||||
}
|
||||
|
||||
& .right-inner {
|
||||
right: calc(calc(100vw - var(--pageWidth)) / 2 - var(--sidePanelWidth));
|
||||
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
|
||||
}
|
||||
|
||||
& .center {
|
||||
width: var(--pageWidth);
|
||||
width: $pageWidth;
|
||||
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 {
|
||||
@media all and (max-width: 1200px) {
|
||||
@media all and (max-width: $tabletBreakpoint) {
|
||||
margin: 25px 5vw;
|
||||
& .left, & .right {
|
||||
padding: 0;
|
||||
|
5
quartz/styles/variables.scss
Normal file
5
quartz/styles/variables.scss
Normal file
@ -0,0 +1,5 @@
|
||||
$pageWidth: 800px;
|
||||
$mobileBreakpoint: 600px;
|
||||
$tabletBreakpoint: 1200px;
|
||||
$sidePanelWidth: 400px;
|
||||
$topSpacing: 6rem;
|
@ -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) {
|
||||
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`
|
||||
@ -37,9 +39,9 @@ export function joinStyles(theme: Theme, ...stylesheet: string[]) {
|
||||
--tertiary: ${theme.colors.lightMode.tertiary};
|
||||
--highlight: ${theme.colors.lightMode.highlight};
|
||||
|
||||
--headerFont: ${theme.typography.header};
|
||||
--bodyFont: ${theme.typography.body};
|
||||
--codeFont: ${theme.typography.code};
|
||||
--headerFont: ${theme.typography.header}, ${DEFAULT_SANS_SERIF};
|
||||
--bodyFont: ${theme.typography.body}, ${DEFAULT_SANS_SERIF};
|
||||
--codeFont: ${theme.typography.code}, ${DEFAULT_MONO};
|
||||
}
|
||||
|
||||
:root[saved-theme="dark"] {
|
||||
|
Loading…
Reference in New Issue
Block a user