mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2026-07-22 13:53:43 -04:00
Merge of Insiders features tied to 'Aji Panca' funding goal
This commit is contained in:
squidfunk
216
src/assets/javascripts/components/content/code/_/index.ts
Normal file
216
src/assets/javascripts/components/content/code/_/index.ts
Normal 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 }))
|
||||
)
|
||||
})
|
||||
}
|
||||
@@ -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
350
src/assets/javascripts/components/content/code/mermaid/index.css
Normal 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
122
src/assets/javascripts/components/content/code/mermaid/index.ts
Normal 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 })
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user