Add demo build step

OctoLinker · May 23, 2019 · 688849f · 688849f
1 parent a809389
commit 688849f
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 7 deletions.
diff --git a/packages/core/loader.js b/packages/core/loader.js
@@ -22,6 +22,10 @@ function removeDuplicates(payload) {
   );
 }
 
+function injectLiveDemoUrl(url) {
+  return url.replace('https://github.com', process.env.OCTOLINKER_LIVE_DEMO);
+}
+
 function groupMatchesByType(matches) {
   const flattenUrls = removeDuplicates(
     [].concat(
@@ -71,6 +75,9 @@ function insertLinks({
       if (item.type === 'internal-link') {
         if (githubTree.includes(item.path)) {
           link.href = item.url;
+          if (process.env.OCTOLINKER_LIVE_DEMO) {
+            link.href = injectLiveDemoUrl(link.href);
+          }
           break;
         }
       } else if (item.type === 'github-search') {
@@ -82,6 +89,9 @@ function insertLinks({
           link.href = `https://github.com/${user}/${repo}/blob/${branch}/${
             allMatches[0]
           }`;
+          if (process.env.OCTOLINKER_LIVE_DEMO) {
+            link.href = injectLiveDemoUrl(link.href);
+          }
           break;
         }
         // TODO implement https://www.npmjs.com/package/fast-levenshtein
@@ -94,6 +104,9 @@ function insertLinks({
 
         if (finalUrl && finalUrl.result) {
           link.href = finalUrl.result;
+          if (process.env.OCTOLINKER_LIVE_DEMO) {
+            link.href = injectLiveDemoUrl(link.href);
+          }
           break;
         }
       }
@@ -139,4 +152,22 @@ export default async function(matches) {
     repo,
     branch,
   });
+
+  if (process.env.OCTOLINKER_LIVE_DEMO) {
+    const el = document.querySelector('.octolinker-link[href]');
+    if (el) {
+      el.classList.add('octospotlight');
+
+      const container = document.createElement('div');
+      container.innerHTML = `<div class="octospotlight-inner">${
+        el.innerHTML
+      }</div>`;
+      el.innerHTML = container.innerHTML;
+
+      const spot = document.createElement('div');
+      spot.classList.add('octospotlight-dot');
+      // spot.style.left = `${el.getBoundingClientRect().width / 2}px`;
+      el.querySelector('.octospotlight-inner').appendChild(spot);
+    }
+  }
 }
diff --git a/packages/helper-insert-link/style.css b/packages/helper-insert-link/style.css
@@ -49,3 +49,45 @@ div.highlight {
 .highlight .octolinker-link:after {
   top: inherit;
 }
+
+/* Live demo https://octolinker-demo.now.sh */
+
+.octospotlight:after {
+  color: rgba(255, 0, 255, 0.8);
+}
+
+.octospotlight-inner:hover {
+  text-decoration: underline;
+}
+
+.octospotlight-inner {
+  display: inline-block;
+  position: relative;
+}
+
+.octospotlight-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -20px 0 0 -20px;
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+  z-index: 1000;
+  animation: octoSpotlightPulse 2s infinite;
+}
+
+@keyframes octoSpotlightPulse {
+  0%{
+      transform: scale(0.2);
+      background-color: rgba(255, 0, 255, 0.6);
+ }
+  70%{
+      transform: scale(2);
+      background-color: rgba(255, 0, 255, 0);
+ }
+  to{
+      transform: scale(0.2);
+      background-color: rgba(255, 0, 255, 0);
+ }
+}
diff --git a/packages/helper-settings/index.js b/packages/helper-settings/index.js
@@ -7,24 +7,40 @@ const defaults = {
   showUpdateNotification: true,
 };
 
-export const get = key => store[key];
+export const get = key => {
+  if (process.env.OCTOLINKER_LIVE_DEMO) {
+    return;
+  }
+
+  return store[key];
+};
 
 export const set = async (key, value) => {
+  if (process.env.OCTOLINKER_LIVE_DEMO) {
+    return;
+  }
+
   const data = {
     [key]: value,
   };
 
   return browser.storage.local.set(data);
 };
 
-export const save = async data => browser.storage.local.set(data);
+export const save = async data => {
+  if (process.env.OCTOLINKER_LIVE_DEMO) {
+    return;
+  }
+
+  return browser.storage.local.set(data);
+};
 
 export const load = async () => {
-  // Clear legacy storage strategy without migration
-  // Can be removed at the end of April 2019
-  await browser.storage.sync.clear();
+  let data = {};
 
-  const data = await browser.storage.local.get(null);
+  if (!process.env.OCTOLINKER_LIVE_DEMO) {
+    data = await browser.storage.local.get(null);
+  }
 
   Object.assign(store, defaults, data);
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin'); // eslint-disable-line
 
 module.exports = (env, argv) => ({
@@ -13,7 +14,10 @@ module.exports = (env, argv) => ({
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].js',
   },
-  plugins: [new CopyWebpackPlugin([{ from: 'assets' }])],
+  plugins: [
+    new CopyWebpackPlugin([{ from: 'assets' }]),
+    new webpack.EnvironmentPlugin(['OCTOLINKER_LIVE_DEMO']),
+  ],
   module: {
     rules: [
       {