193 lines
6.5 KiB
Svelte
193 lines
6.5 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
numberOfUnreadNotification,
|
|
displayCompanyName,
|
|
cryptoTicker,
|
|
} from "$lib/store";
|
|
|
|
export let data;
|
|
|
|
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 rawNews = data?.getStockNews;
|
|
let newsList = rawNews?.slice(0, 20) ?? [];
|
|
|
|
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} ({$cryptoTicker}) latest Stock Market News and
|
|
Breaking Stories · Stocknear
|
|
</title>
|
|
<meta
|
|
name="description"
|
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
|
|
/>
|
|
|
|
<!-- Other meta tags -->
|
|
<meta
|
|
property="og:title"
|
|
content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · Stocknear`}
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
|
|
/>
|
|
<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} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · Stocknear`}
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`}
|
|
/>
|
|
<!-- 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">
|
|
<main class="">
|
|
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
|
<div class="mb-6">
|
|
<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-md m-auto">
|
|
{#if (videoId = checkIfYoutubeVideo(item.url))}
|
|
<iframe
|
|
class="w-full h-96 rounded-md 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="border border-gray-800 rounded-md"
|
|
>
|
|
<div class="flex-shrink-0 m-auto">
|
|
<img
|
|
src={item?.image}
|
|
class=" w-full rounded-md"
|
|
alt="news image"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</a>
|
|
{/if}
|
|
<div class="mb-1 w-full">
|
|
<h3
|
|
class="text-sm sm:text-md text-white text-opacity-60 truncate mb-2 mt-3"
|
|
>
|
|
{item?.site} · {formatDate(item?.publishedDate)} ago
|
|
</h3>
|
|
|
|
<a
|
|
href={item?.url}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
class="text-lg 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-md 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-[#fff] bg-[#fff] bg-opacity-[0.6]"
|
|
>
|
|
Load More News
|
|
</label>
|
|
{/if}
|
|
{:else}
|
|
<div
|
|
class="w-screen max-w-xl sm:flex sm:flex-row sm:items-center justify-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-md 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="#fff"
|
|
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>
|