feat: custom footer

src/theme/Footer/Copyright/index.module.css

@@ -0,0 +1,4 @@
+.wrap {
+  display: flex;
+  justify-content: space-between;
+}

src/theme/Footer/Copyright/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Copyright from "@theme-original/Footer/Copyright";
+import type CopyrightType from "@theme/Footer/Copyright";
+import type { WrapperProps } from "@docusaurus/types";
+import styles from "./index.module.css";
+
+type Props = WrapperProps<typeof CopyrightType>;
+
+export default function CopyrightWrapper(props: Props): JSX.Element {
+  return (
+    <>
+      <div className={styles.wrap}>
+        <Copyright {...props} />
+        social
+      </div>
+    </>
+  );
+}

src/theme/Footer/Links/MultiColumn/index.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import LinkItem from "@theme/Footer/LinkItem";
+import type { Props } from "@theme/Footer/Links/MultiColumn";
+
+type ColumnType = Props["columns"][number];
+type ColumnItemType = ColumnType["items"][number];
+
+function ColumnLinkItem({ item }: { item: ColumnItemType }) {
+  return item.html ? (
+    <li
+      className="footer__item"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: item.html }}
+    />
+  ) : (
+    <li key={item.href ?? item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+
+function Column({ column }: { column: ColumnType }) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function FooterLinksMultiColumn({
+  columns,
+}: Props): JSX.Element {
+  return (
+    <div className="row footer__links">
+      <div className="col">
+        <img src="/img/Logo.aelf.svg" />
+      </div>
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

src/theme/Footer/Links/Simple/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+import type {Props} from '@theme/Footer/Links/Simple';
+
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+
+function SimpleLinkItem({item}: {item: Props['links'][number]}) {
+  return item.html ? (
+    <span
+      className="footer__link-item"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+
+export default function FooterLinksSimple({links}: Props): JSX.Element {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

src/theme/Footer/Links/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+import type {Props} from '@theme/Footer/Links';
+
+export default function FooterLinks({links}: Props): JSX.Element {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}