alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2025-05-02 14:58:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

finish path refactoring, add sourcemap + better trace support

Browse source
This commit is contained in:
Jacky Zhao 2023-07-15 23:02:12 -07:00
parent 906f91f8ee
commit 3ac6b42e16
36 changed files with 331 additions and 1170 deletions

11
quartz/components/Backlinks.tsx
View file

@ -1,20 +1,19 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/backlinks.scss"
import { relativeToRoot } from "../path"
import { clientSideSlug } from "./scripts/util"
import { canonicalizeServer, resolveRelative } from "../path"
function Backlinks({ fileData, allFiles }: QuartzComponentProps) {
const slug = fileData.slug!
const slug = canonicalizeServer(fileData.slug!)
const backlinkFiles = allFiles.filter(file => file.links?.includes(slug))
return <div class="backlinks">
<h3>Backlinks</h3>
<ul class="overflow">
{backlinkFiles.length > 0 ?
backlinkFiles.map(f => <li><a href={clientSideSlug(relativeToRoot(slug, f.slug!))} class="internal">{f.frontmatter?.title}</a></li>)
backlinkFiles.map(f => <li><a href={resolveRelative(slug, canonicalizeServer(f.slug!))} class="internal">{f.frontmatter?.title}</a></li>)
: <li>No backlinks found</li>}
</ul>
</div>
</div>
}
Backlinks.css = style
Backlinks.css = style
export default (() => Backlinks) satisfies QuartzComponentConstructor

4
quartz/components/Head.tsx
View file

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

12
quartz/components/PageList.tsx
View file

@ -1,7 +1,6 @@
import { relativeToRoot } from "../path"
import { CanonicalSlug, canonicalizeServer, resolveRelative } from "../path"
import { QuartzPluginData } from "../plugins/vfile"
import { Date } from "./Date"
import { clientSideSlug } from "./scripts/util"
import { QuartzComponentProps } from "./types"
function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number {
@ -22,22 +21,23 @@ function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): numb
}
export function PageList({ fileData, allFiles }: QuartzComponentProps) {
const slug = fileData.slug!
const slug = canonicalizeServer(fileData.slug!)
return <ul class="section-ul">
{allFiles.sort(byDateAndAlphabetical).map(page => {
const title = page.frontmatter?.title
const pageSlug = page.slug!
const pageSlug = canonicalizeServer(page.slug!)
const tags = page.frontmatter?.tags ?? []
return <li class="section-li">
<div class="section">
{page.dates && <p class="meta">
<Date date={page.dates.modified} />
</p>}
<div class="desc">
<h3><a href={clientSideSlug(relativeToRoot(slug, pageSlug))} class="internal">{title}</a></h3>
<h3><a href={resolveRelative(slug, pageSlug)} class="internal">{title}</a></h3>
</div>
<ul class="tags">
{tags.map(tag => <li><a class="internal" href={relativeToRoot(slug, `tags/${tag}`)}>#{tag}</a></li>)}
{tags.map(tag => <li><a class="internal" href={resolveRelative(slug, `tags/${tag}` as CanonicalSlug)}>#{tag}</a></li>)}
</ul>
</div>
</li>

4
quartz/components/PageTitle.tsx
View file

@ -1,9 +1,9 @@
import { pathToRoot } from "../path"
import { canonicalizeServer, pathToRoot } from "../path"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
function PageTitle({ fileData, cfg }: QuartzComponentProps) {
const title = cfg?.pageTitle ?? "Untitled Quartz"
const slug = fileData.slug!
const slug = canonicalizeServer(fileData.slug!)
const baseDir = pathToRoot(slug)
return <h1 class="page-title"><a href={baseDir}>{title}</a></h1>
}

4
quartz/components/TagList.tsx
View file

@ -1,10 +1,10 @@
import { pathToRoot } from "../path"
import { canonicalizeServer, pathToRoot } from "../path"
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { slug as slugAnchor } from 'github-slugger'
function TagList({ fileData }: QuartzComponentProps) {
const tags = fileData.frontmatter?.tags
const slug = fileData.slug!
const slug = canonicalizeServer(fileData.slug!)
const baseDir = pathToRoot(slug)
if (tags && tags.length > 0) {
return <ul class="tags">{tags.map(tag => {

6
quartz/components/pages/FolderContent.tsx
View file

@ -5,11 +5,11 @@ import path from "path"
import style from '../styles/listPage.scss'
import { PageList } from "../PageList"
import { toServerSlug } from "../../path"
import { canonicalizeServer } from "../../path"
function FolderContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props
const folderSlug = toServerSlug(fileData.slug!)
const folderSlug = canonicalizeServer(fileData.slug!)
const allPagesInFolder = allFiles.filter(file => {
const fileSlug = file.slug ?? ""
const prefixed = fileSlug.startsWith(folderSlug)
@ -23,7 +23,7 @@ function FolderContent(props: QuartzComponentProps) {
...props,
allFiles: allPagesInFolder
}
// @ts-ignore
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div class="popover-hint">

6
quartz/components/pages/TagContent.tsx
View file

@ -3,14 +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 { toServerSlug } from "../../path"
import { ServerSlug, canonicalizeServer } from "../../path"
function TagContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props
const slug = fileData.slug
if (slug?.startsWith("tags/")) {
const tag = toServerSlug(slug.slice("tags/".length))
const tag = canonicalizeServer(slug.slice("tags/".length) as ServerSlug)
const allPagesWithTag = allFiles.filter(file => (file.frontmatter?.tags ?? []).includes(tag))
const listProps = {
...props,
@ -27,7 +27,7 @@ function TagContent(props: QuartzComponentProps) {
</div>
</div>
} else {
throw `Component "TagContent" tried to render a non-tag page: ${slug}`
throw new Error(`Component "TagContent" tried to render a non-tag page: ${slug}`)
}
}

28
quartz/components/scripts/graph.inline.ts
View file

@ -1,7 +1,7 @@
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import * as d3 from 'd3'
import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
import { CanonicalSlug } from "../../path"
import { registerEscapeHandler, removeAllChildren } from "./util"
import { CanonicalSlug, getCanonicalSlug, getClientSlug, resolveRelative } from "../../path"
type NodeData = {
id: CanonicalSlug,
@ -25,7 +25,7 @@ function addToVisited(slug: CanonicalSlug) {
localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
}
async function renderGraph(container: string, slug: string) {
async function renderGraph(container: string, slug: CanonicalSlug) {
const visited = getVisited()
const graph = document.getElementById(container)
if (!graph) return
@ -50,18 +50,17 @@ async function renderGraph(container: string, slug: string) {
const outgoing = details.links ?? []
for (const dest of outgoing) {
if (src in data && dest in data) {
links.push({ source: src, target: dest })
links.push({ source: src as CanonicalSlug, target: dest })
}
}
}
const neighbourhood = new Set()
const wl = [slug, "__SENTINEL"]
const neighbourhood = new Set<CanonicalSlug>()
const wl: (CanonicalSlug | "__SENTINEL")[] = [slug, "__SENTINEL"]
if (depth >= 0) {
while (depth >= 0 && wl.length > 0) {
// compute neighbours
const cur = wl.shift()
const cur = wl.shift()!
if (cur === "__SENTINEL") {
depth--
wl.push("__SENTINEL")
@ -73,11 +72,11 @@ async function renderGraph(container: string, slug: string) {
}
}
} else {
Object.keys(data).forEach(id => neighbourhood.add(id))
Object.keys(data).forEach(id => neighbourhood.add(id as CanonicalSlug))
}
const graphData: { nodes: NodeData[], links: LinkData[] } = {
nodes: Object.keys(data).filter(id => neighbourhood.has(id)).map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
nodes: [...neighbourhood].map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
links: links.filter((l) => neighbourhood.has(l.source) && neighbourhood.has(l.target))
}
@ -168,12 +167,13 @@ async function renderGraph(container: string, slug: string) {
.attr("fill", color)
.style("cursor", "pointer")
.on("click", (_, d) => {
const targ = clientSideRelativePath(slug, d.id)
window.spaNavigate(new URL(targ))
const targ = resolveRelative(slug, d.id)
window.spaNavigate(new URL(targ, getClientSlug(window)))
})
.on("mouseover", function(_, d) {
const neighbours: string[] = data[slug].links ?? []
const neighbours: CanonicalSlug[] = data[slug].links ?? []
const neighbourNodes = d3.selectAll<HTMLElement, NodeData>(".node").filter((d) => neighbours.includes(d.id))
console.log(neighbourNodes)
const currentId = d.id
const linkNodes = d3
.selectAll(".link")
@ -273,7 +273,7 @@ async function renderGraph(container: string, slug: string) {
}
function renderGlobalGraph() {
const slug = document.body.dataset["slug"]!
const slug = getCanonicalSlug(window)
const container = document.getElementById("global-graph-outer")
const sidebar = container?.closest(".sidebar") as HTMLElement
container?.classList.add("active")

13
quartz/components/scripts/search.inline.ts
View file

@ -1,13 +1,14 @@
import { Document } from "flexsearch"
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
import { CanonicalSlug } from "../../path"
import { registerEscapeHandler, removeAllChildren } from "./util"
import { CanonicalSlug, getClientSlug, resolveRelative } from "../../path"
interface Item {
slug: CanonicalSlug,
title: string,
content: string,
}
let index: Document<Item> | undefined = undefined
const contextWindowWords = 30
@ -113,8 +114,8 @@ document.addEventListener("nav", async (e: unknown) => {
button.id = slug
button.innerHTML = `<h3>${title}</h3><p>${content}</p>`
button.addEventListener('click', () => {
const targ = clientSideRelativePath(currentSlug, slug)
window.spaNavigate(new URL(targ))
const targ = resolveRelative(currentSlug, slug)
window.spaNavigate(new URL(targ, getClientSlug(window)))
})
return button
}
@ -137,9 +138,9 @@ document.addEventListener("nav", async (e: unknown) => {
function onType(e: HTMLElementEventMap["input"]) {
const term = (e.target as HTMLInputElement).value
const searchResults = index?.search(term, numSearchResults) ?? []
const getByField = (field: string): string[] => {
const getByField = (field: string): CanonicalSlug[] => {
const results = searchResults.filter((x) => x.field === field)
return results.length === 0 ? [] : [...results[0].result] as string[]
return results.length === 0 ? [] : [...results[0].result] as CanonicalSlug[]
}
// order titles ahead of content

7
quartz/components/scripts/spa.inline.ts
View file

@ -1,5 +1,5 @@
import micromorph from "micromorph"
import { CanonicalSlug, RelativeURL } from "../../path"
import { CanonicalSlug, RelativeURL, getCanonicalSlug } from "../../path"
// adapted from `micromorph`
// https://github.com/natemoo-re/micromorph
@ -43,6 +43,7 @@ async function navigate(url: URL, isBack: boolean = false) {
.catch(() => {
window.location.assign(url)
})
if (!contents) return;
if (!isBack) {
history.pushState({}, "", url)
@ -70,7 +71,7 @@ async function navigate(url: URL, isBack: boolean = false) {
const elementsToAdd = html.head.querySelectorAll(':not([spa-preserve])')
elementsToAdd.forEach(el => document.head.appendChild(el))
notifyNav(document.body.dataset.slug!)
notifyNav(getCanonicalSlug(window))
delete announcer.dataset.persist
}
@ -117,7 +118,7 @@ function createRouter() {
}
createRouter()
notifyNav(document.body.dataset.slug!)
notifyNav(getCanonicalSlug(window))
if (!customElements.get('route-announcer')) {
const attrs = {