Support articles without optional fields

src/lib/ArticlePreview.svelte

@@ -1,28 +1,23 @@
 <script lang="ts">
 	import Button from "$lib/Button.svelte";
+	import { env } from "$env/dynamic/public";
+	import { logo } from "$lib/logo.js";
 
-	interface ArticlePreview {
-		title: string;
-		description: string;
-		image: {
-			url,
-			alt
-		}
-		href: string;
-		date: Date;
-	}
-
-	export let preview: ArticlePreview;
+	export let preview;
 </script>
 
 <div class="container">
-	<img class="preview-image" loading="lazy" src="{preview.image.url}" alt="{preview.image.alt}"/>
+	{#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}">
+	{/if}
 	<div class="content">
 		<div class="text">
 			<h3>{preview.title}</h3>
 			<p>{preview.description}</p>
 		</div>
-		<div class="button"><Button href="{preview.href}" text="Виж още" target="_blank"/></div>
+		<div class="button"><Button href="/news/{preview.id}" text="Виж още" target="_blank"/></div>
 	</div>
 </div>
 
@@ -42,6 +37,10 @@
 		width: 100%;
 	}
 
+	.preview-image.logo {
+		object-fit: contain;
+	}
+
 	.content {
 		display: flex;
 		padding: 1rem;

src/lib/BigArticlePreview.svelte

@@ -1,19 +1,25 @@
 <script lang="ts">
 	import Button from "$lib/Button.svelte";
-	import ArticlePreview from "./ArticlePreview.svelte";
+	import { env } from "$env/dynamic/public";
+	import { logo } from "$lib/logo";
 
-	export let preview: ArticlePreview;
+	export let preview;
 </script>
 
 <div class="container">
-	<img class="preview-image" loading="lazy" src="{preview.image.url}" alt="{preview.image.alt}">
+	{#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}">
+	{/if}
 	<div class="content">
 		<div class="text">
-			<span>{preview.date.toLocaleDateString("bg-BG", { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+			<span>{new Date(preview.publishDate)
+				.toLocaleDateString("bg-BG", { year: 'numeric', month: 'long', day: 'numeric' })}</span>
 			<div class="separator"></div>
 			<h2>{preview.title}</h2>
 		</div>
-		<div class="button"><Button href="{preview.href}" text="Виж още" target="_blank" /></div>
+		<div class="button"><Button href="/news/{preview.id}" text="Виж още" target="_blank"/></div>
 	</div>
 </div>
 
@@ -36,6 +42,10 @@
 		filter: brightness(0.5);;
 	}
 
+	.preview-image.logo {
+         object-fit: contain;
+	}
+
 	.content {
         position: relative;
         display: flex;

src/lib/Project.svelte

@@ -6,8 +6,10 @@
 </script>
 
 <div class="container">
-	<img src="{env.PUBLIC_SERVER_URL + project.image.url}" alt="{project.image.alt}" loading="lazy">
-	<div class="content">
+	{#if project.image}
+		<img src="{env.PUBLIC_SERVER_URL + project.image.url}" alt="{project.image.alt}" loading="lazy">
+	{/if}
+	<div class="content {project.image? '': 'no-image'}">
 		<div class="header-container">
 			<h2>{project.name}</h2>
 			<div class="line"></div>
@@ -46,6 +48,13 @@
 		padding-right: 1rem;
 	}
 
+    .content.no-image {
+		width: 100%;
+		padding: 1rem;
+		justify-content: center;
+		align-items: center;
+	}
+
 	.content p {
         font-family: 'Roboto', serif;
         font-style: normal;

src/lib/SecondaryButton.svelte

@@ -25,7 +25,7 @@
         font-size: 19px;
         line-height: 22px;
 		color: var(--color);
-        font-family: 'Roboto Flex', serif;
+        font-family: 'Roboto Flex Variable', serif;
         font-variation-settings: 'GRAD' -150;
     }
 

src/lib/SecondarySubmit.svelte

@@ -14,7 +14,7 @@
         padding: 0.5rem 3rem;
         color: #FFFFFF;
         text-transform: uppercase;
-        font-family: 'Roboto Flex', serif;
+        font-family: 'Roboto Flex Variable', serif;
         font-style: normal;
         text-align: center;
         cursor: pointer;

src/lib/logo.ts

@@ -0,0 +1,5 @@
+import { writable } from "svelte/store";
+
+const logo = writable({});
+
+export { logo };

src/routes/+layout.svelte

@@ -7,24 +7,12 @@
 	import { env } from "$env/dynamic/public";
 	import { seoInfo } from "../lib/seoInfo";
 	import { page } from "$app/stores";
+	import { logo } from "$lib/logo";
 
 	setContext('layout', layout);
 
 	setLayout(mainLayout)
 
-	onMount(() => {
-		layout.subscribe((layoutProps) => {
-			window.document.body.style.backgroundColor = layoutProps.navbar.backgroundColor
-		})
-	})
-
-	const client = new Client({
-		url: env.PUBLIC_SERVER_URL + "/api/graphql",
-		exchanges: [cacheExchange, fetchExchange],
-	});
-
-	setContextClient(client);
-
 	export let data;
 
 	onMount(() => {
@@ -36,12 +24,25 @@
 		import('@fontsource/roboto/300-italic.css');
 		import('@fontsource/roboto/400-italic.css');
 		import('@fontsource/roboto/500-italic.css');
-		import('@fontsource-variable/roboto-flex/opsz.css');
+		import('@fontsource-variable/roboto-flex/full.css');
 		import('@fontsource/alegreya/400.css');
 		import('@fontsource/alegreya/500.css');
 		import('@fontsource/alegreya/700.css');
+
+		logo.set(data.MainInfo.logo)
+
+		layout.subscribe((layoutProps) => {
+			window.document.body.style.backgroundColor = layoutProps.navbar.backgroundColor
+		})
 	})
 
+	const client = new Client({
+		url: env.PUBLIC_SERVER_URL + "/api/graphql",
+		exchanges: [cacheExchange, fetchExchange],
+	});
+
+	setContextClient(client);
+
   seoInfo.set({
 		title: data.MainInfo.name,
 		description: undefined,

src/routes/+page.svelte

@@ -6,7 +6,6 @@
 	import Carousel from "$lib/Carousel.svelte";
 	import Button from "$lib/Button.svelte";
 	import { mainLayout, setLayout } from "../lib/setLayout"
-	import { mapArticles } from "../lib/mapArticles";
 	import { env } from "$env/dynamic/public";
 	import { onMount } from "svelte";
 
@@ -39,7 +38,7 @@
 		}
 	})
 
-	let articleProps = mapArticles(data.allNews.docs).map((article) => {
+	let articleProps = data.allNews.docs.map((article) => {
 		return {
 			preview: article
 		}

src/routes/achievements/+page.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
 	import ArticlePreview from "../../lib/ArticlePreview.svelte";
 	import { secondaryLayout, setLayout } from "../../lib/setLayout";
-	import { mapArticles } from "../../lib/mapArticles";
 	import Carousel from "$lib/Carousel.svelte";
 	import SecondaryButton from "$lib/SecondaryButton.svelte";
 
 	setLayout(secondaryLayout)
 
 	export let data;
 
-	let olympiads = mapArticles(data.olympiads).map((article) => {
+	let olympiads = data.olympiads.map((article) => {
 		return {
 			preview: article
 		}
 	})
 
-	let sports = mapArticles(data.sports).map((article) => {
+	let sports = data.sports.map((article) => {
 		return {
 			preview: article
 		}
 	})
 
-	let arts = mapArticles(data.arts).map((article) => {
+	let arts = data.arts.map((article) => {
 		return {
 			preview: article
 		}

src/routes/achievements/[category]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { secondaryLayout, setLayout } from "../../../lib/setLayout";
-	import { mapArticles } from "../../../lib/mapArticles";
 	import ArticlePreview from "$lib/ArticlePreview.svelte";
 	import { fly } from "svelte/transition";
 	import SecondaryButton from "$lib/SecondaryButton.svelte";
@@ -18,11 +17,11 @@
 		page++;
 		client.query(getAchievementQueryWithPagination(data.category), { page: page, }).then((res) => {
 			remainArticles = res.data.allNews.hasNextPage
-			articles = [...articles, ...mapArticles(res.data.allNews.docs)]
+			articles = [...articles, ...res.data.allNews.docs]
 		})
 	}
 
-	let articles = mapArticles(data.articles.allNews.docs)
+	let articles = data.articles.allNews.docs
 </script>
 
 <div class="container">
@@ -53,7 +52,6 @@
 		align-items: center;
 		margin-top: 2rem;
 		margin-bottom: 3rem;
-		gap: 3rem;
 	}
 
     .header-container {

src/routes/news/+page.svelte

@@ -5,14 +5,13 @@
 	import { fly } from "svelte/transition";
 	import { secondaryLayout, setLayout } from "../../lib/setLayout";
 	import { getContextClient } from "@urql/svelte";
-	import { mapArticles } from "../../lib/mapArticles";
 	import RSSFeedIcon from "$lib/RSSFeedIcon.svelte";
 
 	setLayout(secondaryLayout)
 
 	export let data;
 
-	let articles = mapArticles(data.allNews.docs)
+	let articles = data.allNews.docs
 
 	let remainArticles = data.allNews.hasNextPage;
 	let page = 1;
@@ -37,7 +36,7 @@
 					}
 				}
    		 	`, { page }).then(result => {
-					articles = articles.concat(mapArticles(result.data.allNews.docs))
+					articles = articles.concat(result.data.allNews.docs)
 					remainArticles = result.data.allNews.hasNextPage
 				})
 	}

src/routes/news/[id]/+page.svelte

@@ -17,7 +17,6 @@
 		seoInfo.title = data.News.title
 		seoInfo.description = data.News.description
 		seoInfo.type = "article"
-		seoInfo.imageUrl = data.News.postImage.url
 		seoInfo.publishDate = data.News.publishDate
 
 		return seoInfo
@@ -82,7 +81,9 @@
 			<p>{data.News.description}</p>
 		</div>
 	</div>
-	<img src="{env.PUBLIC_SERVER_URL + data.News.postImage.url}" alt="{data.News.postImage.alt}"/>
+	{#if data.News.postImage}
+		<img src="{env.PUBLIC_SERVER_URL + data.News.postImage.url}" alt="{data.News.postImage.alt}"/>
+	{/if}
 	<BlockRenderer blocks="{data.News.content}"
 				   buttonColor={buttonColor}
 				   textColor={textColor}
@@ -134,7 +135,7 @@
         width: 100%;
         max-width: 50rem;
         height: 100%;
-        max-height: 50rem;
+        max-height: 30rem;
     }
 
     .article-content {

src/routes/projects/+page.svelte

@@ -118,6 +118,7 @@
 	}
 
 	.project-preview {
-		max-width: min(40rem, 100%);
+		min-width: 100%;
+		max-width: 40rem;
 	}
 </style>