diff --git a/frontend/next.config.js b/frontend/next.config.js index 873c5ef65e..26cfc3135a 100644 --- 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 new file mode 100644 index 0000000000..1dee618feb --- /dev/null +++ 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 +}) { + const { t } = useTranslation() + + return ( + <> + + + + + + + ) +} + +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 index dd60b7b4c7..e5dee89548 100644 --- 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.", "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...<1>If nothing happens, maybe your system does not support flatpak+https urls.<2>In that case you can:<3><0>Download the <2>.flatpakref file<1>Then run it from your file manager<4><0>Instructions to install Flatpak" } } diff --git a/frontend/src/components/application/InstallButton.tsx b/frontend/src/components/application/InstallButton.tsx index a9601d6b06..6ba8a91682 100644 --- 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 (
+}) { + const { t } = useTranslation() + + return ( +
+
+
+

+ {t("download.install-x", { x: app.name })} +

+
+ {app.icon && ( +
+ +
+ )} +
+ +
+ Opening "{app.name}" in your software manager... +
+
+ If nothing happens, maybe your system does not support{" "} + flatpak+https urls. +
+
In that case you can:
+
    +
  1. + Download the{" "} + + .flatpakref file + +
    2. +
  2. Then run it from your file manager
    3. +
+
+ Instructions to install Flatpak +
+ +
+
+
+
+
+ ) +} diff --git a/frontend/src/components/application/installFallback.stories.tsx b/frontend/src/components/application/installFallback.stories.tsx new file mode 100644 index 0000000000..1732020cce --- /dev/null +++ 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 + +export default meta + +type Story = StoryObj + +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", + }, + }, +}