@foblex/m-render 3.0.1 → 3.0.2

package/assets/styles/styles.scss

@@ -1,15 +1,15 @@
-@import "./_variables";
-@import "./_badge";
-@import "./_alert";
-@import "./_button";
-@import "./_fonts";
-@import "./_icons";
-@import "./_preview-group";
-@import "./_code-group";
-@import "./_code-view";
-@import "./_code-highlight";
-@import './_doc-text';
-@import "./_table";
+@use "./variables";
+@use "./badge";
+@use "./alert";
+@use "./button";
+@use "./fonts";
+@use "./icons";
+@use "./preview-group";
+@use "./code-group";
+@use "./code-view";
+@use "./code-highlight";
+@use "./doc-text";
+@use "./table";
 
 html {
   height: 100%;

package/fesm2022/foblex-m-render.mjs

@@ -1351,8 +1351,10 @@ class MarkdownService {
     _provider = inject(F_PREVIEW_NAVIGATION_PROVIDER, { optional: true });
     _pageLayout = signal({ ...DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS }, ...(ngDevMode ? [{ debugName: "_pageLayout" }] : []));
     _pageSeo = signal(null, ...(ngDevMode ? [{ debugName: "_pageSeo" }] : []));
+    _pageOrigin = signal(null, ...(ngDevMode ? [{ debugName: "_pageOrigin" }] : []));
     pageLayout = this._pageLayout.asReadonly();
     pageSeo = this._pageSeo.asReadonly();
+    pageOrigin = this._pageOrigin.asReadonly();
     constructor() {
         this._markdown
             .use((x) => new ParseSingleCodeItem().render(x))
@@ -1425,15 +1427,17 @@ class MarkdownService {
     _parseFrontMatterData(rawFrontMatter) {
         const layout = { ...DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS };
         const seo = {};
+        const origin = { url: null, label: null };
         rawFrontMatter
             .split(/\r?\n/)
-            .forEach((line) => this._parseFrontMatterLine(line, layout, seo));
+            .forEach((line) => this._parseFrontMatterLine(line, layout, seo, origin));
         return {
             layout,
             seo: Object.keys(seo).length ? seo : null,
+            origin: this._resolveOrigin(origin),
         };
     }
-    _parseFrontMatterLine(line, layout, seo) {
+    _parseFrontMatterLine(line, layout, seo, origin) {
         const normalizedLine = line.trim();
         if (!normalizedLine || normalizedLine.startsWith('#')) {
             return;
@@ -1450,6 +1454,7 @@ class MarkdownService {
         const boolValue = this._parseBoolean(value);
         this._applyLayoutKey(key, boolValue, layout);
         this._applySeoKey(key, value, boolValue, seo);
+        this._applyOriginKey(key, value, origin);
     }
     _normalizeFrontMatterValue(value) {
         const trimmed = value.trim();
@@ -1574,6 +1579,71 @@ class MarkdownService {
                 return;
         }
     }
+    _applyOriginKey(key, value, origin) {
+        switch (key) {
+            case 'origin':
+            case 'originurl':
+            case 'origin_url':
+            case 'original':
+            case 'originalurl':
+            case 'original_url':
+            case 'source':
+            case 'sourceurl':
+            case 'source_url': {
+                const normalizedUrl = this._normalizeOriginUrl(value);
+                if (normalizedUrl) {
+                    origin.url = normalizedUrl;
+                }
+                return;
+            }
+            case 'originlabel':
+            case 'origin_label':
+            case 'origintext':
+            case 'origin_text':
+            case 'sourcelabel':
+            case 'source_label':
+                origin.label = value;
+                return;
+        }
+    }
+    _normalizeOriginUrl(value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
+        const candidate = /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+        try {
+            const url = new URL(candidate);
+            if (!['http:', 'https:'].includes(url.protocol)) {
+                return null;
+            }
+            return url.toString();
+        }
+        catch {
+            return null;
+        }
+    }
+    _resolveOrigin(origin) {
+        if (!origin.url) {
+            return null;
+        }
+        return {
+            url: origin.url,
+            label: origin.label || this._getOriginLabel(origin.url),
+        };
+    }
+    _getOriginLabel(originUrl) {
+        try {
+            const hostname = new URL(originUrl).hostname.toLowerCase().replace(/^www\./, '');
+            if (hostname === 'medium.com' || hostname.endsWith('.medium.com')) {
+                return 'Originally published on Medium';
+            }
+            return `Originally published on ${hostname}`;
+        }
+        catch {
+            return 'Originally published externally';
+        }
+    }
     _parseNumberOrDefault(value, fallback) {
         const numericValue = Number(value);
         if (!Number.isFinite(numericValue) || numericValue <= 0) {
@@ -1584,6 +1654,7 @@ class MarkdownService {
     _applyPageContext(data) {
         this._pageLayout.set({ ...data.layout });
         this._pageSeo.set(data.seo ? { ...data.seo } : null);
+        this._pageOrigin.set(data.origin ? { ...data.origin } : null);
     }
     _resetPageContext() {
         this._applyPageContext(this._getDefaultFrontMatterData());
@@ -1592,6 +1663,7 @@ class MarkdownService {
         return {
             layout: { ...DEFAULT_MARKDOWN_PAGE_LAYOUT_OPTIONS },
             seo: null,
+            origin: null,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -3461,6 +3533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
 
 class MarkdownRenderer {
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    origin = input(null, ...(ngDevMode ? [{ debugName: "origin" }] : []));
     _hostElement = inject(ElementRef).nativeElement;
     _router = inject(Router);
     _injector = inject(Injector);
@@ -3507,14 +3580,14 @@ class MarkdownRenderer {
         this._dynamicComponents.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MarkdownRenderer, isStandalone: true, selector: "markdown-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n\n", styles: [":host{display:block;width:100%}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:900px}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MarkdownRenderer, isStandalone: true, selector: "markdown-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "@if (origin(); as pageOrigin) {\n  <p class=\"origin-link\">\n    <span class=\"origin-link-label\">{{ pageOrigin.label }}:</span>\n    <a [href]=\"pageOrigin.url\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n  </p>\n}\n<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n", styles: [":host{display:block;width:100%}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:900px}.origin-link{margin:0 0 16px;border-left:2px solid var(--divider-color);padding:8px 12px;background-color:var(--soft-background);line-height:20px;font-size:14px}.origin-link-label{margin-right:4px;font-weight:600}.origin-link a{overflow-wrap:anywhere}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRenderer, decorators: [{
             type: Component,
             args: [{ selector: 'markdown-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MarkdownFooter], host: {
                         class: 'm-render',
-                    }, template: "<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n\n", styles: [":host{display:block;width:100%}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:900px}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], _onDocumentClick: [{
+                    }, template: "@if (origin(); as pageOrigin) {\n  <p class=\"origin-link\">\n    <span class=\"origin-link-label\">{{ pageOrigin.label }}:</span>\n    <a [href]=\"pageOrigin.url\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n  </p>\n}\n<div [innerHTML]=\"value()\"></div>\n@if (value()) {\n  <markdown-footer />\n}\n", styles: [":host{display:block;width:100%}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:900px}.origin-link{margin:0 0 16px;border-left:2px solid var(--divider-color);padding:8px 12px;background-color:var(--soft-background);line-height:20px;font-size:14px}.origin-link-label{margin-right:4px;font-weight:600}.origin-link a{overflow-wrap:anywhere}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], _onDocumentClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -3526,6 +3599,7 @@ class MarkdownRouter {
     _dataProvider = inject(DocumentationStore);
     _metaService = inject(FMetaService, { optional: true });
     emptyNavigation = !this._dataProvider.getNavigation().length;
+    pageOrigin = this._markdown.pageOrigin;
     shouldExpandContent = computed(() => {
         const layout = this._markdown.pageLayout();
         return layout.hideTableOfContent && layout.expandContentWithoutTableOfContent;
@@ -3539,7 +3613,7 @@ class MarkdownRouter {
         }), tap(() => this._metaService?.applyMarkdownSeo(this._markdown.pageSeo())));
     })), { initialValue: undefined });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: MarkdownRouter, isStandalone: true, selector: "markdown-router", host: { attributes: { "ngSkipHydration": "" }, properties: { "class.empty-navigation": "emptyNavigation" } }, ngImport: i0, template: "<markdown-renderer [value]=\"html()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"], dependencies: [{ kind: "component", type: MarkdownRenderer, selector: "markdown-renderer", inputs: ["value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: MarkdownRouter, isStandalone: true, selector: "markdown-router", host: { attributes: { "ngSkipHydration": "" }, properties: { "class.empty-navigation": "emptyNavigation" } }, ngImport: i0, template: "<markdown-renderer [value]=\"html()\"\n                   [origin]=\"pageOrigin()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"], dependencies: [{ kind: "component", type: MarkdownRenderer, selector: "markdown-renderer", inputs: ["value", "origin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, decorators: [{
             type: Component,
@@ -3548,7 +3622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         '[class.empty-navigation]': 'emptyNavigation',
                     }, imports: [
                         MarkdownRenderer,
-                    ], template: "<markdown-renderer [value]=\"html()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"] }]
+                    ], template: "<markdown-renderer [value]=\"html()\"\n                   [origin]=\"pageOrigin()\"\n                   [class.empty-navigation]=\"emptyNavigation\"\n                   [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:48px var(--page-padding) 140px}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"] }]
         }] });
 
 var index$2 = /*#__PURE__*/Object.freeze({