starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-24 23:04:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge of Insiders features tied to 'Aji Panca' funding goal

Browse Source
This commit is contained in:
squidfunk
2022-02-17 17:20:36 +01:00
parent 90137011e9
commit b5e71dfcb1
57 changed files with 1670 additions and 13500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/javascripts/browser/index.ts
View File

@@ -26,6 +26,7 @@ export * from "./keyboard"
export * from "./location"
export * from "./media"
export * from "./request"
export * from "./script"
export * from "./toggle"
export * from "./viewport"
export * from "./worker"

70
src/assets/javascripts/browser/script/index.ts Normal file
View File

@@ -0,0 +1,70 @@
/*
* Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {
Observable,
defer,
finalize,
fromEvent,
mapTo,
merge,
switchMap,
take,
throwError
} from "rxjs"
import { h } from "~/utilities"
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Create and load a `script` element
*
* This function returns an observable that will emit when the script was
* successfully loaded, or throw an error if it didn't.
*
* @param src - Script URL
*
* @returns Script observable
*/
export function watchScript(src: string): Observable<void> {
const script = h("script", { src })
return defer(() => {
document.head.appendChild(script)
return merge(
fromEvent(script, "load"),
fromEvent(script, "error")
.pipe(
switchMap(() => (
throwError(() => new ReferenceError(`Invalid script: ${src}`))
))
)
)
.pipe(
mapTo(undefined),
finalize(() => document.head.removeChild(script)),
take(1)
)
})
}

29
src/assets/javascripts/components/content/_/index.ts
View File

@@ -26,10 +26,24 @@ import { getElements } from "~/browser"
import { Component } from "../../_"
import { Annotation } from "../annotation"
import { CodeBlock, mountCodeBlock } from "../code"
import { Details, mountDetails } from "../details"
import { DataTable, mountDataTable } from "../table"
import { ContentTabs, mountContentTabs } from "../tabs"
import {
CodeBlock,
Mermaid,
mountCodeBlock,
mountMermaid
} from "../code"
import {
Details,
mountDetails
} from "../details"
import {
DataTable,
mountDataTable
} from "../table"
import {
ContentTabs,
mountContentTabs
} from "../tabs"
/* ----------------------------------------------------------------------------
* Types
@@ -42,6 +56,7 @@ export type Content =
| Annotation
| ContentTabs
| CodeBlock
| Mermaid
| DataTable
| Details
@@ -78,9 +93,13 @@ export function mountContent(
return merge(
/* Code blocks */
...getElements("pre > code", el)
...getElements("pre:not(.mermaid) > code", el)
.map(child => mountCodeBlock(child, { print$ })),
/* Mermaid diagrams */
...getElements("pre.mermaid", el)
.map(child => mountMermaid(child)),
/* Data tables */
...getElements("table:not([class])", el)
.map(child => mountDataTable(child)),

216
src/assets/javascripts/components/content/code/_/index.ts Normal file
View File

@@ -0,0 +1,216 @@
/*
* Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import ClipboardJS from "clipboard"
import {
EMPTY,
Observable,
Subject,
defer,
distinctUntilChanged,
distinctUntilKeyChanged,
finalize,
map,
mergeWith,
switchMap,
takeLast,
takeUntil,
tap
} from "rxjs"
import { feature } from "~/_"
import {
getElementContentSize,
watchElementSize
} from "~/browser"
import { renderClipboardButton } from "~/templates"
import { Component } from "../../../_"
import {
Annotation,
mountAnnotationList
} from "../../annotation"
/* ----------------------------------------------------------------------------
* Types
* ------------------------------------------------------------------------- */
/**
* Code block
*/
export interface CodeBlock {
scrollable: boolean /* Code block overflows */
}
/* ----------------------------------------------------------------------------
* Helper types
* ------------------------------------------------------------------------- */
/**
* Mount options
*/
interface MountOptions {
print$: Observable<boolean> /* Media print observable */
}
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* Global sequence number for Clipboard.js integration
*/
let sequence = 0
/* ----------------------------------------------------------------------------
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Find candidate list element directly following a code block
*
* @param el - Code block element
*
* @returns List element or nothing
*/
function findCandidateList(el: HTMLElement): HTMLElement | undefined {
if (el.nextElementSibling) {
const sibling = el.nextElementSibling as HTMLElement
if (sibling.tagName === "OL")
return sibling
/* Skip empty paragraphs - see https://bit.ly/3r4ZJ2O */
else if (sibling.tagName === "P" && !sibling.children.length)
return findCandidateList(sibling)
}
/* Everything else */
return undefined
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Watch code block
*
* This function monitors size changes of the viewport, as well as switches of
* content tabs with embedded code blocks, as both may trigger overflow.
*
* @param el - Code block element
*
* @returns Code block observable
*/
export function watchCodeBlock(
el: HTMLElement
): Observable<CodeBlock> {
return watchElementSize(el)
.pipe(
map(({ width }) => {
const content = getElementContentSize(el)
return {
scrollable: content.width > width
}
}),
distinctUntilKeyChanged("scrollable")
)
}
/**
* Mount code block
*
* This function ensures that an overflowing code block is focusable through
* keyboard, so it can be scrolled without a mouse to improve on accessibility.
* Furthermore, if code annotations are enabled, they are mounted if and only
* if the code block is currently visible, e.g., not in a hidden content tab.
*
* @param el - Code block element
* @param options - Options
*
* @returns Code block and annotation component observable
*/
export function mountCodeBlock(
el: HTMLElement, options: MountOptions
): Observable<Component<CodeBlock | Annotation>> {
const { matches: hover } = matchMedia("(hover)")
return defer(() => {
const push$ = new Subject<CodeBlock>()
push$.subscribe(({ scrollable }) => {
if (scrollable && hover)
el.setAttribute("tabindex", "0")
else
el.removeAttribute("tabindex")
})
/* Render button for Clipboard.js integration */
if (ClipboardJS.isSupported()) {
const parent = el.closest("pre")!
parent.id = `__code_${++sequence}`
parent.insertBefore(
renderClipboardButton(parent.id),
el
)
}
/* Handle code annotations */
const container = el.closest([
":not(td):not(.code) > .highlight",
".highlighttable"
].join(", "))
if (container instanceof HTMLElement) {
const list = findCandidateList(container)
/* Mount code annotations, if enabled */
if (typeof list !== "undefined" && (
container.classList.contains("annotate") ||
feature("content.code.annotate")
)) {
const annotations$ = mountAnnotationList(list, el, options)
/* Create and return component */
return watchCodeBlock(el)
.pipe(
tap(state => push$.next(state)),
finalize(() => push$.complete()),
map(state => ({ ref: el, ...state })),
mergeWith(watchElementSize(container)
.pipe(
takeUntil(push$.pipe(takeLast(1))),
map(({ width, height }) => width && height),
distinctUntilChanged(),
switchMap(active => active ? annotations$ : EMPTY)
)
)
)
}
}
/* Create and return component */
return watchCodeBlock(el)
.pipe(
tap(state => push$.next(state)),
finalize(() => push$.complete()),
map(state => ({ ref: el, ...state }))
)
})
}

196
src/assets/javascripts/components/content/code/index.ts
View File

@@ -20,197 +20,5 @@
* IN THE SOFTWARE.
*/
import ClipboardJS from "clipboard"
import {
EMPTY,
Observable,
Subject,
defer,
distinctUntilChanged,
distinctUntilKeyChanged,
finalize,
map,
mergeWith,
switchMap,
takeLast,
takeUntil,
tap
} from "rxjs"
import { feature } from "~/_"
import {
getElementContentSize,
watchElementSize
} from "~/browser"
import { renderClipboardButton } from "~/templates"
import { Component } from "../../_"
import {
Annotation,
mountAnnotationList
} from "../annotation"
/* ----------------------------------------------------------------------------
* Types
* ------------------------------------------------------------------------- */
/**
* Code block
*/
export interface CodeBlock {
scrollable: boolean /* Code block overflows */
}
/* ----------------------------------------------------------------------------
* Helper types
* ------------------------------------------------------------------------- */
/**
* Mount options
*/
interface MountOptions {
print$: Observable<boolean> /* Media print observable */
}
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* Global sequence number for Clipboard.js integration
*/
let sequence = 0
/* ----------------------------------------------------------------------------
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Find candidate list element directly following a code block
*
* @param el - Code block element
*
* @returns List element or nothing
*/
function findCandidateList(el: HTMLElement): HTMLElement | undefined {
if (el.nextElementSibling) {
const sibling = el.nextElementSibling as HTMLElement
if (sibling.tagName === "OL")
return sibling
/* Skip empty paragraphs - see https://bit.ly/3r4ZJ2O */
else if (sibling.tagName === "P" && !sibling.children.length)
return findCandidateList(sibling)
}
/* Everything else */
return undefined
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Watch code block
*
* This function monitors size changes of the viewport, as well as switches of
* content tabs with embedded code blocks, as both may trigger overflow.
*
* @param el - Code block element
*
* @returns Code block observable
*/
export function watchCodeBlock(
el: HTMLElement
): Observable<CodeBlock> {
return watchElementSize(el)
.pipe(
map(({ width }) => {
const content = getElementContentSize(el)
return {
scrollable: content.width > width
}
}),
distinctUntilKeyChanged("scrollable")
)
}
/**
* Mount code block
*
* This function ensures that an overflowing code block is focusable through
* keyboard, so it can be scrolled without a mouse to improve on accessibility.
* Furthermore, if code annotations are enabled, they are mounted if and only
* if the code block is currently visible, e.g., not in a hidden content tab.
*
* @param el - Code block element
* @param options - Options
*
* @returns Code block and annotation component observable
*/
export function mountCodeBlock(
el: HTMLElement, options: MountOptions
): Observable<Component<CodeBlock | Annotation>> {
const { matches: hover } = matchMedia("(hover)")
return defer(() => {
const push$ = new Subject<CodeBlock>()
push$.subscribe(({ scrollable }) => {
if (scrollable && hover)
el.setAttribute("tabindex", "0")
else
el.removeAttribute("tabindex")
})
/* Render button for Clipboard.js integration */
if (ClipboardJS.isSupported()) {
const parent = el.closest("pre")!
parent.id = `__code_${++sequence}`
parent.insertBefore(
renderClipboardButton(parent.id),
el
)
}
/* Handle code annotations */
const container = el.closest([
":not(td):not(.code) > .highlight",
".highlighttable"
].join(", "))
if (container instanceof HTMLElement) {
const list = findCandidateList(container)
/* Mount code annotations, if enabled */
if (typeof list !== "undefined" && (
container.classList.contains("annotate") ||
feature("content.code.annotate")
)) {
const annotations$ = mountAnnotationList(list, el, options)
/* Create and return component */
return watchCodeBlock(el)
.pipe(
tap(state => push$.next(state)),
finalize(() => push$.complete()),
map(state => ({ ref: el, ...state })),
mergeWith(watchElementSize(container)
.pipe(
takeUntil(push$.pipe(takeLast(1))),
map(({ width, height }) => width && height),
distinctUntilChanged(),
switchMap(active => active ? annotations$ : EMPTY)
)
)
)
}
}
/* Create and return component */
return watchCodeBlock(el)
.pipe(
tap(state => push$.next(state)),
finalize(() => push$.complete()),
map(state => ({ ref: el, ...state }))
)
})
}
export * from "./_"
export * from "./mermaid"

350
src/assets/javascripts/components/content/code/mermaid/index.css Normal file
View File

@@ -0,0 +1,350 @@
/*
* Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
/* ----------------------------------------------------------------------------
* Rules: general
* ------------------------------------------------------------------------- */
/* General node */
.node circle,
.node ellipse,
.node path,
.node polygon,
.node rect {
fill: var(--md-mermaid-node-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* General marker */
marker {
fill: var(--md-mermaid-edge-color) !important;
}
/* General edge label */
.edgeLabel .label rect {
fill: transparent;
}
/* ----------------------------------------------------------------------------
* Rules: flowcharts
* ------------------------------------------------------------------------- */
/* Flowchart node label */
.label {
color: var(--md-mermaid-label-fg-color);
font-family: var(--md-mermaid-font-family);
}
/* Flowchart node label container */
.label foreignObject {
overflow: visible;
line-height: initial;
}
/* Flowchart edge label in node label */
.label div .edgeLabel {
color: var(--md-mermaid-label-fg-color);
background-color: var(--md-mermaid-label-bg-color);
}
/* Flowchart edge label */
.edgeLabel,
.edgeLabel rect {
color: var(--md-mermaid-edge-color);
background-color: var(--md-mermaid-label-bg-color);
fill: var(--md-mermaid-label-bg-color);
}
/* Flowchart edge path */
.edgePath .path,
.flowchart-link {
stroke: var(--md-mermaid-edge-color);
}
/* Flowchart arrow head */
.edgePath .arrowheadPath {
fill: var(--md-mermaid-edge-color);
stroke: none;
}
/* Flowchart subgraph */
.cluster rect {
fill: var(--md-default-fg-color--lightest);
stroke: var(--md-default-fg-color--lighter);
}
/* ----------------------------------------------------------------------------
* Rules: class diagrams
* ------------------------------------------------------------------------- */
/* Class group node */
g.classGroup line,
g.classGroup rect {
fill: var(--md-mermaid-node-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* Class group node text */
g.classGroup text {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-label-fg-color);
}
/* Class label box */
.classLabel .box {
background-color: var(--md-mermaid-label-bg-color);
opacity: 1;
fill: var(--md-mermaid-label-bg-color);
}
/* Class label text */
.classLabel .label {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-label-fg-color);
}
/* Class group divider */
.node .divider {
stroke: var(--md-mermaid-node-fg-color);
}
/* Class relation */
.relation {
stroke: var(--md-mermaid-edge-color);
}
/* Class relation cardinality */
.cardinality {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-label-fg-color);
}
/* Class relation cardinality text */
.cardinality text {
fill: inherit !important;
}
/* Class extension, composition and dependency marker */
#extensionStart,
#extensionEnd,
#compositionStart,
#compositionEnd,
#dependencyStart,
#dependencyEnd {
fill: var(--md-mermaid-edge-color) !important;
stroke: var(--md-mermaid-edge-color) !important;
}
/* Class aggregation marker */
#aggregationStart,
#aggregationEnd {
fill: var(--md-mermaid-label-bg-color) !important;
stroke: var(--md-mermaid-edge-color) !important;
}
/* ----------------------------------------------------------------------------
* Rules: state diagrams
* ------------------------------------------------------------------------- */
/* State group node */
g.stateGroup rect {
fill: var(--md-mermaid-node-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* State group title */
g.stateGroup .state-title {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-label-fg-color) !important;
}
/* State group background */
g.stateGroup .composit {
fill: var(--md-mermaid-label-bg-color);
}
/* State node label */
.nodeLabel {
color: var(--md-mermaid-label-fg-color);
font-family: var(--md-mermaid-font-family);
}
/* State start and end marker */
.start-state,
.node circle.state-start,
.node circle.state-end {
fill: var(--md-mermaid-edge-color);
stroke: none;
}
/* State end marker */
.end-state-outer,
.end-state-inner {
fill: var(--md-mermaid-edge-color);
}
/* State end marker */
.end-state-inner,
.node circle.state-end {
stroke: var(--md-mermaid-label-bg-color);
}
/* State transition */
.transition {
stroke: var(--md-mermaid-edge-color);
}
/* State fork and join */
[id^=state-fork] rect,
[id^=state-join] rect {
fill: var(--md-mermaid-edge-color) !important;
stroke: none !important;
}
/* State cluster (yes, 2x... Mermaid WTF) */
.statediagram-cluster.statediagram-cluster .inner {
fill: var(--md-default-bg-color);
}
/* State cluster node */
.statediagram-cluster rect {
fill: var(--md-mermaid-node-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* State cluster divider */
.statediagram-state rect.divider {
fill: var(--md-default-fg-color--lightest);
stroke: var(--md-default-fg-color--lighter);
}
/* ----------------------------------------------------------------------------
* Rules: entity-relationship diagrams
* ------------------------------------------------------------------------- */
/* Entity node */
.entityBox {
fill: var(--md-mermaid-label-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* Entity node label */
.entityLabel {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-label-fg-color);
}
/* Entity relationship label container */
.relationshipLabelBox {
background-color: var(--md-mermaid-label-bg-color);
opacity: 1;
fill: var(--md-mermaid-label-bg-color);
fill-opacity: 1;
}
/* Entity relationship label */
.relationshipLabel {
fill: var(--md-mermaid-label-fg-color);
}
/* Entity relationship line { */
.relationshipLine {
stroke: var(--md-mermaid-edge-color);
}
/* Entity relationship line markers */
#ZERO_OR_ONE_START *,
#ZERO_OR_ONE_END *,
#ZERO_OR_MORE_START *,
#ZERO_OR_MORE_END *,
#ONLY_ONE_START *,
#ONLY_ONE_END *,
#ONE_OR_MORE_START *,
#ONE_OR_MORE_END * {
stroke: var(--md-mermaid-edge-color) !important;
}
/* Entity relationship line markers */
#ZERO_OR_MORE_START circle,
#ZERO_OR_MORE_END circle {
fill: var(--md-mermaid-label-bg-color);
}
/* ----------------------------------------------------------------------------
* Rules: sequence diagrams
* ------------------------------------------------------------------------- */
/* Sequence actor */
.actor {
fill: var(--md-mermaid-label-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* Sequence actor text */
text.actor > tspan {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-label-fg-color);
}
/* Sequence actor line */
line {
stroke: var(--md-default-fg-color--lighter);
}
/* Sequence message line */
.messageLine0,
.messageLine1 {
stroke: var(--md-mermaid-edge-color);
}
/* Sequence message and loop text */
.messageText,
.loopText > tspan {
font-family: var(--md-mermaid-font-family) !important;
fill: var(--md-mermaid-edge-color);
stroke: none;
}
/* Sequence arrow head */
#arrowhead path {
fill: var(--md-mermaid-edge-color);
stroke: none;
}
/* Sequence loop line */
.loopLine {
fill: var(--md-mermaid-node-bg-color);
stroke: var(--md-mermaid-node-fg-color);
}
/* Sequence label box */
.labelBox {
fill: var(--md-mermaid-node-bg-color);
stroke: none;
}
/* Sequence label text */
.labelText,
.labelText > span {
font-family: var(--md-mermaid-font-family);
fill: var(--md-mermaid-node-fg-color);
}

122
src/assets/javascripts/components/content/code/mermaid/index.ts Normal file
View File

@@ -0,0 +1,122 @@
/*
* Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {
Observable,
mapTo,
of,
shareReplay,
tap
} from "rxjs"
import { watchScript } from "~/browser"
import { h } from "~/utilities"
import { Component } from "../../../_"
import themeCSS from "./index.css"
/* ----------------------------------------------------------------------------
* Types
* ------------------------------------------------------------------------- */
/**
* Mermaid diagram
*/
export interface Mermaid {}
/* ----------------------------------------------------------------------------
* Data
* ------------------------------------------------------------------------- */
/**
* Mermaid instance observable
*/
let mermaid$: Observable<void>
/**
* Global index for Mermaid integration
*/
let index = 0
/* ----------------------------------------------------------------------------
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Fetch Mermaid script
*
* @returns Mermaid scripts observable
*/
function fetchScripts(): Observable<void> {
return typeof mermaid === "undefined"
? watchScript("https://unpkg.com/mermaid@8.13.3/dist/mermaid.min.js")
: of(undefined)
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Mount Mermaid diagram
*
* @param el - Code block element
*
* @returns Mermaid diagram component observable
*/
export function mountMermaid(
el: HTMLElement
): Observable<Component<Mermaid>> {
el.classList.remove("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
mermaid$ ||= fetchScripts()
.pipe(
tap(() => mermaid.initialize({
startOnLoad: false,
themeCSS
})),
mapTo(undefined),
shareReplay(1)
)
/* Render diagram */
mermaid$.subscribe(() => {
el.classList.add("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
const id = `__mermaid_${index++}`
const host = h("div", { class: "mermaid" })
mermaid.mermaidAPI.render(id, el.textContent, (svg: string) => {
/* Create a shadow root and inject diagram */
const shadow = host.attachShadow({ mode: "closed" })
shadow.innerHTML = svg
/* Replace code block with diagram */
el.replaceWith(host)
})
})
/* Create and return component */
return mermaid$
.pipe(
mapTo({ ref: el })
)
}

1
src/assets/javascripts/integrations/index.ts
View File

@@ -23,4 +23,5 @@
export * from "./clipboard"
export * from "./instant"
export * from "./search"
export * from "./sitemap"
export * from "./version"

49
src/assets/javascripts/integrations/instant/index.ts
View File

@@ -50,13 +50,14 @@ import {
getElements,
getOptionalElement,
request,
requestXML,
setLocation,
setLocationHash
} from "~/browser"
import { getComponentElement } from "~/components"
import { h } from "~/utilities"
import { fetchSitemap } from "../sitemap"
/* ----------------------------------------------------------------------------
* Types
* ------------------------------------------------------------------------- */
@@ -82,44 +83,6 @@ interface SetupOptions {
viewport$: Observable<Viewport> /* Viewport observable */
}
/* ----------------------------------------------------------------------------
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Preprocess a list of URLs
*
* This function replaces the `site_url` in the sitemap with the actual base
* URL, to allow instant loading to work in occasions like Netlify previews.
*
* @param urls - URLs
*
* @returns Processed URLs
*/
function preprocess(urls: string[]): string[] {
if (urls.length < 2)
return urls
/* Take the first two URLs and remove everything after the last slash */
const [root, next] = urls
.sort((a, b) => a.length - b.length)
.map(url => url.replace(/[^/]+$/, ""))
/* Compute common prefix */
let index = 0
if (root === next)
index = root.length
else
while (root.charCodeAt(index) === next.charCodeAt(index))
index++
/* Replace common prefix (i.e. base) with effective base */
const config = configuration()
return urls.map(url => (
url.replace(root.slice(0, index), config.base)
))
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
@@ -169,17 +132,13 @@ export function setupInstantLoading(
favicon.href = favicon.href
/* Intercept internal navigation */
const push$ = requestXML(new URL("sitemap.xml", config.base))
const push$ = fetchSitemap()
.pipe(
map(sitemap => preprocess(getElements("loc", sitemap)
.map(node => node.textContent!)
)),
map(paths => paths.map(path => `${new URL(path, config.base)}`)),
switchMap(urls => fromEvent<MouseEvent>(document.body, "click")
.pipe(
filter(ev => !ev.metaKey && !ev.ctrlKey),
switchMap(ev => {
/* Handle HTML and SVG elements */
if (ev.target instanceof Element) {
const el = ev.target.closest("a")
if (el && !el.target) {

5
src/assets/javascripts/integrations/search/_/index.ts
View File

@@ -55,6 +55,7 @@ export interface SearchIndexDocument {
location: string /* Document location */
title: string /* Document title */
text: string /* Document text */
tags?: string[] /* Document tags */
}
/* ------------------------------------------------------------------------- */
@@ -202,6 +203,7 @@ export class Search {
/* Set up fields */
this.field("title", { boost: 1e3 })
this.field("text")
this.field("tags", { boost: 1e6 })
/* Index documents */
for (const doc of docs)
@@ -243,7 +245,7 @@ export class Search {
.reduce<SearchResultItem>((item, { ref, score, matchData }) => {
const document = this.documents.get(ref)
if (typeof document !== "undefined") {
const { location, title, text, parent } = document
const { location, title, text, tags, parent } = document
/* Compute and analyze search query terms */
const terms = getSearchQueryTerms(
@@ -257,6 +259,7 @@ export class Search {
location,
title: highlight(title),
text: highlight(text),
...tags && { tags: tags.map(highlight) },
score: score * (1 + boost),
terms
})

6
src/assets/javascripts/integrations/search/document/index.ts
View File

@@ -61,9 +61,10 @@ export function setupSearchDocumentMap(
for (const doc of docs) {
const [path, hash] = doc.location.split("#")
/* Extract location and title */
/* Extract location, title and tags */
const location = doc.location
const title = doc.title
const tags = doc.tags
/* Escape and cleanup text */
const text = escapeHTML(doc.text)
@@ -97,7 +98,8 @@ export function setupSearchDocumentMap(
documents.set(location, {
location,
title,
text
text,
...tags && { tags }
})
}
}

104
src/assets/javascripts/integrations/sitemap/index.ts Normal file
View File

@@ -0,0 +1,104 @@
/*
* Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {
Observable,
defaultIfEmpty,
map,
of,
tap
} from "rxjs"
import { configuration } from "~/_"
import { getElements, requestXML } from "~/browser"
/* ----------------------------------------------------------------------------
* Types
* ------------------------------------------------------------------------- */
/**
* Sitemap, i.e. a list of URLs
*/
export type Sitemap = string[]
/* ----------------------------------------------------------------------------
* Helper functions
* ------------------------------------------------------------------------- */
/**
* Preprocess a list of URLs
*
* This function replaces the `site_url` in the sitemap with the actual base
* URL, to allow instant loading to work in occasions like Netlify previews.
*
* @param urls - URLs
*
* @returns URL path parts
*/
function preprocess(urls: Sitemap): Sitemap {
if (urls.length < 2)
return [""]
/* Take the first two URLs and remove everything after the last slash */
const [root, next] = [...urls]
.sort((a, b) => a.length - b.length)
.map(url => url.replace(/[^/]+$/, ""))
/* Compute common prefix */
let index = 0
if (root === next)
index = root.length
else
while (root.charCodeAt(index) === next.charCodeAt(index))
index++
/* Remove common prefix and return in original order */
return urls.map(url => url.replace(root.slice(0, index), ""))
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
/**
* Fetch the sitemap for the given base URL
*
* @param base - Base URL
*
* @returns Sitemap observable
*/
export function fetchSitemap(base?: URL): Observable<Sitemap> {
const cached = __md_get<Sitemap>("__sitemap", sessionStorage, base)
if (cached) {
return of(cached)
} else {
const config = configuration()
return requestXML(new URL("sitemap.xml", base || config.base))
.pipe(
map(sitemap => preprocess(getElements("loc", sitemap)
.map(node => node.textContent!)
)),
defaultIfEmpty([]),
tap(sitemap => __md_set("__sitemap", sitemap, sessionStorage, base))
)
}
}

57
src/assets/javascripts/integrations/version/index.ts
View File

@@ -20,12 +20,22 @@
* IN THE SOFTWARE.
*/
import { combineLatest, map } from "rxjs"
import {
EMPTY,
combineLatest,
filter,
fromEvent,
map,
of,
switchMap
} from "rxjs"
import { configuration } from "~/_"
import {
getElement,
requestJSON
getLocation,
requestJSON,
setLocation
} from "~/browser"
import { getComponentElements } from "~/components"
import {
@@ -33,6 +43,8 @@ import {
renderVersionSelector
} from "~/templates"
import { fetchSitemap } from "../sitemap"
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
@@ -57,6 +69,47 @@ export function setupVersionSelector(): void {
})
)
/* Intercept inter-version navigation */
combineLatest([versions$, current$])
.pipe(
map(([versions, current]) => new Map(versions
.filter(version => version !== current)
.map(version => [
`${new URL(`../${version.version}/`, config.base)}`,
version
])
)),
switchMap(urls => fromEvent<MouseEvent>(document.body, "click")
.pipe(
filter(ev => !ev.metaKey && !ev.ctrlKey),
switchMap(ev => {
if (ev.target instanceof Element) {
const el = ev.target.closest("a")
if (el && !el.target && urls.has(el.href)) {
ev.preventDefault()
return of(el.href)
}
}
return EMPTY
}),
switchMap(url => {
const { version } = urls.get(url)!
return fetchSitemap(new URL(url))
.pipe(
map(sitemap => {
const location = getLocation()
const path = location.href.replace(config.base, "")
return sitemap.includes(path)
? new URL(`../${version}/${path}`, config.base)
: new URL(url)
})
)
})
)
)
)
.subscribe(url => setLocation(url))
/* Render version selector and warning */
combineLatest([versions$, current$])
.subscribe(([versions, current]) => {

3
src/assets/javascripts/templates/search/index.tsx
View File

@@ -93,6 +93,9 @@ function renderSearchDocument(
{truncate(document.text, 320)}
</p>
}
{document.tags && document.tags.map(tag => (
<span class="md-tag">{tag}</span>
))}
{teaser > 0 && missing.length > 0 &&
<p class="md-search-result__terms">
{translation("search.result.term.missing")}: {...missing}