@foblex/m-render 3.0.0 → 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 });
@@ -2104,6 +2176,13 @@ class ExternalComponent {
             };
         } });
     iframeUrl = computed(() => this.data().iframeUrl, ...(ngDevMode ? [{ debugName: "iframeUrl" }] : []));
+    iframeResourceUrl = computed(() => {
+        const url = this.iframeUrl();
+        if (!url) {
+            return undefined;
+        }
+        return this._sanitizer.bypassSecurityTrustResourceUrl(url);
+    }, ...(ngDevMode ? [{ debugName: "iframeResourceUrl" }] : []));
     hasContent = computed(() => !!this.data().selector || !!this.data().iframeUrl, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
     canToggleFullscreen = computed(() => {
         return this._isBrowser
@@ -2118,6 +2197,7 @@ class ExternalComponent {
     _isBrowser = inject(IS_BROWSER_PLATFORM);
     _mediatr = inject(Mediatr);
     _viewContainerRef = viewChild.required('container', { read: ViewContainerRef });
+    _sanitizer = inject(DomSanitizer);
     ngOnInit() {
         const selector = this.data().selector;
         if (selector) {
@@ -2150,7 +2230,7 @@ class ExternalComponent {
         return this._document.fullscreenElement === this._hostElement.nativeElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ExternalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ExternalComponent, isStandalone: true, selector: "external-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:fullscreenchange": "onFullscreenChange()" }, properties: { "style.height": "data().height", "class.f-example-view-fullscreen": "isFullscreen()" }, classAttribute: "f-example-view" }, viewQueries: [{ propertyName: "_viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (canToggleFullscreen()) {\n  <button class=\"f-fullscreen-button\"\n          type=\"button\"\n          [class.exit]=\"isFullscreen()\"\n          [attr.aria-label]=\"fullscreenLabel()\"\n          [attr.title]=\"fullscreenLabel()\"\n          (click)=\"toggleFullscreen()\"></button>\n}\n\n@if (iframeUrl()) {\n  <iframe class=\"f-example-iframe\"\n          [src]=\"iframeUrl()!\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer\"\n          allow=\"fullscreen\"\n          allowfullscreen></iframe>\n}\n\n<ng-container #container />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: ExternalComponent, isStandalone: true, selector: "external-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "document:fullscreenchange": "onFullscreenChange()" }, properties: { "style.height": "data().height", "class.f-example-view-fullscreen": "isFullscreen()" }, classAttribute: "f-example-view" }, viewQueries: [{ propertyName: "_viewContainerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (canToggleFullscreen()) {\n  <button class=\"f-fullscreen-button\"\n          type=\"button\"\n          [class.exit]=\"isFullscreen()\"\n          [attr.aria-label]=\"fullscreenLabel()\"\n          [attr.title]=\"fullscreenLabel()\"\n          (click)=\"toggleFullscreen()\"></button>\n}\n\n@if (iframeResourceUrl()) {\n  <iframe class=\"f-example-iframe\"\n          [src]=\"iframeResourceUrl()\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer\"\n          allow=\"fullscreen\"\n          allowfullscreen></iframe>\n}\n\n<ng-container #container />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ExternalComponent, decorators: [{
             type: Component,
@@ -2158,7 +2238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         class: 'f-example-view',
                         '[style.height]': 'data().height',
                         '[class.f-example-view-fullscreen]': 'isFullscreen()',
-                    }, template: "@if (canToggleFullscreen()) {\n  <button class=\"f-fullscreen-button\"\n          type=\"button\"\n          [class.exit]=\"isFullscreen()\"\n          [attr.aria-label]=\"fullscreenLabel()\"\n          [attr.title]=\"fullscreenLabel()\"\n          (click)=\"toggleFullscreen()\"></button>\n}\n\n@if (iframeUrl()) {\n  <iframe class=\"f-example-iframe\"\n          [src]=\"iframeUrl()!\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer\"\n          allow=\"fullscreen\"\n          allowfullscreen></iframe>\n}\n\n<ng-container #container />\n" }]
+                    }, template: "@if (canToggleFullscreen()) {\n  <button class=\"f-fullscreen-button\"\n          type=\"button\"\n          [class.exit]=\"isFullscreen()\"\n          [attr.aria-label]=\"fullscreenLabel()\"\n          [attr.title]=\"fullscreenLabel()\"\n          (click)=\"toggleFullscreen()\"></button>\n}\n\n@if (iframeResourceUrl()) {\n  <iframe class=\"f-example-iframe\"\n          [src]=\"iframeResourceUrl()\"\n          loading=\"lazy\"\n          referrerpolicy=\"no-referrer\"\n          allow=\"fullscreen\"\n          allowfullscreen></iframe>\n}\n\n<ng-container #container />\n" }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], _viewContainerRef: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], onFullscreenChange: [{
                 type: HostListener,
                 args: ['document:fullscreenchange']
@@ -3453,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);
@@ -3499,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']]
             }] } });
@@ -3518,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;
@@ -3531,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,
@@ -3540,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({