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 <techknowlogick@noreply.gitea.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/47
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>

src/components/Subscribe/index.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react"
+import Input from "../Input"
+import Button from "../Button"
+import style from "./style.module.css"
+import clsx from "clsx"
+
+const Spinner = () => <span className={style.loader} />
+
+const Subscribe = ({placeholder, submitButtonText, className, classNameInputs}) => {
+  const [loading, setLoading] = useState(false)
+
+  return (
+    <form method="post" action="https://list.gitea.com/subscription/form" className={clsx(style.root, className)} onSubmit={() => {setLoading(true)}}>
+      <div className={clsx(style.inputs, classNameInputs)}>
+        <Input type="hidden" name="nonce" />
+        <input className={style.checkbox} id="2aae7" type="checkbox" name="l" value="2aae7a49-b6b9-4aa3-b35a-32c9aeace57b" checked readOnly />
+        <Input
+          className={style.input}
+          name="email"
+          type="email"
+          title="Email address should be valid"
+          placeholder={placeholder}
+          required
+          autoComplete="off"
+        />
+
+        <Button
+          variant={"tertiary"}
+          type="submit"
+          className={style.subscribeSubmit}
+        >
+          {loading ? <Spinner /> : submitButtonText}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default Subscribe

src/components/Subscribe/style.module.css

@@ -0,0 +1,75 @@
+.root {
+  width: 100%;
+}
+
+.inputs {
+  display: grid;
+  gap: 1rem;
+}
+
+:global(html[data-theme="light"]) .subscribeSubmit {
+  background: #dde0e9;
+}
+
+:global(html[data-theme="light"]) .subscribeSubmit:hover {
+  opacity: 0.8;
+}
+
+@media screen and (min-width: 600px) {
+  .inputs {
+    grid-template-columns: 4fr 2fr;
+  }
+}
+
+.input {
+  color: var(--theme-input-text-color);
+  padding: 1rem;
+  font-size: var(--font-size-small);
+  width: 100%;
+  background-color: var(--theme-input-bg-color);
+}
+
+.checkbox {
+  display: none !important;
+}
+
+.input::placeholder {
+  color: var(--theme-input-text-color);
+}
+
+.submit {
+  white-space: nowrap;
+}
+
+.loader {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+}
+
+.loader:after {
+  content: " ";
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-color: var(--ifm-color-white) transparent var(--ifm-color-white)
+    transparent;
+  animation: loader 1.2s linear infinite;
+}
+
+.success {
+  font-size: var(--font-size-large);
+  font-weight: var(--ifm-font-weight-bold);
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}