diff options
| -rw-r--r-- | public/css/modules/footer.css | 27 | ||||
| -rw-r--r-- | public/css/modules/index.css | 3 | ||||
| -rw-r--r-- | public/images/rss.svg | 20 | ||||
| -rw-r--r-- | src/components/Button.astro | 10 | ||||
| -rw-r--r-- | src/components/Footer.astro | 13 | ||||
| -rw-r--r-- | src/i18n/translations/components/footer.ts | 15 | ||||
| -rw-r--r-- | src/i18n/translations/site.ts | 4 | ||||
| -rw-r--r-- | src/pages/[locale]/index.astro | 4 |
8 files changed, 79 insertions, 17 deletions
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> |
