Nicifies Lallans issues

7 files changed, 124 insertions, 29 deletions

diff --git a/public/main.css b/public/main.css
index a448a1a..908f018 100644
--- a/public/main.css
+++ b/public/main.css
@@ -15,6 +15,7 @@
   --breakpoint-sm: 640px;
   --breakpoint-lg: 1280px;
 
+  --spacing-block-xl: 4rem;
   --spacing-block-lg: 2rem;
   --spacing-block-md: 1.25rem;
   --spacing-block-sm: 0.375rem;
@@ -63,7 +64,7 @@
 }
 
 :is(main, article) :is(section, header):not(:is(section, header) :is(section, header)) {
-  padding-block: var(--spacing-block-lg) var(--spacing-inline-lg);
+  padding-block: var(--spacing-block-lg) var(--spacing-block-xl);
 }
 
 :is(main, article) section:nth-child(even):not(:is(section, header) :is(section, header)) {
@@ -232,28 +233,6 @@ ol li {
   }
 }
 
-@container main (min-width: 20rem) {
-  .lallans-issue__primary-info {
-    display: grid;
-    grid-template-columns: 1fr min-content;
-    grid-template-rows: min-content min-content;
-    grid-gap: 1rem;
-  }
-
-  .lallans-issue__primary-info header {
-    grid-row: 1 / 3;
-  }
-
-  .lallans-issue__img {
-    min-width: 10rem;
-  }
-}
-
-.lallans-issue__img {
-  height: auto;
-  max-width: 10rem;
-}
-
 .news-post {
   margin-block: 1.5rem;
   margin-inline: 0.5rem;
@@ -342,6 +321,26 @@ footer {
   height: 12rem;
 }
 
+.lallans-issue__header-block {
+  display: flex;
+  justify-content: space-evenly;
+  gap: var(--spacing-inline-sm);
+  padding-block: var(--spacing-block-lg) var(--spacing-block-xl);
+}
+
+.lallans-issue__header-block-end {
+  display: flex;
+  flex-direction: column;
+  margin-inline: auto;
+  width: fit-content;
+}
+
+.lallans-issue__header-block-end img {
+  max-width: 12rem;
+  width: 100%;
+  height: auto;
+}
+
 .lallans-issues-gallery__issue-cover-image {
   align-self: start;
   width: 100%;
@@ -359,3 +358,12 @@ footer {
   -webkit-line-clamp: 1;
   text-align: center;
 }
+
+.italic {
+  font-style: italic;
+}
+
+:is(.lallans-issue__contributions, .lallans-issue__contributors) ul {
+  font-size: var(--font-size-sm);
+  padding-block-end: var(--spacing-block-md);
+}
\ No newline at end of file
diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro
new file mode 100644
index 0000000..e57a33c
--- /dev/null
+++ b/src/components/LallansIssue.astro
@@ -0,0 +1,37 @@
+---
+import translate from "../i18n/translate";
+import tSite from '../i18n/translations/site';
+import type LallansIssue from "../types/LallansIssue";
+import type Locale from "../types/Locale";
+import LallansIssueContributions from "./LallansIssueContributions.astro";
+import LallansIssueContributors from "./LallansIssueContributors.astro";
+
+interface Props {
+  issue: LallansIssue;
+  locale: Locale;
+}
+
+const { issue, locale } = Astro.props;
+const t = translate(locale);
+---
+
+<div class="lallans-issue__header-block">
+  <header>
+    <h1>{ t(tSite, 'lallans') } { issue.issueNumber }</h1>
+    <p class="italic">{ issue.description[locale] }</p>
+  </header>
+
+  <div class="lallans-issue__header-block-end">
+    <img alt="" src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
+    <!-- TODO: payment buttons -->
+  </div>
+</div>
+
+{ 'contributions' in issue ? (
+  <LallansIssueContributions contributions={issue.contributions} locale={locale} />
+  ) : (
+    'contributors' in issue ? (
+      <LallansIssueContributors contributors={issue.contributors} />
+    ) : (<></>)
+  )
+}
\ No newline at end of file
diff --git a/src/components/LallansIssueContributions.astro b/src/components/LallansIssueContributions.astro
new file mode 100644
index 0000000..73634a2
--- /dev/null
+++ b/src/components/LallansIssueContributions.astro
@@ -0,0 +1,29 @@
+---
+import translate from "../i18n/translate";
+import tSite from '../i18n/translations/site';
+import type { Contribution } from '../types/LallansIssue';
+import type Locale from '../types/Locale';
+
+interface Props {
+  contributions: Contribution[];
+  locale: Locale;
+}
+
+const { contributions, locale } = Astro.props;
+const t = translate(locale);
+---
+
+<section>
+  <h2>Contributions</h2>
+  <ul class="lallans-issue__contributions">
+    { contributions.map(contribution => (
+      <li>
+        <span class="italic">{ contribution.title }</span>
+        { 'author' in contribution ? (
+          <span> { t(tSite, 'by') } { contribution.author }</span>
+          ) : (<></>)
+        }
+      </li>
+    ))}
+  </ul>
+</section>
\ No newline at end of file
diff --git a/src/components/LallansIssueContributors.astro b/src/components/LallansIssueContributors.astro
new file mode 100644
index 0000000..4149e11
--- /dev/null
+++ b/src/components/LallansIssueContributors.astro
@@ -0,0 +1,18 @@
+---
+import type { Contributor } from '../types/LallansIssue';
+
+interface Props {
+  contributors: Contributor[];
+}
+
+const { contributors } = Astro.props;
+---
+
+<section class="lallans-contributors">
+  <h2>Contributors</h2>
+  <ul>
+    { contributors.map(contributor => (
+        <li>{ contributor }</li>
+    ))}
+  </ul>
+</section>
\ No newline at end of file
diff --git a/src/i18n/translations/site.ts b/src/i18n/translations/site.ts
index 6699619..726f22c 100644
--- a/src/i18n/translations/site.ts
+++ b/src/i18n/translations/site.ts
@@ -12,7 +12,11 @@ const siteTranslations = {
   'lallans': {
     'sco': 'Lallans',
     'en-GB': 'Lallans',
-  }
+  },
+  'by': {
+    'sco': 'bi',
+    'en-GB': 'by',
+  },
 };
 
 type Keys = keyof typeof siteTranslations;
diff --git a/src/pages/[locale]/furthsettins/lallans/[issueNumber].astro b/src/pages/[locale]/furthsettins/lallans/[issueNumber].astro
index 78afe1f..d6d7257 100644
--- a/src/pages/[locale]/furthsettins/lallans/[issueNumber].astro
+++ b/src/pages/[locale]/furthsettins/lallans/[issueNumber].astro
@@ -3,10 +3,10 @@ import Page from '../../../../layouts/Page.astro';
 import localeStaticPaths from '../../../../lib/localeStaticPaths';
 import translate from '../../../../i18n/translate';
 import tFurthsettins from '../../../../i18n/translations/pages/furthsettins';
-import tSite from '../../../../i18n/translations/site';
 import type Locale from '../../../../types/Locale';
 import { getLallansIssue } from '../../../../data/lallans';
 import type LallansIssueNumber from '../../../../types/LallansIssueNumber';
+import LallansIssue from '../../../../components/LallansIssue.astro';
 
 export async function getStaticPaths() {
   const lallansIssueNumbers = Object.keys(getLallansIssue) as `${LallansIssueNumber}`[];
@@ -24,6 +24,5 @@ const issue = await getLallansIssue[issueNumber]();
 ---
 
 <Page locale={locale} title={ t(tFurthsettins, 'title') }>
-  <h1>{ t(tSite, 'lallans') } { issueNumber }</h1>
-  <p>{ issue.description[locale] }</p>
+  <LallansIssue issue={issue} locale={locale} />
 </Page>
\ No newline at end of file
diff --git a/src/types/LallansIssue.d.ts b/src/types/LallansIssue.d.ts
index 2f6355d..d8339b1 100644
--- a/src/types/LallansIssue.d.ts
+++ b/src/types/LallansIssue.d.ts
@@ -17,7 +17,7 @@ type LallansIssue = {
   Record<string, never>
 );
 
-type Contributor = string;
-type Contribution = { author?: string, title: string };
+export type Contributor = string;
+export type Contribution = { author?: string, title: string };
 
 export default LallansIssue;
\ No newline at end of file