@diplodoc/transform 4.0.0

package/src/scss/_highlight.scss

@@ -0,0 +1,96 @@
+@import 'variables';
+
+.yfm {
+    .hljs {
+        display: block;
+        overflow-x: auto;
+        padding: 16px;
+        background: $codeBackgroundColor;
+        background: var(--yfm-color-hljs-background);
+    }
+
+    .hljs,
+    .hljs-subst {
+        color: #444;
+        color: var(--yfm-color-hljs-subst);
+    }
+
+    .hljs-comment {
+        color: #888888;
+        color: var(--yfm-color-hljs-comment);
+    }
+
+
+    .hljs-keyword,
+    .hljs-attribute,
+    .hljs-selector-tag,
+    .hljs-meta-keyword,
+    .hljs-doctag,
+    .hljs-name {
+        font-weight: bold;
+    }
+
+    .hljs-type,
+    .hljs-string,
+    .hljs-number,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-quote,
+    .hljs-template-tag,
+    .hljs-deletion {
+        color: #880000;
+        color: var(--yfm-color-hljs-deletion);
+    }
+
+    .hljs-title,
+    .hljs-section {
+        color: #880000;
+        color: var(--yfm-color-hljs-section);
+        font-weight: bold;
+    }
+
+    .hljs-regexp,
+    .hljs-symbol,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-link,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo {
+        color: #BC6060;
+        color: var(--yfm-color-hljs-pseudo);
+    }
+
+
+    .hljs-literal {
+        color: #78A960;
+        color: var(--yfm-color-hljs-literal);
+    }
+
+    .hljs-built_in,
+    .hljs-bullet,
+    .hljs-code,
+    .hljs-addition {
+        color: #397300;
+        color: var(--yfm-color-hljs-addition);
+    }
+
+
+    .hljs-meta {
+        color: #1f7199;
+        color: var(--yfm-color-hljs-meta);
+    }
+
+    .hljs-meta-string {
+        color: #4d99bf;
+        color: var(--yfm-color-hljs-meta-string);
+    }
+
+
+    .hljs-emphasis {
+        font-style: italic;
+    }
+
+    .hljs-strong {
+        font-weight: bold;
+    }
+}

package/src/scss/_note.scss

@@ -0,0 +1,73 @@
+@import 'variables';
+
+$infoColor: $accentColor;
+$tipColor: #56bd67;
+$warningColor: #f19518;
+$importantColor: #ff4645;
+
+$infoBackgroundColor: rgba(2, 123, 243, 0.08);
+$tipBackgroundColor: rgba(63, 201, 46, 0.1);
+$warningBackgroundColor: rgba(255, 136, 0, 0.15);
+$importantBackgroundColor: rgba(235, 50, 38, 0.08);
+
+.yfm .yfm-note {
+    max-width: 1296px;
+    margin: 20px 0;
+    padding: 20px 20px 20px 64px;
+    border-radius: 10px;
+
+    .yfm-note-title {
+        font-weight: 700;
+    }
+
+    & > p {
+        margin: 0 0 10px 0;
+
+        &:first-child {
+            &::before {
+                box-sizing: content-box;
+                display: block;
+                width: 24px;
+                height: 24px;
+                margin-top: -2px;
+                margin-left: -44px;
+                padding-right: 20px;
+                float: left;
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    $colors: (
+        yfm-accent-info: $infoColor,
+        yfm-accent-tip: $tipColor,
+        yfm-accent-alert: $importantColor,
+        yfm-accent-warning: $warningColor
+    );
+
+    @each $type, $color in $colors {
+        &.#{$type} > p:first-child::before {
+            $r: red($color);
+            $g: green($color);
+            $b: blue($color);
+            $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')';
+            content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+        }
+    }
+
+    $backgroundColors: (
+        yfm-accent-info: $infoBackgroundColor,
+        yfm-accent-tip: $tipBackgroundColor,
+        yfm-accent-alert: $importantBackgroundColor,
+        yfm-accent-warning: $warningBackgroundColor
+    );
+
+    @each $type, $color in $backgroundColors {
+        &.#{$type} {
+            background: $color;
+        }
+    }
+}

package/src/scss/_print.scss

@@ -0,0 +1,20 @@
+@media print {
+    .tab-list {
+        display: none !important;
+    }
+
+    .tab-panel:before {
+        content: attr(data-title);
+        margin-bottom: -1px;
+        margin-right: 20px;
+        border-bottom: 2px solid transparent;
+        line-height: 33px;
+        font-weight: 700;
+        outline: 0;
+        cursor: pointer;
+    }
+
+    .tab-panel {
+        display: block !important;
+    }
+}

package/src/scss/_term.scss

@@ -0,0 +1,79 @@
+.yfm-term {
+    &_title {
+        color: #027bf3;
+        cursor: pointer;
+
+        border-bottom: 1px dotted;
+
+        font-size: inherit;
+        line-height: inherit;
+        font-style: normal;
+
+        &:hover {
+            color: #004080;
+        }
+    }
+
+    &_dfn {
+        position: absolute;
+        z-index: 1000;
+
+        width: fit-content;
+        max-width: 450px;
+
+        @media screen and (max-width: 600px) {
+            & {
+                max-width: 80%;
+            }
+        }
+
+        visibility: hidden;
+        opacity: 0;
+
+        padding: 10px;
+
+        background-color: rgb(255, 255, 255);
+
+        font-size: inherit;
+        line-height: inherit;
+        font-style: normal;
+
+        border-radius: 4px;
+
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        outline: none;
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+
+            border-radius: inherit;
+            box-shadow: 0 0 0 1px rgb(229, 229, 229);
+        }
+
+        &.open {
+            visibility: visible;
+
+            animation-name: popup;
+            animation-duration: 0.1s;
+            animation-timing-function: ease-out;
+            animation-fill-mode: forwards;
+
+            @keyframes popup {
+                0% {
+                    opacity: 0;
+                    transform: translateY(10px);
+                }
+                100% {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        }
+    }
+}

package/src/scss/_variables.scss

@@ -0,0 +1,16 @@
+$baseColor: #ffffff;
+$accentColor: #027bf3;
+
+$textColor: rgba(0, 0, 0, 0.7);
+$borderColor: rgba(0, 0, 0, 0.07);
+$backgroundColor: rgba(0, 0, 0, 0.02);
+
+$inlineCodeColor: rgba(59, 96, 128, 1);
+$inlineCodeBackgroundColor: rgba(107, 132, 153, 0.12);
+
+$codeBackgroundColor: rgba(107, 132, 153, 0.12);
+
+$tableRowBackgroundColor: rgba(0, 0, 0, 0.02);
+
+$linkColor: $accentColor;
+$linkHoverColor: #004080;

package/src/scss/yfm.scss

@@ -0,0 +1,11 @@
+@import 'common';
+@import 'note';
+@import 'anchor';
+@import 'highlight';
+@import 'code';
+@import 'print';
+@import 'cut';
+@import 'file';
+@import 'term';
+
+@import '@diplodoc/tabs-extension/runtime';

package/src/transform/getObject.ts

@@ -0,0 +1,10 @@
+export = function getObject(path: string, obj: Object) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return path.split('.').reduce((acc: any | undefined, item) => {
+        if (!acc || !Object.getOwnPropertyNames(acc).includes(item)) {
+            return undefined;
+        }
+
+        return acc[item];
+    }, obj);
+};

package/src/transform/headings.ts

@@ -0,0 +1,88 @@
+import Token from 'markdown-it/lib/token';
+import {Heading} from './typings';
+
+function getTitle(token: Token) {
+    return (
+        token.children?.reduce((acc, tok) => {
+            if (tok.type === 'text' || tok.type === 'code_inline') {
+                return acc + tok.content;
+            }
+
+            return acc;
+        }, '') || ''
+    );
+}
+
+function getHref(token: Token) {
+    return '#' + (token.attrGet('id') || '');
+}
+
+export = function getHeadings(tokens: Token[], needFlatListHeadings?: boolean) {
+    return needFlatListHeadings ? getFlatListHeadings(tokens) : getFilteredHeadings(tokens);
+};
+
+function getFilteredHeadings(tokens: Token[]) {
+    const headings: Heading[] = [];
+    let parents = [headings];
+    let prevLevel;
+
+    for (let i = 0; i < tokens.length; i++) {
+        const isHeading = tokens[i].type === 'heading_open';
+        const level = Number.parseInt(tokens[i].tag.slice(1), 10);
+
+        if (isHeading && level >= 2) {
+            const entry = {
+                title: getTitle(tokens[i + 1]),
+                href: getHref(tokens[i]),
+                level,
+            };
+            let closestParent = parents[parents.length - 1];
+
+            if ((!prevLevel && level === 2) || prevLevel === level) {
+                closestParent.push(entry);
+                prevLevel = level;
+                // skip if nested heading level is lower than for previous by 2 or more
+            } else if (prevLevel && level - prevLevel === 1) {
+                const lastItemInClosestParent = closestParent[closestParent.length - 1];
+                const newParent = (lastItemInClosestParent.items = [entry]);
+
+                parents.push(newParent);
+                prevLevel = level;
+            } else if (prevLevel && level < prevLevel) {
+                const levelDiff = prevLevel - level;
+                const closestParentIndex = parents.length - levelDiff - 1;
+
+                if (closestParentIndex < 0) {
+                    continue;
+                }
+
+                closestParent = parents[closestParentIndex];
+                closestParent.push(entry);
+                parents = parents.slice(0, closestParentIndex + 1);
+                prevLevel = level;
+            }
+        }
+    }
+
+    return headings;
+}
+function getFlatListHeadings(tokens: Token[]) {
+    const headings: Heading[] = [];
+
+    for (let i = 0; i < tokens.length; i++) {
+        const isHeading = tokens[i].type === 'heading_open';
+        const level = Number.parseInt(tokens[i].tag.slice(1), 10);
+
+        if (!isHeading) {
+            continue;
+        }
+
+        headings.push({
+            title: getTitle(tokens[i + 1]),
+            href: getHref(tokens[i]),
+            level,
+        });
+    }
+
+    return headings;
+}

package/src/transform/highlight.ts

@@ -0,0 +1,33 @@
+import {escapeHtml} from 'markdown-it/lib/common/utils';
+import {HighlightLangMap} from './typings';
+
+export = function makeHighlight(langs: HighlightLangMap = {}) {
+    try {
+        // Important require.
+        // Because we want to have a posibility to run in projects without hljs dependency
+        const hljs = require('highlight.js');
+
+        Object.keys(langs).forEach((lang) => {
+            hljs.registerLanguage(lang, langs[lang]);
+        });
+
+        return function highlight(str: string, lang: string) {
+            let highlightedStr;
+            const classNames = ['hljs'];
+
+            if (lang && hljs.getLanguage(lang)) {
+                classNames.push(lang);
+
+                try {
+                    highlightedStr = hljs.highlight(lang, str, true).value;
+                } catch (_) {}
+            }
+
+            highlightedStr = highlightedStr || escapeHtml(str);
+
+            return `<pre><code class="${classNames.join(' ')}">${highlightedStr}</code></pre>`;
+        };
+    } catch {
+        return (str: string) => escapeHtml(str);
+    }
+};

package/src/transform/index.ts

@@ -0,0 +1,50 @@
+import type {OptionsType, OutputType, EnvType} from './typings';
+import {bold} from 'chalk';
+import {log} from './log';
+import liquid from './liquid';
+import initMarkdownit from './md';
+
+function applyLiquid(input: string, options: OptionsType) {
+    const {
+        vars = {},
+        path,
+        conditionsInCode = false,
+        disableLiquid = false,
+        isLiquided = false,
+    } = options;
+
+    return disableLiquid || isLiquided ? input : liquid(input, vars, path, {conditionsInCode});
+}
+
+function handleError(error: unknown, path?: string): never {
+    log.error(`Error occurred${path ? ` in ${bold(path)}` : ''}`);
+
+    throw error;
+}
+
+function emitResult(html: string, env: EnvType): OutputType {
+    return {
+        result: {...env, html},
+        logs: log.get(),
+    };
+}
+
+// eslint-disable-next-line consistent-return
+function transform(originInput: string, options: OptionsType = {}) {
+    const input = applyLiquid(originInput, options);
+    const {parse, compile, env} = initMarkdownit(options);
+
+    try {
+        return emitResult(compile(parse(input)), env);
+    } catch (error) {
+        handleError(error, options.path);
+    }
+}
+
+export = transform;
+
+// eslint-disable-next-line @typescript-eslint/no-namespace -- backward compatibility
+namespace transform {
+    export type Options = OptionsType;
+    export type Output = OutputType;
+}