Merge pull request #46 from samcyn/feat/site

chore(site): add copy to clip functionality
samcyn · Apr 19, 2024 · 3b19ff2 · 3b19ff2
2 parents f251c41 + e03d7bd
commit 3b19ff2
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 7 deletions.
diff --git a/packages/site/gatsby-config.ts b/packages/site/gatsby-config.ts
@@ -9,7 +9,7 @@ require('dotenv').config({
 const config: GatsbyConfig = {
   siteMetadata: {
     title: `site`,
-    siteUrl: `https://www.samsoniyanda.com`,
+    siteUrl: `https://gatsby-source-hubspot-node-plugin.netlify.app/`,
   },
   graphqlTypegen: true,
   plugins: [

diff --git a/packages/site/src/components/AppCard/AppCardWithContact.tsx b/packages/site/src/components/AppCard/AppCardWithContact.tsx
@@ -15,7 +15,7 @@ type Props = {
 const AppCardWithContact = ({ properties: { firstname, lastname, email, hs_object_id } }: Props) => {
   return (
     <AppCard className="bg-primary dark:bg-gray-80">
-      <Link to="/" className="block w-full no-underline">
+      <Link to="#" className="block w-full no-underline">
         <div className="relative overflow-hidden">
           <div className="relative p-4 md:p-6 z-1">
             <small className="text-white opacity-40">#{hs_object_id}</small>

diff --git a/packages/site/src/components/AppCard/AppCardWithPhoto.tsx b/packages/site/src/components/AppCard/AppCardWithPhoto.tsx
@@ -21,7 +21,7 @@ type Props = {
 
 const AppCardWithPhoto = ({ author_name, title, featured_image, blog_author }: Props) => (
   <AppCard className="bg-white dark:bg-gray-80 shadow-md hover:shadow-lg transition overflow-hidden rounded-lg group">
-    <Link to="/" className="block w-full no-underline">
+    <Link to="#" className="block w-full no-underline">
       <figure className="w-full h-[165px] overflow-hidden">
         <AppImage
           className="w-full h-full transition-transform group-hover:scale-105"

diff --git a/packages/site/src/components/AppShortCodes/index.tsx b/packages/site/src/components/AppShortCodes/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { Link } from 'gatsby';
 
 function splitLanguageAndTitle(children: React.ReactNode) {
@@ -146,7 +146,37 @@ const MyPre = ({
   children,
   ...rest
 }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>) => {
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const [isCopied, setIsCopied] = useState(false);
+  const preRef = useRef<HTMLPreElement | null>(null);
   const { language, title } = splitLanguageAndTitle(children);
+
+  useEffect(() => {
+    // prevent memory leakage
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = async () => {
+    const preElem = preRef.current;
+    if (window && preElem) {
+      const code = preElem.getElementsByTagName('code')[0];
+      try {
+        await navigator.clipboard.writeText(code.innerText);
+        setIsCopied(true);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+        setIsCopied(false);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    }
+  };
   return (
     <>
       {title && (
@@ -166,6 +196,7 @@ const MyPre = ({
           text-[13.5px] leading-5 rounded overflow-auto 
           break-normal ${className || ''}
         `}
+          ref={preRef}
         >
           <button
             name="copy code to clipboard"
@@ -175,8 +206,10 @@ const MyPre = ({
             text-xs leading-3 transition-colors 
             absolute top-1 right-1 rounded
             hover:bg-primary hover:text-white"
+            disabled={isCopied}
+            onClick={handleCopy}
           >
-            Copy
+            {isCopied ? 'Copied' : 'Copy'}
             <span aria-roledescription="status" className="sr-only">
               copy code to clipboard
             </span>

diff --git a/packages/site/src/docs/development.mdx b/packages/site/src/docs/development.mdx
@@ -293,7 +293,7 @@ See the available commands:
 gatsby --help
 ```
 
-![Check Gatsby commands in terminal](../images/docs/config.png)
+![Check Gatsby commands in terminal](../images/config.png)
 
 <Announcement>
 

diff --git a/packages/site/src/images/docs/config.png → packages/site/src/images/config.png b/packages/site/src/images/docs/config.png → packages/site/src/images/config.png
diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx
@@ -35,7 +35,9 @@ export const query = graphql`
 
 export const Head: HeadFC<Queries.IndexPageQuery> = ({ data }) => (
   <>
-    <title>{data.mdx.frontmatter.title}</title>
+    <title>
+      {data.mdx.frontmatter.title} {data.mdx.frontmatter.tail}
+    </title>
     <meta name="author" content="Samson Iyanda"></meta>
     <meta name="description" content="site for gatsby source hubspot plugin documentation"></meta>
     <meta name="keywords" content="gatsby, gatsby plugin, reactjs, hubspot"></meta>