Update 123

xcatliu · Apr 14, 2017 · 1548ddf · 1548ddf
1 parent 82dd32f
commit 1548ddf
Show file tree

Hide file tree

Showing 16 changed files with 242 additions and 41 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "airbnb-base"
+}
diff --git a/_config.yml b/_config.yml
@@ -1,2 +1,20 @@
 src_dir: src
-public_dir: docs
+public_dir: docs
+
+title: xcatliu's personal front page
+
+bookmarks:
+  - name: Inbox
+    url: https://inbox.google.com
+    tags: email, hello world
+  - name: reddit
+    url: https://www.reddit.com/
+    tags: 你好
+  - name: Hacker News
+    url: https://news.ycombinator.com/
+  - name: Hacker News
+    url: https://news.ycombinator.com/
+  - name: Echo JS
+    url: http://www.echojs.com/
+  - name: Product Hunt
+    url: https://www.producthunt.com/
diff --git a/docs/css/mobi.css → docs/css/mobi.css/mobi.css b/docs/css/mobi.css → docs/css/mobi.css/mobi.css
diff --git a/docs/css/mobi.min.css → docs/css/mobi.css/mobi.min.css b/docs/css/mobi.min.css → docs/css/mobi.css/mobi.min.css
diff --git a/docs/css/mobi.min.css.map → docs/css/mobi.css/mobi.min.css.map b/docs/css/mobi.min.css.map → docs/css/mobi.css/mobi.min.css.map
diff --git a/docs/css/site.css b/docs/css/site.css
@@ -0,0 +1,7 @@
+.site-bookmark-ul {
+  padding-left: 0;
+}
+
+.site-bookmark-li {
+  list-style: none;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -1,22 +1,82 @@
 
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0,
-      maximum-scale=1.0, user-scalable=no"/>
-
-    <title>Personal Front Page</title>
-
-    <link rel="stylesheet" href="./css/mobi.min.css" />
-  </head>
-  <body>
-    <div class="flex-center">
-      <div class="container">
-        <h1 id="personal-front-page">Personal Front Page</h1>
+  <!doctype html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta http-equiv="x-ua-compatible" content="ie=edge">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0,
+        maximum-scale=1.0, user-scalable=no"/>
+
+      <title>xcatliu's personal front page</title>
 
+      <link rel="stylesheet" href="./css/mobi.css/mobi.min.css" />
+      <link rel="stylesheet" href="./css/site.css" />
+    </head>
+    <body>
+      <div class="flex-center">
+        <div class="container">
+
+    <style id="search-style"></style>
+    <form id="search-form" class="form">
+      <input id="search-input" type="search" placeholder="Type to search" />
+    </form>
+
+
+    <ul class="site-bookmark-ul flex-left flex-wrap units-gap">
+
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags="email, hello world"
+      data-name="inbox"
+    >
+      <a href="https://inbox.google.com">Inbox</a>
+    </li>
+
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags="你好 nihao"
+      data-name="reddit"
+    >
+      <a href="https://www.reddit.com/">reddit</a>
+    </li>
+
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags=""
+      data-name="hacker news"
+    >
+      <a href="https://news.ycombinator.com/">Hacker News</a>
+    </li>
+
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags=""
+      data-name="hacker news"
+    >
+      <a href="https://news.ycombinator.com/">Hacker News</a>
+    </li>
+
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags=""
+      data-name="echo js"
+    >
+      <a href="http://www.echojs.com/">Echo JS</a>
+    </li>
+
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags=""
+      data-name="product hunt"
+    >
+      <a href="https://www.producthunt.com/">Product Hunt</a>
+    </li>
+
+    </ul>
+
+        </div>
       </div>
-    </div>
-  </body>
-</html>
+
+      <script src="./js/search.js"></script>
+    </body>
+  </html>
diff --git a/docs/js/search.js b/docs/js/search.js
@@ -0,0 +1,26 @@
+/* eslint-env browser */
+/* eslint no-var:0, prefer-arrow-callback:0, func-names:0 */
+
+(function () {
+  var searchForm = document.getElementById('search-form');
+  var searchInput = document.getElementById('search-input');
+  var searchStyle = document.getElementById('search-style');
+
+  searchForm.addEventListener('submit', function (e) {
+    e.preventDefault();
+  });
+
+  searchInput.addEventListener('keyup', function () {
+    var query = searchInput.value.trim().toLowerCase();
+    searchStyle.innerHTML = `
+      [data-tags*="${query}"] {
+        background-color: #f2f2f2;
+        order: -1;
+      }
+      [data-name*="${query}"] {
+        background-color: #f2f2f2;
+        order: -2;
+      }
+    `;
+  });
+}());
diff --git a/package.json b/package.json
@@ -19,6 +19,12 @@
   },
   "homepage": "https://github.com/xcatliu/123#readme",
   "devDependencies": {
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb-base": "^11.1.3",
+    "eslint-plugin-import": "^2.2.0",
     "pagic": "^0.6.0"
+  },
+  "dependencies": {
+    "pinyin": "^2.8.3"
   }
 }
diff --git a/src/_layout.js b/src/_layout.js
@@ -1,22 +1,71 @@
-module.exports = ({ title, content, relativeToRoot }) => `
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0,
-      maximum-scale=1.0, user-scalable=no"/>
-    
-    <title>${title}</title>
-
-    <link rel="stylesheet" href="${relativeToRoot}/css/mobi.min.css" />
-  </head>
-  <body>
-    <div class="flex-center">
-      <div class="container">
-        ${content}
+/* eslint no-use-before-define:0, prefer-template:0 */
+
+const pinyin = require('pinyin');
+
+const CHINESE = /[\u4e00-\u9fa5]/;
+
+module.exports = ({ relativeToRoot, config }) => `
+  <!doctype html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta http-equiv="x-ua-compatible" content="ie=edge">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0,
+        maximum-scale=1.0, user-scalable=no"/>
+      
+      <title>${config.title}</title>
+
+      <link rel="stylesheet" href="${relativeToRoot}/css/mobi.css/mobi.min.css" />
+      <link rel="stylesheet" href="${relativeToRoot}/css/site.css" />
+    </head>
+    <body>
+      <div class="flex-center">
+        <div class="container">
+          ${renderSearch()}
+          ${renderBookmarks({ bookmarks: config.bookmarks })}
+        </div>
       </div>
-    </div>
-  </body>
-</html>
+
+      <script src="${relativeToRoot}/js/search.js"></script>
+    </body>
+  </html>
 `;
+
+function renderSearch() {
+  return `
+    <style id="search-style"></style>
+    <form id="search-form" class="form">
+      <input id="search-input" type="search" placeholder="Type to search" />
+    </form>
+  `;
+}
+
+function renderBookmarks({ bookmarks }) {
+  return `
+    <ul class="site-bookmark-ul flex-left flex-wrap units-gap">
+      ${bookmarks.map(renderBookmark).join('')}
+    </ul>
+  `;
+}
+
+function renderBookmark({ name, url, tags = '' }) {
+  return `
+    <li
+      class="site-bookmark-li unit-0"
+      data-tags="${addPinyin(tags).toLowerCase()}"
+      data-name="${addPinyin(name).toLowerCase()}"
+    >
+      <a href="${url}">${name}</a>
+    </li>
+  `;
+}
+
+function addPinyin(str) {
+  if (!CHINESE.test(str)) {
+    return str;
+  }
+
+  return str + ' ' + pinyin(str, {
+    style: pinyin.STYLE_NORMAL,   // 普通风格，即不带音标。
+  }).join('');
+}
diff --git a/src/css/mobi.css → src/css/mobi.css/mobi.css b/src/css/mobi.css → src/css/mobi.css/mobi.css
diff --git a/src/css/mobi.min.css → src/css/mobi.css/mobi.min.css b/src/css/mobi.min.css → src/css/mobi.css/mobi.min.css
diff --git a/src/css/mobi.min.css.map → src/css/mobi.css/mobi.min.css.map b/src/css/mobi.min.css.map → src/css/mobi.css/mobi.min.css.map
diff --git a/src/css/site.css b/src/css/site.css
@@ -0,0 +1,7 @@
+.site-bookmark-ul {
+  padding-left: 0;
+}
+
+.site-bookmark-li {
+  list-style: none;
+}
diff --git a/src/index.md b/src/index.md
@@ -1 +0,0 @@
-# Personal Front Page

diff --git a/src/js/search.js b/src/js/search.js
@@ -0,0 +1,26 @@
+/* eslint-env browser */
+/* eslint no-var:0, prefer-arrow-callback:0, func-names:0 */
+
+(function () {
+  var searchForm = document.getElementById('search-form');
+  var searchInput = document.getElementById('search-input');
+  var searchStyle = document.getElementById('search-style');
+
+  searchForm.addEventListener('submit', function (e) {
+    e.preventDefault();
+  });
+
+  searchInput.addEventListener('keyup', function () {
+    var query = searchInput.value.trim().toLowerCase();
+    searchStyle.innerHTML = `
+      [data-tags*="${query}"] {
+        background-color: #f2f2f2;
+        order: -1;
+      }
+      [data-name*="${query}"] {
+        background-color: #f2f2f2;
+        order: -2;
+      }
+    `;
+  });
+}());