WIP

frontend/.env.development

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_API_BASE_URI=http://localhost:8000
-NEXT_PUBLIC_SITE_BASE_URI=http://localhost:3000
-NEXT_PUBLIC_MATOMO_WEBSITE_ID=38
+NEXT_PUBLIC_API_BASE_URI=https://flathub.org/api/v2
+NEXT_PUBLIC_SITE_BASE_URI=https://flathub.org
+NEXT_PUBLIC_MATOMO_WEBSITE_ID=12
 NEXT_PUBLIC_SITEMAP_SIZE=3000

frontend/___middleware.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server"
+import acceptLanguage from "accept-language"
+import { languages } from "src/localize"
+import { cookieName, fallbackLng } from "app/[locale]/i18n/settings"
+
+acceptLanguage.languages(languages)
+
+export const config = {
+  // matcher: '/:lng*'
+  matcher: [
+    "/((?!api|_next/static|_next/image|assets|favicon.ico|sw.js|site.webmanifest).*)",
+  ],
+}
+
+export function middleware(req) {
+  let lng
+  if (req.cookies.has(cookieName))
+    lng = acceptLanguage.get(req.cookies.get(cookieName).value)
+  if (!lng) lng = acceptLanguage.get(req.headers.get("Accept-Language"))
+  if (!lng) lng = fallbackLng
+
+  // Redirect if lng in path is not supported
+  if (
+    !languages.some((loc) => req.nextUrl.pathname.startsWith(`/${loc}`)) &&
+    !req.nextUrl.pathname.startsWith("/_next")
+  ) {
+    console.log(req.nextUrl)
+    return NextResponse.redirect(
+      new URL(`/${lng}${req.nextUrl.pathname}`, req.url),
+    )
+  }
+
+  if (req.headers.has("referer")) {
+    const refererUrl = new URL(req.headers.get("referer"))
+    const lngInReferer = languages.find((l) =>
+      refererUrl.pathname.startsWith(`/${l}`),
+    )
+    const response = NextResponse.next()
+    if (lngInReferer) response.cookies.set(cookieName, lngInReferer)
+    return response
+  }
+
+  return NextResponse.next()
+}

frontend/app/(sitemaps)/app-sitemap.xml/route.ts

@@ -0,0 +1,20 @@
+// app/server-sitemap.xml/route.ts
+import { getServerSideSitemap } from "next-sitemap"
+import { fetchAppstreamList } from "src/fetchers"
+import { languages } from "src/localize"
+
+export async function GET(request: Request) {
+  const appstreamList = await fetchAppstreamList()
+
+  return getServerSideSitemap(
+    appstreamList.map((appId, i) => ({
+      loc: `${process.env.NEXT_PUBLIC_SITE_BASE_URI}/apps/${appId}`,
+      // todo - add more fields here, maybe get lastmod from summary
+      lastmod: new Date().toISOString(),
+      alternateRefs: languages.map((lang) => ({
+        href: `${process.env.NEXT_PUBLIC_SITE_BASE_URI}/${lang}/apps/${appId}`,
+        hreflang: lang,
+      })),
+    })),
+  )
+}

frontend/app/(sitemaps)/server-sitemap-index.xml/route.ts

@@ -0,0 +1,8 @@
+// app/server-sitemap-index.xml/route.ts
+import { getServerSideSitemapIndex } from "next-sitemap"
+
+export async function GET(request: Request) {
+  return getServerSideSitemapIndex([
+    `${process.env.NEXT_PUBLIC_SITE_BASE_URI}/app-sitemap.xml`,
+  ])
+}

frontend/app/[locale]/ClientLayout.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import {
+  createInstance,
+  MatomoProvider,
+} from "@mitresthen/matomo-tracker-react"
+import { DefaultSeo } from "next-seo"
+import { ThemeProvider } from "next-themes"
+
+import "react-toastify/dist/ReactToastify.css"
+import { ToastContainer } from "react-toastify"
+
+import "../../styles/main.scss"
+
+import { Inter } from "next/font/google"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MotionConfig } from "framer-motion"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
+
+import cardImage from "/public/img/card.webp"
+import { ReactNode, useState } from "react"
+import { setDefaultOptions } from "date-fns"
+import axios from "axios"
+import { dir } from "i18next"
+import { useTranslation } from "./i18n/client"
+import { bcpToPosixLocale, getLocale, languages } from "src/localize"
+import { UserInfoProvider } from "src/context/user-info"
+import { IS_PRODUCTION } from "src/env"
+import Main from "./main"
+
+const inter = Inter({
+  subsets: ["latin"],
+  fallback: ["sans-serif"],
+})
+
+export default function ClientLayout({
+  children,
+  locale,
+}: {
+  children: ReactNode
+  locale: string
+}) {
+  const { t } = useTranslation(locale)
+
+  setDefaultOptions({ locale: getLocale(locale) })
+
+  const [queryClient] = useState(() => new QueryClient({}))
+
+  axios.interceptors.request.use((config) => {
+    return {
+      ...config,
+      baseURL: process.env.NEXT_PUBLIC_API_BASE_URI,
+    }
+  })
+
+  const instance = createInstance({
+    urlBase: process.env.NEXT_PUBLIC_SITE_BASE_URI || "",
+    siteId: Number(process.env.NEXT_PUBLIC_MATOMO_WEBSITE_ID) || 38,
+    trackerUrl: "https://webstats.gnome.org/matomo.php",
+    srcUrl: "https://webstats.gnome.org/matomo.js",
+    configurations: {
+      disableCookies: true,
+    },
+  })
+
+  return (
+    <MatomoProvider value={instance}>
+      <ThemeProvider attribute="class">
+        <DefaultSeo
+          dangerouslySetAllPagesToNoIndex={!IS_PRODUCTION}
+          titleTemplate="%s | Flathub"
+          defaultTitle={t("flathub-apps-for-linux")}
+          description={t("flathub-description")}
+          languageAlternates={languages
+            .filter((lang) => lang !== locale)
+            .map((lang) => ({
+              hrefLang: lang,
+              href: `${process.env.NEXT_PUBLIC_SITE_BASE_URI}/${lang}`,
+            }))}
+          twitter={{
+            cardType: "summary_large_image",
+          }}
+          openGraph={{
+            type: "website",
+            locale: bcpToPosixLocale(locale),
+            url: process.env.NEXT_PUBLIC_SITE_BASE_URI,
+            siteName: t("flathub-apps-for-linux"),
+            images: [
+              {
+                url: cardImage.src,
+              },
+            ],
+          }}
+        />
+        <MotionConfig reducedMotion="user">
+          <QueryClientProvider client={queryClient}>
+            <UserInfoProvider>
+              <style jsx global>{`
+                html {
+                  font-family: ${inter.style.fontFamily};
+                }
+              `}</style>
+              <Main lng={locale}>{children}</Main>
+            </UserInfoProvider>
+            <ToastContainer
+              position={dir(locale) === "rtl" ? "bottom-left" : "bottom-right"}
+              rtl={dir(locale) === "rtl"}
+            />
+            <ReactQueryDevtools initialIsOpen={false} />
+          </QueryClientProvider>
+        </MotionConfig>
+      </ThemeProvider>
+    </MatomoProvider>
+  )
+}

frontend/app/[locale]/about2/page.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import Link from "next/link"
+import { useState } from "react"
+import { useTranslation } from "../i18n/client"
+
+export default function Page({ params: { locale } }) {
+  const { t } = useTranslation(locale)
+  const [counter, setCounter] = useState(0)
+  return (
+    <>
+      <h1>{t("title")}</h1>
+      <p>{t("counter", { count: counter })}</p>
+      <div>
+        <button onClick={() => setCounter(Math.max(0, counter - 1))}>-</button>
+        <button onClick={() => setCounter(Math.min(10, counter + 1))}>+</button>
+      </div>
+      <Link href={`/${locale}`}>
+        <button type="button">{t("new")}</button>
+      </Link>
+    </>
+  )
+}