update market news page

This commit is contained in:
MuslemRahimi 2024-08-06 00:47:47 +02:00
parent 9704ea9d31
commit b75cddf038
8 changed files with 70 additions and 135 deletions

View File

@ -12,10 +12,6 @@ const navigation = [
title: 'Stock',
link: '/market-news'
},
{
title: 'Crypto',
link: '/market-news/crypto'
},
{
title: 'General',
link: '/market-news/general'

View File

@ -9,7 +9,7 @@ export let data;
let rawData = data?.getMarketNews;
let news = rawData.slice(0,5) ?? [];
let news = rawData.slice(0,15) ?? [];
async function infiniteHandler({ detail: { loaded, complete } })
@ -83,7 +83,7 @@ function checkIfYoutubeVideo(link) {
<div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)}
<iframe
class="w-full h-56 rounded-none sm:rounded-lg"
class="w-full h-60 rounded-none sm:rounded-lg"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@ -91,8 +91,8 @@ function checkIfYoutubeVideo(link) {
></iframe>
{:else}
<a href={item.url} target="_blank">
<div class="h-48 sm:h-56 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item?.image} class="w-screen sm:w-full h-48 sm:h-56 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
<div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item?.image} class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}
@ -100,7 +100,7 @@ function checkIfYoutubeVideo(link) {
<div class="pl-3 pr-3">
<label class="mt-3 mb-3 cursor-pointer text-xs text-gray-200 flex flex-row items-center">
<div class="rounded-full w-6 h-6 relative bg-gray-800 mr-1.5 mb-0.5">
<img class="rounded-full w-4 h-4 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`} loading="lazy" />
<img class="rounded-full w-4 h-4 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
</div>
{item?.symbol} · {formatDate(item?.publishedDate)} ago
<span class="ml-auto text-gray-300 italic text-xs mr-2">

View File

@ -1,26 +1,6 @@
import { userRegion, getCache, setCache } from '$lib/store';
import { getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
export const load = async ({parent}) => {
const getMarketNews = async () => {
let output;
@ -29,13 +9,15 @@ export const load = async () => {
if (cachedData) {
output = cachedData;
} else {
const { apiURL, apiKey } = await parent();
const postData = {'newsType': 'stock-news'}
// make the POST request to the endpoint
const response = await fetch(apiURL + '/market-news', {
method: 'GET',
method: 'POST',
headers: {
"Content-Type": "application/json", "X-API-KEY": apiKey
},
body: JSON.stringify(postData)
});
output = await response.json();

View File

@ -1,55 +0,0 @@
import { userRegion, getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
export const load = async () => {
const getCryptoNews = async () => {
let output;
// Get cached data for the specific tickerID
const cachedData = getCache('', 'getCryptoNews');
if (cachedData) {
output = cachedData;
} else {
const postData = {
ticker: ''
};
// make the POST request to the endpoint
const response = await fetch(apiURL + '/crypto-news', {
method: 'GET',
headers: {
"Content-Type": "application/json", "X-API-KEY": apiKey
},
});
output = await response.json();
// Cache the data for this specific tickerID with a specific name 'getCryptoNews'
setCache('', output, 'getCryptoNews');
}
return output;
};
// Make sure to return a promise
return {
getCryptoNews: await getCryptoNews()
};
};

View File

@ -58,7 +58,6 @@
<!-- Other meta tags -->
<meta property="og:title" content={`Today's General 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.`} />
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<meta property="og:type" content="website"/>
<!-- Add more Open Graph meta tags as needed -->
@ -66,7 +65,6 @@
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content={`Today's General 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.`} />
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
@ -85,7 +83,7 @@
<div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)}
<iframe
class="w-full h-56 rounded-none sm:rounded-lg"
class="w-full h-60 rounded-none sm:rounded-lg"
src={`https://www.youtube.com/embed/${videoId}`}
frameborder="0"
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@ -93,8 +91,8 @@
></iframe>
{:else}
<a href={item?.url} target="_blank">
<div class="h-56 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item?.image} class="w-screen sm:w-full h-56 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
<div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item?.image} class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}

View File

@ -1,24 +1,8 @@
import { userRegion, getCache, setCache } from '$lib/store';
const usRegion = ['cle1','iad1','pdx1','sfo1'];
let apiURL;
let apiKey = import.meta.env.VITE_STOCKNEAR_API_KEY;
userRegion.subscribe(value => {
if (usRegion.includes(value)) {
apiURL = import.meta.env.VITE_USEAST_API_URL;
} else {
apiURL = import.meta.env.VITE_EU_API_URL;
}
});
import { getCache, setCache } from '$lib/store';
export const load = async () => {
export const load = async ({parent}) => {
const getGeneralNews = async () => {
let output;
@ -27,16 +11,16 @@ export const load = async () => {
if (cachedData) {
output = cachedData;
} else {
const postData = {
ticker: ''
};
const { apiURL, apiKey } = await parent();
const postData = {'newsType': 'general-news'}
// make the POST request to the endpoint
const response = await fetch(apiURL + '/general-news', {
method: 'GET',
const response = await fetch(apiURL + '/market-news', {
method: 'POST',
headers: {
"Content-Type": "application/json", "X-API-KEY": apiKey
},
body: JSON.stringify(postData)
});
output = await response.json();

View File

@ -6,7 +6,7 @@ import { formatDate } from '$lib/utils';
export let data;
let rawData = data?.getCryptoNews;
let rawData = data?.getPressRelease;
let news = rawData.slice(0,5) ?? [];
@ -82,29 +82,20 @@ function checkIfYoutubeVideo(link) {
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
{#if news.length !== 0}
{#each news as item}
<div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
{#if videoId = checkIfYoutubeVideo(item.url)}
<iframe
class="w-full h-56 rounded-none sm:rounded-lg"
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} target="_blank">
<div class="h-56 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item.image} class="w-screen sm:w-full h-56 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}
<div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[440px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
<a href={item.url} target="_blank">
<div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src="https://cdn.snapi.dev/images/v1/n/1/press11-2568834.jpg" class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
</div>
</a>
<div class="pl-3 pr-3">
<label class="mt-3 mb-3 cursor-pointer text-xs text-gray-200 flex flex-row items-center">
Source: {item?.site} · {formatDate(item?.publishedDate)} ago
Source: {item?.site} · {formatDate(item?.date)} ago
</label>
<a href={item.url} target="_blank" class="text-lg font-bold text-white">
<a href={item?.url} target="_blank" class="text-lg font-bold text-white">
{item?.title?.length > 120 ? item?.title?.slice(0,120) +'...' : item?.title}
</a>
<p class="text-white text-sm mt-2">

View File

@ -0,0 +1,39 @@
import { getCache, setCache } from '$lib/store';
export const load = async ({parent}) => {
const getPressRelease = async () => {
let output;
// Get cached data for the specific tickerID
const cachedData = getCache('', 'getPressRelease');
if (cachedData) {
output = cachedData;
} else {
const { apiURL, apiKey } = await parent();
const postData = {'newsType': 'press-releases'}
// 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)
});
output = await response.json();
// Cache the data for this specific tickerID with a specific name 'getPressRelease'
setCache('', output, 'getPressRelease');
}
return output;
};
// Make sure to return a promise
return {
getPressRelease: await getPressRelease()
};
};