Multiple authors in feature card (#2723)

fonsp · Nov 21, 2023 · 4bf9d60 · 4bf9d60
1 parent 6c72853
commit 4bf9d60
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git 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`
                       <div class="author">
-                          <a href=${author.url}> <img src=${author.image ?? transparent_svg} /><span>${author.name}</span></a>
+                          <img src=${author.image ?? transparent_svg} />
+                          <span>
+                              <a href=${author.url}>${author.name}</a>
+                              ${author.has_coauthors ? html` and others` : null}
+                          </span>
                       </div>
                   `}
             <h3><a href=${href} title=${entry?.frontmatter?.title}>${entry?.frontmatter?.title ?? entry.id}</a></h3>
@@ -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
@@ -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;