Merge branch 'main' into dev

Author: estruyf

components/Docs/CodeHighlighting.tsx

@@ -77,7 +77,7 @@ const CodePanel = ({ annotation, children, ...props }: React.PropsWithChildren<I
 export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> = ({ className, children, ...props }: React.PropsWithChildren<ICodeHighlightingProps>) => {
   const [code, setCode] = React.useState('');
 
-  const fetchHighlighter = async (className: string, children: React.ReactNode) => {
+  const fetchHighlighter = React.useCallback(async (className: string, children: React.ReactNode) => {
     const language = className.split('-')[1];
     const highlighter = await ShikiService.getHighlighter();
 
@@ -99,13 +99,13 @@ export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> =
 
       return;
     }
-  };
+  }, []);
 
   React.useEffect(() => {
     if (className && children) {
       fetchHighlighter(className, children);
     }
-  }, [className, children]);
+  }, [className, children, fetchHighlighter]);
 
   const getLanguage = (className: string) => {
     const language = className.split('-')[1];

components/Docs/NavGroup.tsx

@@ -50,7 +50,7 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
         ))}
       </ul>
     );
-  }, [item, items, router.asPath]);
+  }, [item, items]);
 
   return (
     <Section

components/Docs/PageInfo.tsx

@@ -46,15 +46,15 @@ export const PageInfo: React.FunctionComponent<IPageInfoProps> = ({ page, items
             {(prevPage && prevPage.slug && prevPage.title) && (
               <a href={`/docs/${(prevPage as PageFrontMatter).slug}`}
                 title={prevPage.title}
-                className={`border border-vulcan-100 hover:border-teal-900 rounded-sm w-1/2 p-4 items-start flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
+                className={`border border-vulcan-100 hover:border-teal-900 rounded w-1/2 p-4 items-start flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
                 <span className="text-base text-whisper-500">Previous</span>
                 <span>&larr; {(prevPage as PageFrontMatter).title}</span>
               </a>
             )}
             {(nextPage && nextPage.slug && nextPage.title) && (
               <a href={`/docs/${(nextPage as PageFrontMatter).slug}`}
                 title={nextPage.title}
-                className={`border border-vulcan-100 hover:border-teal-900 rounded-sm w-1/2 p-4 items-end ml-auto flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
+                className={`border border-vulcan-100 hover:border-teal-900 rounded w-1/2 p-4 items-end ml-auto flex flex-col gap-2 text-teal-500 hover:text-teal-900`}>
                 <span className="text-base text-whisper-500">Next</span>
                 <span>{(nextPage as PageFrontMatter).title} &rarr;</span>
               </a>

components/GitHub/Stargazers.tsx

@@ -5,11 +5,11 @@ import { Extension } from '../../constants/extension';
 import { StarService } from '../../services/StarService';
 import { GitHub } from '../Images/GitHub';
 
-export interface IStargazersProps {}
+export interface IStargazersProps { }
 
 export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: React.PropsWithChildren<IStargazersProps>) => {
-  const [ stars, setStars ] = useState<number | null>(null);
-  const [ calling, setCalling ] = useState<boolean>(false);
+  const [stars, setStars] = useState<number | null>(null);
+  const [calling, setCalling] = useState<boolean>(false);
 
   useEffect(() => {
     const getStars = async () => {
@@ -23,10 +23,10 @@ export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: Rea
   }, [calling]);
 
   return (
-    <div className={`stargazers group flex items-center`} style={{height:"36px"}}>
-      <Link 
+    <div className={`stargazers group flex items-center`} style={{ height: "36px" }}>
+      <Link
         href={Extension.githubLink}
-        className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`} 
+        className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700 rounded`}
         title={`Give the project a star on GitHub`}>
         <GitHub className={`h-4 w-4 mr-1`} />
         <span>Star</span>
@@ -41,7 +41,7 @@ export const Stargazers: React.FunctionComponent<IStargazersProps> = (props: Rea
 
             <Link
               href={Extension.stars}
-              className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700`}
+              className={`h-full flex items-center bg-whisper-500 text-vulcan-500 p-2 text-xs font-bold group-hover:bg-whisper-700 rounded`}
               title={`Give the project a star on GitHub`}>
               {stars}
             </Link>

components/Page/CTA.tsx

@@ -4,7 +4,7 @@ import { Extension } from '../../constants/extension';
 import { isProduction } from '../../helpers/isProduction';
 import { FrontMatterLines } from './FrontMatterLines';
 
-export interface ICTAProps {}
+export interface ICTAProps { }
 
 export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithChildren<ICTAProps>) => {
   const { t: strings } = useTranslation();
@@ -33,10 +33,10 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
 
           <div className="mt-10 max-w-sm mx-auto sm:max-w-none">
             <div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
-              <a href={`/docs/getting-started`} title={`Read our documentation`}  className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
+              <a href={`/docs/getting-started`} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
                 {strings(`cta_button_primary`) as string}
               </a>
-              <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
+              <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
                 {isProduction() ? strings(`cta_button_secondary`) as string : strings(`cta_button_beta_secondary`) as string}
               </a>
             </div>
@@ -47,8 +47,8 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
       <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
         <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
           <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
-            <img 
-              className={`w-full lg:h-full lg:w-auto lg:max-w-none`} 
+            <img
+              className={`w-full lg:h-full lg:w-auto lg:max-w-none`}
               // src={`https://res.cloudinary.com/estruyf/image/upload/w_1256/v1631871148/frontmatter/preview-3.2.0.png`}
               // src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649328023/frontmatter/7.1.0/panel-preview-light.png"}
               src={"https://res.cloudinary.com/estruyf/image/upload/w_1256/v1649335002/frontmatter/7.1.0/fm-doc-screenshot.png"}

components/Page/Features.tsx

@@ -44,7 +44,7 @@ export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.P
           <div className="mt-4">
             <Link
               href={Extension.featureLink}
-              className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
+              className={`inline-block px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
               target={`_blank`}
               rel={`noopener noreferrer`}>
               {strings(`features_cta_button`) as string}

components/Page/GetStarted.tsx

@@ -15,10 +15,10 @@ export const GetStarted: React.FunctionComponent<IGetStartedProps> = (props: Rea
           <span className="block">Ready to get started?</span>
         </h2>
         <div className="mt-6 lg:mt-auto space-y-4 sm:space-y-0 sm:flex sm:space-x-5">
-          <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
+          <a href={isProduction() ? Extension.installLink : Extension.installBetaLink} title={`Read our documentation`} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8">
             {strings(`cta_button_bottom_primary`) as string}
           </a>
-          <a href={`/docs/getting-started`} className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
+          <a href={`/docs/getting-started`} className="flex items-center justify-center px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-vulcan-500 bg-whisper-500 hover:bg-opacity-70 sm:px-8">
             {strings(`cta_button_bottom_secondary`) as string}
           </a>
         </div>

components/Page/Hero.tsx

@@ -36,7 +36,7 @@ export const Hero: React.FunctionComponent<IHeroProps> = ({ view, title, descrip
                 <Link
                   href={link}
                   title={linkText}
-                  className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
+                  className={`inline-block px-4 py-3 border border-transparent text-base font-medium rounded shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
                   {linkText}
                 </Link>
               )

components/Pricing/Pricing.tsx

@@ -21,7 +21,7 @@ export const Pricing: React.FunctionComponent<IPricingProps> = (props: React.Pro
 
           <navigation.sponsor.icon
             title={strings(`pricing_cta_title`)}
-            btnClassName={`group mt-4 inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-vulcan-500 sm:px-8`}
+            btnClassName={`group mt-4 inline-block px-4 py-3 border border-transparent rounded text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-vulcan-500 sm:px-8`}
             className="inline-block h-6 w-6"
             aria-hidden="true" />
         </div>

components/modal/Modal.tsx

@@ -37,7 +37,7 @@ export const Modal: React.FunctionComponent<React.PropsWithChildren<IModalProps>
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom bg-vulcan-200 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
+            <div className="inline-block align-bottom bg-vulcan-200 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6 rounded">
               {children}
             </div>
           </Transition.Child>