feat: code block tab #1063

fiennyangeln · 2018-10-24T15:18:13Z

Motivation

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

I currently changed custom-pages in the 1.0.15 version so that I can visualize how it looks like, I plan to remove it later. So, go to /docs/en/1.0.15/custom-pages:

2. Try to click on the tab 3. See if the other code tab changes too or not 4. Try to resize the width of the browser to be abit smaller to see how it looks like if it overflow

Related PRs

Null

Todo

Is the design suitable? Should we handle older browser that might not support horizontal scroll?
Should we have other design for smaller device?
Is the way I add the onclick in the js below the copy field looks right?

where it ends - I try using DOCUSAURUS_CODE_TABS to mark the start - Use TAB_TITLE to mark the title of the tab - END_TAB to mark the end of that tab - END_DOCUSAURUS_CODE_TABS to mark the end of the whole code blocks then parse using regex and render accordingly

…e can be reverted later

JoelMarcey

I think this is a fine way to approach the problem. I am definitely ok with having markdown markers that represent the various code tabs like you have. I will comment inline.

JoelMarcey · 2018-10-24T15:47:01Z

v1/lib/core/Doc.js

@@ -59,6 +98,8 @@ class Doc extends React.Component {
      );
    }

+    // const a = this.props.content.split(/(DOCUSAURUS_CODE_TABS)(.*?)(END_DOCUSAURUS_CODE_TABS)/gms)
+    // console.log(a.length, a);


Remove these.

JoelMarcey · 2018-10-24T15:48:01Z

v1/website/versioned_docs/version-1.0.15/guides-custom-pages.md

@@ -34,12 +34,108 @@ root-of-repo
 │   └── static
 ```

+


Can you add this documentation to https://github.com/facebook/Docusaurus/blob/master/docs/api-doc-markdown.md instead?

JoelMarcey · 2018-10-24T15:48:11Z

v1/website/versioned_docs/version-1.0.15/guides-custom-pages.md

+
+## Codeblocks in multiple languages
+
+DOCUSAURUS_CODE_TABS


I think this is a clever way to do this.

JoelMarcey · 2018-10-24T15:48:27Z

v1/website/versioned_docs/version-1.0.15/guides-custom-pages.md

@@ -34,12 +34,108 @@ root-of-repo
 │   └── static
 ```

+
+## Codeblocks in multiple languages
+


Let's add some wording about what is going on here.

JoelMarcey · 2018-10-24T15:48:54Z

v1/website/versioned_docs/version-1.0.15/guides-custom-pages.md

 Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found [here](api-pages.md). Information on how to link to your different pages in the header navigation bar can be found [here](guides-navigation.md).

 > If you want your page to show up in your navigation header, you will need to update `siteConfig.js` to add to the `headerLinks` element. e.g., `{ page: 'about-slash', label: 'About/' }`,

 ## Adding Static Pages

+DOCUSAURUS_CODE_TABS


I am not sure you need this all this example here if you add the documentation to https://github.com/facebook/Docusaurus/blob/master/docs/api-doc-markdown.md

JoelMarcey · 2018-10-24T15:49:45Z

v1/website/static/js/code-blocks-buttons.js

@@ -44,4 +44,25 @@ window.addEventListener('load', function() {
      textEl.textContent = 'Copy';
    }, 2000);
  });
+
+  // add event listener for all tab
+  document.querySelectorAll('.nav-link').forEach(function(el) {


We will need to make sure that this is installed as part of the Docusaurus install process -- e.g., docusaurus-init

JoelMarcey · 2018-10-24T15:50:19Z

@endiliey @yangshun - is the v1 Netlify preview broken?

endiliey · 2018-10-25T02:28:10Z

I think the test are failing also. Might not be because of CI

fiennyangeln · 2018-10-25T02:53:33Z

v1/lib/static/css/main.css

+}
+
+.nav-tabs::-webkit-scrollbar {
+  display: none;  // Safari and Chrome


I guess i should not put comment on this :/

In CSS comments should be /* */ not //

docusaurus-bot · 2018-10-25T05:53:33Z

Deploy preview for docusaurus-preview ready!

Built with commit 9cb10e2

https://deploy-preview-1063--docusaurus-preview.netlify.com

endiliey · 2018-10-25T06:33:09Z

https://deploy-preview-1063--docusaurus-preview.netlify.com/docs/en/1.0.15/custom-pages

endiliey · 2018-10-25T11:02:20Z

v1/website/static/js/code-blocks-buttons.js

+      document
+        .querySelectorAll(`.tab-pane[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');


This shouldnt be placed here because not every docusaurus user has this file

@endiliey I suggested that we add it as part of docusaurus-init. But you might be right, since that is more of a custom file. Could put it in v1/lib/static maybe?

Hmm yeah I'm confused where to put it actually 😯 I put it there to mimic the code blocks

Should I make something like this? https://gist.github.com/yangshun/55db997ed0f8f4e6527571fc3bee4675 and put all the related css outside of the lib?

put it in v1/lib/static and modify the Head.js to always include it.

@endiliey @JoelMarcey made the changes:D please review!

- Remove comments

JoelMarcey

Let's ship this.

@endiliey, @yangshun I will let you make the final approval and merge.

endiliey · 2018-11-07T08:41:19Z

I'm currently not well so my review will come late this time.

endiliey

Seems like a great feature for me

https://deploy-preview-1063--docusaurus-preview.netlify.com/docs/en/next/doc-markdown#code-tabs

Kinda dislike the syntax to do the tabbing though :(. Is it possible to make it simpler ?. I'm wondering what are the popular syntax are like out there.

I am wondering if END_TAB is really necessary ? Can we do better ?

Current

Maybe ? (at least without END_TAB it looks nicer

fiennyangeln · 2018-11-12T09:02:57Z

I will give the above a try! 💃

endiliey · 2018-12-07T16:25:18Z

Is this PR ready or still WIP ? LGTM on a glance.

Will review after that

JoelMarcey · 2018-12-07T16:40:12Z

This is ready to go, I believe.

fiennyangeln · 2018-12-15T03:28:52Z

@endiliey feel free to review.

t00f · 2019-01-04T19:37:34Z

We tested it and are waiting for the official release 👍

CyrilPeponnet · 2019-01-08T17:16:24Z

Works like a charm, would be awesome to be part of next release.

yangshun

Nice work @fiennyangeln!

fiennyangeln added 3 commits October 24, 2018 23:07

Added on click hook

1826622

Added example on how to write it, how to use it, how it will look lik…

706b095

…e can be reverted later

facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 24, 2018

JoelMarcey reviewed Oct 24, 2018

View reviewed changes

fiennyangeln commented Oct 25, 2018

View reviewed changes

Fix css error

c54abee

endiliey suggested changes Oct 25, 2018

View reviewed changes

fiennyangeln force-pushed the feature/code-blocks-tab branch from 39f4e7e to 070678a Compare October 27, 2018 15:36

fiennyangeln added 2 commits October 28, 2018 00:12

- Move addEventListener part to lib/static

b9ab3d2

- Remove comments

Add documentation

261e8e7

fiennyangeln force-pushed the feature/code-blocks-tab branch from 070678a to 261e8e7 Compare October 27, 2018 16:12

Remove examples

8458a9f

JoelMarcey approved these changes Nov 6, 2018

View reviewed changes

endiliey changed the title ~~WIP: Code block tab~~ feat: Code block tab Nov 7, 2018

endiliey reviewed Nov 8, 2018

View reviewed changes

endiliey mentioned this pull request Nov 23, 2018

Code block with language tabs #982

Closed

fiennyangeln force-pushed the feature/code-blocks-tab branch 2 times, most recently from bc5fc37 to f17cff3 Compare November 29, 2018 10:58

Change syntax of the codetabs

9cb10e2

fiennyangeln force-pushed the feature/code-blocks-tab branch from f17cff3 to 9cb10e2 Compare December 1, 2018 05:50

JoelMarcey added the hackathon label Jan 23, 2019

yangshun changed the title ~~feat: Code block tab~~ feat: code block tab Jan 23, 2019

yangshun approved these changes Jan 24, 2019

View reviewed changes

yangshun merged commit 5ce85e5 into facebook:master Jan 24, 2019

SimenB mentioned this pull request Jan 24, 2019

chore: upgrade docusaurus jestjs/jest#7691

Merged

This was referenced Mar 4, 2019

Document specifying beautifier config file, use Docusaurus tabs for code Unibeautify/website#211

Open

Code Tabs do not allow HMTL comments within code blocks #1260

Closed

rarkins mentioned this pull request Jan 27, 2021

Add support for yaml config files renovatebot/renovate#7031

Closed

vamsi3 mentioned this pull request Feb 6, 2021

Support for Code Tabs #4184

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: code block tab #1063

feat: code block tab #1063

fiennyangeln commented Oct 24, 2018

JoelMarcey left a comment

JoelMarcey Oct 24, 2018

JoelMarcey Oct 24, 2018

JoelMarcey Oct 24, 2018

JoelMarcey Oct 24, 2018

JoelMarcey Oct 24, 2018

JoelMarcey Oct 24, 2018

JoelMarcey commented Oct 24, 2018

endiliey commented Oct 25, 2018

fiennyangeln Oct 25, 2018

yangshun Oct 25, 2018

docusaurus-bot commented Oct 25, 2018 •

edited

Loading

endiliey commented Oct 25, 2018

endiliey Oct 25, 2018

JoelMarcey Oct 25, 2018

fiennyangeln Oct 26, 2018 •

edited

Loading

fiennyangeln Oct 26, 2018

endiliey Oct 27, 2018

fiennyangeln Nov 3, 2018

JoelMarcey left a comment

endiliey commented Nov 7, 2018 •

edited

Loading

endiliey left a comment •

edited

Loading

fiennyangeln commented Nov 12, 2018

endiliey commented Dec 7, 2018

JoelMarcey commented Dec 7, 2018

fiennyangeln commented Dec 15, 2018

t00f commented Jan 4, 2019

CyrilPeponnet commented Jan 8, 2019

yangshun left a comment

feat: code block tab #1063

feat: code block tab #1063

Conversation

fiennyangeln commented Oct 24, 2018

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

Related PRs

Todo

JoelMarcey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JoelMarcey commented Oct 24, 2018

endiliey commented Oct 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

docusaurus-bot commented Oct 25, 2018 • edited Loading

endiliey commented Oct 25, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fiennyangeln Oct 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JoelMarcey left a comment

Choose a reason for hiding this comment

endiliey commented Nov 7, 2018 • edited Loading

endiliey left a comment • edited Loading

Choose a reason for hiding this comment

fiennyangeln commented Nov 12, 2018

endiliey commented Dec 7, 2018

JoelMarcey commented Dec 7, 2018

fiennyangeln commented Dec 15, 2018

t00f commented Jan 4, 2019

CyrilPeponnet commented Jan 8, 2019

yangshun left a comment

Choose a reason for hiding this comment

docusaurus-bot commented Oct 25, 2018 •

edited

Loading

fiennyangeln Oct 26, 2018 •

edited

Loading

endiliey commented Nov 7, 2018 •

edited

Loading

endiliey left a comment •

edited

Loading