commit 7eb8fc8684e2ef1ab3702d24b9cea2bdd12eaab1
parent 69f63d5e9a7abfebfc04790e41eae9a604d486b3
Author: Daniel D’Aquino <daniel@daquino.me>
Date: Tue, 31 Oct 2023 04:53:17 +0000
Add i18n routes to static export generation
Signed-off-by: Daniel D’Aquino <daniel@daquino.me>
Signed-off-by: William Casarin <jb55@jb55.com>
Diffstat:
7 files changed, 130 insertions(+), 66 deletions(-)
diff --git a/content/compiled-locales/en.json b/content/compiled-locales/en.json
@@ -1,16 +1,4 @@
{
- "404.go_home": [
- {
- "type": 0,
- "value": "Go home"
- }
- ],
- "404.headline": [
- {
- "type": 0,
- "value": "Page not found"
- }
- ],
"banned_in_china.headline": [
{
"type": 0,
diff --git a/content/locales/en.json b/content/locales/en.json
@@ -1,10 +1,4 @@
{
- "404.go_home": {
- "string": "Go home"
- },
- "404.headline": {
- "string": "Page not found"
- },
"banned_in_china.headline": {
"string": "Banned in China"
},
diff --git a/src/components/pages/home.tsx b/src/components/pages/home.tsx
@@ -0,0 +1,46 @@
+import Image from 'next/image'
+import { Inter } from 'next/font/google'
+import { Hero } from '@/components/sections/Hero'
+import Head from "next/head";
+import { useIntl } from 'react-intl'
+import { BannedInChina } from '@/components/sections/BannedInChina'
+import { DamusOnMedia } from '@/components/sections/DamusOnMedia';
+import { MeetTheTeam } from '@/components/sections/MeetTheTeam';
+import { DamusAroundTheWorld } from '@/components/sections/DamusAroundTheWorld';
+import { Footer } from '@/components/sections/Footer';
+import { DamusLiveEvents } from '@/components/sections/DamusLiveEvents';
+import { Contribute } from '@/components/sections/Contribute';
+import { FinalCTA } from '@/components/sections/FinalCTA';
+import { Benefits } from '@/components/sections/Benefits';
+
+const inter = Inter({ subsets: ['latin'] })
+
+export function Home() {
+ const intl = useIntl()
+
+ return (<>
+ <Head>
+ <title>Damus</title>
+ <meta name="description" content={ intl.formatMessage({ id: "home.meta_description", defaultMessage: "Damus is a new social network that you control. Available now on iOS, iPad and macOS (M1/M2)" }) }/>
+ <meta name="apple-itunes-app" content="app-id=m1628663131"/>
+ </Head>
+ <main style={{ scrollBehavior: "smooth" }}>
+ <Hero/>
+ <Benefits/>
+ <BannedInChina/>
+ <div id="events">
+ <DamusLiveEvents/>
+ </div>
+ <DamusOnMedia/>
+ <div id="team">
+ <MeetTheTeam/>
+ </div>
+ <div id="contribute">
+ <Contribute/>
+ </div>
+ <DamusAroundTheWorld/>
+ <FinalCTA/>
+ <Footer/>
+ </main>
+ </>)
+}
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -7,12 +7,10 @@ import { FormattedMessage } from 'react-intl'
import { ArrowUpRight } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import Link from 'next/link'
-import { useIntl } from 'react-intl'
const inter = Inter({ subsets: ['latin'] })
export default function NotFound() {
- const intl = useIntl()
return (
<main>
<div className="bg-black overflow-hidden relative min-h-screen">
@@ -24,12 +22,12 @@ export default function NotFound() {
<div className="flex flex-col lg:flex-row items-center justify-center mt-32 lg:mt-16">
<div className="">
<h1 className="my-6 text-5xl md:text-7xl text-center text-transparent bg-clip-text bg-gradient-to-r from-white from-40% to-100% to-[#2D175B] pb-6 font-semibold whitespace-pre-line max-w-2xl">
- <FormattedMessage defaultMessage="Page not found" id="404.headline" />
+ Page not found
</h1>
<div className="mt-6 flex justify-center items-center space-x-6">
<Link href="/">
<Button variant="default">
- {intl.formatMessage({ id: "404.go_home", defaultMessage: "Go home" })}
+ Go home
</Button>
</Link>
</div>
diff --git a/src/pages/[locale].tsx b/src/pages/[locale].tsx
@@ -0,0 +1,68 @@
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { useRouter } from 'next/router';
+import Image from 'next/image'
+import { Inter } from 'next/font/google'
+import { Hero } from '@/components/sections/Hero'
+import Head from "next/head";
+import { IntlProvider, useIntl } from 'react-intl'
+import { BannedInChina } from '@/components/sections/BannedInChina'
+import { DamusOnMedia } from '@/components/sections/DamusOnMedia';
+import { MeetTheTeam } from '@/components/sections/MeetTheTeam';
+import { DamusAroundTheWorld } from '@/components/sections/DamusAroundTheWorld';
+import { Footer } from '@/components/sections/Footer';
+import { DamusLiveEvents } from '@/components/sections/DamusLiveEvents';
+import { Contribute } from '@/components/sections/Contribute';
+import { FinalCTA } from '@/components/sections/FinalCTA';
+import { Benefits } from '@/components/sections/Benefits';
+import { Home } from '@/components/pages/home';
+import { useMemo } from 'react';
+import English from "../../content/compiled-locales/en.json";
+import Japanese from "../../content/compiled-locales/ja.json";
+
+
+export default function LocaleHome({ locale }: { locale: string }) {
+ const [shortLocale] = locale ? locale.split("-") : ["en"];
+
+ const messages = useMemo(() => {
+ switch (shortLocale) {
+ case "en":
+ return English;
+ case "ja":
+ return Japanese;
+ default:
+ return English;
+ }
+ }, [shortLocale]);
+
+ return (<>
+ <IntlProvider
+ locale={shortLocale}
+ messages={messages}
+ onError={() => null}>
+ <Home/>
+ </IntlProvider>
+ </>)
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ // Define your locales
+ const locales = ['en-US', 'ja-JP'];
+
+ // Generate paths
+ const paths = locales.map((locale) => ({
+ params: { locale },
+ }));
+
+ return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+ const { params } = context;
+ const locale = params?.locale;
+
+ return {
+ props: {
+ locale,
+ }
+ };
+};+
\ No newline at end of file
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,25 +7,10 @@ import { useMemo } from 'react';
import { IntlProvider } from 'react-intl';
export default function App({ Component, pageProps }: AppProps) {
- const { locale } = useRouter();
- const [shortLocale] = locale ? locale.split("-") : ["en"];
-
- const messages = useMemo(() => {
- switch (shortLocale) {
- case "en":
- return English;
- case "ja":
- return Japanese;
- default:
- return English;
- }
- }, [shortLocale]);
-
return (
<IntlProvider
- locale={shortLocale}
- messages={messages}
- onError={() => null}>
+ locale={"en"}
+ messages={English}>
<Component {...pageProps} />
</IntlProvider>
)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,7 +2,9 @@ import Image from 'next/image'
import { Inter } from 'next/font/google'
import { Hero } from '@/components/sections/Hero'
import Head from "next/head";
-import { useIntl } from 'react-intl'
+import { IntlProvider, useIntl } from 'react-intl'
+import English from "../../content/compiled-locales/en.json";
+import Japanese from "../../content/compiled-locales/ja.json";
import { BannedInChina } from '@/components/sections/BannedInChina'
import { DamusOnMedia } from '@/components/sections/DamusOnMedia';
import { MeetTheTeam } from '@/components/sections/MeetTheTeam';
@@ -12,35 +14,17 @@ import { DamusLiveEvents } from '@/components/sections/DamusLiveEvents';
import { Contribute } from '@/components/sections/Contribute';
import { FinalCTA } from '@/components/sections/FinalCTA';
import { Benefits } from '@/components/sections/Benefits';
+import { Home } from '@/components/pages/home';
const inter = Inter({ subsets: ['latin'] })
-export default function Home() {
- const intl = useIntl()
-
+export default function HomePage() {
return (<>
- <Head>
- <title>Damus</title>
- <meta name="description" content={ intl.formatMessage({ id: "home.meta_description", defaultMessage: "Damus is a new social network that you control. Available now on iOS, iPad and macOS (M1/M2)" }) }/>
- <meta name="apple-itunes-app" content="app-id=m1628663131"/>
- </Head>
- <main style={{ scrollBehavior: "smooth" }}>
- <Hero/>
- <Benefits/>
- <BannedInChina/>
- <div id="events">
- <DamusLiveEvents/>
- </div>
- <DamusOnMedia/>
- <div id="team">
- <MeetTheTeam/>
- </div>
- <div id="contribute">
- <Contribute/>
- </div>
- <DamusAroundTheWorld/>
- <FinalCTA/>
- <Footer/>
- </main>
+ <IntlProvider
+ locale={"en"}
+ messages={English}
+ onError={() => null}>
+ <Home/>
+ </IntlProvider>
</>)
}
