From ba9699222584cabfaef7399475300c07d925eb56 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Tue, 16 Oct 2018 10:31:28 -0700 Subject: [PATCH] feat(v2): style navbar (#1044) --- v2/docs/foo/baz.md | 26 ++++----- v2/docs/hello.md | 28 +++++----- v2/docs/highlight.md | 7 ++- v2/docs/{docusaurus.md => intro.md} | 10 ++-- v2/lib/theme/Doc/index.js | 2 + v2/lib/theme/Footer/index.js | 2 +- v2/lib/theme/Layout/index.js | 2 + v2/lib/theme/Navbar/index.js | 37 +++++++++++++ v2/lib/theme/Navbar/styles.css | 64 +++++++++++++++++++++++ v2/lib/theme/Sidebar/index.js | 25 +++++---- v2/lib/theme/Sidebar/styles.css | 39 ++++++++------ v2/website/sidebars.json | 12 ++--- v2/website/static/img/docusaurus-logo.svg | 1 + 13 files changed, 177 insertions(+), 78 deletions(-) rename v2/docs/{docusaurus.md => intro.md} (89%) create mode 100644 v2/lib/theme/Navbar/index.js create mode 100644 v2/lib/theme/Navbar/styles.css create mode 100644 v2/website/static/img/docusaurus-logo.svg diff --git a/v2/docs/foo/baz.md b/v2/docs/foo/baz.md index dcbed35f7b..9737bc2d57 100644 --- a/v2/docs/foo/baz.md +++ b/v2/docs/foo/baz.md @@ -1,6 +1,6 @@ --- id: baz -title: Test Markdown +title: Markdown --- ## Images @@ -17,12 +17,10 @@ With a reference later in the document defining the URL location: [link text](http://dev.nodeca.com) -[link with title](http://nodeca.github.io/pica/demo/ "title text!") +[link with title](http://nodeca.github.io/pica/demo/ 'title text!') Autoconverted link https://github.com/nodeca/pica (enable linkify to see) - - ## Footnotes Footnote 1 link[^first]. @@ -35,21 +33,19 @@ Duplicated footnote reference[^second]. [^first]: Footnote **can have markup** - and multiple paragraphs. + and multiple paragraphs. [^second]: Footnote text. - ## Definition lists Term 1 -: Definition 1 -with lazy continuation. +: Definition 1 with lazy continuation. -Term 2 with *inline markup* +Term 2 with _inline markup_ -: Definition 2 +: Definition 2 { some code, part of Definition 2 } @@ -57,13 +53,9 @@ Term 2 with *inline markup* _Compact style:_ -Term 1 - ~ Definition 1 - -Term 2 - ~ Definition 2a - ~ Definition 2b +Term 1 ~ Definition 1 +Term 2 ~ Definition 2a ~ Definition 2b ## Abbreviations @@ -71,4 +63,4 @@ This is HTML abbreviation example. It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. -*[HTML]: Hyper Text Markup Language +\*[HTML]: Hyper Text Markup Language diff --git a/v2/docs/hello.md b/v2/docs/hello.md index 2211ef2718..06ef69483e 100644 --- a/v2/docs/hello.md +++ b/v2/docs/hello.md @@ -1,15 +1,13 @@ --- id: hello -title: Hello, World ! +title: Hello, World! --- ## Relative links -Replace this -[highlight](highlight.md) [docusaurus](docusaurus.md) +Replace this [highlight](highlight.md) [docusaurus](docusaurus.md) -Can't replace this -[file](file.md) +Can't replace this [file](file.md) Do not replace below @@ -20,21 +18,22 @@ Do not replace below ## Blockquotes > Blockquotes can also be nested... ->> ...by using additional greater-than signs right next to each other... +> +> > ...by using additional greater-than signs right next to each other... +> > > > > ...or with spaces between arrows. - ## Lists Unordered -+ Create a list by starting a line with `+`, `-`, or `*` -+ Sub-lists are made by indenting 2 spaces: +- Create a list by starting a line with `+`, `-`, or `*` +- Sub-lists are made by indenting 2 spaces: - Marker character change forces new list start: - * Ac tristique libero volutpat at - + Facilisis in pretium nisl aliquet + - Ac tristique libero volutpat at + * Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit -+ Very easy! +- Very easy! Ordered @@ -42,9 +41,8 @@ Ordered 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa - -1. You can use sequential numbers... -1. ...or keep all the numbers as `1.` +1) You can use sequential numbers... +1) ...or keep all the numbers as `1.` Start numbering with offset: diff --git a/v2/docs/highlight.md b/v2/docs/highlight.md index 4c4562d328..e6f8013f03 100644 --- a/v2/docs/highlight.md +++ b/v2/docs/highlight.md @@ -1,6 +1,6 @@ --- -id: highlight -title: Syntax highlighting demo +id: code +title: Code --- ```cpp @@ -11,7 +11,6 @@ int main() { cout << "Hello world\n"; return 0; } - ``` ```cpp @@ -41,4 +40,4 @@ int main() return 0; } -``` \ No newline at end of file +``` diff --git a/v2/docs/docusaurus.md b/v2/docs/intro.md similarity index 89% rename from v2/docs/docusaurus.md rename to v2/docs/intro.md index 7b85506414..f31b9121b2 100644 --- a/v2/docs/docusaurus.md +++ b/v2/docs/intro.md @@ -1,6 +1,6 @@ --- -id: docusaurus -title: docusaurus +id: intro +title: Introduction ---

@@ -21,6 +21,6 @@ title: docusaurus Docusaurus is a project for easily building, deploying, and maintaining open source project websites. -* **Simple to Start** Docusaurus is built to be easy to [get up and running](https://docusaurus.io/docs/en/installation.html) in as little time possible. We've built Docusaurus to handle the website build process so you can focus on your project. -* **Localizable** Docusaurus ships with [localization support](https://docusaurus.io/docs/en/translation.html) via CrowdIn. Empower and grow your international community by translating your documentation. -* **Customizable** While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a [blog](https://docusaurus.io/docs/en/blog.html), and additional support pages, it is also [customizable](https://docusaurus.io/docs/en/custom-pages.html) as well to ensure you have a site that is [uniquely yours](https://docusaurus.io/docs/en/api-pages.html). \ No newline at end of file +- **Simple to Start** Docusaurus is built to be easy to [get up and running](https://docusaurus.io/docs/en/installation.html) in as little time possible. We've built Docusaurus to handle the website build process so you can focus on your project. +- **Localizable** Docusaurus ships with [localization support](https://docusaurus.io/docs/en/translation.html) via CrowdIn. Empower and grow your international community by translating your documentation. +- **Customizable** While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a [blog](https://docusaurus.io/docs/en/blog.html), and additional support pages, it is also [customizable](https://docusaurus.io/docs/en/custom-pages.html) as well to ensure you have a site that is [uniquely yours](https://docusaurus.io/docs/en/api-pages.html). diff --git a/v2/lib/theme/Doc/index.js b/v2/lib/theme/Doc/index.js index c6f7bc8c71..f978167e19 100644 --- a/v2/lib/theme/Doc/index.js +++ b/v2/lib/theme/Doc/index.js @@ -5,6 +5,7 @@ import Helmet from 'react-helmet'; import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line import Footer from '@theme/Footer'; // eslint-disable-line +import Navbar from '@theme/Navbar'; // eslint-disable-line import Sidebar from '@theme/Sidebar'; // eslint-disable-line import styles from './styles.css'; @@ -29,6 +30,7 @@ class Doc extends React.Component { {language && } {version && } + (
  • - {metadata.permalink} + {metadata.title}
    • ))} diff --git a/v2/lib/theme/Layout/index.js b/v2/lib/theme/Layout/index.js index d1e473176d..355f987613 100644 --- a/v2/lib/theme/Layout/index.js +++ b/v2/lib/theme/Layout/index.js @@ -1,5 +1,6 @@ import React from 'react'; import Footer from '@theme/Footer'; // eslint-disable-line +import Navbar from '@theme/Navbar'; // eslint-disable-line import './styles.css'; @@ -14,6 +15,7 @@ export default class Layout extends React.Component { } = this.props; return (
    + {children}