F-Droid badge & app links

components/AppCard.tsx

@@ -1,5 +1,8 @@
 import Image from "next/legacy/image"
-import { FormattedMessage } from "react-intl"
+import { FormattedMessage, useIntl } from "react-intl"
+
+import FDroidLogo from "../public/badges/f-droid-logo.svg"
+import GooglePlayLogo from "../public/badges/google-play-logo.svg"
 
 export type AppCardProps = {
   name: React.ReactNode
@@ -14,7 +17,12 @@ export type AppCardProps = {
  * Renders a card with app data.
  * Layout (width, height, positioning) can be set from the parent.
  */
-export const AppCard = ({ name, icon, url, paid, category, categoryLabel }) => {
+export const AppCard = ({ name, icon, url, fdroid, gplay, paid, category, categoryLabel }) => {
+  const intl = useIntl()
+  if (!url && (fdroid || gplay)) {
+    if (gplay) url = `https://play.google.com/store/apps/details?id=${gplay}`;
+    if (fdroid) url = `https://f-droid.org/${intl.locale}/packages/${fdroid}`; // default to the better one
+  }
   return (
     <a
       key={`${url} ${name}`}
@@ -39,6 +47,19 @@ export const AppCard = ({ name, icon, url, paid, category, categoryLabel }) => {
           <span dir="ltr">{name}</span>
         </h3>
       </div>
+      <div className="flex flex-col float-right">
+        {/*what about just turning the opacity down if it's no available there?*/}
+        {fdroid ?
+          <Image
+            onClick={() => window.open(`https://f-droid.org/${intl.locale}/packages/${fdroid}`)}
+            src={FDroidLogo} alt="Logo for F-Droid" width={25} height={25} />
+          : undefined}
+        {gplay ?
+          <Image
+            onClick={() => window.open(`https://play.google.com/store/apps/details?id=${gplay}`)}
+            src={GooglePlayLogo} alt="Logo for Google Play" width={25} height={25} />
+          : undefined}
+      </div>
     </a>
   )
-}
+}

components/AppHero.tsx

@@ -1,5 +1,5 @@
 import Image, { ImageProps } from "next/legacy/image"
-import { FormattedMessage } from "react-intl"
+import { FormattedMessage, useIntl } from "react-intl"
 
 import downloadOnGooglePlay from "../public/badges/google-play.svg"
 import downloadOnAppStore from "../public/badges/app-store.svg"
@@ -15,6 +15,7 @@ export const AppHero = ({
   backgroundImage,
   backgroundImagePosition = "center center",
 }: AppHeroProps) => {
+  const intl = useIntl()
   return (
     <section className="full-width-bg relative -mb-footer-offset pb-footer-offset pt-32">
       <div className="absolute inset-0 -z-10">
@@ -36,6 +37,12 @@ export const AppHero = ({
 
         <div className="grid-cols-12 justify-center gap-gutter md:grid">
           <div className="col-span-6 col-start-4 mx-auto grid max-w-xs grid-cols-2 justify-center gap-gutter md:mx-0 md:max-w-none md:justify-start xl:col-span-4 xl:col-start-5">
+            <a href={`https://f-droid.org/${intl.locale}/packages/org.joinmastodon.android`}>
+              <img
+                src={`/badges/f-droid-${intl.locale}.svg`}
+                alt="Get it on F-Droid"
+              />
+            </a>
             <a href="https://apps.apple.com/us/app/mastodon-for-iphone/id1571998974">
               <Image
                 src={downloadOnAppStore}

components/AppsGrid.tsx

@@ -29,14 +29,12 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
   /** normalizing the apps dictionary as an array */
   const allApps = Object.entries(apps)
     .map(([category, apps]) =>
-      apps.map(({ name, icon, url, paid, released_on, hidden_from_all }) => ({
-        name,
-        icon,
-        url,
-        paid: paid ?? false,
-        hidden_from_all: hidden_from_all ?? false,
-        released_on: new Date(released_on) ?? null,
+      apps.map(x => ({
+        ...x,
         category,
+        paid: x.paid ?? false,
+        hidden_from_all: x.hidden_from_all ?? false,
+        released_on: new Date(x.released_on) ?? null,
         categoryLabel: categories.find((c) => c.key === category)["label"],
       }))
     )

data/apps.ts

@@ -11,7 +11,6 @@ import thedesk from "../public/apps/thedesk.png"
 import imast from "../public/apps/imast_icon.png"
 import sengi from "../public/apps/sengi.png"
 import sora from "../public/apps/sora.png"
-import tooot from "../public/apps/tooot.png"
 import bitlbee from "../public/apps/bitlbee.png"
 import icecubes from "../public/apps/icecubes.png"
 import elk from "../public/apps/elk.png"
@@ -55,6 +54,9 @@ import bubble from "../public/apps/bubble.png"
 import odous from "../public/apps/odous.png"
 import dowstodon from "../public/apps/dowstodon.png"
 import fread from "../public/apps/fread.png"
+import raccoon from "../public/apps/raccoonforfriendica.png"
+import husky from "../public/apps/husky.png"
+import shitter from "../public/apps/shitter.png"
 
 import type { StaticImageData } from "next/legacy/image"
 
@@ -66,7 +68,11 @@ export type appsList = {
     /** app's icon or logo */
     icon: StaticImageData
     /** link to the app on its website or respective app store */
-    url: string
+    url?: string
+    /** package name on fdroid */
+    fdroid?: string
+    /** package name on google play */
+    gplay?: string
     /** the date the app was first released on */
     released_on?: string
     /** whether the app requires a fee to access. defaults to false */
@@ -83,83 +89,95 @@ export const apps: appsList = {
       released_on: "Nov 23, 2023",
       name: "Rodent",
       icon: rodent,
-      url: "https://play.google.com/store/apps/details?id=social.rodent",
+      gplay: "social.rodent",
       paid: false,
     },
     {
       released_on: "May 21, 2023",
       name: "Focus",
       icon: focus,
-      url: "https://play.google.com/store/apps/details?id=allen.town.focus.mastodon",
+      gplay: "allen.town.focus.mastodon",
+      fdroid: "allen.town.focus.mastodon",
       paid: false,
     },
     {
       released_on: "Mar 15, 2017",
       name: "Tusky",
       icon: tusky,
-      url: "https://play.google.com/store/apps/details?id=com.keylesspalace.tusky",
+      gplay: "com.keylesspalace.tusky",
+      fdroid: "com.keylesspalace.tusky",
     },
     {
       released_on: "Apr 23, 2017",
       name: "Subway Tooter",
       icon: subwayTooter,
-      url: "https://play.google.com/store/apps/details?id=jp.juggler.subwaytooter",
+      gplay: "jp.juggler.subwaytooter",
     },
     {
       released_on: "May 18, 2019",
       name: "Fedilab",
       icon: fedilab,
-      url: "https://play.google.com/store/apps/details?id=app.fedilab.android",
+      gplay: "app.fedilab.android",
+      fdroid: "fr.gouv.etalab.mastodon", // ¯\_(ツ)_/¯
       paid: false,
     },
-    {
-      released_on: "Apr 16, 2021",
-      name: "tooot",
-      icon: tooot,
-      url: "https://play.google.com/store/apps/details?id=com.xmflsct.app.tooot",
-      hidden_from_all: true,
-    },
     {
       released_on: "Jan 26, 2023",
       name: "Trunks",
       icon: trunks,
-      url: "https://play.google.com/store/apps/details?id=com.decad3nce.trunks",
+      gplay: "com.decad3nce.trunks",
       paid: false,
       hidden_from_all: true,
     },
     {
       released_on: "Dec 6, 2022",
       name: "Moshidon",
       icon: moshidon,
-      url: "https://play.google.com/store/apps/details?id=org.joinmastodon.android.moshinda",
+      gplay: "org.joinmastodon.android.moshinda",
+      fdroid: "org.joinmastodon.android.moshinda",
       paid: false,
     },
     {
       released_on: "Jan 31, 2023",
       name: "Buffer",
       icon: buffer,
-      url: "https://play.google.com/store/apps/details?id=org.buffer.android",
+      gplay: "org.buffer.android",
       hidden_from_all: true,
     },
     {
       released_on: "Feb 21, 2023",
       name: "ZonePane",
       icon: zonepane,
-      url: "https://play.google.com/store/apps/details?id=com.zonepane",
+      gplay: "com.zonepane",
       paid: false,
     },
     {
       released_on: "Sep 6, 2023",
       name: "Pachli",
       icon: pachli,
-      url: "https://play.google.com/store/apps/details?id=app.pachli",
+      gplay: "app.pachli",
+      fdroid: "app.pachli",
       paid: false,
     },
     {
       released_on: "Aug 1, 2024",
       name: "Fread",
       icon: fread,
-      url: "https://play.google.com/store/apps/details?id=com.zhangke.fread",
+      gplay: "com.zhangke.fread",
+      paid: false,
+    },
+    {
+      released_on: "Apr 17, 2024",
+      name: "Husky",
+      icon: husky,
+      fdroid: "su.xash.husky",
+      paid: false,
+    },
+    {
+      released_on: "Nov 13, 2024",
+      name: "Raccoon",
+      icon: raccoon,
+      fdroid: "com.livefast.eattrash.raccoonforfriendica",
       paid: false,
     },
   ],
@@ -181,13 +199,6 @@ export const apps: appsList = {
       icon: imast,
       url: "https://apps.apple.com/app/imast/id1229461703",
     },
-    {
-      released_on: "Apr 16, 2021",
-      name: "tooot",
-      icon: tooot,
-      url: "https://apps.apple.com/app/tooot/id1549772269",
-      hidden_from_all: true,
-    },
     {
       released_on: "Jan 19, 2023",
       name: "Ice Cubes",

pages/apps.tsx

@@ -1,5 +1,6 @@
 import { sortBy as _sortBy } from "lodash"
 
+import downloadOnFDroid from "../public/badges/f-droid.json"
 import downloadOnGooglePlay from "../public/badges/google-play.svg"
 import downloadOnAppStore from "../public/badges/app-store.svg"
 
@@ -56,6 +57,12 @@ const AppsPage = () => {
           </h2>
 
           <div className="grid grid-cols-2 justify-center gap-gutter md:justify-start">
+            <a href={`https://f-droid.org/${intl.locale}/packages/org.joinmastodon.android`}>
+              <img
+                src={`/badges/f-droid-${intl.locale}.svg`}
+                alt="Get it on F-Droid"
+              />
+            </a>
             <a href="https://apps.apple.com/us/app/mastodon-for-iphone/id1571998974">
               <Image
                 src={downloadOnAppStore}