fix indexing causing main thread freeze, various polish
This commit is contained in:
parent
83c5fa64ea
commit
79aff12b3f
9
package-lock.json
generated
9
package-lock.json
generated
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -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(),
|
||||||
|
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,
|
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
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) {
|
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!
|
||||||
|
@ -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 {
|
||||||
|
@ -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">
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
||||||
|
@ -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" }
|
||||||
]
|
]
|
||||||
|
@ -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")
|
||||||
|
@ -19,11 +19,9 @@ export function normalizeRelativeURLs(
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("nav", () => {
|
const p = new DOMParser()
|
||||||
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
|
async function mouseEnterHandler(this: HTMLLinkElement, { clientX, clientY }: { clientX: number, clientY: number }) {
|
||||||
const p = new DOMParser()
|
const link = this
|
||||||
for (const link of links) {
|
|
||||||
link.addEventListener("mouseenter", async ({ clientX, clientY }) => {
|
|
||||||
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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -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)
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
margin: 1rem;
|
||||||
|
|
||||||
& > .toggle {
|
& > .toggle {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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)
|
||||||
|
@ -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,
|
||||||
|
@ -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]
|
||||||
}
|
}
|
||||||
|
@ -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)) {
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()}`)
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,7 @@ export function JSResourceToScriptElement(resource: JSResource, preserve?: boole
|
|||||||
const scriptType = resource.moduleType ?? 'application/javascript'
|
const scriptType = resource.moduleType ?? 'application/javascript'
|
||||||
const spaPreserve = preserve ?? resource.spaPreserve
|
const spaPreserve = preserve ?? resource.spaPreserve
|
||||||
if (resource.contentType === 'external') {
|
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 {
|
} else {
|
||||||
const content = resource.script
|
const content = resource.script
|
||||||
return <script key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>{content}</script>
|
return <script key={randomUUID()} type={scriptType} spa-preserve={spaPreserve}>{content}</script>
|
||||||
|
@ -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;
|
||||||
|
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) {
|
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"] {
|
||||||
|
Loading…
Reference in New Issue
Block a user