feat(site): add landing and learn to contentful (#3073)

site/astro.config.ts

@@ -20,8 +20,7 @@ export default defineConfig({
   output: "server",
   experimental: {
     clientPrerender: true,
-    contentIntellisense: true,
-    contentCollectionCache: true
+    contentIntellisense: true
   },
   trailingSlash: "ignore",
   adapter: vercel({

site/site.nix

@@ -18,7 +18,7 @@ _: {
       packages = {
         site = mkCi false (
           unstablePkgs.buildNpmPackage {
-            npmDepsHash = "sha256-3vbmOiri2LfaCd8HDbG6iC+z9a4r0HgsWULltOA+c5w=";
+            npmDepsHash = "sha256-5ly/z5kRpvqphF89vHS/KU6gHNhL9Wb9KB91SWpGnS8=";
             src = ./.;
             sourceRoot = "site";
             pname = packageJSON.name;

site/src/components/sections/TopSection.astro

@@ -1,15 +1,15 @@
 ---
-import LightedTitle from "../typography/LightedTitle.astro"
-import SplineCover from "../SplineCover.astro"
-
+import H2 from "../typography/h2.astro"
 const { title } = Astro.props
 ---
 
 <section class="relative flex w-full h-full justify-center pb-12 md:pb-34 -mt-[56px] md:-mt-[80px]">
   <div class="absolute w-full max-w-[1440px] px-6 pt-24 md:pt-36 h-svh z-10">
     <div class="pointer-events-none z-20 flex flex-col justify-between w-full h-full">
       <div class="flex flex-col text-left items-start">
-        <LightedTitle {title}/>
+        <H2>
+          <Fragment set:html={title} />
+        </H2>
       </div>
       <slot />
     </div>

site/src/components/sections/landing/BorderIntro.astro

@@ -1,9 +1,19 @@
 ---
 import MatrixCover from "../../MatrixCover.astro"
-import ContainedSection from "../../ContainedSection.astro"
 import H1 from "../../typography/h1.astro"
 import ButtonA from "../../ButtonA.astro"
 import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
+import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
+
+interface Props {
+  title: any
+  text: any
+}
+
+const { title, text } = Astro.props
+
+const titleHtml = renderTitle(title)
+const textHtml = renderRichText(text)
 ---
 
   <div class="header-grid">
@@ -15,11 +25,8 @@ import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
     </div>
     <MatrixCover/>
     <div class="backdrop-blur-2xl header-text-content p-6 md:p-8 flex flex-col gap-4 m-4">
-      <H1>The ZK<br> <span class="text-accent-500">Interop Layer</span></H1>
-      <QuoteSubTitle>
-        Connecting every blockchain, without compromising on security, efficiency,
-        decentralization, or speed.
-      </QuoteSubTitle>
+      <H1><Fragment set:html={titleHtml} /></H1>
+      <QuoteSubTitle><Fragment set:html={textHtml} /></QuoteSubTitle>
       <ButtonA href="https://app.union.build">DIVE IN </ButtonA>
     </div>
 

site/src/components/sections/landing/ConsensusSection.astro

@@ -1,23 +1,35 @@
 ---
-import { Image } from "astro:assets"
 import H1 from "../../typography/h1.astro"
 import ButtonA from "../../ButtonA.astro"
 import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
 import ContainedSection from "../../ContainedSection.astro"
-import Spline from "../../Spline.astro"
+import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
+
+interface Props {
+  title: any
+  text: any
+}
+
+const { title, text } = Astro.props
+
+const titleHtml = renderTitle(title)
+const textHtml = renderRichText(text)
 ---
 
 <ContainedSection>
   <div class="flex flex-col-reverse lg:flex-row gap-12 py-12">
     <div class="flex flex-col justify-center gap-6 flex-1">
-      <H1>Consensus <br> verification <br> for security <br> and <span class="text-accent-500">stability</span></H1>
+      <H1>
+        <Fragment set:html={titleHtml}/>
+      </H1>
       <div class="max-w-[438px]">
-        <QuoteSubTitle>Union eliminates intermediaries and connects blockchains directly. With Union light clients, you
-          get secure, censorship-resistant connections to any ecosystem.
+        <QuoteSubTitle>
+          <Fragment set:html={textHtml}/>
         </QuoteSubTitle>
       </div>
       <ButtonA>Learn More</ButtonA>
     </div>
-    <video class="bg-black flex-1" src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/radial-glass-union.webm" autoplay muted loop/>
+    <video class="bg-black flex-1" src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/radial-glass-union.webm"
+           autoplay muted loop/>
   </div>
 </ContainedSection>

site/src/components/sections/landing/ExecutionSection.astro

@@ -1,21 +1,29 @@
 ---
-import { Image } from "astro:assets"
-import H2 from "../../typography/h2.astro"
+import H1 from "../../typography/h2.astro"
 import ButtonA from "../../ButtonA.astro"
 import QuoteSubTitle from "../../typography/QuoteSubTitle.astro"
-import executionImage from "#/assets/images/spline-holders/modular.png"
 import ContainedSection from "../../ContainedSection.astro"
-import Spline from "../../Spline.astro"
+import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
+
+interface Props {
+  title: any
+  text: any
+}
+
+const { title, text } = Astro.props
+
+const titleHtml = renderTitle(title)
+const textHtml = renderRichText(text)
 ---
 
 <ContainedSection>
   <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 py-12">
     <div class="flex flex-col justify-center gap-6">
-      <H2>Support for <span class="text-accent-500">any</span> execution <span>environment.</span></H2>
+      <H1><Fragment set:html={titleHtml} /></H1>
       <div class="max-w-[672px]">
-        <QuoteSubTitle class="text-lg sm:text-4xl">Union supports all types of blockchains by integrating
-          with multiple execution environments and languages such as Solidity, Rust, and Move <span
-                  class="text-accent-500">(coming soon).</span></QuoteSubTitle>
+        <QuoteSubTitle>
+          <Fragment set:html={textHtml} />
+        </QuoteSubTitle>
       </div>
       <ButtonA href="/ecosystem">Our Ecosystem</ButtonA>
     </div>

site/src/components/sections/landing/ZkSection.astro

@@ -5,17 +5,28 @@ import ButtonA from "../../ButtonA.astro"
 import Subtitle from "../../typography/subtitle.astro"
 import whale from "#/assets/images/big-whale.png"
 import ContainedSection from "../../ContainedSection.astro"
+import { renderRichText, renderTitle } from "../../../lib/contentful/render.ts"
+
+interface Props {
+  title: any
+  text: any
+}
+
+const { title, text } = Astro.props
+
+const titleHtml = renderTitle(title)
+const textHtml = renderRichText(text)
 ---
 
 <ContainedSection>
   <div class="relative flex w-full h-fit">
     <div class="absolute inset-0 flex items-center justify-center flex-col text-center z-10 h-full">
-      <H1>Zero Knowledge<br>cryptography.<br>
-        Fast, Secure, Cheap.
-      </H1> 
+      <H1>
+        <Fragment set:html={titleHtml}/>
+      </H1>
       <div class="text-3xl max-w-[1037px] py-4 sm:py-8">
-        <Subtitle>It takes only 7 seconds to generate a Union ZK proof,<br>securing thousands of transfers on
-          hundreds of chains.
+        <Subtitle>
+          <Fragment set:html={textHtml}/>
         </Subtitle>
       </div>
       <ButtonA>Start Swimming</ButtonA>

site/src/components/typography/h1.astro

@@ -1,3 +1,3 @@
-<div class="-mb-2 text-4xl sm:text-5xl md:text-6xl  text-white font-display uppercase font-supermolot font-bold">
+<div class="-mb-2 text-4xl sm:text-5xl md:text-6xl  text-white font-display uppercase font-supermolot font-bold py-0">
 	<slot/>
 </div>

site/src/components/typography/subtitle.astro

@@ -1,3 +1,3 @@
-<p class="text-sm md:text-base lg:text-xl font-bold text-neutral-200 font-mono">
+<div class="text-sm md:text-base lg:text-xl font-bold text-neutral-200 font-mono">
 	<slot/>
-</p>
+</div>

site/src/lib/contentful/render.ts

@@ -0,0 +1,35 @@
+import { BLOCKS, MARKS } from "@contentful/rich-text-types"
+import { documentToHtmlString } from "@contentful/rich-text-html-renderer"
+
+const defaultOptions = {
+  renderMark: {
+    [MARKS.BOLD]: (text: string) => `<span class="text-accent-500">${text}</span>`
+  },
+  renderNode: {
+    [BLOCKS.PARAGRAPH]: (node: any, next: any) => `<p>${next(node.content)}</p>`,
+    [BLOCKS.DOCUMENT]: (node: any, next: any) => next(node.content).join("")
+  }
+}
+
+export const renderRichText = (content: any, customOptions: any = {}) => {
+  const options = { ...defaultOptions, ...customOptions }
+  return documentToHtmlString(content, options)
+}
+
+export const renderTitle = (title: any) => {
+  return title.content
+    .map((block: any) => {
+      if (block.nodeType === BLOCKS.PARAGRAPH) {
+        return block.content
+          .map((node: any) => {
+            if (node.marks.some((mark: any) => mark.type === MARKS.BOLD)) {
+              return `<span class="text-accent-500">${node.value}</span>`
+            }
+            return node.value
+          })
+          .join("")
+      }
+      return ""
+    })
+    .join("<br>")
+}

site/src/lib/contentful/types.ts

@@ -0,0 +1,41 @@
+import type { EntryFields, EntrySkeletonType } from "contentful"
+
+export interface LandingPageFields {
+  firstTitle: EntryFields.RichText
+  firstText: EntryFields.RichText
+  secondTitle: EntryFields.RichText
+  secondText: EntryFields.RichText
+  thirdTitle: EntryFields.RichText
+  thirdText: EntryFields.RichText
+  fourthTitle: EntryFields.RichText
+  fourthText: EntryFields.RichText
+}
+
+export interface LearningPageFields {
+  coverTitle: EntryFields.RichText
+  coverText: EntryFields.RichText
+  firstTitle: EntryFields.RichText
+  firstText: EntryFields.RichText
+  secondTitle: EntryFields.RichText
+  secondText: EntryFields.RichText
+  thirdTitle: EntryFields.RichText
+  thirdText: EntryFields.RichText
+  fourthTitle: EntryFields.RichText
+  fourthText: EntryFields.RichText
+  fifthTitle: EntryFields.RichText
+  fifthText: EntryFields.RichText
+  sixthTitle: EntryFields.RichText
+  sixthText: EntryFields.RichText
+  seventhTitle: EntryFields.RichText
+  seventhText: EntryFields.RichText
+  eightTitle: EntryFields.RichText
+  eightText: EntryFields.RichText
+  nineTitle: EntryFields.RichText
+  nineText: EntryFields.RichText
+}
+
+export interface LandingPageSkeleton extends EntrySkeletonType<LandingPageFields, "landing"> {}
+
+export interface LearningPageFields extends EntrySkeletonType<LearningPageFields, "learn"> {}
+
+export type FetchError = string | null

site/src/pages/index.astro

@@ -1,4 +1,8 @@
+
 ---
+import { contentfulClient } from "../lib/contentful/client.ts"
+import type { LandingPageSkeleton, LandingPageFields } from "../lib/contentful/types.ts"
+
 import ContainedSection from "../components//ContainedSection.astro"
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import ConsensusSection from "../components/sections/landing/ConsensusSection.astro"
@@ -28,7 +32,6 @@ import partner_movement from "#/assets/images/marquee/partners/movement.png"
 import partner_bera from "#/assets/images/marquee/partners/bera.png"
 import partner_arbitrum from "#/assets/images/marquee/partners/arbitrum.png"
 import BorderIntro from "../components/sections/landing/BorderIntro.astro"
-import LightedTitle from "#/components/typography/LightedTitle.astro"
 
 export const prerender = false
 
@@ -60,16 +63,57 @@ const partners = [
   { name: "Bera", logo: partner_bera, url: "" },
   { name: "Arbitrum", logo: partner_arbitrum, url: "" }
 ]
+
+let landingData: LandingPageFields | null = null
+let error: string | null = null
+try {
+  const landingEntries = await contentfulClient.getEntries<LandingPageSkeleton>({
+    content_type: "landing"
+  })
+  if (landingEntries.items.length > 0) {
+    landingData = landingEntries.items[0].fields
+  } else {
+    error = "No landing page data found."
+  }
+} catch (err) {
+  console.error("Error fetching Contentful data:", err)
+  error = "Failed to load content. Please try again later."
+}
 ---
 
 <SectionsLayout>
-  <BorderIntro/>
-  <ConsensusSection/>
-  <ZkSection/>
-  <ExecutionSection/>
-  <ContainedSection>
-    <!--<LightedTitle title={"Our Pod"} />!-->
-    <MarqueeSection title={"Our pod."} reverse={false} data={pods}/>
-    <MarqueeSection title={"Our partners."} reverse={true} data={partners}/>
-  </ContainedSection>
+  {error ? (
+          <div class="error-message">
+            <h2>Error</h2>
+            <p>{error}</p>
+          </div>
+  ) : landingData ? (
+          <>
+            <BorderIntro
+                    title={landingData.firstTitle}
+                    text={landingData.firstText}
+            />
+            <ConsensusSection
+                    title={landingData.secondTitle}
+                    text={landingData.secondText}
+            />
+            <ZkSection
+                    title={landingData.thirdTitle}
+                    text={landingData.thirdText}
+            />
+            <ExecutionSection
+                    title={landingData.fourthTitle}
+                    text={landingData.fourthText}
+            />
+            <ContainedSection>
+              <MarqueeSection title={"Our pod."} reverse={false} data={pods}/>
+              <MarqueeSection title={"Our partners."} reverse={true} data={partners}/>
+            </ContainedSection>
+          </>
+  ) : (
+          <div class="loading-message">
+            <p>Loading content...</p>
+          </div>
+  )}
 </SectionsLayout>
+