feat: add DocMetadata mdx component for displaying date and authors

packages/logos-docusaurus-preset/src/types/themes.ts

@@ -5,4 +5,4 @@ export type ThemeConfig = {
   footer?: Footer
 }
 
-export type { PluginOptions as DefaultThemeOptions } from '@acid-info/logos-docusaurus-theme'
+export type { ThemeOptions as DefaultThemeOptions } from '@acid-info/logos-docusaurus-theme'

packages/logos-docusaurus-theme/package.json

@@ -43,6 +43,7 @@
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
     "copy-to-clipboard": "^3.3.2",
+    "date-fns": "^2.30.0",
     "docusaurus-plugin-sass": "^0.2.3",
     "dotenv": "^16.0.3",
     "lodash": "^4.17.21",

packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/DocMetadata.scss

@@ -0,0 +1,25 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-doc-metadata {
+  display: flex;
+  flex-direction: row;
+  line-height: 0;
+
+  & > span:not(:last-child) {
+    &::after {
+      content: '•';
+      display: inline-block;
+      margin-inline: 0.75rem;
+    }
+  }
+}
+
+.markdown {
+  h1 + .mdx-doc-metadata,
+  header + .mdx-doc-metadata {
+    margin-top: calc(
+      -1 * var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading) + 1rem
+    );
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/DocMetadata.tsx

@@ -0,0 +1,28 @@
+import { Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import './DocMetadata.scss'
+import { useDocMetadata } from './useDocMetadata'
+
+export type DocMetadataProps = React.HTMLAttributes<HTMLDivElement> & {}
+
+export const DocMetadata: React.FC<DocMetadataProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { date, authors } = useDocMetadata()
+
+  return (
+    <div className={clsx(className, 'mdx-doc-metadata')} {...(props as any)}>
+      {date && <Typography variant="body2">{date}</Typography>}
+      {authors && authors.length > 0 && (
+        <>
+          <Typography variant="body2">
+            by {authors.map((author) => author!.name).join(', ')}
+          </Typography>
+        </>
+      )}
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/index.ts

@@ -0,0 +1 @@
+export * from './DocMetadata'

packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/useDocMetadata.tsx

@@ -0,0 +1,20 @@
+import { useDoc } from '@docusaurus/theme-common/internal'
+import { useDocThemeOptions } from '../../../lib/useThemeOptions'
+import format from 'date-fns/format'
+
+export const useDocMetadata = () => {
+  const options = useDocThemeOptions()
+  const { content: { authors = [] } = {} } = options
+
+  const { frontMatter = {} } = useDoc() as any
+  const { author = [], date } = frontMatter
+
+  const docAuthors = (Array.isArray(author) ? author : [author])
+    .map((key) => authors.find((a) => key === a.key))
+    .filter((a) => !!a)
+
+  return {
+    date: date ? format(new Date(date), 'MMM d yyyy') : '',
+    authors: docAuthors,
+  }
+}

packages/logos-docusaurus-theme/src/client/components/mdx/index.ts

@@ -1,6 +1,7 @@
 export * from './Box'
 export * from './CallToActionButton'
 export * from './CallToActionSection'
+export * from './DocMetadata'
 export * from './FeatureList'
 export * from './Hero'
 export * from './HeroAction'

packages/logos-docusaurus-theme/src/client/types/theme.types.ts

@@ -1,9 +1,26 @@
-export type DocConfig = {
-  sidebar?: {
-    hide?: boolean
-  }
+import type { PluginOptions as DefaultPluginOptions } from '@docusaurus/theme-classic'
+
+export type Author = {
+  key: string
+  name: string
+  github?: string
+  twitter?: string
+  website?: string
 }
 
-export type ThemeOptions = {
+export type DocContent = {
+  authors?: Author[]
+}
+
+export type DocSidebarConfig = {
+  hide?: boolean
+}
+
+export type DocConfig = {
+  sidebar?: DocSidebarConfig
+  content?: DocContent
+}
+
+export type ThemeOptions = DefaultPluginOptions & {
   docs?: Record<string, DocConfig>
 }

packages/logos-docusaurus-theme/src/index.ts

@@ -1,14 +1,11 @@
-import type { PluginOptions as DefaultPluginOptions } from '@docusaurus/theme-classic'
 import type { LoadContext, Plugin } from '@docusaurus/types'
 import _ from 'lodash'
 import path from 'path'
 import type { ThemeOptions } from './client/types/theme.types'
 
-export type PluginOptions = DefaultPluginOptions & ThemeOptions
-
 export default function logosTheme(
   context: LoadContext,
-  options: PluginOptions,
+  options: ThemeOptions,
 ): Plugin<undefined> {
   const clientModules: string[] = [
     path.resolve(__dirname, './client/css/custom.scss'),
@@ -47,3 +44,6 @@ export default function logosTheme(
     getClientModules: () => clientModules,
   }
 }
+
+export type { ThemeOptions }
+export { validateOptions } from './server/utils/validateOptions'

packages/logos-docusaurus-theme/src/server/utils/validateOptions.ts

@@ -0,0 +1,42 @@
+import { Joi } from '@docusaurus/utils-validation'
+import {
+  Author,
+  DocConfig,
+  DocContent,
+  DocSidebarConfig,
+  ThemeOptions,
+} from '../../client/types/theme.types'
+
+const schema = Joi.object<ThemeOptions>({
+  docs: Joi.object()
+    .pattern(
+      Joi.string(),
+      Joi.object<DocConfig>({
+        sidebar: Joi.object<DocSidebarConfig>({
+          hide: Joi.bool().default(true),
+        }).default({}),
+        content: Joi.object<DocContent>({
+          authors: Joi.array()
+            .items(
+              Joi.object<Author>({
+                key: Joi.string().required(),
+                name: Joi.string().required(),
+                github: Joi.string().optional(),
+                twitter: Joi.string().optional(),
+                website: Joi.string().optional(),
+              }),
+            )
+            .default([]),
+        }).default({}),
+      }),
+    )
+    .default({}),
+}).unknown(true)
+
+export const validateOptions = ({
+  options,
+  validate,
+}: {
+  options: ThemeOptions
+  validate: any
+}) => validate(schema, { ...(options ?? {}) })

packages/logos-docusaurus-theme/tsconfig.client.json

@@ -22,13 +22,6 @@
     },
     "plugins": [{ "transform": "typescript-transform-paths" }]
   },
-  "include": [
-    "src/client",
-    "src/*.d.ts",
-    "src/theme.ts",
-    "src/client/theme/NavbarItem",
-    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx",
-    "../docusaurus-playground/src/theme/DocPage/Layout/index.tsx"
-  ],
+  "include": ["src/client", "src/server", "src/*.d.ts", "src/theme.ts"],
   "exclude": ["src/index.ts", "**/__tests__/**"]
 }

yarn.lock

@@ -1234,7 +1234,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.22.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb"
   integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==
@@ -6459,6 +6459,13 @@ data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"