update market news page

src/routes/market-news/+layout.server.ts

@@ -0,0 +1,66 @@
+export const load = async ({ locals }) => {
+    const { apiURL, apiKey } = locals;
+
+  const getStockNews = async () => {
+    const postData = { newsType: "stock-news" };
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/market-news", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+
+   const getMarketNews = async () => {
+    const postData = { newsType: "general-news" };
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/market-news", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  const getPressNews = async () => {
+    const postData = { newsType: "press-news" };
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/market-news", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+
+
+  
+  return {
+    getStockNews: await getStockNews(),
+    getMarketNews: await getMarketNews(),
+    getPressNews: await getPressNews(),
+  };
+};

src/routes/market-news/+page.server.ts

@@ -1,24 +0,0 @@
-export const load = async ({ locals }) => {
-  const getData = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { newsType: "stock-news" };
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/market-news", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getData: await getData(),
-  };
-};

src/routes/market-news/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { numberOfUnreadNotification } from "$lib/store";
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
   import { onMount } from "svelte";
 
   export let data;
 
-  let rawData = data?.getData;
+  let rawData = data?.getStockNews;
+  let marketNews = data?.getMarketNews;
   let news = rawData.slice(0, 10) ?? [];
 
   const formatDate = (dateString) => {
@@ -104,10 +106,12 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section class="w-full overflow-hidden m-auto mt-10">
+<div class="w-full overflow-hidden m-auto mt-5">
-  <div class="flex justify-center w-full m-auto overflow-hidden">
+  <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-    <div class="relative flex justify-center items-center overflow-hidden">
+    <div
-      <main>
+      class="relative flex justify-center items-start overflow-hidden w-full"
+    >
+      <main class="w-full lg:w-3/4 lg:pr-5">
         <div class="w-full m-auto">
           <div class="grid grid-cols-1 gap-y-3">
             {#if news?.length !== 0}
@@ -205,6 +209,31 @@
           </div>
         </div>
       </main>
+      <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        {#if marketNews?.length !== 0}
+          <div
+            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary"
+          >
+            <div class="p-4 text-sm">
+              <h3 class="text-lg text-white font-semibold mb-3">Market News</h3>
+              <ul class="text-white">
+                {#each marketNews?.slice(0, 10) as item}
+                  <li class="mb-3 last:mb-1">
+                    {formatDate(item?.publishedDate)} ago -
+                    <a
+                      class="sm:hover:text-white text-blue-400"
+                      href={item?.url}
+                      target="_blank"
+                      rel="noopener noreferrer nofollow">{item?.title}</a
+                    >
+                    - {item?.site}
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          </div>
+        {/if}
+      </aside>
+    </div>
   </div>
 </div>
-</section>

src/routes/market-news/general/+page.server.ts

@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getData = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { newsType: "general-news" };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/market-news", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getData: await getData(),
-  };
-};

src/routes/market-news/general/+page.svelte

@@ -4,7 +4,8 @@
 
   export let data;
 
-  let rawData = data?.getData;
+  let rawData = data?.getMarketNews;
+  let stockNews = data?.getStockNews;
   let news = rawData.slice(0, 10) ?? [];
 
   const formatDate = (dateString) => {
@@ -110,10 +111,12 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section class="w-full overflow-hidden m-auto mt-10">
+<div class="w-full overflow-hidden m-auto mt-5">
-  <div class="flex justify-center w-full m-auto overflow-hidden">
+  <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-    <div class="relative flex justify-center items-center overflow-hidden">
+    <div
-      <main>
+      class="relative flex justify-center items-start overflow-hidden w-full"
+    >
+      <main class="w-full lg:w-3/4 lg:pr-5">
         <div class="w-full m-auto">
           <div class="grid grid-cols-1 gap-y-3">
             {#if news?.length !== 0}
@@ -211,6 +214,31 @@
           </div>
         </div>
       </main>
+      <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        {#if stockNews?.length !== 0}
+          <div
+            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary"
+          >
+            <div class="p-4 text-sm">
+              <h3 class="text-lg text-white font-semibold mb-3">Stock News</h3>
+              <ul class="text-white">
+                {#each stockNews?.slice(0, 10) as item}
+                  <li class="mb-3 last:mb-1">
+                    {formatDate(item?.publishedDate)} ago -
+                    <a
+                      class="sm:hover:text-white text-blue-400"
+                      href={item?.url}
+                      target="_blank"
+                      rel="noopener noreferrer nofollow">{item?.title}</a
+                    >
+                    - {item?.site}
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          </div>
+        {/if}
+      </aside>
+    </div>
   </div>
 </div>
-</section>

src/routes/market-news/press-releases/+page.server.ts

@@ -1,25 +0,0 @@
-export const load = async ({ locals }) => {
-  const getData = async () => {
-    const { apiURL, apiKey } = locals;
-    const postData = { newsType: "press-news" };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/market-news", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getData: await getData(),
-  };
-};

src/routes/market-news/press-releases/+page.svelte

@@ -4,7 +4,8 @@
 
   export let data;
 
-  let rawData = data?.getData;
+  let rawData = data?.getPressNews;
+  let stockNews = data?.getStockNews;
   let news = rawData.slice(0, 10) ?? [];
 
   const formatDate = (dateString) => {
@@ -89,10 +90,12 @@
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
-<section class="w-full overflow-hidden m-auto mt-10">
+<div class="w-full overflow-hidden m-auto mt-5">
-  <div class="flex justify-center w-full m-auto overflow-hidden">
+  <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
-    <div class="relative flex justify-center items-center overflow-hidden">
+    <div
-      <main>
+      class="relative flex justify-center items-start overflow-hidden w-full"
+    >
+      <main class="w-full lg:w-3/4 lg:pr-5">
         <div class="w-full m-auto">
           <div class="grid grid-cols-1 gap-y-3">
             {#if news.length !== 0}
@@ -153,6 +156,31 @@
           </div>
         </div>
       </main>
+      <aside class="hidden lg:block relative fixed w-1/4 ml-4">
+        {#if stockNews?.length !== 0}
+          <div
+            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-primary"
+          >
+            <div class="p-4 text-sm">
+              <h3 class="text-lg text-white font-semibold mb-3">Stock News</h3>
+              <ul class="text-white">
+                {#each stockNews?.slice(0, 10) as item}
+                  <li class="mb-3 last:mb-1">
+                    {formatDate(item?.publishedDate)} ago -
+                    <a
+                      class="sm:hover:text-white text-blue-400"
+                      href={item?.url}
+                      target="_blank"
+                      rel="noopener noreferrer nofollow">{item?.title}</a
+                    >
+                    - {item?.site}
+                  </li>
+                {/each}
+              </ul>
+            </div>
+          </div>
+        {/if}
+      </aside>
+    </div>
   </div>
 </div>
-</section>