* @version 0.0.1
* @license MIT
*/
'use strict';
/** Generate a terminal widget. */
class Termynal {
/**
* Construct the widget's settings.
* @param {(string|Node)=} container - Query selector or container element.
* @param {Object=} options - Custom settings.
* @param {string} options.prefix - Prefix to use for data attributes.
* @param {number} options.startDelay - Delay before animation, in ms.
* @param {number} options.typeDelay - Delay between each typed character, in ms.
* @param {number} options.lineDelay - Delay between each line, in ms.
* @param {number} options.progressLength - Number of characters displayed as progress bar.
* @param {string} options.progressChar – Character to use for progress bar, defaults to █.
* @param {number} options.progressPercent - Max percent of progress.
* @param {string} options.cursor – Character to use for cursor, defaults to ▋.
* @param {Object[]} lineData - Dynamically loaded line data objects.
* @param {boolean} options.noInit - Don't initialise the animation.
*/
constructor(container = '#termynal', options = {}) {
this.container = (typeof container === 'string') ? document.querySelector(container) : container;
this.pfx = `data-${options.prefix || 'ty'}`;
this.originalStartDelay = this.startDelay = options.startDelay
|| parseFloat(this.container.getAttribute(`${this.pfx}-startDelay`)) || 600;
this.originalTypeDelay = this.typeDelay = options.typeDelay
|| parseFloat(this.container.getAttribute(`${this.pfx}-typeDelay`)) || 90;
this.originalLineDelay = this.lineDelay = options.lineDelay
|| parseFloat(this.container.getAttribute(`${this.pfx}-lineDelay`)) || 1500;
this.progressLength = options.progressLength
|| parseFloat(this.container.getAttribute(`${this.pfx}-progressLength`)) || 40;
this.progressChar = options.progressChar
|| this.container.getAttribute(`${this.pfx}-progressChar`) || '█';
this.progressPercent = options.progressPercent
|| parseFloat(this.container.getAttribute(`${this.pfx}-progressPercent`)) || 100;
this.cursor = options.cursor
|| this.container.getAttribute(`${this.pfx}-cursor`) || '▋';
this.lineData = this.lineDataToElements(options.lineData || []);
this.loadLines()
if (!options.noInit) this.init()
}
loadLines() {
// Load all the lines and create the container so that the size is fixed
// Otherwise it would be changing and the user viewport would be constantly
// moving as she/he scrolls
const finish = this.generateFinish()
finish.style.visibility = 'hidden'
this.container.appendChild(finish)
// Appends dynamically loaded lines to existing line elements.
this.lines = [...this.container.querySelectorAll(`[${this.pfx}]`)].concat(this.lineData);
for (let line of this.lines) {
line.style.visibility = 'hidden'
this.container.appendChild(line)
}
const restart = this.generateRestart()
restart.style.visibility = 'hidden'
this.container.appendChild(restart)
this.container.setAttribute('data-termynal', '');
}
/**
* Initialise the widget, get lines, clear container and start animation.
*/
init() {
/**
* Calculates width and height of Termynal container.
* If container is empty and lines are dynamically loaded, defaults to browser `auto` or CSS.
*/
const containerStyle = getComputedStyle(this.container);
this.container.style.width = containerStyle.width !== '0px' ?
containerStyle.width : undefined;
this.container.style.minHeight = containerStyle.height !== '0px' ?
containerStyle.height : undefined;
this.container.setAttribute('data-termynal', '');
this.container.innerHTML = '';
for (let line of this.lines) {
line.style.visibility = 'visible'
}
this.start();
}
/**
* Start the animation and rener the lines depending on their data attributes.
*/
async start() {
this.addFinish()
await this._wait(this.startDelay);
for (let line of this.lines) {
const type = line.getAttribute(this.pfx);
const delay = line.getAttribute(`${this.pfx}-delay`) || this.lineDelay;
if (type == 'input') {
line.setAttribute(`${this.pfx}-cursor`, this.cursor);
await this.type(line);
await this._wait(delay);
}
else if (type == 'progress') {
await this.progress(line);
await this._wait(delay);
}
else {
this.container.appendChild(line);
await this._wait(delay);
}
line.removeAttribute(`${this.pfx}-cursor`);
}
this.addRestart()
this.finishElement.style.visibility = 'hidden'
this.lineDelay = this.originalLineDelay
this.typeDelay = this.originalTypeDelay
this.startDelay = this.originalStartDelay
}
generateRestart() {
const restart = document.createElement('a')
restart.onclick = (e) => {
e.preventDefault()
this.container.innerHTML = ''
this.init()
}
restart.href = '#'
restart.setAttribute('data-terminal-control', '')
restart.innerHTML = "restart ↻"
return restart
}
generateFinish() {
const finish = document.createElement('a')
finish.onclick = (e) => {
e.preventDefault()
this.lineDelay = 0
this.typeDelay = 0
this.startDelay = 0
}
finish.href = '#'
finish.setAttribute('data-terminal-control', '')
finish.innerHTML = "fast →"
this.finishElement = finish
return finish
}
addRestart() {
const restart = this.generateRestart()
this.container.appendChild(restart)
}
addFinish() {
const finish = this.generateFinish()
this.container.appendChild(finish)
}
/**
* Animate a typed line.
* @param {Node} line - The line element to render.
*/
async type(line) {
const chars = [...line.textContent];
line.textContent = '';
this.container.appendChild(line);
for (let char of chars) {
const delay = line.getAttribute(`${this.pfx}-typeDelay`) || this.typeDelay;
await this._wait(delay);
line.textContent += char;
}
}
/**
* Animate a progress bar.
* @param {Node} line - The line element to render.
*/
async progress(line) {
const progressLength = line.getAttribute(`${this.pfx}-progressLength`)
|| this.progressLength;
const progressChar = line.getAttribute(`${this.pfx}-progressChar`)
|| this.progressChar;
const chars = progressChar.repeat(progressLength);
const progressPercent = line.getAttribute(`${this.pfx}-progressPercent`)
|| this.progressPercent;
line.textContent = '';
this.container.appendChild(line);
for (let i = 1; i < chars.length + 1; i++) {
await this._wait(this.typeDelay);
const percent = Math.round(i / chars.length * 100);
line.textContent = `${chars.slice(0, i)} ${percent}%`;
if (percent > progressPercent) {
break;
}
}
}
/**
* Helper function for animation delays, called with `await`.
* @param {number} time - Timeout, in ms.
*/
_wait(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
/**
* Converts line data objects into line elements.
*
* @param {Object[]} lineData - Dynamically loaded lines.
* @param {Object} line - Line data object.
* @returns {Element[]} - Array of line elements.
*/
lineDataToElements(lineData) {
return lineData.map(line => {
let div = document.createElement('div');
div.innerHTML = `${line.value || ''} `;
return div.firstElementChild;
});
}
/**
* Helper function for generating attributes string.
*
* @param {Object} line - Line data object.
* @returns {string} - String of attributes.
*/
_attributes(line) {
let attrs = '';
for (let prop in line) {
// Custom add class
if (prop === 'class') {
attrs += ` class=${line[prop]} `
continue
}
if (prop === 'type') {
attrs += `${this.pfx}="${line[prop]}" `
} else if (prop !== 'value') {
attrs += `${this.pfx}-${prop}="${line[prop]}" `
}
}
return attrs;
}
}
/**
* HTML API: If current script has container(s) specified, initialise Termynal.
*/
if (document.currentScript.hasAttribute('data-termynal-container')) {
const containers = document.currentScript.getAttribute('data-termynal-container');
containers.split('|')
.forEach(container => new Termynal(container))
}
================================================
FILE: docs/assets/css-js/general/css/progressbar.css
================================================
/*
* Source: https://facelessuser.github.io/pymdown-extensions/extensions/progressbar/
*
* Note: Look under "CSS Setup".
*
*/
.progress-label {
position: absolute;
text-align: center;
font-weight: 700;
width: 100%;
margin: 0;
line-height: 1.2rem;
white-space: nowrap;
overflow: hidden;
}
.progress-bar {
height: 1.2rem;
float: left;
background-color: #2979ff;
}
.progress {
display: block;
width: 100%;
margin: 0.5rem 0;
height: 1.2rem;
background-color: #eeeeee;
position: relative;
}
.progress.thin {
margin-top: 0.9rem;
height: 0.4rem;
}
.progress.thin .progress-label {
margin-top: -0.4rem;
}
.progress.thin .progress-bar {
height: 0.4rem;
}
/* ColorPalette Source: https://colorbrewer2.org/#type=diverging&scheme=RdYlGn&n=11 */
.progress-0plus .progress-bar {
background-color: #a50026;
}
.progress-10plus .progress-bar {
background-color: #d73027;
}
.progress-20plus .progress-bar {
background-color: #f46d43;
}
.progress-30plus .progress-bar {
background-color: #fdae61;
}
.progress-40plus .progress-bar {
background-color: #fee08b;
}
.progress-50plus .progress-bar {
background-color: #ffffbf;
}
.progress-60plus .progress-bar {
background-color: #d9ef8b;
}
.progress-70plus .progress-bar {
background-color: #a6d96a;
}
.progress-80plus .progress-bar {
background-color: #66bd63;
}
.progress-90plus .progress-bar {
background-color: #1a9850;
}
.progress-100plus .progress-bar {
background-color: #006837;
}
================================================
FILE: docs/assets/css-js/general/css/social-color-stryle.css
================================================
/* # cspell: disable */
/* Icon Fill Color Styles
*
* Source: https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/#with-colors
*
*/
.devdotto {
color: #0A0A0A;
src: "https://simpleicons.org/icons/devdotto.svg";
}
.facebook {
color: #4267B2;
src: "https://simpleicons.org/icons/facebook.svg";
}
.github {
color: #181717;
src: "https://simpleicons.org/icons/github.svg";
/* icon: "https://simpleicons.org/icons/github.svg"; */
}
.linkedin {
color: #0A66C2;
src: "https://simpleicons.org/icons/linkedin.svg";
/* icon: "https://simpleicons.org/icons/linkedin.svg"; */
}
.medium {
color: #00AB6C;
src: "https://simpleicons.org/icons/medium.svg";
/* icon: "https://simpleicons.org/icons/medium.svg"; */
}
.stackoverflow {
color: #F58025;
src: "https://simpleicons.org/icons/stackoverflow.svg";
/* icon: "https://simpleicons.org/icons/stackoverflow.svg"; */
}
.twitter {
color: #1DA1F2;
src: "https://simpleicons.org/icons/twitter.svg";
/* icon: "https://simpleicons.org/icons/twitter.svg"; */
}
.youtube {
color: #FF0000;
src: "https://simpleicons.org/icons/youtube.svg";
/* icon: "https://simpleicons.org/icons/youtube.svg"; */
}
================================================
FILE: docs/assets/css-js/general/js/highlight-config.js
================================================
// source: https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#highlight
document$.subscribe(() => {
hljs.highlightAll()
})
================================================
FILE: docs/assets/css-js/general/js/material-extra/extra-uml.js
================================================
/*
* Source: https://github.com/facelessuser/pymdown-extensions/blob/main/docs/src/js/extra-uml.js
*/
import uml from "./uml"
(() => {
const onReady = function (fn) {
document.addEventListener("DOMContentLoaded", fn)
document.addEventListener("DOMContentSwitch", fn)
}
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === "attributes") {
let scheme = mutation.target.getAttribute("data-md-color-scheme")
if (!scheme) {
scheme = "default"
}
localStorage.setItem("data-md-color-scheme", scheme)
if (typeof mermaid !== "undefined") {
uml("mermaid")
}
}
})
})
onReady(() => {
observer.observe(document.querySelector("body"), { attributeFilter: ["data-md-color-scheme"] })
if (typeof mermaid !== "undefined") {
uml("mermaid")
}
})
})()
================================================
FILE: docs/assets/css-js/general/js/material-extra/material-extra-theme.js
================================================
/*
* Source: https://github.com/facelessuser/pymdown-extensions/blob/main/docs/src/js/material-extra-theme.js
*/
(() => {
const preferToggle = function (e) {
if (localStorage.getItem("data-md-prefers-color-scheme") === "true") {
document.querySelector("body").setAttribute("data-md-color-scheme", (e.matches) ? "dracula" : "default")
}
}
const setupTheme = function (body) {
const preferSupported = window.matchMedia("(prefers-color-scheme)").media !== "not all"
let scheme = localStorage.getItem("data-md-color-scheme")
let prefers = localStorage.getItem("data-md-prefers-color-scheme")
if (!scheme) {
scheme = "dracula"
}
if (!prefers) {
prefers = "false"
}
if (prefers === "true" && preferSupported) {
scheme = (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dracula" : "default"
} else {
prefers = "false"
}
body.setAttribute("data-md-prefers-color-scheme", prefers)
body.setAttribute("data-md-color-scheme", scheme)
if (preferSupported) {
const matchListener = window.matchMedia("(prefers-color-scheme: dark)")
matchListener.addListener(preferToggle)
}
}
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === "childList") {
if (mutation.addedNodes.length) {
for (let i = 0; i < mutation.addedNodes.length; i++) {
const el = mutation.addedNodes[i]
if (el.nodeType === 1 && el.tagName.toLowerCase() === "body") {
setupTheme(el)
break
}
}
}
}
})
})
observer.observe(document.querySelector("html"), { childList: true })
})()
window.toggleScheme = function () {
const body = document.querySelector("body")
const preferSupported = window.matchMedia("(prefers-color-scheme)").media !== "not all"
let scheme = body.getAttribute("data-md-color-scheme")
let prefer = body.getAttribute("data-md-prefers-color-scheme")
if (preferSupported && scheme === "default" && prefer !== "true") {
prefer = "true"
scheme = (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dracula" : "default"
} else if (preferSupported && prefer === "true") {
prefer = "false"
scheme = "dracula"
} else if (scheme === "dracula") {
prefer = "false"
scheme = "default"
} else {
prefer = "false"
scheme = "dracula"
}
localStorage.setItem("data-md-prefers-color-scheme", prefer)
body.setAttribute("data-md-prefers-color-scheme", prefer)
body.setAttribute("data-md-color-scheme", scheme)
}
================================================
FILE: docs/assets/css-js/general/js/material-extra/uml.js
================================================
/* Notes (as of Mermaid 8.7.0):
* - Gantt: width is always relative to the parent, if you have a small parent, the chart will be squashed.
* Can't help it.
* - Journey: Suffers from the same issues that Gantt does.
* - Pie: These charts have no default height or width. Good luck pinning them down to a reasonable size.
* - Git: The render portion is agnostic to the size of the parent element. But padding of the SVG is relative
* to the parent element. You will never find a happy size.
*
* Source: https://github.com/facelessuser/pymdown-extensions/blob/main/docs/src/js/uml.js
*
*/
/**
* Targets special code or div blocks and converts them to UML.
* @param {string} className is the name of the class to target.
* @return {void}
*/
export default className => {
// Custom element to encapsulate Mermaid content.
class MermaidDiv extends HTMLElement {
/**
* Creates a special Mermaid div shadow DOM.
* Works around issues of shared IDs.
* @return {void}
*/
constructor() {
super()
// Create the Shadow DOM and attach style
const shadow = this.attachShadow({ mode: "open" })
const style = document.createElement("style")
style.textContent = `
:host {
display: block;
line-height: initial;
font-size: 16px;
}
div.mermaid {
margin: 0;
overflow: visible;
}`
shadow.appendChild(style)
}
}
if (typeof customElements.get("mermaid-div") === "undefined") {
customElements.define("mermaid-div", MermaidDiv)
}
const getFromCode = function (parent) {
// Handles text extraction.
let text = ""
for (let j = 0; j < parent.childNodes.length; j++) {
const subEl = parent.childNodes[j]
if (subEl.tagName.toLowerCase() === "code") {
for (let k = 0; k < subEl.childNodes.length; k++) {
const child = subEl.childNodes[k]
const whitespace = /^\s*$/
if (child.nodeName === "#text" && !(whitespace.test(child.nodeValue))) {
text = child.nodeValue
break
}
}
}
}
return text
}
// We use this to determine if we want the dark or light theme.
// This is specific for our MkDocs Material environment.
// You should load your configs based on your own environment's needs.
const defaultConfig = {
startOnLoad: false,
theme: "default",
flowchart: {
htmlLabels: false
},
er: {
useMaxWidth: false
},
sequence: {
useMaxWidth: false,
noteFontWeight: "14px",
actorFontSize: "14px",
messageFontSize: "16px"
}
}
mermaid.mermaidAPI.globalReset()
// Non Material themes should just use "default"
let scheme = null
try {
scheme = document.querySelector("[data-md-color-scheme]").getAttribute("data-md-color-scheme")
} catch (err) {
scheme = "default"
}
const config = (typeof mermaidConfig === "undefined") ?
defaultConfig :
mermaidConfig[scheme] || (mermaidConfig.default || defaultConfig)
mermaid.initialize(config)
// Find all of our Mermaid sources and render them.
const blocks = document.querySelectorAll(`pre.${className}, mermaid-div`)
const surrogate = document.querySelector("html")
for (let i = 0; i < blocks.length; i++) {
const block = blocks[i]
const parentEl = (block.tagName.toLowerCase() === "mermaid-div") ?
block.shadowRoot.querySelector(`pre.${className}`) :
block
// Create a temporary element with the typeset and size we desire.
// Insert it at the end of our parent to render the SVG.
const temp = document.createElement("div")
temp.style.visibility = "hidden"
temp.style.display = "display"
temp.style.padding = "0"
temp.style.margin = "0"
temp.style.lineHeight = "initial"
temp.style.fontSize = "16px"
surrogate.appendChild(temp)
try {
mermaid.mermaidAPI.render(
`_mermaid_${i}`,
getFromCode(parentEl),
content => {
const el = document.createElement("div")
el.className = className
el.innerHTML = content
// Insert the render where we want it and remove the original text source.
// Mermaid will clean up the temporary element.
const shadow = document.createElement("mermaid-div")
shadow.shadowRoot.appendChild(el)
block.parentNode.insertBefore(shadow, block)
parentEl.style.display = "none"
shadow.shadowRoot.appendChild(parentEl)
if (parentEl !== block) {
block.parentNode.removeChild(block)
}
},
temp
)
} catch (err) { } // eslint-disable-line no-empty
if (surrogate.contains(temp)) {
surrogate.removeChild(temp)
}
}
}
================================================
FILE: docs/assets/css-js/general/js/tables.js
================================================
document$.subscribe(function () {
var tables = document.querySelectorAll("article table")
tables.forEach(function (table) {
new Tablesort(table)
})
})
================================================
FILE: docs/assets/css-js/mkdocs-tooltips/css/custom.css
================================================
.tooltip {
cursor:default;
}
.icons {
margin: 0 auto !important;
}
.icons.position {
width: 240px; /* 3 * (10 + 60 + 10) */
}
.icons.color {
width: 325px; /* 4 * (10 + 60 + 10) + 5 (?) */
}
@media only screen and (max-width: 400px) {
.icons.color {
width: 165px; /* 2 * (10 + 60 + 10) + 5 (?) */
}
}
.icons span {
line-height: 60px;
display: inline-block;
cursor: default;
font-size: 60px;
margin: 10px;
padding: 0px;
width: 60px;
height: 60px;
text-align: center;
vertical-align: middle;
}
.md-button {
text-align: center;
margin: 10px;
}
.disabled {
cursor: not-allowed;
pointer-events: none;
}
================================================
FILE: docs/assets/css-js/pymdownx-extras/css/extra.css
================================================
@charset "UTF-8";
:root>* {
--md-code-link-bg-color: hsla(0, 0%, 96%, 1);
--md-code-link-accent-bg-color: var(--md-code-link-bg-color);
--md-default-bg-color--trans: rgb(100%, 100%, 100%, 0);
--md-code-special-bg-color: #e8e8e8;
--md-code-alternate-bg-color: var(--md-code-bg-color);
--md-code-hl-punctuation-color: var(--md-code-fg-color);
--md-code-hl-namespace-color: var(--md-code-fg-color);
--md-code-hl-entity-color: var(--md-code-hl-keyword-color);
--md-code-hl-tag-color: var(--md-code-hl-keyword-color);
--md-code-hl-builtin-color: var(--md-code-hl-constant-color);
--md-code-hl-class-color: var(--md-code-hl-function-color);
--md-typeset-a-color: #00bcd4;
--md-progress-stripe: var(--md-default-bg-color--lighter);
--md-progress-100: #00e676;
--md-progress-80: #00e676;
--md-progress-60: #fbc02d;
--md-progress-40: #ff9100;
--md-progress-20: #ff5252;
--md-progress-0: #ff1744;
--md-typeset-kbd-color: #ebebeb;
--md-typeset-kbd-border-color: #b8b8b8;
--md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
--md-default-bg-color--dark: #2b2e3b;
--md-default-bg-color--darker: #252732;
--md-default-bg-color--darkest: #1e2029;
--md-default-bg-color--ultra-dark: #111217
}
:root>[data-md-color-scheme=slate] {
--md-code-link-bg-color: hsla(232, 15%, 15%, 1);
--md-code-link-accent-bg-color: var(--md-code-link-bg-color);
--md-code-special-bg-color: #2b2d3b;
--md-default-bg-color--trans: hsla(232, 15%, 15%, 0);
--md-typeset-kbd-color: var(--md-default-fg-color--lightest);
--md-typeset-kbd-border-color: #1a1c24;
--md-typeset-kbd-accent-color: var(--md-default-fg-color--lighter)
}
:root>[data-md-color-scheme=dracula] {
--md-default-fg-color: rgba(248, 248, 242, 0.87);
--md-default-fg-color--light: rgba(248, 248, 242, 0.54);
--md-default-fg-color--lighter: rgba(248, 248, 242, 0.16);
--md-default-fg-color--lightest: rgba(248, 248, 242, 0.07);
--md-default-bg-color: var(--md-default-bg-color--darkest);
--md-default-bg-color--light: rgba(50, 52, 67, 0.7);
--md-default-bg-color--lighter: rgba(50, 52, 67, 0.3);
--md-default-bg-color--lightest: rgba(50, 52, 67, 0.12);
--md-default-bg-color--trans: rgba(50, 52, 67, 0);
--md-text-color: var(--md-default-fg-color);
--md-typeset-color: var(--md-default-fg-color);
--md-admonition-fg-color: var(--md-default-fg-color);
--md-code-fg-color: hsl(60deg, 30%, 96%);
--md-code-bg-color: hsl(231deg, 15%, 18%);
--md-code-inline-bg-color: #323443;
--md-code-hl-operator-color: hsl(326deg, 100%, 74%);
--md-code-hl-punctuation-color: hsl(60deg, 30%, 96%);
--md-code-hl-string-color: hsl(65deg, 92%, 76%);
--md-code-hl-special-color: hsl(265deg, 89%, 78%);
--md-code-hl-number-color: hsl(265deg, 89%, 78%);
--md-code-hl-keyword-color: hsl(326deg, 100%, 74%);
--md-code-hl-name-color: hsl(60deg, 30%, 96%);
--md-code-hl-constant-color: hsl(265deg, 89%, 78%);
--md-code-hl-function-color: hsl(135deg, 94%, 65%);
--md-code-hl-comment-color: hsl(225deg, 27%, 51%);
--md-code-hl-variable-color: hsl(31deg, 100%, 71%);
--md-code-hl-generic-color: hsl(225deg, 27%, 51%);
--md-code-hl-color: hsl(231deg, 25%, 25%);
--md-code-hl-entity-color: hsl(135deg, 94%, 65%);
--md-code-hl-tag-color: hsl(326deg, 100%, 74%);
--md-code-hl-namespace-color: hsl(60deg, 30%, 96%);
--md-code-hl-builtin-color: hsl(191deg, 97%, 77%);
--md-code-hl-class-color: hsl(191deg, 97%, 77%);
--md-code-special-bg-color: #1c1e26;
--md-code-alternate-bg-color: #3d3e49;
--md-code-link-bg-color: #364653;
--md-typeset-a-color: hsl(191deg, 97%, 77%);
--md-typeset-mark-color: #6e7252;
--md-typeset-del-color: #734568;
--md-typeset-ins-color: #36724e;
--md-progress-stripe: var(--md-default-bg-color--lightest);
--md-progress-100: hsl(135deg, 94%, 65%);
--md-progress-80: hsl(135deg, 92%, 79%);
--md-progress-60: hsl(65deg, 92%, 76%);
--md-progress-40: hsl(31deg, 100%, 71%);
--md-progress-20: hsl(326deg, 100%, 74%);
--md-progress-0: hsl(0deg, 100%, 67%);
--md-typeset-kbd-color: var(--md-default-fg-color--lightest);
--md-typeset-kbd-border-color: var(--md-default-bg-color--ultra-dark);
--md-typeset-kbd-accent-color: var(--md-default-fg-color--lighter)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=red],
[data-md-color-scheme=dracula][data-md-color-primary=red] {
--md-primary-code-bg-color: #47303a;
--md-primary-fg-color: hsla(0deg, 100%, 67%, 1);
--md-primary-fg-color--transparent: hsla(0deg, 100%, 67%, 0.1);
--md-primary-fg-color--light: hsla(0deg, 100%, 72%, 1);
--md-primary-fg-color--dark: hsla(0deg, 100%, 62%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=pink],
[data-md-color-scheme=dracula][data-md-color-primary=pink] {
--md-primary-code-bg-color: #47354b;
--md-primary-fg-color: hsla(326deg, 100%, 74%, 1);
--md-primary-fg-color--transparent: hsla(326deg, 100%, 74%, 0.1);
--md-primary-fg-color--light: hsla(326deg, 100%, 79%, 1);
--md-primary-fg-color--dark: hsla(326deg, 100%, 69%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=purple],
[data-md-color-scheme=dracula][data-md-color-primary=purple] {
--md-primary-code-bg-color: #3e3952;
--md-primary-fg-color: hsla(265deg, 89%, 78%, 1);
--md-primary-fg-color--transparent: hsla(265deg, 89%, 78%, 0.1);
--md-primary-fg-color--light: hsla(265deg, 89%, 83%, 1);
--md-primary-fg-color--dark: hsla(265deg, 89%, 73%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=deep-purple],
[data-md-color-scheme=dracula][data-md-color-primary=deep-purple] {
--md-primary-code-bg-color: #3e3952;
--md-primary-fg-color: hsla(265deg, 89%, 78%, 1);
--md-primary-fg-color--transparent: hsla(265deg, 89%, 78%, 0.1);
--md-primary-fg-color--light: hsla(265deg, 89%, 83%, 1);
--md-primary-fg-color--dark: hsla(265deg, 89%, 73%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=blue],
[data-md-color-scheme=dracula][data-md-color-primary=blue] {
--md-primary-code-bg-color: #303446;
--md-primary-fg-color: hsla(225deg, 27%, 51%, 1);
--md-primary-fg-color--transparent: hsla(225deg, 27%, 51%, 0.1);
--md-primary-fg-color--light: hsla(225deg, 27%, 56%, 1);
--md-primary-fg-color--dark: hsla(225deg, 27%, 46%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=indigo],
[data-md-color-scheme=dracula][data-md-color-primary=indigo] {
--md-primary-code-bg-color: #303446;
--md-primary-fg-color: hsla(225deg, 27%, 51%, 1);
--md-primary-fg-color--transparent: hsla(225deg, 27%, 51%, 0.1);
--md-primary-fg-color--light: hsla(225deg, 27%, 56%, 1);
--md-primary-fg-color--dark: hsla(225deg, 27%, 46%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=light-blue],
[data-md-color-scheme=dracula][data-md-color-primary=light-blue] {
--md-primary-code-bg-color: #303446;
--md-primary-fg-color: hsla(225deg, 27%, 51%, 1);
--md-primary-fg-color--transparent: hsla(225deg, 27%, 51%, 0.1);
--md-primary-fg-color--light: hsla(225deg, 27%, 56%, 1);
--md-primary-fg-color--dark: hsla(225deg, 27%, 46%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=cyan],
[data-md-color-scheme=dracula][data-md-color-primary=cyan] {
--md-primary-code-bg-color: #364653;
--md-primary-fg-color: hsla(191deg, 97%, 77%, 1);
--md-primary-fg-color--transparent: hsla(191deg, 97%, 77%, 0.1);
--md-primary-fg-color--light: hsla(191deg, 97%, 82%, 1);
--md-primary-fg-color--dark: hsla(191deg, 97%, 72%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=teal],
[data-md-color-scheme=dracula][data-md-color-primary=teal] {
--md-primary-code-bg-color: #364653;
--md-primary-fg-color: hsla(191deg, 97%, 77%, 1);
--md-primary-fg-color--transparent: hsla(191deg, 97%, 77%, 0.1);
--md-primary-fg-color--light: hsla(191deg, 97%, 82%, 1);
--md-primary-fg-color--dark: hsla(191deg, 97%, 72%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=green],
[data-md-color-scheme=dracula][data-md-color-primary=green] {
--md-primary-code-bg-color: #2d4840;
--md-primary-fg-color: hsla(135deg, 94%, 65%, 1);
--md-primary-fg-color--transparent: hsla(135deg, 94%, 65%, 0.1);
--md-primary-fg-color--light: hsla(135deg, 94%, 70%, 1);
--md-primary-fg-color--dark: hsla(135deg, 94%, 60%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=light-green],
[data-md-color-scheme=dracula][data-md-color-primary=light-green] {
--md-primary-code-bg-color: #2d4840;
--md-primary-fg-color: hsla(135deg, 94%, 65%, 1);
--md-primary-fg-color--transparent: hsla(135deg, 94%, 65%, 0.1);
--md-primary-fg-color--light: hsla(135deg, 94%, 70%, 1);
--md-primary-fg-color--dark: hsla(135deg, 94%, 60%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=lime],
[data-md-color-scheme=dracula][data-md-color-primary=lime] {
--md-primary-code-bg-color: #2d4840;
--md-primary-fg-color: hsla(135deg, 94%, 65%, 1);
--md-primary-fg-color--transparent: hsla(135deg, 94%, 65%, 0.1);
--md-primary-fg-color--light: hsla(135deg, 94%, 70%, 1);
--md-primary-fg-color--dark: hsla(135deg, 94%, 60%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=yellow],
[data-md-color-scheme=dracula][data-md-color-primary=yellow] {
--md-primary-code-bg-color: #454842;
--md-primary-fg-color: hsla(65deg, 92%, 76%, 1);
--md-primary-fg-color--transparent: hsla(65deg, 92%, 76%, 0.1);
--md-primary-fg-color--light: hsla(65deg, 92%, 81%, 1);
--md-primary-fg-color--dark: hsla(65deg, 92%, 71%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=amber],
[data-md-color-scheme=dracula][data-md-color-primary=amber] {
--md-primary-code-bg-color: #454842;
--md-primary-fg-color: hsla(65deg, 92%, 76%, 1);
--md-primary-fg-color--transparent: hsla(65deg, 92%, 76%, 0.1);
--md-primary-fg-color--light: hsla(65deg, 92%, 81%, 1);
--md-primary-fg-color--dark: hsla(65deg, 92%, 71%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=orange],
[data-md-color-scheme=dracula][data-md-color-primary=orange] {
--md-primary-code-bg-color: #473e3d;
--md-primary-fg-color: hsla(31deg, 100%, 71%, 1);
--md-primary-fg-color--transparent: hsla(31deg, 100%, 71%, 0.1);
--md-primary-fg-color--light: hsla(31deg, 100%, 76%, 1);
--md-primary-fg-color--dark: hsla(31deg, 100%, 66%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=deep-orange],
[data-md-color-scheme=dracula][data-md-color-primary=deep-orange] {
--md-primary-code-bg-color: #473e3d;
--md-primary-fg-color: hsla(31deg, 100%, 71%, 1);
--md-primary-fg-color--transparent: hsla(31deg, 100%, 71%, 0.1);
--md-primary-fg-color--light: hsla(31deg, 100%, 76%, 1);
--md-primary-fg-color--dark: hsla(31deg, 100%, 66%, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=red],
[data-md-color-scheme=dracula][data-md-color-accent=red] {
--md-code-link-accent-bg-color: #472c36;
--md-accent-fg-color: hsla(0deg, 100%, 62%, 1);
--md-accent-fg-color--transparent: hsla(0deg, 100%, 62%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=pink],
[data-md-color-scheme=dracula][data-md-color-accent=pink] {
--md-code-link-accent-bg-color: #473149;
--md-accent-fg-color: hsla(326deg, 100%, 69%, 1);
--md-accent-fg-color--transparent: hsla(326deg, 100%, 69%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=purple],
[data-md-color-scheme=dracula][data-md-color-accent=purple] {
--md-code-link-accent-bg-color: #3c3652;
--md-accent-fg-color: hsla(265deg, 89%, 73%, 1);
--md-accent-fg-color--transparent: hsla(265deg, 89%, 73%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=deep-purple],
[data-md-color-scheme=dracula][data-md-color-accent=deep-purple] {
--md-code-link-accent-bg-color: #3c3652;
--md-accent-fg-color: hsla(265deg, 89%, 73%, 1);
--md-accent-fg-color--transparent: hsla(265deg, 89%, 73%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=blue],
[data-md-color-scheme=dracula][data-md-color-accent=blue] {
--md-code-link-accent-bg-color: #2e3243;
--md-accent-fg-color: hsla(225deg, 27%, 46%, 1);
--md-accent-fg-color--transparent: hsla(225deg, 27%, 46%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=indigo],
[data-md-color-scheme=dracula][data-md-color-accent=indigo] {
--md-code-link-accent-bg-color: #2e3243;
--md-accent-fg-color: hsla(225deg, 27%, 46%, 1);
--md-accent-fg-color--transparent: hsla(225deg, 27%, 46%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=light-blue],
[data-md-color-scheme=dracula][data-md-color-accent=light-blue] {
--md-code-link-accent-bg-color: #2e3243;
--md-accent-fg-color: hsla(225deg, 27%, 46%, 1);
--md-accent-fg-color--transparent: hsla(225deg, 27%, 46%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=cyan],
[data-md-color-scheme=dracula][data-md-color-accent=cyan] {
--md-code-link-accent-bg-color: #324553;
--md-accent-fg-color: hsla(191deg, 97%, 72%, 1);
--md-accent-fg-color--transparent: hsla(191deg, 97%, 72%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=teal],
[data-md-color-scheme=dracula][data-md-color-accent=teal] {
--md-code-link-accent-bg-color: #324553;
--md-accent-fg-color: hsla(191deg, 97%, 72%, 1);
--md-accent-fg-color--transparent: hsla(191deg, 97%, 72%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=green],
[data-md-color-scheme=dracula][data-md-color-accent=green] {
--md-code-link-accent-bg-color: #2a483d;
--md-accent-fg-color: hsla(135deg, 94%, 60%, 1);
--md-accent-fg-color--transparent: hsla(135deg, 94%, 60%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=light-green],
[data-md-color-scheme=dracula][data-md-color-accent=light-green] {
--md-code-link-accent-bg-color: #2a483d;
--md-accent-fg-color: hsla(135deg, 94%, 60%, 1);
--md-accent-fg-color--transparent: hsla(135deg, 94%, 60%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=lime],
[data-md-color-scheme=dracula][data-md-color-accent=lime] {
--md-code-link-accent-bg-color: #2a483d;
--md-accent-fg-color: hsla(135deg, 94%, 60%, 1);
--md-accent-fg-color--transparent: hsla(135deg, 94%, 60%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=yellow],
[data-md-color-scheme=dracula][data-md-color-accent=yellow] {
--md-code-link-accent-bg-color: #45483e;
--md-accent-fg-color: hsla(65deg, 92%, 71%, 1);
--md-accent-fg-color--transparent: hsla(65deg, 92%, 71%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=amber],
[data-md-color-scheme=dracula][data-md-color-accent=amber] {
--md-code-link-accent-bg-color: #45483e;
--md-accent-fg-color: hsla(65deg, 92%, 71%, 1);
--md-accent-fg-color--transparent: hsla(65deg, 92%, 71%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=orange],
[data-md-color-scheme=dracula][data-md-color-accent=orange] {
--md-code-link-accent-bg-color: #473d39;
--md-accent-fg-color: hsla(31deg, 100%, 66%, 1);
--md-accent-fg-color--transparent: hsla(31deg, 100%, 66%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
[data-md-color-scheme=dracula] :not([data-md-color-scheme])[data-md-color-primary=deep-orange],
[data-md-color-scheme=dracula][data-md-color-accent=deep-orange] {
--md-code-link-accent-bg-color: #473d39;
--md-accent-fg-color: hsla(31deg, 100%, 66%, 1);
--md-accent-fg-color--transparent: hsla(31deg, 100%, 66%, 0.1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light)
}
:root {
--md-heart: #ff5252;
--md-heart-big: #ff1744
}
:root [data-md-color-scheme=dracula] {
--md-heart: hsl(326deg, 100%, 74%);
--md-heart-big: hsl(0deg, 100%, 67%)
}
.md-typeset a.source-link {
position: relative;
top: -.6rem;
float: right;
color: var(--md-default-fg-color--lighter);
transition: color 125ms
}
.md-typeset a.source-link:hover {
color: var(--md-accent-fg-color)
}
.md-typeset a.source-link .twemoji {
height: 1.2rem
}
.md-typeset a.source-link .twemoji svg {
width: 1.2rem;
height: 1.2rem
}
.md-typeset div.highlight.md-max-height pre>code {
max-height: 15rem
}
.twemoji.heart-throb svg,
.twemoji.heart-throb-hover svg {
position: relative;
color: var(--md-heart);
-webkit-animation: pulse 1.5s ease infinite;
animation: pulse 1.5s ease infinite
}
@-webkit-keyframes pulse {
0% {
transform: scale(1)
}
40% {
color: var(--md-heart-big);
transform: scale(1.3)
}
50% {
transform: scale(1.2)
}
60% {
color: var(--md-heart-big);
transform: scale(1.3)
}
100% {
transform: scale(1)
}
}
@keyframes pulse {
0% {
transform: scale(1)
}
40% {
color: var(--md-heart-big);
transform: scale(1.3)
}
50% {
transform: scale(1.2)
}
60% {
color: var(--md-heart-big);
transform: scale(1.3)
}
100% {
transform: scale(1)
}
}
footer.sponsorship {
text-align: center
}
footer.sponsorship hr {
display: inline-block;
width: 1.6rem;
margin: 0 .7rem;
vertical-align: middle;
border-bottom: 2px solid var(--md-default-fg-color--lighter)
}
footer.sponsorship:hover hr {
border-color: var(--md-accent-fg-color)
}
footer.sponsorship:not(:hover) .twemoji.heart-throb-hover svg {
color: var(--md-default-fg-color--lighter) !important
}
body:not([data-md-prefers-color-scheme=true])[data-md-color-scheme=dracula] .md-icon .light-mode,
body:not([data-md-prefers-color-scheme=true])[data-md-color-scheme=dracula] .md-icon .system-mode,
body:not([data-md-prefers-color-scheme=true])[data-md-color-scheme=dracula] .md-icon .unknown-mode {
display: none
}
body:not([data-md-prefers-color-scheme=true])[data-md-color-scheme=default] .md-icon .dark-mode,
body:not([data-md-prefers-color-scheme=true])[data-md-color-scheme=default] .md-icon .system-mode,
body:not([data-md-prefers-color-scheme=true])[data-md-color-scheme=default] .md-icon .unknown-mode {
display: none
}
body:not([data-md-prefers-color-scheme=true]):not([data-md-color-scheme=default]):not([data-md-color-scheme=dracula]) .md-icon .dark-mode,
body:not([data-md-prefers-color-scheme=true]):not([data-md-color-scheme=default]):not([data-md-color-scheme=dracula]) .md-icon .light-mode,
body:not([data-md-prefers-color-scheme=true]):not([data-md-color-scheme=default]):not([data-md-color-scheme=dracula]) .md-icon .system-mode {
display: none
}
body[data-md-prefers-color-scheme=true] .md-icon .dark-mode,
body[data-md-prefers-color-scheme=true] .md-icon .light-mode,
body[data-md-prefers-color-scheme=true] .md-icon .unknown-mode {
display: none
}
.md-header-nav__scheme {
z-index: 0
}
[data-md-toggle=search]:checked~.md-header .md-header-nav__scheme {
display: none
}
:root>* {
--md-admonition-bg-color: transparent;
--md-admonition-icon--settings: url('data:image/svg+xml;charset=utf-8,
* @version 0.0.1
* @license MIT
*/
:root {
--color-bg: #252a33;
--color-text: #eee;
--color-text-subtle: #a2a2a2;
}
[data-termynal] {
width: 750px;
max-width: 100%;
background: var(--color-bg);
color: var(--color-text);
/* font-size: 18px; */
font-size: 15px;
/* font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace; */
font-family: 'Roboto Mono', 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
border-radius: 4px;
padding: 75px 45px 35px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[data-termynal]:before {
content: '';
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
/* A little hack to display the window buttons in one pseudo element. */
background: #d9515d;
-webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
}
[data-termynal]:after {
content: 'bash';
position: absolute;
color: var(--color-text-subtle);
top: 5px;
left: 0;
width: 100%;
text-align: center;
}
a[data-terminal-control] {
text-align: right;
display: block;
color: #aebbff;
}
[data-ty] {
display: block;
line-height: 2;
}
[data-ty]:before {
/* Set up defaults and ensure empty lines are displayed. */
content: '';
display: inline-block;
vertical-align: middle;
}
[data-ty="input"]:before,
[data-ty-prompt]:before {
margin-right: 0.75em;
color: var(--color-text-subtle);
}
[data-ty="input"]:before {
content: '$';
}
[data-ty][data-ty-prompt]:before {
content: attr(data-ty-prompt);
}
[data-ty-cursor]:after {
content: attr(data-ty-cursor);
font-family: monospace;
margin-left: 0.5em;
-webkit-animation: blink 1s infinite;
animation: blink 1s infinite;
}
/* Cursor animation */
@-webkit-keyframes blink {
50% {
opacity: 0;
}
}
@keyframes blink {
50% {
opacity: 0;
}
}
================================================
FILE: docs/assets/css-js/termynal/js/custom.js
================================================
function setupTermynal() {
document.querySelectorAll(".use-termynal").forEach(node => {
node.style.display = "block";
new Termynal(node, {
lineDelay: 500
});
});
const progressLiteralStart = "---> 100%";
const promptLiteralStart = "$ ";
const customPromptLiteralStart = "# ";
const termynalActivateClass = "termy";
let termynals = [];
function createTermynals() {
document
.querySelectorAll(`.${termynalActivateClass} .highlight`)
.forEach(node => {
const text = node.textContent;
const lines = text.split("\n");
const useLines = [];
let buffer = [];
function saveBuffer() {
if (buffer.length) {
let isBlankSpace = true;
buffer.forEach(line => {
if (line) {
isBlankSpace = false;
}
});
dataValue = {};
if (isBlankSpace) {
dataValue["delay"] = 0;
}
if (buffer[buffer.length - 1] === "") {
// A last single
* @version 0.0.1
* @license MIT
*/
'use strict';
/** Generate a terminal widget. */
class Termynal {
/**
* Construct the widget's settings.
* @param {(string|Node)=} container - Query selector or container element.
* @param {Object=} options - Custom settings.
* @param {string} options.prefix - Prefix to use for data attributes.
* @param {number} options.startDelay - Delay before animation, in ms.
* @param {number} options.typeDelay - Delay between each typed character, in ms.
* @param {number} options.lineDelay - Delay between each line, in ms.
* @param {number} options.progressLength - Number of characters displayed as progress bar.
* @param {string} options.progressChar – Character to use for progress bar, defaults to █.
* @param {number} options.progressPercent - Max percent of progress.
* @param {string} options.cursor – Character to use for cursor, defaults to ▋.
* @param {Object[]} lineData - Dynamically loaded line data objects.
* @param {boolean} options.noInit - Don't initialise the animation.
*/
constructor(container = '#termynal', options = {}) {
this.container = (typeof container === 'string') ? document.querySelector(container) : container;
this.pfx = `data-${options.prefix || 'ty'}`;
this.originalStartDelay = this.startDelay = options.startDelay
|| parseFloat(this.container.getAttribute(`${this.pfx}-startDelay`)) || 600;
this.originalTypeDelay = this.typeDelay = options.typeDelay
|| parseFloat(this.container.getAttribute(`${this.pfx}-typeDelay`)) || 90;
this.originalLineDelay = this.lineDelay = options.lineDelay
|| parseFloat(this.container.getAttribute(`${this.pfx}-lineDelay`)) || 1500;
this.progressLength = options.progressLength
|| parseFloat(this.container.getAttribute(`${this.pfx}-progressLength`)) || 40;
this.progressChar = options.progressChar
|| this.container.getAttribute(`${this.pfx}-progressChar`) || '█';
this.progressPercent = options.progressPercent
|| parseFloat(this.container.getAttribute(`${this.pfx}-progressPercent`)) || 100;
this.cursor = options.cursor
|| this.container.getAttribute(`${this.pfx}-cursor`) || '▋';
this.lineData = this.lineDataToElements(options.lineData || []);
this.loadLines()
if (!options.noInit) this.init()
}
loadLines() {
// Load all the lines and create the container so that the size is fixed
// Otherwise it would be changing and the user viewport would be constantly
// moving as she/he scrolls
const finish = this.generateFinish()
finish.style.visibility = 'hidden'
this.container.appendChild(finish)
// Appends dynamically loaded lines to existing line elements.
this.lines = [...this.container.querySelectorAll(`[${this.pfx}]`)].concat(this.lineData);
for (let line of this.lines) {
line.style.visibility = 'hidden'
this.container.appendChild(line)
}
const restart = this.generateRestart()
restart.style.visibility = 'hidden'
this.container.appendChild(restart)
this.container.setAttribute('data-termynal', '');
}
/**
* Initialise the widget, get lines, clear container and start animation.
*/
init() {
/**
* Calculates width and height of Termynal container.
* If container is empty and lines are dynamically loaded, defaults to browser `auto` or CSS.
*/
const containerStyle = getComputedStyle(this.container);
this.container.style.width = containerStyle.width !== '0px' ?
containerStyle.width : undefined;
this.container.style.minHeight = containerStyle.height !== '0px' ?
containerStyle.height : undefined;
this.container.setAttribute('data-termynal', '');
this.container.innerHTML = '';
for (let line of this.lines) {
line.style.visibility = 'visible'
}
this.start();
}
/**
* Start the animation and rener the lines depending on their data attributes.
*/
async start() {
this.addFinish()
await this._wait(this.startDelay);
for (let line of this.lines) {
const type = line.getAttribute(this.pfx);
const delay = line.getAttribute(`${this.pfx}-delay`) || this.lineDelay;
if (type == 'input') {
line.setAttribute(`${this.pfx}-cursor`, this.cursor);
await this.type(line);
await this._wait(delay);
}
else if (type == 'progress') {
await this.progress(line);
await this._wait(delay);
}
else {
this.container.appendChild(line);
await this._wait(delay);
}
line.removeAttribute(`${this.pfx}-cursor`);
}
this.addRestart()
this.finishElement.style.visibility = 'hidden'
this.lineDelay = this.originalLineDelay
this.typeDelay = this.originalTypeDelay
this.startDelay = this.originalStartDelay
}
generateRestart() {
const restart = document.createElement('a')
restart.onclick = (e) => {
e.preventDefault()
this.container.innerHTML = ''
this.init()
}
restart.href = '#'
restart.setAttribute('data-terminal-control', '')
restart.innerHTML = "restart ↻"
return restart
}
generateFinish() {
const finish = document.createElement('a')
finish.onclick = (e) => {
e.preventDefault()
this.lineDelay = 0
this.typeDelay = 0
this.startDelay = 0
}
finish.href = '#'
finish.setAttribute('data-terminal-control', '')
finish.innerHTML = "fast →"
this.finishElement = finish
return finish
}
addRestart() {
const restart = this.generateRestart()
this.container.appendChild(restart)
}
addFinish() {
const finish = this.generateFinish()
this.container.appendChild(finish)
}
/**
* Animate a typed line.
* @param {Node} line - The line element to render.
*/
async type(line) {
const chars = [...line.textContent];
line.textContent = '';
this.container.appendChild(line);
for (let char of chars) {
const delay = line.getAttribute(`${this.pfx}-typeDelay`) || this.typeDelay;
await this._wait(delay);
line.textContent += char;
}
}
/**
* Animate a progress bar.
* @param {Node} line - The line element to render.
*/
async progress(line) {
const progressLength = line.getAttribute(`${this.pfx}-progressLength`)
|| this.progressLength;
const progressChar = line.getAttribute(`${this.pfx}-progressChar`)
|| this.progressChar;
const chars = progressChar.repeat(progressLength);
const progressPercent = line.getAttribute(`${this.pfx}-progressPercent`)
|| this.progressPercent;
line.textContent = '';
this.container.appendChild(line);
for (let i = 1; i < chars.length + 1; i++) {
await this._wait(this.typeDelay);
const percent = Math.round(i / chars.length * 100);
line.textContent = `${chars.slice(0, i)} ${percent}%`;
if (percent > progressPercent) {
break;
}
}
}
/**
* Helper function for animation delays, called with `await`.
* @param {number} time - Timeout, in ms.
*/
_wait(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
/**
* Converts line data objects into line elements.
*
* @param {Object[]} lineData - Dynamically loaded lines.
* @param {Object} line - Line data object.
* @returns {Element[]} - Array of line elements.
*/
lineDataToElements(lineData) {
return lineData.map(line => {
let div = document.createElement('div');
div.innerHTML = `${line.value || ''} `;
return div.firstElementChild;
});
}
/**
* Helper function for generating attributes string.
*
* @param {Object} line - Line data object.
* @returns {string} - String of attributes.
*/
_attributes(line) {
let attrs = '';
for (let prop in line) {
// Custom add class
if (prop === 'class') {
attrs += ` class=${line[prop]} `
continue
}
if (prop === 'type') {
attrs += `${this.pfx}="${line[prop]}" `
} else if (prop !== 'value') {
attrs += `${this.pfx}-${prop}="${line[prop]}" `
}
}
return attrs;
}
}
/**
* HTML API: If current script has container(s) specified, initialise Termynal.
*/
if (document.currentScript.hasAttribute('data-termynal-container')) {
const containers = document.currentScript.getAttribute('data-termynal-container');
containers.split('|')
.forEach(container => new Termynal(container))
}
================================================
FILE: docs/assets/css-js/termynal/readme.md
================================================
# **Termynal**: Terminal Animation
Just copy and paste the `terminal` folder in a `docs/assests`
folder and then add the following snippet to your `mkdocs.yml`.
```yaml
# for terminal animation
extra_css:
- assets/termynal/css/termynal.css
- assets/termynal/css/custom.css
extra_javascript:
- assets/termynal/js/termynal.js
- assets/termynal/js/custom.js
``
================================================
FILE: docs/assets/snippets/macros/.gitkeep
================================================
================================================
FILE: docs/assets/snippets/notifications/videos/disclaimer.md
================================================
!!! warning "Disclaimer"
This library is currently under rapid initial development. Breaking changes may happen frequently.
================================================
FILE: docs/examples/hanoi.py
================================================
# Based on the following example from Diagrams
# https://archives.haskell.org/projects.haskell.org/diagrams/gallery/Hanoi.html
from PIL import Image as PILImage
from typing import Dict, List, Tuple
from colour import Color # type: ignore
from chalk import Diagram, rectangle, concat, hcat, vcat
Disk = int
Stack = List[Disk] # disks on one peg
Hanoi = List[Stack] # disks on all three pegs
Move = Tuple[int, int]
colors: List[Color] = [
Color("#9FB4CC"),
Color("#CCCC9F"),
Color("#DB4105"),
]
black = Color("black")
def draw_disk(n: Disk) -> Diagram:
return (
rectangle(n + 2, 1)
.fill_color(colors[n])
.line_color(colors[n])
.line_width(0.05)
)
draw_disk(0)
def draw_stack(s: Stack) -> Diagram:
disks = vcat(map(draw_disk, s))
post = rectangle(0.8, 6).fill_color(black)
return post.align_b() + disks.align_b()
draw_stack([0, 1])
def draw_hanoi(state: Hanoi) -> Diagram:
hsep = 7
return concat(
draw_stack(stack).translate(7 * i, 0) for i, stack in enumerate(state)
)
draw_hanoi([[0], [1, 2], []])
def solve_hanoi(num_disks: int) -> List[Move]:
def solve_hanoi_1(num_disks, *, source, spare, target):
if num_disks <= 0:
return []
else:
return (
solve_hanoi_1(num_disks - 1, source=source, spare=target, target=spare)
+ [(source, target)]
+ solve_hanoi_1(num_disks - 1, source=spare, spare=source, target=target)
)
return solve_hanoi_1(num_disks, source=0, spare=1, target=2)
def do_move(move: Move, state: Hanoi) -> Hanoi:
def remove_disk(src, state):
disk, *src_new = state[src]
state_new = state[:src] + [src_new] + state[src + 1 :]
return disk, state_new
def add_disk(tgt, disk, state):
tgt_new = [disk] + state[tgt]
state_new = state[:tgt] + [tgt_new] + state[tgt + 1 :]
return state_new
src, tgt = move
disk, state1 = remove_disk(src, state)
state2 = add_disk(tgt, disk, state1)
return state2
def state_sequence(num_disks: int) -> List[Hanoi]:
state: Hanoi = [list(range(num_disks)), [], []]
states: List[Hanoi] = [state]
for move in solve_hanoi(num_disks):
state = do_move(move, state)
states.append(state)
return states
def draw_state_sequence(seq: List[Hanoi]) -> Diagram:
return concat(draw_hanoi(state).translate(0, 7.5 * i) for i, state in enumerate(seq))
diagram = draw_state_sequence(state_sequence(3))
path = "examples/output/hanoi.svg"
diagram.render_svg(path, height=700)
path = "examples/output/hanoi.png"
diagram.render(path, height=700)
PILImage.open(path)
================================================
FILE: docs/examples/koch.py
================================================
# Based on the following example from Diagrams
# https://archives.haskell.org/projects.haskell.org/diagrams/gallery/Koch.html
from PIL import Image as PILImage
from chalk import *
from chalk.transform import *
import chalk
unit_x = Trail.hrule(1)
def koch(n):
if n == 0:
return unit_x.scale_x(5)
else:
return (
koch(n - 1).scale(1 / 3)
+ koch(n - 1).scale(1 / 3).rotate_by(+1 / 6)
+ koch(n - 1).scale(1 / 3).rotate_by(-1 / 6)
+ koch(n - 1).scale(1 / 3)
)
d = vcat(koch(i).stroke().line_width(0.01) for i in range(1, 5))
# Render
height = 512
d.render_svg("examples/output/koch.svg", height)
d.render("examples/output/koch.png", height)
PILImage.open("examples/output/koch.png")
================================================
FILE: docs/examples/lenet.py
================================================
from PIL import Image as PILImage
from chalk import *
from colour import Color
from chalk import BoundingBox
# Colors
papaya = Color("#ff9700")
blue = Color("#005FDB")
black = Color("#000000")
white = Color("#ffffff")
grey = Color("#bbbbbb")
# Some general functions
def label(te):
"Create text."
return text(te, 2).fill_color(black).line_width(0)
def cover(d, a, b):
"Draw a bounding_box around a subdiagram"
b1 = d.get_subdiagram_envelope(a)
b2 = d.get_subdiagram_envelope(b)
new_bb = b1 + b2
return rectangle(new_bb.width, new_bb.height) \
.translate(new_bb.center.x, new_bb.center.y)
def tile(d, m, n, name = ""):
"Tile a digram with names"
return hcat(vcat(d.named((name, j, i)) for j in range(n)) for i in range(m)).center_xy()
def connect_all(d, a, b):
"Connect all corners of two diagrams"
for x_border in [-unit_x, unit_x]:
for y_border in [-unit_y, unit_y]:
p = x_border + y_border
d = d.connect_perim(a, b, p, p, ArrowOpts(head_arrow=empty()))
return d
# NN drawing
def cell():
return rectangle(1, 1).line_width(0.01)
def matrix(n, r, c):
return tile(cell(), c, r, n)
def back(r, n):
"Backing stack"
return concat((r.translate(-i/2, -i/2).fill_opacity((n - i + n /2) / n)
for i in range(n-1, -1, -1)))
lw = 0.05
def stack(n, size, l, top, bot):
"Feature map stack"
m = matrix(n, size, size).fill_color(Color("#dddddd"))
r = rectangle(size, size).fill_color(grey).line_width(lw)
return (label(top) / (back(r, l) + m) / label(bot)).center_xy()
stack("a", 32, 0, "", "")
def network(n, size, top, bot):
"Draw a network layer"
return (label(top) / rectangle(2, size).fill_color(grey).line_width(lw).named(n) / label(bot)).center_xy()
# The number 7
draw = make_path([(-10, -10), (10, -10 ), (-10, 10)]).line_width(0.09).line_color(blue).fill_opacity(0)
# Draw the main diagram.
h = hstrut(6.5)
d = ((stack("a", 32, 0, "", "") + draw) | (label("conv") / h) |
stack("b", 28, 6, "", "C1") | (label("pool") / h) |
stack("c", 14, 6, "", "S2") | (label("conv") / h) |
stack("d", 10, 16, "", "C3") | (label("pool") / h) | hstrut(-0.5) |
stack("e", 5, 16, "", "S4") | (label("dense") / h) |
network("dense1", 12, "", "") | (label("dense") / (h)) |
network("dense2", 8.4, "", "") | (label("dense") / h) |
network("dense3", 1, "", ""))
d = d.scale_uniform_to_x(5)
# Draw the orange boxes
boxes = [(("a", 2, 2), ("a", 6, 6)),
(("b", 2, 2), ("b", 2, 2)),
(("b", 20, 2), ("b", 23, 5)),
(("c", 10, 2), ("c", 11, 3)),
(("c", 4, 6), ("c", 8, 10)),
(("d", 4, 6), ("d", 4, 6)),
(("d", 6, 4), ("d", 9, 7)),
(("e", 3, 2), ("e", 4, 3))]
d += concat([cover(d, *b).fill_color(papaya).fill_opacity(0.3).named(("box", i))
for i, b in enumerate(boxes)])
connect = [(("box", i), ("box", i + 1)) for i in range(0, 6, 2)]
for b in connect:
d = connect_all(d, *b)
set_svg_height(300)
d
================================================
FILE: docs/examples/squares.py
================================================
from PIL import Image as PILImage
import math
import random
from itertools import product
from colour import Color
from chalk import square, concat, empty
random.seed(0)
def make_square():
colors = [
Color("#ff9700"), # papaya
Color("#005FDB"), # blue
]
# generate uniformly a value in [-max_angle, max_angle]
max_angle = math.pi / 24.0
θ = 2 * max_angle * random.random() - max_angle
# pick a random color
i = random.random() > 0.75
color = colors[i]
return square(0.75).line_color(color).rotate_rad(-θ)
make_square()
def make_group(num_squares=4):
return concat(make_square() for _ in range(num_squares))
make_group()
disps = range(4)
diagram = concat(make_group().translate(x, y) for x, y in product(disps, disps))
diagram = diagram.line_width(0.02)
diagram
================================================
FILE: docs/examples/tensor.py
================================================
from PIL import Image as PILImage
from chalk import *
from colour import Color
h = hstrut(2.5)
papaya = Color("#ff9700")
white = Color("white")
black = Color("black")
def draw_cube():
# Assemble cube
face_m = rectangle(1, 1).align_tl()
face_t = rectangle(1, 0.5).shear_x(-1).align_bl()
face_r = rectangle(0.5, 1).shear_y(-1).align_tr()
cube = (face_t + face_m).align_tr() + face_r
# Replace envelope with front face.
return cube.align_bl().with_envelope(face_m.align_bl())
def draw_tensor(depth, rows, columns):
"Draw a tensor"
cube = draw_cube()
# Fix this ...
hyp = (unit_y * 0.5).shear_x(-1)
# Build a matrix.
front = cat([hcat([cube for i in range(columns)])
for j in reversed(range(rows))], -unit_y).align_t()
# Build depth
return concat(front.translate(-k * hyp.x, -k * hyp.y)
for k in reversed(range(depth)))
draw_tensor(2, 3, 4)
def t(d, r, c):
return draw_tensor(d, r, c).fill_color(white)
def label(te, s=1.5):
return (text(te, s).fill_color(black).line_color(white).center_xy())
# Create a diagram.
d, r, c = 3, 4, 5
base = t(d, r, c).line_color(papaya)
m = hcat([t(1, r, c), t(d, 1, c), label("→"), (base + t(1, r, c)), (base + t(d, 1, c) ), label("="), t(d, r, c)], sep=2.5).line_width(0.02)
m
================================================
FILE: docs/index.md
================================================
---
hide:
- navigation
- toc
---
--8<-- "README.md"
================================================
FILE: docs/overrides/main.html
================================================
{% extends "base.html" %}
{% block content %}
{{ super() }}
{% endblock content %}
================================================
FILE: docs/quickstart/.gitkeep
================================================
================================================
FILE: examples/arrows.py
================================================
from chalk import *
from chalk.trail import Trail
from colour import Color
from PIL import Image as PILImage
grey = Color("grey")
blue = Color("blue")
orange = Color("orange")
octagon = regular_polygon(8, 1.5).rotate_by(1 / 16).line_color(grey).line_width(0.5).show_origin()
dias = octagon.named("first") | hstrut(3) | octagon.named("second")
ex1 = dias.connect(
"first",
"second",
ArrowOpts(trail=Trail.from_offsets([unit_x, 0.25 * unit_y, unit_x, 0.25 * unit_y]))
)
ex1
ex1 = dias.connect(
"first",
"second",
ArrowOpts(
head_style=Style.empty().fill_color(grey),
arc_height=0.5,
shaft_style=Style.empty().line_color(blue),
),
)
ex1 = ex1.connect(
"second",
"first",
ArrowOpts(
head_style=Style.empty().fill_color(grey),
arc_height=0.5,
shaft_style=Style.empty().line_color(blue),
),
)
ex12 = ex1.connect_perim(
"first",
"second",
unit_x.rotate_by(15 / 16),
unit_x.rotate_by(9 / 16),
ArrowOpts(head_pad=0.1),
)
ex3 = arrow_v(unit_y)
d = ex12 + ex3
d
output_path = "examples/output/arrows.svg"
d.render_svg(output_path, height=200)
output_path = "examples/output/arrows.png"
d.render(output_path, height=200)
PILImage.open(output_path)
output_path = "examples/output/arrows.pdf"
d.render_pdf(output_path, height=200)
================================================
FILE: examples/bigben.py
================================================
# # Big Ben
# *A literate notebook by [Sasha Rush](http://www.rush-nlp.com)*
# [Big Ben](https://en.wikipedia.org/wiki/Big_Ben) is the most iconic clock face in the world.
# Dan Oneață and Alexander Rush .
### Preview Controls
use_directory_urls: true
strict: false
dev_addr: localhost:8000
### Configuration
docs_dir: docs
# watch a list of directories for changes
# and automatically regenerate the docs
watch:
- chalk
### Theme
theme:
name: material
include_sidebar: true
custom_dir: docs/overrides
#custom_dir: overrides
palette:
- media: "(prefers-color-scheme: light)"
scheme: default
primary: white
accent: amber
# toggle:
# # icon: material/lightbulb-outline
# icon: material/toggle-switch-off-outline
# name: Switch to dark mode
# - media: "(prefers-color-scheme: dark)"
# scheme: slate
# primary: white
# accent: amber
# toggle:
# # icon: material/lightbulb
# icon: material/toggle-switch
# name: Switch to light mode
features:
- content.code.annotate
- content.tabs.link
# - header.autohide
# - navigation.expand
- navigation.indexes # @regular
- navigation.instant # @regular | enables "instant-loading"; good for a very large docs repo.
- navigation.sections # @regular | extending top level sections.
- navigation.tabs # @regular | enables showing toplevel sections as tabs (horizontal).
- navigation.tabs.sticky # @regular | keeps the tabs visible even when you have scrolled down.
- navigation.top # @regular | adds a "back-to-top" is shown after the user scrolls down and then starts to come back up again.
- navigation.tracking # @insiders
- search.highlight
- search.share
- search.suggest
- toc.integrate: false # @regular | integrates the nav (on-left) with toc (on-right) and places the integrated nav+toc on-left.
icon:
# repo: fontawesome/brands/git-square
repo: fontawesome/brands/git-alt
# repo: fontawesome/brands/github
# repo: fontawesome/brands/github-alt
# repo: fontawesome/brands/github-square
logo: logo.png # img/icon-white.svg
# favicon: logo.png # img/favicon.png
font:
text: Roboto
code: Roboto Mono # Source Code Pro, JetBrains Mono, Roboto Mono
language: en
### Plugins
plugins:
- exclude:
glob:
- '*/storage/*'
- search:
indexing: 'full' # 'full' (default), 'sections', 'titles'
- autorefs
- git-revision-date
# macros must be placed after plugin: git-revision-date
- macros:
include_dir: docs/assets/snippets # snippets
# j2_block_start_string: '{{%'
# j2_block_end_string: '%}}'
# j2_variable_start_string: '{{'
# j2_variable_end_string: '}}'
- markdownextradata:
data: data
- minify:
minify_html: true
# - social # @insiders
- mkdocs-jupyter:
include_source: true
ignore_h1_titles: true
execute: true
- tooltips
- mkdocstrings
### Extensions
markdown_extensions:
# - abbr
# - admonition
# - attr_list
# - codehilite
# - def_list
# - extra
# - footnotes
# - meta
# - md_in_html
# - smarty
# - tables
# - toc
##! Controls: markdown.extensions
- markdown.extensions.abbr # same as: - abbr
- markdown.extensions.admonition # same as: - admonition
- markdown.extensions.attr_list # same as: - attr_list
- markdown.extensions.codehilite: # same as: - codehilite
guess_lang: false
- markdown.extensions.def_list # same as: - def_list
- markdown.extensions.extra # same as: - extra
- markdown.extensions.footnotes # same as: - footnotes
- markdown.extensions.meta: # same as: - meta
- markdown.extensions.md_in_html # same as: - md_in_html
- markdown.extensions.smarty: # same as: - smarty
smart_quotes: false
- markdown.extensions.tables # same as: - tables
- markdown.extensions.toc: # same as: - toc
slugify: !!python/name:pymdownx.slugs.uslugify
permalink: true
toc_depth: 6 # default: 6
#separator: "-"
- markdown_include.include:
base_path: docs
##! Controls: mdx
- mdx_include:
base_path: docs
- mdx_truly_sane_lists:
nested_indent: 2
truly_sane: true
##! Controls: pymdownx
- pymdownx.arithmatex:
generic: true
# - pymdownx.b64:
# base_path: '.'
- pymdownx.betterem:
smart_enable: all # default: 'underscore' ; options: 'underscore', 'all', 'asterisk', or 'none'
- pymdownx.caret: # "super^script^" will render as superscript text: superscript .
smart_insert: true # default: true
insert: true # default: true
superscript: true # default: true
- pymdownx.critic
- pymdownx.details
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
- pymdownx.escapeall:
hardbreak: false
nbsp: false
# Uncomment these 2 lines during development to more easily add highlights
- pymdownx.highlight:
use_pygments: true # this uses pygments
linenums: false # Set "linenums" to true for enabling
# code-block line-numbering
# globally.
# None: only enable line-numbering on a per code-block basis.
# False: disable line-numbering globally.
auto_title: false
auto_title_map: {
"Python Console Session": "Python", # lang: pycon
}
linenums_style: pymdownx-inline # table or pymdownx-inline
- pymdownx.inlinehilite:
custom_inline:
- name: math
class: arithmatex
format: !!python/name:pymdownx.arithmatex.inline_mathjax_format
- pymdownx.keys:
separator: "\uff0b"
- pymdownx.magiclink:
repo_url_shortener: true
repo_url_shorthand: true #
social_url_shorthand: true
social_url_shortener: true
user: !ENV REPO_OWNER # sugatoray, danoneata (github userid)
repo: chalk #
normalize_issue_symbols: true
- pymdownx.mark:
smart_mark: true
- pymdownx.pathconverter:
base_path: 'chalk' # default: ''
relative_path: '' # default ''
absolute: true # default: false
tags: 'a script img link object embed'
- pymdownx.progressbar:
level_class: true
add_classes: ''
#'progress-0plus progress-10plus progress-20plus progress-30plus progress-40plus progress-50plus progress-60plus progress-70plus progress-80plus progress-90plus progress-100plus'
progress_increment: 10
- pymdownx.saneheaders
- pymdownx.superfences:
# highlight_code: true # This was removed from pymdownx v9.0
preserve_tabs: false
disable_indented_code_blocks: false # default: false | set this to "true"
# if you only use fenced code-blocks.
custom_fences:
- name: mermaid
class: mermaid
format: !!python/name:pymdownx.superfences.fence_code_format ''
- name: math
class: arithmatex
format: !!python/name:pymdownx.arithmatex.fence_mathjax_format
# - name: md-render
# class: md-render
# format: !!python/name:tools.pymdownx_md_render.md_sub_render
- pymdownx.smartsymbols
- pymdownx.snippets:
base_path:
- '.'
- './docs_src'
- './LICENSE'
- './README.md'
- './doc' # [TODO: move the contents of this folder to the docs folder]
encoding: 'utf-8' # Encoding to use when reading in the snippets.
check_paths: true # Make the build fail if a snippet can't be found.
- pymdownx.striphtml
- pymdownx.tabbed
- pymdownx.tasklist:
custom_checkbox: true
- pymdownx.tasklist:
custom_checkbox: true
- pymdownx.tilde # ~~text~~ will render as strikethrough text. "sub~script" will render as subscript text: subscript .
### Customization
# extra:
# version:
# default: latest
# provider: mike
# disqus: !ENV REPO_OWNER
#alternate:
#- name: en - English
# link: /
# lang: en
### Extra CSS
extra_css:
## for: termynal (terminal animation)
- assets/css-js/termynal/css/termynal.css
- assets/css-js/termynal/css/custom.css
## for: pymdownx.progressbar
- assets/css-js/general/css/progressbar.css
# - assets/css-js/pymdownx-extras/css/extra.css # (for striped progress bar)
## for: mkdocs-tooltips
- assets/css-js/mkdocs-tooltips/css/hint.min.css
- assets/css-js/mkdocs-tooltips/css/custom.css
## for: mkdocs-material using highlight.js
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css
## for: fastapi like side-theme
- assets/css-js/fastapi/custom.css
### Extra JS
extra_javascript:
## for: pymdownx.arithmatex
- https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML
## for: markdown.extensions.tables
- https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
- assets/css-js/general/js/tables.js
## for: termynal (terminal animation)
- assets/css-js/termynal/js/termynal.js
- assets/css-js/termynal/js/custom.js
# Set the environment variable "FONTAWESOME_KIT" with the value of the kit.
- !ENV FONTAWESOME_KIT
## for: lottiefiles
- https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js
## for: mkdocs-material using highlight.js
- https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js
- assets/css-js/general/js/highlight-config.js
## for: mkdocs-markmap
- https://unpkg.com/d3@6.7.0/dist/d3.min.js
- https://unpkg.com/markmap-lib@0.11.5/dist/browser/index.min.js
- https://unpkg.com/markmap-view@0.2.6/dist/index.min.j
## Others
- https://polyfill.io/v3/polyfill.min.js?features=es6
# - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
## for: fastapi like side-theme
- assets/css-js/fastapi/custom.js
- assets/css-js/fastapi/chat.js
### Pages: Navigation
## @@ Begin NAVIGATION
nav:
- Home: index.md
- API:
- Shapes: api/shapes.py
- Alignment: api/alignment.py
- Combinators: api/combinators.py
- Transformations: api/transformations.py
- Style: api/style.py
- Rendering: api/rendering.py
- Trails: api/trails.py
- Connections: api/names.py
- Utils: api/utils.md
- Internals: api/internals.md
- Examples:
- BigBen: examples/bigben.py
- Hanoi: examples/hanoi.py
- Koch: examples/koch.py
- LeNet: examples/lenet.py
- Squares: examples/squares.py
- Tensor: examples/tensor.py
- Tree: examples/tree.py
- About:
- about/index.md
- License: about/license.md
## @@ End NAVIGATION
================================================
FILE: pyproject.toml
================================================
[build-system]
requires = [
"setuptools",
"wheel"
]
build-backend = "setuptools.build_meta"
================================================
FILE: requirements/dev.txt
================================================
flake8>=3.6.0
black>=19.3b0
mypy>=0.95
interrogate>=1.5.0
isort>=5.10.0
darglint>=1.8.0
pre-commit>=2.2.0
# flake8-print>=4.4.0
pytest>=4.0.2
hypothesis
================================================
FILE: requirements/docs.txt
================================================
mkdocs
mkdocs-material==8.1.3
mkdocs-material-extensions>=1.0.3
pymdown-extensions>=9.0
mdx-include>=1.4.1
markdown-include>=0.6.0
mdx_truly_sane_lists>=1.2
pygments
jupyter
## Navigation & page building
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#navigation--page-building
mkdocs-exclude>=1.0.2
mkdocs-awesome-pages-plugin>=2.5.0
mkdocs-markdownextradata-plugin>=0.2.4
## Links & references
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#links--references
mkdocs-redirects>=1.0.3
mkdocs-tooltipster-links-plugin>=0.1.0
## HTML processing & CSS styling
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#html-processing--css-styling
mkdocs-minify-plugin>=0.4.1
mkdocs-enumerate-headings-plugin>=0.4.5
## API documentation building
mkapi
mkautodoc
mkdocstrings[python]>=0.16.2
mkdocs-gen-files>=0.3.3
mkdocs-autorefs>=0.3.1
## Citations & bibliography
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#citations--bibliography
mkdocs-bibtex>=1.0.0
## Code execution, variables & templating
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#code-execution-variables--templating
pydoc-markdown>=4.6.3
mkdocs-jupyter>=0.18.2
mkdocs-markdownextradata-plugin>=0.2.4
mkdocs-markmap>=2.1.2
## Git repos and info
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#git-repos--info
mkdocs-macros-plugin>=0.6.0
mkdocs-git-revision-date-plugin>=0.3.1
## Images, Tables, Charts & Graphs
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#images-tables-charts--graphs
mkdocs-kroki-plugin>=0.2.0
mkdocs-drawio-exporter>=0.8.0
mkdocs-table-reader-plugin>=0.6
## PDF & site conversion
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#pdf--site-conversion
# https://doc.courtbouillon.org/weasyprint/latest/first_steps.html#linux
mkdocs-pdf-export-plugin>=0.5.9
## Other
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#other
mkdocs-tooltips>=0.1.0
mkdocs-coverage>=0.2.4
## Reusing content, snippets & includes
# source: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins#reusing-content-snippets--includes
mkdocs-include-markdown-plugin>=3.2.3
================================================
FILE: requirements.txt
================================================
toolz
colour
svgwrite
cairosvg
Pillow
git+https://github.com/chalk-diagrams/planar
latextools
loguru
typing-extensions
importlib-metadata
================================================
FILE: setup.cfg
================================================
[bdist_wheel]
# what is this for?
# - https://packaging.python.org/en/latest/guides/distributing-packages-using-setuptools/#wheels
universal=0
[metadata]
license_file = LICENSE
[black]
line-length = 79
# exclude = '''
# /(
# \.archive
# | \.git
# | \.hg
# | \.mypy_cache
# | \.tox
# | \.venv
# | \.vscode
# | _build
# | buck-out
# | build
# | dist
# | migrations
# | site
# )/
# '''
[isort]
# make it compatible with black
profile = black
# # Make sure this matches `*.py` in .editorconfig
# ensure_newline_before_comments = true
# force_single_line = true
# lines_after_imports = 3
# include_trailing_comma = true
# use_parentheses = true
[flake8]
per-file-ignores=chalk/__init__.py: F401
max-line-length = 88
extend-ignore = E203
[darglint]
##? Source: https://github.com/terrencepreilly/darglint
## Ignore properties
ignore_properties = 1
## Ignore private methods
ignore_regex = ^_(.*)
## Use message template
# message_template = {msg_id}@{path}:{line}
## Docstring style to use:
# - google (default)
# - sphinx
# - numpy
docstring_style = google
## How strict?
# short: One-line descriptions are acceptable; anything
# more and the docstring will be fully checked.
#
# long: One-line descriptions and descriptions without
# arguments/returns/yields/etc. sections will be
# allowed. Anything more, and the docstring will
# be fully checked.
#
# full: (Default) Docstrings will be fully checked.
strictness = long
## Ignore common exceptions
# ignore_raise = ValueError,MyCustomError
## Ignore Specific Error Codes
# Example: ignore = DAR402,DAR103
#------------------------------------------------------------------------
# DAR001 # The docstring was not parsed correctly due to a syntax error.
# DAR002 # An argument/exception lacks a description
# DAR003 # A line is under-indented or over-indented.
# DAR004 # The docstring contains an extra newline where it shouldn't.
# DAR005 # The item contains a type section (parentheses), but no type.
# DAR101 # The docstring is missing a parameter in the definition.
# DAR102 # The docstring contains a parameter not in function.
# DAR103 # The docstring parameter type doesn't match function.
# DAR104 # (disabled) The docstring parameter has no type specified
# DAR105 # The docstring parameter type is malformed.
# DAR201 # The docstring is missing a return from definition.
# DAR202 # The docstring has a return not in definition.
# DAR203 # The docstring parameter type doesn't match function.
# DAR301 # The docstring is missing a yield present in definition.
# DAR302 # The docstring has a yield not in definition.
# DAR401 # The docstring is missing an exception raised.
# DAR402 # The docstring describes an exception not explicitly raised.
# DAR501 # The docstring describes a variable which is not defined.
#------------------------------------------------------------------------
ignore = DAR103
[mypy]
strict = true
warn_unreachable = true
pretty = true
show_column_numbers = true
show_error_codes = true
show_error_context = true
[mypy-chalk]
implicit_reexport = true
[mypy-chalk.shapes]
implicit_reexport = true
================================================
FILE: setup.py
================================================
import pathlib
from setuptools import find_packages, setup
LICENSE: str = "MIT"
README: str = pathlib.Path("README.md").read_text(encoding="utf-8")
# ---------------------------------------------------------------
# NOTE:
# Since the library name (chalk-diagrams) is different from
# the module (chalk), we set the custom dunder attribute
# __libname__ in chalk/__init__.py and use it there to fetch
# and set __version__ with library metadata inside
# chalk/__init__.py.
# Since, library name will not be changed in future, it is
# being maintained at two places
# 1. setup.py
# 1. chalk/__init__.py
#
# The version will be updated often only from setup.py.
# ---------------------------------------------------------------
LIBNAME: str = "chalk-diagrams"
setup(
name=LIBNAME,
version="0.2.2",
packages=find_packages(
include=["chalk", "chalk*"],
exclude=["examples", "docs", "test*"],
),
description="A declarative drawing API",
install_requires=[
"toolz",
"colour",
"svgwrite",
"Pillow",
"loguru",
"chalk-planar",
"typing-extensions",
"importlib-metadata",
],
extras_require={
"tikz": ["pylatex"],
"latex": ["latextools"],
"png": ["pycairo"],
"svg": ["cairosvg"],
},
long_description=README,
long_description_content_type="text/markdown",
author="Dan Oneață",
author_email="dan.oneata@gmail.com",
url="https://github.com/chalk-diagrams/chalk",
project_urls={
"Documentation": "https://chalk-diagrams.github.io",
"Source Code": "https://github.com/chalk-diagrams/chalk",
"Issue Tracker": "https://github.com/chalk-diagrams/chalk/issues",
},
license=LICENSE,
license_files=("LICENSE",),
classifiers=[
"Intended Audience :: Science/Research",
"Operating System :: OS Independent",
"Programming Language :: Python :: 3",
"Programming Language :: Python :: 3.7",
"Programming Language :: Python :: 3.8",
"Programming Language :: Python :: 3.9",
f"License :: OSI Approved :: {LICENSE} License",
"Topic :: Scientific/Engineering",
],
)
================================================
FILE: tests/test_envelope.py
================================================
import math
import pytest
from hypothesis import given
from hypothesis.strategies import (
DrawFn,
composite,
integers,
lists,
one_of,
sampled_from,
)
import chalk
from chalk import (
P2,
V2,
Diagram,
Trail,
circle,
empty,
make_path,
origin,
rectangle,
unit_x,
unit_y,
)
@composite
def vectors(draw: DrawFn) -> V2:
x = draw(integers(min_value=-2, max_value=2).filter(lambda x: x != 0))
y = draw(integers(min_value=-2, max_value=2).filter(lambda x: x != 0))
return V2(x, y)
small_nat = integers(min_value=1, max_value=10)
@composite
def trails(draw: DrawFn) -> Trail:
vs = draw(lists(vectors(), min_size=1))
return Trail.from_offsets(vs)
@composite
def paths(draw: DrawFn) -> Diagram:
return draw(trails()).stroke().center_xy()
@composite
def circles(draw: DrawFn) -> Diagram:
return circle(draw(small_nat))
@composite
def rects(draw: DrawFn) -> Diagram:
return rectangle(draw(small_nat), draw(small_nat))
@composite
def shapes(draw: DrawFn) -> Diagram:
return draw(one_of(paths(), rects(), circles()))
@composite
def diagrams(draw: DrawFn) -> Diagram:
shape = empty()
for j in range(3):
lshape = draw(shapes())
shape += chalk.transform.apply_affine(draw(transforms()), lshape)
return shape
@composite
def transforms(draw: DrawFn) -> chalk.transform.Affine:
v2 = draw(vectors())
return draw(
sampled_from(
[
chalk.transform.Affine.scale(v2),
chalk.transform.Affine.translation(v2),
chalk.transform.Affine.rotation(v2.angle),
]
)
)
@given(diagrams(), vectors())
def test_envelope_trail(diagram: Diagram, vec: V2) -> None:
"Property -> Envelope bounds trace."
trace = diagram.get_trace()
env = diagram.get_envelope()
ts = trace(P2(0, 0), vec)
e = env(vec)
for t in ts:
assert e == pytest.approx(t) or e > t
@given(diagrams(), vectors())
def test_pad(diagram: Diagram, vec: V2) -> None:
orig = diagram.get_envelope()(vec)
p = diagram.pad(2)
assert p.get_envelope()(vec) == pytest.approx(2 * orig)
vec = vec.normalized()
orig = diagram.get_envelope()(vec)
f = diagram.frame(2)
assert f.get_envelope()(vec) == pytest.approx(2 + orig)
# Some specific tests.
def test_square() -> None:
square = make_path([(0, 0), (1, 0), (1, 1), (0, 1), (0, 0)])
env = square.get_envelope()
assert env(unit_x) == 1
assert env(2 * unit_x) == 0.5
assert env(unit_y) == 1
assert env((unit_x + unit_y).normalized()) == pytest.approx(
math.sqrt(1 + 1)
)
def test_circle() -> None:
d = circle(1)
env = d.get_envelope()
assert env(unit_x) == 1
assert env(2 * unit_x) == 0.5
assert env(unit_y) == 1
assert env((unit_x + unit_y).normalized()) == pytest.approx(1)
def test_circle_trace() -> None:
d = circle(1)
trace = d.get_trace()
assert set(trace(origin, unit_x)) == set([-1.0, 1.0])
assert set(trace(origin, (2 * unit_x))) == set([-0.5, 0.5])
assert set(trace(origin, unit_y)) == set([-1.0, 1.0])
trace(origin, (unit_x + unit_y))
def test_path_trace() -> None:
d = make_path([(1, 0), (1, 1)])
trace = d.get_trace()
assert trace.trace_v(origin, (unit_x + unit_y)) == V2(1.0, 1.0)
assert trace.trace_v(origin, (unit_x + unit_y).normalized()) == V2(
1.0, 1.0
)
def test_transform() -> None:
square = make_path([(0, 0), (1, 0), (1, 1), (0, 1), (0, 0)])
env = square.scale_x(2).scale_y(3).get_envelope()
assert env(unit_x) == 2
assert env(2 * unit_x) == 1
assert env(unit_y) == 3
env = square.rotate(45).get_envelope()
assert env((unit_x + unit_y).normalized()) == pytest.approx(1)
env = square.translate(-2, -2).get_envelope()
assert env(unit_x) == pytest.approx(-1)
================================================
FILE: tests/test_reverse_trail.py
================================================
from hypothesis import given
from hypothesis.strategies import (
DrawFn,
composite,
integers,
one_of,
sampled_from,
)
import chalk
from chalk import V2, Trail, unit_x
from chalk.shapes.arc import arc_seg_angle
from chalk.shapes.segment import seg
@composite
def vectors(draw: DrawFn) -> V2:
x = draw(integers(-2, 2))
y = draw(integers(-2, 2))
return V2(x, y)
@composite
def transforms(draw: DrawFn) -> chalk.transform.Affine:
v2 = draw(vectors())
return draw(
sampled_from(
[
chalk.transform.Affine.scale(unit_x),
chalk.transform.Affine.scale(v2),
chalk.transform.Affine.translation(v2),
chalk.transform.Affine.rotation(v2.angle),
]
)
)
@composite
def segment(draw: DrawFn) -> Trail:
dx = draw(integers())
dy = draw(integers())
return seg(V2(dx, dy))
@composite
def arc(draw: DrawFn) -> Trail:
angle = draw(integers(-360, 360))
dangle = draw(integers(0, 360))
return arc_seg_angle(angle, dangle)
small_nat = integers(min_value=1, max_value=10)
@composite
def trails(draw: DrawFn) -> Trail:
parts = (
draw(one_of(segment(), arc())).apply_transform(draw(transforms()))
for _ in range(draw(small_nat))
)
return sum(parts, Trail.empty())
@given(trails())
def test_involution(t: Trail) -> None:
"Reverse should be an involution."
assert t.reverse().reverse() == t
@given(trails(), trails())
def test_order(t1: Trail, t2: Trail) -> None:
assert (t1 + t2).reverse() == t2.reverse() + t1.reverse()
# Other possible tests?
# - End point of reversed trail should correspond to start point of original
# trail (and vicevers);
# - The shape of the trail is preserved.
================================================
FILE: docs/api/names.py
================================================
# + tags=["hide_inp"]
from colour import Color
from chalk.core import BaseDiagram
from chalk import *
def help(f):
import pydoc
from IPython.display import HTML
return HTML(pydoc.HTMLDoc().docroutine(f))
set_svg_height(100)
# -
# Chalk supports basic methods for complex connected layouts and diagrams.
# Individual elements can be assigned names, and then be referenced in their subdiagram locations.
# As we will see, names are particularly useful for connecting different parts of the diagram with arrows.
# Our implementation follows the API of the Haskell [diagrams](https://diagrams.github.io/doc/manual.html#named-subdiagrams) library,
# but named nodes are also common in TikZ.
#
# ### Diagram.named
# + tags=["hide_inp"]
help(BaseDiagram.named)
# -
diagram = circle(0.5).named("x") | square(1)
diagram
# ### Diagram.get_subdiagram
# + tags=["hide_inp"]
help(BaseDiagram.get_subdiagram)
# -
# A `Subdiagram` is a `Diagram` paired with its enclosing context (a `Transformation` for the moment; but `Style` should also be added at some point).
# It has the following methods:
# - `get_envelope`, which returns the corresponding `Envelope`
# - `get_trace`, which returns the corresponding `Trace`
# - `get_location`, which returns the local origin of the `Subdiagram`
# - `boundary_from`, which return the furthest point on the boundary of the `Subdiagram`, starting from the local origin of the `Subdigram` and going in the direction of a given vector.
#
diagram = circle(0.5).named("x") | square(1)
sub = diagram.get_subdiagram("x")
diagram + circle(0.2).translate_by(sub.get_location())
# ### Diagram.with_names
# + tags=["hide_inp"]
help(BaseDiagram.with_names)
# -
root = circle(1).named("root")
leaves = hcat([circle(1).named(c) for c in "abcde"], sep=0.5).center()
def connect(subs, nodes):
root, leaf = subs
pp = tuple(root.boundary_from(unit_y))
pc = tuple(leaf.boundary_from(-unit_y))
return nodes + make_path([pp, pc])
nodes = root / vstrut(2) / leaves
for c in "abcde":
nodes = nodes.with_names(["root", c], connect)
nodes
# ### Diagram.qualify
# + tags=["hide_inp"]
help(BaseDiagram.qualify)
# -
red = Color("red")
def attach(subs, dia):
sub1, sub2 = subs
p1 = tuple(sub1.get_location())
p2 = tuple(sub2.get_location())
return dia + make_path([p1, p2]).line_color(red)
def squares():
s = square(1)
return (
(s.named("NW") | s.named("NE")) /
(s.named("SW") | s.named("SE")))
dia = hcat([squares().qualify(str(i)) for i in range(5)], sep=0.5)
pairs = [
(("0", "NE"), ("2", "SW")),
(("1", "SE"), ("4", "NE")),
(("3", "NW"), ("3", "SE")),
(("0", "SE"), ("1", "NW")),
]
dia
for pair in pairs:
dia = dia.with_names(pair, attach)
dia
# ### Diagram.show_labels
# + tags=["hide_inp"]
help(BaseDiagram.show_labels)
# -
dia.show_labels(font_size=0.2)
# ### Diagram.connect
# + tags=["hide_inp"]
help(BaseDiagram.connect)
# -
diagram = circle(0.5).named("x") | hstrut(1) | square(1).named("y")
diagram.connect("x", "y")
# ### Diagram.connect_outside
# + tags=["hide_inp"]
help(BaseDiagram.connect_outside)
# -
diagram = circle(0.5).named("x") | hstrut(1) | square(1).named("y")
diagram.connect_outside("x", "y")
================================================
FILE: docs/api/rendering.py
================================================
# + tags=["hide"]
import math
from chalk.core import BaseDiagram
from chalk import *
def help(f):
import pydoc
from IPython.display import HTML
return HTML(pydoc.HTMLDoc().docroutine(f))
# -
# Chalk supports three back-ends (Cairo, SVG, TikZ),
# which allow the created `Diagram`s to be rendered as PNG, SVG, PDF files, respectively.
# The three corresponding methods for rendering are: `render`, `render_svg`, `render_pdf`;
# these are documented below.
#
# ### Diagram.render
# + tags=["hide_inp"]
help(BaseDiagram.render)
# -
circle(1).render("circle.png")
from IPython.display import Image
Image("circle.png")
# ### Diagram.render_svg
# + tags=["hide_inp"]
help(BaseDiagram.render_svg)
# -
# ### Diagram.render_pdf
# + tags=["hide_inp"]
help(BaseDiagram.render_pdf)
# -
# ### ``Diagram``s in IPython notebooks
# When a ``Diagram`` is used in an IPython notebook, it is automatically displayed as an SVG.
# To adjust the height of the generated image, one can use the `set_svg_height` function:
# + tags=["hide_inp"]
help(set_svg_height)
# -
# This function is particularly useful for showing tall drawings:
set_svg_height(500)
vcat([circle(1) for _ in range(5)])
================================================
FILE: docs/api/shapes.py
================================================
# + tags=["hide"]
from chalk.core import BaseDiagram
from chalk import *
def help(f):
import pydoc
from IPython.display import HTML
return HTML(pydoc.HTMLDoc().docroutine(f))
# -
# Elementary diagrams can be created using shapes: polygons, circle-like shapes, text and paths.
# ## Polygons
# ### Triangle
# + tags=["hide_inp"]
help(triangle)
# -
triangle(1)
# ### Square and rectangle
# + tags=["hide_inp"]
help(square)
# -
square(1)
# + tags=["hide_inp"]
help(rectangle)
# -
rectangle(3, 1, 0.0)
# ### Regular polygon
# + tags=["hide_inp"]
help(regular_polygon)
# -
hcat(
[
regular_polygon(5, 1),
regular_polygon(6, 1),
regular_polygon(7, 1),
],
sep=0.5,
)
# ## Circle-like shapes
# ### Circle
# + tags=["hide_inp"]
help(circle)
# -
circle(1)
# ### Arc
# Arcs can be specified either using angles (see ``arc``) or points (see ``arc_between``).
# + tags=["hide_inp"]
help(arc)
# -
quarter = 90
arc(1, 0, quarter)
arc(1, 0, quarter) + arc(1, 2 * quarter, 3 * quarter)
# + tags=["hide_inp"]
help(arc_between)
# -
arc_between((0, 0), (1, 0), 1)
# ## Text
# + tags=["hide_inp"]
help(text)
# -
# Note that unlike other shapes, ``text`` has an empty envelope, so we need to explicitly specify it in order to get a non-empty rendering.
text("hello", 1).with_envelope(rectangle(2.5, 1))
# ## Paths
# + tags=["hide_inp"]
help(make_path)
# -
make_path([(0, 0), (0, 1), (1, 1), (1, 2)])
================================================
FILE: docs/api/style.py
================================================
# + tags=["hide_inp"]
from chalk.core import BaseDiagram
from chalk import *
def help(f):
import pydoc
from IPython.display import HTML
return HTML(pydoc.HTMLDoc().docroutine(f))
# -
# Diagrams can be styled using standard vector graphic style
# primitives. Colors use the Python [colour](https://github.com/vaab/colour) library.
from colour import Color
blue = Color("blue")
orange = Color("orange")
# ### Diagram.fill_color
# + tags=["hide_inp"]
help(BaseDiagram.fill_color)
# -
#
triangle(1).fill_color(blue)
# ### Diagram.fill_opacity
# + tags=["hide_inp"]
help(BaseDiagram.fill_opacity)
# -
#
triangle(1).fill_color(blue).fill_opacity(0.2)
# ### Diagram.line_color
# + tags=["hide_inp"]
help(BaseDiagram.line_color)
# -
#
triangle(1).line_color(blue)
# ### Diagram.line_width
# + tags=["hide_inp"]
help(BaseDiagram.line_width)
# -
#
triangle(1).line_width(0.05)
# ### Diagram.dashing
# + tags=["hide_inp"]
help(BaseDiagram.dashing)
# -
#
triangle(1).dashing([0.2, 0.1], 0)
# ### Advanced Example
# Example: Outer styles override inner styles
(triangle(1).fill_color(orange) | square(2)).fill_color(blue)
================================================
FILE: docs/api/trails.py
================================================
# + tags=["hide_inp"]
import math
from chalk import *
from planar import Vec2Array
def help(f):
import pydoc
from IPython.display import HTML
return HTML(pydoc.HTMLDoc().docroutine(f))
# -
# Chalk also includes a ``Trail`` primitive which allows for creating new ``Diagram``s and more complex shapes.
# ``Trail``s are specified by position-invariant offsets and can be rendered as ``Path``s.
# See the [Koch](../examples/koch/) example for a use case.
# ### Constructors
# ``Trail``s are a sequence of vectors and can be constructed using the ``from_offsets`` method:
trail = Trail.from_offsets([V2(1, 0), V2(1, 1), V2(0, 1)])
# ### Converting to ``Diagram``
# In order to render, `Trail`s have to be turned into ``Diagram``s, which can be achieved using the `stroke` method.
# + tags=["hide_inp"]
help(Trail.stroke)
# -
trail.stroke()
# ### Transformations
# `Trail`s can be transformed using the usual geometric transformations, which are also applied to the ``Diagram`` object.
# For example, ``Trail``s can be rotated:
# + tags=["hide_inp"]
help(Trail.rotate_by)
# -
trail2 = trail.rotate_by(0.2)
trail2.stroke()
# However, since `Trail`s are translation invariant, applying the `translate` method leaves the `Trail` instance unchanged.
# ### Composition
# ``Trail``s form a monoid with addition given by list concatenation and identity given by the empty list.
# Intuitively, adding two ``Trails`` appends the two sequences of offsets.
# + tags=["hide_inp"]
help(Trail.__add__)
# -
(trail + trail2).stroke()
================================================
FILE: docs/api/transformations.py
================================================
# + tags=["hide_inp"]
from chalk.core import BaseDiagram
from chalk import *
def help(f):
import pydoc
from IPython.display import HTML
return HTML(pydoc.HTMLDoc().docroutine(f))
# -
# Any Diagram (or other object in Chalk) can be transformed by affine transformation.
# These produce a new diagram in the standard manner.
# ### scale
# + tags=["hide_inp"]
help(BaseDiagram.scale)
# -
#
triangle(1) | triangle(1).scale(2)
# Transformations apply to the whole diagram.
(triangle(1) | triangle(1)).scale(2)
# ### translate
# + tags=["hide_inp"]
help(BaseDiagram.translate)
# -
#
triangle(1).translate(1, 1).show_envelope().show_origin()
#
triangle(1) + triangle(1).translate(1, 1)
# ### shear_x
# + tags=["hide_inp"]
help(BaseDiagram.shear_x)
# -
#
square(1).shear_x(0.25).show_envelope()
#
square(1) | square(1).shear_x(0.25)
# ### rotate
# + tags=["hide_inp"]
help(BaseDiagram.rotate)
# -
#
triangle(1) | triangle(1).rotate(90)
# ### rotate_by
# + tags=["hide_inp"]
help(BaseDiagram.rotate_by)
# -
#
triangle(1) | triangle(1).rotate_by(0.2)
================================================
FILE: docs/api/utils.md
================================================
---
title: chalk.utils
---
# **`{{ title }}`**
👍
::: {{ title }}
================================================
FILE: docs/assets/css-js/as-fastapi/chat.js
================================================
((window.gitter = {}).chat = {}).options = {
room: 'tiangolo/fastapi'
};
================================================
FILE: docs/assets/css-js/as-fastapi/custom.css
================================================
/* source: https: //github.com/tiangolo/fastapi/blob/1876ebc77949a9a254909ec61ea0c09365169ec2/docs/en/docs/css/custom.css */
.termynal-comment {
color: #4a968f;
font-style: italic;
display: block;
}
.termy [data-termynal] {
white-space: pre-wrap;
}
a.external-link::after {
/* \00A0 is a non-breaking space
to make the mark be on the same line as the link
*/
content: "\00A0[↪]";
}
a.internal-link::after {
/* \00A0 is a non-breaking space
to make the mark be on the same line as the link
*/
content: "\00A0↪";
}
.shadow {
box-shadow: 5px 5px 10px #999;
}
/* Give space to lower icons so Gitter chat doesn't get on top of them */
.md-footer-meta {
padding-bottom: 2em;
}
.user-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.user-list-center {
justify-content: space-evenly;
}
.user {
margin: 1em;
min-width: 7em;
}
.user .avatar-wrapper {
width: 80px;
height: 80px;
margin: 10px auto;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.user .avatar-wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.user .title {
text-align: center;
}
.user .count {
font-size: 80%;
text-align: center;
}
a.announce-link:link,
a.announce-link:visited {
color: #fff;
}
a.announce-link:hover {
color: var(--md-accent-fg-color);
}
.announce-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.announce-wrapper div.item {
display: none;
}
.announce-wrapper .sponsor-badge {
display: block;
position: absolute;
top: -5px;
right: 0;
font-size: 0.5rem;
color: #999;
background-color: #666;
border-radius: 10px;
padding: 0 10px;
z-index: 10;
}
.announce-wrapper .sponsor-image {
display: block;
border-radius: 20px;
}
.announce-wrapper>div {
min-height: 40px;
display: flex;
align-items: center;
}
.twitter {
color: #00acee;
}
================================================
FILE: docs/assets/css-js/as-fastapi/custom.js
================================================
// source: https://github.com/tiangolo/fastapi/blob/1876ebc77949a9a254909ec61ea0c09365169ec2/docs/en/docs/js/custom.js
const div = document.querySelector('.github-topic-projects')
async function getDataBatch(page) {
const response = await fetch(`https://api.github.com/search/repositories?q=topic:fastapi&per_page=100&page=${page}`, { headers: { Accept: 'application/vnd.github.mercy-preview+json' } })
const data = await response.json()
return data
}
async function getData() {
let page = 1
let data = []
let dataBatch = await getDataBatch(page)
data = data.concat(dataBatch.items)
const totalCount = dataBatch.total_count
while (data.length < totalCount) {
page += 1
dataBatch = await getDataBatch(page)
data = data.concat(dataBatch.items)
}
return data
}
function setupTermynal() {
document.querySelectorAll(".use-termynal").forEach(node => {
node.style.display = "block";
new Termynal(node, {
lineDelay: 500
});
});
const progressLiteralStart = "---> 100%";
const promptLiteralStart = "$ ";
const customPromptLiteralStart = "# ";
const termynalActivateClass = "termy";
let termynals = [];
function createTermynals() {
document
.querySelectorAll(`.${termynalActivateClass} .highlight`)
.forEach(node => {
const text = node.textContent;
const lines = text.split("\n");
const useLines = [];
let buffer = [];
function saveBuffer() {
if (buffer.length) {
let isBlankSpace = true;
buffer.forEach(line => {
if (line) {
isBlankSpace = false;
}
});
dataValue = {};
if (isBlankSpace) {
dataValue["delay"] = 0;
}
if (buffer[buffer.length - 1] === "") {
// A last single 
# In this notebook, we are going to replicate the design of the clockface from first principles using the
# Chalk library. This project was done for fun without any knowledge of clockmaking or even the right
# terminology. It is meant mainly as an introduction programmatic 2D diagramming.
# Here is what it will look like when we are done.
# 
# ## Preliminary: Roman Numerals
from chalk import *
from colour import Color
# The whole diagram a simple color pallet of gold black and a bit of grey.
gold = Color("#E7D49C")
white = Color("#CCCCCC")
black = Color("black")
grey = Color("#444444")
# To begin, we will introduce some of the concepts of the Chalk library
# by mimicking the shape of the roman numeral I, V, and X.
# 
# Chalk uses basic shapes to build up compositional diagrams. For instance here
# is a filled rectangle.
column = rectangle(1, 4).fill_color(black)
column
# Each diagram has style properties and an "envelope" that describes
# its boundaries. Envelopes are a bit complex, they roughly are the
# the bounding box of the diagram.
column.show_envelope()
# Next lets make a diamond with an inlay. To do this we use `+` to put a
# grey box on a black box.
diamond = rectangle(1, 1).fill_color(black) + rectangle(0.5, 0.5).fill_color(grey)
diamond
# The benefit of the envelope representation is that it behaves more
# intuitively under affine transformations like rotation.
diamond = diamond.rotate_by(1 / 8)
diamond.show_envelope()
# We can easily combine diagrams. To see what a combination will look
# like we can use the `show_beside` method. You give it a vector along
# which to combine.
column.show_beside(diamond, -unit_y)
# We can also update the envelope of diagrams before combination.
# For instance here we substitute a small envelope for overlap.
column = column.with_envelope(rectangle(1, 2.5))
column.show_beside(diamond, -unit_y)
# When stacking on top we can use the shortcut `/`. The function `center_xy` resets
# the center to the middle of the envelope.
i = ((column / diamond).beside(diamond, -unit_y)).center_xy()
i = i + rectangle(0.01, 4).line_color(grey)
i.show_envelope()
# We can also put diagrams next to each other using the `|` notation.
ii = i | i
ii
# We can similar create diagrams for the other roman numerals.
# The `align` functions also re-center diagrams.
v = rectangle(1.5, 1).fill_color(black).align_bl() + i.align_b()
v
# Changing the center allows us to use `+` which joins diagrams together at the origin.
v = (v.align_br() + i.align_b()).center_xy()
v
# Creating X is a bit harder. We use two transformations to help us out.
# Using `translate` helps us nudge diagrams away from the origin.
ddiamond = (diamond | diamond).translate(-0.5, 0)
ddiamond.show_origin()
# Using `shear` lets us create a center line with a diagonal slash.
mid = (
rectangle(2, 0.5).fill_color(black) + rectangle(1.5, 0.1).fill_color(grey)
).shear_x(-0.2)
mid
# We can then combine these complex diagrams together.
column = column
x = ((column / ddiamond) + mid).beside(ddiamond, -unit_y).center_xy()
x
# Compositionality is fun. We can take these shapes and make numbers from 1-12.
numbers = [
x | i | i,
i,
i | i,
i | i | i,
i | v,
v,
v | i,
v | i | i,
v | i | i | i,
i | x,
x,
x | i,
]
# We can draw the main clock-face by moving each number to the edge, and then rotating it
# to its location. The `concat` combinator glues each of these together at the origin.
part0 = concat(
[
n.center_xy().scale(0.05).translate_by(-unit_y).rotate_by(-i / 12)
for i, n in enumerate(numbers)
]
)
set_svg_height(300)
part0.show_origin()
# ## Inner Pattern
# 
# This inner pattern is a bit more complex. We are going to need more than just
# simple shapes to draw it.
# To start, let us make a function for rotational symmetry.
def rot_cycle(d: Diagram, times: int) -> Diagram:
"Rotate diagram around a circle."
return concat(d.rotate_by(i / times) for i in range(times))
# To try it out, we make the inner pattern by making a circle and
# rotating it around 12 times.
set_svg_height(200)
width = -4.4
inner_circle = rot_cycle(circle(1.1).translate(0, width), 12).rotate_by(
(1 / 12) / 2
) + circle(3).fill_color(black)
inner_circle
# Now we want to trace a trail that looks like the inner patttern.
# There is no magic here, just a little geometry to guess the shapes.
# Vectors `unit_y` and `unit_x` are geometric helpers.
u45 = unit_x.rotate(-45)
u60 = unit_x.rotate(60)
diffy = abs(u45.y / u60.y)
diffx = diffy * abs(u60.x / u45.x)
# A `Trail` is a sequence of vectors drawn in order.
# Once you are done drawing one you can use `stroke` to
# make it a diagram. We start at the top left and draw
# downward.
fudge = 0.73
y = (
Trail.from_offsets(
[
u45,
diffy * u60,
-diffy * u60,
-fudge * u60,
fudge * u60,
diffx * u45,
diffx * unit_y,
]
)
.stroke()
.align_br()
)
y.show_origin()
# To draw the curve we use `arc_between` which
# connects two points with a specified radius.
curve = 0.5
under_arc = arc_between(-unit_x, 2 * -unit_y, curve).align_tr()
under_arc.show_origin()
# We then combine them to the right scale.
pattern = (y.scale(3) / under_arc).align_r()
pattern.show_origin()
# And then use reflection to double the pattern.
pattern = (pattern + pattern.reflect_x()).align_b()
pattern
# We can then rotate this to create the whole pattern. We set the
# fudge factor above to make the pattern connect.
set_svg_height(300)
part1 = inner_circle + rot_cycle(pattern.translate(0, width - 1), 12)
part1 = part1.line_color(gold).line_width(0.2)
part1
# Looks pretty close to the original!
# 
# ## Outer Bands
# 
# With the functions we have so far it is not so hard to do the rest of the main
# clock-face. The maink point worth noting is that we can build each part without
# needing to know the sizes of the others. This makes it easy to debug and update.
# The first band is two circles with a black dots. Nothing new.
set_svg_height(200)
band1 = (circle(1.1).line_width(0.1) + circle(1)).line_width(0.2) + rot_cycle(
diamond.scale(0.05).translate(1.05, 0), 12
)
band1
# Band two has thin dividing lines and the hour markers from part 0.
# In order to fit in the numbers we write a function that lets us scale to a given circle.
def fit_in(b: Diagram, s: Diagram, frame=0.1) -> Diagram:
# Find the inner radius
m = min([x for x in b.get_trace()(origin, unit_x) if x > 0])
# Scale the inner diagram to that size
return b + s.scale_uniform_to_x(2 * m - frame)
# We use this to put the numbers in a circle.
band2 = fit_in(circle(1.4), part0, 0.1) + circle(1)
band2
# We then draw thin lines in this region.
def thin_line(h):
return rectangle(h, 0.001).fill_color(black).center_xy().line_width(0.01)
lines = thin_line(0.4)
band2 = band2 + rot_cycle(lines.translate(1.2, 0), 48)
band2
# Band 3 has a little jewel cross. We can draw this with shapes.
diamond = rectangle(1, 1).rotate_by(1 / 8).fill_color(black).line_color(black)
s = (
(diamond | rectangle(2, 1).with_envelope(rectangle(1, 1)) | diamond)
.fill_color(black)
.line_color(black)
.center_xy()
)
s = s.scale_y(0.5) + s.rotate_by(0.25).scale_y(0.75).scale_x(0.25)
jewel = s.rotate_by(0.25)
jewel
# Draw the outlines
a = 1.8
c = 1.7
b = 1.6
band3 = (
circle(2.0).line_width(0.7)
+ (circle(a) + circle(b)).line_width(0.3)
+ circle(1.4).line_width(0.4)
)
band3
# Add the thin lines and rounded rect tracks
track = rectangle(0.33, 0.001, 0.1).fill_color(black).center_xy().line_width(0.01)
band3 = (
band3
+ rot_cycle(track.line_width(0.3).translate(c, 0), 60)
+ rot_cycle(thin_line(0.6).translate(c, 0).rotate_by(1 / 48), 48)
)
band3
# Add the jewel.
band3 = band3 + rot_cycle(
jewel.center_xy().scale_uniform_to_x((a - b) * 2).translate(0, c), 12
)
band3
# And voila.
part2 = fit_in(band3, fit_in(band2, band1))
set_svg_height(300)
part2
# Looks pretty close to the original!
# 
# ## Frame
# !
