diff --git a/packages/logos-docusaurus-preset/src/types/themes.ts b/packages/logos-docusaurus-preset/src/types/themes.ts index d75c63b..70b31e2 100644 --- a/packages/logos-docusaurus-preset/src/types/themes.ts +++ b/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' diff --git a/packages/logos-docusaurus-theme/package.json b/packages/logos-docusaurus-theme/package.json index fd6b9e9..b3285a5 100644 --- a/packages/logos-docusaurus-theme/package.json +++ b/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", diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/DocMetadata.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/DocMetadata.scss new file mode 100644 index 0000000..d0a2899 --- /dev/null +++ b/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 + ); + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/DocMetadata.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/DocMetadata.tsx new file mode 100644 index 0000000..ae37b3f --- /dev/null +++ b/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 & {} + +export const DocMetadata: React.FC = ({ + className, + children, + ...props +}) => { + const { date, authors } = useDocMetadata() + + return ( +
+ {date && {date}} + {authors && authors.length > 0 && ( + <> + + by {authors.map((author) => author!.name).join(', ')} + + + )} +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/index.ts new file mode 100644 index 0000000..3d1d8d1 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/index.ts @@ -0,0 +1 @@ +export * from './DocMetadata' diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/useDocMetadata.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/DocMetadata/useDocMetadata.tsx new file mode 100644 index 0000000..1f556dc --- /dev/null +++ b/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, + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts index b8d58e2..0ae80b5 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts +++ b/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' diff --git a/packages/logos-docusaurus-theme/src/client/types/theme.types.ts b/packages/logos-docusaurus-theme/src/client/types/theme.types.ts index bccac9d..46823ca 100644 --- a/packages/logos-docusaurus-theme/src/client/types/theme.types.ts +++ b/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 } diff --git a/packages/logos-docusaurus-theme/src/index.ts b/packages/logos-docusaurus-theme/src/index.ts index 8ca8ff7..1087028 100644 --- a/packages/logos-docusaurus-theme/src/index.ts +++ b/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 { 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' diff --git a/packages/logos-docusaurus-theme/src/server/utils/validateOptions.ts b/packages/logos-docusaurus-theme/src/server/utils/validateOptions.ts new file mode 100644 index 0000000..2d5f409 --- /dev/null +++ b/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({ + docs: Joi.object() + .pattern( + Joi.string(), + Joi.object({ + sidebar: Joi.object({ + hide: Joi.bool().default(true), + }).default({}), + content: Joi.object({ + authors: Joi.array() + .items( + Joi.object({ + 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 ?? {}) }) diff --git a/packages/logos-docusaurus-theme/tsconfig.client.json b/packages/logos-docusaurus-theme/tsconfig.client.json index db3d322..708c15a 100644 --- a/packages/logos-docusaurus-theme/tsconfig.client.json +++ b/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__/**"] } diff --git a/yarn.lock b/yarn.lock index 0159a5b..9bcd7ad 100644 --- a/yarn.lock +++ b/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"