From 56369d2d6ab9ec19dd882b4967cee8d6cb0c3213 Mon Sep 17 00:00:00 2001
From: Akis <mavrommatisakis@gmail.com>
Date: Fri, 11 Nov 2022 15:32:29 +0200
Subject: [PATCH] fixes

---
 Dockerfile                        |   4 +-
 src/routes/+page.svelte           | 126 +++++++++++++++---------------
 src/routes/donate/+page.md        |   9 +--
 src/routes/instances/+page.svelte |  11 +--
 4 files changed, 69 insertions(+), 81 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index ac6fa5c..999e95c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,6 +13,6 @@ COPY . .
 
 RUN pnpm build
 
-EXPOSE 80
+EXPOSE 4173
 
-CMD [ "pnpm", "preview", "--port", "80" ]
\ No newline at end of file
+CMD [ "pnpm", "preview" ]
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c223898..ddfcc4e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,8 +16,8 @@
 
 <Hero
 	title="Project Segfault"
-	description="Open source development and hosted services"
-	marginTop="7"
+	{description}
+	marginTop=7
 >
 	<div class="buttons">
 		<LinkButton
@@ -36,22 +36,28 @@
 </Hero>
 
 {#if data.state.enabled}
-    {#if announcements.error}
-        <span />
-    {:else}
+    {#if !announcements.error}
         <div class="announcements">
             <div class="announcement-container">
                 <div class="announcement">
-                    <div class="general">
+                    <div class="flex gap-4 flex-col sm:flex-row border-b-2 p-2 pt-0">
                         {#if announcements.severity === "info"}
-                            <div class="i-fa6-solid:circle-info" />
+                            <div class="flex items-center gap-2">
+                                <div class="i-fa6-solid:circle-info" />
+                                <span>Info</span>
+                            </div>
                         {:else}
-                            <div class="i-fa6-solid:triangle-exclamation" />
+                            <div class="flex items-center gap-2">
+                                <div class="i-fa6-solid:triangle-exclamation" />
+                                <span>Attention</span>
+                            </div>
                         {/if}
-                        <span>
-                            {announcements.author} -
+                        <span class="flex items-center gap-2">
+                            <div class="i-fa6-solid:user" />
+                            {announcements.author}
                         </span>
-                        <span>
+                        <span class="flex items-center gap-2">
+                            <div class="i-fa6-solid:calendar" />
                             {dayjs
                                 .unix(announcements.created)
                                 .format("DD/MM/YYYY HH:mm")}
@@ -68,65 +74,55 @@
                     {/if}
                 </div>
             </div>
-    </div>
+        </div>
+
+        {#if announcements.severity === "info"}
+            <style>
+                .announcement {
+                    background-color: #8caaee;
+                }
+            </style>
+        {:else if announcements.severity === "low"}
+            <style>
+                .announcement {
+                    background-color: #a6d189;
+                }
+            </style>
+        {:else if announcements.severity === "medium"}
+            <style>
+                .announcement {
+                    background-color: #e5c890;
+                }
+            </style>
+        {:else if announcements.severity === "high"}
+            <style>
+                .announcement {
+                    background-color: #e78284;
+                }
+            </style>
+        {/if}
 
-    {#if announcements.severity === "info"}
         <style>
+            .announcement-container {
+                display: flex;
+                justify-content: center;
+                margin-top: 4rem;
+            }
+
             .announcement {
-                background-color: #8caaee;
+                color: #252525 !important;
+                padding: 1.5rem;
+                border-radius: 10px;
+                width: fit-content;
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .announcement a {
+                color: #252525;
             }
         </style>
-    {:else if announcements.severity === "low"}
-        <style>
-            .announcement {
-                background-color: #a6d189;
-            }
-        </style>
-    {:else if announcements.severity === "medium"}
-        <style>
-            .announcement {
-                background-color: #e5c890;
-            }
-        </style>
-    {:else if announcements.severity === "high"}
-        <style>
-            .announcement {
-                background-color: #e78284;
-            }
-        </style>
-    {/if}
-
-    <style>
-        .announcement-container {
-            display: flex;
-            justify-content: center;
-            margin-top: 4rem;
-        }
-
-        .announcement {
-            color: #252525 !important;
-            padding: 2rem 1rem;
-            border-radius: 10px;
-            width: fit-content;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-
-        .announcement a {
-            color: #252525;
-        }
-
-        .announcement .general {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .no-js {
-            @apply flex justify-center text-center text-red;
-        }
-    </style>
     {/if}
 {:else}
     <div class="flex items-center gap-1 text-center justify-center mt-16">
diff --git a/src/routes/donate/+page.md b/src/routes/donate/+page.md
index 323d0bd..9faefbf 100644
--- a/src/routes/donate/+page.md
+++ b/src/routes/donate/+page.md
@@ -13,14 +13,11 @@ description: The ways you can donate to us and more.
 
 ## Reasons to donate to our project.
 
-If you donate, we will be more motivated to work on the server and host more stuff and maybe even get more hardware. Thanks!
+If you donate, we will be more motivated to work on the server and host more stuff and maybe even get more hardware. As well as that, we may donate PayPal funds to project we heavily rely on. Thanks!
 
-**UPDATE (25/10):** We will use PayPal funds to donate to other projects and fund our servers when in critical situation.
-**Midou** runs the PayPal Account on liberapay (not private), and **Mrlerien** runs the stripe account on liberapay (private).
+## Donation methods
 
-## Donation links
-
-### Credit Card
+### Credit card
 
 <LinkButton url="https://liberapay.com/ProjectSegfault/donate" icon="i-simple-icons:liberapay" title="Donate" bg="#F6C915" color="#151515" />
 
diff --git a/src/routes/instances/+page.svelte b/src/routes/instances/+page.svelte
index e311f44..8f2f71e 100644
--- a/src/routes/instances/+page.svelte
+++ b/src/routes/instances/+page.svelte
@@ -4,11 +4,6 @@
 	import type { PageData } from "../$types";
 	
     export let data: PageData;
-
-    let groups = [
-        {name: "General", data: data.status.General},
-        {name: "Internal", data: data.status.Internal}
-    ]
 </script>
 
 <svelte:head>
@@ -20,7 +15,7 @@
 <div class="flex flex-col gap-4">
     <CardOuter>
         <div class="wrapper">
-            {#each groups as group}
+            {#each data.status as group}
                 <h2>{group.name}</h2>
                 <div class="items">
                     {#each group.data as item}
@@ -32,13 +27,13 @@
                             icon={item.icon}
                         >
                             <LinksOuter>
-                                <Link url={item.website} class="web">
+                                <Link url={item.link} class="web">
                                     <div class="withText">
                                         <div class="i-fa6-solid:globe" />
                                         <span>Instance link</span>
                                     </div>
                                 </Link>
-                                <Link url={item.projectWebsite} class="link">
+                                <Link url={item.project} class="link">
                                     <div class="withText">
                                         <div class="i-fa6-solid:circle-info" />
                                         <span>Project website</span>