[FLINK-18849] Improve the code tabs of the Flink documents

• Type: Improvement
• Status: Resolved
• Priority: Minor
• Resolution: Fixed
• Fix Version/s: 1.11.2, 1.12.0
• Component/s: Documentation
• Labels: pull-request-available
• Assignee: Wei Zhong
• Reporter: Wei Zhong
• Created: 07/Aug/20 10:39
• Updated: 14/Aug/20 15:16
• Resolved: 13/Aug/20 13:36

Description

Currently there are some minor problems on the code tabs of the Flink documents:

1. There are some tab labels like `data-lang="Java/Scala"`, which can not be changed synchronously with the label `data-lang="Java"` and `data-lang="Scala"`.
2. Case sensitive. If one code tab has a label `data-lang="java"` and another has the label `data-lang="Java"` in one page. They would not change synchronously.
3. Duplicated content. Many contents in the "Java" tab are the same as the "Scala" tab.

I would like to improve the situation by following way:

      1. When parsing the label like `data-lang="Java/Scala"`, we can clone the tab content, let one has the label `data-lang="Java"`, another has the label `data-lang="Scala"`.

      2. Then force the first character of the data-lang value to be upper case. i.e. if the label is `data-lang="java"`, it will be modified to `data-lang="Java"`.

      3. Add a new attribute "data-hide-tabs" to the "tabcontents" to hide the tab headers, so that we can let the text above the codes changes synchronously.

      4. Add a new url parameter "code_tab" to set the default code tab to display when entering the page.

This way we can remove the duplicated content via merge them into one element with a `data-lang="Java/Scala"` label. And all the tab can be changed synchronously when they are clicked.

 

Issue Links

• links to: GitHub Pull Request #13085