Merge pull request #99 from geo-milev/add-announcements

Add announcements
geo-milev · Nov 9, 2023 · 40824a5 · 40824a5
2 parents d5ac8f5 + 574ec50
commit 40824a5
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 4 deletions.
diff --git a/src/lib/Announcements.svelte b/src/lib/Announcements.svelte
@@ -0,0 +1,80 @@
+<script>
+	import OpenInNew from "$lib/OpenInNew.svelte";
+
+	export let announcements;
+</script>
+<div class="container">
+	{#each announcements as announcement}
+		<div class="announcement">
+			{#if announcement.href}
+				<a href="{announcement.href}">{announcement.text}<div class="open-in-new"><OpenInNew /></div></a>
+				{:else}
+				<span>{announcement.text}</span>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.container {
+		min-height: 2.5rem;
+		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+        background-color: #7D0B09;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.announcement {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+        min-height: 28px;
+		padding-left: 1rem;
+        padding-right: 1rem;
+        flex: 1 1 auto;
+		height: 100%;
+		text-align: center;
+	}
+
+	.announcement:first-child {
+		border-left: none;
+	}
+
+	.announcement a {
+        pointer-events: auto;
+	}
+
+	.announcement a, .announcement span {
+        font-family: 'Roboto', serif;
+        font-weight: 300;
+        font-size: 18px;
+        line-height: 18px;
+        text-transform: none;
+        color: #FFFFFF;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+	}
+
+	.announcement .open-in-new {
+		margin-left: 5px;
+        height: 18px;
+        width: 18px;
+	}
+
+	.announcement a:hover {
+		color: white;
+		text-decoration: underline;
+	}
+
+    .announcement .open-in-new :global(svg) {
+        fill: white;
+        height: 18px;
+        width: 18px;
+    }
+</style>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
@@ -3,6 +3,7 @@
     import { onMount } from "svelte";
     import DesktopNav from "$lib/DesktopNav.svelte";
     import ProgressBar from "$lib/ProgressBar.svelte";
+    import Announcements from "$lib/Announcements.svelte";
 
     export let navigation;
 
@@ -28,6 +29,7 @@
     export let logoHref: string;
     export let logoHrefAlt: string;
     export let logoWidth: number;
+    export let announcements: {text: string, link: string}[]
 
     $: scrollMode = (scrollY > 0) || !fixed;
 </script>
@@ -36,6 +38,9 @@
 
 <div class="nav-container" class:fixed="{fixed}" style="--logo-width: {logoWidth}px; --mobile-breakpoint: {mobileBreakpoint}px">
     <ProgressBar />
+    {#if fixed && announcements.length > 0}
+        <Announcements announcements="{announcements}"></Announcements>
+    {/if}
     <div class="navbar">
         <div class="background" class:scrolled="{scrollMode}"></div>
 

diff --git a/src/lib/OpenInNew.svelte b/src/lib/OpenInNew.svelte
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
+	<path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/>
+</svg>
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
@@ -1,24 +1,37 @@
 import { env } from "$env/dynamic/public";
 
 export async function load({ fetch, data, url }) {
-    const res = await fetch(
+    const res = fetch(
         env.PUBLIC_SERVER_URL +
             `/api/pages-seo-data?where[relativeUrl][equals]=${url.pathname}`
     );
+    const resAnnouncements = fetch(
+        env.PUBLIC_SERVER_URL + `/api/announcements?limit=3&sort=editedAt`
+    );
+
+    const [seoText, announcementsText] = await Promise.all([
+        res,
+        resAnnouncements,
+    ]);
 
-    const json = await res.json();
+    const [seoJson, announcementJson] = await Promise.all([
+        seoText.json(),
+        announcementsText.json(),
+    ]);
 
-    if (json.docs.length !== 1) {
+    if (seoJson.docs.length !== 1) {
         return {
             seoData: undefined,
+            announcementData: announcementJson,
             ...data,
         };
     }
 
-    const remoteSeoData = json.docs[0];
+    const remoteSeoData = seoJson.docs[0];
 
     return {
         seoData: remoteSeoData,
+        announcementData: announcementJson,
         pathname: url.pathname,
         href: url.href,
         ...data,

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -110,6 +110,7 @@
 		logoHref="{env.PUBLIC_SERVER_URL + data.MainInfo.logo.url}"
 		logoHrefAlt="{data.MainInfo.logo.alt}"
 		logoWidth="{data.MainInfo.logo.width}"
+		announcements="{data.announcementData.docs}" 
 		navigation="{data.Navigation.sections}" />
 
 <slot />