Merge branch 'main' into homepage-images

Author: davepagurek

docs/banner.md

@@ -0,0 +1,22 @@
+# Banner
+
+A banner can optionally be added at the bottom of the page with a custom message and link.
+
+## Adding a new banner
+
+Edit the banner text in the body of `src/content/banner/en.mdx`.
+
+Within the file's metadata:
+- Change the `title` metadata to a new slug for each message. This does not get displayed anywhere, but it gets recorded when a user dismisses the banner. This way, we can hide that banner for the user the next time they return, but still show them a new banner when we create a new message.
+- Make sure `hidden` is `true` for the banner to be visible
+
+## Translating banners
+
+Copy the `en.mdx` file to `${locale}.mdx` (e.g. `es.mdx`) and translate just the body text, leaving the metadata the same.
+
+## Removing a banner
+
+- Set `hidden` to `true` in `src/content/banner/en.mdx`
+- Delete any translations of the banner that have been made in non-`en` locales.
+
+  This is to make sure that the next time a new banner is made, there is a clean slate to start from for translations.

src/components/Banner/index.astro

@@ -0,0 +1,34 @@
+---
+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 text-accent-type-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 hideBannerBtn = document.querySelector('#hideBanner');
+if (banner && hideBannerBtn) {
+  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);
+    }
+  }
+  hideBannerBtn.addEventListener('click', hideBanner);
+}
+</script>

src/components/Footer/index.astro

@@ -1,9 +1,13 @@
 ---
+import { getEntry } from "astro:content";
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
 import { Icon } from "../Icon";
+import Banner from "@components/Banner/index.astro";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
+
+const bannerEntry = await getEntry("banner", currentLocale);
 ---
 
 <footer
@@ -58,5 +62,6 @@ const t = await getUiTranslator(currentLocale);
     </div>
   </div>
 </footer>
+{bannerEntry && !bannerEntry.data.hidden && (<Banner entry={bannerEntry} />)}
 
 <style></style>

src/content/banner/config.ts

@@ -0,0 +1,11 @@
+import { z, defineCollection } from "astro:content";
+
+export const bannerCollection = defineCollection({
+  type: "content",
+  schema: () =>
+    z.object({
+      title: z.string(),
+      link: z.string(),
+      hidden: z.boolean().optional(),
+    }),
+});

src/content/banner/en.mdx

@@ -0,0 +1,8 @@
+---
+# 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!

src/content/config.ts

@@ -8,6 +8,7 @@ import { examplesCollection } from "./examples/config";
 import { contributorDocsCollection } from "./contributor-docs/config";
 import { homepageCollection } from "./homepage/config";
 import { pagesCollection } from "./pages/config";
+import { bannerCollection } from "./banner/config";
 
 /**
  * All content collections defined in subfolders of /src/content/
@@ -26,4 +27,5 @@ export const collections = {
   "contributor-docs": contributorDocsCollection,
   homepage: homepageCollection,
   pages: pagesCollection,
+  banner: bannerCollection,
 };

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;