sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-04-16 07:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

add copy link and edit on github buttons

Browse Source
This commit is contained in:
Pascal Fischer
2023-07-05 10:51:34 +02:00
parent 7815df63ff
commit 25e20ed56d
4 changed files with 71 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -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",

45
src/components/Layout.jsx
View File

@@ -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 && (
<>

5
src/pages/_app.jsx
View File

@@ -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 />
</>
)
}

16
src/styles/tailwind.css
View File

@@ -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;
@@ -49,4 +61,8 @@
width: 100%;
height: 100%;
border-radius: 4px;
}
.Toastify__close-button {
color: var(--toastify-text-color-light) !important;
}