flathub-infra · razzeee · Jul 18, 2025 · Jul 18, 2025 · Jul 18, 2025
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -110,6 +110,12 @@ const nextConfig = (phase) => ({
         destination: "/apps/search?q=:q",
         permanent: true,
       },
+      {
+        source: "/apps/:path*/flatpakhttps",
+        destination:
+          "flatpak+https://dl.flathub.org/repo/appstream/:path*.flatpakref",
+        permanent: false,
+      },
       {
         source: "/apps/details/:path*",
         destination: "/apps/:path*",

diff --git a/frontend/pages/apps/[appId]/install.tsx b/frontend/pages/apps/[appId]/install.tsx
@@ -0,0 +1,56 @@
+import { GetStaticPaths, GetStaticProps } from "next"
+import { serverSideTranslations } from "next-i18next/serverSideTranslations"
+
+import { NextSeo } from "next-seo"
+import { useTranslation } from "next-i18next"
+import Head from "next/head"
+import { fetchAppstream } from "src/fetchers"
+import { Appstream } from "src/types/Appstream"
+import InstallFallback from "src/components/application/InstallFallback"
+
+export default function Install({
+  app,
+}: {
+  app: Pick<Appstream, "id" | "name" | "icon">
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <NextSeo title={t("download.install-x", { x: app.name })} noindex />
+      <Head>
+        <meta
+          httpEquiv="refresh"
+          content={`0; url=/apps/${app.id}/flatpakhttps`}
+        />
+      </Head>
+      <InstallFallback app={app} />
+    </>
+  )
+}
+
+export const getStaticProps: GetStaticProps = async ({
+  locale,
+  params: { appId: appId },
+}: {
+  locale: string
+  defaultLocale: string
+  params: { appId: string }
+}) => {
+  const app = await fetchAppstream(appId as string, locale)
+
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ["common"])),
+      app,
+    },
+    revalidate: 900,
+  }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: "blocking",
+  }
+}
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -99,8 +99,8 @@
   "rss-description": "Subscribe to RSS feeds from Flathub",
   "rss-apps": "Do you need an RSS app? Find excellent ones on <2>Flathub</2>.",
   "apps-by-developer": "Apps by {{developer}}",
-  "apps-by-tag": "Apps by tag '{{tag}}'",
-  "search-for-query": "Search for '{{query}}'",
+  "apps-by-tag": "Apps by tag “{{tag}}”",
+  "search-for-query": "Search for “{{query}}”",
   "moderation-pending-reviews": "Pending Reviews",
   "moderation-appstream-changes": "Appstream Changes",
   "moderation-appstream": "Appstream",
@@ -131,7 +131,7 @@
   "delete-account": "Delete Account",
   "delete-account-prompt": "Delete your account?",
   "delete-account-entry": "I wish to delete my account",
-  "entry-confirmation-prompt": "Enter \"{{text}}\" to continue.",
+  "entry-confirmation-prompt": "Enter “{{text}}” to continue.",
   "login-with-provider": "Log in with {{provider}}",
   "by": "by {{developer}}",
   "install": "Install",
@@ -364,7 +364,7 @@
   "revoked": "Revoked",
   "revoke": "Revoke",
   "revoke-token": "Revoke Token",
-  "revoke-token-description": "Are you sure you want to revoke the token '{{name}}'?",
+  "revoke-token-description": "Are you sure you want to revoke the token “{{name}}”?",
   "repo": "Repo",
   "show-expired-tokens": "Show expired tokens",
   "category-distribution": "Category Distribution",
@@ -659,5 +659,9 @@
     "zoom-out": "Zoom Out",
     "show-screenshot-fullscreen": "Show screenshot fullscreen",
     "screenshot": "Screenshot"
+  },
+  "download": {
+    "install-x": "Install “{{x}}”",
+    "fallback-instructions": "<0>Opening “{{name}}” in your software manager...</0><1>If nothing happens, maybe your system does not support <i>flatpak+https</i> urls.</1><2>In that case you can:</2><3><0>Download the <2>.flatpakref file</2></0><1>Then run it from your file manager</1></3><4><0>Instructions to install Flatpak</0></4>"
   }
 }
diff --git a/frontend/src/components/application/InstallButton.tsx b/frontend/src/components/application/InstallButton.tsx
@@ -22,7 +22,7 @@ export default function InstallButton({ appId }: { appId: string }) {
   const installClicked = (e) => {
     e.preventDefault()
     trackEvent({ category: "App", action: "Install", name: appId })
-    push(`https://dl.flathub.org/repo/appstream/${appId}.flatpakref`)
+    push(`${appId}/install`)
   }
 
   const flatpakInstallCopied = () => {
@@ -44,7 +44,7 @@ export default function InstallButton({ appId }: { appId: string }) {
   return (
     <div className="inline-flex w-52 basis-1/2 rounded-md shadow-xs sm:w-32 md:w-40">
       <Link
-        href={`https://dl.flathub.org/repo/appstream/${appId}.flatpakref`}
+        href={`apps/${appId}/install`}
         onClick={installClicked}
         className={clsx(
           "hover:opacity-75 active:opacity-50",

diff --git a/frontend/src/components/application/InstallFallback.tsx b/frontend/src/components/application/InstallFallback.tsx
@@ -0,0 +1,65 @@
+import { Trans, useTranslation } from "next-i18next"
+import { Appstream } from "src/types/Appstream"
+import Link from "next/link"
+import LogoImage from "src/components/LogoImage"
+
+export default function InstallFallback({
+  app,
+}: {
+  app: Pick<Appstream, "id" | "name" | "icon">
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex max-w-full flex-col">
+      <section className={`flex flex-col px-[5%] md:px-[20%] 2xl:px-[30%]`}>
+        <div>
+          <h1 className="mt-8 mb-6 text-4xl font-extrabold">
+            {t("download.install-x", { x: app.name })}
+          </h1>
+          <div className="flex gap-6">
+            {app.icon && (
+              <div className="relative m-2 flex h-[128px] min-w-[128px] drop-shadow-md">
+                <LogoImage
+                  iconUrl={app.icon}
+                  appName={app.name}
+                  quality={100}
+                  priority
+                />
+              </div>
+            )}
+            <div>
+              <Trans
+                i18nKey={"common:download.fallback-instructions"}
+                values={{ name: app.name }}
+              >
+                <div className="mb-8">
+                  Opening &quot;{app.name}&quot; in your software manager...
+                </div>
+                <div className="mb-4">
+                  If nothing happens, maybe your system does not support{" "}
+                  <i>flatpak+https</i> urls.
+                </div>
+                <div className="mb-2">In that case you can:</div>
+                <ol className="list-decimal list-inside pl-4">
+                  <li>
+                    Download the{" "}
+                    <a
+                      href={`https://dl.flathub.org/repo/appstream/${app.id}.flatpakref`}
+                    >
+                      .flatpakref file
+                    </a>
+                  </li>
+                  <li>Then run it from your file manager</li>
+                </ol>
+                <div className="mt-4">
+                  <Link href={"/setup"}>Instructions to install Flatpak</Link>
+                </div>
+              </Trans>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/frontend/src/components/application/installFallback.stories.tsx b/frontend/src/components/application/installFallback.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/nextjs"
+
+import InstallFallback from "./InstallFallback"
+
+const meta = {
+  component: InstallFallback,
+} satisfies Meta<typeof InstallFallback>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    app: {
+      id: "tv.abc.TestApp",
+      name: "Test App",
+      icon: "https://dl.flathub.org/media/tv/kodi/Kodi/4f8cbfae09dc6c8c55501a5d3f604fbb/icons/128x128/tv.kodi.Kodi.png",
+    },
+  },
+}