From 4bf9d604bd7b13fbcd29c87027e418fb07053ecb Mon Sep 17 00:00:00 2001
From: Luka van der Plas <43678097+lukavdplas@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:22:01 +0100
Subject: [PATCH] Multiple authors in feature card (#2723)
---
frontend/components/welcome/FeaturedCard.js | 21 +++++++++++++++------
frontend/featured-card.css | 12 ++++--------
2 files changed, 19 insertions(+), 14 deletions(-)
diff --git a/frontend/components/welcome/FeaturedCard.js b/frontend/components/welcome/FeaturedCard.js
index 3204a00fcc..7911579e55 100644
--- a/frontend/components/welcome/FeaturedCard.js
+++ b/frontend/components/welcome/FeaturedCard.js
@@ -59,7 +59,11 @@ export const FeaturedCard = ({ entry, source_manifest, direct_html_links, disabl
? null
: html`
`}
@@ -74,9 +78,13 @@ export const FeaturedCard = ({ entry, source_manifest, direct_html_links, disabl
* name: string?,
* url: string?,
* image: string?,
+ * has_coauthors?: boolean,
* }}
*/
+/**
+ * @returns {AuthorInfo?}
+ */
const author_info = (frontmatter) =>
author_info_item(frontmatter.author) ??
author_info_item({
@@ -90,9 +98,11 @@ const author_info = (frontmatter) =>
*/
const author_info_item = (x) => {
if (x instanceof Array) {
- return author_info_item(x[0])
- } else if (x == null) {
- return null
+ const first = author_info_item(x[0])
+ if (first?.name) {
+ const has_coauthors = x.length > 1
+ return { ...first, has_coauthors }
+ }
} else if (typeof x === "string") {
return {
name: x,
@@ -111,7 +121,6 @@ const author_info_item = (x) => {
url,
image,
}
- } else {
- return null
}
+ return null
}
diff --git a/frontend/featured-card.css b/frontend/featured-card.css
index e00e2319e7..8c9bf82f46 100644
--- a/frontend/featured-card.css
+++ b/frontend/featured-card.css
@@ -55,12 +55,15 @@ featured-card .author {
background: var(--welcome-card-author-backdrop);
/* background: hsl(var(--card-color-hue) 34% 46% / 59%); */
backdrop-filter: blur(15px);
- color: black;
+ color: var(--index-text-color);
border-radius: 117px;
/* height: 2.5em; */
padding: 0.3em;
padding-right: 0.8em;
display: flex;
+ align-items: center;
+ gap: 0.4ch;
+ margin-left: 0.3rem;
}
featured-card .author img {
@@ -76,13 +79,6 @@ featured-card .author img {
overflow: hidden;
}
-featured-card .author a {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 0.4ch;
-}
-
featured-card h3 a {
padding: 0.6em;
padding-bottom: 0;