fix header link (#4213)

chenxsan · web-flow · commit f913b23b22cd · 2020-11-29T09:50:14.000+08:00
* fix header link

* optimize link.svg
diff --git a/src/assets/link.svg b/src/assets/link.svg
@@ -0,0 +1 @@
+<svg height="1632" width="1632" xmlns="http://www.w3.org/2000/svg"><path d="M1440 1200c0-26.667-9.333-49.333-28-68l-208-208c-18.667-18.667-41.333-28-68-28-28 0-52 10.667-72 32 2 2 8.333 8.167 19 18.5s17.833 17.5 21.5 21.5 8.667 10.333 15 19 10.667 17.167 13 25.5 3.5 17.5 3.5 27.5c0 26.667-9.333 49.333-28 68s-41.333 28-68 28c-10 0-19.167-1.167-27.5-3.5s-16.833-6.667-25.5-13-15-11.333-19-15-11.167-10.833-21.5-21.5-16.5-17-18.5-19c-22 20.667-33 45-33 73 0 26.667 9.333 49.333 28 68l206 207c18 18 40.667 27 68 27 26.667 0 49.333-8.667 68-26l147-146c18.667-18.667 28-41 28-67zM737 495c0-26.667-9.333-49.333-28-68L503 220c-18.667-18.667-41.333-28-68-28-26 0-48.667 9-68 27L220 365c-18.667 18.667-28 41-28 67 0 26.667 9.333 49.333 28 68l208 208c18 18 40.667 27 68 27 28 0 52-10.333 72-31-2-2-8.333-8.167-19-18.5S531.167 668 527.5 664s-8.667-10.333-15-19-10.667-17.167-13-25.5S496 602 496 592c0-26.667 9.333-49.333 28-68s41.333-28 68-28c10 0 19.167 1.167 27.5 3.5s16.833 6.667 25.5 13 15 11.333 19 15 11.167 10.833 21.5 21.5 16.5 17 18.5 19c22-20.667 33-45 33-73zm895 705c0 80-28.333 147.667-85 203l-147 146c-55.333 55.333-123 83-203 83-80.667 0-148.667-28.333-204-85l-206-207c-55.333-55.333-83-123-83-203 0-82 29.333-151.667 88-209l-88-88c-57.333 58.667-126.667 88-208 88-80 0-148-28-204-84L84 636C28 580 0 512 0 432s28.333-147.667 85-203L232 83C287.333 27.667 355 0 435 0c80.667 0 148.667 28.333 204 85l206 207c55.333 55.333 83 123 83 203 0 82-29.333 151.667-88 209l88 88c57.333-58.667 126.667-88 208-88 80 0 148 28 204 84l208 208c56 56 84 124 84 204z" fill="#465e69"/></svg>
diff --git a/src/styles/icons/link.svg b/src/styles/icons/link.svg
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -20,6 +20,18 @@ body {
   color: getColor(elephant);
 }
 
+.header-link {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url('../assets/link.svg');
+  background-size: contain;
+}
+[aria-hidden='true']:hover .header-link {
+  visibility: visible;
+}
 a,
 button.as-link {
   color: $text-color-highlight;
diff --git a/webpack.common.js b/webpack.common.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
+const h = require('hastscript');
 const mdPlugins = [
   require('remark-gfm'),
   require('remark-slug'),
@@ -17,7 +18,12 @@ const mdPlugins = [
   [
     require('remark-autolink-headings'),
     {
-      behavior: 'append'
+      behavior: 'append',
+      content(node) {
+        return [
+          h('span.header-link')
+        ];
+      }
     }
   ],
   [

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`const path = require('path');`
`2`	`2`	`const MiniCssExtractPlugin = require('mini-css-extract-plugin');`
`3`	`3`	`const webpack = require('webpack');`
	`4`	`+const h = require('hastscript');`
`4`	`5`	`const mdPlugins = [`
`5`	`6`	`require('remark-gfm'),`
`6`	`7`	`require('remark-slug'),`
`@@ -17,7 +18,12 @@ const mdPlugins = [`
`17`	`18`	`[`
`18`	`19`	`require('remark-autolink-headings'),`
`19`	`20`	`{`
`20`		`- behavior: 'append'`
	`21`	`+ behavior: 'append',`
	`22`	`+ content(node) {`
	`23`	`+ return [`
	`24`	`+ h('span.header-link')`
	`25`	`+ ];`
	`26`	`+ }`
`21`	`27`	`}`
`22`	`28`	`],`
`23`	`29`	`[`