diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 5cd8e364..3cf6b314 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,12 +1,16 @@ import Link from "next/link" import { memo } from "react" +import { Hydrate, dehydrate } from "@tanstack/react-query" + import { Logo } from "~/components/common/Logo" import { Button } from "~/components/ui/Button" import { Image } from "~/components/ui/Image" import { CSB_SCAN, GITHUB_LINK } from "~/lib/env" import { getSiteLink } from "~/lib/helpers" import { Trans, useTranslation } from "~/lib/i18n" +import getQueryClient from "~/lib/query-client" +import { prefetchGetShowcase } from "~/queries/home.server" import { default as OriginEntranceButton } from "./components/EntranceButton" import { Integration } from "./components/Integrations" @@ -14,6 +18,9 @@ import { ShowCase } from "./components/Showcase" async function Home() { const { t, i18n } = await useTranslation("index") + const queryClient = getQueryClient() + await prefetchGetShowcase(queryClient) + const dehydratedState = dehydrate(queryClient) const EntranceButton = memo(function Button() { return ( @@ -109,233 +116,237 @@ async function Home() { ] return ( -
-
-

- {features.map((feature) => ( - +
+
+

+ {features.map((feature) => ( + + {t(feature.title)} + {t(".")} + + ))} +

+

+ + xLog is the best{" "} + + on-chain + {" "} + and{" "} + + open-source + {" "} + blogging community for everyone. + +

+
+ +

-

- - xLog is the best{" "} + + {t("Look at others'")} + + +

+
+ {t("Explore the xLog way")} - on-chain - {" "} - and{" "} - - open-source - {" "} - blogging community for everyone. - - -
- - + href="#features" + className="cursor-pointer inline-block icon-[mingcute--down-line] text-3xl" + > +
-
- {t("Explore the xLog way")} - -
-
-
-
- {features.map((feature, index) => ( -
-
-
-
- {index + 1} -
-

- {t(feature.title)} -

-

- {t(`features.${feature.title}.subtitle`)} -

-

- - . - - ), - }} - ns="index" - /> -

-
-
    - {feature.subfeatures.map((item) => ( -
  • +
    + {features.map((feature, index) => ( +
    +
    +
    +
    - {item.screenshot?.src && ( -
    - {item.title} -
    - )} -

    - {item.icon} + {index + 1} +

    +

    + {t(feature.title)} +

    +

    + {t(`features.${feature.title}.subtitle`)} +

    +

    + + . + + ), + }} + ns="index" + /> +

    +
    +
      + {feature.subfeatures.map((item) => ( +
    • + {item.screenshot?.src && ( +
      + {item.title} +
      + )} +

      + {item.icon} + + {t(item.title)} + +

      +

      + , + axfm: ( + + . + + ), + aincentive: ( + + . + + ), + }} + ns="index" + /> +

      +
      • + ))} +
    + {feature.extra && ( +
    +
    + 🤫{" "} - {t(item.title)} + {t(`features.${feature.title}.extra.title`)} -

    -

    - , - axfm: ( - - . - - ), - aincentive: ( - - . - - ), - }} - ns="index" - /> -

    -
    • - ))} -
- {feature.extra && ( -
-
- 🤫{" "} - +
+ {t(`features.${feature.title}.extra.description`)} +
+ - {t(`features.${feature.title}.extra.title`)} - + {t(`features.${feature.title}.extra.button`)} +
-
{t(`features.${feature.title}.extra.description`)}
- - {t(`features.${feature.title}.extra.button`)} - -
- )} + )} +
+ ))} +
+
+
+ {t("Showcase")} +
+
+

+ {t( + "Discover these awesome teams and creators on xLog (sorted by update time)", + )} +

+
- ))} -
-
-
- {t("Showcase")}
-
-

- {t( - "Discover these awesome teams and creators on xLog (sorted by update time)", - )} -

- +
+
+ {t("Integration")} +
+
+

+ {t( + "xLog's open design allows it to integrate with many other open protocols and applications without friction.", + )} +

+
    + +
  • + +
    • +
+
-
-
- {t("Integration")} -
-
-

- {t( - "xLog's open design allows it to integrate with many other open protocols and applications without friction.", - )} -

-
    - -
  • - -
    • -
+
+
+
+
-
-
- -
- -
-
+ ) } diff --git a/src/components/common/CharacterFloatCard.tsx b/src/components/common/CharacterFloatCard.tsx index 1d2fe6b3..e57e5aa9 100644 --- a/src/components/common/CharacterFloatCard.tsx +++ b/src/components/common/CharacterFloatCard.tsx @@ -1,3 +1,5 @@ +"use client" + import { useState } from "react" import { diff --git a/src/components/ui/Mermaid.tsx b/src/components/ui/Mermaid.tsx index 6ec8120c..2259ecb6 100644 --- a/src/components/ui/Mermaid.tsx +++ b/src/components/ui/Mermaid.tsx @@ -1,3 +1,5 @@ +"use client" + import { nanoid } from "nanoid" import { FC, memo, useEffect, useState } from "react" diff --git a/src/lib/query-client.ts b/src/lib/query-client.ts new file mode 100644 index 00000000..a4a512ac --- /dev/null +++ b/src/lib/query-client.ts @@ -0,0 +1,6 @@ +import { cache } from "react" + +import { QueryClient } from "@tanstack/react-query" + +const getQueryClient = cache(() => new QueryClient()) +export default getQueryClient diff --git a/src/queries/home.ts b/src/queries/home.ts index 041ac416..480ff5fb 100644 --- a/src/queries/home.ts +++ b/src/queries/home.ts @@ -1,3 +1,5 @@ +"use client" + import { useInfiniteQuery, useQuery } from "@tanstack/react-query" import * as homeModel from "~/models/home.model" diff --git a/src/queries/page.ts b/src/queries/page.ts index 0e54db32..4d9c4910 100644 --- a/src/queries/page.ts +++ b/src/queries/page.ts @@ -1,3 +1,5 @@ +"use client" + import { useAccountState, useIsNoteLiked, diff --git a/src/queries/site.ts b/src/queries/site.ts index d5ba56dd..dc0df206 100644 --- a/src/queries/site.ts +++ b/src/queries/site.ts @@ -1,3 +1,5 @@ +"use client" + import { useAccountState, useFollowCharacter, diff --git a/src/queries/unidata.ts b/src/queries/unidata.ts index d131c9a0..4250f09c 100644 --- a/src/queries/unidata.ts +++ b/src/queries/unidata.ts @@ -1,3 +1,5 @@ +"use client" + import { useEffect, useState } from "react" import type Unidata from "unidata.js" import { useAccount } from "wagmi"