Add author to articles

components/article.tsx

@@ -1,5 +1,7 @@
 import { Fragment, FunctionComponent } from 'react';
+import { authors } from '../constants/authors';
 import { ArticleData } from '../models/common.model';
+import Author from './author';
 import Markdown from './markdown';
 import Tags from './tags';
 
@@ -8,7 +10,8 @@ const Article: FunctionComponent<{
   path: string;
   articleData: ArticleData;
   articleBody: string;
-  tags: string[];
+  tags?: string[];
+  author?: keyof typeof authors;
 }> = function (props) {
   return (
     <Fragment>
@@ -80,7 +83,7 @@ const Article: FunctionComponent<{
 
         <section className='pt-8'>
           <div className='row justify-content-center'>
-            <div className='col-12 col-lg-10 col-lg-10 col-xl-10 border-bottom'>
+            <div className='col-12 col-lg-10 col-lg-10 col-xl-10 border-bottom pb-4'>
               <h1 className='display-4 text-center'>
                 {props.articleData.title}
               </h1>
@@ -89,24 +92,28 @@ const Article: FunctionComponent<{
                 {props.articleData.excerpt}
               </p>
 
-              <div
-                className={`row ${
-                  props.articleData.date ? '' : 'd-flex justify-content-center'
-                } align-items-center pb-5`}
-              >
-                <div className='col-12 d-flex align-items-center flex-column text-center text-lg-start mb-2 mb-lg-0'>
-                  {props.articleData.date && (
-                    <time
-                      className='fs-sm text-gray-700'
-                      dateTime={props.articleData.date}
-                    >
-                      Published on {props.articleData.date}
-                    </time>
-                  )}
-                </div>
+              <div className='d-flex align-items-center justify-content-center'>
+                {props.author && <Author author={props.author} />}
+                {props.articleData.date && (
+                  <div
+                    className={
+                      'd-flex justify-content-center align-items-center'
+                    }
+                  >
+                    <div className='mb-2 mb-lg-0'>
+                      <span className='px-4 fw-bold'>|</span>{' '}
+                      <time
+                        className='fs-sm text-gray-700'
+                        dateTime={props.articleData.date}
+                      >
+                        Published on {props.articleData.date}
+                      </time>
+                    </div>
+                  </div>
+                )}
               </div>
               {props.tags?.length > 0 && (
-                <div className='pb-5 text-center'>
+                <div className='text-center mt-2'>
                   <Tags tags={props.tags} />
                 </div>
               )}

components/author.tsx

@@ -0,0 +1,25 @@
+import { FunctionComponent } from 'react';
+import { authors } from '../constants/authors';
+
+const Author: FunctionComponent<{ author: keyof typeof authors }> = function ({
+  author
+}) {
+  return (
+    <div className='d-flex align-items-center justify-content-center'>
+      <div className='avatar avatar-lg'>
+        <img
+          className='avatar-img img-thumbnail rounded-circle mr-4'
+          src={`/images/about/${author}.jpg`}
+          alt={authors[author]}
+          width={64}
+          height={64}
+        />
+      </div>
+      <div className='fs-sm ps-2'>
+        Posted by <span className='fw-bold'>{authors[author]}</span>
+      </div>
+    </div>
+  );
+};
+
+export default Author;

constants/authors.ts

@@ -0,0 +1,3 @@
+export const authors = {
+  guillaume: 'Guillaume, Founder'
+};

content/blog/api-endpoints-filtering-improved-security.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: New release with endpoints filtering and improved security
   description: Discover Mockoon's new v1.13.0 release with endpoints filtering, improved security and a revamped templating documentation

content/blog/celebrating-4000-github-stars.md

@@ -10,6 +10,7 @@ tags:
   - open-source
   - news
   - releases
+author: guillaume
 meta:
   title: Celebrating 4000 GitHub stars 🎉
   description: Let's celebrates this milestone by doing a recap of Mockoon's past year's news, announcements, new features and sponsors

content/blog/contributor-spotlight-harry-martland.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - open-source
   - contributors
+author: guillaume
 meta:
   title: Contributor spotlight with Harry Martland
   description: This is the first in a series of interviews with Mockoon's open-source contributors. Today we are talking with Harry Martland, Principal Engineer at Booking.com.

content/blog/december-2023-news.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - news
   - releases
+author: guillaume
 meta:
   title: December 2023 news
   description: 'Mockoon quarterly news for December 2023: new releases, callbacks, global variables, API playground, and more.'

content/blog/file-monitoring-mock-api-samples.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: File monitoring and 2000+ new mock samples
   description: Discover this update's mock files monitoring, thousands of new mock samples, import/export deprecation, Google Analytics removal

content/blog/five-years-2022-retrospective.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - news
+author: guillaume
 meta:
   title: 2022 retrospective and Mockoon 5th anniversary
   description: Let's celebrate the new year by putting some light on recent new features (folders, data buckets, etc.) and five years of Mockooning

content/blog/github-accelerator.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - news
   - funding
+author: guillaume
 meta:
   title: Mockoon is part of the first GitHub Accelerator cohort 🚀
   description: Mockoon has been accepted to be part of the first-ever GitHub Accelerator cohort among 20 other open-source projects.

content/blog/introducing-mockoon-ai-assistant-pro-plans.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - releases
   - product
+author: guillaume
 meta:
   title: Introducing AI assistant and Pro plans
   description: With Mockoon Pro plan AI assistant, unleash the power of API mocking for all your prototyping and API teaching needs. Learn more!

content/blog/mockoon-cli-now-available.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - news
   - releases
+author: guillaume
 meta:
   title: Mockoon CLI is now available!
   description: 'Take your mock APIs in all your headless and automated environments with the new CLI: servers, CI, GitHub Action, WSL, etc.'

content/blog/mockoon-new-api-playground.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - dev blog
   - product
+author: guillaume
 meta:
   title: Mockoon new API playground
   description: 'Discover Mockoon new API playground, a ready-to-use mock API for all your prototyping needs: fake JSON data, JSON placeholders, realistic CRUD API mock, etc.'

content/blog/new-storage-system-git-data-sharing.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: New storage system and improved data sharing
   description: Share your mock API data more easily with the new storage system and start working in no time with our ready-to-use API mock samples

content/blog/new-unified-versioning.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: New unified versioning v3.0.0
   description: Mockoon is now using unified versioning across all its packages, starting with release v3.0.0. Learn more!

content/blog/september-2023-news.md

@@ -9,6 +9,7 @@ imageHeight: 400
 tags:
   - news
   - releases
+author: guillaume
 meta:
   title: September 2023 news
   description: 'Mockoon quarterly news for September 2023: new releases, global rules, GitHub Action, and more.'

content/blog/sequential-responses-custom-status-codes.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: Sequential responses, custom codes, and out-of beta CLI!
   description: Discover Mockoon's new v1.14.0 release with sequential responses, custom status codes, new rules and more

content/blog/ui-redesign-custom-tls-cert.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: UI redesign and custom TLS certificates
   description: Discover this update's new UI header redesign and interface polish, custom TLS certificate support, and cookie rules

content/blog/windows-portable-gzip-rules-reordering.md

@@ -8,6 +8,7 @@ imageWidth: 1200
 imageHeight: 400
 tags:
   - releases
+author: guillaume
 meta:
   title: New Windows portable version and more in v1.15.0
   description: Discover Mockoon's new v1.15.0 release with Windows portable version, rules reordering, gzip decoding and more

models/common.model.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { authors } from '../constants/authors';
 
 export type AccordionData = {
   title?: string;
@@ -68,6 +69,7 @@ export type ArticleData = {
   imageWidth?: number;
   imageHeight?: number;
   tags: string[];
+  author?: keyof typeof authors;
   // used to build a custom header
   header?: {
     image: string;

pages/blog/[slug].tsx

@@ -64,6 +64,7 @@ export default function BlogArticle(props: {
         articleBody={props.articleBody}
         articleData={props.articleData}
         tags={props.articleData.tags}
+        author={props.articleData.author}
       />
       <section>
         <div className='container text-center pt-3 pb-8'>