From 30a256d434f5cab7feeef16836fbf1e00ad5f83b Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Thu, 31 Aug 2023 10:20:51 +0100
Subject: Adds RSS button

---
 public/css/modules/footer.css              | 27 +++++++++++++++++++++++++++
 public/css/modules/index.css               |  3 ++-
 public/images/rss.svg                      | 20 ++++++++++++++++++++
 src/components/Button.astro                | 10 +++-------
 src/components/Footer.astro                | 13 ++++++++++---
 src/i18n/translations/components/footer.ts | 15 +++++++++++++++
 src/i18n/translations/site.ts              |  4 ----
 src/pages/[locale]/index.astro             |  4 ++--
 8 files changed, 79 insertions(+), 17 deletions(-)
 create mode 100644 public/css/modules/footer.css
 create mode 100644 public/images/rss.svg
 create mode 100644 src/i18n/translations/components/footer.ts

diff --git a/public/css/modules/footer.css b/public/css/modules/footer.css
new file mode 100644
index 0000000..eb9e108
--- /dev/null
+++ b/public/css/modules/footer.css
@@ -0,0 +1,27 @@
+footer {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  gap: var(--grid-gutter-width);
+  align-items: baseline;
+}
+
+.footer__rss-button__label {
+  /* Hides the label from non-screen-readers */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.footer__rss-button__img {
+  width: calc(8 * var(--relative-eighth-rem));
+}
+
+.footer__back-to-top {
+  grid-column: calc(var(--grid-column-count) - 2) / calc(var(--grid-column-count) + 1);
+}
\ No newline at end of file
diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index 1a1c62a..d33754f 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -12,4 +12,5 @@
 @import './nav.lg.css' (min-width: 64rem);
 @import './skip-to-content.css';
 @import './committee.css';
-@import './committee.md.css' (min-width: 48rem);
\ No newline at end of file
+@import './committee.md.css' (min-width: 48rem);
+@import './footer.css';
diff --git a/public/images/rss.svg b/public/images/rss.svg
new file mode 100644
index 0000000..9a58156
--- /dev/null
+++ b/public/images/rss.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  id="RSSicon"
+  viewBox="0 0 8 8"
+  width="256"
+  height="256"
+>
+  <title>RSS feed icon</title>
+
+  <style type="text/css">
+    .button {stroke: none; fill: orange;}
+    .symbol {stroke: none; fill: white;}
+  </style>
+
+  <rect class="button" width="8" height="8" rx="1.5"/>
+  <circle class="symbol" cx="2" cy="6" r="1"/>
+  <path class="symbol" d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z"/>
+  <path class="symbol" d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/Button.astro b/src/components/Button.astro
index 9cc3885..20b6087 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,17 +1,13 @@
 ---
-import type Digit from '$types/Digit';
-
-type LayoutClasses = `grid-span-${Digit}${'' | ' grid-end' | ' grid-prose-end'}`;
-
 interface Props {
   href: string;
-  layoutClasses: LayoutClasses;
+  classNames: string;
 }
 
-const { href, layoutClasses } = Astro.props;
+const { href, classNames } = Astro.props;
 ---
 
-<a class={`btn ${layoutClasses}`} href={href}>
+<a class={`btn ${classNames}`} href={href}>
   <p>
     <slot />
   </p>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 62b3b82..40fdddb 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,6 @@
 ---
 import translate from '$i18n/translate';
-import tSite from '$i18n/translations/site';
+import tComponent from '$i18n/translations/components/footer';
 import { getLocaleFromPathOrDefault } from '$lib/getLocaleFromPath';
 import Button from './Button.astro';
 
@@ -9,7 +9,14 @@ const t = translate(locale);
 ---
 
 <footer>
-  <Button layoutClasses="grid-span-3 grid-end" href="#top">
-    ▲ {t(tSite, { key: 'back-to-top' })}
+  <a href={`/${locale}/rss.xml`} class="footer__rss-button">
+    <span class="footer__rss-button__label">
+      {t(tComponent, { key: 'subscribe-to-rss' })}
+    </span>
+    <img class="footer__rss-button__img" src="/images/rss.svg" />
+  </a>
+
+  <Button classNames="footer__back-to-top" href="#top">
+    ▲ {t(tComponent, { key: 'back-to-top' })}
   </Button>
 </footer>
diff --git a/src/i18n/translations/components/footer.ts b/src/i18n/translations/components/footer.ts
new file mode 100644
index 0000000..c7d6055
--- /dev/null
+++ b/src/i18n/translations/components/footer.ts
@@ -0,0 +1,15 @@
+import type { TranslationsDictionary } from '$types/TranslationsDictionary';
+
+const tComponent = {
+  'back-to-top': {
+    sco: () => 'Back til tap',
+    'en-GB': () => 'Back to top',
+  },
+  'subscribe-to-rss': {
+    sco: () => 'Subscrive til oor RSS feed',
+    'en-GB': () => 'Subscribe to our RSS feed',
+  },
+};
+
+type Raw = typeof tComponent;
+export default tComponent as TranslationsDictionary<Raw>;
diff --git a/src/i18n/translations/site.ts b/src/i18n/translations/site.ts
index 7d48670..59a8cd4 100644
--- a/src/i18n/translations/site.ts
+++ b/src/i18n/translations/site.ts
@@ -32,10 +32,6 @@ const tSite = {
     sco: () => 'an',
     'en-GB': () => 'and',
   },
-  'back-to-top': {
-    sco: () => 'Back til tap',
-    'en-GB': () => 'Back to top',
-  },
   locale: {
     sco: ({ locale }: { locale: Locale }) => {
       switch (locale) {
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 39db161..f031e8e 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -27,7 +27,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     <NewsIndex newsItems={mostRecentNewsItem ? [mostRecentNewsItem] : []} headingLevel="h3" />
     {
       mostRecentNewsItem && (
-        <Button layoutClasses="grid-span-3 grid-prose-end" href={`/${locale}/news`}>
+        <Button classNames="grid-span-3 grid-prose-end" href={`/${locale}/news`}>
           {t(tPage, { key: 'aw-news' })} ▶
         </Button>
       )
@@ -73,7 +73,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
   <section>
     <h2 set:html={t(tPage, { key: 'furthsettins' })} />
     <p set:html={t(tPage, { key: 'furthsettins-para' })} />
-    <Button layoutClasses="grid-span-3 grid-prose-end" href={`/${locale}/furthsettins`}>
+    <Button classNames="grid-span-3 grid-prose-end" href={`/${locale}/furthsettins`}>
       {t(tPage, { key: 'aw-furthsettins' })} ▶
     </Button>
   </section>
-- 
cgit v1.2.3