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 all 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
18 changes: 18 additions & 0 deletions docs/api-site-config.md
View file
Open in desktop
Expand Up @@ -5,12 +5,24 @@ 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="showTabContent(0)">User Showcase</button>
<button class="tablinks" id="fieldsLink" onclick="showTabContent(1)">siteConfig Fields</button>
<button class="tablinks" id="examplesLink" onclick="showTabContent(2)">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 @@ -187,6 +199,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 @@ -283,3 +299,5 @@ const siteConfig = {

module.exports = siteConfig;
```

</div>
33 changes: 33 additions & 0 deletions v1/lib/core/DocsLayout.js
View file
Open in desktop
Expand Up @@ -76,6 +76,39 @@ class DocsLayout extends React.Component {
language={metadata.language}
version={metadata.version}
metadata={metadata}>
{
<script
dangerouslySetInnerHTML={{
__html: `
function showTabContent(num) {
var i, tabContent, tabLinks;
tabContent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
tabLinks = document.getElementsByClassName("tablinks");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's specificly check if tabLinks exist. There is a chance that tabLinks[num] is undefined and tabLinks[num].className is accessing property of undefined which yields an error. Similar to any below codes

for (i = 0; i < tabLinks.length; i++) {
tabLinks[i].className = tabLinks[i].className.replace(/ active$/, "");
}
if(num<tabContent.length)
tabContent[num].style.display = "block";
if(num<tabLinks.length)
tabLinks[num].className += " active";

rightSideToc=document.getElementsByClassName('toc-headings');
if(rightSideToc.length>0){
headings=rightSideToc[0].children;
for(i = 0; i < headings.length; i++){
headings[i].style.display="none";
}
if(num<headings.length)
headings[num].style.display="block";
}
}
`,
}}
/>
}
<div className="docMainWrapper wrapper">
<DocsSidebar metadata={metadata} />
<Container className="mainContainer docMainContainer">
Expand Down
36 changes: 36 additions & 0 deletions v1/lib/static/css/main.css
View file
Open in desktop
Expand Up @@ -2322,3 +2322,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: solid;
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 */