Merge pull request #242 from Wizarrrr/master

sync
wizarrrr · Oct 9, 2023 · 1f6403d · 1f6403d
2 parents efbac60 + eac1b6a
commit 1f6403d
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 3 deletions.
diff --git a/.github/workflows/beta-ci.yml b/.github/workflows/beta-ci.yml
@@ -49,5 +49,5 @@ jobs:
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}-${{ steps.get_version.outputs.version }}
-          platforms: linux/amd64,linux/arm64,linux/arm32v7,linux/arm,linux/386,linux/ppc64le,linux/s390x,windows/amd64,mac/amd64,mac/arm64
+          platforms: linux/amd64,linux/arm64
           provenance: false
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -59,7 +59,7 @@ jobs:
           context: .
           file: ./Dockerfile
           push: true
-          platforms: linux/amd64,linux/arm64,linux/arm32v7,linux/arm,linux/386,linux/ppc64le,linux/s390x,windows/amd64,mac/amd64,mac/arm64
+          platforms: linux/amd64,linux/arm64
           provenance: false
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest

diff --git a/.github/workflows/translations.yml b/.github/workflows/translations.yml
@@ -0,0 +1,47 @@
+name: Compile Translations
+
+on:
+  push:
+    branches:
+      - translations
+  workflow_dispatch: {}
+
+permissions:
+  packages: write
+
+jobs:
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout the repo and the translations branch
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          ref: translations
+
+      # Install dependencies node and npm
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y nodejs npm
+
+      # Install dependencies for frontend
+      - name: Install dependencies for frontend
+        run: |
+          cd frontend
+          npm install
+
+      # Compile translations
+      - name: Compile translations
+        run: |
+          cd frontend
+          npm run gettext:compile
+
+      # Commit and push changes
+      - name: Commit and push changes
+        run: |
+          git config --local user.name "GitHub Action"
+          git config --local user.email "<>"
+          git add ./src/language/translations.json
+          git commit -m "Compile translations"
+          git push origin translations
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -123,6 +123,7 @@
         "prettier": "3.0.2",
         "sass": "^1.66.1",
         "start-server-and-test": "^2.0.0",
+        "tailwind-scrollbar": "^3.0.5",
         "tailwindcss": "^3.3.3",
         "tailwindcss-inner-border": "^0.2.0",
         "terser": "^5.19.3",

diff --git a/frontend/src/assets/img/discord.svg b/frontend/src/assets/img/discord.svg
diff --git a/frontend/src/language/translations.json b/frontend/src/language/translations.json
diff --git a/frontend/src/modules/help/components/Discord.vue b/frontend/src/modules/help/components/Discord.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="my-[-2rem] mx-[-2rem]">
+        <!-- Header -->
+        <div class="flex justify-between items-center flex-row bg-[#5865F2] py-4 px-6">
+            <DiscordLogo />
+            <div class="text-white text-sm">
+                <span class="font-bold">{{ totalMembersOnline }}</span>
+                {{ __("Members Online") }}
+            </div>
+        </div>
+
+        <!-- Members List -->
+        <div class="flex flex-col space-y-2 h-[30vh] overflow-y-auto p-4 scrollbar-thin scrollbar-track-white dark:scrollbar-thumb-gray-700 dark:scrollbar-track-gray-800">
+            <template v-for="member in members">
+                <div class="flex items-center space-x-2">
+                    <div class="relative w-[26px] h-[26px]">
+                        <img :src="member.avatar_url" class="w-[26px] h-[26px] rounded-full" alt="Avatar" />
+                        <span class="absolute bottom-[-2px] right-[-2px] w-3 h-3 rounded-full border-2 border-white dark:border-gray-800" :class="statusColor(member.status)"></span>
+                    </div>
+                    <span>{{ member.username }}</span>
+                </div>
+            </template>
+        </div>
+
+        <!-- Footer -->
+        <div class="flex justify-between items-center flex-row bg-[#5865F2] py-4 px-6">
+            <div class="text-white text-sm">
+                {{ __("Join our Discord") }}
+            </div>
+            <a :href="invite" target="_blank" rel="noopener noreferrer" class="text-white text-sm">
+                {{ __("Join") }}
+            </a>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import DiscordLogo from "@/assets/img/discord.svg?component";
+
+export interface Member {
+    id: string;
+    username: string;
+    discriminator: string;
+    avatar: null;
+    status: string;
+    avatar_url: string;
+}
+
+export type Members = Member[];
+
+export default defineComponent({
+    name: "Discord",
+    components: {
+        DiscordLogo,
+    },
+    data() {
+        return {
+            guild: "1020742926856372224",
+            members: [] as Members,
+            invite: "",
+            interval: null as unknown as NodeJS.Timeout,
+        };
+    },
+    computed: {
+        totalMembersOnline() {
+            return this.members.filter((member) => member.status === "online").length;
+        },
+    },
+    methods: {
+        async loadWidgetAPI(guild: string) {
+            // Load the Discord Widget API
+            const response = await this.$axios.get(`https://discord.com/api/guilds/${guild}/widget.json`).catch(() => {
+                this.$toast.info("Unable to load Discord Widget, this is most likely due to too many requests.");
+            });
+
+            // Validate the response
+            if (!response) return;
+
+            // Set the widget data
+            this.invite = response.data.instant_invite;
+            this.members = response.data.members;
+        },
+        statusColor(status: string) {
+            switch (status) {
+                case "online":
+                    return "bg-green-500";
+                case "idle":
+                    return "bg-yellow-500";
+                case "dnd":
+                    return "bg-red-500";
+                case "offline":
+                    return "bg-gray-500";
+                default:
+                    return "bg-gray-500";
+            }
+        },
+    },
+    mounted() {
+        this.loadWidgetAPI(this.guild);
+    },
+});
+</script>
diff --git a/frontend/src/modules/help/views/Help.vue b/frontend/src/modules/help/views/Help.vue
@@ -28,6 +28,7 @@ import WizarrLogo from "@/components/WizarrLogo.vue";
 
 import Welcome from "../components/Welcome.vue";
 import Download from "../components/Download.vue";
+// import Discord from "../components/Discord.vue";
 
 export default defineComponent({
     name: "HelpView",
@@ -47,6 +48,10 @@ export default defineComponent({
                     name: "download",
                     view: Download,
                 },
+                // {
+                //     name: "discord",
+                //     view: Discord,
+                // },
             ],
         };
     },

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -40,5 +40,6 @@ module.exports = {
         require("tailwindcss-inner-border"), // inner border
         require("@formkit/themes/tailwindcss"), // formkit
         require("@tailwindcss/forms"), // tailwind forms
+        require('tailwind-scrollbar'), // scrollbar
     ],
 };