✨ Show author on each page

README.md

@@ -50,3 +50,16 @@ npm run lint:fix
 ```
 
 If you are using an editor such as IntelliJ or VSCode, I'd recommend setting your editor to automatically run this whenever you save, and fix any issues.
+
+## Wiki Authors
+
+By default, the site will show the name of all Git authors for each page. This can be overridden with the following 
+front matter:
+```
+---
+additional_authors: <comma separated list>
+override_authors: <comma separated list>
+---
+```
+
+Names can be overridden in `src/lib/git.ts`.

docusaurus.config.ts

@@ -2,6 +2,7 @@ import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import tailwindPlugin from './plugins/tailwind-plugin';
+import { getGitContributors } from './src/lib/git';
 
 const config: Config = {
   title: 'Warwick Tech Crew',
@@ -11,6 +12,21 @@ const config: Config = {
 
   markdown: {
     mermaid: true,
+    parseFrontMatter: async (params) => {
+      const result = await params.defaultParseFrontMatter(params);
+      const authors = await getGitContributors(
+        params.filePath,
+        result.frontMatter,
+      );
+
+      return {
+        ...result,
+        frontMatter: {
+          ...result.frontMatter,
+          authors,
+        },
+      };
+    },
   },
   themes: ['@docusaurus/theme-mermaid'],
 

package.json

@@ -21,6 +21,7 @@
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.0.0",
+    "gitlog": "^5.0.2",
     "postcss": "^8.4.39",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

src/css/custom.css

@@ -47,30 +47,30 @@ figcaption {
   @apply text-xs;
 }
 
-.theme-doc-markdown h1 {
+.content-styling h1 {
   @apply text-2xl font-bold !mb-2;
 }
 
 h2 {
   @apply font-bold text-xl;
 }
 
-.theme-doc-markdown h3 {
+.content-styling h3 {
   @apply font-bold text-lg;
 }
 
-.theme-doc-markdown ul, .content-styling ul {
+.content-styling ul {
   @apply list-disc ml-2;
 }
 
-.theme-doc-markdown ol, .content-styling ol {
+.content-styling ol {
   @apply list-decimal ml-2;
 }
 
-.theme-doc-markdown blockquote {
+.content-styling blockquote {
   @apply mb-2;
 }
 
-.theme-doc-markdown p, .content-styling p {
+.content-styling p {
   @apply mb-3;
 }

src/lib/git.ts

@@ -0,0 +1,41 @@
+import gitlog from 'gitlog';
+
+// You can update your Git author name to your proper name here!
+const authorNames: Record<string, string> = {
+  kishan: 'Kishan Sharma',
+};
+
+type AuthorFrontMatter = {
+  additional_authors?: string;
+  override_authors?: string;
+};
+
+export async function getGitContributors(
+  path: string,
+  frontMatter: AuthorFrontMatter,
+): Promise<string[]> {
+  if (frontMatter.override_authors) {
+    return frontMatter.override_authors
+      .split(',')
+      .map((author) => author.trim());
+  }
+
+  const authors = frontMatter.additional_authors
+    ? frontMatter.additional_authors.split(',').map((author) => author.trim())
+    : [];
+
+  const commits = await gitlog({
+    repo: __dirname,
+    file: path,
+    fields: ['authorName'],
+    number: 100,
+  });
+
+  for (const commit of commits) {
+    if (!authors.includes(commit.authorName)) {
+      authors.push(commit.authorName);
+    }
+  }
+
+  return authors.map((name) => authorNames[name] || name);
+}

src/theme/DocItem/Content/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Content from '@theme-original/DocItem/Content';
+import type ContentType from '@theme/DocItem/Content';
+import type { WrapperProps } from '@docusaurus/types';
+
+type Props = WrapperProps<typeof ContentType>;
+
+export default function ContentWrapper(props: Props): JSX.Element {
+  return (
+    <div className="content-styling">
+      <Content {...props} />
+    </div>
+  );
+}

src/theme/EditMetaRow/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import clsx from 'clsx';
+import EditThisPage from '@theme/EditThisPage';
+import type { Props } from '@theme/EditMetaRow';
+
+import LastUpdated from '@theme/LastUpdated';
+import styles from './styles.module.css';
+import { useDoc } from '@docusaurus/theme-common/internal';
+
+export default function EditMetaRow({
+  className,
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}: Props): JSX.Element {
+  const doc = useDoc();
+  const authors = (doc.frontMatter as any).authors || [];
+  const additionalAuthors = authors.filter(
+    (name: string) => name !== lastUpdatedBy,
+  );
+
+  let additionalAuthorsString = '';
+  for (let i = 0; i < additionalAuthors.length; i++) {
+    additionalAuthorsString += additionalAuthors[i];
+    if (i + 2 === additionalAuthors.length) additionalAuthorsString += ' and ';
+    else if (i + 2 < additionalAuthors.length) additionalAuthorsString += ', ';
+  }
+
+  return (
+    <div className={clsx('row', className)}>
+      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
+      <div className={clsx('col', styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+        {additionalAuthorsString && (
+          <p>Additional Contributors: {additionalAuthorsString}</p>
+        )}
+      </div>
+    </div>
+  );
+}

src/theme/EditMetaRow/styles.module.css

@@ -0,0 +1,11 @@
+.lastUpdated {
+  font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}