update market news page
This commit is contained in:
MuslemRahimi
parent
9015a16d4a
commit
19f645bbc1
@ -7,13 +7,17 @@
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Stock",
|
||||
title: "All Stocks",
|
||||
path: "/market-news",
|
||||
},
|
||||
{
|
||||
title: "General",
|
||||
title: "Market",
|
||||
path: "/market-news/general",
|
||||
},
|
||||
{
|
||||
title: "Press Releases",
|
||||
path: "/market-news/press-releases",
|
||||
},
|
||||
];
|
||||
|
||||
let activeIdx = 0;
|
||||
@ -23,6 +27,8 @@
|
||||
activeIdx = 0;
|
||||
} else if ($page.url.pathname.startsWith("/market-news/general")) {
|
||||
activeIdx = 1;
|
||||
} else if ($page.url.pathname.startsWith("/market-news/press-releases")) {
|
||||
activeIdx = 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -49,18 +55,20 @@
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-5">
|
||||
<h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
|
||||
Stock Market News
|
||||
{activeIdx === 0
|
||||
? "All Stocks News"
|
||||
: activeIdx === 1
|
||||
? "Market News"
|
||||
: "Press Releases"}
|
||||
</h1>
|
||||
|
||||
<nav class=" border-b-[2px] overflow-x-scroll whitespace-nowrap">
|
||||
<ul
|
||||
class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
|
||||
>
|
||||
<ul class="flex flex-row items-center w-full text-lg text-white">
|
||||
{#each tabs as item, i}
|
||||
<a
|
||||
href={item?.path}
|
||||
class="p-2 px-5 cursor-pointer {activeIdx === i
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
|
||||
? 'text-white bg-primary sm:hover:bg-opacity-[0.95] font-semibold'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
|
||||
>
|
||||
{item.title}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getMarketNews = async () => {
|
||||
const getData = async () => {
|
||||
const { apiURL, apiKey } = locals;
|
||||
const postData = { newsType: "stock-news" };
|
||||
// make the POST request to the endpoint
|
||||
@ -19,6 +19,6 @@ export const load = async ({ locals }) => {
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getMarketNews: await getMarketNews(),
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
export let data;
|
||||
|
||||
let rawData = data?.getMarketNews;
|
||||
let rawData = data?.getData;
|
||||
let news = rawData.slice(0, 15) ?? [];
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
@ -73,35 +73,29 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
|
||||
Stock Market News and Breaking Stories · Stocknear
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} All
|
||||
Stock News · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
|
||||
content={`The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`Today's Stock Market News and Breaking Stories · Stocknear`}
|
||||
/>
|
||||
<meta property="og:title" content={`All Stock News · Stocknear`} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
|
||||
content={`The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites.`}
|
||||
/>
|
||||
<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={`Today's Stock Market News and Breaking Stories · Stocknear`}
|
||||
/>
|
||||
<meta name="twitter:title" content={`All Stock News · Stocknear`} />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
|
||||
content={`The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
@ -152,16 +146,18 @@
|
||||
<div class="flex-shrink-0 m-auto">
|
||||
<img
|
||||
src={item?.image}
|
||||
class="h-auto w-full"
|
||||
class="h-full w-full object-cover rounded"
|
||||
alt="news image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2 mt-3">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
{formatDate(item?.publishedDate)} ago · {item?.site}
|
||||
</h3>
|
||||
|
||||
<a
|
||||
href={item?.url}
|
||||
rel="noopener noreferrer"
|
||||
@ -175,12 +171,22 @@
|
||||
: item?.text}
|
||||
</p>
|
||||
</a>
|
||||
<div class=" mt-2 text-white">
|
||||
<span>Stocks:</span>
|
||||
|
||||
<a
|
||||
href={"/stocks/" + item?.symbol}
|
||||
class="px-2.5 text-sm py-0.5 rounded-md bg-white bg-opacity-[0.1] sm:hover:bg-opacity-[0.2] ml-1"
|
||||
>
|
||||
{item?.symbol}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-800 w-full m-auto mt-5 mb-5" />
|
||||
<hr class="border-gray-600 w-full m-auto mt-3 mb-5" />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getGeneralNews = async () => {
|
||||
const getData = async () => {
|
||||
const { apiURL, apiKey } = locals;
|
||||
const postData = { newsType: "general-news" };
|
||||
|
||||
@ -20,6 +20,6 @@ export const load = async ({ locals }) => {
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getGeneralNews: await getGeneralNews(),
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
export let data;
|
||||
|
||||
let rawData = data?.getGeneralNews;
|
||||
let rawData = data?.getData;
|
||||
let news = rawData.slice(0, 15) ?? [];
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
@ -74,21 +74,21 @@
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
|
||||
General News and Breaking Stories · Stocknear
|
||||
Stock Market News and Breaking Stories · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Get the latest general news and breaking stories from the world's best finance and investing websites.`}
|
||||
content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`Today's General News and Breaking Stories · Stocknear`}
|
||||
content={`Today's Stock Market News and Breaking Stories · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Get the latest general news and breaking stories from the world's best finance and investing websites.`}
|
||||
content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
@ -97,11 +97,11 @@
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content={`Today's General News and Breaking Stories · Stocknear`}
|
||||
content={`Today's Stock Market News and Breaking Stories · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Get the latest general news and breaking stories from the world's best finance and investing websites.`}
|
||||
content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
@ -112,13 +112,13 @@
|
||||
<main>
|
||||
<div class="w-full m-auto">
|
||||
<div class="grid grid-cols-1 gap-y-3">
|
||||
{#if news?.length !== 0}
|
||||
{#if news.length !== 0}
|
||||
{#each news as item}
|
||||
<div class="w-full flex flex-col bg-[#09090B] m-auto">
|
||||
{#if (videoId = checkIfYoutubeVideo(item?.url))}
|
||||
<div class="w-full mb-4">
|
||||
<h3 class="text-sm text-white/80 mb-2">
|
||||
{formatDate(item?.datetime * 1000)} ago · {item?.source}
|
||||
{formatDate(item?.publishedDate)} ago · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
href={item?.url}
|
||||
@ -126,9 +126,9 @@
|
||||
target="_blank"
|
||||
class="text-lg sm:text-xl font-bold text-white"
|
||||
>
|
||||
{item?.headline}
|
||||
{item?.title}
|
||||
<p class="text-white text-sm font-normal">
|
||||
{item?.summary}
|
||||
{item?.text}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@ -160,7 +160,7 @@
|
||||
</a>
|
||||
<div class="w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2 mt-3">
|
||||
{formatDate(item?.datetime * 1000)} ago · {item?.source}
|
||||
{formatDate(item?.publishedDate)} ago · {item?.site}
|
||||
</h3>
|
||||
<a
|
||||
href={item?.url}
|
||||
@ -168,11 +168,11 @@
|
||||
target="_blank"
|
||||
class="text-lg sm:text-xl font-bold text-white"
|
||||
>
|
||||
{item?.headline}
|
||||
{item?.title}
|
||||
<p class="text-white text-sm mt-2 font-normal">
|
||||
{item?.summary?.length > 200
|
||||
? item?.summary?.slice(0, 200) + "..."
|
||||
: item?.summary}
|
||||
{item?.text?.length > 200
|
||||
? item?.text?.slice(0, 200) + "..."
|
||||
: item?.text}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
25
src/routes/market-news/press-releases/+page.server.ts
Normal file
25
src/routes/market-news/press-releases/+page.server.ts
Normal file
@ -0,0 +1,25 @@
|
||||
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(),
|
||||
};
|
||||
};
|
||||
158
src/routes/market-news/press-releases/+page.svelte
Normal file
158
src/routes/market-news/press-releases/+page.svelte
Normal file
@ -0,0 +1,158 @@
|
||||
<script lang="ts">
|
||||
import { numberOfUnreadNotification } from "$lib/store";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
let rawData = data?.getData;
|
||||
let news = rawData.slice(0, 15) ?? [];
|
||||
|
||||
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" : ""}`;
|
||||
}
|
||||
};
|
||||
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||
if (isBottom && news?.length !== rawData?.length) {
|
||||
const nextIndex = news?.length;
|
||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
||||
news = [...news, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>
|
||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Press
|
||||
Releases From Publicly Traded Companies · Stocknear
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
|
||||
/>
|
||||
|
||||
<!-- Other meta tags -->
|
||||
<meta
|
||||
property="og:title"
|
||||
content={`TPress Releases From Publicly Traded Companies · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
|
||||
/>
|
||||
<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={`TPress Releases From Publicly Traded Companies · Stocknear`}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
|
||||
/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
</svelte:head>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto mt-10">
|
||||
<div class="flex justify-center w-full m-auto overflow-hidden">
|
||||
<div class="relative flex justify-center items-center overflow-hidden">
|
||||
<main>
|
||||
<div class="w-full m-auto">
|
||||
<div class="grid grid-cols-1 gap-y-3">
|
||||
{#if news.length !== 0}
|
||||
{#each news as item}
|
||||
<div class="w-full flex flex-col bg-[#09090B] m-auto">
|
||||
<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"
|
||||
>
|
||||
<div class="flex-shrink-0 m-auto">
|
||||
<img
|
||||
src={item?.image}
|
||||
class="h-full w-full object-cover rounded"
|
||||
alt="news image"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="w-full">
|
||||
<h3 class="text-sm text-white/80 truncate mb-2">
|
||||
{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 class=" mt-2 text-white">
|
||||
<span>Stocks:</span>
|
||||
|
||||
<a
|
||||
href={"/stocks/" + item?.symbol}
|
||||
class="px-2.5 text-sm py-0.5 rounded-md bg-white bg-opacity-[0.1] sm:hover:bg-opacity-[0.2] ml-1"
|
||||
>
|
||||
{item?.symbol}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-600 w-full m-auto mt-3 mb-5" />
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
x
Reference in New Issue
Block a user