Implement the instance picker

.github/workflows/update-public-instances.yml

@@ -0,0 +1,35 @@
+name: Update public instances
+on:
+  schedule: [{cron: "0 0 * * *"}]
+
+jobs:
+  run:
+    name: Update public instances
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout matrix.org source
+        uses: actions/checkout@v4
+        with:
+          path: 'morg'
+
+      - name: Checkout the public instance updater
+        uses: actions/checkout@v4
+        with:
+          repository: 'thibaultamartin/public-instances-updater'
+          path: 'piu'
+
+      - name: Update public instance data on the runner
+        run: |
+          cp morg/content/public-instances/instances.toml piu/instances.toml
+          cd piu && yarn && yarn run update && cd ..
+          cp piu/instances.toml morg/content/public-instances/instances.toml
+
+      # Delete the if before merging to main
+      - name: Commit and push data (scheduled)
+        run: |
+          git config --global user.name "GitHub CI"
+          git config --global user.email "[email protected]"
+          git add content/public-instances/instances.toml
+          git commit -m "Update instances.toml"
+          git push
+        working-directory: morg

content/public-instances/_index.md

@@ -0,0 +1,7 @@
++++
+title = "Matrix Server List"
+template = "public-instances.html"
+extra.summary = """
+Find a server to securely host your Matrix account.
+"""
++++

content/public-instances/instances.toml

@@ -0,0 +1,36 @@
+[[instances]]
+title = "archaeo.social"
+domain = "archaeo.social"
+location = "CH"
+hoster = "The archaeo social collective"
+structure = "non-profit"
+terms_of_service = "https://archaeo.social/about"
+software = "Synapse"
+version = "1.87.0"
+creation_date = "1950-01-01"
+description = """
+An archaeology oriented instance.
+"""
+
+  [instances.signup]
+  requires_email = true
+  requires_captcha = true
+
+[[instances]]
+title = "Matrix.org"
+domain = "matrix.org"
+location = "GB"
+hoster = "The Matrix.org Foundation"
+structure = "non-profit"
+software = "Synapse"
+version = "1.92.1 (b=matrix-org-hotfixes,3bb8cce692)"
+privacy_policy = "https://matrix.org/legal/privacy-notice/"
+terms_of_service = "https://matrix.org/legal/terms-and-conditions/"
+creation_date = "2014-09-01"
+description = """
+The largest open network for secure, decentralised communications.
+"""
+
+  [instances.signup]
+  requires_email = true
+  requires_captcha = true

sass/_public-instances.scss

@@ -0,0 +1,176 @@
+.public-instances {
+
+    .total-and-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .filters {
+            margin-inline: 0;
+        }
+
+        .total {
+            font-weight: 700;
+        }
+    }
+
+    #all-instances {
+        .project-card {
+
+            color: var(--color-text);
+            text-align: center;
+            text-decoration: none;
+
+            &:hover {
+                color: var(--color-text);
+            }
+
+            p {
+                line-height: 140%;
+            }
+        }
+    }
+
+    ul.details {
+        padding: 0;
+        display: flex;
+        gap: .2rem;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-block-start: auto;
+
+        li {
+            list-style: none;
+            background: #E9E9E9;
+            border-radius: 16px;
+            padding: .375rem .625rem;
+
+            font-style: normal;
+            font-weight: 400;
+            font-size: 1rem;
+            line-height: 120%;
+            color: #000000;
+        }
+    }
+
+    .avatar {
+        width: 60px;
+        height: 60px;
+        background-color: #000000;
+        color: #fff;
+        display: grid;
+        place-content: center;
+        font-size: 32px;
+        clip-path: circle(30px);
+    }
+
+    .dialog {
+        display: none;
+        background-color: #fff;;
+        border: 2px solid #d2d2d2;
+        border-radius: 20px;
+        position: fixed;
+        padding: 2.5rem 1.5rem;
+        z-index: 200;
+
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+
+        overflow: auto;
+
+        @media (max-width: 767px) {
+            left: -2px;
+            right: -2px;
+            top: 20%;
+            bottom: -20px;
+            padding-block-end: calc(2.5rem + 20px);
+            transform: unset;
+        }
+
+        &.display {
+            display: block;
+        }
+
+        a {
+            color: #000;
+            font-weight: 700;
+            text-decoration: underline;
+        }
+
+        form {
+            display: flex;
+        }
+
+        .close-button {
+            background-color: #000000;
+            border-color: transparent;
+            display: grid;
+            place-content: center;
+            padding: 10px;
+            clip-path: circle(15px at center);
+
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+
+            img {
+                width: 10px;
+                height: 10px;
+            }
+        }
+
+        .instance-header {
+            display: flex;
+            gap: 1rem;
+            margin-inline-end: 3rem;
+            flex-wrap: wrap;
+
+            .avatar {
+                margin-block: auto;
+            }
+
+            .title-row {
+                display: flex;
+                justify-content: flex-start;
+                gap: 1rem;
+                flex-wrap: wrap;
+
+                ul.details {
+                    margin-block: auto;
+                }
+            }
+        }
+
+        .instance-body {
+            padding-block: 0;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            @media (max-width: 767px) {
+                grid-template-columns: 1fr;
+            }
+            gap: 2rem;
+
+            h2 {
+                font-size: 1.1rem;
+                border-block-end: 1px solid #d2d2d2;
+                padding-block-end: .8rem;
+                margin-block-end: .8rem;
+            }
+
+            ul {
+                padding-inline-start: 1em;
+            }
+        }
+
+        footer {
+            margin-block-start: 2rem;
+
+            .domain {
+                font-family: 'Courier New', Courier, monospace;
+                font-weight: 700;
+            }
+        }
+    }
+}

sass/style.scss

@@ -20,3 +20,4 @@
 @import '_try-matrix';
 @import '_support';
 @import '_howitworks';
+@import '_public-instances';

static/js/public-instances.js

@@ -0,0 +1,45 @@
+import { AllOfFilter, AnyOfFilter, refreshCardsView } from "./projects.js";
+
+document.addEventListener('DOMContentLoaded', (event) => {
+
+    var filters = [];
+    let structureFilter = new AnyOfFilter("filter-structure", "all-instances", filters);
+    let signupFilter = new AnyOfFilter("filter-signup", "all-instances", filters);
+    let locationFilter = new AnyOfFilter("filter-location", "all-instances", filters);
+    let softwareFilter = new AnyOfFilter("filter-software", "all-instances", filters)
+    filters.push(
+        structureFilter,
+        signupFilter,
+        locationFilter,
+        softwareFilter
+    );
+    refreshCardsView("all-instances", filters);
+    for (const filter of filters) {
+        filter.refreshActiveState();
+    }
+
+    const dialogOpeners = document.querySelectorAll("#all-instances > div > a");
+    const overlay = document.getElementById("filters-overlay");
+    for(var opener of dialogOpeners) {
+        const modal = document.getElementById(opener.id + "-modal");
+        const closers = modal.getElementsByClassName("close-button");
+        for(const closer of closers) {
+            closer.addEventListener('click', () => {
+                modal.classList.remove("display");
+                overlay.classList.remove("display");
+            });
+        }
+        opener.addEventListener('click', () => {
+            modal.classList.add("display");
+            overlay.classList.add("display");
+        });
+        overlay.addEventListener('click', () => {
+            modal.classList.remove("display");
+        });
+        document.addEventListener('keydown', (e) => {
+            if(e.key == "Escape") {
+                modal.classList.remove("display");
+            }
+        })
+    }
+})