Update github workflows & alerts

.github/workflows/push.yml

@@ -6,7 +6,6 @@ permissions:
 on:
     push:
         branches:
-            - main
             - master
 
 jobs:
@@ -24,7 +23,7 @@ jobs:
           echo "IMAGE_NAME=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v1 
+        uses: docker/login-action@v1
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -42,12 +41,12 @@ jobs:
         run: |
                 docker buildx build \
                 --platform linux/amd64,linux/arm64 \
-                --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-client:$BRANCH \
+                --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-client:alpha \
                 --output "type=registry" ./client/
 
       - name: Build server images
         run: |
                 docker buildx build \
                 --platform linux/amd64,linux/arm64 \
-                --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-server:$BRANCH \
+                --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-server:alpha \
                 --output "type=registry" ./server/

.github/workflows/tag.yml

@@ -42,6 +42,7 @@ jobs:
                 docker buildx build \
                 --platform linux/amd64,linux/arm64 \
                 --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-client:$TAG \
+                --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-client:master \
                 --output "type=registry" ./client/
 
       - name: Build server images
@@ -49,4 +50,5 @@ jobs:
                 docker buildx build \
                 --platform linux/amd64,linux/arm64 \
                 --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-server:$TAG \
+                --tag ghcr.io/${{ github.repository_owner }}/$IMAGE_NAME-server:master \
                 --output "type=registry" ./server/

client/src/components/alert/Alerts.svelte

@@ -6,6 +6,7 @@ import ByMononaut from './ByMononaut.svelte'
 import HeroMsg from './Hero.svelte'
 import SponsoredMsg from './Sponsored.svelte'
 import GenericAlert from './GenericAlert.svelte'
+import GenericAlertv2 from './GenericAlertv2.svelte'
 import { fly } from 'svelte/transition'
 
 const components = {
@@ -13,15 +14,17 @@ const components = {
   "sponsored-by": SponsoredMsg,
   // "be-a-hero": BeAHero,
   "thank-you-hero": HeroMsg,
-  msg: GenericAlert
+  msg: GenericAlert,
+  msg2: GenericAlertv2,
 }
 let ready
 $: {
   ready = {
     mononaut: true,
-    "sponsored-by": SponsoredMsg,
+    "sponsored-by": true,
     "thank-you-hero": $haveSupporters ? HeroMsg : null,
-    msg: GenericAlert
+    msg: true,
+    msg2: true,
   }
 }
 
@@ -49,7 +52,7 @@ $: {
 }
 
 function processAlert (alert) {
-  if (alert && alert.type && components[alert.type] && ready[alert.type]) {
+  if (alert && alert.type && components[alert.type] && ready[alert.type] && (!alert.publicOnly || config.public)) {
     if (!sequences[alert.key]) sequences[alert.key] = 0
     return {
       ...alert,

client/src/components/alert/GenericAlertv2.svelte

@@ -0,0 +1,108 @@
+<script>
+export let msg
+export let shortmsg = null
+export let imgs
+
+let displayImgs = []
+
+function chooseImgs () {
+  displayImgs = []
+  const randomIndex = Math.floor(Math.random() * imgs.length)
+  for (let i = 0; i < Math.min(3, imgs.length); i++) {
+    const randomImg = imgs[(randomIndex + i) % imgs.length]
+    displayImgs.push(randomImg)
+  }
+}
+
+$: {
+  if (imgs && !displayImgs.length) {
+    chooseImgs()
+  }
+}
+</script>
+
+<div class="alert-content">
+  <p class="msg">
+    {@html msg }
+  </p>
+  <p class="shortmsg">
+    {@html shortmsg || msg }
+  </p>
+  <div class="imgs">
+    {#each displayImgs as img}
+    {#if img.href }
+      <a href={img.href} target="_blank">
+        <img src={img.img} alt={img.name} title={img.name} class="image">
+      </a>
+    {:else}
+      <img src={img.img} alt={img.name} title={img.name} class="image">
+    {/if}
+    {/each}
+  </div>
+</div>
+
+<style type="text/scss">
+.alert-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--palette-x);
+
+  .imgs {
+    height: 2.5em;
+    width: 7.5em;
+    margin-left: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    flex-shrink: 1;
+    min-width: 6em;
+
+    .image {
+      width: 2.3em;
+      height: 2.3em;
+      margin: 0 0.1em;
+      border-radius: 50%;
+      object-fit: contain;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .imgs {
+      max-width: 5em;
+      .image:nth-child(3) {
+        display: none;
+      }
+    }
+  }
+}
+
+.msg, .shortmsg {
+  margin: 0;
+  font-size: .9em;
+  width: 100%;
+  text-align: center;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.shortmsg {
+  display: none;
+}
+img {
+  height: 2.8em;
+}
+
+@media screen and (max-width: 480px) {
+  .shortmsg {
+    display: inline;
+  }
+  .msg {
+    display: none;
+  }
+}
+
+</style>