Add Retro computing apps section and clients (#388)

* Add Retro computing apps section and clients
* Add category label in AppCard
* Resize retro clients icons
* Add french Retro computing translation
* Fix build
* Add missing key in en and fr

components/AppCard.tsx

@@ -6,13 +6,15 @@ export type AppCardProps = {
   icon: string
   url: URL
   paid: boolean
+  category: string
+  categoryLabel: string
 }
 
 /**
  * Renders a card with app data.
  * Layout (width, height, positioning) can be set from the parent.
  */
-export const AppCard = ({ name, icon, url, paid }) => {
+export const AppCard = ({ name, icon, url, paid, category, categoryLabel }) => {
   return (
     <a
       key={`${url} ${name}`}
@@ -26,7 +28,7 @@ export const AppCard = ({ name, icon, url, paid }) => {
       </div>
       <div className="flex flex-auto flex-col">
         <span className="b4 block text-gray-1">
-          {paid ? (
+          {categoryLabel}, {paid ? (
             <FormattedMessage id="apps.paid" defaultMessage="Paid" />
           ) : (
             <FormattedMessage id="apps.free" defaultMessage="Free" />

components/AppsGrid.tsx

@@ -16,17 +16,29 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
   const intl = useIntl()
   const [activeCategory, setActiveCategory] = useState("all")
 
+  //prettier-ignore
+  const categories = [
+    { key: "all", label: intl.formatMessage({ id: "browse_apps.all", defaultMessage: "All" }) },
+    { key: "android", label: intl.formatMessage({ id: "browse_apps.android", defaultMessage: "Android" }) },
+    { key: "ios", label: intl.formatMessage({ id: "browse_apps.ios", defaultMessage: "iOS" }) },
+    { key: "web", label: intl.formatMessage({ id: "browse_apps.web", defaultMessage: "Web" }) },
+    { key: "sailfish", label: intl.formatMessage({ id: "browse_apps.sailfish", defaultMessage: "SailfishOS" }) },
+    { key: "desktop", label: intl.formatMessage({ id: "browse_apps.desktop", defaultMessage: "Desktop" }) },
+    { key: "retro", label: intl.formatMessage({ id: "browse_apps.retro", defaultMessage: "Retro computing" }) },
+  ]
+
   /** 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,
-        category,
         paid: paid ?? false,
         hidden_from_all: hidden_from_all ?? false,
         released_on: new Date(released_on) ?? null,
+        category,
+        categoryLabel: categories.find(c => c.key === category)["label"]
       }))
     )
     .flat()
@@ -35,6 +47,7 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
   const sortOptions = [
     { value: "date_added", label: intl.formatMessage({ id: "sorting.recently_added", defaultMessage: "Recently Added" }) },
     { value: "paid", label: intl.formatMessage({ id: "sorting.free", defaultMessage: "Free" }) },
+    { value: "category", label: intl.formatMessage({ id: "sorting.category", defaultMessage: "Category" }) },
     { value: "name", label: intl.formatMessage({ id: "sorting.name", defaultMessage: "Alphabetical" }) },
   ]
   const [sortOption, setSortOption] = useState(sortOptions[0].value)
@@ -43,15 +56,6 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
   )
   const sortedAndFilteredApps = _sortBy(filteredApps, sortOption)
 
-  //prettier-ignore
-  const categories = [
-    { key: "all", label: intl.formatMessage({ id: "browse_apps.all", defaultMessage: "All" }) },
-    { key: "android", label: intl.formatMessage({ id: "browse_apps.android", defaultMessage: "Android" }) },
-    { key: "ios", label: intl.formatMessage({ id: "browse_apps.ios", defaultMessage: "iOS" }) },
-    { key: "web", label: intl.formatMessage({ id: "browse_apps.web", defaultMessage: "Web" }) },
-    { key: "sailfish", label: intl.formatMessage({ id: "browse_apps.sailfish", defaultMessage: "SailfishOS" }) },
-    { key: "desktop", label: intl.formatMessage({ id: "browse_apps.desktop", defaultMessage: "Desktop" }) },
-  ]
   return (
     <div>
       <div>
@@ -87,7 +91,7 @@ export const AppsGrid = ({ apps }: AppsGridProps) => {
           options={sortOptions}
         />
       </div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
         {sortedAndFilteredApps.map(AppCard)}
       </div>
     </div>

data/apps.ts

@@ -29,13 +29,19 @@ import focus from "../public/apps/focus.png"
 import radiant from "../public/apps/radiant.png"
 import phanpy from "../public/apps/phanpy.png"
 import tootrain from "../public/apps/tootrain.png"
-import dostodon from "../public/apps/dostodon.png"
 import trunks from "../public/apps/trunks.png"
 import tootdesk from "../public/apps/tootdesk.png"
 import megalodon from "../public/apps/megalodon.png"
 import litterbox from "../public/apps/litterbox.png"
 import zonepane from "../public/apps/zonepane.png"
 import fedistar from "../public/apps/fedistar.png"
+import amidon from "../public/apps/amidon.png"
+import brexxtodon from "../public/apps/brexxtodon.png"
+import dostodon from "../public/apps/dostodon.png"
+import macstodon from "../public/apps/macstodon.png"
+import mastappleiic from "../public/apps/mastappleiic.png"
+import mastodonforworkgroups from "../public/apps/mastodonforworkgroups.png"
+import mastonine from "../public/apps/mastonine.png"
 
 import type { StaticImageData } from "next/image"
 
@@ -55,6 +61,8 @@ export type appsList = {
     paid?: boolean
     /** whether the app should be hidden from all, used to avoid duplicates */
     hidden_from_all?: boolean
+    /** The category label */
+    categoryLabel?: string
   }[]
 }
 export const apps: appsList = {
@@ -279,12 +287,6 @@ export const apps: appsList = {
       icon: tootrain,
       url: "https://apps.apple.com/app/id1579538917",
     },
-    {
-      released_on: "Nov 14, 2022",
-      name: "DOStodon",
-      icon: dostodon,
-      url: "https://github.com/SuperIlu/DOStodon",
-    },
     {
       released_on: "Mar 1, 2023",
       name: "Fedistar",
@@ -316,4 +318,48 @@ export const apps: appsList = {
       url: "https://openrepos.net/content/dysko/tooter",
     },
   ],
+  retro: [
+    {
+      released_on: "Apr 1, 2023",
+      name: "Amidon",
+      icon: amidon,
+      url: "https://github.com/BlitterStudio/amidon",
+    },
+    {
+      released_on: "Feb 5, 2023",
+      name: "BREXXTODON",
+      icon: brexxtodon,
+      url: "https://github.com/mainframed/BREXXTODON",
+    },
+    {
+      released_on: "Nov 14, 2022",
+      name: "DOStodon",
+      icon: dostodon,
+      url: "https://github.com/SuperIlu/DOStodon",
+    },
+    {
+      released_on: "Nov 20, 2022",
+      name: "Macstodon",
+      icon: macstodon,
+      url: "https://github.com/smallsco/macstodon",
+    },
+    {
+      released_on: "Apr 14, 2023",
+      name: "Masto9",
+      icon: mastonine,
+      url: "https://sr.ht/~julienxx/Masto9/",
+    },
+    {
+      released_on: "Mar 6, 2023",
+      name: "MastApple//c",
+      icon: mastappleiic,
+      url: "https://www.colino.net/wordpress/archives/2023/03/06/binary-release-of-mastodon-for-the-apple-c/",
+    },
+    {
+      released_on: "Nov 20, 2022",
+      name: "Mastodon 3.11 for Workgroups",
+      icon: mastodonforworkgroups,
+      url: "https://github.com/meyskens/mastodon-for-workgroups",
+    },
+  ]
 }

locales/en.json

@@ -19,6 +19,7 @@
   "browse_apps.progressive_web_app": "Progressive web app",
   "browse_apps.pwa_feature.cta": "Join a server",
   "browse_apps.sailfish": "SailfishOS",
+  "browse_apps.retro": "Retro computing",
   "browse_apps.title2": "Browse third-party apps",
   "browse_apps.web": "Web",
   "browse_apps.you_can_use_it_from_desktop": "You can always use Mastodon from the browser on your desktop or phone! It can be added to your home screen and some browsers even support push notifications, just like a native app!",
@@ -124,6 +125,7 @@
   "servers.page_title": "Servers",
   "silver_sponsor": "Silver sponsor",
   "sorting.alphabetical": "A–Z",
+  "sorting.category": "Category",
   "sorting.free": "Free",
   "sorting.name": "Alphabetical",
   "sorting.recently_added": "Recently Added",

locales/fr.json

@@ -19,6 +19,7 @@
   "browse_apps.progressive_web_app": "Application web progressive",
   "browse_apps.pwa_feature.cta": "Rejoignez un serveur",
   "browse_apps.sailfish": "SailfishOS",
+  "browse_apps.retro": "Ordinosaures",
   "browse_apps.title2": "Parcourir les applications tierces",
   "browse_apps.web": "Web",
   "browse_apps.you_can_use_it_from_desktop": "Vous pouvez toujours utiliser Mastodon à partir du navigateur sur votre ordinateur ou votre téléphone ! Il est possible de l’ajouter à votre écran d’accueil et certains navigateurs prennent même en charge les notifications push, tout comme une application native !",
@@ -124,6 +125,7 @@
   "servers.page_title": "Serveurs",
   "silver_sponsor": "Partenaires Argent",
   "sorting.alphabetical": "A–Z",
+  "sorting.category": "Catégorie",
   "sorting.free": "Gratuite",
   "sorting.name": "Alphabétique",
   "sorting.recently_added": "Ajoutés récemment",

pages/guide.tsx

@@ -232,6 +232,11 @@ function Guide(props) {
                 icon: tusky,
                 url: "https://play.google.com/store/apps/details?id=com.keylesspalace.tusky",
                 paid: false,
+                category: "android",
+                categoryLabel: intl.formatMessage({
+                  id: "browse_apps.android",
+                  defaultMessage: "Android",
+                })
               }}
             />
           </div>