Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add page tabbing #946

Closed
wants to merge 6 commits into from
Closed

feat: add page tabbing #946

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ea200b0
Adding tab paging feature in siteConfig.js
sbansal3096 Sep 5, 2018
920e73e
Making changes in correct siteConfig.js file
sbansal3096 Sep 5, 2018
5b7511b
Adding script in docs.js to avoid copying it everywhere
sbansal3096 Sep 7, 2018
fe606f5
Link tabbing with right side toc
sbansal3096 Sep 22, 2018
b23ce24
resolving merge conflicts
sbansal3096 Sep 22, 2018
c163909
Giving suitable names and putting some conditions to avoid accesing u…
sbansal3096 Sep 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
57 changes: 53 additions & 4 deletions docs/api-site-config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,23 @@ title: siteConfig.js

A large part of site configuration is done by editing the `siteConfig.js` file.

<div class="tab">
<button class="tablinks" id="userShowcaseLink" onclick="openConfig(event, 'userShowcase')">User Showcase</button>
<button class="tablinks" id="fieldsLink" onclick="openConfig(event, 'fields')">siteConfig Fields</button>
<button class="tablinks" id="examplesLink" onclick="openConfig(event, 'examples')">Examples</button>
</div>

<div id="userShowcase" class="tabcontent">
## 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.

</div>

<div id="fields" class="tabcontent">

## siteConfig Fields

The `siteConfig` object contains the bulk of the configuration settings for your website.
Expand Down Expand Up @@ -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 `<link>` tag to `<head>` 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.
Expand All @@ -155,15 +168,15 @@ 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.

`scrollToTop` - Set this to `true` if you want to enable the scroll to top button at the bottom of your site.

`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.

Expand All @@ -183,6 +196,10 @@ h1 {

Users can also add their own custom fields if they wish to provide some data across different files.

</div>

<div id="examples" class="tabcontent">

## Example siteConfig.js with many available fields

```js
Expand Down Expand Up @@ -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',
Expand All @@ -267,3 +296,23 @@ const siteConfig = {

module.exports = siteConfig;
```

</div>

<script>
function openConfig(evt, configOption) {
var i, tabContent, tabLinks;
tabContent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
tabLinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tabLinks.length; i++) {
tabLinks[i].className = tabLinks[i].className.replace(" active", "");
}
document.getElementById(configOption).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById('userShowcase').style.display = "block";
document.getElementById("userShowcaseLink").className += " active";
</script>
36 changes: 36 additions & 0 deletions lib/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
2 changes: 1 addition & 1 deletion website/versioned_docs/version-1.3.3/api-site-config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,4 +265,4 @@ const siteConfig = {
};

module.exports = siteConfig;
```
```