diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js index 5a70f7ffeb8dd..c10c178424b53 100644 --- a/docs-website/docusaurus.config.js +++ b/docs-website/docusaurus.config.js @@ -18,6 +18,7 @@ module.exports = { noIndex: isSaas, customFields: { isSaas: isSaas, + markpromptProjectKey: process.env.DOCUSAURUS_MARKPROMPT_PROJECT_KEY || 'IeF3CUFCUQWuouZ8MP5Np9nES52QAtaA', }, themeConfig: { ...(!isSaas && { diff --git a/docs-website/package.json b/docs-website/package.json index 91e08f38e980f..958c35ea2328c 100644 --- a/docs-website/package.json +++ b/docs-website/package.json @@ -34,8 +34,11 @@ "docusaurus-graphql-plugin": "0.5.0", "docusaurus-plugin-sass": "^0.2.1", "dotenv": "^16.0.1", + "markprompt": "^0.1.7", "react": "^16.12.0", "react-dom": "^16.12.0", + "react-modal": "^3.16.1", + "react-modal-hook": "^3.0.2", "sass": "^1.43.2" }, "browserslist": { diff --git a/docs-website/src/components/MarkpromptHelp/index.jsx b/docs-website/src/components/MarkpromptHelp/index.jsx new file mode 100644 index 0000000000000..11b27e03cf234 --- /dev/null +++ b/docs-website/src/components/MarkpromptHelp/index.jsx @@ -0,0 +1,53 @@ +import React from "react"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import { Markprompt } from "markprompt"; +import clsx from "clsx"; +import styles from "./markprompthelp.module.scss"; +import { ModalProvider, useModal } from "react-modal-hook"; +import Modal from "react-modal"; + +const BotIcon = ({ ...props }) => ( + + + +); + +const MarkpromptModal = () => { + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; + + const [showModal, hideModal] = useModal(() => ( + + <> +
+ + +
+
+

+ This is an experimental AI-powered chat bot. We can't be sure what it will say but hope it can be helpful. If it's not, there are always{" "} + + humans available in our Slack channel + + . +

+ + + )); + + return ( +
+ +
+ ); +}; + +const MarkpromptHelp = () => ( + + + +); + +export default MarkpromptHelp; diff --git a/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss b/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss new file mode 100644 index 0000000000000..8e8c47d74dd74 --- /dev/null +++ b/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss @@ -0,0 +1,141 @@ +.markpromptButton { + position: fixed; + bottom: 1rem; + right: 1rem; + z-index: 1001; + width: 60px; + height: 60px; + padding: 0.75rem; + svg { + width: 100%; + height: auto; + fill: currentColor; + } +} + +.markpromptModal { + border-radius: 6px; + position: fixed; + left: 50%; + top: 0; + transform: translate(-50%, 0%); + background: var(--ifm-background-color); + z-index: 1003; + margin: 60px auto auto; + padding: 0; + + width: 100%; + @media (min-width: 768px) { + max-width: 560px; + } + > p { + font-size: smaller; + padding: 1rem 1rem 0; + } + + hr { + margin: 0; + } +} + +.markprompt { + padding: 1rem 1rem 0; + display: flex; + justify-content: center; + flex-direction: column; + svg { + width: 4rem; + margin: 1rem auto; + height: auto; + fill: var(--ifm-color-primary); + } + input { + height: var(--docsearch-searchbox-height); + margin: 0; + padding: 0 var(--docsearch-spacing); + position: relative; + width: 100%; + border: none; + background: var(--docsearch-searchbox-focus-background); + border-radius: 4px; + box-shadow: var(--docsearch-searchbox-shadow); + color: var(--docsearch-text-color); + font-size: 1.2em; + outline: none; + } +} + +:global { + .ReactModal__Overlay { + z-index: 1002; + background: rgba(111, 111, 111, 0.7) !important; + + [data-theme="dark"] & { + background: rgba(71, 71, 71, 0.7) !important; + } + } + .caret { + & :local { + animation: caret 0.75s infinite; + } + display: inline-block; + width: 8px; + height: 16px; + background: var(--ifm-color-primary); + margin-top: 1rem; + } + + .overflow-y-auto { + overflow-y: auto; + max-height: calc(100vh - 350px); + } + .prompt-answer { + padding: 0.5rem 0; + + .caret { + margin-top: 0; + } + &.prompt-answer-done { + .caret { + display: none; + } + } + &.prompt-answer-loading { + padding: 0.5rem 0; + .caret:not(:last-child), + code .caret { + display: none !important; + } + :last-child.caret { + display: inline-block; + } + } + + div > div { + font-size: 12px; + font-weight: bold; + &:not(empty) { + border-top: 1px solid var(--ifm-hr-background-color); + padding: 1rem 0; + } + + > div > div { + font-weight: normal; + display: inline-block; + padding: 0.25em 0.5em; + margin: 0.5em 0.5em 0 0; + border: 1px solid var(--ifm-hr-background-color); + border-radius: 4px; + } + } + } +} + +@keyframes caret { + 0% { + opacity: 1; + } + + to { + opacity: 0; + } +} diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss index 0ffba7f9cd2aa..3f18f67734052 100644 --- a/docs-website/src/styles/global.scss +++ b/docs-website/src/styles/global.scss @@ -44,6 +44,7 @@ html[data-theme="dark"] { --ifm-heading-color: #ffffff; --ifm-hr-border-color: #313131; --ifm-background-surface-color: #0b0b0b; + --ifm-hr-background-color: rgba(255, 255, 255, 0.1); .button--primary { color: #fff; @@ -227,7 +228,7 @@ div[class^="announcementBar"] { .quickstart__codeblock { text-align: left; padding: 0 20vh; - } +} .theme-doc-sidebar-menu ul li.saasOnly a.menu__link { &:after { diff --git a/docs-website/src/theme/Footer/index.js b/docs-website/src/theme/Footer/index.js new file mode 100644 index 0000000000000..74e6eb7d09a7b --- /dev/null +++ b/docs-website/src/theme/Footer/index.js @@ -0,0 +1,12 @@ +import React from "react"; +import Footer from "@theme-original/Footer"; +import MarkpromptHelp from "../../components/MarkpromptHelp"; + +export default function FooterWrapper(props) { + return ( + <> + +