diff --git a/src/assets/link.svg b/src/assets/link.svg new file mode 100644 index 000000000000..1c08e8a6fbc0 --- /dev/null +++ b/src/assets/link.svg @@ -0,0 +1 @@ + diff --git a/src/styles/icons/link.svg b/src/styles/icons/link.svg deleted file mode 100644 index 6999b4722de7..000000000000 --- a/src/styles/icons/link.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 21dd99cd4e20..d29f93744a64 100644 --- 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 index fdd32a41b78f..26fb92320fb7 100644 --- 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') + ]; + } } ], [