Merge pull request #69 from netbirdio/feature/add_edit_and_copy_link_button

Add copy link and edit on github button

package.json

@@ -25,6 +25,10 @@
   "dependencies": {
     "@algolia/autocomplete-core": "^1.9.2",
     "@algolia/autocomplete-preset-algolia": "^1.9.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
@@ -46,6 +50,7 @@
     "postcss-focus-visible": "^8.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-toastify": "^9.1.3",
     "recma-nextjs-static-props": "^1.0.0",
     "rehype-mdx-title": "^2.0.0",
     "rehype-slug": "^5.1.0",

src/components/Layout.jsx

@@ -11,6 +11,10 @@ import {Header} from "@/components/Header";
 import {NavigationAPI} from "@/components/NavigationAPI";
 import {motion} from "framer-motion";
 import {Footer} from "@/components/Footer";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import { faPaperclip } from '@fortawesome/free-solid-svg-icons';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import {toast} from "react-toastify";
 
 const navigation = [
   {
@@ -131,6 +135,25 @@ export function Layout({ children, title, tableOfContents }) {
     section.links.find((link) => link.href === router.pathname)
   )
 
+  const buttonStyle = {
+    display: 'inline',
+    minWidth: '90px',
+    textAlign: 'left',
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  const iconStyle = {
+    fontSize: '18px',
+  };
+
+  const copyToClipboard = () => {
+    const currentURL = window.location.href;
+    navigator.clipboard.writeText(currentURL);
+    toast.info('Page URL copied to clipboard!', {
+      position: toast.POSITION.BOTTOM_RIGHT,
+    });
+  };
   let currentSection = useTableOfContents(tableOfContents)
 
   function isActive(section) {
@@ -168,6 +191,28 @@ export function Layout({ children, title, tableOfContents }) {
           <Footer />
         </div>
         {!router.route.startsWith("/ipa/resources") && <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6 pl-12">
+          <ol role="list" className="mt-4 space-y-3 text-sm mb-8">
+            <li key="copy-link">
+              <button
+                  style={buttonStyle}
+                  onClick={copyToClipboard}
+                  className="dark:hover:text-slate-300 dark:text-slate-400 text-slate-500 hover:text-slate-700 font-normal'"
+              >
+                <FontAwesomeIcon icon={faPaperclip} style={iconStyle} className="icon pr-1" />
+                <text>Copy link</text>
+              </button>
+            </li>
+            <li key="edit-on-github">
+              <Link
+                  href={"https://github.com/netbirdio/docs/tree/main/src/pages" + router.pathname + ".mdx"}
+                  className="dark:hover:text-slate-300 dark:text-slate-400 text-slate-500 hover:text-slate-700 font-normal'"
+                  style={{display: "flex", alignItems: 'center'}}
+              >
+                <FontAwesomeIcon icon={faGithub} style={iconStyle} className="icon pr-1" />
+                <text>Edit on Github</text>
+              </Link>
+            </li>
+          </ol>
           <nav aria-labelledby="on-this-page-title" className="w-80">
             {tableOfContents.length > 0 && (
               <>

src/pages/_app.jsx

@@ -9,6 +9,9 @@ import '@/styles/tailwind.css'
 import 'focus-visible'
 import {Layout} from "@/components/Layout";
 import {slugifyWithCounter} from "@sindresorhus/slugify";
+import {ToastContainer} from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
+import {dom} from "@fortawesome/fontawesome-svg-core";
 
 function onRouteChange() {
   useMobileNavigationStore.getState().close()
@@ -23,6 +26,7 @@ export default function App({ Component, pageProps }) {
   return (
     <>
       <Head>
+        <style>{dom.css()}</style>
         {router.route.startsWith('/ipa') ?
             <title>{`${pageProps.title} - NetBird API`}</title> : <title>{`${pageProps.title} - NetBird Docs`}</title>
         }
@@ -33,6 +37,7 @@ export default function App({ Component, pageProps }) {
               <Component {...pageProps} />
           </Layout>
       </MDXProvider>
+      <ToastContainer />
     </>
   )
 }

src/styles/tailwind.css

@@ -8,6 +8,12 @@
   --shiki-token-function: theme('colors.violet.600');
   --shiki-token-string-expression: theme('colors.orange.600');
   --shiki-token-punctuation: theme('colors.zinc.800');
+  --toastify-icon-color-info: theme('colors.orange.500') !important;
+  --toastify-color-info: theme('colors.orange.500') !important;
+  --toastify-color-dark: theme('colors.white') !important;
+  --toastify-text-color-dark: theme('colors.zinc.600') !important;
+  --toastify-color-light: theme('colors.white') !important;
+  --toastify-text-color-light: theme('colors.zinc.600') !important;
 }
 
 /* Dark mode styles */
@@ -21,6 +27,12 @@
   --shiki-token-function: theme('colors.violet.300');
   --shiki-token-string-expression: theme('colors.orange.300');
   --shiki-token-punctuation: theme('colors.zinc.200');
+  --toastify-icon-color-info: theme('colors.orange.500') !important;
+  --toastify-color-info: theme('colors.orange.500') !important;
+  --toastify-color-dark: theme('colors.zinc.800') !important;
+  --toastify-text-color-dark: theme('colors.zinc.300') !important;
+  --toastify-color-light: theme('colors.zinc.800') !important;
+  --toastify-text-color-light: theme('colors.zinc.300') !important;
 }
 
 @tailwind base;
@@ -50,3 +62,7 @@
   height: 100%;
   border-radius: 4px;
 }
+
+.Toastify__close-button {
+  color: var(--toastify-text-color-light) !important;
+}