From e3b0505411c8b197a46180032bfe8bce3c3217f9 Mon Sep 17 00:00:00 2001
From: Vianpyro <vianney@veremme.org>
Date: Mon, 13 Jan 2025 11:46:08 -0500
Subject: [PATCH 1/2] Implement MainLayout for navigation structure and initial
 feed page

---
 src/assets/bell.svg                           |  3 +
 src/assets/copy-plus.svg                      |  6 ++
 src/assets/feed.svg                           |  3 +
 src/assets/heart-handshake.svg                |  6 ++
 src/assets/message.svg                        |  3 +
 src/assets/search.svg                         |  3 +
 src/assets/user-circle.svg                    |  6 ++
 src/components/LoadingSpinner.astro           |  1 +
 src/layouts/MainLayout.astro                  | 74 +++++++++++++++++++
 .../{Layout.astro => MenuLayout.astro}        |  0
 src/pages/feed.astro                          | 54 ++++++++++++++
 src/pages/index.astro                         |  9 +--
 src/pages/login.astro                         | 23 +++---
 src/styles/global.css                         |  9 +++
 14 files changed, 181 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/bell.svg
 create mode 100644 src/assets/copy-plus.svg
 create mode 100644 src/assets/feed.svg
 create mode 100644 src/assets/heart-handshake.svg
 create mode 100644 src/assets/message.svg
 create mode 100644 src/assets/search.svg
 create mode 100644 src/assets/user-circle.svg
 create mode 100644 src/layouts/MainLayout.astro
 rename src/layouts/{Layout.astro => MenuLayout.astro} (100%)
 create mode 100644 src/pages/feed.astro

diff --git a/src/assets/bell.svg b/src/assets/bell.svg
new file mode 100644
index 0000000..6245733
--- /dev/null
+++ b/src/assets/bell.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<path fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
+</svg>
diff --git a/src/assets/copy-plus.svg b/src/assets/copy-plus.svg
new file mode 100644
index 0000000..4b9a40f
--- /dev/null
+++ b/src/assets/copy-plus.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<g fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+		<path d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
+		<path d="M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1M11 14h6m-3-3v6" />
+	</g>
+</svg>
diff --git a/src/assets/feed.svg b/src/assets/feed.svg
new file mode 100644
index 0000000..12a7dbe
--- /dev/null
+++ b/src/assets/feed.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<path fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7.833 12.278l4.445-4.445M10.055 14.5l2.223-2.222m0 4.444l.555-.555m6.995-1.339a4 4 0 0 0 0-5.656l-5-5a4 4 0 0 0-5.656 0l-5 5a4 4 0 0 0 0 5.656L10.343 21h3.314z" />
+</svg>
diff --git a/src/assets/heart-handshake.svg b/src/assets/heart-handshake.svg
new file mode 100644
index 0000000..c2e5188
--- /dev/null
+++ b/src/assets/heart-handshake.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<g fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+		<path d="M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572" />
+		<path d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.18 3.18 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
+	</g>
+</svg>
diff --git a/src/assets/message.svg b/src/assets/message.svg
new file mode 100644
index 0000000..44fdf79
--- /dev/null
+++ b/src/assets/message.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<path fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z" />
+</svg>
diff --git a/src/assets/search.svg b/src/assets/search.svg
new file mode 100644
index 0000000..548bc4a
--- /dev/null
+++ b/src/assets/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<path fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" />
+</svg>
diff --git a/src/assets/user-circle.svg b/src/assets/user-circle.svg
new file mode 100644
index 0000000..d14ca89
--- /dev/null
+++ b/src/assets/user-circle.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+	<g fill="none" stroke="#e3022c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+		<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0" />
+		<path d="M9 10a3 3 0 1 0 6 0a3 3 0 1 0-6 0m-2.832 8.849A4 4 0 0 1 10 16h4a4 4 0 0 1 3.834 2.855" />
+	</g>
+</svg>
diff --git a/src/components/LoadingSpinner.astro b/src/components/LoadingSpinner.astro
index b25de6a..8605726 100644
--- a/src/components/LoadingSpinner.astro
+++ b/src/components/LoadingSpinner.astro
@@ -10,6 +10,7 @@ const { size = "10px" } = Astro.props;
         border: calc(var(--spinner-size) / 2) solid #f3f3f375;
         border-radius: 50%;
         border-top: calc(var(--spinner-size) / 2) solid white;
+        box-sizing: content-box;
         height: var(--spinner-size);
         width: var(--spinner-size);
     }
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
new file mode 100644
index 0000000..92e3466
--- /dev/null
+++ b/src/layouts/MainLayout.astro
@@ -0,0 +1,74 @@
+---
+import Icon from "../components/icon.astro";
+import "../styles/global.css";
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/ets.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <main>
+            <slot />
+        </main>
+        <nav>
+            <ul>
+                <li>
+                    <a href="feed.html" title="Feed">
+                        <Icon icon="feed" />
+                    </a>
+                </li>
+                <li>
+                    <a href="search.html" title="Search">
+                        <Icon icon="search" />
+                    </a>
+                </li>
+                <li>
+                    <a href="post.html" title="Post">
+                        <Icon icon="copy-plus" />
+                    </a>
+                </li>
+                <li>
+                    <a href="matches.html" title="Matches">
+                        <Icon icon="heart-handshake" />
+                    </a>
+                </li>
+                <li>
+                    <a href="profile.html" title="Profile">
+                        <Icon icon="user-circle" />
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </body>
+</html>
+
+<style>
+    main {
+        background-color: var(--font-color);
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
+    }
+
+    nav {
+        width: 100%;
+    }
+
+    nav > ul {
+        background-color: var(--font-color);
+        display: flex;
+        justify-content: space-around;
+    }
+
+    nav > ul > li {
+        display: inline;
+    }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/MenuLayout.astro
similarity index 100%
rename from src/layouts/Layout.astro
rename to src/layouts/MenuLayout.astro
diff --git a/src/pages/feed.astro b/src/pages/feed.astro
new file mode 100644
index 0000000..ae5e5b7
--- /dev/null
+++ b/src/pages/feed.astro
@@ -0,0 +1,54 @@
+---
+import Icon from "../components/icon.astro";
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Feed">
+    <nav>
+        <span><Icon icon="ets" /></span>
+        <div>
+            <span><Icon icon="bell" /></span>
+            <span><Icon icon="message" /></span>
+        </div>
+    </nav>
+    <div id="feed-content"></div>
+</MainLayout>
+
+<style>
+    #feed-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 1rem;
+        overflow-y: auto;
+    }
+
+    * {
+        color: black;
+    }
+
+    #feed {
+        flex: 1;
+    }
+
+    nav {
+        display: flex;
+        justify-content: space-between;
+        height: 2rem;
+        position: sticky;
+        top: 0;
+        background-color: white;
+    }
+
+    nav > span:first-child {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    nav > div {
+        display: flex;
+        justify-content: space-between;
+        gap: 1rem;
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dec3ba8..7c96b31 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,10 @@
 ---
 import Icon from "../components/icon.astro";
-import Layout from "../layouts/Layout.astro";
+import MenuLayout from "../layouts/MenuLayout.astro";
 import LoadingSpinner from "../components/LoadingSpinner.astro";
-
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
 ---
 
-<Layout title="Welcome to TindÉTS">
+<MenuLayout title="Welcome to TindÉTS">
     <div id="loading-screen">
         <div id="logo-ets">
             <Icon icon="ets" />
@@ -20,7 +17,7 @@ import LoadingSpinner from "../components/LoadingSpinner.astro";
             window.location.href = "login.html";
         }, 1000);
     </script>
-</Layout>
+</MenuLayout>
 
 <style>
     #loading-screen {
diff --git a/src/pages/login.astro b/src/pages/login.astro
index 5d459cf..1453b20 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -1,9 +1,9 @@
 ---
 import Icon from "../components/icon.astro";
-import Layout from "../layouts/Layout.astro";
+import MenuLayout from "../layouts/MenuLayout.astro";
 ---
 
-<Layout title="Login">
+<MenuLayout title="Login">
     <div id="login-page">
         <div id="logo-ets">
             <Icon icon="ets" />
@@ -16,19 +16,17 @@ import Layout from "../layouts/Layout.astro";
         </form>
         <a>Need help?</a>
     </div>
-</Layout>
+</MenuLayout>
 
 <script>
-    document.addEventListener("DOMContentLoaded", () => {
-        const form = document.getElementById("login-form");
+    const form = document.getElementById("login-form");
 
-        if (form) {
-            form.addEventListener("submit", (event) => {
-                event.preventDefault();
-                alert("Redirecting to the feed...");
-            });
-        }
-    });
+    if (form) {
+        form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            window.location.href = "feed.html";
+        });
+    }
 </script>
 
 <style>
@@ -48,7 +46,6 @@ import Layout from "../layouts/Layout.astro";
     }
 
     input {
-        box-sizing: border-box;
         width: 90vw;
         padding: 1rem;
         border: 1px solid var(--font-color);
diff --git a/src/styles/global.css b/src/styles/global.css
index 082ecc8..dbe2b15 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -9,6 +9,11 @@
     margin: 0;
     padding: 0;
     transition-duration: .5s;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
 }
 
 body {
@@ -20,3 +25,7 @@ body {
     margin: 0;
     width: 100%;
 }
+
+span {
+    height: fit-content;
+}

From 82df6365a917dbd414f407695ce80d6db3f87689 Mon Sep 17 00:00:00 2001
From: Vianpyro <vianney@veremme.org>
Date: Mon, 13 Jan 2025 12:19:00 -0500
Subject: [PATCH 2/2] Add Post component and update feed page to display posts

---
 src/components/Post.astro    | 83 ++++++++++++++++++++++++++++++++++++
 src/layouts/MainLayout.astro |  2 +-
 src/pages/feed.astro         | 36 +++++++++++++++-
 src/pages/index.astro        |  2 +-
 src/pages/login.astro        |  2 +-
 5 files changed, 120 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Post.astro

diff --git a/src/components/Post.astro b/src/components/Post.astro
new file mode 100644
index 0000000..f00b0ff
--- /dev/null
+++ b/src/components/Post.astro
@@ -0,0 +1,83 @@
+---
+import Icon from "./Icon.astro";
+
+export interface Props {
+    title: string;
+    description: string;
+}
+
+const { title, description } = Astro.props as Props;
+
+const randomMinutes = Math.floor(Math.random() * 60);
+const randomHours = Math.floor(Math.random() * 24);
+const randomDays = Math.floor(Math.random() * 7);
+
+const now = new Date();
+now.setMinutes(now.getMinutes() - randomMinutes);
+now.setHours(now.getHours() - randomHours);
+now.setDate(now.getDate() - randomDays);
+
+const formattedDate = now.toLocaleString();
+---
+
+<Fragment>
+    <article>
+        <div>
+            <img src="https://thispersondoesnotexist.com/" alt="Author" />
+            <figcaption>Username</figcaption>
+        </div>
+        <div>
+            <h2>{title}</h2>
+            <p>{description}</p>
+            <a href="#">Read more</a>
+            <img src="https://picsum.photos/200" alt="" />
+        </div>
+        <time>{formattedDate}</time>
+        <div>
+            <span>Like</span>
+            <span>Comment</span>
+            <span>Repost</span>
+            <span>Send</span>
+        </div>
+    </article>
+</Fragment>
+
+<style>
+    * {
+        color: black;
+    }
+
+    article {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem;
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+        border-radius: 0.5rem;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    article > div:first-child {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+    }
+
+    article > div:first-child > img {
+        border-radius: 50%;
+        width: 2rem;
+        height: 2rem;
+    }
+
+    article > div:nth-child(2) {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    article > div:last-child {
+        display: flex;
+        justify-content: space-between;
+    }
+</style>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 92e3466..5792a45 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "../components/icon.astro";
+import Icon from "../components/Icon.astro";
 import "../styles/global.css";
 
 const { title } = Astro.props;
diff --git a/src/pages/feed.astro b/src/pages/feed.astro
index ae5e5b7..6235e4d 100644
--- a/src/pages/feed.astro
+++ b/src/pages/feed.astro
@@ -1,6 +1,28 @@
 ---
-import Icon from "../components/icon.astro";
+import Icon from "../components/Icon.astro";
+import Post from "../components/Post.astro";
 import MainLayout from "../layouts/MainLayout.astro";
+
+const components = [
+    {
+        title: "This is a post",
+        description: "This is the prototype for the feed.",
+    },
+    {
+        title: "This is another post",
+        description: "The feed will be like LinkedIn's feed.",
+        date: "2021-10-02",
+    },
+    {
+        title: "This is a third post",
+        description: "Users will share their projects, thoughts, and more.",
+        date: "2021-10-03",
+    },
+    {
+        title: "This is a fourth post",
+        description: "Users will be able to like, comment, and share posts.",
+    },
+];
 ---
 
 <MainLayout title="Feed">
@@ -11,7 +33,17 @@ import MainLayout from "../layouts/MainLayout.astro";
             <span><Icon icon="message" /></span>
         </div>
     </nav>
-    <div id="feed-content"></div>
+    <div id="feed-content">
+        {
+            components.map((component) => (
+                <Post
+                    title={component.title}
+                    description={component.description}
+                    date={component.date}
+                />
+            ))
+        }
+    </div>
 </MainLayout>
 
 <style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7c96b31..69aa400 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "../components/icon.astro";
+import Icon from "../components/Icon.astro";
 import MenuLayout from "../layouts/MenuLayout.astro";
 import LoadingSpinner from "../components/LoadingSpinner.astro";
 ---
diff --git a/src/pages/login.astro b/src/pages/login.astro
index 1453b20..c8243c1 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -1,5 +1,5 @@
 ---
-import Icon from "../components/icon.astro";
+import Icon from "../components/Icon.astro";
 import MenuLayout from "../layouts/MenuLayout.astro";
 ---