diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/CommitteeList/CommitteeList.astro | 8 | ||||
| -rw-r--r-- | src/components/CommitteeList/CommitteeListItem.astro | 55 | ||||
| -rw-r--r-- | src/components/Footer.astro | 2 | ||||
| -rw-r--r-- | src/components/LallansIssue.astro | 3 | ||||
| -rw-r--r-- | src/components/LallansIssuesGallery.astro | 5 | ||||
| -rw-r--r-- | src/components/Scotsoun.astro | 3 | ||||
| -rw-r--r-- | src/components/ScotsounCdGallery.astro | 3 |
7 files changed, 73 insertions, 6 deletions
diff --git a/src/components/CommitteeList/CommitteeList.astro b/src/components/CommitteeList/CommitteeList.astro new file mode 100644 index 0000000..f576c9a --- /dev/null +++ b/src/components/CommitteeList/CommitteeList.astro @@ -0,0 +1,8 @@ +--- +import committee from '$data/committee'; +import CommitteeListItem from './CommitteeListItem.astro'; +--- + +<ul> + {committee.map((committeeMember) => <CommitteeListItem committeeMember={committeeMember} />)} +</ul> diff --git a/src/components/CommitteeList/CommitteeListItem.astro b/src/components/CommitteeList/CommitteeListItem.astro new file mode 100644 index 0000000..9a5a55b --- /dev/null +++ b/src/components/CommitteeList/CommitteeListItem.astro @@ -0,0 +1,55 @@ +--- +import CommitteeRole from '$enums/CommitteeRole'; +import tRole from '$i18n/translations/enums/committeeRole'; +import translate from '$i18n/translate'; +import type { CommitteeMember } from '$types/CommitteeMember'; +import type Locale from '$types/Locale'; + +interface Props { + committeeMember: CommitteeMember; +} + +const { committeeMember } = Astro.props; + +const locale = Astro.params.locale as Locale; + +const t = translate(locale); +--- + +<li class="committee__member"> + { + committeeMember.img && ( + <img + class="committee__member__img" + srcset={` + ${committeeMember.img.width106.src} 106w, + ${committeeMember.img.width146.src} 146w, + ${committeeMember.img.width192.src} 192w, + ${committeeMember.img.width222.src} 222w + `} + sizes=" + (min-width: 120rem) 222px, + (min-width: 96rem) 146px, + (min-width: 64rem) 192px, + (min-width: 48rem) 222px, + 106px + " + alt="" + /> + ) + } + <div class="committee__member__text"> + <h4> + {committeeMember.name} + { + committeeMember.roles.length > 0 && ( + <span class="font-weight-lighter"> + |{' '} + {committeeMember.roles.map((role) => t(tRole, { key: CommitteeRole[role] })).join(', ')} + </span> + ) + } + </h4> + {committeeMember.bio && <p set:html={committeeMember.bio[locale]} />} + </div> +</li> diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ffb49c9..f582d33 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -14,7 +14,7 @@ const t = translate(locale); <span class="footer__rss-button__label"> {t(tComponent, { key: 'subscribe-to-rss' })} </span> - <img class="footer__rss-button__img" src={rssImg.src} alt="" /> + <img class="footer__rss-button__img" src={rssImg.src} alt="" height="44" width="44" /> </a> <Button classNames="footer__back-to-top" href="#top"> diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro index 3b58124..c8bc6eb 100644 --- a/src/components/LallansIssue.astro +++ b/src/components/LallansIssue.astro @@ -4,6 +4,7 @@ import tSite from '$i18n/translations/site'; import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath'; import relativePath from '$lib/relativePath'; import type LallansIssue from '$types/LallansIssue'; +import { Image } from 'astro:assets'; import LallansIssueContributions from './LallansIssueContributions.astro'; import LallansIssueContributors from './LallansIssueContributors.astro'; import PayPalButtons from './PayPalButtons.astro'; @@ -25,7 +26,7 @@ const t = translate(locale); </header> <div class="product__action-block"> - <img alt="" src={issue.img.src} /> + <Image alt="" src={issue.img.width274} /> <PayPalButtons successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)} productDescription={`Lallans ${issue.issueNumber} | ${issue.issueName}`} diff --git a/src/components/LallansIssuesGallery.astro b/src/components/LallansIssuesGallery.astro index 1d6a3e7..fd0ad0a 100644 --- a/src/components/LallansIssuesGallery.astro +++ b/src/components/LallansIssuesGallery.astro @@ -1,4 +1,5 @@ --- +import { Image } from 'astro:assets'; import { getAllLallansIssues } from '$data/lallans'; import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath'; import type LallansIssue from '$types/LallansIssue'; @@ -13,13 +14,13 @@ function issueNumberDescending(issue1: LallansIssue, issue2: LallansIssue) { <ul class="link-gallery"> { - issues.map((issue) => ( + issues.map(async (issue) => ( <li> <a class="link link-gallery__container" href={`/${locale}/furthsettins/lallans/${issue.issueNumber}`} > - <img src={issue.img.src} alt="" /> + <Image src={issue.img.width192} alt="" /> <p class="link-gallery__title"> Lallans {issue.issueNumber} | {issue.issueName} </p> diff --git a/src/components/Scotsoun.astro b/src/components/Scotsoun.astro index 594b8c9..bbf9730 100644 --- a/src/components/Scotsoun.astro +++ b/src/components/Scotsoun.astro @@ -1,4 +1,5 @@ --- +import { Image } from 'astro:assets'; import translate from '$i18n/translate'; import tSite from '$i18n/translations/site'; import tComponent from '$i18n/translations/components/scotsoun'; @@ -25,7 +26,7 @@ const t = translate(locale); {scotsoun?.author && <p>{t(tSite, { key: 'by' }) + ' ' + scotsoun.author}</p>} </header> <div class="product__action-block"> - <img src={scotsoun.img.src} alt="" /> + <Image src={scotsoun.img.width192} alt="" /> <PayPalButtons successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)} productDescription={`SSCD${scotsoun.scotsounId} | ${scotsoun.longName}`} diff --git a/src/components/ScotsounCdGallery.astro b/src/components/ScotsounCdGallery.astro index 1c810a0..d2c7e0b 100644 --- a/src/components/ScotsounCdGallery.astro +++ b/src/components/ScotsounCdGallery.astro @@ -1,4 +1,5 @@ --- +import { Image } from 'astro:assets'; import { getAllScotsoun } from '$data/scotsoun'; import { getLocaleFromPathOrThrow } from '$lib/getLocaleFromPath'; import type Scotsoun from '$types/Scotsoun'; @@ -19,7 +20,7 @@ function scotsounIdDescending(scotsoun1: Scotsoun, scotsoun2: Scotsoun) { class="link link-gallery__container" href={`/${locale}/furthsettins/scotsoun/${scotsounItem.scotsounId}`} > - <img src={scotsounItem.img.src} alt="" /> + <Image src={scotsounItem.img.width192} alt="" /> <p class="link-gallery__title">{scotsounItem.title}</p> </a> </li> |