Merge pull request #65 from AElfProject/feature/image

Feature/image
AElfProject · Jul 25, 2024 · e6b30fa · e6b30fa
2 parents 19b0156 + 4ce1576
commit e6b30fa
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 29 deletions.
diff --git a/.env.example b/.env.example
@@ -3,4 +3,5 @@ APP_SECRET=
 SPACE_ID=
 COOKIE_PASSWORD=
 COOKIE_NAME=
-SITE_URL=
+SITE_URL=
+NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,12 +1,7 @@
 import Link from "next/link";
-import Image from "next/image";
 import { getConfigContent, getMenu, toKebabCase } from "../lib/utils";
-import {
-  getNodeToken,
-  getRecord,
-  getTables,
-  NodesItem,
-} from "../services/larkServices";
+import { getNodeToken, NodesItem } from "../services/larkServices";
+import CustomImage from "../components/customImage";
 
 const getChildList = (ele: NodesItem, index: number, url: string = "") => {
   index++;
@@ -41,7 +36,7 @@ export default async function Home() {
     <main className="pt-8 container min-h-[calc(100vh-225px)]">
       <div className="sm:mt-[60px] mt-10 bg-white">
         <div className="relative w-full sm:h-[322px] h-[82px] mb-6">
-          <Image
+          <CustomImage
             src={configObj.image}
             alt="Banner Image"
             layout="fill"

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -1,7 +1,6 @@
 "use client";
 import type { MenuProps } from "antd";
 import { Drawer, Menu } from "antd";
-import Image from "next/image";
 import { NodesData, NodesItem } from "../../services/larkServices";
 import { useEffect, useState } from "react";
 import Link from "next/link";
@@ -21,6 +20,7 @@ import {
 import "./index.css";
 import Sidebar from "../sidebar";
 import { Desktop, Mobile } from "../provider";
+import CustomImage from "../customImage";
 interface Props {
   menu: NodesData;
   baseConfig: { [key: string]: any };
@@ -103,12 +103,12 @@ export default function Header({ menu, baseConfig }: Props) {
       <Drawer
         className="header-drawer-container"
         title={
-          <Image
+          <CustomImage
             src={baseConfig.logoLight}
             width={115}
             height={59}
             alt="logo"
-          ></Image>
+          ></CustomImage>
         }
         closeIcon={false}
         extra={
@@ -128,12 +128,12 @@ export default function Header({ menu, baseConfig }: Props) {
         {showHome ? homeDrawerContent : drawerContent}
       </Drawer>
       <Link href="/" className="mr-8 flex">
-        <Image
+        <CustomImage
           src={baseConfig.logoLight}
           width={115}
           height={32}
           alt="logo"
-        ></Image>
+        ></CustomImage>
       </Link>
       <Desktop>
         <Menu

diff --git a/components/blocks/image.tsx b/components/blocks/image.tsx
@@ -1,7 +1,6 @@
-import { default as NxImage } from "next/image";
-
 import { Item } from "./common";
 import { fetcher } from "../../lib/api";
+import CustomImage from "../customImage";
 
 export interface Image extends Item {
   block_type: 27;
@@ -28,7 +27,7 @@ export async function Image(props: Image) {
   if (!src) return <></>;
 
   return (
-    <NxImage
+    <CustomImage
       src={src}
       alt=""
       width={props.image.width}

diff --git a/components/customImage.tsx b/components/customImage.tsx
@@ -0,0 +1,29 @@
+"use client";
+import Image from "next/image";
+import type { ImageLoader } from "next/image";
+
+interface ImageProps {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+  layout?: "fill" | "fixed" | "intrinsic" | "responsive";
+  loader?: ImageLoader;
+  quality?: number;
+  priority?: boolean;
+  loading?: "lazy" | "eager";
+  placeholder?: "blur" | "empty";
+  blurDataURL?: string;
+  objectFit?: string;
+}
+
+export default function CustomImage(props: ImageProps) {
+  return (
+    <Image
+      {...props}
+      src={`https://res.cloudinary.com/${
+        process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+      }/image/fetch/${encodeURIComponent(props.src)}`}
+    />
+  );
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -1,7 +1,7 @@
 import { listFooterLinks } from "@/services/list-footer-links";
 import { key } from "@/lib/utils";
 import Link from "next/link";
-import Image from "next/image";
+import CustomImage from "./customImage";
 interface Props {
   baseConfig: { [key: string]: any };
 }
@@ -13,18 +13,18 @@ export async function Footer({ baseConfig }: Props) {
       <div className="container p-8 ">
         <div className="footer-links lg:grid grid-cols-5 gap-4">
           <div className="hidden lg:block">
-            <Image
+            <CustomImage
               src={baseConfig?.logoLight}
               width={115}
               height={32}
               alt="logo"
             />
           </div>
-          {Object.keys(footerData).map((category) => (
+          {Object.keys(footerData).map(category => (
             <div key={category} className="mb-4">
               <h3 className="font-bold mb-4">{category}</h3>
               <ul>
-                {footerData[category].map((item) => (
+                {footerData[category].map(item => (
                   <li key={key()} className="leading-[32px]">
                     <Link
                       className="hover:underline text-[#606770]"
@@ -45,42 +45,42 @@ export async function Footer({ baseConfig }: Props) {
           <span className="social flex gap-3">
             {baseConfig?.footerTwitter && (
               <Link href={baseConfig.footerTwitter}>
-                <Image
+                <CustomImage
                   src="./twitter.svg"
                   alt="X"
                   width={24}
                   height={24}
-                ></Image>
+                ></CustomImage>
               </Link>
             )}
             {baseConfig?.footerTelegram && (
               <Link href={baseConfig.footerTelegram}>
-                <Image
+                <CustomImage
                   src="./telegram.svg"
                   alt="telegram"
                   width={24}
                   height={24}
-                ></Image>
+                ></CustomImage>
               </Link>
             )}
             {baseConfig?.footerDiscord && (
               <Link href={baseConfig.footerDiscord}>
-                <Image
+                <CustomImage
                   src="./discord.svg"
                   alt="discord"
                   width={24}
                   height={24}
-                ></Image>
+                ></CustomImage>
               </Link>
             )}
             {baseConfig?.footerGitHub && (
               <Link href={baseConfig.footerGitHub}>
-                <Image
+                <CustomImage
                   src="./github.svg"
                   alt="github"
                   width={24}
                   height={24}
-                ></Image>
+                ></CustomImage>
               </Link>
             )}
           </span>