Issue#8 update the blog link and preview to the new blog (#754)

Teo · web-flow · commit d2f7d5e2af5e · 2025-09-08T09:51:14.000+02:00
* Issue#8: Adapt Content Security Policy to allow blogger.googleusercontent.com

* Issue#8: Update the hardcoded Blog URL's

* Issue#8: Add new api util to get the new blog data

* Issue#8: Update and rename Post  to LearnPost for learn util api util to handle the existing Post

* Issue#8: Update Post to handle the new blog Post API

* Issue#8: Update the hardcoded Blog URL

* Issue#8: Add new API to handle the new blog data

* Issue#8 Update hardcoded post URL

* Issue#8 Update build env to Node 18 + PNPM 8.10.0 to match local development

* Issue#8 Update build env to AWS notdejs18 and Node version  18 and PNPM 8.10.0 to match local development

* Issue#8 Improve to defensive getStaticProps

* Issue#8 add cross-fetch for Blogspot API compatibility

* revert cross-fetch install

* Issue#8 add fetch availability log in getBlogspotPosts

* Debug: add Netlify debug logs and bypass fetch

* Debug: disable ISR on Netlify + harden Blogspot mapper

* Debug: Moved Content-Security-Policy to via netlify.toml

* Debug: revert CSP to next.config

* Debug: add sha256 hash to allow inline bootstrap script

* Issue#8 use bracket access for media$thumbnail and de-dupe types

* revert all changes

* Issue#8 use static bg image

* Issue#8 add static bg image
diff --git a/cypress/deprecated/layout/header.spec.ts b/cypress/deprecated/layout/header.spec.ts
@@ -31,7 +31,7 @@ context("<Header/> on desktop", () => {
         .should("have.attr", "href", "/downloads");
       cy.get('[data-testid="Desktop.HeaderLink.DFCBlog"]')
         .should("be.visible")
-        .should("have.attr", "href", "https://blog.defichain.com/");
+        .should("have.attr", "href", "https://defichainblog.blogspot.com/");
       cy.get('[data-testid="Desktop.HeaderLink.DeFiScan"]')
         .should("be.visible")
         .should("have.attr", "href", "https://defiscan.live/");
@@ -85,7 +85,7 @@ context("<Header/> on mobile", () => {
             .should("have.attr", "href", "/ecosystem");
           cy.get('[data-testid="Mobile.HeaderLink.DFCBlog"]')
             .should("be.visible")
-            .should("have.attr", "href", "https://blog.defichain.com/");
+            .should("have.attr", "href", "https://defichainblog.blogspot.com/");
           cy.get('[data-testid="Mobile.HeaderLink.DeFiScan"]')
             .should("be.visible")
             .should("have.attr", "href", "https://defiscan.live/");
diff --git a/cypress/e2e/explore/dfi.spec.ts b/cypress/e2e/explore/dfi.spec.ts
@@ -248,7 +248,7 @@ viewports.forEach((viewport) => {
       );
       cy.checkElementVisibilityAndHref(
         "explore-dmc-button-erc-20-learn-more",
-        "https://blog.defichain.com/defichains-first-move-to-become",
+        "https://defichainblog.blogspot.com/defichains-first-move-to-become",
       );
       cy.checkElementVisibilityAndHref(
         "link-button-view-contract",
diff --git a/cypress/e2e/homepage.spec.ts b/cypress/e2e/homepage.spec.ts
@@ -142,7 +142,7 @@ viewports.forEach((viewport) => {
       cy.findByTestId("secondary-button-view-all-articles")
         .should("be.visible")
         .and("have.attr", "href")
-        .and("include", "https://blog.defichain.com");
+        .and("include", "https://defichainblog.blogspot.com");
       cy.findByTestId("secondary-button-view-all-articles")
         .should("have.attr", "target")
         .and("include", "_blank");
@@ -209,7 +209,7 @@ viewports.forEach((viewport) => {
       cy.findAllByTestId("blog-post-container-link")
         .should("be.visible")
         .and("have.attr", "href")
-        .and("include", "https://blog.defichain.com/");
+        .and("include", "https://defichainblog.blogspot.com/");
     });
 
     // No TC
diff --git a/cypress/fixture/homepage.config.ts b/cypress/fixture/homepage.config.ts
@@ -41,14 +41,14 @@ export const resourcesLinks = [
   },
   {
     footerTestid: "DeFiChain Blog",
-    link: "https://blog.defichain.com/",
+    link: "https://defichainblog.blogspot.com/",
   },
 ];
 
 export const communityLinks = [
   {
     headerId: "dfi-blog",
-    href: "https://blog.defichain.com/",
+    href: "https://defichainblog.blogspot.com/",
   },
   {
     headerId: "reddit",
diff --git a/netlify.toml b/netlify.toml
@@ -2,6 +2,11 @@
   command = "pnpm run build"
   publish = ".next"
 
+[build.environment]
+  NODE_VERSION = "18"
+  PNPM_VERSION = "8.10.0"
+  AWS_LAMBDA_JS_RUNTIME = "nodejs18.x"
+
 [[plugins]]
   package = "@netlify/plugin-lighthouse"
 
diff --git a/package.json b/package.json
@@ -61,4 +61,4 @@
     "pnpm": ">=8.10.0"
   },
   "packageManager": "pnpm@8.10.0"
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/assets/img/background/static_post_BG_16x9_DeFiChain.png b/public/assets/img/background/static_post_BG_16x9_DeFiChain.png
diff --git a/public/locales/de/layout.json b/public/locales/de/layout.json
@@ -10,7 +10,7 @@
       "buy": "Erwerb von",
       "getDfi": "DFI erwerben",
       "dfcblog": "Blog",
-      "bloglink": "https://blog.defichain.com/de/",
+      "bloglink": "https://defichainblog.blogspot.com/",
       "explore": "Erkunden",
       "build": "Bauen",
       "community": "Community"
@@ -103,7 +103,7 @@
               "title": "Reddit"
             },
             {
-                "title": "X (formerly Twitter)"
+              "title": "X (formerly Twitter)"
             },
             {
               "title": "GitHub"
diff --git a/public/locales/de/page-index.json b/public/locales/de/page-index.json
@@ -50,7 +50,7 @@
         "desc": "Zugang zu dezentralen Vermögenswerten mit Sicherheiten in deinem Vault",
         "buttonText": "Mehr erfahren",
         "buttonType": "full",
-        "url": "https://blog.defichain.com/what-are-decentralised-stock-tokens-and-how-do-they-work/"
+        "url": "https://defichainblog.blogspot.com/2021/11/what-are-decentralized-assets-and-how.html/"
       },
       {
         "label": "AKTUELLER DOWNLOAD",
@@ -66,7 +66,7 @@
         "desc": "Erfahre mehr über den $DFI-Coin und erwirb ihn an verschiedenen Krypto-Börsen",
         "buttonText": "Mehr erfahren",
         "buttonType": "outline",
-        "url": "https://blog.defichain.com/where-and-how-to-buy-dfi-defichain/"
+        "url": "https://defichainblog.blogspot.com/2020/11/where-and-how-to-buy-dfi-defichain.html/"
       },
       {
         "label": "ÖKOSYSTEM",
diff --git a/public/locales/en-US/layout.json b/public/locales/en-US/layout.json
@@ -10,7 +10,7 @@
       "buy": "Buy",
       "getDfi": "Get DFI",
       "dfcblog": "Blog",
-      "bloglink": "https://blog.defichain.com/",
+      "bloglink": "https://defichainblog.blogspot.com/",
       "explore": "Explore",
       "build": "Build",
       "metachain": "MetaChain",
@@ -105,7 +105,7 @@
               "title": "Reddit"
             },
             {
-                "title": "X (formerly Twitter)"
+              "title": "X (formerly Twitter)"
             },
             {
               "title": "GitHub"
diff --git a/public/locales/en-US/page-index.json b/public/locales/en-US/page-index.json
@@ -50,7 +50,7 @@
         "desc": "Access decentralized assets with collateral in your vault.",
         "buttonText": "Learn more",
         "buttonType": "full",
-        "url": "https://blog.defichain.com/what-are-decentralised-stock-tokens-and-how-do-they-work/"
+        "url": "https://defichainblog.blogspot.com/2021/11/what-are-decentralized-assets-and-how.html/"
       },
       {
         "label": "FEATURED DOWNLOAD",
@@ -66,7 +66,7 @@
         "desc": "Learn about and acquire the $DFI coin from various crypto exchanges.",
         "buttonText": "Learn more",
         "buttonType": "outline",
-        "url": "https://blog.defichain.com/where-and-how-to-buy-dfi-defichain/"
+        "url": "https://defichainblog.blogspot.com/2020/11/where-and-how-to-buy-dfi-defichain.html/"
       },
       {
         "label": "ECOSYSTEM",
@@ -212,4 +212,4 @@
     "label": "DEFICHAIN BLOG",
     "button": "View all articles"
   }
-}
+}
diff --git a/public/locales/fr/page-index.json b/public/locales/fr/page-index.json
@@ -50,7 +50,7 @@
         "desc": "Accéder à des actifs décentralisés avec des garanties dans son vault",
         "buttonText": "En savoir plus",
         "buttonType": "full",
-        "url": "https://blog.defichain.com/what-are-decentralised-stock-tokens-and-how-do-they-work/"
+        "url": "https://defichainblog.blogspot.com/2021/11/what-are-decentralized-assets-and-how.html/"
       },
       {
         "label": "TÉLÉCHARGEMENT EN VEDETTE",
@@ -66,7 +66,7 @@
         "desc": "Apprendre à connaître et à acquérir du coin $DFI à partir de divers échanges de crypto.",
         "buttonText": "En savoir plus",
         "buttonType": "outline",
-        "url": "https://blog.defichain.com/where-and-how-to-buy-dfi-defichain/"
+        "url": "https://defichainblog.blogspot.com/2020/11/where-and-how-to-buy-dfi-defichain.html/"
       },
       {
         "label": "ÉCOSYSTÈME",
diff --git a/public/locales/zh-Hans/page-index.json b/public/locales/zh-Hans/page-index.json
@@ -50,7 +50,7 @@
         "desc": "运用抵押品去啟動您的去中心化资产。",
         "buttonText": "了解更多",
         "buttonType": "full",
-        "url": "https://blog.defichain.com/zht/zht-decentralized-assets/"
+        "url": "https://defichainblog.blogspot.com/"
       },
       {
         "label": "精选下载",
diff --git a/public/locales/zh-Hant/page-index.json b/public/locales/zh-Hant/page-index.json
@@ -50,7 +50,7 @@
         "desc": "運用抵押品去啟動您的去中心化資產。",
         "buttonText": "了解更多",
         "buttonType": "full",
-        "url": "https://blog.defichain.com/zht/zht-decentralized-assets/"
+        "url": "https://defichainblog.blogspot.com/"
       },
       {
         "label": "精選下載",
diff --git a/src/components/index/blogPosts/BlogPostsSection.tsx b/src/components/index/blogPosts/BlogPostsSection.tsx
@@ -2,12 +2,13 @@ import classNames from "classnames";
 import { Container } from "@components/commons/Container";
 import { SectionTitle } from "@components/commons/SectionTitle";
 import { SecondaryButton } from "@components/commons/Buttons";
-import { Posts } from "@components/commons/prismicTypes";
 import { useTranslation } from "../../../hooks/useTranslation";
 import ProjectCard from "./PostCard";
+import type { Post } from "../../../lib/blogspotApi";
 
-export function BlogPostsSection({ blogPosts }: { blogPosts: Posts[] }) {
+export function BlogPostsSection({ blogPosts }: { blogPosts: Post[] }) {
   const { t } = useTranslation("page-index");
+
   return blogPosts?.length > 0 ? (
     <section className={classNames("relative lg:mb-56 md:mb-52 mb-48")}>
       <Container>
@@ -24,15 +25,15 @@ export function BlogPostsSection({ blogPosts }: { blogPosts: Posts[] }) {
             <SecondaryButton
               text={t("BlogPostsSection.button")}
               className="text-sm mt-9 lg:py-4 py-3 px-[62px] md:px-[56px] lg:text-base"
-              href="https://blog.defichain.com/"
+              href="https://defichainblog.blogspot.com/"
               customSize={24}
               customClass="ml-[8px]"
               testID="view-all-articles"
             />
           </div>
           <div className="flex flex-wrap gap-x-6 gap-y-6 md:gap-y-12 mt-12 lg:mt-0 lg:w-[660px]">
-            {blogPosts.slice(-4).map((p, i) => (
-              <ProjectCard key={p.title[0].text} post={p} isLatest={i === 0} />
+            {blogPosts.slice(0, 4).map((p, i) => (
+              <ProjectCard key={`${p.slug}-${i}`} post={p} isLatest={i === 0} />
             ))}
           </div>
         </div>
diff --git a/src/components/index/blogPosts/PostCard.tsx b/src/components/index/blogPosts/PostCard.tsx
@@ -1,34 +1,34 @@
-import { Posts } from "@components/commons/prismicTypes";
-import { useRouter } from "next/router";
+import type { Post } from "../../../lib/blogspotApi";
+
+const LOCAL_BG = "/assets/img/background/static_post_BG_16x9_DeFiChain.png";
 
 export default function ProjectCard({
   post,
   isLatest,
 }: {
-  post: Posts;
+  post: Post;
   isLatest: boolean;
 }) {
-  const router = useRouter();
   return (
     <article
       className="w-full max-w-[318px] flex flex-col"
-      data-testid={`card_container_${post.title[0]?.text}`}
+      data-testid={`card_container_${post.title}`}
     >
       <a
         data-testid="blog-post-container-link"
-        href={post.url?.url}
+        href={post.url}
         target="_blank"
         rel="noreferrer"
       >
         <section
-          className="w-full min-h-[180px] bg-light-50 bg-cover bg-center flex flex-col justify-end"
-          data-testid={`card_title_${post.title[0]?.text}`}
+          className="w-full min-h-[180px] bg-light-50 flex flex-col justify-end"
+          data-testid={`card_title_${post.title}`}
         >
           <section className="text-start">
             <div
-              className="relative bg-cover bg-[center_left_0rem] w-full h-[179px] rounded-[5px]"
+              className="relative w-full h-[179px] rounded-[5px] overflow-hidden"
               style={{
-                backgroundImage: `url('${post.image.url}')`,
+                background: `url('${LOCAL_BG}') center / cover no-repeat`,
               }}
             >
               {isLatest && (
@@ -37,17 +37,10 @@ export default function ProjectCard({
                 </div>
               )}
             </div>
-            {post.title_de &&
-            post.title_de?.length > 0 &&
-            router.locale === "de" ? (
-              <div className="text-dark-1000 font-semibold px-3 mt-4 max-w-[294px] line-clamp-2 h-12 lg:text-lg lg:leading-6 lg:mt-6">
-                {post.title_de[0].text}
-              </div>
-            ) : (
-              <div className="text-dark-1000 font-semibold px-3 mt-4 max-w-[294px] line-clamp-2 h-12 lg:text-lg lg:leading-6 lg:mt-6">
-                {post.title[0]?.text}
-              </div>
-            )}
+
+            <div className="text-dark-1000 font-semibold px-3 mt-4 max-w-[294px] line-clamp-2 h-12 lg:text-lg lg:leading-6 lg:mt-6">
+              {post.title}
+            </div>
           </section>
         </section>
       </a>
diff --git a/src/layouts/components/Community.tsx b/src/layouts/components/Community.tsx
@@ -24,7 +24,7 @@ export function Community() {
         items: [
           {
             icon: "dfi",
-            href: "https://blog.defichain.com/",
+            href: "https://defichainblog.blogspot.com/",
             title: entries[0].labels[0].title,
             subtitle: entries[0].labels[0].subtitle,
             testID: "community-dfi-blog",
diff --git a/src/layouts/components/Footer.tsx b/src/layouts/components/Footer.tsx
@@ -122,7 +122,7 @@ export const MenuItems = [
         testId: "blog",
         altLabel: "blog",
         isExternaLink: true,
-        url: "https://blog.defichain.com/",
+        url: "https://defichainblog.blogspot.com/",
         hasUpArrowIcon: true,
       },
       // {
diff --git a/src/lib/blogspotApi.ts b/src/lib/blogspotApi.ts
@@ -0,0 +1,59 @@
+export interface Post {
+  slug: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  content: string; // raw HTML from Blogger
+  url: string; // canonical post URL
+  imageUrl?: string; // first <img> in content or static bg image
+  published?: string;
+}
+
+function firstImageFromHtml(html?: string): string {
+  if (!html) {
+    return "";
+  }
+  const m = html.match(/<img[^>]+src="([^">]+)"/i);
+  return m?.[1] ?? "";
+}
+
+export async function getBlogspotPosts(): Promise<Post[]> {
+  try {
+    const res = await fetch(
+      "https://defichainblog.blogspot.com/feeds/posts/default?alt=json",
+    );
+    if (!res.ok) {
+      return [];
+    }
+
+    const json = await res.json();
+    const entries: any[] = Array.isArray(json?.feed?.entry)
+      ? json.feed.entry
+      : [];
+
+    return entries.map((e: any): Post => {
+      const title = e?.title?.$t ?? "";
+      const url =
+        (e?.link || []).find((l: any) => l.rel === "alternate")?.href ?? "";
+      const html = e?.content?.$t ?? "";
+      const imageUrl =
+        firstImageFromHtml(html) || e?.media$thumbnail?.url || "";
+      const description = e?.summary?.$t ?? "";
+      const slug = e?.id?.$t ?? title.toLowerCase().replace(/\s+/g, "-");
+      const published = e?.published?.$t;
+
+      return {
+        slug,
+        title,
+        subtitle: "",
+        description,
+        content: html,
+        url,
+        imageUrl,
+        published,
+      };
+    });
+  } catch {
+    return [];
+  }
+}
diff --git a/src/pages/explore/dfi/_components/ERC20Section.tsx b/src/pages/explore/dfi/_components/ERC20Section.tsx
@@ -36,7 +36,7 @@ export default function ERC20Section(): JSX.Element {
           text={t("erc20Section.buttonText")}
           data-testid="explore-dmc-button-erc-20-learn-more"
           className="lg:px-[72.5px] md:px-[130px] py-3 lg:py-4"
-          href="https://blog.defichain.com/defichains-first-move-to-become-an-interoperable-defi-powerhouse/"
+          href="https://defichainblog.blogspot.com/2021/03/defichains-first-move-to-become.html/"
           testID="erc-20-learn-more"
         />
         <LinkButton
diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx
diff --git a/src/pages/learn/utils/api.ts b/src/pages/learn/utils/api.ts
diff --git a/src/pages/metachain/_components/MetaChainRoadmap.tsx b/src/pages/metachain/_components/MetaChainRoadmap.tsx
diff --git a/src/pages/privacy-policy.page.tsx b/src/pages/privacy-policy.page.tsx
diff --git a/src/pages/security.page.tsx b/src/pages/security.page.tsx
diff --git a/src/pages/utils/api.ts b/src/pages/utils/api.ts
diff --git a/src/pages/white-paper.page.tsx b/src/pages/white-paper.page.tsx

Original file line number	Diff line number	Diff line change
`@@ -41,14 +41,14 @@ export const resourcesLinks = [`
`41`	`41`	`},`
`42`	`42`	`{`
`43`	`43`	`footerTestid: "DeFiChain Blog",`
`44`		`- link: "https://blog.defichain.com/",`
	`44`	`+ link: "https://defichainblog.blogspot.com/",`
`45`	`45`	`},`
`46`	`46`	`];`
`47`	`47`
`48`	`48`	`export const communityLinks = [`
`49`	`49`	`{`
`50`	`50`	`headerId: "dfi-blog",`
`51`		`- href: "https://blog.defichain.com/",`
	`51`	`+ href: "https://defichainblog.blogspot.com/",`
`52`	`52`	`},`
`53`	`53`	`{`
`54`	`54`	`headerId: "reddit",`