Added/improved multi-author support

TryGhost · Nov 14, 2024 · 2e20807 · 2e20807
1 parent 3146c15
commit 2e20807
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 46 deletions.
diff --git a/packages/bulletin/partials/article.hbs b/packages/bulletin/partials/article.hbs
@@ -3,7 +3,7 @@
         <h1 class="gh-article-title">{{title}}</h1>
 
         <span class="gh-article-meta">
-            {{#primary_author}}By <a href="{{url}}">{{name}}</a>{{/primary_author}}
+            By {{authors}}
             {{#if primary_tag}}
                 in
                 <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>

diff --git a/packages/headline/assets/built/screen.css b/packages/headline/assets/built/screen.css
diff --git a/packages/headline/assets/built/screen.css.map b/packages/headline/assets/built/screen.css.map
diff --git a/packages/headline/assets/css/screen.css b/packages/headline/assets/css/screen.css
@@ -230,9 +230,6 @@ body:not(.home-template) .gh-topic-grid .gh-card {
 }
 
 .gh-card-footer {
-    display: flex;
-    gap: 6px;
-    align-items: center;
     margin-top: 16px;
     font-size: 1.1rem;
     font-weight: 500;
@@ -249,19 +246,20 @@ body:not(.home-template) .gh-topic-grid .gh-card {
     color: var(--color-white);
 }
 
-.gh-card-footer > * + * {
-    display: flex;
-    gap: 6px;
-    align-items: center;
+.gh-card-footer > * {
+    display: inline-block;
 }
 
 .gh-card-footer > * + *:not(script)::before {
-    display: block;
+    display: inline-flex;
     width: 2px;
     height: 2px;
+    margin-right: 6px;
+    margin-left: 4px;
     content: "";
     background-color: currentColor;
     border-radius: 50%;
+    transform: translateY(-3px);
 }
 
 /* Styles specific to list style sections */

diff --git a/packages/journal/assets/built/screen.css b/packages/journal/assets/built/screen.css
diff --git a/packages/journal/assets/built/screen.css.map b/packages/journal/assets/built/screen.css.map
diff --git a/packages/journal/assets/css/screen.css b/packages/journal/assets/css/screen.css
@@ -422,10 +422,10 @@
 }
 
 .gh-article-meta {
-    margin-bottom: 2rem;
+    margin-bottom: 1.8rem;
     font-size: 1.2rem;
     font-weight: 500;
-    line-height: 1;
+    line-height: 1.5;
     color: var(--color-secondary-text);
     text-transform: uppercase;
 }

diff --git a/packages/journal/post.hbs b/packages/journal/post.hbs
@@ -7,7 +7,7 @@
 
         <header class="gh-article-header gh-canvas">
             <span class="gh-article-meta">
-                {{#primary_author}}By <a href="{{url}}">{{name}}</a>{{/primary_author}}
+                By {{authors}}
                 {{#if primary_tag}}
                     in
                     <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>

diff --git a/packages/ruby/post.hbs b/packages/ruby/post.hbs
@@ -8,7 +8,7 @@
 
         <header class="gh-article-header gh-canvas">
             <span class="gh-article-meta"{{#if primary_tag.accent_color}} style="--tag-color: {{primary_tag.accent_color}};"{{/if}}>
-                {{#primary_author}}By <a href="{{url}}">{{name}}</a>{{/primary_author}}
+                By {{authors}}
                 {{#if primary_tag}}
                     in
                     <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>

diff --git a/packages/solo/assets/built/screen.css b/packages/solo/assets/built/screen.css
diff --git a/packages/solo/assets/built/screen.css.map b/packages/solo/assets/built/screen.css.map
diff --git a/packages/solo/assets/css/screen.css b/packages/solo/assets/css/screen.css
@@ -597,20 +597,55 @@ hr {
     flex-direction: column;
 }
 
+.gh-article-meta .gh-author-image-list {
+    display: flex;
+    margin-bottom: 12px;
+    margin-left: -2px;
+}
+
 .gh-article-meta .gh-author-image {
+    display: block;
     width: 72px;
     height: 72px;
-    margin-bottom: 16px;
+    margin-bottom: 0;
+    border: 2px solid var(--color-white);
 }
 
-.gh-article-meta .gh-author-name {
-    font-size: 1.9rem;
-    letter-spacing: -0.01em;
+.gh-article-meta .gh-author-icon {
+    background-color: var(--color-light-gray);
 }
 
-.gh-article-meta .gh-author-name a {
-    color: var(--color-darker-gray);
+.gh-article-meta .gh-author-image:hover {
+    opacity: 1;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image + .gh-author-image {
+    margin-left: -20px;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(1) {
+    z-index: 30;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(2) {
+    z-index: 20;
+}
+
+.gh-article-meta .gh-author-image-list .gh-author-image:nth-child(3) {
+    z-index: 10;
+}
+
+.gh-article-meta .gh-author-name-list {
+    margin-bottom: -2px;
+    line-height: 1.35;
+}
+
+.gh-article-meta .gh-author-name-list a {
+    font-size: 1.9rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
     text-decoration: none;
+    color: var(--color-darker-gray);
 }
 
 .gh-article-date {
@@ -621,6 +656,7 @@ hr {
 }
 
 .gh-article-tag {
+    display: inline-block;
     width: fit-content;
     padding: 2px 12px;
     margin-top: 20px;
@@ -742,11 +778,6 @@ hr {
         grid-row-start: 2;
     }
 
-    .gh-article-meta-inner {
-        flex-direction: row;
-        align-items: center;
-    }
-
     .gh-article-meta .gh-author-image {
         width: 64px;
         height: 64px;
@@ -757,10 +788,6 @@ hr {
     .gh-article-meta-wrapper {
         flex-grow: 1;
     }
-
-    .gh-article-tag {
-        margin-top: 0;
-    }
 }
 
 @media (max-width: 767px) {

diff --git a/packages/solo/partials/icons/avatar.hbs b/packages/solo/partials/icons/avatar.hbs
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="68" height="68"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>
diff --git a/packages/solo/post.hbs b/packages/solo/post.hbs
@@ -26,18 +26,23 @@
                     {{/unless}}
                     <aside class="gh-article-meta">
                         <div class="gh-article-meta-inner">
-                            {{#primary_author}}
-                                {{#if profile_image}}
-                                    <figure class="gh-author-image">
-                                        <img src="{{profile_image}}" alt="{{name}}">
-                                    </figure>
-                                {{/if}}
-                                <div class="gh-article-meta-wrapper">
-                                <h4 class="gh-author-name">
-                                    <a href="{{url}}">{{name}}</a>
-                                </h4>
-                            {{/primary_author}}
-                            <time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></div>
+                            <div class="gh-author-image-list instapaper_ignore">
+                                {{#foreach authors}}
+                                    <a class="gh-author-image" href="{{url}}">
+                                        {{#if profile_image}}
+                                            <img src="{{profile_image}}" alt="{{name}}">
+                                        {{else}}
+                                            <div class="gh-author-icon">{{> icons/avatar}}</div>
+                                        {{/if}}
+                                    </a>
+                                {{/foreach}}
+                            </div>
+                            <div class="gh-article-meta-wrapper">
+                                <div class="gh-author-name-list">
+                                    {{authors}}
+                                </div>
+                                <time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                            </div>
                             {{#if primary_tag}}
                                 <a class="gh-article-tag" href="{{primary_tag.url}}" style="--tag-color: {{primary_tag.accent_color}}">{{primary_tag.name}}</a>
                             {{/if}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="68" height="68"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>