From d718b6bc6a853a394818db7895d93f4a575ed6e4 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 30 Jan 2025 12:14:57 +0100
Subject: [PATCH] update ui

---
 src/lib/components/SEO.svelte               | 15 ++++++---
 src/routes/blog/+page.svelte                | 37 ++++-----------------
 src/routes/blog/article/[slug]/+page.svelte | 28 ++++------------
 3 files changed, 23 insertions(+), 57 deletions(-)

diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte
index a9f3e8ee..d8f579c8 100644
--- a/src/lib/components/SEO.svelte
+++ b/src/lib/components/SEO.svelte
@@ -3,6 +3,7 @@
 
   export let title;
   export let description;
+  export let image;
 </script>
 
 <svelte:head>
@@ -17,15 +18,21 @@
   </title>
 
   <meta name="description" content={description} />
-  <!-- Other meta tags -->
+
+  <!-- Open Graph meta tags -->
   <meta property="og:title" content={`${title} - Stocknear`} />
   <meta property="og:description" content={description} />
   <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
+  {#if image}
+    <meta property="og:image" content={image} />
+    <meta property="og:image:alt" content={title} />
+  {/if}
 
-  <!-- Twitter specific meta tags -->
+  <!-- Twitter meta tags -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content={`${title} - Stocknear`} />
   <meta name="twitter:description" content={description} />
-  <!-- Add more Twitter meta tags as needed -->
+  {#if image}
+    <meta name="twitter:image" content={image} />
+  {/if}
 </svelte:head>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 64cd0425..72bb251a 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,42 +1,17 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
   import { getImageURL, convertToSlug } from "$lib/utils";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
   let allBlogPosts = data?.getAllBlogPost;
 </script>
 
-<svelte:head>
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Stock
-    Analysis Blog · stocknear</title
-  >
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-
-  <meta
-    name="description"
-    content="Get the latest blog post to understand and invest correctly into companies."
-  />
-  <!-- Other meta tags -->
-  <meta property="og:title" content="Stock Analysis Blog · stocknear" />
-  <meta
-    property="og:description"
-    content="Get the latest blog post to understand and invest correctly into companies."
-  />
-  <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="Stock Analysis Blog · stocknear" />
-  <meta
-    name="twitter:description"
-    content="Get the latest blog post to understand and invest correctly into companies."
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
+<SEO
+  title="Stock
+    Analysis Blog"
+  description="Get the latest blog post to understand and invest correctly into companies."
+/>
 
 <section
   class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
diff --git a/src/routes/blog/article/[slug]/+page.svelte b/src/routes/blog/article/[slug]/+page.svelte
index 88c05bcb..749e1c06 100644
--- a/src/routes/blog/article/[slug]/+page.svelte
+++ b/src/routes/blog/article/[slug]/+page.svelte
@@ -1,35 +1,19 @@
 <script>
   import { numberOfUnreadNotification } from "$lib/store";
   import { getImageURL } from "$lib/utils";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
   const article = data?.getArticle;
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
-    {article?.title} · stocknear</title
-  >
-  <meta
-    name="description"
-    content="Latest articles on stocks, finance and investing"
-  />
-  <!-- Other meta tags -->
-  <meta property="og:title" content={article?.title} />
-  <meta property="og:description" content={article?.abstract} />
-  <meta property="og:type" content="article" />
-  <!-- Add more Open Graph meta tags as needed -->
+<SEO
+  title={article?.title}
+  description={article?.abstract}
+  image={getImageURL(article?.collectionId, article?.id, article?.cover)}
+/>
 
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content={article?.title} />
-  <meta name="twitter:description" content={article?.abstract} />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
 <div>
   <main id="main" class="mt-2 text-white min-h-screen pb-40">
     <div class="mx-auto max-w-screen-xl">