Fix the SVGs display in the branding page (#134)

* Reintroduce revalidate to /docs * Fix the SVG assets display
solana-foundation · Dec 22, 2024 · bc1710b · bc1710b
1 parent b6d25df
commit bc1710b
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 27 deletions.
diff --git a/src/components/branding/BrandingAssets.jsx b/src/components/branding/BrandingAssets.jsx
@@ -1,15 +1,9 @@
-import Image from "next/legacy/image";
+import Image from "next/image";
 import styled from "styled-components";
 import Divider from "../shared/Divider";
 import Button from "../shared/Button";
 import { useTranslation } from "next-i18next";
 
-import solanaLogo from "../../../public/src/img/branding/solanaLogo.svg";
-import solanaLogoMark from "../../../public/src/img/branding/solanaLogoMark.svg";
-import solanaVerticalLogo from "../../../public/src/img/branding/solanaVerticalLogo.svg";
-import solanaFoundationLogo from "../../../public/src/img/branding/solanaFoundationLogo.svg";
-import solanaWordMark from "../../../public/src/img/branding/solanaWordMark.svg";
-
 const StyledSection = styled.section`
   .logo-section {
     display: flex;
@@ -25,7 +19,6 @@ const StyledSection = styled.section`
       height: 160px;
       display: flex;
       align-items: center;
-      justify-content: center;
     }
   }
 `;
@@ -66,7 +59,12 @@ const BrandingAssets = () => {
           </div>
         </div>
         <div className="logo">
-          <Image alt={`Solana`} src={solanaLogo} />
+          <Image
+            alt={`Solana`}
+            src="/src/img/branding/solanaLogo.svg"
+            width={320}
+            height={160}
+          />
         </div>
       </div>
 
@@ -90,7 +88,12 @@ const BrandingAssets = () => {
           </div>
         </div>
         <div className="logo">
-          <Image alt={`Solana`} src={solanaLogoMark} />
+          <Image
+            alt={`Solana`}
+            src="/src/img/branding/solanaLogoMark.svg"
+            width={100}
+            height={100}
+          />
         </div>
       </div>
 
@@ -114,7 +117,12 @@ const BrandingAssets = () => {
           </div>
         </div>
         <div className="logo">
-          <Image alt={`Solana`} src={solanaWordMark} />
+          <Image
+            alt={`Solana`}
+            src="/src/img/branding/solanaWordMark.svg"
+            width={320}
+            height={160}
+          />
         </div>
       </div>
 
@@ -138,7 +146,12 @@ const BrandingAssets = () => {
           </div>
         </div>
         <div className="logo">
-          <Image alt={`Solana`} src={solanaVerticalLogo} />
+          <Image
+            alt={`Solana`}
+            src="/src/img/branding/solanaVerticalLogo.svg"
+            width={320}
+            height={160}
+          />
         </div>
       </div>
 
@@ -162,7 +175,12 @@ const BrandingAssets = () => {
           </div>
         </div>
         <div className="logo">
-          <Image alt={`Solana`} src={solanaFoundationLogo} />
+          <Image
+            alt={`Solana`}
+            src="/src/img/branding/solanaFoundationLogo.svg"
+            width={320}
+            height={160}
+          />
         </div>
       </div>
     </StyledSection>

diff --git a/src/components/branding/BrandingBannedLogos.jsx b/src/components/branding/BrandingBannedLogos.jsx
@@ -1,13 +1,7 @@
-import Image from "next/legacy/image";
+import Image from "next/image";
 import styled from "styled-components";
 import { useTranslation } from "next-i18next";
 
-import bannedLogos1 from "../../../public/src/img/branding/bannedLogos-1.svg";
-import bannedLogos2 from "../../../public/src/img/branding/bannedLogos-2.png";
-import bannedLogos3 from "../../../public/src/img/branding/bannedLogos-3.svg";
-import bannedLogos4 from "../../../public/src/img/branding/bannedLogos-4.svg";
-import bannedLogos5 from "../../../public/src/img/branding/bannedLogos-5.svg";
-import bannedLogos6 from "../../../public/src/img/branding/bannedLogos-6.svg";
 import InvalidMark from "../../../public/src/img/icons/RedClose.inline.svg";
 
 const StyledSection = styled.section`
@@ -56,32 +50,62 @@ const BrandingBannedLogos = () => {
       <p className="small mt-2">{t("branding.banned.description")}</p>
       <div className="banned-logos">
         <div style={{ background: "#9945FF" }}>
-          <Image alt="" src={bannedLogos1} />
+          <Image
+            alt=""
+            src="/src/img/branding/bannedLogos-1.svg"
+            fill
+            style={{ objectFit: "contain", padding: "1rem" }}
+          />
           <InvalidMark className="invalid-mark" />
           <p className="description">{t("branding.banned.shadow")}</p>
         </div>
         <div style={{ background: "#9945FF" }}>
-          <Image alt="" src={bannedLogos2} />
+          <Image
+            alt=""
+            src="/src/img/branding/bannedLogos-2.png"
+            fill
+            style={{ objectFit: "contain", padding: "1rem" }}
+          />
           <InvalidMark className="invalid-mark" />
           <p className="description">{t("branding.banned.outline")}</p>
         </div>
         <div>
-          <Image alt="" src={bannedLogos3} />
+          <Image
+            alt=""
+            src="/src/img/branding/bannedLogos-3.svg"
+            fill
+            style={{ objectFit: "contain", padding: "1rem" }}
+          />
           <InvalidMark className="invalid-mark" />
           <p className="description">{t("branding.banned.stretch")}</p>
         </div>
         <div>
-          <Image alt="" src={bannedLogos4} />
+          <Image
+            alt=""
+            src="/src/img/branding/bannedLogos-4.svg"
+            fill
+            style={{ objectFit: "contain", padding: "1rem" }}
+          />
           <InvalidMark className="invalid-mark" />
           <p className="description">{t("branding.banned.lowResolution")}</p>
         </div>
         <div>
-          <Image alt="" src={bannedLogos5} />
+          <Image
+            alt=""
+            src="/src/img/branding/bannedLogos-5.svg"
+            fill
+            style={{ objectFit: "contain", padding: "1rem" }}
+          />
           <InvalidMark className="invalid-mark" />
           <p className="description">{t("branding.banned.imagery")}</p>
         </div>
         <div style={{ background: "#6D86D1" }}>
-          <Image alt="" src={bannedLogos6} />
+          <Image
+            alt=""
+            src="/src/img/branding/bannedLogos-6.svg"
+            fill
+            style={{ objectFit: "contain", padding: "1rem" }}
+          />
           <InvalidMark className="invalid-mark" />
           <p className="description">{t("branding.banned.contrast")}</p>
         </div>

diff --git a/src/pages/docs/[[...slug]].tsx b/src/pages/docs/[[...slug]].tsx
@@ -195,6 +195,6 @@ export async function getStaticProps({ params, locale }) {
       source,
       navData,
     },
-    // revalidate: 60,
+    revalidate: 60,
   };
 }