Update servers with invite link

settings.yaml

@@ -3,13 +3,20 @@ guilds:
   - id: 814700630958276649
     channel: 819038172927098910
     hidden: true
+    invite: 6VcStPqaP8 # Feel free to join ;)
     # English-Japanese Language Exchange
   - id: 189571157446492161
     channel: 352299136307036160
     recommended: true
+    invite: japanese
     # 日本語と英語 - JP & EN
   - id: 116379774825267202
     channel: 346809059376234497
+    invite: 2Tf75M9
     # Yudai La Piñata
   - id: 582147335476346880
-    channel: 839852933377425488
+    channel: 839852933377425488
+    invite: 5e5je2PXeq
+    # Nohongo 無本語
+  - id: 893457600719515719
+    channel: 905589521264042004

src/models/settings.rs

@@ -39,6 +39,7 @@ pub struct Guild {
     #[serde(default)]
     pub recommended: bool,
     pub channel: u64,
+    pub invite: Option<String>,
     // None case means guild is not yet loaded
     #[serde(default)]
     pub icon: Option<Option<String>>,

styles/sass/style.scss

@@ -125,6 +125,10 @@ a {
 .servers {
   display: flex;
   gap: 0.5em;
+  & > :not(.recommended) {
+    // To match the missing recommended label
+    padding-bottom: 1em;
+  }
   & > * {
     display: flex;
     flex-direction: column;
@@ -145,6 +149,15 @@ a {
       flex-grow: 1;
       align-items: center;
     }
+    a {
+      background: seagreen;
+      color: white;
+      font-weight: bold;
+      border: none;
+      outline: none;
+      padding: 0.25em 0.5em 0.25em 0.5em;
+      border-radius: 2px;
+    }
   }
   .recommended {
     border-color: mediumseagreen;

templates/modal.html.tera

@@ -4,10 +4,11 @@
     <h2>Join a participating server</h2>
     <div class="servers">
         {% for guild in settings.guilds %}
-        {% if guild.hidden %}{% continue %}{% endif %}
+        {% if guild.hidden or not guild.invite %}{% continue %}{% endif %}
         <div{% if guild.recommended %} class="recommended"{% endif %}>
             <img src="https://cdn.discordapp.com/icons/{{ guild.id }}/{{ guild.icon }}.webp?size=96" alt="Server icon"> 
             <div class="name">{{ guild.name }}</div>
+            <a href="https://discord.gg/{{ guild.invite }}">Join</a>
             {% if guild.recommended %}
             <div class="label-wrapper">
                 <div class="label">Recommended</div>