From 90af9eedde4e9fdb8c4c965e4911326703e23c5f Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 28 Jan 2018 13:09:39 -0800
Subject: [PATCH] refactor store

---
 routes/_actions/timeline.js                   |   2 +-
 routes/_components/Layout.html                |   2 +-
 routes/_components/status/Status.html         |   2 +-
 routes/_components/timeline/LazyTimeline.html |   2 +-
 routes/_components/timeline/Timeline.html     |   2 +-
 routes/_store/LocalStorageStore.js            |  40 +++++
 routes/_store/computations.js                 |   7 +
 routes/_store/instanceComputations.js         |  49 +++++++
 routes/_store/mixins.js                       |  19 +++
 .../storeObservers.js => _store/obsevers.js}  |   2 +-
 routes/_store/store.js                        |  38 +++++
 routes/_store/timelineComputations.js         |  11 ++
 routes/_utils/binary.js                       |  27 ----
 routes/_utils/store.js                        | 138 ------------------
 routes/accounts/[accountId].html              |   2 +-
 routes/accounts/_actions/[accountId].js       |   2 +-
 routes/federated.html                         |   2 +-
 routes/index.html                             |   2 +-
 routes/local.html                             |   2 +-
 routes/settings/instances/[instanceName].html |   2 +-
 .../instances/_actions/[instanceName].js      |   2 +-
 routes/settings/instances/_actions/add.js     |   2 +-
 routes/settings/instances/add.html            |   2 +-
 routes/settings/instances/index.html          |   2 +-
 routes/tags/[tagName].html                    |   2 +-
 25 files changed, 181 insertions(+), 182 deletions(-)
 create mode 100644 routes/_store/LocalStorageStore.js
 create mode 100644 routes/_store/computations.js
 create mode 100644 routes/_store/instanceComputations.js
 create mode 100644 routes/_store/mixins.js
 rename routes/{_utils/storeObservers.js => _store/obsevers.js} (84%)
 create mode 100644 routes/_store/store.js
 create mode 100644 routes/_store/timelineComputations.js
 delete mode 100644 routes/_utils/binary.js
 delete mode 100644 routes/_utils/store.js

diff --git a/routes/_actions/timeline.js b/routes/_actions/timeline.js
index 829c902..0104c8a 100644
--- a/routes/_actions/timeline.js
+++ b/routes/_actions/timeline.js
@@ -1,4 +1,4 @@
-import { store } from '../_utils/store'
+import { store } from '../_store/store'
 import { database } from '../_utils/database/database'
 import { getTimeline } from '../_utils/mastodon/timelines'
 import { toast } from '../_utils/toast'
diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html
index c7e9692..e68639b 100644
--- a/routes/_components/Layout.html
+++ b/routes/_components/Layout.html
@@ -17,7 +17,7 @@
 <script>
 	import Nav from './Nav.html';
 	import VirtualListContainer from './virtualList/VirtualListContainer.html'
-  import { store } from '../_utils/store'
+  import { store } from '../_store/store'
 
 	export default {
 	  oncreate() {
diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index 8445713..f08891b 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -297,7 +297,7 @@
   import { mark, stop } from '../../_utils/marks'
   import IntlRelativeFormat from 'intl-relativeformat'
   import { replaceAll } from '../../_utils/replaceAll'
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
 
   const relativeFormat = new IntlRelativeFormat('en-US');
 
diff --git a/routes/_components/timeline/LazyTimeline.html b/routes/_components/timeline/LazyTimeline.html
index a8d0efd..3ccbc12 100644
--- a/routes/_components/timeline/LazyTimeline.html
+++ b/routes/_components/timeline/LazyTimeline.html
@@ -35,7 +35,7 @@
   import LoadingSpinner from '../LoadingSpinner.html'
   // TODO: the transition seems to occasionally cause an error in Svelte, transition_run is undefined
   //import { fade } from 'svelte-transitions'
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
 
   export default {
     oncreate() {
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index e07c63c..627e38e 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -16,7 +16,7 @@
   }
 </style>
 <script>
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import StatusListItem from './StatusListItem.html'
   import LoadingFooter from './LoadingFooter.html'
   import VirtualList from '../virtualList/VirtualList.html'
diff --git a/routes/_store/LocalStorageStore.js b/routes/_store/LocalStorageStore.js
new file mode 100644
index 0000000..ac404f5
--- /dev/null
+++ b/routes/_store/LocalStorageStore.js
@@ -0,0 +1,40 @@
+import { Store } from 'svelte/store'
+
+const LS = process.browser && localStorage
+
+export class LocalStorageStore extends Store {
+  constructor(state, keysToWatch) {
+    super(state)
+    if (!process.browser) {
+      return
+    }
+    this._keysToWatch = keysToWatch
+    this._keysToSave = {}
+    let newState = {}
+    for (let i = 0, len = LS.length; i < len; i++) {
+      let key = LS.key(i)
+      if (key.startsWith('store_')) {
+        let item = LS.getItem(key)
+        newState[key.substring(6)] = item === 'undefined' ? undefined : JSON.parse(item)
+      }
+    }
+    this.set(newState)
+    this.onchange((state, changed) => {
+      Object.keys(changed).forEach(change => {
+        if (this._keysToWatch.has(change)) {
+          this._keysToSave[change] = true
+        }
+      })
+    })
+  }
+
+  save() {
+    if (!process.browser) {
+      return
+    }
+    Object.keys(this._keysToSave).forEach(key => {
+      LS.setItem(`store_${key}`, JSON.stringify(this.get(key)))
+    })
+    this._keysToSave = {}
+  }
+}
\ No newline at end of file
diff --git a/routes/_store/computations.js b/routes/_store/computations.js
new file mode 100644
index 0000000..dbf13f4
--- /dev/null
+++ b/routes/_store/computations.js
@@ -0,0 +1,7 @@
+import { instanceComputations } from './instanceComputations'
+import { timelineComputations } from './timelineComputations'
+
+export function computations(store) {
+  instanceComputations(store)
+  timelineComputations(store)
+}
\ No newline at end of file
diff --git a/routes/_store/instanceComputations.js b/routes/_store/instanceComputations.js
new file mode 100644
index 0000000..55c350d
--- /dev/null
+++ b/routes/_store/instanceComputations.js
@@ -0,0 +1,49 @@
+export function instanceComputations(store) {
+  store.compute(
+    'isUserLoggedIn',
+    ['currentInstance', 'loggedInInstances'],
+    (currentInstance, loggedInInstances) => !!(currentInstance && Object.keys(loggedInInstances).includes(currentInstance))
+  )
+
+  store.compute(
+    'loggedInInstancesAsList',
+    ['currentInstance', 'loggedInInstances', 'loggedInInstancesInOrder'],
+    (currentInstance, loggedInInstances, loggedInInstancesInOrder) => {
+      return loggedInInstancesInOrder.map(instanceName => {
+        return Object.assign({
+          current: currentInstance === instanceName,
+          name: instanceName
+        }, loggedInInstances[instanceName])
+      })
+    }
+  )
+
+  store.compute(
+    'currentInstanceData',
+    ['currentInstance', 'loggedInInstances'],
+    (currentInstance, loggedInInstances) => {
+      return Object.assign({
+        name: currentInstance
+      }, loggedInInstances[currentInstance])
+    })
+
+  store.compute(
+    'accessToken',
+    ['currentInstanceData'],
+    (currentInstanceData) => currentInstanceData.access_token
+  )
+
+  store.compute(
+    'currentTheme',
+    ['currentInstance', 'instanceThemes'],
+    (currentInstance, instanceThemes) => {
+      return instanceThemes[currentInstance] || 'default'
+    }
+  )
+
+  store.compute(
+    'currentVerifyCredentials',
+    ['currentInstance', 'verifyCredentials'],
+    (currentInstance, verifyCredentials) => verifyCredentials && verifyCredentials[currentInstance]
+  )
+}
\ No newline at end of file
diff --git a/routes/_store/mixins.js b/routes/_store/mixins.js
new file mode 100644
index 0000000..6157636
--- /dev/null
+++ b/routes/_store/mixins.js
@@ -0,0 +1,19 @@
+function timelineMixins(Store) {
+  Store.prototype.setForTimeline = function (instanceName, timelineName, obj) {
+    let timelines = this.get('timelines') || {}
+    let timelineData = timelines[instanceName] || {}
+    timelineData[timelineName] = Object.assign(timelineData[timelineName] || {}, obj)
+    timelines[instanceName] = timelineData
+    this.set({timelines: timelines})
+  }
+
+  Store.prototype.getForTimeline = function (instanceName, timelineName, key) {
+    let timelines = this.get('timelines') || {}
+    let timelineData = timelines[instanceName] || {}
+    return (timelineData[timelineName] || {})[key]
+  }
+}
+
+export function mixins(Store) {
+  timelineMixins(Store)
+}
\ No newline at end of file
diff --git a/routes/_utils/storeObservers.js b/routes/_store/obsevers.js
similarity index 84%
rename from routes/_utils/storeObservers.js
rename to routes/_store/obsevers.js
index 0e90827..4309e3b 100644
--- a/routes/_utils/storeObservers.js
+++ b/routes/_store/obsevers.js
@@ -1,6 +1,6 @@
 import { updateVerifyCredentialsForInstance } from '../settings/instances/_actions/[instanceName]'
 
-export function storeObservers(store) {
+export function observers(store) {
   store.observe('currentInstance', (currentInstance) => {
     updateVerifyCredentialsForInstance(currentInstance)
   })
diff --git a/routes/_store/store.js b/routes/_store/store.js
new file mode 100644
index 0000000..05fae15
--- /dev/null
+++ b/routes/_store/store.js
@@ -0,0 +1,38 @@
+import { observers } from './obsevers'
+import { computations } from './computations'
+import { mixins } from './mixins'
+import { LocalStorageStore } from './LocalStorageStore'
+
+const KEYS_TO_STORE_IN_LOCAL_STORAGE = new Set([
+  "currentInstance",
+  "currentRegisteredInstance",
+  "currentRegisteredInstanceName",
+  "instanceNameInSearch",
+  "instanceThemes",
+  "loggedInInstances",
+  "loggedInInstancesInOrder"
+])
+
+class PinaforeStore extends LocalStorageStore {
+  constructor(state) {
+    super(state, KEYS_TO_STORE_IN_LOCAL_STORAGE)
+  }
+}
+
+const store = new PinaforeStore({
+  instanceNameInSearch: '',
+  currentInstance: null,
+  loggedInInstances: {},
+  loggedInInstancesInOrder: [],
+  instanceThemes: {}
+})
+
+mixins(PinaforeStore)
+computations(store)
+observers(store)
+
+if (process.browser && process.env.NODE_ENV !== 'production') {
+  window.store = store // for debugging
+}
+
+export { store }
\ No newline at end of file
diff --git a/routes/_store/timelineComputations.js b/routes/_store/timelineComputations.js
new file mode 100644
index 0000000..bad286a
--- /dev/null
+++ b/routes/_store/timelineComputations.js
@@ -0,0 +1,11 @@
+export function timelineComputations(store) {
+  store.compute('currentTimelineData', ['currentInstance', 'currentTimeline', 'timelines'],
+    (currentInstance, currentTimeline, timelines) => {
+      return ((timelines && timelines[currentInstance]) || {})[currentTimeline] || {}
+    })
+
+  store.compute('statusIds', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.statusIds || [])
+  store.compute('runningUpdate', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.runningUpdate)
+  store.compute('initialized', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.initialized)
+  store.compute('lastStatusId', ['statusIds'], (statusIds) => statusIds.length && statusIds[statusIds.length - 1])
+}
\ No newline at end of file
diff --git a/routes/_utils/binary.js b/routes/_utils/binary.js
deleted file mode 100644
index a14f023..0000000
--- a/routes/_utils/binary.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// from blob-util
-function blobToBinaryString(blob) {
-  return new Promise(function (resolve, reject) {
-    var reader = new FileReader();
-    var hasBinaryString = typeof reader.readAsBinaryString === 'function';
-    reader.onloadend = function (e) {
-      var result = e.target.result || '';
-      if (hasBinaryString) {
-        return resolve(result);
-      }
-      resolve(arrayBufferToBinaryString(result));
-    };
-    reader.onerror = reject;
-    if (hasBinaryString) {
-      reader.readAsBinaryString(blob);
-    } else {
-      reader.readAsArrayBuffer(blob);
-    }
-  });
-}
-
-export function blobToBase64(blob) {
-  return blobToBinaryString(blob).then(function (binary) {
-    // web-safe variant
-    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-  });
-}
\ No newline at end of file
diff --git a/routes/_utils/store.js b/routes/_utils/store.js
deleted file mode 100644
index ec4adaa..0000000
--- a/routes/_utils/store.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Store } from 'svelte/store.js'
-import { storeObservers } from './storeObservers'
-
-const LOCAL_STORAGE_KEYS = new Set([
-  "currentInstance",
-  "currentRegisteredInstance",
-  "currentRegisteredInstanceName",
-  "instanceNameInSearch",
-  "instanceThemes",
-  "loggedInInstances",
-  "loggedInInstancesInOrder"
-])
-
-const LS = process.browser && localStorage
-class PinaforeStore extends Store {
-
-  constructor(state) {
-    super(state)
-    if (process.browser) {
-      this.keysToStore = {}
-      let newState = {}
-      for (let i = 0, len = LS.length; i < len; i++) {
-        let key = LS.key(i)
-        if (key.startsWith('store_')) {
-          let item = LS.getItem(key)
-          newState[key.substring(6)] = item === 'undefined' ? undefined : JSON.parse(item)
-        }
-      }
-      this.set(newState)
-      this.onchange((state, changed) => {
-        Object.keys(changed).forEach(change => {
-          if (LOCAL_STORAGE_KEYS.has(change)) {
-            this.keysToStore[change] = true
-          }
-        })
-      })
-    }
-  }
-
-  save() {
-    if (process.browser) {
-      Object.keys(this.keysToStore).forEach(key => {
-        LS.setItem(`store_${key}`, JSON.stringify(this.get(key)))
-      })
-      this.keysToStore = {}
-    }
-  }
-
-  setForTimeline(instanceName, timelineName, obj) {
-    let timelines = this.get('timelines') || {}
-    let timelineData = timelines[instanceName] || {}
-    timelineData[timelineName] = Object.assign(timelineData[timelineName] || {}, obj)
-    timelines[instanceName] = timelineData
-    this.set({timelines: timelines})
-  }
-
-  getForTimeline(instanceName, timelineName, key) {
-    let timelines = this.get('timelines') || {}
-    let timelineData = timelines[instanceName] || {}
-    return (timelineData[timelineName] || {})[key]
-  }
-}
-
-const store = new PinaforeStore({
-  instanceNameInSearch: '',
-  currentRegisteredInstance: null,
-  currentRegisteredInstanceName: '',
-  currentInstance: null,
-  loggedInInstances: {},
-  loggedInInstancesInOrder: [],
-  instanceThemes: {}
-})
-
-store.compute(
-  'isUserLoggedIn',
-  ['currentInstance', 'loggedInInstances'],
-  (currentInstance, loggedInInstances) => !!(currentInstance && Object.keys(loggedInInstances).includes(currentInstance))
-)
-
-store.compute(
-  'loggedInInstancesAsList',
-  ['currentInstance', 'loggedInInstances', 'loggedInInstancesInOrder'],
-  (currentInstance, loggedInInstances, loggedInInstancesInOrder) => {
-    return loggedInInstancesInOrder.map(instanceName => {
-      return Object.assign({
-        current: currentInstance === instanceName,
-        name: instanceName
-      }, loggedInInstances[instanceName])
-    })
-  }
-)
-
-store.compute(
-  'currentInstanceData',
-  ['currentInstance', 'loggedInInstances'],
-  (currentInstance, loggedInInstances) => {
-    return Object.assign({
-      name: currentInstance
-    }, loggedInInstances[currentInstance])
-})
-
-store.compute(
-  'accessToken',
-  ['currentInstanceData'],
-  (currentInstanceData) => currentInstanceData.access_token
-)
-
-store.compute(
-  'currentTheme',
-  ['currentInstance', 'instanceThemes'],
-  (currentInstance, instanceThemes) => {
-    return instanceThemes[currentInstance] || 'default'
-  }
-)
-
-store.compute(
-  'currentVerifyCredentials',
-  ['currentInstance', 'verifyCredentials'],
-  (currentInstance, verifyCredentials) => verifyCredentials && verifyCredentials[currentInstance]
-)
-
-store.compute('currentTimelineData', ['currentInstance', 'currentTimeline', 'timelines'],
-  (currentInstance, currentTimeline, timelines) => {
-  return ((timelines && timelines[currentInstance]) || {})[currentTimeline] || {}
-})
-
-store.compute('statusIds',     ['currentTimelineData'], (currentTimelineData) => currentTimelineData.statusIds || [])
-store.compute('runningUpdate', ['currentTimelineData'], (currentTimelineData) => currentTimelineData.runningUpdate)
-store.compute('initialized',   ['currentTimelineData'], (currentTimelineData) => currentTimelineData.initialized)
-store.compute('lastStatusId',  ['statusIds'], (statusIds) => statusIds.length && statusIds[statusIds.length - 1])
-
-storeObservers(store)
-
-if (process.browser && process.env.NODE_ENV !== 'production') {
-  window.store = store // for debugging
-}
-
-export { store }
\ No newline at end of file
diff --git a/routes/accounts/[accountId].html b/routes/accounts/[accountId].html
index 56243a7..937e235 100644
--- a/routes/accounts/[accountId].html
+++ b/routes/accounts/[accountId].html
@@ -32,7 +32,7 @@
   import Layout from '../_components/Layout.html'
   import LazyTimeline from '../_components/timeline/LazyTimeline.html'
   import FreeTextLayout from '../_components/FreeTextLayout.html'
-  import { store } from '../_utils/store.js'
+  import { store } from '../_store/store.js'
   import HiddenFromSSR from '../_components/HiddenFromSSR'
   import DynamicPageBanner from '../_components/DynamicPageBanner.html'
   import { updateProfileAndRelationship } from './_actions/[accountId]'
diff --git a/routes/accounts/_actions/[accountId].js b/routes/accounts/_actions/[accountId].js
index 778de36..3976983 100644
--- a/routes/accounts/_actions/[accountId].js
+++ b/routes/accounts/_actions/[accountId].js
@@ -1,6 +1,6 @@
 import { getAccount, getRelationship } from '../../_utils/mastodon/user'
 import { database } from '../../_utils/database/database'
-import { store } from '../../_utils/store'
+import { store } from '../../_store/store'
 
 async function updateAccount(accountId, instanceName, accessToken) {
   let localPromise = database.getAccount(instanceName, accountId)
diff --git a/routes/federated.html b/routes/federated.html
index 401b2ab..b75ba62 100644
--- a/routes/federated.html
+++ b/routes/federated.html
@@ -20,7 +20,7 @@
   import Layout from './_components/Layout.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
-  import { store } from './_utils/store.js'
+  import { store } from './_store/store.js'
   import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
diff --git a/routes/index.html b/routes/index.html
index 7635fef..dfc7ddc 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -15,7 +15,7 @@
   import Layout from './_components/Layout.html'
   import NotLoggedInHome from './_components/NotLoggedInHome.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
-  import { store } from './_utils/store.js'
+  import { store } from './_store/store.js'
 
 	export default {
 		store: () => store,
diff --git a/routes/local.html b/routes/local.html
index 06f27de..ecc19eb 100644
--- a/routes/local.html
+++ b/routes/local.html
@@ -20,7 +20,7 @@
   import Layout from './_components/Layout.html'
   import LazyTimeline from './_components/timeline/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
-  import { store } from './_utils/store.js'
+  import { store } from './_store/store.js'
   import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
diff --git a/routes/settings/instances/[instanceName].html b/routes/settings/instances/[instanceName].html
index 1d7eee7..0103611 100644
--- a/routes/settings/instances/[instanceName].html
+++ b/routes/settings/instances/[instanceName].html
@@ -94,7 +94,7 @@
   }
 </style>
 <script>
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import Layout from '../../_components/Layout.html'
   import SettingsLayout from '../_components/SettingsLayout.html'
   import {
diff --git a/routes/settings/instances/_actions/[instanceName].js b/routes/settings/instances/_actions/[instanceName].js
index 6231294..f0fde30 100644
--- a/routes/settings/instances/_actions/[instanceName].js
+++ b/routes/settings/instances/_actions/[instanceName].js
@@ -1,5 +1,5 @@
 import { getVerifyCredentials } from '../../../_utils/mastodon/user'
-import { store } from '../../../_utils/store'
+import { store } from '../../../_store/store'
 import { switchToTheme } from '../../../_utils/themeEngine'
 import { toast } from '../../../_utils/toast'
 import { database } from '../../../_utils/database/database'
diff --git a/routes/settings/instances/_actions/add.js b/routes/settings/instances/_actions/add.js
index 920f7db..8371b15 100644
--- a/routes/settings/instances/_actions/add.js
+++ b/routes/settings/instances/_actions/add.js
@@ -3,7 +3,7 @@ import { getInstanceInfo } from '../../../_utils/mastodon/instance'
 import { goto } from 'sapper/runtime.js'
 import { switchToTheme } from '../../../_utils/themeEngine'
 import { database } from '../../../_utils/database/database'
-import { store } from '../../../_utils/store'
+import { store } from '../../../_store/store'
 import { updateVerifyCredentialsForInstance } from './[instanceName]'
 
 const REDIRECT_URI = (typeof location !== 'undefined' ?
diff --git a/routes/settings/instances/add.html b/routes/settings/instances/add.html
index 4c57796..59114cf 100644
--- a/routes/settings/instances/add.html
+++ b/routes/settings/instances/add.html
@@ -70,7 +70,7 @@
 <script>
   import Layout from '../../_components/Layout.html';
   import SettingsLayout from '../_components/SettingsLayout.html'
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import LoadingMask from '../../_components/LoadingMask'
   import { logInToInstance, handleOauthCode } from './_actions/add'
 
diff --git a/routes/settings/instances/index.html b/routes/settings/instances/index.html
index e528ad0..3b0cc8d 100644
--- a/routes/settings/instances/index.html
+++ b/routes/settings/instances/index.html
@@ -25,7 +25,7 @@
   </SettingsLayout>
 </Layout>
 <script>
-  import { store } from '../../_utils/store'
+  import { store } from '../../_store/store'
   import Layout from '../../_components/Layout.html'
   import SettingsLayout from '../_components/SettingsLayout.html'
   import SettingsList from '../_components/SettingsList.html'
diff --git a/routes/tags/[tagName].html b/routes/tags/[tagName].html
index 1f416d3..2f23c36 100644
--- a/routes/tags/[tagName].html
+++ b/routes/tags/[tagName].html
@@ -26,7 +26,7 @@
   import Layout from '../_components/Layout.html'
   import LazyTimeline from '../_components/timeline/LazyTimeline.html'
   import FreeTextLayout from '../_components/FreeTextLayout.html'
-  import { store } from '../_utils/store.js'
+  import { store } from '../_store/store.js'
   import HiddenFromSSR from '../_components/HiddenFromSSR'
   import DynamicPageBanner from '../_components/DynamicPageBanner.html'