Skip to content

Commit

Permalink
Merge pull request #83 from geo-milev/support-articles-without-option…
Browse files Browse the repository at this point in the history
…al-fields

Support articles without optional fields
  • Loading branch information
MihailMihov authored Sep 21, 2023
2 parents b2497a0 + 403c2d2 commit b44802e
Show file tree
Hide file tree
Showing 14 changed files with 75 additions and 72 deletions.
27 changes: 13 additions & 14 deletions src/lib/ArticlePreview.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -42,6 +37,10 @@
width: 100%;
}
.preview-image.logo {
object-fit: contain;
}
.content {
display: flex;
padding: 1rem;
Expand Down
20 changes: 15 additions & 5 deletions src/lib/BigArticlePreview.svelte
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -36,6 +42,10 @@
filter: brightness(0.5);;
}
.preview-image.logo {
object-fit: contain;
}
.content {
position: relative;
display: flex;
Expand Down
13 changes: 11 additions & 2 deletions src/lib/Project.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/SecondaryButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/SecondarySubmit.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 5 additions & 0 deletions src/lib/logo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { writable } from "svelte/store";

const logo = writable({});

export { logo };
18 changes: 0 additions & 18 deletions src/lib/mapArticles.ts

This file was deleted.

29 changes: 15 additions & 14 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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,
Expand Down
3 changes: 1 addition & 2 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -39,7 +38,7 @@
}
})
let articleProps = mapArticles(data.allNews.docs).map((article) => {
let articleProps = data.allNews.docs.map((article) => {
return {
preview: article
}
Expand Down
7 changes: 3 additions & 4 deletions src/routes/achievements/+page.svelte
Original file line number Diff line number Diff line change
@@ -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
}
Expand Down
6 changes: 2 additions & 4 deletions src/routes/achievements/[category]/+page.svelte
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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">
Expand Down Expand Up @@ -53,7 +52,6 @@
align-items: center;
margin-top: 2rem;
margin-bottom: 3rem;
gap: 3rem;
}
.header-container {
Expand Down
5 changes: 2 additions & 3 deletions src/routes/news/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
})
}
Expand Down
7 changes: 4 additions & 3 deletions src/routes/news/[id]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -134,7 +135,7 @@
width: 100%;
max-width: 50rem;
height: 100%;
max-height: 50rem;
max-height: 30rem;
}
.article-content {
Expand Down
3 changes: 2 additions & 1 deletion src/routes/projects/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@
}
.project-preview {
max-width: min(40rem, 100%);
min-width: 100%;
max-width: 40rem;
}
</style>

0 comments on commit b44802e

Please sign in to comment.