@pod-os/elements 0.30.2-rc.15536e2.0 → 0.30.2-rc.86bb4f4.0

package/dist/collection/components/pos-document/pos-document.js

@@ -18,7 +18,7 @@ export class PosDocument {
             const file = await this.os.fetchFile(this.src);
             this.resourceLoadedEmitter.emit(this.src);
             if (file.blob()) {
-                this.dataUri = URL.createObjectURL(file.blob());
+                this.file = file;
                 this.error = null;
             }
             else {
@@ -42,7 +42,12 @@ export class PosDocument {
         if (this.brokenFile) {
             return h(BrokenFile, { file: this.brokenFile });
         }
-        return h("iframe", { src: this.dataUri });
+        if (this.file.blob().type === 'text/markdown') {
+            return h("pos-markdown-document", { file: this.file });
+        }
+        else {
+            return h("iframe", { src: URL.createObjectURL(this.file.blob()) });
+        }
     }
     static get is() { return "pos-document"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +106,7 @@ export class PosDocument {
     static get states() {
         return {
             "os": {},
-            "dataUri": {},
+            "file": {},
             "brokenFile": {},
             "error": {},
             "loading": {}

package/dist/collection/components/pos-document/pos-document.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-document.js","sourceRoot":"","sources":["../../../../src/components/pos-document/pos-document.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAOvD,MAAM,OAAO,WAAW;IALxB;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAkCH;IAzCC,iBAAiB;QACf,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAQD,KAAK,CAAC,SAAS;QACb,IAAI,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;YAC3C,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QACnB,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;QACvD,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;QAC/C,CAAC;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;IAC9C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"]}
+{"version":3,"file":"pos-document.js","sourceRoot":"","sources":["../../../../src/components/pos-document/pos-document.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAOvD,MAAM,OAAO,WAAW;IALxB;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAsCH;IA7CC,iBAAiB;QACf,OAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAQD,KAAK,CAAC,SAAS;QACb,IAAI,CAAC;YACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;gBAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;YAC3C,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;QACnB,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;QACvD,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;YAC9C,OAAO,6BAAuB,IAAI,EAAE,IAAI,CAAC,IAAI,GAA0B,CAAC;QAC1E,CAAC;aAAM,CAAC;YACN,OAAO,cAAQ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAW,CAAC;QACvE,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { PodOS, BrokenFile as BrokenFileData, SolidFile } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private file: SolidFile;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.file = file;\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    if (this.file.blob().type === 'text/markdown') {\n      return <pos-markdown-document file={this.file}></pos-markdown-document>;\n    } else {\n      return <iframe src={URL.createObjectURL(this.file.blob())}></iframe>;\n    }\n  }\n}\n"]}

package/dist/collection/components/pos-markdown-document/pos-markdown-document.css

@@ -0,0 +1,6 @@
+article {
+  line-height: 1.5;
+  pos-image {
+    --max-width: 100%;
+  }
+}

package/dist/collection/components/pos-markdown-document/pos-markdown-document.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+import { marked, Renderer } from "marked";
+import { sanitize } from "./sanitize";
+export class PosMarkdownDocument {
+    async componentWillLoad() {
+        const markdown = await this.file.blob().text();
+        const renderer = new Renderer();
+        renderer.link = ({ href, text }) => {
+            const url = new URL(href, this.file.url);
+            return `<pos-rich-link uri="${url}">${text}</pos-rich-link>`;
+        };
+        renderer.image = ({ href, title, text }) => {
+            const titleAttr = title ? ` title="${title}"` : '';
+            const url = new URL(href, this.file.url);
+            return `<pos-image src="${url}" alt="${text}" ${titleAttr}>`;
+        };
+        marked.setOptions({ renderer });
+        const parsed = await marked(markdown);
+        this.sanitizedHtml = sanitize(parsed);
+    }
+    render() {
+        return h("article", { key: 'c02b19957db7f953916103f8a92a1c7c82f28014', innerHTML: this.sanitizedHtml.value });
+    }
+    static get is() { return "pos-markdown-document"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-markdown-document.css", "../../apps/styles/article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-markdown-document.css", "../../apps/styles/article-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "file": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SolidFile",
+                    "resolved": "SolidFile",
+                    "references": {
+                        "SolidFile": {
+                            "location": "import",
+                            "path": "@pod-os/core",
+                            "id": "../core/types/index.d.ts::SolidFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sanitizedHtml": {}
+        };
+    }
+}
+//# sourceMappingURL=pos-markdown-document.js.map

package/dist/collection/components/pos-markdown-document/pos-markdown-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pos-markdown-document.js","sourceRoot":"","sources":["../../../../src/components/pos-markdown-document/pos-markdown-document.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAOrD,MAAM,OAAO,mBAAmB;IAO9B,KAAK,CAAC,iBAAiB;QACrB,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;QAE/C,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;QAEhC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;YACjC,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,uBAAuB,GAAG,KAAK,IAAI,kBAAkB,CAAC;QAC/D,CAAC,CAAC;QAEF,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;YACzC,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,WAAW,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACnD,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzC,OAAO,mBAAmB,GAAG,UAAU,IAAI,KAAK,SAAS,GAAG,CAAC;QAC/D,CAAC,CAAC;QAEF,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,gEAAS,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAY,CAAC;IAClE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { SolidFile } from '@pod-os/core';\nimport { Component, h, Prop, State } from '@stencil/core';\n\nimport { marked, Renderer } from 'marked';\nimport { sanitize, SanitizedHtml } from './sanitize';\n\n@Component({\n  tag: 'pos-markdown-document',\n  styleUrls: ['pos-markdown-document.css', '../../apps/styles/article-card.css'],\n  shadow: true,\n})\nexport class PosMarkdownDocument {\n  @Prop()\n  file: SolidFile;\n\n  @State()\n  private sanitizedHtml: SanitizedHtml;\n\n  async componentWillLoad() {\n    const markdown = await this.file.blob().text();\n\n    const renderer = new Renderer();\n\n    renderer.link = ({ href, text }) => {\n      const url = new URL(href, this.file.url);\n      return `<pos-rich-link uri=\"${url}\">${text}</pos-rich-link>`;\n    };\n\n    renderer.image = ({ href, title, text }) => {\n      const titleAttr = title ? ` title=\"${title}\"` : '';\n      const url = new URL(href, this.file.url);\n      return `<pos-image src=\"${url}\" alt=\"${text}\" ${titleAttr}>`;\n    };\n\n    marked.setOptions({ renderer });\n    const parsed = await marked(markdown);\n    this.sanitizedHtml = sanitize(parsed);\n  }\n\n  render() {\n    return <article innerHTML={this.sanitizedHtml.value}></article>;\n  }\n}\n"]}

package/dist/collection/components/pos-markdown-document/sanitize.js

@@ -0,0 +1,10 @@
+import DomPurify from "dompurify";
+export function sanitize(html) {
+    return {
+        value: DomPurify.sanitize(html, {
+            ADD_TAGS: ['pos-rich-link', 'pos-image'],
+            ADD_ATTR: ['uri'],
+        }),
+    };
+}
+//# sourceMappingURL=sanitize.js.map

package/dist/collection/components/pos-markdown-document/sanitize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.js","sourceRoot":"","sources":["../../../../src/components/pos-markdown-document/sanitize.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAMlC,MAAM,UAAU,QAAQ,CAAC,IAAY;IACnC,OAAO;QACL,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE;YAC9B,QAAQ,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC;YACxC,QAAQ,EAAE,CAAC,KAAK,CAAC;SAClB,CAAC;KACH,CAAC;AACJ,CAAC","sourcesContent":["import DomPurify from 'dompurify';\n\nexport interface SanitizedHtml {\n  value: string;\n}\n\nexport function sanitize(html: string): SanitizedHtml {\n  return {\n    value: DomPurify.sanitize(html, {\n      ADD_TAGS: ['pos-rich-link', 'pos-image'],\n      ADD_ATTR: ['uri'],\n    }),\n  };\n}\n"]}

package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.js

@@ -11,7 +11,7 @@ export class PosNavigationBar {
     }
     render() {
         const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
-        return (h("section", { key: 'd8b48cc6908244bb35139ead157687f1a6f05bd7', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '215e525705b27a7a30de2f32a1bc57aba72652c2', uri: this.current.uri }), h("button", { key: '55b79e62adac3f10e8b9f5a514c5d4191af251d9', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '7b1a9ebe7fb3c90ac3694826f3202ba4617925cb' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
+        return (h("section", { key: '9f6287fbf17dcfb8afce157379e798b67ac23e10', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: '08a1e2bb449513ed6565437b701d6f63fe0ef923', uri: this.current.uri }), h("button", { key: 'd4f55f3ad06100545279da8336f78099dcb9bedc', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: 'bdc0906378e431e6ef0fde16da45e190f5511d14' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
     }
     icon() {
         return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));

package/dist/collection/components/pos-navigation/pos-navigation.js

@@ -113,7 +113,7 @@ export class PosNavigation {
         }
     }
     render() {
-        return (h("nav", { key: '75fef6f1c6fd945150ebb4123a2cce80537c46e1' }, h("search", { key: 'eb81710c97b1edcc9295050585e14b505cc4e9ca' }, h("pos-navigation-bar", { key: '5566254cee17f0ebc923b61f08d0765f2e51db08', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: 'bed472296c931b2409094b9d3d5ca875b262b4b2', ref: el => (this.dialogRef = el) }, h("form", { key: '1bfbb8191a04fc215da7250ef533f8c7cb65fca9', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '532bdbabb64164b879d60e5f7f944dc79eebeb2b', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
+        return (h("nav", { key: 'cf1cd48ea2bf1658531ca2f5823f4324566cb310' }, h("search", { key: 'dccc4d03cb8cd754980b98a926bea8e86b269818' }, h("pos-navigation-bar", { key: '64e26ace1b35beb51be4c4ef5c09621a7975ef6f', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '56a68557d4d208f32ae04b0f8bee7c8409c4ac40', ref: el => (this.dialogRef = el) }, h("form", { key: '6eea4d79afd30134cba1a4710cd751f10c1ca753', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '292139ce8abcc567e1c467bc938c5f25aab894a0', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
     }
     static get is() { return "pos-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.js

@@ -14,7 +14,7 @@ export class PosNewThingForm {
         subscribePodOs(this);
     }
     render() {
-        return (h("form", { key: '0d52a6b85338d0353876f0fde0a7ef45e5ebe104', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '6765ada99850150a6a1dc9135a6ec0c575e3066d', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '375ca79b6ffa3d363954578cf83d2eab10b0e486', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '9da148cb532d236a5dc9ad73fc75e1bd2d277d17', htmlFor: "name" }, "Name"), h("input", { key: '81b5a4bf51eb403bfebfa0c9e023935ddde48194', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '5f4ff09818262ad875f80bce3a0f942b0428335f', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
+        return (h("form", { key: 'd231729bb8d01ffa9e1f88d9488fa92041f33460', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '739f893b508ffe8baa0b575594af48f6f690425c', htmlFor: "type" }, "Type"), h("pos-select-term", { key: '9973af04355cf8dec838a4217f711e4c8669dab4', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: '4fac8ecca95c2e16c98c35ae92ea9b7f6bd6a94a', htmlFor: "name" }, "Name"), h("input", { key: 'c922c03e656d194c3235fb374ef90fce205f7ee7', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: 'fb39eb6c09e67315326f13e184aab93a4ed786c6', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
     }
     handleChange(event) {
         this.name = event.target.value;

package/dist/collection/components/pos-router/pos-router.js

@@ -38,7 +38,7 @@ export class PosRouter {
         this.routeChanged.emit(this.uri);
     }
     render() {
-        return h("slot", { key: '5d39b495d0835298a50ff39ec55d83481764c376' });
+        return h("slot", { key: '21f84b363ae9820f290475d61af8e32b76aeedfb' });
     }
     static get is() { return "pos-router"; }
     static get originalStyleUrls() {

package/dist/collection/components/pos-select-term/pos-select-term.js

@@ -19,7 +19,7 @@ export class PosSelectTerm {
         this.termSelected.emit({ uri: event.target.value });
     }
     render() {
-        return (h(Host, { key: '19fcf00d5d0b45657e304307b52249d0d387a44a' }, h("input", { key: '0ed3ff623d93a3b940a7615683aa4428e69da56f', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: 'cc518b371003586cf9a4df1423bf3588666b3ebd', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
+        return (h(Host, { key: 'b8d13c8bbbce1b43aa979d1554300ee07691ce7c' }, h("input", { key: '48ce96862c6f5ae744874681f5c8e3966cf7747a', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '2e717df5aa51a375b8cf23b97084f4788877960f', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
     }
     static get is() { return "pos-select-term"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/pos-app-document-viewer.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as subscribeResource } from './ResourceAware.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './skeleton-text.js';
-import { d as defineCustomElement$2 } from './pos-document2.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './skeleton-text.js';
+import { d as defineCustomElement$3 } from './pos-document2.js';
+import { d as defineCustomElement$2 } from './pos-markdown-document2.js';
 
 const defaultAppLayoutCss = ":host{--gap-size:var(--size-4);display:flex;flex-direction:column;gap:var(--gap-size);margin:var(--gap-size)}section{display:flex;flex-direction:column;gap:var(--gap-size)}@media (min-width: 640px){:host{flex-direction:row;flex-wrap:wrap;section:first-of-type {\n      flex: 1}section:not(:first-of-type){flex:0 0 30%}}";
 const PosAppDocumentViewerStyle0 = defaultAppLayoutCss;
@@ -37,7 +38,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-app-document-viewer", "ion-icon", "ion-skeleton-text", "pos-document"];
+    const components = ["pos-app-document-viewer", "ion-icon", "ion-skeleton-text", "pos-document", "pos-markdown-document"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-app-document-viewer":
             if (!customElements.get(tagName)) {
@@ -46,15 +47,20 @@ function defineCustomElement$1() {
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "ion-skeleton-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "pos-document":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "pos-markdown-document":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/pos-app-document-viewer.js.map

@@ -1 +1 @@
-{"file":"pos-app-document-viewer.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,mCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,mCAAe,cAAc;;MCQhBA,sBAAoB;IALjC;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KAeH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,EAAC,IAAI,QACH,mBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppDocumentViewer"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pos-app-document-viewer.js","mappings":";;;;;;;AAAA,MAAM,mBAAmB,GAAG,iUAAiU,CAAC;AAC9V,mCAAe,mBAAmB;;ACDlC,MAAM,cAAc,GAAG,0YAA0Y,CAAC;AACla,mCAAe,cAAc;;MCQhBA,sBAAoB;IALjC;;;;;QAcE,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B,CAAC;KAeH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,IAAI,CAAC;SACb;QAED,QACE,EAAC,IAAI,QACH,mBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PosAppDocumentViewer"],"sources":["src/apps/styles/default-app-layout.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/styles/article-card.css?tag=pos-app-document-viewer&encapsulation=shadow","src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"sourcesContent":[":host {\n  --gap-size: var(--size-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n  margin: var(--gap-size);\n}\n\nsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-size);\n}\n\n@media (min-width: 640px) {\n  :host {\n    flex-direction: row;\n    flex-wrap: wrap;\n\n    section:first-of-type {\n      flex: 1;\n    }\n\n    section:not(:first-of-type) {\n      flex: 0 0 30%;\n    }\n  }\n}\n","article {\n  padding: var(--size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n  outline: var(--pos-border-solid);\n  border-radius: var(--radius-sm);\n  box-shadow: var(--shadow-md);\n  background-color: var(--pos-card-background);\n\n  header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    h1 {\n      margin: 0;\n    }\n  }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/pos-document2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as store } from './session.js';
 import { B as BrokenFile } from './BrokenFile.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './skeleton-text.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './skeleton-text.js';
+import { d as defineCustomElement$1 } from './pos-markdown-document2.js';
 
 const posDocumentCss = "iframe{background-color:var(--pos-background-color);width:100%;height:100vh}.error{display:flex;opacity:0.8;background:repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
 const PosDocumentStyle0 = posDocumentCss;
@@ -29,7 +30,7 @@ const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends H
             const file = await this.os.fetchFile(this.src);
             this.resourceLoadedEmitter.emit(this.src);
             if (file.blob()) {
-                this.dataUri = URL.createObjectURL(file.blob());
+                this.file = file;
                 this.error = null;
             }
             else {
@@ -53,7 +54,12 @@ const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends H
         if (this.brokenFile) {
             return h(BrokenFile, { file: this.brokenFile });
         }
-        return h("iframe", { src: this.dataUri });
+        if (this.file.blob().type === 'text/markdown') {
+            return h("pos-markdown-document", { file: this.file });
+        }
+        else {
+            return h("iframe", { src: URL.createObjectURL(this.file.blob()) });
+        }
     }
     static get watchers() { return {
         "os": ["fetchBlob"],
@@ -64,7 +70,7 @@ const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends H
         "src": [1],
         "alt": [1],
         "os": [32],
-        "dataUri": [32],
+        "file": [32],
         "brokenFile": [32],
         "error": [32],
         "loading": [32]
@@ -76,7 +82,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pos-document", "ion-icon", "ion-skeleton-text"];
+    const components = ["pos-document", "ion-icon", "ion-skeleton-text", "pos-markdown-document"];
     components.forEach(tagName => { switch (tagName) {
         case "pos-document":
             if (!customElements.get(tagName)) {
@@ -85,10 +91,15 @@ function defineCustomElement() {
             break;
         case "ion-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "ion-skeleton-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "pos-markdown-document":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/pos-document2.js.map

@@ -1 +1 @@
-{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,soBAAsoB,CAAC;AAC9pB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAkCH;IAzCC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;KAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["iframe {\n  background-color: var(--pos-background-color);\n  width: 100%;\n  height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n  display: flex;\n  opacity: 0.8;\n  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n  flex-direction: column;\n  border: 1px solid red;\n  color: black;\n  align-items: center;\n  justify-content: center;\n  word-break: break-all;\n  padding: 1rem;\n  box-sizing: border-box;\n}\n\n.error ion-icon {\n  color: #282828;\n  --ionicon-stroke-width: calc(var(--width) / 5);\n  font-size: calc(var(--width) / 2);\n}\n\na {\n  text-decoration: none;\n  width: var(--width);\n  height: var(--height);\n}\n\n.code {\n  font-weight: bold;\n  font-size: calc(var(--width) / 8);\n}\n\n.text {\n  font-size: calc(var(--width) / 20);\n}\n","import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private dataUri: string;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.dataUri = URL.createObjectURL(file.blob());\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    return <iframe src={this.dataUri}></iframe>;\n  }\n}\n"],"version":3}
+{"file":"pos-document2.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,soBAAsoB,CAAC;AAC9pB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAsCH;IA7CC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,KAAK,eAAe,EAAE;YAC7C,OAAO,6BAAuB,IAAI,EAAE,IAAI,CAAC,IAAI,GAA0B,CAAC;SACzE;aAAM;YACL,OAAO,cAAQ,GAAG,EAAE,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAW,CAAC;SACtE;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["iframe {\n  background-color: var(--pos-background-color);\n  width: 100%;\n  height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n  display: flex;\n  opacity: 0.8;\n  background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n  flex-direction: column;\n  border: 1px solid red;\n  color: black;\n  align-items: center;\n  justify-content: center;\n  word-break: break-all;\n  padding: 1rem;\n  box-sizing: border-box;\n}\n\n.error ion-icon {\n  color: #282828;\n  --ionicon-stroke-width: calc(var(--width) / 5);\n  font-size: calc(var(--width) / 2);\n}\n\na {\n  text-decoration: none;\n  width: var(--width);\n  height: var(--height);\n}\n\n.code {\n  font-weight: bold;\n  font-size: calc(var(--width) / 8);\n}\n\n.text {\n  font-size: calc(var(--width) / 20);\n}\n","import { PodOS, BrokenFile as BrokenFileData, SolidFile } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n  tag: 'pos-document',\n  styleUrl: 'pos-document.css',\n  shadow: true,\n})\nexport class PosDocument {\n  @Prop() src: string;\n\n  @Prop() alt: string;\n\n  @State() os: PodOS;\n\n  @State()\n  private file: SolidFile;\n\n  @State()\n  private brokenFile: BrokenFileData;\n\n  @State()\n  private error: Error;\n\n  @State()\n  private loading: boolean = true;\n\n  @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n  /**\n   * Indicates that the resource given in `src` property has been loaded.\n   */\n  @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n  componentWillLoad() {\n    session.onChange('isLoggedIn', () => this.fetchBlob());\n    this.initializeOsEmitter.emit(this.setOs);\n  }\n\n  setOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  @Watch('os')\n  @Watch('src')\n  async fetchBlob() {\n    try {\n      this.loading = true;\n      const file = await this.os.fetchFile(this.src);\n      this.resourceLoadedEmitter.emit(this.src);\n      if (file.blob()) {\n        this.file = file;\n        this.error = null;\n      } else {\n        this.brokenFile = file as BrokenFileData;\n      }\n    } catch (err) {\n      this.error = err;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n    }\n    if (this.error) {\n      return <div class=\"error\">{this.error.message}</div>;\n    }\n    if (this.brokenFile) {\n      return <BrokenFile file={this.brokenFile} />;\n    }\n    if (this.file.blob().type === 'text/markdown') {\n      return <pos-markdown-document file={this.file}></pos-markdown-document>;\n    } else {\n      return <iframe src={URL.createObjectURL(this.file.blob())}></iframe>;\n    }\n  }\n}\n"],"version":3}

package/dist/components/pos-markdown-document.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PosMarkdownDocument extends Components.PosMarkdownDocument, HTMLElement {}
+export const PosMarkdownDocument: {
+    prototype: PosMarkdownDocument;
+    new (): PosMarkdownDocument;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pos-markdown-document.js

@@ -0,0 +1,8 @@
+import { P as PosMarkdownDocument$1, d as defineCustomElement$1 } from './pos-markdown-document2.js';
+
+const PosMarkdownDocument = PosMarkdownDocument$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosMarkdownDocument, defineCustomElement };
+
+//# sourceMappingURL=pos-markdown-document.js.map

package/dist/components/pos-markdown-document.js.map

@@ -0,0 +1 @@
+{"file":"pos-markdown-document.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}