From ea200b0898f6f150046957c546dbc9befc2e9a76 Mon Sep 17 00:00:00 2001 From: sbansal3096 Date: Wed, 5 Sep 2018 20:27:58 +0530 Subject: [PATCH 1/5] Adding tab paging feature in siteConfig.js --- lib/static/css/main.css | 36 ++++++++++++++++++ .../version-1.3.3/api-site-config.md | 37 ++++++++++++++++++- 2 files changed, 72 insertions(+), 1 deletion(-) diff --git a/lib/static/css/main.css b/lib/static/css/main.css index 322673ebd2af..f06a4c728db4 100644 --- a/lib/static/css/main.css +++ b/lib/static/css/main.css @@ -2278,3 +2278,39 @@ input::placeholder { padding: 5px 0; } /* End of Footer */ + +/* Start of Tab Bar */ +.tab { + overflow: hidden; + border-bottom-color: #398555; + border-bottom-style: solid; + border-bottom-width: 2px; +} +.tabcontent { + display: none; + border-top: none; +} +.tab button { + background-color: inherit; + float: left; + border-style: solid; + color: $primaryColor; + border-color: $primaryColor; + border-bottom-color: transparent; + border-width: 1px; + margin-right: 5px; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + font-size: 17px; + border-radius: 3px 3px 0px 0px; +} +.tab button:hover { + background-color: $primaryColor; + color: #fff; +} +.tab button.active { + background-color: $primaryColor; + color: #fff; +} +/* End of Tab Bar */ \ No newline at end of file diff --git a/website/versioned_docs/version-1.3.3/api-site-config.md b/website/versioned_docs/version-1.3.3/api-site-config.md index 516a2ab63a97..55b89f4c7bfa 100644 --- a/website/versioned_docs/version-1.3.3/api-site-config.md +++ b/website/versioned_docs/version-1.3.3/api-site-config.md @@ -6,12 +6,24 @@ original_id: site-config A large part of site configuration is done by editing the `siteConfig.js` file. +
+ + + +
+ +
+ ## User Showcase -The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page. +The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers ov er the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page. Currently this `users` array is used only by the `index.js` and `users.js` example files. If you do not wish to have a users page or show users on the `index` page, you may remove this section. +
+ +
+ ## siteConfig Fields The `siteConfig` object contains the bulk of the configuration settings for your website. @@ -182,6 +194,10 @@ h1 { Users can also add their own custom fields if they wish to provide some data across different files. +
+ +
+ ## Example siteConfig.js with many available fields ```js @@ -266,3 +282,22 @@ const siteConfig = { module.exports = siteConfig; ``` +
+ + \ No newline at end of file From 920e73e1095f4d4c01fe9867e50ffecfb56f98cb Mon Sep 17 00:00:00 2001 From: sbansal3096 Date: Wed, 5 Sep 2018 21:21:40 +0530 Subject: [PATCH 2/5] Making changes in correct siteConfig.js file --- docs/api-site-config.md | 57 +++++++++++++++++-- .../version-1.3.3/api-site-config.md | 39 +------------ 2 files changed, 55 insertions(+), 41 deletions(-) diff --git a/docs/api-site-config.md b/docs/api-site-config.md index 17ede83f2078..a2563f8a7a9e 100644 --- a/docs/api-site-config.md +++ b/docs/api-site-config.md @@ -5,12 +5,23 @@ title: siteConfig.js A large part of site configuration is done by editing the `siteConfig.js` file. +
+ + + +
+ +
## User Showcase The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page. Currently this `users` array is used only by the `index.js` and `users.js` example files. If you do not wish to have a users page or show users on the `index` page, you may remove this section. +
+ +
+ ## siteConfig Fields The `siteConfig` object contains the bulk of the configuration settings for your website. @@ -147,6 +158,8 @@ h1 { * `defaultLang` defines a default language. It will be used if one is not specified at the top of the code block. You can find the [list of supported languages here](https://github.com/isagalaev/highlight.js/tree/master/src/languages). * `themeUrl` is the custom URL of CSS theme file that you want to use with Highlight.js. If this is provided, the `theme` and `version` fields will be ignored. +`manifest` - Path to your web app manifest (e.g., `/manifest.json`). This will add a `` tag to `` with `rel` as `"manifest"` and `content` as the provided path. + `markdownPlugins` - An array of plugins to be loaded by Remarkable, the markdown parser and renderer used by Docusaurus. The plugin will receive a reference to the Remarkable instance, allowing custom parsing and rendering rules to be defined. `ogImage` - Local path to an Open Graph image (e.g., `img/myImage.png`). This image will show up when your site is shared on Facebook and other websites/apps where the Open Graph protocol is supported. @@ -155,7 +168,7 @@ h1 { * `separate` - The secondary navigation is a separate pane defaulting on the right side of a document. See http://docusaurus.io/docs/en/translation.html for an example. -`scripts` - Array of JavaScript sources to load. The script tag will be inserted in the HTML head. +`scripts` - Array of JavaScript sources to load. The values can be either strings or plain objects of attribute-value maps. Refer to the example below. The script tag will be inserted in the HTML head. `separateCss` - Directories inside which any `css` files will not be processed and concatenated to Docusaurus' styles. This is to support static `html` pages that may be separate from Docusaurus with completely separate styles. @@ -163,7 +176,7 @@ h1 { `scrollToTopOptions` - Optional options configuration for the scroll to top button. You do not need to use this, even if you set `scrollToTop` to `true`; it just provides you more configuration control of the button. You can find more options [here](https://github.com/vfeskov/vanilla-back-to-top/blob/v7.1.14/OPTIONS.md). By default, we set the zIndex option to 100. -`stylesheets` - Array of CSS sources to load. The link tag will be inserted in the HTML head. +`stylesheets` - Array of CSS sources to load. The values can be either strings or plain objects of attribute-value maps. The link tag will be inserted in the HTML head. `translationRecruitingLink` - URL for the `Help Translate` tab of language selection when languages besides English are enabled. This can be included you are using translations but does not have to be. @@ -183,6 +196,10 @@ h1 { Users can also add their own custom fields if they wish to provide some data across different files. +
+ +
+ ## Example siteConfig.js with many available fields ```js @@ -249,8 +266,20 @@ const siteConfig = { }; }, ], - scripts: ['https://docusaurus.io/slash.js'], - stylesheets: ['https://docusaurus.io/style.css'], + scripts: [ + 'https://docusaurus.io/slash.js', + { + src: 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js', + async: true + } + ], + stylesheets: [ + 'https://docusaurus.io/style.css', + { + href: 'http://css.link', + type: "text/css" + } + ], facebookAppId: '1615782811974223', facebookComments: true, facebookPixelId: '352490515235776', @@ -267,3 +296,23 @@ const siteConfig = { module.exports = siteConfig; ``` + +
+ + \ No newline at end of file diff --git a/website/versioned_docs/version-1.3.3/api-site-config.md b/website/versioned_docs/version-1.3.3/api-site-config.md index 55b89f4c7bfa..2ffbd5f67320 100644 --- a/website/versioned_docs/version-1.3.3/api-site-config.md +++ b/website/versioned_docs/version-1.3.3/api-site-config.md @@ -6,24 +6,12 @@ original_id: site-config A large part of site configuration is done by editing the `siteConfig.js` file. -
- - - -
- -
- ## User Showcase -The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers ov er the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page. +The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page. Currently this `users` array is used only by the `index.js` and `users.js` example files. If you do not wish to have a users page or show users on the `index` page, you may remove this section. -
- -
- ## siteConfig Fields The `siteConfig` object contains the bulk of the configuration settings for your website. @@ -194,10 +182,6 @@ h1 { Users can also add their own custom fields if they wish to provide some data across different files. -
- -
- ## Example siteConfig.js with many available fields ```js @@ -281,23 +265,4 @@ const siteConfig = { }; module.exports = siteConfig; -``` -
- - \ No newline at end of file +``` \ No newline at end of file From 5b7511b3d29ac23ffbcbb8886a7259b5bfb0670f Mon Sep 17 00:00:00 2001 From: sbansal3096 Date: Sat, 8 Sep 2018 00:02:55 +0530 Subject: [PATCH 3/5] Adding script in docs.js to avoid copying it everywhere --- docs/api-site-config.md | 18 +++------------- lib/core/DocsLayout.js | 21 +++++++++++++++++++ .../version-1.3.3/api-site-config.md | 2 +- 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/docs/api-site-config.md b/docs/api-site-config.md index a2563f8a7a9e..ab9d79a26153 100644 --- a/docs/api-site-config.md +++ b/docs/api-site-config.md @@ -12,6 +12,7 @@ A large part of site configuration is done by editing the `siteConfig.js` file.
+ ## User Showcase The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someone. The `pinned` field determines whether or not it shows up on the `index` page. @@ -300,19 +301,6 @@ module.exports = siteConfig;
\ No newline at end of file diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js index d859e6b3532e..95f3045c352f 100644 --- a/lib/core/DocsLayout.js +++ b/lib/core/DocsLayout.js @@ -64,6 +64,27 @@ class DocsLayout extends React.Component { language={metadata.language} version={metadata.version} metadata={metadata}> + { + \ No newline at end of file diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js index 95f3045c352f..ad54db808a45 100644 --- a/lib/core/DocsLayout.js +++ b/lib/core/DocsLayout.js @@ -68,7 +68,7 @@ class DocsLayout extends React.Component {