Merge pull request #1931 from gsmet/improve-author

Improve Author and Authors pages
quarkusio · Apr 4, 2024 · b6dab5c · b6dab5c
2 parents 081bbf8 + ac0923e
commit b6dab5c
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 40 deletions.
diff --git a/_config.yml b/_config.yml
@@ -14,7 +14,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 title: Quarkus
-email: 
+email:
 description: >- # this means to ignore newlines until "baseurl:"
   Quarkus: Supersonic Subatomic Java
 baseurl: "" # the subpath of your site, e.g. /blog
@@ -123,8 +123,8 @@ defaults:
 # Site configuration for the Jekyll 3 Pagination Gem
 # The values here represent the defaults if nothing is set
 pagination:
-  
-  # Site-wide kill switch, disabled here it doesn't run at all 
+
+  # Site-wide kill switch, disabled here it doesn't run at all
   enabled: true
 
   # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
@@ -138,15 +138,15 @@ pagination:
 
   # The permalink structure for the paginated pages (this can be any level deep)
   permalink: '/page/:num/' # Pages are index.html inside this folder (default)
-  #permalink: '/page/:num.html' # Pages are simple html files 
+  #permalink: '/page/:num.html' # Pages are simple html files
   #permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
 
   # Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
   title: ':title - page :num'
 
   # Limit how many pagenated pages to create (default: 0, means all)
   limit: 0
-  
+
   # Optional, defines the field that the posts should be sorted on (omit to default to 'date')
   sort_field: 'date'
 
@@ -159,13 +159,13 @@ pagination:
   # Optional, the default tag to use, omit to disable
   tag: ''
 
-  # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts, 
+  # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts,
   # in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
-  locale: '' 
+  locale: ''
 
- # Optional,omit or set both before and after to zero to disable. 
- # Controls how the pagination trail for the paginated pages look like. 
-  trail: 
+ # Optional,omit or set both before and after to zero to disable.
+ # Controls how the pagination trail for the paginated pages look like.
+  trail:
     before: 2
     after: 2
 
@@ -194,7 +194,7 @@ autopages:
     data: '_data/authors.yaml' # Data file with the author details
     # Uncomment the line below to force exclude certain authors from autopage generation.
     # exclude: [ "author1", "author2" ]
-    layouts: 
+    layouts:
       - 'author.html' # We'll define this layout later
     title: 'Posts by :author'
     permalink: '/author/:author/'
@@ -204,13 +204,13 @@ autopages:
 
 
 # Scholar / Bibliography
-publication: 
+publication:
   group_by: type
   sort_by: date
   #order: descending
   #group_order: type
   #type_order: [article, video, podcast]
-  type_names: 
+  type_names:
     article: Article & Blogs
     podcast: Podcasts
     video: Videos
@@ -221,12 +221,12 @@ publication:
 
 # https://github.com/jekyll/jekyll-archives/blob/master/docs/configuration.md
 jekyll-archives:
-  enabled: 
+  enabled:
     - tags
-  layouts: 
+  layouts:
     tag: tag-archive
   permalinks:
     tag: '/blog/tag/:name/'
-  
+
 
 ############################################################
diff --git a/_includes/title-band.html b/_includes/title-band.html
@@ -1,4 +1,7 @@
 <div class="title-band">
-  <h1 class="title">{{ page.title }}</h1>
+  {{ include.page_title }}
+  {% if include.page_title %}{% assign page_title = include.page_title %}{% endif %}
+  {% unless include.page_title %}{% assign page_title = page.title %}{% endunless %}
+  <h1 class="title">{{ page_title }}</h1>
   <h3 class="mb-0">{{ page.subtitle }}</h3>
 </div>
diff --git a/_layouts/author.html b/_layouts/author.html
@@ -2,37 +2,41 @@
 layout: base
 ---
 
-{% include title-band.html %}
-
 <!-- This has the username of author. The one that you set with "author: name" in front-matter-->
 {% assign author_username = page.pagination.author %}
 
 <!-- Use page.pagination.author_data only if you have data file setup correctly -->
 {% assign author = page.pagination.author_data %}
+{% assign page_title = 'Posts by ' | append: author.name %}
 <!--
   Now you can use the author variable anyhow.
   It has all the data as defined inside _data/authors.yml for the current username.
 -->
 
+{% include title-band.html page_title=page_title %}
 
-<div class="full-width-version-bg grey align-self">
+<div class="full-width-breadcrumb-bg align-self">
   <div class="width-12-12">
-      <p class="returnlink"><a href="{{site.baseurl}}/author">Authors</a> <i class="fas fa-chevron-right"></i> {{ page.title }}</p>
+      <p class="returnlink"><a href="{{site.baseurl}}/author">Authors</a> <i class="fas fa-chevron-right"></i> {{ page_title }}</p>
   </div>
 </div>
 
 <div class="grid-wrapper blog-page">
   <div class="grid__item width-9-12 width-12-12-m">
-    <h2 class="title">
+    <h2 class="title byline-wrapper">
       {% if author.emailhash %}
       <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
       {% endif %}
-      {{ author.name }} (<a href="https://twitter.com/{{ author.twitter }}">@{{ author.twitter }}</a>)</h2>
+      <p class="byline">
+      {{ author.name }} {% if author.twitter %}(<a href="https://twitter.com/{{ author.twitter }}">@{{ author.twitter }}</a>){% endif %}
+      </p>
+    </h2>
     <p>
       {{ author.bio }}
     </p>
 
-    <h2 class="title">Posts:</h2>
+    {% if paginator.posts.size > 0 %}
+    <h2 class="title">Posts</h2>
     {% for post in paginator.posts %}
       {% assign author = site.data.authors[post.author] %}
       <div class="blog-list-item grid-wrapper">
@@ -41,18 +45,12 @@ <h2 class="title">Posts:</h2>
             <a href="{{site.baseurl}}{{ post.url }}">{{ post.title }}</a>
           </div>
           <div class="post-date small">
-            {{ post.date | date: '%B %d, %Y' }} 
+            {{ post.date | date: '%B %d, %Y' }}
             {% if post.tags %}
               <span class="tags">tags:{% for tag in post.tags %}<a href="{{site.baseurl}}/blog/tag/{{tag  | downcase | replace: '.', '-' }}">#{{ tag | downcase }}</a>{% endfor %}</span>
             {% endif %}
           </div>
         </div>
-        <div class="grid__item width-8-12 width-12-12-m byline-wrapper">
-          {% if author.emailhash %}
-            <img class="headshot" src="https://www.gravatar.com/avatar/{{ author.emailhash }}">
-          {% endif %}
-          <p class="byline">By <a href="{{ site.baseurl }}/author/{{ post.author }}">{{ author.name }}</a></p>
-        </div>
         <div class="grid__item width-12-12">
           {% if post.synopsis %}
             <p>{{ post.synopsis | strip_html }}</p>
@@ -64,6 +62,17 @@ <h2 class="title">Posts:</h2>
         <div class="grid__item width-4-12 width-12-12-m share-post">{% include share-page.html title=post.title url=post.url %}</div>
       </div>
     {% endfor %}
+    {% if paginator.total_pages > 1 %}
+      <div class="paginator-btns">
+        {% if paginator.next_page %}
+          <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="button-cta primary btn-sm">Older Posts</a>
+        {% endif %}
+        {% if paginator.previous_page %}
+          <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="button-cta primary btn-sm">Newer Posts</a>
+        {% endif %}
+      </div>
+      {% endif %}
+      {% endif %}
   </div>
 </div>
 
diff --git a/_layouts/authors.html b/_layouts/authors.html
@@ -4,12 +4,14 @@
 
 {% include title-band.html %}
 
-<h3 class="tag-label">Authors</h3>
-    {% assign authors = site.data.authors | sort %}
-    {% for data in authors %}
-    {% assign authorid = data | first %}
-    {% assign author = data | last %}
+<div class="grid-wrapper authors">
+    <div class="grid__item width-12-12">
+{% assign authors = site.data.authors | sort: name %}
+{% for data in authors %}
+{% assign authorid = data | first %}
+{% assign author = data | last %}
 
-    <a href="{{site.baseurl}}/author/{{authorid}}">{{authorid}}</a> - {{author.name}}</br>
-    {% endfor %}
-
+<a href="{{site.baseurl}}/author/{{authorid}}">{{author.name}}</a><br>
+{% endfor %}
+</div>
+</div>
diff --git a/_sass/layouts/blog.scss b/_sass/layouts/blog.scss
@@ -55,7 +55,7 @@ body.post {
   }
 }
 .blog-page {
-  
+
   .blog-list-item {
     margin-bottom: 2rem;
     p {
@@ -109,6 +109,32 @@ body.post {
   }
 }
 
+.authors {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.author .blog-page {
+  .byline {
+    font-weight: 600;
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+  }
+
+  .headshot {
+    max-width: 4rem;
+    margin-right: 1rem;
+  }
+
+  .byline-wrapper p {
+    margin: 0;
+  }
+
+  h2.title.byline-wrapper {
+    margin-top: 0;
+  }
+}
+
 .blog-page, .post-page {
   p.byline {
     font-size: 1rem;