From f4695414330e1add90ee06e7369c734d3b37f975 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 19 Oct 2015 17:11:03 +0800
Subject: [PATCH] Add link anchor to every title in markdown document

---
 site/static/style.css         | 16 ++++++++++++++++
 site/templates/component.html |  2 +-
 site/templates/page.html      |  2 +-
 site/theme.js                 |  7 +++++++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/site/static/style.css b/site/static/style.css
index 221713fc84..3e2ddf733e 100644
--- a/site/static/style.css
+++ b/site/static/style.css
@@ -610,6 +610,22 @@ footer ul li > a {
   margin: 0;
 }
 
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
 #api ~ ul > li > p > strong ~ code {
   background: #fff;
   color: #CC7300;
diff --git a/site/templates/component.html b/site/templates/component.html
index c9cd841018..e87b19210c 100644
--- a/site/templates/component.html
+++ b/site/templates/component.html
@@ -12,7 +12,7 @@
       </a>
       {%- endif %}
     </h1>
-    {{ post.html }}
+    {{ post.html|add_anchor }}
   </article>
   {%- if post.meta.template === 'component' %}
   {%- include "demos.html" %}
diff --git a/site/templates/page.html b/site/templates/page.html
index 5a11df32e2..68f52ec3b0 100644
--- a/site/templates/page.html
+++ b/site/templates/page.html
@@ -18,7 +18,7 @@
 <section class="main-container">
   <article class="markdown">
     <h1>{{ post.title }} {{ post.meta.chinese }}</h1>
-    {{ post.html }}
+    {{ post.html|add_anchor }}
   </article>
 </section>
 {% endblock %}
diff --git a/site/theme.js b/site/theme.js
index 1fa3c8f2e1..1067a74ceb 100644
--- a/site/theme.js
+++ b/site/theme.js
@@ -172,6 +172,13 @@ module.exports = function(nico) {
         result.push(p);
       });
       return result;
+    },
+    add_anchor: function(content) {
+      for (var i = 1; i <= 6; i++) {
+        var reg = new RegExp('(<h' + i + '\\sid="(.*?)">.*?)(<\/h' + i + '>)', 'g');
+        content = content.replace(reg, '$1<a href="#$2" class="anchor">#</a> $3');
+      }
+      return content;
     }
   };