add news component
This commit is contained in:
MuslemRahimi
parent
0536279f6e
commit
1616f92c16
160
src/lib/components/News.svelte
Normal file
160
src/lib/components/News.svelte
Normal file
@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
import { stockTicker } from "$lib/store";
|
||||
|
||||
export let data;
|
||||
|
||||
let rawData = [];
|
||||
let newsList = [];
|
||||
|
||||
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 = rawData?.slice(nextIndex, nextIndex + 20);
|
||||
newsList = [...newsList, ...newArticles];
|
||||
}
|
||||
|
||||
$: {
|
||||
if ($stockTicker && typeof window !== "undefined") {
|
||||
rawData = data?.getNews;
|
||||
newsList = rawData?.slice(0, 20) ?? [];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-3 overflow-hidden">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full p-1 flex flex-col m-auto">
|
||||
<div class="flex flex-col items-center w-full mb-3">
|
||||
<div class="flex flex-row justify-start mr-auto items-center">
|
||||
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
|
||||
<div class="flex flex-row items-center">
|
||||
<label
|
||||
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
|
||||
>
|
||||
News
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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))}
|
||||
<div class="w-full aspect-video mb-4">
|
||||
<iframe
|
||||
class="w-full h-full 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>
|
||||
</div>
|
||||
<div class="w-full px-4 pb-4">
|
||||
<h3 class="text-sm text-white/80 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}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<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="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>
|
||||
{/if}
|
||||
</div>
|
||||
<hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
|
||||
{/each}
|
||||
</div>
|
||||
{#if newsList?.length !== rawData?.length}
|
||||
<label
|
||||
on:click={loadMoreData}
|
||||
class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full 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 sm:hover:bg-purple-700 bg-purple-600"
|
||||
>
|
||||
Load More News
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -76,11 +76,12 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
|
||||
"/next-earnings",
|
||||
"/earnings-surprise",
|
||||
"/dividend-announcement",
|
||||
"/stock-news",
|
||||
];
|
||||
|
||||
const promises = [
|
||||
...endpoints.map((endpoint) =>
|
||||
fetchData(apiURL, apiKey, endpoint, tickerID)
|
||||
fetchData(apiURL, apiKey, endpoint, tickerID),
|
||||
),
|
||||
fetchWatchlist(pb, user?.id),
|
||||
//fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id),
|
||||
@ -99,6 +100,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
|
||||
getNextEarnings,
|
||||
getEarningsSurprise,
|
||||
getDividendAnnouncement,
|
||||
getNews,
|
||||
getUserWatchlist,
|
||||
getCommunitySentiment,
|
||||
] = await Promise.all(promises);
|
||||
@ -115,6 +117,7 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
|
||||
getNextEarnings,
|
||||
getEarningsSurprise,
|
||||
getDividendAnnouncement,
|
||||
getNews,
|
||||
getUserWatchlist,
|
||||
getCommunitySentiment,
|
||||
companyName: cleanString(getStockDeck?.at(0)?.companyName),
|
||||
|
||||
@ -894,23 +894,6 @@ function handleTypeOfTrade(state:string)
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2.5rem]"
|
||||
/>
|
||||
</li>
|
||||
<li class="cursor-pointer flex flex-col items-center">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/news`}
|
||||
on:click={() => changeSection("news")}
|
||||
class="px-3 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySection ===
|
||||
'news'
|
||||
? 'text-white '
|
||||
: 'bg-[#09090B]'}"
|
||||
>
|
||||
News
|
||||
</a>
|
||||
<div
|
||||
class="{displaySection === 'news'
|
||||
? 'bg-[#75D377]'
|
||||
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[2rem]"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,25 +4,10 @@
|
||||
import {
|
||||
getCache,
|
||||
setCache,
|
||||
fomcImpactComponent,
|
||||
corporateLobbyingComponent,
|
||||
revenueSegmentationComponent,
|
||||
taRatingComponent,
|
||||
swapComponent,
|
||||
governmentContractComponent,
|
||||
optionsNetFlowComponent,
|
||||
clinicalTrialComponent,
|
||||
optionComponent,
|
||||
failToDeliverComponent,
|
||||
screenWidth,
|
||||
displayCompanyName,
|
||||
numberOfUnreadNotification,
|
||||
globalForm,
|
||||
varComponent,
|
||||
shareStatisticsComponent,
|
||||
enterpriseComponent,
|
||||
darkPoolComponent,
|
||||
shareholderComponent,
|
||||
isCrosshairMoveActive,
|
||||
realtimePrice,
|
||||
priceIncrease,
|
||||
@ -36,6 +21,7 @@
|
||||
} from "$lib/store";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import BullBearSay from "$lib/components/BullBearSay.svelte";
|
||||
|
||||
import NextEarnings from "$lib/components/NextEarnings.svelte";
|
||||
import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
|
||||
import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
|
||||
@ -1570,7 +1556,7 @@
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
|
||||
?.getWhyPriceMoved?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
@ -1581,139 +1567,19 @@
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$revenueSegmentationComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/RevenueSegmentation.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$clinicalTrialComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/ClinicalTrial.svelte") then { default: Comp }}
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
|
||||
?.getNews?.length !== 0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<Lazy
|
||||
>{#await import("$lib/components/News.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$varComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
{/await}</Lazy
|
||||
>
|
||||
{#await import("$lib/components/VaR.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pt-6 {!$governmentContractComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/GovernmentContract.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$fomcImpactComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/FOMCImpact.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$corporateLobbyingComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/CorporateLobbying.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$swapComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/Swap.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/OptionsData.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$optionsNetFlowComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/OptionsNetFlow.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$failToDeliverComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/FailToDeliver.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$darkPoolComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/DarkPool.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
|
||||
<!--Start Shareholders-->
|
||||
</div>
|
||||
<!--
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full sm:pl-6 sm:pb-6 sm:pt-6 m-auto mb-5 {!$shareholderComponent
|
||||
@ -1725,19 +1591,8 @@
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
-->
|
||||
<!--End Shareholders-->
|
||||
|
||||
<Lazy>
|
||||
<div
|
||||
class="w-full pt-10 m-auto sm:pl-6 sm:pb-6 sm:pt-6 rounded-2xl {!$taRatingComponent
|
||||
? 'hidden'
|
||||
: ''}"
|
||||
>
|
||||
{#await import("$lib/components/TARating.svelte") then { default: Comp }}
|
||||
<svelte:component this={Comp} {data} />
|
||||
{/await}
|
||||
</div>
|
||||
</Lazy>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,159 +1,190 @@
|
||||
<script lang='ts'>
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
||||
<script lang="ts">
|
||||
import {
|
||||
numberOfUnreadNotification,
|
||||
displayCompanyName,
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
|
||||
export let data;
|
||||
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);
|
||||
|
||||
let rawNews = data?.getStockNews;
|
||||
let newsList = rawNews?.slice(0,20) ?? [];
|
||||
// Calculate the difference in milliseconds
|
||||
const difference = inputDate.getTime() - currentNYCDate.getTime();
|
||||
|
||||
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' : ''}`;
|
||||
}
|
||||
};
|
||||
// Convert the difference to minutes
|
||||
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
|
||||
|
||||
let videoId = null;
|
||||
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" : ""}`;
|
||||
}
|
||||
};
|
||||
|
||||
function checkIfYoutubeVideo(link) {
|
||||
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=([^&]+)/);
|
||||
const searchParams = url.searchParams;
|
||||
searchParams.delete("t"); // Remove the "t" parameter
|
||||
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
||||
|
||||
if (videoIdMatch) {
|
||||
return videoIdMatch[1];
|
||||
}
|
||||
if (videoIdMatch) {
|
||||
return videoIdMatch[1];
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function loadMoreData() {
|
||||
const nextIndex = newsList?.length;
|
||||
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
||||
newsList = [...newsList, ...newArticles];
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
{$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}).`} />
|
||||
|
||||
<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"/>
|
||||
<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}).`} />
|
||||
<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>
|
||||
|
||||
<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}
|
||||
|
||||
|
||||
<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>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user