docs: Preserve updated query param content and add config option links (#4307)

topecongiro · web-flow · commit 37ec56d89f34 · 2020-07-03T15:53:49.000+09:00
diff --git a/docs/index.html b/docs/index.html
@@ -41,6 +41,15 @@
         .searchCondition > div {
           margin-right: 30px;
         }
+        .header-link {
+          position: relative;
+        }
+        .header-link:hover::before {
+          position: absolute;
+          left: -2em;
+          padding-right: 0.5em;
+          content: '\2002\00a7\2002';
+        }
       </style>
     </head>
     <body>
@@ -137,12 +146,27 @@
                       }, []);
                   ast.links = {};
 
+                  queryParams.set('version', this.version);
+                  queryParams.set('search', this.searchCondition);
+                  const curUrl = window.location.pathname +
+                    '?' + queryParams.toString() + window.location.hash;
+                  history.pushState(null, '', curUrl);
+
+                  const renderer = new marked.Renderer();
+                  renderer.heading = function(text, level) {
+                    const id = htmlToId(text);
+                    return `<h${level}>
+                              <a href="#${id}" name="${id}" class="header-link">${text}</a>
+                            </h${level}>`;
+                  };
+
                   return marked.parser(ast, {
                     highlight(code, lang) {
                       return hljs.highlight(lang ? lang : 'rust', code).value;
                     },
                     headerIds: true,
-                    headerPrefix: ''
+                    headerPrefix: '',
+                    renderer,
                   });
                 }
               },
@@ -156,13 +180,10 @@
               },
               mounted() {
                 if (UrlHash === '') return;
-                const interval = setInterval(() => {
-                  const target = document.querySelector(`#${UrlHash}`);
-                  if (target != null) {
-                    target.scrollIntoView(true);
-                    clearInterval(interval);
-                  }
-                }, 100);
+                const target = document.querySelector(`#${UrlHash}`);
+                if (target != null) {
+                  target.scrollIntoView(true);
+                }
               }
             });
             const extractDepthOnes = (ast) => {
@@ -228,6 +249,11 @@
                 configurationDescriptions
               };
             }
+            function htmlToId(text) {
+              const tmpl = document.createElement('template');
+              tmpl.innerHTML = text.trim();
+              return encodeURIComponent(CSS.escape(tmpl.content.textContent));
+            }
         </script>
     </body>
 </html>
