Add subscription and community components (#47)

Close #46

Same as those in [blog](https://gitea.com/gitea/blog/pulls/272), but for docs and api
Ejected DocPage (unsafe to eject) and ApiDoc (safe to eject) for layout changes

![Screen Shot 2023-07-17 at 15.32.29](/attachments/74f992c7-b60d-4d71-bb50-8c085e6783fe)![Screen Shot 2023-07-17 at 15.32.40](/attachments/0df35cba-0797-4f21-abbe-bb61736c1e1f)

Screenshots

![Screen Shot 2023-07-17 at 15.27.29](/attachments/39e09cee-5043-4349-aaaa-7ab585aefbc4)![Screen Shot 2023-07-17 at 15.27.36](/attachments/396a9ae1-bbae-42b5-b1ab-c4158a2be78d)![Screen Shot 2023-07-17 at 15.27.53](/attachments/e12a35eb-625c-4950-960e-61226eda4ad4)![Screen Shot 2023-07-17 at 15.28.11](/attachments/578bd742-8a8b-4324-82d4-b9dc47d7f511)![Screen Shot 2023-07-17 at 15.28.19](/attachments/f304bb80-c6cb-4af4-b16f-b19fa2099ba5)

Co-authored-by: techknowlogick <[email protected]>
Co-authored-by: techknowlogick <[email protected]>
Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/47
Co-authored-by: HesterG <[email protected]>
Co-committed-by: HesterG <[email protected]>

src/theme/ApiDoc/ApiDoc.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Redoc from '@theme/Redoc';
+import { ActionFooter } from "@site/src/components/ActionFooter";
+import { Section } from "@site/src/components/Section";
+function ApiDoc({ layoutProps, specProps }) {
+    const defaultTitle = specProps.spec?.info?.title || 'API Docs';
+    const defaultDescription = specProps.spec?.info?.description || 'Open API Reference Docs for the API';
+    return (<Layout title={defaultTitle} description={defaultDescription} {...layoutProps}>
+      <Redoc {...specProps}/>
+      <Section>
+        <ActionFooter />
+      </Section>
+    </Layout>);
+}
+export default ApiDoc;

src/theme/ApiDoc/index.js

@@ -0,0 +1,2 @@
+import ApiDoc from './ApiDoc';
+export default ApiDoc;

src/theme/DocPage/Layout/index.js

@@ -0,0 +1,36 @@
+// Ejected unsafe, need to check if this changes and maintain this component
+// https://github.com/facebook/docusaurus/blob/docusaurus-v2/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/index.tsx
+import React, {useState} from 'react';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+import Layout from '@theme/Layout';
+import BackToTopButton from '@theme/BackToTopButton';
+import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar';
+import DocPageLayoutMain from '@theme/DocPage/Layout/Main';
+import styles from './styles.module.css';
+import { ActionFooter } from "@site/src/components/ActionFooter";
+import { Section } from "@site/src/components/Section";
+
+export default function DocPageLayout({children}) {
+  const sidebar = useDocsSidebar();
+  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
+  return (
+    <Layout wrapperClassName={styles.docsWrapper}>
+      <BackToTopButton />
+      <div className={styles.docPage}>
+        {sidebar && (
+          <DocPageLayoutSidebar
+            sidebar={sidebar.items}
+            hiddenSidebarContainer={hiddenSidebarContainer}
+            setHiddenSidebarContainer={setHiddenSidebarContainer}
+          />
+        )}
+        <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
+          {children}
+        </DocPageLayoutMain>
+      </div>
+      <Section>
+        <ActionFooter />
+      </Section>
+    </Layout>
+  );
+}

src/theme/DocPage/Layout/styles.module.css

@@ -0,0 +1,9 @@
+.docPage {
+  display: flex;
+  width: 100%;
+}
+
+.docsWrapper {
+  display: flex;
+  flex: 1 0 auto;
+}