Add outdated component to outdated documents (#25)

- `git log` needs all commit history to compare latest commit of files, so changed `git clone --depth=1` to `git clone`. This will make the step take longer, so might be improved if there is a better way.

- `src/theme/MDXContent/index.js` is from [ejecting of the component](https://docusaurus.io/docs/swizzling#ejecting) inside `@docusaurus/theme-classic` plugin, and this one is safe to eject according to docusaurus

    ![Screen Shot 2023-06-06 at 12.12.28](/attachments/17a3a84b-cec0-4849-8bd6-9e0471d9536f)

    ![Screen Shot 2023-06-06 at 12.12.15](/attachments/58bba321-3cfb-4a8b-8aeb-84422a06c472)

- [Outdated component style reference](https://mui.com/material-ui/react-alert/)

- Added [`Translate` component](https://docusaurus.io/docs/next/docusaurus-core#translate) to `Outdated` so it can be localized. [reference](https://docusaurus.io/docs/next/i18n/tutorial#translate-your-react-code)

- One way to check for the specific outdated documents:

    search for `lastest commit timestamp` in [prepare nightly docs and prepare 1.19 docs steps](https://gitea.com/gitea/gitea-docusaurus/actions/runs/74)

# After

The Chinese documents that are outdated (latest commit is ealier than laster commit of English version):

![Screen Shot 2023-06-06 at 13.04.24](/attachments/e5d16267-d8d8-434e-89b1-138d04ec92a3)

![Screen Shot 2023-06-06 at 13.05.07](/attachments/af8f996a-5318-4f89-841f-b27a4903a27d)

![Screen Shot 2023-06-06 at 13.05.14](/attachments/e6aba31b-46ba-4a32-ad81-81007e0f711e)

Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/25
Reviewed-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>

src/components/Outdated.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import Translate from '@docusaurus/Translate';
+
+export default function Outdated(props) {
+  return (
+    <div className='outdated-text'>
+      <Translate id="outdated.message">
+        The content of current version is not up to date, please check latest English version, or
+      </Translate>
+      <a href={props.editUrl}>
+        <Translate id="outdated.help">
+          Help us to translate
+        </Translate>
+      </a>
+    </div>
+  )
+}

src/css/custom.css

@@ -37,3 +37,24 @@
 [data-theme='dark'] .close {
   color: var(--ifm-color-white);
 }
+
+.outdated-text {
+  margin: 20px 0;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: none;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  background-color: rgb(229, 246, 253);
+  display: flex;
+  padding: 6px 16px;
+  color: rgb(1, 67, 97);
+}
+
+[data-theme='dark'] .outdated-text {
+  background-color: rgb(7, 19, 24);
+  color: rgb(184, 231, 251);
+}

src/theme/MDXContent/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+// useDoc reference:
+// https://fossies.org/linux/docusaurus/packages/docusaurus-theme-classic/src/theme/DocItem/Content/index.tsx
+import {useDoc} from '@docusaurus/theme-common/internal';
+import Outdated from '@site/src/components/Outdated';
+
+export default function MDXContent({children}) {
+  // {assets, contentTitle, frontMatter, metadata, toc}
+  const {frontMatter, metadata} = useDoc();
+  return <MDXProvider components={MDXComponents}>
+    {frontMatter.isOutdated && <Outdated editUrl={metadata.editUrl}/>}
+    {children}
+  </MDXProvider>;
+}