ui fix
This commit is contained in:
MuslemRahimi
parent
d9f0768657
commit
8049a504d2
@ -453,12 +453,12 @@ $: {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<body class="bg-[#09090B] pb-40">
|
<body class="bg-[#09090B] pb-40">
|
||||||
<!-- Page wrapper -->
|
<!-- Page wrapper -->
|
||||||
<div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
|
<div class="flex flex-col min-h-screen overflow-hidden m-auto w-full mt-5 supports-[overflow:clip]:overflow-clip pb-40">
|
||||||
<main class="grow">
|
<main class="grow">
|
||||||
<section>
|
<section>
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="sm:flex sm:justify-start w-full">
|
<div class="sm:flex sm:justify-start w-full">
|
||||||
|
|
||||||
<!--Start Mobile Navbar-->
|
<!--Start Mobile Navbar-->
|
||||||
<div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden ">
|
<div class="navbar w-screen sticky top-0 z-30 bg-[#09090B] sm:hidden ">
|
||||||
@ -543,17 +543,17 @@ $: {
|
|||||||
<!--End Mobile Navbar-->
|
<!--End Mobile Navbar-->
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">
|
<div class="w-full xl:w-fit max-w-3xl sm:max-w-7xl m-auto px-3">
|
||||||
|
|
||||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||||
<!-- Main content -->
|
<!-- Main content -->
|
||||||
<div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
|
<div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-5xl">
|
||||||
<div class="md:pr-6 lg:pr-10">
|
<div class="md:pr-6 lg:pr-10">
|
||||||
|
|
||||||
|
|
||||||
<!-----Start-Header-CandleChart-Indicators------>
|
<!-----Start-Header-CandleChart-Indicators------>
|
||||||
|
|
||||||
<div class="m-auto pl-0 sm:pl-4 max-w-3xl overflow-hidden mb-5 md:mt-10">
|
<div class="m-auto pl-0 sm:pl-4 overflow-hidden mb-5 md:mt-10">
|
||||||
|
|
||||||
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
|
<div class="hidden sm:flex flex-row w-full justify-between items-center pb-10">
|
||||||
|
|
||||||
@ -702,7 +702,7 @@ $: {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="hidden lg:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
|
<aside class="hidden xl:block w-fit max-w-xl 2xl:w-[120px] m-auto sm:m-0 md:shrink-0 md:pt-10 pb-12 md:pb-20">
|
||||||
<div class="sm:pl-10">
|
<div class="sm:pl-10">
|
||||||
|
|
||||||
<CryptoProfileCard
|
<CryptoProfileCard
|
||||||
|
|||||||
@ -681,7 +681,6 @@ afterUpdate(async () => {
|
|||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
|
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
|
||||||
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
<meta property="og:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||||
<!--<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
|
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website"/>
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
@ -689,7 +688,6 @@ afterUpdate(async () => {
|
|||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image"/>
|
||||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
|
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) Stock Price, Quote & News · stocknear`}/>
|
||||||
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
<meta name="twitter:description" content={`Get a real-time ${$displayCompanyName} (${$cryptoTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
|
||||||
<!--<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>-->
|
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
@ -697,12 +695,12 @@ afterUpdate(async () => {
|
|||||||
|
|
||||||
<section class="bg-[#09090B] min-h-screen pb-40">
|
<section class="bg-[#09090B] min-h-screen pb-40">
|
||||||
|
|
||||||
<div class="w-full max-w-4xl m-auto ">
|
<div class="w-full max-w-5xl m-auto ">
|
||||||
|
|
||||||
|
|
||||||
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
<div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
|
||||||
<!-- Main content -->
|
<!-- Main content -->
|
||||||
<div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
|
<div class="pb-12 md:pb-20 w-full sm:pr-6 xl:pr-0">
|
||||||
<div class="xl:pr-10">
|
<div class="xl:pr-10">
|
||||||
|
|
||||||
|
|
||||||
@ -798,7 +796,7 @@ afterUpdate(async () => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||||
{#if displayChartType === 'line'}
|
{#if displayChartType === 'line'}
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||||
{:else}
|
{:else}
|
||||||
@ -813,7 +811,7 @@ afterUpdate(async () => {
|
|||||||
<!-- Start Graph -->
|
<!-- Start Graph -->
|
||||||
|
|
||||||
{#if output !== null}
|
{#if output !== null}
|
||||||
<div class ="w-full sm:pl-7 ml-auto max-w-3xl mb-10">
|
<div class ="w-full sm:pl-7 ml-auto max-w-5xl mb-10">
|
||||||
{#if displayData === '1D' && oneDayPrice?.length === 0}
|
{#if displayData === '1D' && oneDayPrice?.length === 0}
|
||||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||||
No data available
|
No data available
|
||||||
@ -835,7 +833,7 @@ afterUpdate(async () => {
|
|||||||
No data available
|
No data available
|
||||||
</h2>
|
</h2>
|
||||||
{:else if displayData === 'MAX' && threeYearPrice?.length === 0}
|
{:else if displayData === 'MAX' && threeYearPrice?.length === 0}
|
||||||
<h2 class=" mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
<h2 class="mt-20 flex h-[240px] justify-center items-center text-3xl font-bold text-slate-700 mb-20 m-auto">
|
||||||
No data available
|
No data available
|
||||||
</h2>
|
</h2>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@ -9,6 +9,7 @@
|
|||||||
import { getPartyForPoliticians } from '$lib/utils';
|
import { getPartyForPoliticians } from '$lib/utils';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let rawData = data?.getSenateTrading;
|
let rawData = data?.getSenateTrading;
|
||||||
@ -65,7 +66,7 @@ const district = {
|
|||||||
|
|
||||||
function replaceMultipleStrings(inputString, replacements) {
|
function replaceMultipleStrings(inputString, replacements) {
|
||||||
// Create a regular expression pattern by joining the keys of the replacements object with '|'
|
// Create a regular expression pattern by joining the keys of the replacements object with '|'
|
||||||
const pattern = new RegExp(Object.keys(replacements).join('|'), 'gi');
|
const pattern = new RegExp(Object?.keys(replacements)?.join('|'), 'gi');
|
||||||
|
|
||||||
// Replace occurrences of the pattern with the corresponding values in the replacements object
|
// Replace occurrences of the pattern with the corresponding values in the replacements object
|
||||||
const resultString = inputString.replace(pattern, match => replacements[match]);
|
const resultString = inputString.replace(pattern, match => replacements[match]);
|
||||||
@ -79,7 +80,7 @@ async function infiniteHandler({ detail: { loaded, complete } })
|
|||||||
complete();
|
complete();
|
||||||
} else {
|
} else {
|
||||||
const nextIndex = senateTradingList?.length;
|
const nextIndex = senateTradingList?.length;
|
||||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
|
const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
|
||||||
senateTradingList = [...senateTradingList, ...newArticles];
|
senateTradingList = [...senateTradingList, ...newArticles];
|
||||||
loaded();
|
loaded();
|
||||||
}
|
}
|
||||||
@ -141,12 +142,13 @@ const typeCounts = rawData?.reduce((counts, item) => {
|
|||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"]/partyCounts["Republican"];
|
partyRatio = partyCounts['Democratic'] > 0 && partyCounts['Republican'] === undefined ? 1 : partyCounts['Democratic'] === undefined ? 0 : partyCounts["Democratic"]/partyCounts["Republican"];
|
||||||
buySellRatio = typeCounts['Bought']/typeCounts['Sold'];
|
buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"]/typeCounts["Sold"];
|
||||||
|
|
||||||
senateTradingList = rawData?.slice(0,20) ?? [];
|
senateTradingList = rawData?.slice(0,20) ?? [];
|
||||||
|
|
||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -164,7 +166,6 @@ isLoaded = true;
|
|||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
|
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
|
||||||
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
|
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
|
||||||
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website"/>
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
@ -172,7 +173,6 @@ isLoaded = true;
|
|||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<meta name="twitter:card" content="summary_large_image"/>
|
||||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
|
<meta name="twitter:title" content={`${$displayCompanyName} (${$cryptoTicker}) US Congress & Senate Trading · stocknear`}/>
|
||||||
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
|
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$cryptoTicker}) from democrates and republicans.`} />
|
||||||
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
@ -181,14 +181,14 @@ isLoaded = true;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0">
|
||||||
<div class="flex justify-center w-fit m-auto h-full overflow-hidden">
|
<div class="h-full overflow-hidden">
|
||||||
<div class="relative flex justify-center items-center overflow-hidden">
|
<div class="relative flex justify-center items-center overflow-hidden">
|
||||||
<div class="sm:p-7 sm:w-full sm:max-w-3xl m-auto mt-5 sm:mt-0">
|
<div class="sm:p-7 w-full mt-2 sm:mt-0">
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||||
Congress Trading
|
Congress Trading
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
|
||||||
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
|
||||||
@ -210,7 +210,7 @@ isLoaded = true;
|
|||||||
</h3>
|
</h3>
|
||||||
<!--Start Widget-->
|
<!--Start Widget-->
|
||||||
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
||||||
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||||
|
|
||||||
<!--Start Buy/Sell-->
|
<!--Start Buy/Sell-->
|
||||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||||
@ -330,11 +330,14 @@ isLoaded = true;
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||||
|
|
||||||
{:else}
|
{:else}
|
||||||
<div class="relative w-full mt-10">
|
<div class="relative w-full mt-10">
|
||||||
|
|||||||
@ -1,138 +1,135 @@
|
|||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
|
import {numberOfUnreadNotification, displayCompanyName, cryptoTicker} from '$lib/store';
|
||||||
import { formatDate } from '$lib/utils';
|
import { formatDate } from '$lib/utils';
|
||||||
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 -->
|
export let data;
|
||||||
<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: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 -->
|
|
||||||
|
|
||||||
<!-- 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}).`} />
|
|
||||||
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
|
||||||
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="w-auto max-w-3xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
|
let rawNews = data?.getStockNews;
|
||||||
<div class="m-auto h-full overflow-hidden ">
|
let newsList = rawNews?.slice(0,20) ?? [];
|
||||||
<main class="">
|
|
||||||
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
|
|
||||||
<div class="mb-6">
|
let videoId = null;
|
||||||
<h1 class="text-2xl sm:text-3xl text-white font-bold">
|
|
||||||
News
|
function checkIfYoutubeVideo(link) {
|
||||||
</h1>
|
|
||||||
</div>
|
const url = new URL(link);
|
||||||
|
if (url?.hostname === "www.youtube.com") {
|
||||||
{#if newsList.length !== 0}
|
const searchParams = url.searchParams;
|
||||||
<div class="grid grid-cols-1 gap-2 pb-5">
|
searchParams.delete('t'); // Remove the "t" parameter
|
||||||
{#each newsList as item}
|
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
|
||||||
<div class="flex flex-col bg-[#09090B] rounded-lg m-auto">
|
|
||||||
{#if videoId = checkIfYoutubeVideo(item.url)}
|
if (videoIdMatch) {
|
||||||
<iframe
|
return videoIdMatch[1];
|
||||||
class="w-full h-96 rounded-lg"
|
}
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
} else {
|
||||||
frameborder="0"
|
return null;
|
||||||
allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
}
|
||||||
allowfullscreen
|
}
|
||||||
></iframe>
|
|
||||||
{:else}
|
function loadMoreData() {
|
||||||
<a href={item?.url} rel="noopener noreferrer" target="_blank">
|
const nextIndex = newsList?.length;
|
||||||
<div class="flex-shrink-0 m-auto ">
|
const newArticles = rawNews?.slice(nextIndex, nextIndex + 20);
|
||||||
<img src={item?.image} class=" w-full rounded-lg" alt="news image" loading="lazy">
|
newsList = [...newsList, ...newArticles];
|
||||||
</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
|
</script>
|
||||||
</h3>
|
|
||||||
|
|
||||||
<a href={item?.url} rel="noopener noreferrer" target="_blank" class="text-lg font-bold text-white">
|
<svelte:head>
|
||||||
{item?.title}
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
<p class="text-white text-sm mt-2 font-normal">
|
<meta name="viewport" content="width=device-width" />
|
||||||
{item?.text}
|
<title>
|
||||||
</p>
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear
|
||||||
</a>
|
</title>
|
||||||
</div>
|
<meta name="description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$cryptoTicker}).`} />
|
||||||
</div>
|
|
||||||
|
<!-- Other meta tags -->
|
||||||
<hr class="border-blue-400 w-full m-auto mt-5 mb-5">
|
<meta property="og:title" content={`${$displayCompanyName} (${$cryptoTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
||||||
{/each}
|
<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-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="border border-gray-800 rounded-lg">
|
||||||
|
<div class="flex-shrink-0 m-auto ">
|
||||||
|
<img src={item?.image} class=" w-full rounded-lg" 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>
|
||||||
|
|
||||||
</div>
|
<hr class="border-blue-400 w-full m-auto mt-5 mb-5">
|
||||||
{#if newsList?.length !== rawNews?.length}
|
{/each}
|
||||||
<label on:click={loadMoreData} class="shadow-lg rounded-lg cursor-pointer w-11/12 sm:w-full flex justify-center items-center py-3 h-full text-sm sm:text-lg text-center font-medium text-white m-auto hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6]">
|
|
||||||
Load More News
|
</div>
|
||||||
</label>
|
{#if newsList?.length !== rawNews?.length}
|
||||||
{/if}
|
<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>
|
||||||
{:else}
|
{/if}
|
||||||
<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-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!
|
{:else}
|
||||||
</div>
|
<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-lg h-auto p-5 mb-4">
|
||||||
{/if}
|
<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>
|
||||||
</div>
|
{/if}
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</section>
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@ -873,7 +873,7 @@ async function initializePrice() {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#18181B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||||
{#if displayChartType === 'line'}
|
{#if displayChartType === 'line'}
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
|
||||||
import { formatDate } from '$lib/utils';
|
import { formatDate } from '$lib/utils';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
@ -46,20 +46,20 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<title>
|
<title>
|
||||||
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) latest Stock Market News and Breaking Stories · stocknear
|
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$etfTicker}) latest Stock Market News and Breaking Stories · stocknear
|
||||||
</title>
|
</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} (${$etfTicker}).`} />
|
||||||
|
|
||||||
<!-- Other meta tags -->
|
<!-- Other meta tags -->
|
||||||
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) latest Stock Market News and Breaking Stories · stocknear`}/>
|
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) 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:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website"/>
|
||||||
<!-- Add more Open Graph meta tags as needed -->
|
<!-- Add more Open Graph meta tags as needed -->
|
||||||
|
|
||||||
<!-- Twitter specific meta tags -->
|
<!-- Twitter specific meta tags -->
|
||||||
<meta name="twitter:card" content="summary_large_image"/>
|
<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:title" content={`${$displayCompanyName} (${$etfTicker}) 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:description" content={`Get the latest stock market news and breaking stories of ${$displayCompanyName} (${$etfTicker}).`} />
|
||||||
<!-- Add more Twitter meta tags as needed -->
|
<!-- Add more Twitter meta tags as needed -->
|
||||||
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
||||||
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
|
import {numberOfUnreadNotification, displayCompanyName, screenWidth, etfTicker} from '$lib/store';
|
||||||
import { Chart } from 'svelte-echarts'
|
import { Chart } from 'svelte-echarts'
|
||||||
import { abbreviateNumber } from '$lib/utils';
|
import { abbreviateNumber } from '$lib/utils';
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
import InfoModal from '$lib/components/InfoModal.svelte';
|
||||||
@ -108,8 +108,8 @@ use([BarChart, GridComponent, CanvasRenderer])
|
|||||||
},
|
},
|
||||||
silent: true,
|
silent: true,
|
||||||
grid: {
|
grid: {
|
||||||
left: '10%',
|
left: $screenWidth < 640 ? '5%' : '2%',
|
||||||
right: '5%',
|
right: $screenWidth < 640 ? '5%' : '2%',
|
||||||
bottom: '20%',
|
bottom: '20%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
@ -392,7 +392,7 @@ use([BarChart, GridComponent, CanvasRenderer])
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
|
<div class="app w-full bg-[#09090B] rounded-xl">
|
||||||
<Chart {init} options={options} class="chart" />
|
<Chart {init} options={options} class="chart" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -832,7 +832,7 @@ function changeChartType() {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
<label on:click={changeChartType} class="ml-auto -mt-3 block cursor-pointer bg-[#27272A] sm:hover:bg-[#303030] duratiion-100 transition ease-in-out px-3 py-1 rounded-lg shadow-sm">
|
||||||
{#if displayChartType === 'line'}
|
{#if displayChartType === 'line'}
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"/></svg>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@ -210,7 +210,7 @@ isLoaded = true;
|
|||||||
</h3>
|
</h3>
|
||||||
<!--Start Widget-->
|
<!--Start Widget-->
|
||||||
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
<div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
|
||||||
<div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||||
|
|
||||||
<!--Start Buy/Sell-->
|
<!--Start Buy/Sell-->
|
||||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user