Add easier way to maintain instance recommendations

README.md

@@ -0,0 +1,10 @@
+# Akkoma.social
+
+A non-technical landing page
+
+## Adding instances to the list of "recommended instances"
+
+To add an instance to the list of "recommended instances", add an 
+entry to the `instances` array in `src/RECOMMENDED_INSTANCES.json`. The entry
+should consist of a name (including your primary language), and
+the URL of the instance.

src/RECOMMENDED_INSTANCES.json

@@ -0,0 +1,22 @@
+[
+  {
+    "name": "Outer Heaven [EN]",
+    "link": "https://outerheaven.club"
+  },
+  {
+    "name": "Light Novel Dungeon [DE]",
+    "link": "https://ak.lightnovel-dungeon.de"
+  },
+  {
+    "name": "Snowdin Town [EN]",
+    "link": "https://snowdin.town"
+  },
+  {
+    "name" : "Coral Castle [EN]",
+    "link": "https://seafoam.space"
+  },
+  {
+    "name": "Luna Nova [EN]",
+    "link": "https://akko.wtf"
+  }
+]

src/components/CallToAction.jsx

@@ -2,6 +2,7 @@ import { AppStoreLink } from '@/components/AppStoreLink'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import Link from 'next/link'
+import RecommendedInstances from '@/RECOMMENDED_INSTANCES.json'
 
 export function CallToAction() {
   return (
@@ -23,21 +24,13 @@ export function CallToAction() {
           </p>
           <div className="mt-8 flex justify-center">
             <ul className={"text-white list-disc"}>
-              <li>
-                  <Link href={"https://outerheaven.club"}>Outer Heaven [EN]</Link>
-              </li>
-              <li>
-                <Link href={"https://ak.lightnovel-dungeon.de"}>Light Novel Dungeon [DE]</Link>
-              </li>
-              <li>
-                <Link href={"https://snowdin.town"}>Snowdin Town [EN]</Link>
-              </li>
-              <li>
-                <Link href={"https://seafoam.space"}>Coral Castle [EN]</Link>
-              </li>
-              <li>
-                <Link href={"https://akko.wtf"}>Luna Nova [EN]</Link>
-              </li>
+                {RecommendedInstances.map((instance) => (
+                    <li key={instance.name}>
+                        <Link href={instance.link}>
+                            {instance.name}
+                        </Link>
+                    </li>
+                ))}
             </ul>
           </div>
         </div>