ipfs · nunofmn · Dec 5, 2017 · Dec 10, 2017 · Dec 10, 2017 · Dec 22, 2017
diff --git a/add-on/icons/peerpad-logo.svg b/add-on/icons/peerpad-logo.svg
diff --git a/add-on/src/background/background.js b/add-on/src/background/background.js
@@ -3,6 +3,14 @@
 
 const createIpfsCompanion = require('../lib/ipfs-companion')
 
+browser.runtime.onInstalled.addListener((details) => {
+  if (details.reason === browser.runtime.OnInstalledReason.INSTALL) {
+    setTimeout(() => browser.tabs.create({
+      'url': browser.extension.getURL('dist/landing-pages/landing-page.html')
+    }), 1000)
+  }
+})
+
 // init add-on after all libs are loaded
 document.addEventListener('DOMContentLoaded', async () => {
   window.ipfsCompanion = await createIpfsCompanion()

diff --git a/add-on/src/landing-pages/landing-page.html b/add-on/src/landing-pages/landing-page.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>IPFS Companion - Welcome</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="../ipfs-companion-common.js"></script>
+  <script src="landing-pages.js"></script>
+</body>
+
+</html>
diff --git a/add-on/src/landing-pages/landing-pages.js b/add-on/src/landing-pages/landing-pages.js
@@ -0,0 +1,52 @@
+'use strict'
+/* eslint-env browser, webextensions */
+
+const browser = require('webextension-polyfill')
+const choo = require('choo')
+const html = require('choo/html')
+
+const welcomePage = require('./welcome-page')
+const missingIpfsPage = require('./missing-ipfs-page')
+
+require('./style.css')
+
+const app = choo()
+
+app.use(landingPageStore)
+
+app.route('*', checkIpfsStatusPage)
+app.route('/welcome', welcomePage)
+app.route('/missing-ipfs', missingIpfsPage)
+
+app.mount('#root')
+
+function landingPageStore (state, emitter) {
+  state.isIPFSOnline = null
+
+  let port
+
+  port = browser.runtime.connect({name: 'browser-action-port'})
+
+  port.onMessage.addListener(async (message) => {
+    if (message.statusUpdate) {
+      const isIPFSOnline = message.statusUpdate.peerCount > -1
+
+      if (isIPFSOnline !== state.isIPFSOnline) {
+        state.isIPFSOnline = isIPFSOnline
+        emitter.emit('pushState', chooseRouteByStatus(state.isIPFSOnline))
+      }
+    }
+  })
+
+  function chooseRouteByStatus (ipfsStatus) {
+    return ipfsStatus ? '/welcome' : '/missing-ipfs'
+  }
+}
+
+function checkIpfsStatusPage (state, emit) {
+  return html`
+  <div>
+    <h1>Checking IPFS API status...</h1>
+  </div>
+  `
+}
diff --git a/add-on/src/landing-pages/missing-ipfs-page.js b/add-on/src/landing-pages/missing-ipfs-page.js
@@ -0,0 +1,24 @@
+const html = require('choo/html')
+
+module.exports = function missingIpfsPage (state, emit) {
+  return html`
+  <div id="main" class="vh-100 w-100 flex justify-center pl5 pt5 pr5 avenir">
+    <div class="w-70 flex flex-column pt4 items-start white">
+      <div class="flex">
+        <img class="logo" src="../../icons/ipfs-logo-on.svg" alt="IPFS Logo">
+        <h2 class="f2 pl3 fw2 light-gray">Almost there! ${state.message}</h2>
+      </div>
+
+      <div class="pa4">
+        <p class="f2 fw5 lh-copy ma0 light-gray">
+          Thank you for installing IPFS Companion!
+        </p>
+        <p class="f3 fw2 lh-copy light-gray">
+          You still need to install the client application to connect to the IPFS network.
+        </p>
+        <a class="f3 link pl4 pt3 pr4 pb3 mb2 mt2 dib white shadow-2" id="btn-install" href="https://github.com/ipfs-shipyard/station">Install IPFS Station</a>
+      </div>
+    </div>
+  </div>
+  `
+}
diff --git a/add-on/src/landing-pages/style.css b/add-on/src/landing-pages/style.css
@@ -0,0 +1,37 @@
+@import url('node_modules/tachyons/css/tachyons.css');
+
+#header {
+  background: linear-gradient(to top, #041727 0%, #043b55 100%);
+}
+
+#main {
+  background: linear-gradient(to top, #041727 0%, #043b55 100%);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+.logo {
+  height: 80px;
+  width: 80px;
+}
+
+.dweb-links {
+  list-style-type: none;
+}
+
+.app-list {
+  list-style-type: none;
+}
+
+.app-item img {
+  height: 80px;
+}
+
+#btn-install {
+  background-color: #6ACAD1;
+}
+
+#btn-install:hover {
+  margin-top: -1px;
+}
+
diff --git a/add-on/src/landing-pages/welcome-page.js b/add-on/src/landing-pages/welcome-page.js
@@ -0,0 +1,60 @@
+const html = require('choo/html')
+
+module.exports = function welcomePage (state, emit) {
+  return html`
+  <div>
+    <div id="header" class="mw-100 flex justify-center items-center pl5 pt5 pr5 avenir">
+      <div class="w-70 flex flex-column items-start white">
+        <div class="flex">
+          <img class="logo" src="../../icons/ipfs-logo-on.svg" alt="IPFS Logo">
+          <h2 class="f2 pl3 fw2 light-gray">Welcome to the Distributed Web!</h2>
+        </div>
+
+        <div class="pa4">
+          <p class="f2 fw5 lh-copy ma0 light-gray">
+            Thank you for installing IPFS Companion!
+          </p>
+          <p class="f3 fw2 lh-copy light-gray">
+            You are now able to use distributed webs applications and websites built with IPFS.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div id="content" class="mw-100 flex justify-center items-center pl5 pt3 pr5 helvetica">
+      <div class="w-70 flex flex-column items-start pl4">
+        <div id="learn-section">
+          <h3 class="f3 fw6">Learn more</h3>
+          <p class="near-black">Learn why we need a distributed web to make the web faster, safer and more open.</p>
+          <ul class="dweb-links">
+            <li class="pa1">
+              <a class="dark-blue" href="https://www.youtube.com/watch?v=2RCwZDRwk48">The next Internet Revolution | Juan Benet | TEDxSanFrancisco</a>
+            </li>
+            <li class="pa1">
+              <a class="dark-blue" href="https://motherboard.vice.com/en_us/article/78xgaq/the-interplanetary-file-system-wants-to-create-a-permanent-web">The InterPlanetary File System Wants to Create a Permanent Web | Motherboard</a>
+            </li>
+          </ul>
+        </div>
+        <div id="app-section">
+          <h3 class="f3 fw6">Applications</h3>
+          <p class="near-black">Try some of the applications built with IPFS.</p>
+          <ul class="app-list w-60 flex flex-wrap">
+            <li class="app-item pa3">
+              <img src="../../icons/peerpad-logo.svg" alt="Peerpad Logo">
+            </li>
+            <li class="app-item pa3">
+              <img src="../../icons/peerpad-logo.svg" alt="Peerpad Logo">
+            </li>
+            <li class="app-item pa3">
+              <img src="../../icons/peerpad-logo.svg" alt="Peerpad Logo">
+            </li>
+            <li class="app-item pa3">
+              <img src="../../icons/peerpad-logo.svg" alt="Peerpad Logo">
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  `
+}
diff --git a/package.json b/package.json
@@ -18,11 +18,11 @@
     "build:copy": "run-s build:copy:*",
     "build:copy:src": "shx mkdir -p add-on/dist && shx cp -R add-on/src/* add-on/dist",
     "build:copy:wx-polyfill-lib": "shx cp node_modules/webextension-polyfill/dist/browser-polyfill.min.js add-on/dist/contentScripts/browser-polyfill.min.js",
-    "build:js": "browserify -p prundupify -t browserify-css -t [ browserify-package-json --global ] add-on/src/background/background.js add-on/src/options/options.js add-on/src/popup/browser-action/index.js add-on/src/popup/quick-upload.js -p [ factor-bundle -o add-on/dist/background/background.js -o add-on/dist/options/options.js -o add-on/dist/popup/browser-action/browser-action.js -o add-on/dist/popup/quick-upload.js ] -o add-on/dist/ipfs-companion-common.js",
+    "build:js": "browserify -p prundupify -t browserify-css -t [ browserify-package-json --global ] add-on/src/background/background.js add-on/src/options/options.js add-on/src/popup/browser-action/index.js add-on/src/popup/quick-upload.js add-on/src/landing-pages/landing-pages.js -p [ factor-bundle -o add-on/dist/background/background.js -o add-on/dist/options/options.js -o add-on/dist/popup/browser-action/browser-action.js -o add-on/dist/popup/quick-upload.js -o add-on/dist/landing-pages/landing-pages.js ] -o add-on/dist/ipfs-companion-common.js",
     "build:minimize-dist": "shx rm -rf add-on/dist/lib",
     "build:bundle-extension": "web-ext build -s add-on/ -i src/ -a build/",
     "watch": "run-p watch:*",
-    "watch:js": "watchify -p prundupify -t browserify-css -t [ browserify-package-json --global ] add-on/src/background/background.js add-on/src/options/options.js add-on/src/popup/browser-action/index.js add-on/src/popup/quick-upload.js -p [ factor-bundle -o add-on/dist/background/background.js -o add-on/dist/options/options.js -o add-on/dist/popup/browser-action/browser-action.js -o add-on/dist/popup/quick-upload.js ] -o add-on/dist/ipfs-companion-common.js -v",
+    "watch:js": "watchify -p prundupify -t browserify-css -t [ browserify-package-json --global ] add-on/src/background/background.js add-on/src/options/options.js add-on/src/popup/browser-action/index.js add-on/src/popup/quick-upload.js add-on/src/landing-pages/landing-pages.js -p [ factor-bundle -o add-on/dist/background/background.js -o add-on/dist/options/options.js -o add-on/dist/popup/browser-action/browser-action.js -o add-on/dist/popup/quick-upload.js -o add-on/dist/landing-pages/landing-pages.js ] -o add-on/dist/ipfs-companion-common.js -v",
     "test": "run-s test:*",
     "test:functional": "mocha test/functional/**/*.test.js",
     "lint": "run-s lint:*",