@things-factory/help 4.0.15 → 4.0.20

package/client/index.js

@@ -1,5 +1,4 @@
 export * from './controller/help'
-export * from './controller/markdown'
 export * from './components/inline-help'
 export * from './components/title-with-help'
 export * from './components/help-icon'

package/client/pages/help-home.js

@@ -6,17 +6,13 @@ import { css, html } from 'lit-element'
 import { i18next, localize } from '@things-factory/i18n-base'
 
 import Headroom from '@operato/headroom'
-import { HelpStyle } from '../help-style'
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import { md } from '../controller/markdown'
-import { unsafeHTML } from 'lit-html/directives/unsafe-html'
 
 class HelpHome extends connect(store)(localize(i18next)(PageView)) {
   static get styles() {
     return [
       ScrollbarStyles,
       HeadroomStyles,
-      HelpStyle,
       css`
         :host {
           display: flex;
@@ -60,47 +56,6 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
 
           scroll-padding-top: 65px;
         }
-
-        #toc {
-          position: absolute;
-          max-width: 250px;
-          background-color: var(--theme-white-color);
-          padding: var(--padding-default);
-          right: var(--margin-wide);
-          font: bold var(--fontsize-large) var(--theme-font);
-          color: var(--secondary-text-color);
-        }
-        #toc ul {
-          list-style: circle;
-          margin: var(--margin-default) 0 0 var(--margin-wide);
-          padding: 0;
-        }
-        #toc a {
-          display: inline-block;
-          margin-left: -var(--margin-narrow);
-          padding: var(--padding-narrow) 0;
-          font: normal var(--fontsize-default) var(--theme-font);
-          color: var(--secondary-color);
-          text-decoration: none;
-          cursor: pointer;
-        }
-        #toc a:hover {
-          background-color: var(--theme-white-color);
-          text-decoration: underline;
-          color: var(--primary-color);
-        }
-
-        @media screen and (max-width: 480px) {
-          #toc {
-            background-color: var(--main-section-background-color);
-            border-left: 4px solid var(--primary-color);
-            border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
-            position: relative;
-            width: 100%;
-            max-width: initial;
-            padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
-          }
-        }
       `
     ]
   }
@@ -108,8 +63,6 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
   static get properties() {
     return {
       topic: String,
-      _html: String,
-      _headings: Array,
       showGotoTop: Boolean
     }
   }
@@ -121,11 +74,10 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
   }
 
   render() {
+    const src = this.topic && `/helps/${this.topic || 'index'}.md`
+
     return html`
-      <div id="content">
-        ${this.renderToc()}
-        ${this._html}
-      </div>
+      <ox-markdown id="content" .src=${src} toc></ox-markdown>
 
       <div id="navigation">
         <mwc-icon-button icon="home" @click=${e => navigate('help')} ?disabled=${
@@ -141,23 +93,6 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
     `
   }
 
-  renderToc() {
-    var toc = this._headings || []
-
-    return toc && toc.length > 0
-      ? html`
-          <div id="toc">
-            Table Of Contents
-            <ul>
-              ${toc.map(
-                heading => html` <li><a @click=${e => heading?.scrollIntoView()}>${heading.textContent}</a></li> `
-              )}
-            </ul>
-          </div>
-        `
-      : html``
-  }
-
   async firstUpdated() {
     var content = this.renderRoot.querySelector('#content')
     content.addEventListener('scroll', e => {
@@ -177,37 +112,6 @@ class HelpHome extends connect(store)(localize(i18next)(PageView)) {
     headroom.init()
   }
 
-  async updated(changed) {
-    if (changed.has('topic')) {
-      const baseUrl = `/helps/${this.topic || 'index'}.md`
-      const response = await fetch(baseUrl)
-
-      const content = await response.text()
-
-      if (!response.ok) {
-        this._html = html`
-          <h1>Error : ${response.status}</h1>
-          <div>${content}</div>
-          <a href=${`/help?topic=${this.topic}`}>try again</a>
-        `
-      } else {
-        if (response.headers.get('Content-Type').indexOf('text/markdown') !== -1) {
-          this._html = unsafeHTML(
-            (await md(content, {
-              baseUrl
-            })) || ''
-          )
-        } else {
-          this._html = unsafeHTML(content || '')
-        }
-      }
-    }
-
-    if (changed.has('_html')) {
-      this._headings = Array.from(this.renderRoot.querySelectorAll('#content h2'))
-    }
-  }
-
   async pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.topic = lifecycle.params['topic'] || 'index'

package/client/viewparts/help-panel.js

@@ -1,21 +1,18 @@
 import '@material/mwc-icon-button'
+import '@operato/markdown'
 
 import { HeadroomStyles, ScrollbarStyles } from '@things-factory/styles'
 import { LitElement, css, html } from 'lit-element'
 import { navigate, store } from '@things-factory/shell'
 
 import Headroom from '@operato/headroom'
-import { HelpStyle } from '../help-style'
 import { closeOverlay } from '@things-factory/layout-base'
 import { connect } from 'pwa-helpers/connect-mixin.js'
-import { md } from '../controller/markdown'
-import { unsafeHTML } from 'lit-html/directives/unsafe-html'
 
 class HelpPanel extends connect(store)(LitElement) {
   static get properties() {
     return {
       topic: String,
-      _html: String,
       historyIndex: Number,
       showGotoTop: Boolean
     }
@@ -25,7 +22,6 @@ class HelpPanel extends connect(store)(LitElement) {
     return [
       ScrollbarStyles,
       HeadroomStyles,
-      HelpStyle,
       css`
         :host {
           display: flex;
@@ -121,7 +117,7 @@ class HelpPanel extends connect(store)(LitElement) {
       ${!this.showGotoTop
         ? html``
         : html` <mwc-icon id="upward" @click=${e => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
-      <div id="content">${this._html}</div>
+      <ox-markdown id="content" .src=${this.topic && `/helps/${this.topic}.md`}></ox-markdown>
     `
   }
 
@@ -148,30 +144,6 @@ class HelpPanel extends connect(store)(LitElement) {
 
   async updated(changed) {
     if (changed.has('topic')) {
-      if (this.topic) {
-        const baseUrl = `/helps/${this.topic}.md`
-        const response = await fetch(baseUrl)
-        const content = await response.text()
-
-        if (!response.ok) {
-          this._html = html`
-            <h1>Error : ${response.status}</h1>
-            <div>${content}</div>
-            <a href=${`/help?topic=${this.topic}`}>try again</a>
-          `
-        } else {
-          if (response.headers.get('Content-Type').indexOf('text/markdown') !== -1) {
-            this._html = unsafeHTML(
-              (await md(content, {
-                baseUrl
-              })) || ''
-            )
-          } else {
-            this._html = unsafeHTML(content || '')
-          }
-        }
-      }
-
       if (!this.history) {
         this.history = [this.topic]
         this.historyIndex = 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/help",
-  "version": "4.0.15",
+  "version": "4.0.20",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -26,10 +26,10 @@
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
-    "@operato/headroom": "^0.2.47",
-    "@things-factory/grist-ui": "^4.0.15",
-    "@things-factory/layout-base": "^4.0.15",
-    "marked": "^4.0.5"
+    "@operato/headroom": "^0.2.49",
+    "@operato/markdown": "^0.2.49",
+    "@things-factory/grist-ui": "^4.0.20",
+    "@things-factory/layout-base": "^4.0.20"
   },
-  "gitHead": "6271c88d67c5004b78623d6998b4ea773c76b730"
+  "gitHead": "c597c72345f43f0a4780feda11d89d3218ac8a3e"
 }

package/assets/scripts/markdown-webworker.js

@@ -1,30 +0,0 @@
-importScripts('/node_modules/marked/marked.min.js')
-
-var TOPIC_OFFSET = '/helps/'.length
-
-marked.use({
-  renderer: {
-    link: function link(href, title, text) {
-      var baseUrl = new URL(this.options.baseUrl, location.origin)
-      var targetUrl = new URL(href, baseUrl)
-      var outside = targetUrl.origin !== location.origin
-
-      if (!outside) {
-        var pathname = targetUrl.pathname
-        if (pathname.endsWith('.md') || pathname.endsWith('.markdown')) {
-          var url = new URL(location.origin + '/help')
-          url.searchParams.append('topic', pathname.slice(TOPIC_OFFSET, pathname.lastIndexOf('.')))
-
-          href = url.href
-        }
-      }
-
-      return `<a href="${href}" ${title ? `title="${title}"` : ''} ${outside ? 'target="_blank"' : ''}>${text}</a>`
-    }
-  }
-})
-
-onmessage = e => {
-  const { content, options } = e.data
-  postMessage(marked.parse(content, options))
-}

package/client/controller/markdown.js

@@ -1,20 +0,0 @@
-const worker = new Worker('/assets/scripts/markdown-webworker.js')
-const TIMEOUT_LIMIT = 20000
-
-export async function md(markdown, options) {
-  return new Promise((resolve, reject) => {
-    var timeout = setTimeout(() => {
-      reject('Marked took too long!')
-    }, TIMEOUT_LIMIT)
-
-    worker.onmessage = e => {
-      clearTimeout(timeout)
-      resolve(e.data)
-    }
-
-    worker.postMessage({
-      content: markdown,
-      options
-    })
-  })
-}