Merge pull request #92 from geo-milev/fix-news-seo

Fix news OpenGraph not working
geo-milev · Oct 6, 2023 · df801d9 · df801d9
2 parents e403550 + 780faf9
commit df801d9
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 58 deletions.
diff --git a/src/lib/ArticlePreview.svelte b/src/lib/ArticlePreview.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
 	import Button from "$lib/Button.svelte";
 	import { env } from "$env/dynamic/public";
-	import { logo } from "$lib/logo.js";
+	import { seoAutofillImage } from "$lib/seoAutofillImage";
 
 	export let preview;
 </script>
 
 <div class="container">
 	{#if preview.postImage}
-		<img class="preview-image" loading="lazy" src="{env.PUBLIC_SERVER_URL + preview.postImage.url}" alt="{preview.postImage.alt}"/>
+		<img class="preview-image" loading="lazy" src="{env.PUBLIC_SERVER_URL + preview.postImage.url}" alt="{preview.postImage.alt}">
 	{:else}
-		<img class="preview-image logo" loading="lazy" src="{env.PUBLIC_SERVER_URL + $logo.url}" alt="{$logo.alt}">
+		<img class="preview-image" loading="lazy" src="{env.PUBLIC_SERVER_URL + $seoAutofillImage.url}" alt="{$seoAutofillImage.alt}">
 	{/if}
 	<div class="content">
 		<div class="text">
@@ -37,10 +37,6 @@
 		width: 100%;
 	}
 
-	.preview-image.logo {
-		object-fit: contain;
-	}
-
 	.content {
 		display: flex;
 		padding: 1rem;

diff --git a/src/lib/BigArticlePreview.svelte b/src/lib/BigArticlePreview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Button from "$lib/Button.svelte";
 	import { env } from "$env/dynamic/public";
-	import { logo } from "$lib/logo";
+	import { seoAutofillImage } from "$lib/seoAutofillImage";
 
 	export let preview;
 </script>
@@ -10,7 +10,7 @@
 	{#if preview.postImage}
 		<img class="preview-image" loading="lazy" src="{env.PUBLIC_SERVER_URL + preview.postImage.url}" alt="{preview.postImage.alt}">
 	{:else}
-		<img class="preview-image logo" loading="lazy" src="{env.PUBLIC_SERVER_URL + $logo.url}" alt="{$logo.alt}">
+		<img class="preview-image logo" loading="lazy" src="{env.PUBLIC_SERVER_URL + $seoAutofillImage.url}" alt="{$seoAutofillImage.url}">
 	{/if}
 	<div class="content">
 		<div class="text">
@@ -39,11 +39,11 @@
 		width: 100%;
 		height: 100%;
 		bottom: 0;
-		filter: brightness(0.5);;
+		filter: brightness(0.5);
 	}
 
 	.preview-image.logo {
-         object-fit: contain;
+		background-color: #FFFFFF;
 	}
 
 	.content {

diff --git a/src/lib/logo.ts b/src/lib/logo.ts
diff --git a/src/lib/seoAutofillImage.ts b/src/lib/seoAutofillImage.ts
@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+const seoAutofillImage = writable({});
+
+export { seoAutofillImage };
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
@@ -19,6 +19,8 @@ export async function load({ fetch, data, url }) {
 
     return {
         seoData: remoteSeoData,
+        pathname: url.pathname,
+        href: url.href,
         ...data,
     };
 }
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
@@ -17,6 +17,13 @@ export async function load({ fetch }) {
                     alt
                     width
                 }
+                seoAutofillImage {
+                    url
+                    alt
+                }
+                favicon {
+                    url
+                }
                 favicons {
                     size
                     favicon {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -6,8 +6,7 @@
 	import { cacheExchange, Client, fetchExchange, setContextClient } from "@urql/svelte";
 	import { env } from "$env/dynamic/public";
 	import { seoInfo } from "../lib/seoInfo";
-	import { page } from "$app/stores";
-	import { logo } from "$lib/logo";
+	import { seoAutofillImage } from "$lib/seoAutofillImage";
 
 	setContext('layout', layout);
 
@@ -29,7 +28,7 @@
 		import('@fontsource/alegreya/500.css');
 		import('@fontsource/alegreya/700.css');
 
-		logo.set(data.MainInfo.logo)
+		seoAutofillImage.set(data.MainInfo.seoAutofillImage)
 
 		layout.subscribe((layoutProps) => {
 			window.document.body.style.backgroundColor = layoutProps.navbar.backgroundColor
@@ -43,43 +42,43 @@
 
 	setContextClient(client);
 
-  seoInfo.set({
-		title: data.MainInfo.name,
-		description: undefined,
-		url: $page.url.href,
-		siteName: data.MainInfo.name,
-		imageUrl: undefined,
-		type: undefined,
-		publishDate: undefined
-	})
+	const resetSeo = () => {
+		seoInfo.set({
+			title: data.MainInfo.name,
+			description: data.MainInfo.name,
+			url: data.href,
+			siteName: data.MainInfo.name,
+			imageUrl: data.MainInfo.seoAutofillImage.url,
+			type: "website",
+			publishDate: undefined
+		})
+	}
+
+	resetSeo()
 
 	$: if (data.seoData) {
-		seoInfo.update((seoInfo) => {
-			seoInfo.title = data.seoData.title
-			seoInfo.description = data.seoData.description
-			seoInfo.imageUrl = data.seoData.image.url
-			seoInfo.url = $page.url.href
-			seoInfo.type = undefined
-			seoInfo.publishDate = undefined
-
-			return seoInfo
+		seoInfo.update((seo) => {
+			seo.title = data.seoData.title
+			seo.description = data.seoData.description
+			seo.imageUrl = data.seoData.image ? data.seoData.image.url: data.MainInfo.seoAutofillImage.url
+			seo.url = data.href
+			seo.type = "website"
+			seo.publishDate = undefined
+
+			if (data.pathname.startsWith("/news/")) {
+				seo.type = "article"
+				seo.publishDate = data.seoData.lastUpdate
+			}
+
+			return seo
 		})
 	} else {
-		if (!$page.url.pathname.startsWith("/news/")) {
-			seoInfo.set({
-				title: data.MainInfo.name,
-				description: undefined,
-				url: $page.url.href,
-				siteName: data.MainInfo.name,
-				imageUrl: undefined,
-				type: undefined,
-				publishDate: undefined
-			})
-		}
+		resetSeo()
 	}
 </script>
 
 <svelte:head>
+	<link rel="icon" type="image/x-icon" href="/favicon.ico">
 	{#each data.MainInfo.favicons as favicon}
 		<link rel="icon" type="image/png" sizes="{favicon.size}"
 			  href={env.PUBLIC_SERVER_URL + favicon.favicon.url} />

diff --git a/src/routes/favicon.ico/+server.js b/src/routes/favicon.ico/+server.js
@@ -0,0 +1,13 @@
+import { env } from "$env/dynamic/public";
+
+export async function GET() {
+    const res = await (
+        await fetch(env.PUBLIC_SERVER_URL + `/api/globals/main-info`)
+    ).json();
+    const file = await (
+        await fetch(env.PUBLIC_SERVER_URL + res.favicon.url)
+    ).blob();
+    const response = new Response(file);
+    response.headers.set("Content-Type", "image/x-icon");
+    return response;
+}
diff --git a/src/routes/news/[id]/+page.svelte b/src/routes/news/[id]/+page.svelte
@@ -2,7 +2,6 @@
 	import { setLayout, tertiaryLayout, tertiaryLayoutDark } from "$lib/setLayout";
 	import { env } from "$env/dynamic/public";
 	import BlockRenderer from "$lib/BlockRenderer.svelte";
-	import { seoInfo } from "$lib/seoInfo";
 	import { onMount } from "svelte";
 	import DarkModeIcon from "$lib/DarkModeIcon.svelte";
 	import LightModeIcon from "$lib/LightModeIcon.svelte";
@@ -13,15 +12,6 @@
 
 	export let data;
 
-	seoInfo.update(seoInfo => {
-		seoInfo.title = data.News.title
-		seoInfo.description = data.News.description
-		seoInfo.type = "article"
-		seoInfo.publishDate = data.News.publishDate
-
-		return seoInfo
-	})
-
 	let mode = "light"
 	let buttonColor
 	let textColor