Add page for Mbin apps

src/components/Nav.tsx

@@ -21,6 +21,9 @@ export default function Nav() {
         <li class={navItemClass + active('/servers')}>
           <a href="/servers">Servers</a>
         </li>
+        <li class={navItemClass + active('/apps')}>
+          <a href="/apps">Apps</a>
+        </li>
         <li class={navItemClass + active('/releases')}>
           <a href="/releases">Releases</a>
         </li>

src/data/apps.ts

@@ -0,0 +1,31 @@
+export interface App {
+  name: string;
+  icon: string;
+  description: string;
+  links: {
+    appleStore?: string;
+    fdroid?: string;
+    flathub?: string;
+    github?: string;
+    googlePlay?: string;
+    microsoftStore?: string;
+    matrix?: string;
+    snapcraft?: string;
+    web?: string;
+  };
+}
+
+export const apps: App[] = [
+  {
+    name: 'Interstellar',
+    icon: 'https://raw.githubusercontent.com/jwr1/interstellar/6d8fce0972febccec91fa056746fdb9f4f960217/assets/icons/logo.png',
+    description: 'An app for Mbin and Lemmy, connecting you to the fediverse.',
+    links: {
+      flathub: 'https://flathub.org/apps/one.jwr.interstellar',
+      github: 'https://github.com/jwr1/interstellar',
+      googlePlay:
+        'https://play.google.com/store/apps/details?id=one.jwr.interstellar',
+      matrix: 'https://matrix.to/#/#interstellar-space:matrix.org',
+    },
+  },
+];

src/routes/apps.tsx

@@ -0,0 +1,105 @@
+import { ComponentProps, For, JSX, Show } from 'solid-js';
+import Chip from '~/components/Chip';
+
+import SimpleIconsAppstore from '~icons/simple-icons/appstore';
+import SimpleIconsFdroid from '~icons/simple-icons/fdroid';
+import SimpleIconsFlathub from '~icons/simple-icons/flathub';
+import SimpleIconsGithub from '~icons/simple-icons/github';
+import SimpleIconsGoogleplay from '~icons/simple-icons/googleplay';
+import SimpleIconsMatrix from '~icons/simple-icons/matrix';
+import SimpleIconsSnapcraft from '~icons/simple-icons/snapcraft';
+import MaterialSymbolsWeb from '~icons/material-symbols/web';
+
+import { apps, App } from '~/data/apps';
+
+const linkMap: Record<
+  keyof App['links'],
+  { name: string; icon: (props: ComponentProps<'svg'>) => JSX.Element }
+> = {
+  github: {
+    name: 'GitHub',
+    icon: SimpleIconsGithub,
+  },
+  matrix: {
+    name: 'Matrix',
+    icon: SimpleIconsMatrix,
+  },
+  appleStore: {
+    name: 'Apple App Store',
+    icon: SimpleIconsAppstore,
+  },
+  fdroid: {
+    name: 'F-Droid',
+    icon: SimpleIconsFdroid,
+  },
+  flathub: {
+    name: 'Flathub',
+    icon: SimpleIconsFlathub,
+  },
+  googlePlay: {
+    name: 'Google Play',
+    icon: SimpleIconsGoogleplay,
+  },
+  microsoftStore: {
+    name: 'Microsoft Store',
+    icon: () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="currentColor"
+          d="M8 3.75V6H2.75a.75.75 0 0 0-.75.75v11.5A2.75 2.75 0 0 0 4.75 21h14.5A2.75 2.75 0 0 0 22 18.25V6.75a.75.75 0 0 0-.75-.75H16V3.75A1.75 1.75 0 0 0 14.25 2h-4.5A1.75 1.75 0 0 0 8 3.75m1.75-.25h4.5a.25.25 0 0 1 .25.25V6h-5V3.75a.25.25 0 0 1 .25-.25M8 13V9.5h3.5V13zm0 4.5V14h3.5v3.5zm8-4.5h-3.5V9.5H16zm-3.5 4.5V14H16v3.5z"
+        ></path>
+      </svg>
+    ),
+  },
+  snapcraft: {
+    name: 'Snapcraft',
+    icon: SimpleIconsSnapcraft,
+  },
+  web: {
+    name: 'Web',
+    icon: MaterialSymbolsWeb,
+  },
+};
+
+export default function ServersPage() {
+  return (
+    <main class="mx-auto p-4 max-w-screen-xl">
+      <h1 class="max-6-xs text-6xl text-sky-600 font-extralight uppercase my-16">
+        Mbin Apps
+      </h1>
+
+      <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        <For each={apps}>
+          {(app) => {
+            return (
+              <div class="border rounded-lg p-4 block relative text-center">
+                <img src={app.icon} class="inline-block size-16 rounded" />
+                <br />
+                <div class="text-3xl text-sky-600">{app.name}</div>
+
+                <p class="text-center">{app.description}</p>
+
+                <div class="my-1 flex flex-wrap gap-1">
+                  <For each={Object.entries(linkMap)}>
+                    {([key, value]) => (
+                      <Show when={app.links[key]}>
+                        <Chip href={app.links[key]} icon={value.icon}>
+                          {value.name}
+                        </Chip>
+                      </Show>
+                    )}
+                  </For>
+                </div>
+              </div>
+            );
+          }}
+        </For>
+      </div>
+    </main>
+  );
+}

src/routes/servers.tsx

@@ -187,12 +187,7 @@ export default function ServersPage() {
           users
         </Chip>
       </div>
-      <div
-        class="grid gap-4"
-        style={{
-          'grid-template-columns': 'repeat(auto-fit, minmax(350px, 1fr))',
-        }}
-      >
+      <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
         <For each={resultServers()}>
           {(server) => {
             const StatChips = () => (
@@ -254,7 +249,7 @@ export default function ServersPage() {
                 >
                   <img
                     src={`https://${server.domain}/favicon.ico`}
-                    class="inline-block size-16"
+                    class="inline-block size-16 rounded"
                   />
                   <br />
                   <div class="text-3xl text-sky-600">{server.domain}</div>