fix: gitalk cannot login; feat: manifest

docs/.vuepress/components/MySWUpdatePopup.vue

@@ -21,7 +21,7 @@ export default {
 @keyframes drop {
   0% {
     top: -20px;
-    oapcity: 0;
+    opacity: 0;
   }
 
   100% {
@@ -52,8 +52,6 @@ export default {
 
 .my-sw-update-popup button {
   background-color: #4db6ac;
-  -moz-border-radius: 28px;
-  -webkit-border-radius: 28px;
   border-radius: 28px;
   border: 1px solid #18ab29;
   display: inline-block;
@@ -62,7 +60,7 @@ export default {
   font-family: Arial;
   font-size: 16px;
   margin: 12px 50px;
-  padding:13px 30px;
+  padding: 13px 30px;
   text-decoration: none;
   text-shadow: 0px 1px 0px #2f6627;
 }

docs/.vuepress/enhanceApp.js

@@ -1,78 +1,24 @@
 /*
  * @Author: Rainy
  * @Date: 2019-12-01 14:25:59
- * @LastEditors: Rainy
- * @LastEditTime: 2019-12-05 20:38:59
+ * @LastEditors  : Rainy
+ * @LastEditTime : 2020-02-07 12:53:01
  */
 
-function tryRun (fn, times = 3) {
-  let execCount = 1;
-  fn(next);
-  function next(delay) {
-    if (execCount >= times) {
-      return;
-    }
-    setTimeout(() => {
-    execCount += 1
-    fn(next)
-    }, delay);
-  }
-}
-
-function integrateGitalk(router) {
-  const linkGitalk = document.createElement('link');
-  linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
-  linkGitalk.rel = 'stylesheet';
-  document.body.appendChild(linkGitalk);
-  const scriptGitalk = document.createElement('script');
-  scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
-  document.body.appendChild(scriptGitalk);
+// import copy from './utils/copy';
+import getGitalk from './utils/getGitalk';
 
-  router.afterEach((to, from) => {
-
-    if (scriptGitalk.onload) {
-      loadGitalk(to);
-    } else {
-      scriptGitalk.onload = () => {
-        loadGitalk(to);
-      };
+export default ({ Vue, options, router, siteData }) => {
+  setTimeout(() => {
+    try {
+      //对document的判断是防止编译的时候报错
+      document &&
+        (() => {
+          getGitalk({ router });
+          // copy();
+        })();
+    } catch (e) {
+      console.error(e.message);
     }
-  });
-
-  function loadGitalk(to) {
-    let commentsContainer = document.getElementById('gitalk-container');
-    if (!commentsContainer) {
-      commentsContainer = document.createElement('div');
-      commentsContainer.id = 'gitalk-container';
-      commentsContainer.classList.add('content');
-    }
-    const $page = document.querySelector('.page');
-    if ($page) {
-      $page.appendChild(commentsContainer);
-      if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
-        renderGitalk(to.fullPath);
-      }
-    }
-  }
-  function renderGitalk(fullPath) {
-    const gitalk = new Gitalk({
-      clientID: '58efa883d352424befd3',
-      clientSecret: 'faf0e2d7ff9355b3692d605d698f7abcbbd43388',
-      repo: 'https://github.com/Rain120/awesome-javascript-code-implementation',
-      owner: 'rain120',
-      admin: ['rain120'],
-      id: window.location.pathname || fullPath || 'comment',
-      distractionFreeMode: false,
-      language: 'zh-CN'
-    });
-    gitalk.render('gitalk-container');
-  }
-}
-
-export default ({ Vue, options, router }) => {
-  try {
-    document && integrateGitalk(router);
-  } catch (e) {
-    console.error(e.message);
-  }
+  }, 500);
 };

docs/.vuepress/public/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "非常棒的JavaScript源码实现",
+  "short_name": "JavaScript源码实现",
+  "theme_color": "#3EAF7C",
+  "background_color": "#3EAF7C",
+  "display": "standalone",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "images/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}

docs/.vuepress/utils/alias.js

@@ -2,12 +2,12 @@
  * @Author: Rainy
  * @Date: 2020-01-31 11:42:43
  * @LastEditors  : Rainy
- * @LastEditTime : 2020-02-04 17:36:21
+ * @LastEditTime : 2020-02-07 12:55:08
  */
 
 const alias = {
   'guide': '介绍',
-  'how-to-write-docs': '如何写文档?',
+  'how-to-write-docs': '如何写文档? ',
 
   // math
   'math': '数学',

docs/.vuepress/utils/copy.js

@@ -0,0 +1,23 @@
+/*
+ * @Author: Rainy
+ * @Date: 2020-02-07 11:10:37
+ * @LastEditors  : Rainy
+ * @LastEditTime : 2020-02-07 11:11:27
+ */
+
+export default () => {
+  function addCopy(e) {
+    let copyTxt = '';
+    e.preventDefault(); // 取消默认的复制事件
+    copyTxt = window.getSelection(0).toString();
+    copyTxt = `${copyTxt}\n作者：Rain120\n原文：${window.location.href}\n著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`;
+    const clipboardData = e.clipboardData || window.clipboardData;
+    clipboardData.setData('text', copyTxt);
+  }
+  document.addEventListener('cut', e => {
+    addCopy(e);
+  });
+  document.addEventListener('copy', e => {
+    addCopy(e);
+  });
+};

docs/.vuepress/utils/getGitalk.js

@@ -0,0 +1,115 @@
+/*
+ * @Author: Rainy
+ * @Date: 2020-02-07 11:06:08
+ * @LastEditors  : Rainy
+ * @LastEditTime : 2020-02-07 12:49:22
+ */
+
+// export default ({ pages }) => {
+//   const path = window.location.pathname || 'comment';
+//   // 获取当前页面信息
+//   const dist = pages.filter(item => {
+//     return item.path === path;
+//   })[0];
+
+//   //只有在isNoPage是false的时候才会显示评论
+//   if (!dist.frontmatter || !dist.frontmatter.isNoPage) {
+//     const page = document.querySelector('.page');
+
+//     const linkGitalk = document.createElement('link');
+//     linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
+//     linkGitalk.rel = 'stylesheet';
+//     document.body.appendChild(linkGitalk);
+
+//     const scriptGitalk = document.createElement('script');
+//     scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
+//     document.body.appendChild(scriptGitalk);
+
+//     scriptGitalk.onload = () => {
+//       let gitalk = document.createElement('div');
+//       gitalk.id = 'gitalk-container';
+//       page.appendChild(gitalk);
+//       var _gitalk = new Gitalk({
+//         clientID: '58efa883d352424befd3',
+//         clientSecret: 'faf0e2d7ff9355b3692d605d698f7abcbbd43388',
+//         repo: 'https://github.com/Rain120/awesome-javascript-code-implementation',
+//         owner: 'rain120',
+//         admin: ['rain120'],
+//         // id: window.location.pathname || fullPath || 'comment',
+//         distractionFreeMode: false,
+//         language: 'zh-CN',
+//         id: decodeURI(path) // 每个页面根据url生成对应的issue，保证页面之间的评论都是独立的
+//       });
+//       _gitalk.render('gitalk-container');
+//     };
+//   }
+// };
+
+
+function tryRun (fn, times = 3) {
+  let execCount = 1;
+  fn(next);
+  function next(delay) {
+    if (execCount >= times) {
+      return;
+    }
+    setTimeout(() => {
+    execCount += 1
+    fn(next)
+    }, delay);
+  }
+}
+
+export default ({ router }) => {
+  const linkGitalk = document.createElement('link');
+  linkGitalk.href = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css';
+  linkGitalk.rel = 'stylesheet';
+  document.body.appendChild(linkGitalk);
+
+  const scriptGitalk = document.createElement('script');
+  scriptGitalk.src = 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js';
+  document.body.appendChild(scriptGitalk);
+
+  router.afterEach((to, from) => {
+    if (scriptGitalk.onload) {
+      loadGitalk(to);
+    } else {
+      scriptGitalk.onload = () => {
+        loadGitalk(to);
+      };
+    }
+  });
+
+  function loadGitalk(to) {
+    let commentsContainer = document.getElementById('gitalk-container');
+    if (!commentsContainer) {
+      commentsContainer = document.createElement('div');
+      commentsContainer.id = 'gitalk-container';
+      commentsContainer.classList.add('content');
+    }
+    const $page = document.querySelector('.page');
+    if ($page) {
+      $page.appendChild(commentsContainer);
+      if (typeof Gitalk !== 'undefined' && Gitalk instanceof Function) {
+        renderGitalk(to.fullPath);
+      }
+    }
+  }
+
+  function renderGitalk(fullPath) {
+    const path = window.location.pathname || fullPath || 'comment';
+
+    const gitalk = new Gitalk({
+      clientID: '58efa883d352424befd3',
+      clientSecret: 'faf0e2d7ff9355b3692d605d698f7abcbbd43388',
+      repo: 'https://github.com/Rain120/awesome-javascript-code-implementation',
+      owner: 'rain120',
+      admin: ['rain120'],
+      distractionFreeMode: false,
+      language: 'zh-CN',
+      id: decodeURI(path), // 每个页面根据url生成对应的issue，保证页面之间的评论都是独立的
+    });
+    gitalk.render('gitalk-container');
+  }
+}
+

docs/README.md

@@ -1,7 +1,7 @@
 ---
 home: true
 activity: true
-heroImage: /img/fe.png
+heroImage: /images/fe.png
 actionText: 快速上手 👉
 actionLink: /zh/guide/