feat: add share button

docusaurus.config.js

@@ -69,7 +69,7 @@ const config = {
             type: 'doc',
             docId: 'intro',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Docs',
           },
           {
             type: 'localeDropdown',

package.json

@@ -22,6 +22,7 @@
     "@docusaurus/preset-classic": "2.1.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
+    "copy-to-clipboard": "^3.3.2",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

src/theme/Navbar/Content/ShareButton.tsx

@@ -0,0 +1,21 @@
+import { IconButton } from '@site/src/components/IconButton'
+import React from 'react'
+import Icon from '@site/static/icons/share.svg'
+import styles from './styles.module.scss'
+import copy2clipboard from 'copy-to-clipboard'
+
+export const ShareButton: React.FC<{}> = ({}) => {
+  return (
+    <IconButton
+      title="share this page"
+      aria-label="share this page"
+      onClick={() => {
+        if (typeof navigator?.share === 'function') navigator.share()
+        else copy2clipboard(window.location.href)
+      }}
+      className={styles.shareButton}
+    >
+      <Icon />
+    </IconButton>
+  )
+}

src/theme/Navbar/Content/index.tsx

@@ -13,6 +13,7 @@ import NavbarItem, { Props as NavbarItemConfig } from '@theme/NavbarItem'
 import SearchBar from '@theme/SearchBar'
 import clsx from 'clsx'
 import React from 'react'
+import { ShareButton } from './ShareButton'
 import styles from './styles.module.scss'
 
 function useNavbarItems() {
@@ -79,6 +80,7 @@ export default function NavbarContent(): JSX.Element {
       </div>
 
       <div className={clsx('col col--5', styles.headerRight)}>
+        <ShareButton />
         <NavbarColorModeToggle />
         {localeDropdown && (
           <>

src/theme/Navbar/Content/styles.module.scss

@@ -84,6 +84,14 @@
   background-color: #d9d9d9; // TODO: use infima variables
 }
 
+.shareButton {
+  svg,
+  svg * {
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+
 @include utils.responsive('lg', 'down') {
   .root {
     padding: 0 var(--ifm-spacing-horizontal);

static/icons/share.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 10.5C14.16 10.5 15.5 11.84 15.5 13.5C15.5 15.16 14.16 16.5 12.5 16.5C10.84 16.5 9.5 15.16 9.5 13.5C9.5 13.26 9.53 13.04 9.59 12.81L5.21 10.51C4.66 11.12 3.88 11.5 3 11.5C1.34 11.5 0 10.16 0 8.5C0 6.84 1.34 5.5 3 5.5C3.88 5.5 4.66 5.89 5.21 6.49L9.59 4.19C9.53 3.96 9.5 3.74 9.5 3.5C9.5 1.84 10.84 0.5 12.5 0.5C14.16 0.5 15.5 1.84 15.5 3.5C15.5 5.16 14.16 6.5 12.5 6.5C11.62 6.5 10.84 6.11 10.29 5.51L5.91 7.81C6.03112 8.26203 6.03112 8.73797 5.91 9.19L10.29 11.49C10.84 10.88 11.62 10.5 12.5 10.5Z" fill="black"/>
+</svg>

yarn.lock

@@ -3082,6 +3082,13 @@ copy-text-to-clipboard@^3.0.1:
   resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c"
   integrity sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q==
 
+copy-to-clipboard@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107"
+  integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"
@@ -7065,6 +7072,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"