From 3a21240a02dbeefded11f0d31f4509be49af573c Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Fri, 7 Oct 2022 19:50:40 +0330
Subject: [PATCH] feat: add share button

---
 docusaurus.config.js                        |  2 +-
 package.json                                |  1 +
 src/theme/Navbar/Content/ShareButton.tsx    | 21 +++++++++++++++++++++
 src/theme/Navbar/Content/index.tsx          |  2 ++
 src/theme/Navbar/Content/styles.module.scss |  8 ++++++++
 static/icons/share.svg                      |  3 +++
 yarn.lock                                   | 12 ++++++++++++
 7 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/theme/Navbar/Content/ShareButton.tsx
 create mode 100644 static/icons/share.svg

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 55b2711..9eb1801 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -69,7 +69,7 @@ const config = {
             type: 'doc',
             docId: 'intro',
             position: 'left',
-            label: 'Tutorial',
+            label: 'Docs',
           },
           {
             type: 'localeDropdown',
diff --git a/package.json b/package.json
index b696e54..575fbbc 100644
--- a/package.json
+++ b/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"
diff --git a/src/theme/Navbar/Content/ShareButton.tsx b/src/theme/Navbar/Content/ShareButton.tsx
new file mode 100644
index 0000000..588a7ca
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
index 5a3d9b4..3706fce 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/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 && (
           <>
diff --git a/src/theme/Navbar/Content/styles.module.scss b/src/theme/Navbar/Content/styles.module.scss
index af32fdc..eb3ce77 100644
--- a/src/theme/Navbar/Content/styles.module.scss
+++ b/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);
diff --git a/static/icons/share.svg b/static/icons/share.svg
new file mode 100644
index 0000000..fe0cd06
--- /dev/null
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 228afe1..436e060 100644
--- a/yarn.lock
+++ b/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"