ui fixes

src/lib/components/News.svelte

@@ -32,7 +32,7 @@
       return `${days} day${days !== 1 ? "s" : ""}`;
     }
   };
-
+  /*
   let videoId = null;
 
   function checkIfYoutubeVideo(link) {
@@ -49,7 +49,7 @@
       return null;
     }
   }
-
+*/
   function loadMoreData() {
     const nextIndex = newsList?.length;
     const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
@@ -83,8 +83,8 @@
     <div class="grid grid-cols-1 gap-2 pb-5">
       {#each newsList as item}
         <div class="w-full flex flex-col bg-[#09090B] rounded-md m-auto">
+          <!--
           {#if !checkIfYoutubeVideo(item.url)}
-            <!--
             <div class="w-full aspect-video mb-4">
               <iframe
                 class="w-full h-full rounded-md border border-gray-800"
@@ -111,42 +111,41 @@
               </a>
             </div>
             -->
-            <div class="w-full flex flex-col sm:flex-row">
+          <div class="w-full flex flex-col sm:flex-row">
+            <a
+              href={item?.url}
+              rel="noopener noreferrer"
+              target="_blank"
+              class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+            >
+              <div class="flex-shrink-0 m-auto">
+                <img
+                  src={item?.image}
+                  class="h-auto w-full rounded-md"
+                  alt="news image"
+                  loading="lazy"
+                />
+              </div>
+            </a>
+            <div class="-mt-3 w-full">
+              <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
+                {formatDate(item?.publishedDate)} ago · {item?.site}
+              </h3>
               <a
                 href={item?.url}
                 rel="noopener noreferrer"
                 target="_blank"
-                class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+                class="text-lg sm:text-xl font-bold text-white"
               >
-                <div class="flex-shrink-0 m-auto">
+                {item?.title}
-                  <img
+                <p class="text-white text-sm mt-2 font-normal">
-                    src={item?.image}
+                  {item?.text?.length > 200
-                    class="h-auto w-full rounded-md"
+                    ? item?.text?.slice(0, 200) + "..."
-                    alt="news image"
+                    : item?.text}
-                    loading="lazy"
+                </p>
-                  />
-                </div>
               </a>
-              <div class="-mt-3 w-full">
-                <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
-                  {formatDate(item?.publishedDate)} ago · {item?.site}
-                </h3>
-                <a
-                  href={item?.url}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  class="text-lg sm:text-xl font-bold text-white"
-                >
-                  {item?.title}
-                  <p class="text-white text-sm mt-2 font-normal">
-                    {item?.text?.length > 200
-                      ? item?.text?.slice(0, 200) + "..."
-                      : item?.text}
-                  </p>
-                </a>
-              </div>
             </div>
-          {/if}
+          </div>
         </div>
         <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
       {/each}

src/routes/insider-tracker/+page.server.ts

@@ -15,7 +15,7 @@ export const load = async ({ locals, setHeaders }) => {
     console.log(output);
     output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
 
-    setHeaders({ "cache-control": "public, max-age=3000" });
+    setHeaders({ "cache-control": "public, max-age=200" });
 
     return output;
   };

src/routes/stocks/[tickerID]/+page.svelte

@@ -994,7 +994,7 @@
           <div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
             {#if dataMapping[displayData]?.length === 0}
               <div
-                class="order-1 lg:order-5 m-auto grow overflow-hidden border-t border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+                class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
                 <div class="h-[250px] sm:h-[400px]">
                   <div
@@ -1010,7 +1010,7 @@
               </div>
             {:else}
               <div
-                class="order-1 lg:order-5 grow overflow-hidden border-t border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+                class="order-1 lg:order-5 grow overflow-hidden border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
               >
                 <div class="flex items-center justify-between py-1 sm:pt-0.5">
                   <div class="hide-scroll overflow-x-auto">

src/routes/stocks/[tickerID]/news/+page.server.ts

@@ -1,28 +0,0 @@
-export const load = async ({ locals, params }) => {
-  const getStockNews = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = {
-      ticker: params.tickerID,
-    };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/stock-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 {
-    getStockNews: await getStockNews(),
-  };
-};

src/routes/stocks/[tickerID]/news/+page.svelte

@@ -1,190 +0,0 @@
-<script lang="ts">
-  import {
-    numberOfUnreadNotification,
-    displayCompanyName,
-    stockTicker,
-  } from "$lib/store";
-
-  export let data;
-
-  let rawNews = data?.getStockNews;
-  let newsList = rawNews?.slice(0, 20) ?? [];
-
-  const formatDate = (dateString) => {
-    // Create a date object for the input dateString
-    const inputDate = new Date(dateString);
-
-    // Create a date object for the current time in New York City
-    const nycTime = new Date().toLocaleString("en-US", {
-      timeZone: "America/New_York",
-    });
-    const currentNYCDate = new Date(nycTime);
-
-    // Calculate the difference in milliseconds
-    const difference = inputDate.getTime() - currentNYCDate.getTime();
-
-    // Convert the difference to minutes
-    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
-
-    if (minutes < 60) {
-      return `${minutes} minutes`;
-    } else if (minutes < 1440) {
-      const hours = Math.round(minutes / 60);
-      return `${hours} hour${hours !== 1 ? "s" : ""}`;
-    } else {
-      const days = Math.round(minutes / 1440);
-      return `${days} day${days !== 1 ? "s" : ""}`;
-    }
-  };
-
-  let videoId = null;
-
-  function checkIfYoutubeVideo(link) {
-    const url = new URL(link);
-    if (url?.hostname === "www.youtube.com") {
-      const searchParams = url.searchParams;
-      searchParams.delete("t"); // Remove the "t" parameter
-      const videoIdMatch = url?.search?.match(/v=([^&]+)/);
-
-      if (videoIdMatch) {
-        return videoIdMatch[1];
-      }
-    } else {
-      return null;
-    }
-  }
-
-  function loadMoreData() {
-    const nextIndex = newsList?.length;
-    const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
-    newsList = [...newsList, ...newArticles];
-  }
-</script>
-
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking
-    Stories · stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`}
-  />
-
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$stockTicker}).`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
-<section
-  class="w-auto max-w-4xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
->
-  <div class="m-auto h-full overflow-hidden w-full">
-    <main class="w-auto">
-      <div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
-        <div class="mb-6 w-full">
-          <h1 class="text-2xl sm:text-3xl text-white font-bold">News</h1>
-        </div>
-
-        {#if newsList?.length !== 0}
-          <div class="grid grid-cols-1 gap-2 pb-5">
-            {#each newsList as item}
-              <div class="w-full flex flex-col bg-[#09090B] rounded-lg m-auto">
-                {#if (videoId = checkIfYoutubeVideo(item.url))}
-                  <iframe
-                    class="w-full h-96 rounded-lg border border-gray-800"
-                    src={`https://www.youtube.com/embed/${videoId}`}
-                    frameborder="0"
-                    allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen
-                  ></iframe>
-                {:else}
-                  <a
-                    href={item?.url}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    class="w-full border border-gray-800 rounded-lg"
-                  >
-                    <div class="flex-shrink-0 m-auto">
-                      <img
-                        src={item?.image}
-                        class="h-auto w-full rounded-lg"
-                        alt="news image"
-                        loading="lazy"
-                      />
-                    </div>
-                  </a>
-                {/if}
-                <div class="mb-1 w-full">
-                  <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
-                    {formatDate(item?.publishedDate)} ago · {item?.site}
-                  </h3>
-
-                  <a
-                    href={item?.url}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    class="text-lg sm:text-xl font-bold text-white"
-                  >
-                    {item?.title}
-                    <p class="text-white text-sm mt-2 font-normal">
-                      {item?.text}
-                    </p>
-                  </a>
-                </div>
-              </div>
-
-              <hr class="border-blue-400 w-full m-auto mt-5 mb-5" />
-            {/each}
-          </div>
-          {#if newsList?.length !== rawNews?.length}
-            <label
-              on:click={loadMoreData}
-              class="shadow-lg rounded-lg cursor-pointer w-5/6 sm:w-3/5 sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]"
-            >
-              Load More News
-            </label>
-          {/if}
-        {:else}
-          <div
-            class="border border-gray-800 text-center w-full max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
-          >
-            <svg
-              class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 256 256"
-              ><path
-                fill="#a474f6"
-                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
-              /></svg
-            >
-            No news article published yet!
-          </div>
-        {/if}
-      </div>
-    </main>
-  </div>
-</section>