From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <kiizuha@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED,
	URIBL_DBL_BLOCKED_OPENDNS autolearn=ham autolearn_force=no
	version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1696301556;
	bh=Ewl35dJMSTlYUkFGpGn/TFhPUAfFcw1QXeHCi2Sal40=;
	h=From:To:Cc:Subject:Date:In-Reply-To:References;
	b=EQg9frWVnyE1ZulG5erH8oXzERe/tDZGDQWvRtEfi86ClpCfwxU3ftpZUN94MUw84
	 GuMBvo4GCIxF+tEIkPc4sfZpZXNc9rx9LlLT4vS5NaMnECNS+39SoxOez6vI93QHcL
	 FOom3Vn3YXYO2aynZmGWvs2DH7yDOV+eNGRl4hi6FkzBbMPZVbum3kPpCHP/O7aZ0X
	 sawP30RBDv0EvHi/GSiq5pq3UUPwh9v915W+V1zT2841ZvH0Tg2G/JM7v3cjOajA5d
	 NRTeRj7hzxJiLtX+O9dAW5B0goDKWTTHWUwOqcrsYkyzEJAdd/sN70sWVmoxXXcLuf
	 CTE9iVf9S7hxg==
Received: from localhost.localdomain (unknown [175.158.50.50])
	by gnuweeb.org (Postfix) with ESMTPSA id 6531724B8D5;
	Tue,  3 Oct 2023 09:52:35 +0700 (WIB)
From: Muhammad Rizki <kiizuha@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Muhammad Rizki <kiizuha@gnuweeb.org>,
	Alviro Iskandar Setiawan <alviro.iskandar@gnuweeb.org>,
	Irvan Malik Azantha <irvanma@gnuweeb.org>,
	Memet Zx <zxce3@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>
Subject: [PATCH v1 11/13] feat(routes/page): add +page.svelte
Date: Tue,  3 Oct 2023 09:51:44 +0700
Message-Id: <20231003025146.1557-12-kiizuha@gnuweeb.org>
X-Mailer: git-send-email 2.34.1.windows.1
In-Reply-To: <20231003025146.1557-1-kiizuha@gnuweeb.org>
References: <20231003025146.1557-1-kiizuha@gnuweeb.org>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
List-Id: <gwml.vger.gnuweeb.org>

This commit adds +page.svelte, a file responsible for displaying the
main page UI. It loads the fetched data from +page.server.svelte using
`export let data;` and then renders it using HTML elements.

In this commit, we've included logic to bind innerWidth to manage the
screen size for the recent message UI. We use this logic to control the
visibility of the recent message UI based on whether the screen size is
less than or equal to 1280 pixels or higher. This approach is also
applied to the <RecentMessages/> component to handle scroll behavior
accordingly.

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 src/routes/+page.svelte | 259 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 259 insertions(+)
 create mode 100644 src/routes/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..c00cf0e
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,259 @@
+<script lang="ts">
+  import OrganizationMembers from "$components/OrganizationMembers.svelte";
+  import RecentMessages from "$components/RecentMessages.svelte";
+
+  export let data;
+  let copyBtnEl: HTMLButtonElement;
+  let copyTxtEl: HTMLButtonElement;
+  let innerWidth: number = 9999;
+
+  const copyText = () => {
+    navigator.clipboard.writeText(copyTxtEl.innerText);
+    copyBtnEl.innerText = "Copied!";
+    copyBtnEl.classList.add("bg-neutral-800");
+    setTimeout(function () {
+      copyBtnEl.innerText = "Copy";
+      copyBtnEl.classList.remove("bg-neutral-800");
+    }, 3000);
+  }
+</script>
+
+
+<!-- RECENT MESSAGES SECTION | RIGHT -->
+{#if innerWidth >= 1280}
+  <section class="hidden xl:flex flex-col py-5 max-h-screen">
+    <RecentMessages data={data.recentMsgData} innerWidth={innerWidth}/>
+  </section>
+{/if}
+
+<!-- CONTENT PROFILE | CENTER -->
+<section class="flex flex-col space-y-3 px-3">
+
+  <!-- PROFILE SECTION -->
+  <div class="border border-neutral-800 rounded-b-xl overflow-hidden max-w-xs md:max-w-lg lg:max-w-3xl">
+    <img
+      src="/img/profile-cover.jpg"
+      alt=""
+      draggable="false"
+      style="filter: brightness(70%);"
+    >
+    <div class="relative flex flex-col px-5 py-3 space-x-3 space-y-3">
+      <div class="flex space-x-1 md:space-x-2 lg:space-x-3 pb-5 border-b border-neutral-800">
+        <div class="-mt-16">
+          <img
+            src="https://github.com/GNUWeeb.png"
+            alt="GNU/Weeb's GitHub Profile"
+            draggable="false"
+            class="rounded-full w-44 border-4 border-neutral-950 bg-neutral-950"
+          />
+        </div>
+        <div class="flex justify-between w-full">
+          <div class="text-2xl md:text-3xl font-bold">
+            GNU/Weeb
+          </div>
+          <div>
+            <a
+              href="https://github.com/GNUWeeb"
+              target="_blank"
+              title="View GNU/Weeb's Organization on GitHub"
+              class="relative bottom-1 p-2 rounded-full hover:bg-neutral-800 flex items-center
+                    justify-center transition-colors duration-300 ease-in-out"
+              draggable="false"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="w-5 h-5 md:w-6 md:h-6 lg:w-7 lg:h-7"
+              >
+                <path
+                  d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+                />
+                <path d="M9 18c-4.51 2-5-2-7-2" />
+              </svg>
+              <span class="sr-only">GitHub</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="py-1 space-y-1">
+        <h2 class="font-bold text-2xl select-none">About</h2>
+        <p class="w-full opacity-70">
+          We are working to build a community through open source technology.
+        </p>
+        <blockquote
+          class="px-3 border-l-4 pl-3 !my-7 text-sm border-neutral-200"
+        >
+          <span class="not-italic font-bold select-none">Note:</span><br />
+          <span class="opacity-80 pb-1">
+            Members on GitHub must have two-factor auth.
+          </span>
+        </blockquote>
+      </div>
+    </div>
+  </div>
+
+  <!-- RECENT MESSAGES SECTION - MOBILE | RIGHT -->
+  {#if innerWidth < 1280}
+    <div class="flex flex-col max-h-screen">
+      <RecentMessages data={data.recentMsgData} innerWidth={innerWidth}/>
+    </div>
+  {/if}
+
+  <!-- MEMBER LIST SECTION - MOBILE | RIGHT -->
+  <div class="flex xl:hidden flex-col max-h-screen">
+    <OrganizationMembers data={data.memberListData}/>
+  </div>
+
+  <!-- MAILING LIST SECTION -->
+  <div class="border border-neutral-800 rounded-xl overflow-hidden max-w-3xl">
+    <div
+      class="flex px-5 py-2 border-b border-neutral-800 justify-between items-center"
+    >
+      <h1 class="text-lg font-bold text-center w-full select-none">Mailing List</h1>
+    </div>
+    <div class="px-5 py-3 text-sm">
+      <div class="overflow-hidden flex items-center justify-between border rounded-lg
+              border-neutral-900 font-mono"
+      >
+        <button
+          bind:this={copyTxtEl} on:click={copyText}
+          class="px-3 py-2 select-none cursor-pointer w-full"
+        >
+          gwml@vger.gnuweeb.org
+        </button>
+        <button
+          bind:this={copyBtnEl} on:click={copyText}
+          class="w-fit py-2 px-3 border-l border-neutral-900 hover:border-neutral-800
+              hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
+          title="Copy to Clipboard"
+
+        >
+          Copy
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- USEFUL LINKS SECTION -->
+  <div class="border border-neutral-800 rounded-xl overflow-hidden max-w-3xl">
+    <div
+      class="flex px-5 py-2 border-b border-neutral-800 justify-between items-center"
+    >
+      <h1 class="text-lg font-bold text-center w-full select-none">Useful Links</h1>
+    </div>
+    <div class="px-5 py-3 grid gap-3 grid-cols-2 text-sm">
+      <a
+        href="https://t.me/GNUWeeb"
+        target="_blank"
+        draggable="false"
+        class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+              border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+              transition-colors duration-300 ease-in-out"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-5 h-5"
+        >
+          <path d="m22 2-7 20-4-9-9-4Z" />
+          <path d="M22 2 11 13" />
+        </svg>
+        <span class="select-none">Telegram</span>
+      </a>
+      <a
+        href="https://lore.gnuweeb.org/gwml"
+        target="_blank"
+        draggable="false"
+        class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+              border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+              transition-colors duration-300 ease-in-out"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-5 h-5"
+        >
+          <path
+            d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"
+          />
+          <path d="M19 17V5a2 2 0 0 0-2-2H4" />
+          <path d="M15 8h-5" />
+          <path d="M15 12h-5" />
+        </svg>
+        <span class="select-none">GWML Lore</span>
+      </a>
+      <a
+        href="https://discord.gg/GyRxNzK3Zs"
+        target="_blank"
+        draggable="false"
+        class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+              border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+              transition-colors duration-300 ease-in-out"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-5 h-5"
+        >
+          <path
+            d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+          />
+          <path
+            d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+          />
+        </svg>
+        <span class="select-none">Discord</span>
+      </a>
+      <a
+        href="https://social.gnuweeb.org/"
+        target="_blank"
+        draggable="false"
+        class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+              border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+              transition-colors duration-300 ease-in-out"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-5 h-5"
+        >
+          <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
+        </svg>
+        <span class="select-none">GW Social</span>
+      </a>
+    </div>
+  </div>
+
+</section>
+
+<!-- MEMBER LIST SECTION | RIGHT -->
+<section class="hidden xl:flex flex-col py-5 max-h-screen">
+  <OrganizationMembers data={data.memberListData}/>
+</section>
+
+<svelte:window bind:innerWidth/>
-- 
Muhammad Rizki