docs: redesigned survey and content footer (#2522)

* fixes to inline code * redesigned doc footer
medusajs · Nov 2, 2022 · 23bc7c1 · 23bc7c1
1 parent 8822907
commit 23bc7c1
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 52 deletions.
diff --git a/www/docs/src/components/Feedback/index.css b/www/docs/src/components/Feedback/index.css
@@ -1,3 +1,9 @@
+
+.feedback-container {
+ padding-top: var(--ifm-base-margin-vertical);
+ border-top: 1px solid var(--ifm-doc-footer-border-color);
+}
+
 .inline-feedback {
  display: flex;
  flex-direction: row;
@@ -10,11 +16,6 @@
  flex-direction: column;
 }
 
-.inline-feedback span,
-.inline-question span {
- font-weight: bold;
-}
-
 .inline-feedback span {
  margin-right: 13px;
 }
@@ -28,24 +29,21 @@
  flex-direction: row;
  justify-content: center;
  align-items: center;
- font-size: 13px;
- padding: 12px 16px;
+ font-size: 12px;
+ line-height: 20px;
+ padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
- background-color: transparent;
- border: 1px solid #E5E7EB;
- color: var(--ifm-font-color-base);
+ background-color: var(--ifm-primary-btn-background-color);
+ border: 1px solid var(--ifm-primary-border-color);
+ color: var(--ifm-primary-btn-color);
 }
 
 .feedback-btn:focus {
  box-shadow: 0px 0px 0px 4px rgba(124, 58, 237, 0.1);
 }
 
-html:not([data-theme="dark"]) .feedback-btn:hover {
- background: #F3F4F6;
-}
-
 html:not([data-theme="dark"]) .feedback-btn:active,
 html:not([data-theme="dark"]) .feedback-btn:disabled {
  background: #E5E7EB;

diff --git a/www/docs/src/css/_code.css b/www/docs/src/css/_code.css
@@ -4,6 +4,15 @@
 
 code {
  border: 1px solid var(--ifm-code-border-color);
+ color: var(--ifm-code-color);
+}
+
+.inline-code-copy {
+ background-color: transparent;
+ border: none;
+ padding: 0;
+ display: inline;
+ color: var(--ifm-code-color)
 }
 
 .docusaurus-highlight-code-line {
@@ -123,6 +132,10 @@ a.code-action {
  display: none;
 }
 
+.copy-action {
+ cursor: pointer;
+}
+
 @media screen and (min-width: 568px) {
  .code-tabs .tabs {
  max-width: 90%;

diff --git a/www/docs/src/css/_docspage.css b/www/docs/src/css/_docspage.css
@@ -77,6 +77,53 @@ kbd {
  margin: 0;
 }
 
+.theme-doc-footer {
+ margin-top: var(--ifm-base-margin-vertical) !important;
+ border-top: 1px solid var(--ifm-doc-footer-border-color) !important;
+ padding-top: var(--ifm-base-margin-vertical);
+}
+
+html:not([data-theme="dark"]) .doc-footer {
+ --ifm-doc-footer-border-color: #E5E7EB;
+}
+
+[data-theme="dark"] .doc-footer {
+ --ifm-doc-footer-border-color: #3E3F41;
+}
+
+.theme-edit-this-page {
+ display: inline-flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ line-height: 20px;
+ padding: 6px 16px;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 600;
+ background-color: var(--ifm-primary-btn-background-color);
+ border: 1px solid var(--ifm-primary-border-color);
+}
+
+.theme-edit-this-page:hover {
+ text-decoration: none;
+}
+
+.theme-edit-this-page,
+.theme-edit-this-page:hover {
+ color: var(--ifm-primary-btn-color);
+}
+
+.theme-last-updated {
+ font-style: normal;
+ font-size: 12px;
+}
+
+.theme-last-updated b {
+ font-weight: 600 !important;
+}
+
 @media (min-width: 1440px) {
  .markdown-doc-wrapper {
  max-width: var(--ifm-container-width-xl) !important;

diff --git a/www/docs/src/css/_note.css b/www/docs/src/css/_note.css
@@ -16,12 +16,12 @@
  text-decoration: none;
 }
 
-html:not([data-theme="dark"]) [class*=alert--] p > code {
- --ifm-code-background: #F9FAFB;
- --ifm-alert-background-color-highlight: #F9FAFB;
+html:not([data-theme="dark"]) [class*=alert--] {
+ --ifm-code-background: #F9FAFB !important;
+ --ifm-alert-background-color-highlight: #F9FAFB !important;
 }
 
-[data-theme="dark"] [class*=alert--] p > code {
- --ifm-code-background: #222222;
- --ifm-alert-background-color-highlight: #222222;
+[data-theme="dark"] [class*=alert--] {
+ --ifm-code-background: #222222 !important;
+ --ifm-alert-background-color-highlight: #222222 !important;
 }
diff --git a/www/docs/src/css/_tooltip.css b/www/docs/src/css/_tooltip.css
@@ -5,7 +5,6 @@
 .tooltip-box {
  position: absolute;
  top: calc(-100% - 17px);
- left: calc(-50% - 30px);
  z-index: 100000;
  padding: 8px 16px;
  max-width: 170px;
@@ -27,4 +26,16 @@
 
 .tooltip-box.visible {
  opacity: 1;
+}
+
+.inline-tooltip {
+ display: inline-block;
+}
+
+.tooltip-container:not(.inline-tooltip) .tooltip-box {
+ left: calc(-50% - 30px);
+}
+
+.inline-tooltip .tooltip-box {
+ left: 15%;
 }
diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css
@@ -1,5 +1,6 @@
 /* You can override the default Infima variables here. */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
 
 :root {
  /* Colors */
@@ -17,6 +18,7 @@
  /* Fonts */
  --ifm-code-font-size: 14px;
  --ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
+ --ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
  --ifm-font-size-base: 14px;
  --ifm-line-height-base: 24px;
 
@@ -71,7 +73,10 @@
 
  /* Code */
  --ifm-code-border-radius: 8px;
+ --ifm-code-padding-horizontal: 8px;
  --ifm-code-border-color: #E5E7EB;
+ --ifm-code-background: #F9FAFB;
+ --ifm-code-color: #4B5563;
 
  --ifm-hr-background-color: #E5E7EB;
 
@@ -85,6 +90,10 @@
  --ifm-code-tabs-active-bg: transparent;
  --ifm-code-tabs-active-color: #F4F4F4;
  --ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16);
+
+ --ifm-primary-btn-background-color: #fff;
+ --ifm-primary-btn-color: #111827;
+ --ifm-primary-border-color: #E5E7EB;
 }
 
 html[data-theme="dark"] {
@@ -130,6 +139,8 @@ html[data-theme="dark"] {
 
  /* Code */
  --ifm-code-border-color: #393939;
+ --ifm-code-background: #222222;
+ --ifm-code-color: #8A8A8A;
 
  --ifm-hr-background-color: #2D2D2D;
 
@@ -139,4 +150,9 @@ html[data-theme="dark"] {
 
  --ifm-tooltip-background-color: #222222;
  --ifm-tooltip-border-color: #393939;
+
+
+ --ifm-primary-btn-background-color: #222222;
+ --ifm-primary-btn-color: #F3F3F3;
+ --ifm-primary-border-color: #393939;
 }
diff --git a/www/docs/src/theme/CodeBlock/index.js b/www/docs/src/theme/CodeBlock/index.js
@@ -7,7 +7,6 @@ import ThemedImage from '@theme/ThemedImage';
 import Tooltip from '../Tooltip';
 import CopyButton from '../CopyButton';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 
 /**
  * Best attempt to make the children a plain string so it is copyable. If there
@@ -34,30 +33,26 @@ export default function CodeBlock({children: rawChildren, ...props}) {
  const {reportCodeLinkPrefix} = useThemeConfig();
 
  return (
- <BrowserOnly>
- {() => (
- <div className='code-wrapper'>
- <div className='code-header'>
- <Tooltip text="Report Incorrect Code">
- <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${document?.title}`)}`} target="_blank" className='report-code code-action img-url'>
- <ThemedImage alt='Report Incorrect Code' sources={{
- light: useBaseUrl('/img/alert-code.png'),
- dark: useBaseUrl('/img/alert-code-dark.png')
- }} />
- </a>
- </Tooltip>
- <CopyButton buttonClassName='code-action' text={children}>
- <ThemedImage alt='Copy to Clipboard' sources={{
- light: useBaseUrl('/img/clipboard-copy.png'),
- dark: useBaseUrl('/img/clipboard-copy-dark.png')
- }} />
- </CopyButton>
- </div>
- <CodeBlockComp key={String(isBrowser)} {...props}>
- {children}
- </CodeBlockComp>
- </div>
- )}
- </BrowserOnly>
+ <div className='code-wrapper'>
+ <div className='code-header'>
+ <Tooltip text="Report Incorrect Code">
+ <a href={`${reportCodeLinkPrefix}&title=${encodeURIComponent(`Docs(Code Issue): Code Issue in ${isBrowser ? document?.title : ''}`)}`} target="_blank" className='report-code code-action img-url'>
+ <ThemedImage alt='Report Incorrect Code' sources={{
+ light: useBaseUrl('/img/alert-code.png'),
+ dark: useBaseUrl('/img/alert-code-dark.png')
+ }} />
+ </a>
+ </Tooltip>
+ <CopyButton buttonClassName='code-action' text={children}>
+ <ThemedImage alt='Copy to Clipboard' sources={{
+ light: useBaseUrl('/img/clipboard-copy.png'),
+ dark: useBaseUrl('/img/clipboard-copy-dark.png')
+ }} />
+ </CopyButton>
+ </div>
+ <CodeBlockComp key={String(isBrowser)} {...props}>
+ {children}
+ </CodeBlockComp>
+ </div>
  );
 }
diff --git a/www/docs/src/theme/CopyButton/index.js b/www/docs/src/theme/CopyButton/index.js
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import copy from 'copy-text-to-clipboard';
 import Tooltip from '../Tooltip';
 
-export default function CopyButton ({ children, buttonClassName, text }) {
+export default function CopyButton ({ children, buttonClassName, text, tooltipClassName }) {
  const [isCopied, setIsCopied] = useState(false);
  const copyTimeout = useRef(undefined);
 
@@ -17,7 +17,7 @@ export default function CopyButton ({ children, buttonClassName, text }) {
  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
 
  return (
- <Tooltip text={isCopied ? `Copied!` : `Copy to Clipboard`}>
+ <Tooltip text={isCopied ? `Copied!` : `Copy to Clipboard`} tooltipClassName={tooltipClassName}>
  <button className={`copy-action ${buttonClassName}`} onClick={handleCopy}>
  {children}
  </button>

diff --git a/www/docs/src/theme/DocItem/Footer/index.js b/www/docs/src/theme/DocItem/Footer/index.js
@@ -9,7 +9,7 @@ export default function FooterWrapper(props) {
  return (
  <>
  {!metadata.frontMatter?.hide_footer && (
- <div className='docusaurus-mt-lg'>
+ <div className='docusaurus-mt-lg doc-footer'>
  <Feedback />
  <Footer {...props} />
  </div>

diff --git a/www/docs/src/theme/Icon/Edit/index.js b/www/docs/src/theme/Icon/Edit/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function IconEdit({className, ...restProps}) {
+ return (
+ <ThemedImage alt='Edit' sources={{
+ light: useBaseUrl('/img/edit.png'),
+ dark: useBaseUrl('/img/edit-dark.png')
+ }} className={clsx(styles.iconEdit, className)} {...restProps} />
+ );
+}
diff --git a/www/docs/src/theme/Icon/Edit/styles.module.css b/www/docs/src/theme/Icon/Edit/styles.module.css
@@ -0,0 +1,6 @@
+.iconEdit {
+ margin-right: 8px;
+ vertical-align: sub;
+ width: 20px;
+ height: 20px;
+}
diff --git a/www/docs/src/theme/MDXComponents/InlineCode.js b/www/docs/src/theme/MDXComponents/InlineCode.js
@@ -0,0 +1,11 @@
+import React, {isValidElement} from 'react';
+import CopyButton from '../CopyButton';
+
+export default function MDXInlineCode(props) {
+
+ return (
+ <CopyButton text={props.children} buttonClassName="inline-code-copy" tooltipClassName="inline-tooltip">
+ <code {...props} />
+ </CopyButton>
+ )
+}
diff --git a/www/docs/src/theme/MDXComponents/index.js b/www/docs/src/theme/MDXComponents/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+import InlineCode from './InlineCode'
+
+export default {
+ // Re-use the default mapping
+ ...MDXComponents,
+ // Map the "highlight" tag to our <Highlight /> component!
+ // `Highlight` will receive all props that were passed to `highlight` in MDX
+ inlineCode: InlineCode,
+};
diff --git a/www/docs/src/theme/Tooltip/index.js b/www/docs/src/theme/Tooltip/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
-export default function Tooltip ({ children, text, ...rest }) {
+export default function Tooltip ({ children, text, tooltipClassName, ...rest }) {
  const [show, setShow] = React.useState(false);
 
  return (
- <div className="tooltip-container">
+ <div className={`tooltip-container ${tooltipClassName || ''}`}>
  <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>
  {text}
  </div>

diff --git a/www/docs/static/img/edit-dark.png b/www/docs/static/img/edit-dark.png
diff --git a/www/docs/static/img/edit.png b/www/docs/static/img/edit.png