Merge pull request #47 from dfuzr/LIB-598-add-code-snippet

Lib 598 add code snippet

docs/core/overview-v2.md

@@ -4,6 +4,53 @@ title: Libra Core Overview
 sidebar_label: Core Contributors
 ---
 
+### Excerpt Demo
+
+<Excerpt image="img/white-paper-screenshot.png">
+  The world truly needs a reliable digital currency and infrastructure that together can deliver on the promise of “the internet of money.” Securing your financial assets on your mobile device should be simple and intuitive. Moving money around globally should be as easy and cost-effective as — and even more safe and secure than — sending a text message or sharing a photo, no matter where you live, what you do, or how much you earn.  
+  <a href='#'>— Libra White Paper</a>
+</Excerpt>
+
+```jsx
+import React, { useState } from "react";
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+
+```
+usage: <command> <args>
+
+Use the following commands:
+
+account | a
+  Account operations
+query | q
+  Query operations
+transfer | transferb | t | tb
+  <sender_account_address>|<sender_account_ref_id> <receiver_account_address>|<receiver_account_ref_id> <number_of_coins> [gas_unit_price (default=0)] [max_gas_amount (default 10000)] Suffix 'b' is for blocking.
+  Transfer coins from account to another.
+help | h
+  Prints this help
+quit | q!
+  Exit this client
+
+
+Please, input commands:
+
+libra%
+```
+
 Libra Core is the official name for the open-source implementation of the Libra protocol published by the Libra Association.
 
 ### Discover Core Contributor

docusaurus.config.js

@@ -7,7 +7,10 @@ module.exports = {
   organizationName: 'facebook', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
   themeConfig: {
-    disableDarkMode: true,
+    algolia: {
+      apiKey: 'eb29b473d27eae9cc46c84eb3a2e4063',
+      indexName: 'libra-website',
+    },
     sidebarCollapsible: false,
     navbar: {
       title: 'My Site',

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "TEST_ADA=1 docusaurus start",
+    "start": "docusaurus start",
+    "start-with-ada": "TEST_ADA=1 docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy"
@@ -12,7 +13,7 @@
     "@docusaurus/core": "^2.0.0-alpha.53",
     "@docusaurus/preset-classic": "^2.0.0-alpha.53",
     "classnames": "^2.2.6",
-    "libra-docusaurus-nav": "^1.1.4",
+    "libra-docusaurus-nav": "^1.2.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },

src/components/WithBackgroundImage/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -23,6 +24,17 @@ const WithBackgroundImage = ({
       {children}
     </Tag>
   );
-}
+};
+
+WithBackgroundImage.propTypes = {
+  children: PropTypes.element,
+  imageDark: PropTypes.string,
+  imageLight: PropTypes.string.isRequired,
+  tag: PropTypes.oneOf(PropTypes.element, PropTypes.string).isRequired,
+};
+
+WithBackgroundImage.defaultProps = {
+  tag: 'div',
+};
 
 export default WithBackgroundImage;

src/components/docs/Cards/BaseContainer/styles.module.css

@@ -1,6 +1,7 @@
 .root {
-  color: var(--doc-black);
-  transition: .15s ease-in-out;
+  --transition-speed: .15s;
+  color: var(--doc-primary);
+  transition: box-shadow var(--transition-speed) ease-in-out;
   width: var(--doc-card-size);
 }
 

src/components/docs/Cards/OverlayCard/styles.module.css

@@ -1,5 +1,6 @@
 .root {
-  background-color: var(--doc-background-color);
+  --transition-speed: .25s;
+  background-color: var(--doc-component-background);
   display: inline-block;
   overflow: hidden;
   position: relative;
@@ -22,9 +23,14 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+  transition: background-color var(--transition-speed) ease-in-out;
   width: 263px;
 }
 
+.root:hover .circleOverlay {
+  background-color: #8ECFBA;
+}
+
 .root .image {
   --image-size: 50px;
   background-repeat: no-repeat;

src/components/docs/Cards/SimpleCard/styles.module.css

@@ -1,6 +1,6 @@
 .root {
   align-items: center;
-  background-color: var(--doc-background-color);
+  background-color: var(--doc-component-background);
   display: inline-flex;
   padding: 20px;
 }

src/components/docs/Cards/TagCard/styles.module.css

@@ -1,6 +1,6 @@
 .root {
   align-items: center;
-  background-color: var(--doc-background-color);
+  background-color: var(--doc-component-background);
   display: inline-flex;
   padding: 20px;
 }

src/components/docs/Code/index.js

@@ -0,0 +1,123 @@
+import React, {useEffect, useRef, useState} from "react";
+import Clipboard from 'clipboard';
+import Highlight, { defaultProps } from "prism-react-renderer";
+import darkCodeTheme from "prism-react-renderer/themes/paleNight";
+import lightCodeTheme from "prism-react-renderer/themes/github";
+import PropTypes from 'prop-types';
+
+import useThemeContext from '@theme/hooks/useThemeContext';
+
+import WithBackgroundImage from 'components/WithBackgroundImage';
+
+import classnames from 'classnames';
+import styles from './styles.module.css';
+
+const LINE_CONTENT_CLASS = 'line-content';
+
+const getUniqueID = (() => {
+  let id = 0;
+  return () => id++;
+})();
+
+const handleCopyCode = (setShowCopied) => {
+  window.getSelection().empty();
+  setShowCopied(true);
+
+  setTimeout(() => setShowCopied(false), 2000);
+};
+
+const Header = ({ snippetID, target }) => {
+  const [showCopied, setShowCopied] = useState(false);
+  const button = useRef(null);
+
+  useEffect(() => {
+    let clipboard;
+
+    if (button.current) {
+      clipboard = new Clipboard(button.current, {
+        text: () =>
+          Array.from(document.querySelectorAll(`#${snippetID} .${LINE_CONTENT_CLASS}`))
+            .map(({textContent}) => `${textContent}\n`)
+            .join(''),
+      });
+    }
+
+    return () => {
+      if (clipboard) {
+        clipboard.destroy();
+      }
+    };
+  }, [button.current, target.current]);
+
+  return (
+    <div className={styles.header}>
+      <div ref={button}>
+        <WithBackgroundImage
+          className={classnames(styles.copyWrapper, {
+            [styles.isCopied]: showCopied,
+          })}
+          imageDark="img/copy-dark.svg"
+          imageLight="img/copy.svg"
+          onClick={() => handleCopyCode(setShowCopied)}
+        >
+          <button
+            type="button"
+            aria-label="Copy code to clipboard"
+          >
+            {showCopied ? 'Copied' : 'Copy'}
+          </button>
+        </WithBackgroundImage>
+      </div>
+    </div>
+  );
+};
+
+const Code = ({ children, className: languageClassName }) => {
+  const {isDarkTheme} = useThemeContext();
+  const [snippetID, setSnippetID] = useState(null);
+  const target = useRef(null);
+
+  let code = children.replace(/\n$/, '');
+  const theme = isDarkTheme ? darkCodeTheme : lightCodeTheme;
+  let language =
+    languageClassName && languageClassName.replace(/language-/, '');
+
+  useEffect(() => setSnippetID(`snippet-${getUniqueID()}`), []);
+
+  return (
+    <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+      {({ className,style, tokens, getLineProps, getTokenProps }) => (
+        <div className={styles.root}>
+          <Header snippetID={snippetID} target={target} />
+          <pre className={className} id={snippetID} ref={target} style={style}>
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line, key: i })}>
+                <span className={styles.lineNumber}>{i + 1}</span>
+                <span className={LINE_CONTENT_CLASS}>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token, key })} />
+                  ))}
+                </span>
+              </div>
+            ))}
+          </pre>
+        </div>
+      )}
+    </Highlight>
+  );
+};
+
+Code.propTypes = {
+  /*
+   * For a list of available languages, see 
+   * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js
+   */
+  className: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
+};
+
+Code.defaultProps = {
+  className: 'language-plaintext',
+};
+
+export default Code;

src/components/docs/Code/styles.module.css

@@ -0,0 +1,52 @@
+.header {
+  background-color: var(--snippet-header-background);
+  border-top-left-radius: var(--ifm-pre-border-radius);
+  border-top-right-radius: var(--ifm-pre-border-radius);
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+}
+
+.copyWrapper {
+  --icon-size: 12px;
+  background-position: 99% 2.5px;
+  background-repeat: no-repeat;
+  background-size: var(--icon-size);
+  display: flex;
+  margin-right: 5px;
+  padding: 3px calc(var(--icon-size) + 4px) 3px 0;
+}
+
+.copyWrapper:not(.isCopied), .copyWrapper:not(.isCopied) button {
+  cursor: pointer;
+}
+
+.header button {
+  background-color: transparent;
+  border: none;
+  color: var(--snippet-copy-color);
+  font-size: 10px;
+}
+
+.header button:focus {
+  outline: none;
+}
+
+.root pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.root :global(.token-line) {
+  display: table-row;
+}
+
+
+.lineNumber {
+  display: table-cell;
+  padding-right: 13px;
+  text-align: right;
+  user-select: none;
+  -moz-user-select: none;
+  word-break: keep-all;
+}

src/components/docs/Excerpt/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import styles from './styles.module.css';
+
+const Excerpt = ({children, image}) => {
+  return (
+    <div className={styles.root}>
+      <div className={styles.content}>
+        <div className={styles.imageContainer}>
+          <img className={styles.image} src={useBaseUrl(image)} />
+        </div>
+        <div className={styles.text}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Excerpt.propTypes = {
+  image: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+export default Excerpt;