Add banner

Author: davepagurek

src/components/Banner/index.astro

@@ -0,0 +1,31 @@
+---
+import { Icon } from "@components/Icon"
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+const { link, title } = entry.data;
+---
+
+<div class="banner bg-accent-color" style={{ display: 'none' }} data-title={title}>
+  <a class="banner-content" href={link} target="_blank">
+    <Content />
+  </a>
+  <button id="hideBanner"><Icon kind="close"></button>
+</div>
+
+<script>
+const banner = document.querySelector('.banner');
+const hiddenBanner = window.localStorage.getItem('hideBanner');
+const title = banner.getAttribute('data-title');
+if (hiddenBanner !== title) {
+  banner.removeAttribute('style');
+}
+const hideBanner = () => {
+  banner.setAttribute('style', 'display: none');
+  try {
+    window.localStorage.setItem('hideBanner', title);
+  } catch (e) {
+    console.error(e);
+  }
+}
+document.querySelector('#hideBanner').addEventListener('click', hideBanner);
+</script>

src/components/Footer/index.astro

@@ -1,9 +1,16 @@
 ---
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
+import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
 import { Icon } from "../Icon";
+import Banner from "@components/Banner/index.astro";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
+
+const collection = await getCollectionInLocaleWithFallbacks("text-detail", currentLocale);
+const bannerEntry = collection.find((entry) => entry.slug === 'banner');
+console.log(currentLocale)
+console.log(bannerEntry)
 ---
 
 <footer
@@ -59,5 +66,6 @@ const t = await getUiTranslator(currentLocale);
     </div>
   </div>
 </footer>
+{bannerEntry && !bannerEntry.data.hidden && (<Banner entry={bannerEntry} />)}
 
 <style></style>

src/content/text-detail/config.ts

@@ -7,5 +7,7 @@ export const textDetailCollection = defineCollection({
       title: z.string(),
       featuredImage: image().optional(),
       featuredImageAlt: z.string().optional(),
+      link: z.string().optional(),
+      hidden: z.boolean().optional(),
     }),
 });

src/content/text-detail/en/banner.mdx

@@ -0,0 +1,9 @@
+---
+slug: "banner"
+# Give each new message a unique title so we know which one a user closed
+title: "pr05"
+link: "https://processingfoundation.org/grants"
+hidden: false
+---
+
+Apply to the $10k pr05 grant by May 31!

styles/global.scss

@@ -299,7 +299,7 @@ pre.code-box {
 /** LAYOUT **/
 
 .top-layout-grid {
-  --nav-width: 100vw;
+  --nav-width: 100%;
   --nav-offset-x: 0;
 
   @media (min-width: $breakpoint-tablet) {
@@ -320,13 +320,36 @@ pre.code-box {
     }
   }
 
+  .banner,
   .settings,
   header,
   main,
   footer {
     margin-left: var(--nav-offset-x);
   }
 
+  .banner {
+    display: flex;
+    flex-direction: row;
+    position: sticky;
+    bottom: 0;
+    padding: var(--spacing-xs) var(--spacing-md);
+    border-top: 1px solid var(--type-color);
+
+    & .banner-content {
+      flex: 1;
+      margin-right: var(--pacing-sm);
+    }
+
+    @media (min-width: $breakpoint-tablet) {
+      padding: var(--spacing-sm) var(--spacing-lg);
+    }
+
+    & p {
+      margin: 0;
+    }
+  }
+
   header {
     .homepage-header-top {
       display: flex;
@@ -344,6 +367,7 @@ pre.code-box {
       }
 
       @media (min-width: $breakpoint-laptop) {
+        height: calc(50vh - var(--spacing-3xl));
         max-height: calc(50vh - var(--spacing-3xl));
       }
     }
@@ -404,9 +428,9 @@ th {
 }
 
 .hero-image {
-  left: -2.5rem;
-  width: calc(100% + 5rem);
-  max-width: calc(100% + 5rem);
+  left: calc(-1 * var(--spacing-lg));
+  width: calc(100% + 2 * var(--spacing-lg));
+  max-width: calc(100% + 2 * var(--spacing-lg));
   max-height: 50vh;
   height: 50vh;
   position: relative;