ipfs · jessicaschilling · Sep 10, 2020 · Sep 10, 2020 · Sep 11, 2020 · Sep 11, 2020
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width" />
+  <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlo89/56ZQ/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUjDu1lo89/6mhTP+zrVP/nplD/5+aRK8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNiIS6Wjz3/ubFY/761W/+vp1D/urRZ/8vDZf/GvmH/nplD/1BNIm8AAAAAAAAAAAAAAAAAAAAAAAAAAJaPPf+knEj/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf+tpk7/nplD/wAAAAAAAAAAAAAAAJaPPf+2rVX/vrVb/761W/++tVv/vrVb/6+nUP+6tFn/y8Nl/8vDZf/Lw2X/y8Nl/8G6Xv+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/761W/+vp1D/urRZ/8vDZf/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf++tVv/vrVb/761W/++tVv/vbRa/5aPPf+emUP/y8Nl/8vDZf/Lw2X/y8Nl/8vDZf+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/5qTQP+inkb/op5G/6KdRv/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/sqlS/56ZQ//LxWb/0Mlp/9DJaf/Kw2X/oJtE/7+3XP/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf+9tFr/mJE+/7GsUv/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+xrFL/nplD/8vDZf+emUP/AAAAAAAAAACWjz3/op5G/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+inkb/nplD/wAAAAAAAAAAAAAAAKKeRv+3slb/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+1sFX/op5G/wAAAAAAAAAAAAAAAAAAAAAAAAAAop5GUKKeRv/Nxmf/0cpq/9HKav/Rymr/0cpq/83GZ/+inkb/op5GSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G16KeRv/LxWb/y8Vm/6KeRv+inkaPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G/6KeRtcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/n8AAPgfAADwDwAAwAMAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAwAMAAPAPAAD4HwAA/n8AAA==" />
+  <link rel="stylesheet" href="/dist/bundles/uiCommons.css">
+  <link rel="stylesheet" href="/dist/bundles/offlinePage.css">
+</head>
+
+<body class="bg-white charcoal inter">
+  <div id="root"></div>
+  <script src="/dist/bundles/uiCommons.bundle.js"></script>
+  <script src="/dist/bundles/offlinePage.bundle.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,15 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+require('./offline.css')
+
+const browser = require('webextension-polyfill')
+const choo = require('choo')
+const createOfflinePageStore = require('./store')
+const createOfflinePage = require('./page')
+
+const app = choo()
+
+app.use(createOfflinePageStore(browser.i18n, browser.runtime))
+app.route('*', createOfflinePage(browser.i18n))
+app.mount('#root')
diff --git a/add-on/src/landing-pages/offline/offline.css b/add-on/src/landing-pages/offline/offline.css
@@ -0,0 +1,13 @@
+@import url('~tachyons/css/tachyons.css');
+@import url('~ipfs-css/ipfs.css');
+@import url('../../popup/heartbeat.css');
+
+/*
+  https://github.com/tachyons-css/tachyons-queries
+  Tachyons: $point == large
+*/
+@media (min-width: 64em) {
+}
+
+@media (max-height: 800px) {
+}
@@ -0,0 +1,53 @@
+'use strict'
+
+const html = require('choo/html')
+const logo = require('../../popup/logo')
+const { renderTranslatedLinks, renderTranslatedSpans } = require('../../utils/i18n')
+
+// Assets
+const libp2pLogo = '../../../images/libp2p.svg'
+const multiformatsLogo = '../../../images/multiformats.svg'
+const ipldLogo = '../../../images/ipld.svg'
+
+// Colors
+const colorIpfsLogo = '#57cbd0'
+const colorWhite = '#ffffff'
+const colorYellow = '#f39021'
+
+function createOfflinePage (i18n) {
+  return function offlinePage (state, emit) {
+    const { isIpfsOnline, peerCount } = state
+    const openWebUi = (page) => () => emit('openWebUi', page)
+
+    // Set translated title
+    document.title = i18n.getMessage('page_landingOffline_title')
+
+    return html`
+    <div class="mw5 mw8-ns ph5-ns center pv5">
+      <div class="fl w-30-ns w-100 tl mb4">
+        <svg class="mw5" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 305"><path d="M.298 221.25L128.035 295l127.738-73.75V73.75L128.035.006.298 73.756V221.25z" fill="#4A9EA1"/><path d="M114.85 17.77L22.236 71.24a22.115 22.115 0 010 4.95l92.619 53.471a22.128 22.128 0 0126.272 0l92.62-53.473a22.068 22.068 0 01-.001-4.948L141.132 17.77a22.126 22.126 0 01-26.273 0h-.009zm127.789 73.19l-92.718 54.068a22.125 22.125 0 01-13.136 22.753l.104 106.349a22.108 22.108 0 014.286 2.475l92.62-53.472a22.123 22.123 0 0113.136-22.753V93.437a22.127 22.127 0 01-4.287-2.474l-.005-.003zm-229.207.594a22.114 22.114 0 01-4.286 2.475v106.944a22.125 22.125 0 0113.136 22.752l92.614 53.472a22.163 22.163 0 014.287-2.474V167.78a22.126 22.126 0 01-13.137-22.754L13.432 91.552v.003z" fill="#63D3D7"/><path d="M128.036 295l127.738-73.75V73.75L128.036 147.5V295z" fill="#000" fill-opacity=".251"/><path d="M128.036 295V147.5L.299 73.75v147.5L128.036 295z" fill="#000" fill-opacity=".039"/><path d="M.298 73.75l127.737 73.75 127.738-73.75L128.035 0 .298 73.75z" fill="#000" fill-opacity=".13"/><path d="M293.955 275.348l.003.005a19.504 19.504 0 01-16.87 29.239H164.791a19.496 19.496 0 01-16.863-9.756 19.502 19.502 0 01-.007-19.483l56.137-97.28.003-.004a19.477 19.477 0 0116.878-9.751 19.478 19.478 0 0116.881 9.755l56.135 97.275z" fill="#fff"/><path d="M287.301 279.188l-56.137-97.279a11.803 11.803 0 00-20.45 0l-56.136 97.279a11.813 11.813 0 00.004 11.808 11.818 11.818 0 0010.221 5.914h112.273a11.82 11.82 0 0010.225-17.722zm-60.825-1.334h-11.073v-11.073h11.073v11.073zm0-20.733h-11.073V213.15h11.073v43.971z" fill="#EA5037"/></svg>
+      </div>
+      <div class="fl w-70-ns w-100 pl4-ns">
+        <h1 class="f2 montserrat fw6 mt0 tc tl-ns">Offline error</h1>
+        <h2 class="f3 fw6 mt0 mb2">IPFS Companion tried opening the following resource, but failed:</h2>
+        <h3 class="f4 fw4 mt0 monospace charcoal-muted" style="word-break:break-all;">window.location.hash123123123123123123123123123</h3>
+        <p class="f4 fw4">
+          Your custom local gateway might be offline. You can update your local gateway in the preferences, or try loading this resource from a public gateway instead.
+        </p>
+        <div class="tc tr-ns">
+          <button class="f5 pv3 ph4 mh2 mb3 b white br2 bn bg-charcoal-muted hover-bg-charcoal pointer">Update Preferences</button>
+          <button class="f5 pv3 ph4 mh2 mb3 b white br2 bn bg-teal-muted hover-bg-teal pointer">Try Public Gateway</button>
+        </div>
+        <p class="f4 fw4">
+          You tried to load a DNSLink-enabled site from a remote host that's currently unavailable. Try loading it from the original host instead.
+        </p>
+        <div class="tc tr-ns">
+          <button class="f5 pv3 ph4 mh2 mb3 b white br2 bn bg-teal-muted hover-bg-teal pointer">Use Original Host</button>
+        </div>
+      </div>
+    </div>
+    `
+  }
+}
+
+module.exports = createOfflinePage
diff --git a/add-on/src/landing-pages/offline/store.js b/add-on/src/landing-pages/offline/store.js
@@ -0,0 +1,40 @@
+'use strict'
+/* eslint-env browser, webextensions */
+const browser = require('webextension-polyfill')
+
+function createOfflinePageStore (i18n, runtime) {
+  return function offlinePageStore (state, emitter) {
+    state.isIpfsOnline = null
+    state.peerCount = null
+    state.webuiRootUrl = null
+    let port
+    emitter.on('DOMContentLoaded', async () => {
+      emitter.emit('render')
+      port = runtime.connect({ name: 'browser-action-port' })
+      port.onMessage.addListener(async (message) => {
+        if (message.statusUpdate) {
+          const webuiRootUrl = message.statusUpdate.webuiRootUrl
+          const peerCount = message.statusUpdate.peerCount
+          const isIpfsOnline = peerCount > -1
+          if (isIpfsOnline !== state.isIpfsOnline || peerCount !== state.peerCount || webuiRootUrl !== state.webuiRootUrl) {
+            state.webuiRootUrl = webuiRootUrl
+            state.isIpfsOnline = isIpfsOnline
+            state.peerCount = peerCount
+            emitter.emit('render')
+          }
+        }
+      })
+    })
+
+    emitter.on('openWebUi', async (page = '/') => {
+      const url = `${state.webuiRootUrl}#${page}`
+      try {
+        await browser.tabs.create({ url })
+      } catch (error) {
+        console.error(`Unable Open Web UI (${url})`, error)
+      }
+    })
+  }
+}
+
+module.exports = createOfflinePageStore
@@ -141,6 +141,7 @@ const uiConfig = merge(commonConfig, {
     browserAction: './add-on/src/popup/browser-action/index.js',
     pageAction: './add-on/src/popup/page-action/index.js',
     importPage: './add-on/src/popup/quick-import.js',
+    offlinePage: './add-on/src/landing-pages/offline/index.js',
     optionsPage: './add-on/src/options/options.js',
     proxyAclManagerPage: './add-on/src/pages/proxy-acl/index.js',
     proxyAclDialog: './add-on/src/pages/proxy-access-dialog/index.js',