First go at adding authors.

README.md

@@ -145,3 +145,46 @@ If you are using GitHub pages for hosting, this command is a convenient way to b
 ```console
 npm run serve
 ```
+
+## How to add an author
+
+Add a new author as follows:
+
+* Edit `docusaurus.config.js` and add a new author object into the `authors` object:
+
+```javascript
+customFields: {
+  authors: {
+    simon: {
+      name: 'Simon Prickett',
+      link: 'https://twitter.com/simon_prickett',
+      title: 'Manager, Developer Advocacy',
+      image: 'profile_pic_simon_prickett.jpg'
+    },
+    suze: {
+      name: 'Suze Shardlow',
+      link: 'https://twitter.com/SuzeShardlow',
+      title: 'Developer Community Manager'
+    }
+  }
+},
+```
+
+* Give each author a unique name in the `authors` object.  
+* The `link` field can be set to any of your social media profiles or personal website etc.
+* The `image` field is optional.  If omitted, a default silhouette image will be used.
+* If providing a value for the `image` field, please name your image `profile_pic_<author_name>.jpg|.png` and add it to the `static/img` folder.
+* Make sure that the image is 640px square and use a service such as [tinypng.com](https://tinypng.com/) to reduce the file size.
+* When you want to tag a document as written by the new author, edit its front matter e.g.:
+
+```yaml
+---
+id: index-hacktoberfest
+title: Hacktoberfest 2021 at Redis
+sidebar_label: Hacktoberfest 2021
+slug: /hacktoberfest/
+authors: [suze,simon]
+---
+```
+
+* Note that multiple authors are supported as shown above.

docs/get-involved/hacktoberfest/index-hacktoberfest.mdx

@@ -3,6 +3,7 @@ id: index-hacktoberfest
 title: Hacktoberfest 2021 at Redis
 sidebar_label: Hacktoberfest 2021
 slug: /hacktoberfest/
+authors: [suze,simon]
 ---
 
 

docusaurus.config.js

@@ -11,6 +11,21 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'redis-developer', // Usually your GitHub org/user name.
   projectName: 'redis-developer', // Usually your repo name.
+  customFields: {
+    authors: {
+      simon: {
+        name: 'Simon Prickett',
+        link: 'https://twitter.com/simon_prickett',
+        title: 'Manager, Developer Advocacy',
+        image: 'profile_pic_simon_prickett.jpg'
+      },
+      suze: {
+        name: 'Suze Shardlow',
+        link: 'https://twitter.com/SuzeShardlow',
+        title: 'Developer Community Manager'
+      }
+    }
+  },
   themeConfig: {
 
     // ...

src/theme/DocItem/index.tsx

@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+import Head from '@docusaurus/Head';
+import {useTitleFormatter} from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import DocPaginator from '@theme/DocPaginator';
+import DocVersionSuggestions from '@theme/DocVersionSuggestions';
+import type {Props} from '@theme/DocItem';
+import TOC from '@theme/TOC';
+import IconEdit from '@theme/IconEdit';
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import {
+  useActivePlugin,
+  useVersions,
+  useActiveVersion,
+} from '@theme/hooks/useDocs';
+
+function DocItem(props: Props): JSX.Element {
+  const {siteConfig} = useDocusaurusContext();
+  console.log(siteConfig);
+  const {url: siteUrl} = siteConfig;
+  const {content: DocContent} = props;
+  const {
+    metadata,
+    frontMatter: {
+      image: metaImage,
+      keywords,
+      hide_title: hideTitle,
+      hide_table_of_contents: hideTableOfContents,
+      authors,
+    },
+  } = DocContent;
+  const {
+    description,
+    title,
+    permalink,
+    editUrl,
+    lastUpdatedAt,
+    lastUpdatedBy,
+  } = metadata;
+
+  const authorLookup = siteConfig.customFields.authors;
+
+  const {pluginId} = useActivePlugin({failfast: true});
+  const versions = useVersions(pluginId);
+  const version = useActiveVersion(pluginId);
+
+  // If site is not versioned or only one version is included
+  // we don't show the version badge
+  // See https://github.com/facebook/docusaurus/issues/3362
+  const showVersionBadge = versions.length > 1;
+
+  const metaTitle = useTitleFormatter(title);
+  const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
+  return (
+    <>
+      <Head>
+        <title>{metaTitle}</title>
+        <meta property="og:title" content={metaTitle} />
+        {description && <meta name="description" content={description} />}
+        {description && (
+          <meta property="og:description" content={description} />
+        )}
+        {keywords && keywords.length && (
+          <meta name="keywords" content={keywords.join(',')} />
+        )}
+        {metaImage && <meta property="og:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
+        {metaImage && (
+          <meta name="twitter:image:alt" content={`Image for ${title}`} />
+        )}
+        {permalink && <meta property="og:url" content={siteUrl + permalink} />}
+        {permalink && <link rel="canonical" href={siteUrl + permalink} />}
+      </Head>
+
+      <div className="row">
+        <div
+          className={clsx('col', {
+            [styles.docItemCol]: !hideTableOfContents,
+          })}>
+          <DocVersionSuggestions />
+          <div className={styles.docItemContainer}>
+            <article>
+              {showVersionBadge && (
+                <div>
+                  <span className="badge badge--secondary">
+                    Version: {version.label}
+                  </span>
+                </div>
+              )}
+              {!hideTitle && (
+                <header>
+                  <h1 className={styles.docTitle}>{title}</h1>
+                </header>
+              )}
+              {DocContent.frontMatter.authors && (
+                <div className="docAuthors">
+                  <hr/>
+                    {DocContent.frontMatter.authors.map(author => {
+                      return <div className={styles.authorByline}><img className={styles.authorProfileImage} src={'/img/' + (authorLookup[author].image ? authorLookup[author].image : 'default_author_profile_pic.png')} alt={'Profile picture for ' + authorLookup[author].name}/> <div><div className={styles.authorLabel}>Author:</div><div><a href={authorLookup[author].link} target="_blank">{authorLookup[author].name}</a>, {authorLookup[author].title}</div></div></div>
+                    })}
+                  <hr/>
+                </div>
+              )}
+              <div className="markdown">
+                <DocContent />
+              </div>
+            </article>
+            {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
+              <div className="margin-vert--xl">
+                <div className="row">
+                  <div className="col">
+                    {editUrl && (
+                      <a
+                        href={editUrl}
+                        target="_blank"
+                        rel="noreferrer noopener">
+                        <IconEdit />
+                        Edit this page
+                      </a>
+                    )}
+                  </div>
+                  {(lastUpdatedAt || lastUpdatedBy) && (
+                    <div className="col text--right">
+                      <em>
+                        <small>
+                          Last updated{' '}
+                          {lastUpdatedAt && (
+                            <>
+                              on{' '}
+                              <time
+                                dateTime={new Date(
+                                  lastUpdatedAt * 1000,
+                                ).toISOString()}
+                                className={styles.docLastUpdatedAt}>
+                                {new Date(
+                                  lastUpdatedAt * 1000,
+                                ).toLocaleDateString()}
+                              </time>
+                              {lastUpdatedBy && ' '}
+                            </>
+                          )}
+                          {lastUpdatedBy && (
+                            <>
+                              by <strong>{lastUpdatedBy}</strong>
+                            </>
+                          )}
+                          {process.env.NODE_ENV === 'development' && (
+                            <div>
+                              <small>
+                                {' '}
+                                (Simulated during dev for better perf)
+                              </small>
+                            </div>
+                          )}
+                        </small>
+                      </em>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+            <div className="margin-vert--lg">
+              <DocPaginator metadata={metadata} />
+            </div>
+          </div>
+        </div>
+        {!hideTableOfContents && DocContent.toc && (
+          <div className="col col--3">
+            <TOC toc={DocContent.toc} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DocItem;

src/theme/DocItem/styles.module.css

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.docTitle {
+  font-size: 3rem;
+  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+}
+
+.docItemContainer {
+  margin: 0 auto;
+  padding: 0 0.5rem;
+}
+
+@media only screen and (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
+@media only screen and (max-width: 996px) {
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
+
+.docLastUpdatedAt {
+  font-weight: bold;
+}
+
+.authorByline {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.authorLabel {
+  padding-top: 5px;
+  line-height: 0.5;
+  font-weight: bold;
+}
+
+.authorProfileImage {
+  display: inline-block;
+  border-radius: 100%;
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+}