Merge pull request #10 from endlessm/lang-T33681

Apps: Group by language

_data/langs.yml

@@ -0,0 +1,41 @@
+- code: en
+  description: English
+
+- code: ar
+  description: Arabic
+
+- code: bn_BD
+  description: Bangla (Bangladesh)
+
+- code: zh_CN
+  description: Chinese
+
+- code: fr
+  description: French
+
+- code: id
+  description: Indonesian
+
+- code: pt
+  description: Portuguese
+
+- code: pt_BR
+  description: Portuguese (Brazil)
+
+- code: ru
+  description: Russian
+
+- code: es
+  description: Spanish
+
+- code: es_GT
+  description: Spanish (Guatemala)
+
+- code: sw
+  description: Swahili
+
+- code: th
+  description: Thai
+
+- code: vi
+  description: Vietnamese

_includes/app_button.html

@@ -0,0 +1,10 @@
+<a class="app button {{ app.dist }}" href="{{ app.app_id | relative_url }}" title="{{ app.summary }}" id="{{ app.app_id }}" tabindex="0">
+  <img class="icon" width="64" height="64" loading="lazy"
+    srcset="{{ site.baseurl }}/images/icons/64x64/{{ app.app_id }}.png"
+    src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
+    alt="{{ app.title }} icon"
+  />
+
+  <span class="title">{{ app.title }}</span>
+  <span class="summary">{{ app.summary }}</span>
+</a>

_sass/_home.scss

@@ -6,13 +6,19 @@
     font-weight: 900;
   }
 
+  nav.lang {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 1.25em;
+    // justify-content: center;
+    margin-top: 1em;
+  }
+
   &.apps {
     display: grid;
     grid-template-columns: repeat(auto-fill, 12em);
     justify-content: space-around;
-    margin: 0 auto;
-    max-width: 1200px;
-    width: 95vw;
 
     .app {
       border-radius: 2em;

_sass/_typography.scss

@@ -2,13 +2,22 @@ $ui-font: "Lato", "Open Sans", sans-serif;
 
 h1 {
   font-weight: normal;
+
+  + p {
+    font-size: 1.25em;
+    font-weight: bold;
+  }
 }
 
 h2 {
   font-weight: 300;
   margin-top: 2em;
 }
 
+h3 {
+  margin-top: 2em;
+}
+
 a {
   color: inherit;
 }

css/main.scss

@@ -30,6 +30,7 @@ body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  scroll-behavior: smooth;
 
   font-family: $ui-font;
   background-color: var(--bg);
@@ -45,6 +46,11 @@ body {
 .constrain {
   max-width: 800px;
   margin: 0 auto;
+
+  &.wide {
+    max-width: 1200px;
+    width: 95vw;
+  }
 }
 
 .main {

index.html

@@ -10,24 +10,35 @@
   <h1>{{ site.title }}</h1>
   <h2>{{ site.summary }}</h2>
   <p>Use your browser’s “Find” feature (i.e. <kbd>Ctrl</kbd><kbd>F</kbd> or <kbd>Cmd</kbd><kbd>F</kbd>) to search.</p>
+  <h3>Jump to Language</h3>
+  <nav class="lang">
+    {% for lang in site.data.langs %}
+      <a class="button" href="#{{ lang.code }}">{{ lang.description }}</a>
+    {% endfor %}
+  </nav>
 </div>
 
-<div class="home apps">
-  {% for app in flatpak_apps %}
-    {% unless app.app_id == "com.google.Chrome" %}
-      <a class="app button {{ app.dist }}" href="{{ app.app_id | relative_url }}" title="{{ app.summary }}" id="{{ app.app_id }}" tabindex="0">
-        <img class="icon" width="64" height="64" loading="lazy"
-          srcset="{{ site.baseurl }}/images/icons/64x64/{{ app.app_id }}.png"
-          src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
-          alt="{{ app.title }} icon"
-        />
+{% for lang in site.data.langs %}
+  <div class="home constrain wide">
+    <h2 id="{{ lang.code }}">{{ lang.description }}</h2>
+  </div>
+  <div class="home apps constrain wide">
+    {% for app in flatpak_apps %}
+      {% assign id = app.app_id | split: "." %}
+      {% if id[0] == "com" and id[1] == "endlessm" and id[3] == lang.code %}
+        {% include app_button.html %}
+      {% endif %}
 
-        <span class="title">{{ app.title }}</span>
-        <span class="summary">{{ app.summary }}</span>
-      </a>
-    {% endunless %}
-  {% endfor %}
-</div>
+      {% if lang.code == "en" %}
+        {% unless app.app_id == "com.google.Chrome" %}
+          {% unless id[0] == "com" and id[1] == "endlessm" and id[3] %}
+            {% include app_button.html %}
+          {% endunless %}
+        {% endunless %}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endfor %}
 
 <footer>
   <div class="constrain">