diff --git a/docs/core/overview-v2.md b/docs/core/overview-v2.md index 38b89b5b..86dab6a7 100644 --- a/docs/core/overview-v2.md +++ b/docs/core/overview-v2.md @@ -4,6 +4,53 @@ title: Libra Core Overview sidebar_label: Core Contributors --- +### Excerpt Demo + + + 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. + — Libra White Paper + + +```jsx +import React, { useState } from "react"; + +function Example() { + const [count, setCount] = useState(0); + + return ( +
+

You clicked {count} times

+ +
+ ); +} +``` + +``` +usage: + +Use the following commands: + +account | a + Account operations +query | q + Query operations +transfer | transferb | t | tb + | | [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 diff --git a/docusaurus.config.js b/docusaurus.config.js index 419c3765..bb7f833d 100644 --- a/docusaurus.config.js +++ b/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', diff --git a/package.json b/package.json index 95df8d18..892fc562 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/WithBackgroundImage/index.js b/src/components/WithBackgroundImage/index.js index 322dbf1e..c3b3828b 100644 --- a/src/components/WithBackgroundImage/index.js +++ b/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} ); -} +}; + +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; diff --git a/src/components/docs/Cards/BaseContainer/styles.module.css b/src/components/docs/Cards/BaseContainer/styles.module.css index 9fa08ef6..e9751a42 100644 --- a/src/components/docs/Cards/BaseContainer/styles.module.css +++ b/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); } diff --git a/src/components/docs/Cards/OverlayCard/styles.module.css b/src/components/docs/Cards/OverlayCard/styles.module.css index ccb0954c..b09023de 100644 --- a/src/components/docs/Cards/OverlayCard/styles.module.css +++ b/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; diff --git a/src/components/docs/Cards/SimpleCard/styles.module.css b/src/components/docs/Cards/SimpleCard/styles.module.css index 332dca24..0baf361d 100644 --- a/src/components/docs/Cards/SimpleCard/styles.module.css +++ b/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; } diff --git a/src/components/docs/Cards/TagCard/styles.module.css b/src/components/docs/Cards/TagCard/styles.module.css index 3f5fda3e..25cc3560 100644 --- a/src/components/docs/Cards/TagCard/styles.module.css +++ b/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; } diff --git a/src/components/docs/Code/index.js b/src/components/docs/Code/index.js new file mode 100644 index 00000000..16ae76f6 --- /dev/null +++ b/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 ( +
+
+ handleCopyCode(setShowCopied)} + > + + +
+
+ ); +}; + +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 ( + + {({ className,style, tokens, getLineProps, getTokenProps }) => ( +
+
+ 
+            {tokens.map((line, i) => (
+              

+                {i + 1}
+                
+                  {line.map((token, key) => (
+                    
+                  ))}
+                
+              

+            ))}
+
+
+ )} + + ); +}; + +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; diff --git a/src/components/docs/Code/styles.module.css b/src/components/docs/Code/styles.module.css new file mode 100644 index 00000000..b849f033 --- /dev/null +++ b/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; +} diff --git a/src/components/docs/Excerpt/index.js b/src/components/docs/Excerpt/index.js new file mode 100644 index 00000000..1f5a4c85 --- /dev/null +++ b/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 ( +
+
+
+ +
+
+ {children} +
+
+
+ ); +}; + +Excerpt.propTypes = { + image: PropTypes.string.isRequired, + text: PropTypes.string.isRequired, +}; + +export default Excerpt; diff --git a/src/components/docs/Excerpt/styles.module.css b/src/components/docs/Excerpt/styles.module.css new file mode 100644 index 00000000..7effe3f1 --- /dev/null +++ b/src/components/docs/Excerpt/styles.module.css @@ -0,0 +1,49 @@ +@value large-tablet-breakpoint-query from '~CSS/variables.module.css'; +@value desktop-breakpoint-query from '~CSS/variables.module.css'; + +.root { + box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.2); + border-radius: 5px; + margin-bottom: 25px; + padding: 30px 0; +} + +.content { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 20px; +} + +.imageContainer { + align-items: flex-start; + display: flex; + flex-shrink: 0; + padding-right: 25px; + margin-bottom: 20px; +} + +.image { + width: 125px; +} + +.text { + margin: 0; +} + +@media large-tablet-breakpoint-query { + .content { + flex-direction: row; + } +} + +@media desktop-breakpoint-query { + .content { + margin: 0 55px; + } + + .imageContainer { + padding-right: 50px; + margin-bottom: 0; + } +} diff --git a/src/components/docs/index.js b/src/components/docs/index.js index d841c715..a5054ad1 100644 --- a/src/components/docs/index.js +++ b/src/components/docs/index.js @@ -1,5 +1,9 @@ +import Code from './Code'; import Cards from './Cards'; +import Excerpt from './Excerpt'; export default { ...Cards, + code: Code, + Excerpt, }; diff --git a/src/css/custom.css b/src/css/custom.css index 8365687d..b5e659d3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,13 +1,17 @@ -html { - overflow-y: hidden; -} - /* stylelint-disable docusaurus/copyright-header */ * { list-style: none; } -body { +html, body { + overflow: hidden; +} + +html { + background-color: var(--default-background-color); +} + +body, input { font-family: 'NB International Pro'; } @@ -20,11 +24,34 @@ body .hash-link { padding-right: 5px ; } -.main-wrapper > div > div { - width: 400px !important; - margin-top: 2.25px !important; +main > .container.padding-vert--lg { + padding-top: 0 !important; } +main article { + margin-top: 20px; +} + +main article h1, +main article h2, +main article h3, +main article h4, +main article h5, +main article h6 { + color: var(--doc-title); +} + +.prism-code > * { + /* + * Prevents code block from overflowing on extremely + * long words + */ + white-space: pre-wrap !important; + word-break: break-all; +} + +/* Fonts */ + @font-face { font-family: 'NB International Pro'; font-weight: 400; diff --git a/src/css/variables.module.css b/src/css/variables.module.css index da886421..7c663287 100644 --- a/src/css/variables.module.css +++ b/src/css/variables.module.css @@ -4,6 +4,29 @@ }; } +html[data-theme='dark'] { + --accent-highlight: #6889E5; + --default-background-color: var(--dark-mode-black-darkest); + --default-border-color: var(--dark-mode-black-lighter); + --doc-component-background: var(--dark-mode-black-lighter); + --doc-primary: white; + --doc-title: white; + --nav-page-indicator-primary: white; + --nav-page-indicator-secondary: var(--dark-mode-gray-1); + --nav-primary-text-color: white; + --primary-gray: var(--dark-mode-gray-2); + --right-sidebar-top-bar-hover: var(--accent-highlight); + --sidebar-gray: var(--dark-mode-gray-1); + --sidebar-primary-title: var(--dark-mode-gray-2); + --snippet-copy-color: white; + --snippet-header-background: #50576B; + --subnav-background: #2A3045; + --subnav-text-color: var(--dark-mode-gray-1); + --toc-color: #A3ACB9; + --toggle-background: var(--dark-mode-gray-1); + --toggle-indicator-background: var(--default-background-color); +} + :root { /* Sizing */ --body-horizontal-padding: 30px; @@ -42,6 +65,8 @@ --nav-page-indicator-secondary: #5F7186; --nav-primary-text-color: #42318c; --right-sidebar-top-bar-hover: #354052; + --snippet-header-background: #E3E8EE; + --snippet-copy-color: #6B7689; /* TODO: Look into accounting varying browser widths of scrollbar */; --scrollbar-width: 10px; --sidebar-gray: var(--dark-mode-gray-1); diff --git a/src/theme/DocPage/styles.module.css b/src/theme/DocPage/styles.module.css index f22b9d7e..103eda11 100644 --- a/src/theme/DocPage/styles.module.css +++ b/src/theme/DocPage/styles.module.css @@ -1,27 +1,27 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ +@value large-tablet-breakpoint-query from '~CSS/variables.module.css'; .docPage { - color: var(--doc-black); + color: var(--doc-primary); display: flex; } .docSidebarContainer { - border-right: 1px solid var(--ifm-contents-border-color); box-sizing: border-box; width: 300px; position: relative; - margin-top: calc(-1 * var(--ifm-navbar-height)); } .docMainContainer { + flex: 1; flex-grow: 1; } +@media large-tablet-breakpoint-query { + .docSidebarContainer { + border-right: 1px solid var(--default-border-color); + } +} + @media (max-width: 996px) { .docPage { display: inherit; diff --git a/src/theme/DocSidebar/index.js b/src/theme/DocSidebar/index.js index 2d13fe57..ae7428a7 100644 --- a/src/theme/DocSidebar/index.js +++ b/src/theme/DocSidebar/index.js @@ -4,6 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLogo from '@theme/hooks/useLogo'; import Link from '@docusaurus/Link'; +import SearchBar from '@theme/SearchBar'; import useBaseUrl from '@docusaurus/useBaseUrl'; import isInternalUrl from '@docusaurus/isInternalUrl'; @@ -157,6 +158,7 @@ function mutateSidebarCollapsingState(item, path) { function DocSidebar(props) { const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false); + const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false); const { siteConfig: { themeConfig: {navbar: {title, hideOnScroll = false} = {}}, @@ -248,6 +250,10 @@ function DocSidebar(props) { )}
    + {sidebarData.map((item) => ( .menuLink:hover { background-color: inherit; - color: var(--ifm-color-primary); + color: var(--accent-highlight); } .menu .withBackgroundImage, .menu .menuLink.withBackgroundImage { @@ -159,9 +139,8 @@ } /* Themes */ - .primary .menuLink, .menuLink.primary { - color: var(--ifm-font-color-base); + color: var(--sidebar-primary-title); font-size: 1.8em; } @@ -194,3 +173,33 @@ padding-top: .2em; padding-bottom: .5em; } + +@media large-tablet-breakpoint-query { + .sidebar { + height: calc(100vh - var(--total-nav-height) ); + overflow-y: auto; + position: sticky; + top: 0; + margin-bottom: .5px !important; + } + + .sidebar .menu:not(:global(.menu--show)) .menuList, + .sidebar .menu:not(:global(.menu--show)) :global(#search_input_react) { + display: block; + opacity: 1; + } + + :global(.ds-dropdown-menu) { + width: 100%; + } + + :global(.navbar__search) { + /* + * Allow for a border that traverses the width of the + * whole sidebar without the need for absolute positioning + */ + margin-left: calc(-1 * var(--sidebar-horizontal-padding)); + padding-left: calc(var(--sidebar-horizontal-padding)); + width: calc(100% + 2 * var(--sidebar-horizontal-padding)); + } +} diff --git a/src/theme/Layout/styles.css b/src/theme/Layout/styles.css index 0723a0ac..8d5fdf62 100644 --- a/src/theme/Layout/styles.css +++ b/src/theme/Layout/styles.css @@ -18,7 +18,8 @@ body { .width-wrapper { margin-left: auto; margin-right: auto; - max-width: 1400px; + max-width: 1440px; + width: 100%; } .main-wrapper { @@ -26,10 +27,11 @@ body { } .nav-spacer { - height: 140px; + height: var(--total-nav-height); } .nav-pusher { + margin-top: 1px; overflow-y: scroll; - height: calc(100vh - 180px); + height: calc(100vh - var(--total-nav-height) ); } diff --git a/src/theme/Navbar/index.js b/src/theme/Navbar/index.js index 704dae95..43508275 100644 --- a/src/theme/Navbar/index.js +++ b/src/theme/Navbar/index.js @@ -2,7 +2,7 @@ import React from 'react'; import Nav from 'libra-docusaurus-nav'; const Navbar = () => { - return