perf: using srcset for images and update social meta

consolelabs · Dec 28, 2023 · d9c8e7c · d9c8e7c
1 parent dc4a67a
commit d9c8e7c
Show file tree

Hide file tree

Showing 18 changed files with 83 additions and 42 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -6,7 +6,12 @@ import { useFetchNPMData } from '@/hooks/useFetchNPMData'
 import { Logo } from '@/components/Logo'
 
 const desktopNavItems = [
-  <a key="components-button" href={COMPONENTS_LINK}>
+  <a
+    key="components-button"
+    href={COMPONENTS_LINK}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
     <Button variant="link" className="!text-white !font-medium !pl-0 !pr-1">
       Components
     </Button>
@@ -24,15 +29,26 @@ const desktopNavItems = [
   <div key="divider">
     <div className="w-[1px] h-6 bg-neutral-800" />
   </div>,
-  <a key="get-started-button" href={DOCS_LINK}>
+  <a
+    key="get-started-button"
+    href={DOCS_LINK}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
     <Button variant="solid" className="!font-medium">
       Get Started
     </Button>
   </a>,
 ]
 
 const mobileNavItems = [
-  <a key="components-button" href={COMPONENTS_LINK} className="block">
+  <a
+    key="components-button"
+    href={COMPONENTS_LINK}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="block"
+  >
     <Button variant="link" color="neutral" className="!font-medium !pl-0 !pr-1">
       Components
     </Button>
@@ -48,7 +64,13 @@ const mobileNavItems = [
       GitHub
     </Button>
   </a>,
-  <a key="get-started-button" href={DOCS_LINK} className="w-full inline-block">
+  <a
+    key="get-started-button"
+    href={DOCS_LINK}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="w-full inline-block"
+  >
     <Button variant="solid" className="!font-medium w-full">
       Get Started
     </Button>

diff --git a/components/Hero/Hero.tsx b/components/Hero/Hero.tsx
@@ -28,9 +28,7 @@ export const Hero = ({
     >
       <div
         style={{
-          backgroundImage:
-            heroImgUrl ??
-            'image-set(url("/img/hero-banner.png") 2x, url("/img/hero-banner.webp") 1x)',
+          backgroundImage: heroImgUrl ?? 'url("/img/hero-banner.webp")',
         }}
         className="h-full w-full bg-cover bg-center absolute top-0 -right-24"
       />

diff --git a/components/ImageWithFallback/ImageWithFallback.tsx b/components/ImageWithFallback/ImageWithFallback.tsx
@@ -12,10 +12,15 @@ export const ImageWithFallback = (props: ImageWithFallbackProps) => {
   const { src, fallbackImgUrl, alt, ...rest } = props
 
   return (
-    <picture>
-      <source media="(max-width: 767px)" srcSet={fallbackImgUrl} />
-      <source media="(min-width: 768px)" srcSet={src} />
-      <img src={fallbackImgUrl} alt={alt} {...rest} />
-    </picture>
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        srcSet={`${fallbackImgUrl} 767px, ${src} 768px"`}
+        sizes="(max-width: 767px) 767px, 768px"
+        src={src}
+        alt={alt}
+        {...rest}
+      />
+    </>
   )
 }
diff --git a/components/pages/home/DesignGuideView/DesignGuide.tsx b/components/pages/home/DesignGuideView/DesignGuide.tsx
@@ -37,6 +37,8 @@ export const DesignGuide = ({ className }: { className?: string }) => {
             className="w-full sm:w-1/2"
             mediaClassName="bg-[#EFE7FE]"
             href={DOCS_LINK}
+            target="_blank"
+            rel="noopener noreferrer"
           />
 
           <DesignGuideCardItem
@@ -63,7 +65,7 @@ export const DesignGuide = ({ className }: { className?: string }) => {
             mediaClassName="bg-blue-200"
             href={MOCHI_DISCORD_LINK}
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
           />
         </div>
       </div>

diff --git a/components/pages/home/EasyCustomizationView/CodeSnippet.tsx b/components/pages/home/EasyCustomizationView/CodeSnippet.tsx
@@ -93,7 +93,7 @@ export const CodeSnippet = () => {
   }, [])
 
   return (
-    <div className="w-full h-[500px] lg:h-auto lg:w-[calc(100%-32px-496px)]">
+    <div className="w-full lg:flex-1 h-[500px] lg:h-auto lg:w-[calc(100%-32px-496px)]">
       <div className="relative flex h-full flex-col rounded-2xl bg-neutral-800 py-6 md:py-8">
         <div className="absolute h-4 w-full left-0 top-14 md:top-16 bg-gradient-to-t from-transparent to-neutral-800" />
 

diff --git a/components/pages/home/EasyCustomizationView/EasyCustomization.tsx b/components/pages/home/EasyCustomizationView/EasyCustomization.tsx
@@ -13,7 +13,7 @@ export const EasyCustomization = ({ className }: { className?: string }) => {
         >
           Customization seamlessly
         </Typography>
-        <div className="flex h-max lg:h-[444px] flex-col lg:flex-row gap-4 lg:gap-8">
+        <div className="flex justify-between h-max lg:h-[444px] flex-col lg:flex-row gap-4 lg:gap-8">
           <CustomCardDemo />
           <CodeSnippet />
         </div>

diff --git a/components/pages/home/RichComponentsView/Card.tsx b/components/pages/home/RichComponentsView/Card.tsx
@@ -45,12 +45,11 @@ export const CardShowcase = () => {
         <div
           className="bg-cover h-[75px] relative"
           style={{
-            backgroundImage:
-              'image-set(url("/img/profile-background.png") 2x, url("/img/profile-background.webp") 1x)',
+            backgroundImage: 'url("/img/profile-background.webp")',
           }}
         >
           <div className="absolute -bottom-[44px] left-2">
-            <Avatar src="/img/user-avatar.png" size="xl" />
+            <Avatar src="/img/user-avatar.webp" size="xl" />
           </div>
         </div>
 

diff --git a/components/pages/home/RichComponentsView/Dropdown.tsx b/components/pages/home/RichComponentsView/Dropdown.tsx
@@ -39,7 +39,7 @@ export const DropdownShowcase = () => {
       <div className="w-[240px] h-max max-w-full flex justify-end">
         <DropdownMenuTrigger asChild>
           <ProfileBadge
-            avatar="/img/user-avatar.png"
+            avatar="/img/user-avatar.webp"
             name="Kathryn Murphy"
             platform=""
             className="h-max"

diff --git a/components/pages/home/RoadmapView/Roadmap.tsx b/components/pages/home/RoadmapView/Roadmap.tsx
@@ -11,8 +11,7 @@ export const Roadmap = ({ className }: { className?: string }) => {
         className,
       )}
       style={{
-        backgroundImage:
-          'image-set(url("/img/gradient.png") 2x, url("/img/gradient.webp") 1x)',
+        backgroundImage: 'url("/img/gradient.webp")',
       }}
     >
       <div className="section-container pl-4 xl:pl-0">

diff --git a/hooks/useFetchNPMData.ts b/hooks/useFetchNPMData.ts
@@ -5,16 +5,8 @@ import { NPMDataResponse } from '@/types/npm'
 export const SWR_KEY_FETCH_NPM_DATA = 'SWR_KEY_FETCH_NPM_DATA'
 
 export const useFetchNPMData = (packageName: string = '@mochi-ui/core') => {
-  const { data, ...rest } = useSWR<NPMDataResponse>(
-    [SWR_KEY_FETCH_NPM_DATA],
-    async () => {
-      const res = await fetch(NPM_DATA_ENDPOINT(packageName))
-      return res.json()
-    },
-  )
-
-  return {
-    data: data,
-    ...rest,
-  }
+  return useSWR<NPMDataResponse>([SWR_KEY_FETCH_NPM_DATA], async () => {
+    const res = await fetch(NPM_DATA_ENDPOINT(packageName))
+    return res.json()
+  })
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -7,6 +7,7 @@ export default function Document() {
         <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="theme-color" content="#E88B88" />
+        <meta name="title" content="Mochi UI Kit" />
         <meta
           name="description"
           content="Stunning and accessible React UI library for web3 application!"
@@ -16,21 +17,26 @@ export default function Document() {
           content="accessible, beautiful, ui, ui library, mochiui, radix ui"
         />
 
-        <meta name="twitter:title" content="Mochi UI Kit" />
+        {/* Social network */}
+        <meta property="twitter:title" content="Mochi UI Kit" />
         <meta
-          name="twitter:description"
+          property="twitter:description"
           content="Stunning and accessible React UI library for web3 application!"
         />
-        <meta name="twitter:card" content="summary" />
-        <meta name="twitter:image:src" content="/img/thumbnail.png" />
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content="https://mochiui.com" />
+        <meta property="twitter:image" content="/img/thumbnail.png" />
 
+        {/* OG */}
         <meta property="og:title" content="Mochi UI Kit" />
-        <meta property="og:site_name" content="Mochi UI Kit" />
-        <meta property="og:image" content="/img/thumbnail.png" />
         <meta
           property="og:description"
           content="Stunning and accessible React UI library for web3 application!"
         />
+        <meta property="og:site_name" content="Mochi UI Kit" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://mochiui.com" />
+        <meta property="og:image" content="/img/thumbnail.png" />
 
         <link href="/img/logo.png" rel="icon" type="image/x-icon" />
       </Head>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -71,12 +71,22 @@ export default function Home() {
             title="Mochi UI Kit"
             description="Help designers and developers create eye-catching and adaptable products using different Web3 frameworks effortlessly."
             actions={[
-              <a key="get-started-action" href={DOCS_LINK}>
+              <a
+                key="get-started-action"
+                href={DOCS_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Button>
                   Get Started <ArrowRightLine className="h-3.5 w-3.5" />
                 </Button>
               </a>,
-              <a key="preview-action" href={COMPONENTS_LINK}>
+              <a
+                key="preview-action"
+                href={COMPONENTS_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <Button color="white">Preview Online</Button>
               </a>,
             ]}
@@ -146,6 +156,8 @@ export default function Home() {
                 key="get-started-action"
                 href={DOCS_LINK}
                 className="inline-block"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 <Button>
                   Get Started <ArrowRightLine />
@@ -155,6 +167,8 @@ export default function Home() {
                 key="preview-action"
                 href={COMPONENTS_LINK}
                 className="inline-block"
+                target="_blank"
+                rel="noopener noreferrer"
               >
                 <Button color="white">Preview Online</Button>
               </a>,
@@ -173,12 +187,14 @@ export default function Home() {
                 {
                   href: COMPONENTS_LINK,
                   text: 'Components',
+                  newTab: true,
                 },
                 {
                   href: MOCHI_GITHUB_LINK,
                   text: 'GitHub',
+                  newTab: true,
                 },
-                { href: MOCHI_DISCORD_LINK, text: 'Community' },
+                { href: MOCHI_DISCORD_LINK, text: 'Community', newTab: true },
               ],
             },
             {
@@ -187,10 +203,12 @@ export default function Home() {
                 {
                   href: MOCHI_GITHUB_BUG_REPORT_LINK,
                   text: 'Bug Report',
+                  newTab: true,
                 },
                 {
                   href: MOCHI_GITHUB_ISSUES_LINK,
                   text: 'Issues',
+                  newTab: true,
                 },
               ],
             },

diff --git a/public/img/gradient.png b/public/img/gradient.png
diff --git a/public/img/gradient.webp b/public/img/gradient.webp
diff --git a/public/img/hero-banner.png b/public/img/hero-banner.png
diff --git a/public/img/hero-banner.webp b/public/img/hero-banner.webp
diff --git a/public/img/profile-background.png b/public/img/profile-background.png
diff --git a/public/img/user-avatar.png b/public/img/user-avatar.png