Merge pull request #911 from Cysharp/feature/DocsAdditionalInfo

Add additional information to the top of pages

docs/docusaurus.config.ts

@@ -2,6 +2,8 @@ import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
+import additionalHeaderMetaRow from './src/remark/additionalHeaderMetaRow';
+
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
@@ -51,10 +53,14 @@ const config: Config = {
           sidebarPath: './sidebars.ts',
           sidebarCollapsed: false,
 
+          showLastUpdateTime: true,
+
           editUrl: (params) => params.locale == 'en'
             ? `https://github.com/Cysharp/MagicOnion/tree/main/docs/docs/${params.docPath}`
             : `https://github.com/Cysharp/MagicOnion/tree/main/docs/i18n/${params.locale}/docusaurus-plugin-content-docs/current/${params.docPath}`,
-        },
+
+            remarkPlugins: [additionalHeaderMetaRow],
+          },
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -107,10 +113,6 @@ const config: Config = {
         {
           title: 'Docs',
           items: [
-            {
-              label: 'Documentation',
-              to: '/',
-            },
             {
               label: 'About MagicOnion',
               to: '/',

docs/package.json

@@ -16,7 +16,9 @@
   },
   "dependencies": {
     "@docusaurus/core": "3.7.0",
+    "@docusaurus/plugin-content-docs": "^3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/theme-common": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",

docs/src/components/AdditionalHeaderMetaRow.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import LastUpdated from '@theme/LastUpdated';
+import {useDoc} from '@docusaurus/plugin-content-docs/client'
+
+export default function AdditionalHeaderMetaRow(props: { children: React.ReactNode }) {
+  const {metadata} = useDoc();
+
+  return (
+    <>
+      <LastUpdated lastUpdatedAt={metadata.lastUpdatedAt} />
+    </>
+  );
+}

docs/src/css/custom.css

@@ -32,3 +32,14 @@
 [lang='ja-Jp'] .theme-doc-sidebar-container nav {
   font-size: 0.85rem;
 }
+
+header .theme-last-updated {
+  font-size: 0.85rem;
+  color: var(--ifm-color-emphasis-600);
+  display: block;
+  margin-top: calc((var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading) * -1) + 0.8rem);
+  margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
+}
+header .theme-last-updated b {
+  font-weight: normal;
+}

docs/src/remark/additionalHeaderMetaRow.js

@@ -0,0 +1,20 @@
+import {visit} from 'unist-util-visit';
+
+const plugin = (options) => {
+  const transformer = async (ast) => {
+    visit(ast, 'heading', (node, index, parent) => {
+      if (node.depth === 1 && node.children.length > 0) {
+        parent.children.push({
+            type: 'containerDirective',
+            data: {
+                hName: 'AdditionalHeaderMetaRow',
+                hProperties: {}
+            }
+        });
+      }
+    });
+  };
+  return transformer;
+};
+
+export default plugin;

docs/src/theme/MDXComponents.js

@@ -0,0 +1,7 @@
+import MDXComponents from '@theme-original/MDXComponents';
+import AdditionalHeaderMetaRow from '@site/src/components/AdditionalHeaderMetaRow';
+
+export default {
+  ...MDXComponents,
+  AdditionalHeaderMetaRow,
+};

docs/src/theme/MDXContent/index.tsx

@@ -0,0 +1,24 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import MDXContent from '@theme-original/MDXContent';
+import type MDXContentType from '@theme/MDXContent';
+import type {WrapperProps} from '@docusaurus/types';
+import styles from './styles.module.css';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+type Props = WrapperProps<typeof MDXContentType>;
+
+export default function MDXContentWrapper(props: Props): ReactNode {
+  const {i18n} = useDocusaurusContext();
+  return (
+    <>
+      {(i18n.currentLocale != 'ja' && i18n.currentLocale != 'en') &&
+        <div className={clsx(styles.communityNotice, "alert alert--secondary")}>
+          Translation of pages other than English and Japanese versions is maintained by community contributions.
+          The project does not guarantee the accuracy of the content and may not reflect the latest content.
+        </div>
+      }
+      <MDXContent {...props} />
+    </>
+  );
+}

docs/src/theme/MDXContent/styles.module.css

@@ -0,0 +1,4 @@
+.communityNotice {
+    font-size: 0.9rem;
+    margin-bottom: 0.8rem;
+}