Feat/chaingpt (#148)

* feat: 🎸 chaingpt demo

* refactor: 💡 move chainGPT to src/theme; upgrade to 0.1.1

* ci: 🎡 update chaingpt-component

* feat: 🎸 chaingpt/api/chat -> /api/chaingpt

* style: 💄 BackToTopButton move to center

* ci: 🎡 update chaingpt-component -> 0.1.5

package.json

@@ -18,7 +18,7 @@
     "@docusaurus/core": "3.4.0",
     "@docusaurus/preset-classic": "3.4.0",
     "@mdx-js/react": "^3.0.0",
-    "chaingpt-component": "^0.1.2",
+    "chaingpt-component": "^0.1.5",
     "clsx": "^2.0.0",
     "docusaurus-theme-search-typesense": "^0.20.0-0",
     "dotenv": "^16.4.5",

src/theme/BackToTopButton/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useBackToTopButton} from '@docusaurus/theme-common/internal';
+
+import styles from './styles.module.css';
+
+export default function BackToTopButton(): JSX.Element {
+  const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
+  return (
+    <button
+      aria-label={translate({
+        id: 'theme.BackToTopButton.buttonAriaLabel',
+        message: 'Scroll back to top',
+        description: 'The ARIA label for the back to top button',
+      })}
+      className={clsx(
+        'clean-btn',
+        ThemeClassNames.common.backToTopButton,
+        styles.backToTopButton,
+        shown && styles.backToTopButtonShow,
+      )}
+      type="button"
+      onClick={scrollToTop}
+    />
+  );
+}

src/theme/BackToTopButton/styles.module.css

@@ -0,0 +1,39 @@
+.backToTopButton {
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 1.3rem;
+  border-radius: 50%;
+  background-color: var(--ifm-color-emphasis-200);
+  width: 3rem;
+  height: 3rem;
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  opacity: 0;
+  transform: scale(0);
+  visibility: hidden;
+}
+
+.backToTopButton::after {
+  content: ' ';
+  display: inline-block;
+  mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
+  background-color: var(--ifm-color-emphasis-1000);
+  width: 100%;
+  height: 100%;
+}
+
+@media (hover: hover) {
+  .backToTopButton:hover {
+    background-color: var(--ifm-color-emphasis-300);
+  }
+}
+
+.backToTopButtonShow {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
+}

src/theme/ChainGPT/index.module.css

@@ -5,4 +5,5 @@
   display: flex;
   flex-direction: column;
   align-items: end;
+  z-index: 999;
 }