From d10de3ec1f187ca99049e517d3b71725fbd941ea Mon Sep 17 00:00:00 2001 From: Nikola Ganchev Date: Tue, 26 Sep 2023 11:22:32 +0300 Subject: [PATCH 1/6] Fix news OpenGraph not working --- src/routes/+layout.js | 1 + src/routes/+layout.svelte | 49 ++++++++++++++++++------------- src/routes/news/[id]/+page.svelte | 10 ------- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/src/routes/+layout.js b/src/routes/+layout.js index d99cd63..dabae08 100644 --- a/src/routes/+layout.js +++ b/src/routes/+layout.js @@ -19,6 +19,7 @@ export async function load({ fetch, data, url }) { return { seoData: remoteSeoData, + pathname: url.pathname, ...data, }; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e2b069e..e7fb8cc 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -53,29 +53,38 @@ publishDate: undefined }) + const resetSeo = () => { + seoInfo.set({ + title: data.MainInfo.name, + description: undefined, + url: $page.url.href, + siteName: data.MainInfo.name, + imageUrl: undefined, + type: undefined, + 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.url + seo.url = $page.url.href + seo.type = undefined + 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() } diff --git a/src/routes/news/[id]/+page.svelte b/src/routes/news/[id]/+page.svelte index 213d0e8..0dd5b67 100644 --- 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 From cd11265d6f23d32cfaf70d562134b3f3cc3bd7c6 Mon Sep 17 00:00:00 2001 From: Nikola Ganchev Date: Tue, 26 Sep 2023 16:27:59 +0300 Subject: [PATCH 2/6] Use remote seo autofill image --- src/lib/ArticlePreview.svelte | 4 ++-- src/lib/BigArticlePreview.svelte | 4 ++-- src/lib/logo.ts | 5 ----- src/lib/seoAutofillImage.ts | 5 +++++ src/routes/+layout.js | 1 + src/routes/+layout.server.js | 4 ++++ src/routes/+layout.svelte | 23 ++++++----------------- 7 files changed, 20 insertions(+), 26 deletions(-) delete mode 100644 src/lib/logo.ts create mode 100644 src/lib/seoAutofillImage.ts diff --git a/src/lib/ArticlePreview.svelte b/src/lib/ArticlePreview.svelte index f293fb0..b2efe98 100644 --- a/src/lib/ArticlePreview.svelte +++ b/src/lib/ArticlePreview.svelte @@ -1,7 +1,7 @@ @@ -10,7 +10,7 @@ {#if preview.postImage} {preview.postImage.alt} {:else} - + {/if}
diff --git a/src/lib/BigArticlePreview.svelte b/src/lib/BigArticlePreview.svelte index 80fd71b..16c6df9 100644 --- a/src/lib/BigArticlePreview.svelte +++ b/src/lib/BigArticlePreview.svelte @@ -1,7 +1,7 @@ @@ -10,7 +10,7 @@ {#if preview.postImage} {preview.postImage.alt} {:else} - + {/if}
diff --git a/src/lib/logo.ts b/src/lib/logo.ts deleted file mode 100644 index b0063c0..0000000 --- a/src/lib/logo.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { writable } from "svelte/store"; - -const logo = writable({}); - -export { logo }; diff --git a/src/lib/seoAutofillImage.ts b/src/lib/seoAutofillImage.ts new file mode 100644 index 0000000..49c4bfa --- /dev/null +++ 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 index dabae08..e663a77 100644 --- a/src/routes/+layout.js +++ b/src/routes/+layout.js @@ -20,6 +20,7 @@ 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 index 14e4827..39388fe 100644 --- a/src/routes/+layout.server.js +++ b/src/routes/+layout.server.js @@ -17,6 +17,10 @@ export async function load({ fetch }) { alt width } + seoAutofillImage { + url + alt + } favicons { size favicon { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e7fb8cc..89c85be 100644 --- 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,23 +42,13 @@ 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: undefined, - url: $page.url.href, + description: data.MainInfo.name, + url: data.href, siteName: data.MainInfo.name, - imageUrl: undefined, + imageUrl: data.MainInfo.seoAutofillImage.url, type: undefined, publishDate: undefined }) @@ -72,7 +61,7 @@ seo.title = data.seoData.title seo.description = data.seoData.description seo.imageUrl = data.seoData.image.url - seo.url = $page.url.href + seo.url = data.href seo.type = undefined seo.publishDate = undefined From e4088843587ebbcb80fe53a40f0461a97937625b Mon Sep 17 00:00:00 2001 From: Nikola Ganchev Date: Tue, 26 Sep 2023 16:29:51 +0300 Subject: [PATCH 3/6] Use white background on BigArticlePreview.svelte --- src/lib/BigArticlePreview.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/BigArticlePreview.svelte b/src/lib/BigArticlePreview.svelte index 16c6df9..262fc4e 100644 --- a/src/lib/BigArticlePreview.svelte +++ b/src/lib/BigArticlePreview.svelte @@ -39,11 +39,12 @@ width: 100%; height: 100%; bottom: 0; - filter: brightness(0.5);; + filter: brightness(0.5); } .preview-image.logo { object-fit: contain; + background-color: #FFFFFF; } .content { From 58eeaf0e7e3a87f0c7a7bde0ad56f2ae57868fac Mon Sep 17 00:00:00 2001 From: Nikola Ganchev Date: Tue, 26 Sep 2023 16:33:58 +0300 Subject: [PATCH 4/6] Use object-fit: cover for autofilled article previews --- src/lib/ArticlePreview.svelte | 8 ++------ src/lib/BigArticlePreview.svelte | 1 - 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/lib/ArticlePreview.svelte b/src/lib/ArticlePreview.svelte index b2efe98..e156f3d 100644 --- a/src/lib/ArticlePreview.svelte +++ b/src/lib/ArticlePreview.svelte @@ -8,9 +8,9 @@
{#if preview.postImage} - {preview.postImage.alt} + {preview.postImage.alt} {:else} - + {$seoAutofillImage.alt} {/if}
@@ -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 index 262fc4e..ed548db 100644 --- a/src/lib/BigArticlePreview.svelte +++ b/src/lib/BigArticlePreview.svelte @@ -43,7 +43,6 @@ } .preview-image.logo { - object-fit: contain; background-color: #FFFFFF; } From 1532d823845ad7786a88d4646580942310c56371 Mon Sep 17 00:00:00 2001 From: Nikola Ganchev Date: Tue, 26 Sep 2023 17:09:41 +0300 Subject: [PATCH 5/6] Use .ico favicon --- src/routes/+layout.server.js | 3 +++ src/routes/+layout.svelte | 1 + src/routes/favicon.ico/+server.js | 13 +++++++++++++ 3 files changed, 17 insertions(+) create mode 100644 src/routes/favicon.ico/+server.js diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js index 39388fe..18b735f 100644 --- a/src/routes/+layout.server.js +++ b/src/routes/+layout.server.js @@ -21,6 +21,9 @@ export async function load({ fetch }) { url alt } + favicon { + url + } favicons { size favicon { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 89c85be..214f969 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -78,6 +78,7 @@ + {#each data.MainInfo.favicons as favicon} diff --git a/src/routes/favicon.ico/+server.js b/src/routes/favicon.ico/+server.js new file mode 100644 index 0000000..f2d9639 --- /dev/null +++ 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; +} From 780faf9bc8bae342eacc1a38d87a2888512da965 Mon Sep 17 00:00:00 2001 From: Nikola Ganchev Date: Tue, 26 Sep 2023 20:49:46 +0300 Subject: [PATCH 6/6] Expect seoData without description or image --- src/routes/+layout.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 214f969..9a282d7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -49,7 +49,7 @@ url: data.href, siteName: data.MainInfo.name, imageUrl: data.MainInfo.seoAutofillImage.url, - type: undefined, + type: "website", publishDate: undefined }) } @@ -60,9 +60,9 @@ seoInfo.update((seo) => { seo.title = data.seoData.title seo.description = data.seoData.description - seo.imageUrl = data.seoData.image.url + seo.imageUrl = data.seoData.image ? data.seoData.image.url: data.MainInfo.seoAutofillImage.url seo.url = data.href - seo.type = undefined + seo.type = "website" seo.publishDate = undefined if (data.pathname.startsWith("/news/")) {