Skip to content

Commit c5a34e4

Browse files
chiedochiedo
committed
Set up foundations for code switcher
1 parent 797adb1 commit c5a34e4

File tree

8 files changed

+90
-93
lines changed

8 files changed

+90
-93
lines changed

‎content/github/getting-started-with-github/access-permissions-on-github.md‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,20 @@ A repository owned by a user account has two permission levels: the *repository
2020

2121
#### Code Block Component
2222
<!--react-->
23-
<CodeBlock language="javascript">
24-
{`var i;
23+
<CodeBlock language="javascript"
24+
js={`var i;
2525
for (i = 0; i < cars.length; i++) {
2626
text += cars[i] + "<br>";
2727
}`}
28-
</CodeBlock>
28+
29+
php={`for ($x = 0; $x <= 10; $x++) {
30+
echo "The number is: $x <br>";
31+
}`}
32+
33+
python={`for x in "banana":
34+
print(x)
35+
`}
36+
/>
2937
<!--end-react-->
3038

3139
Organization members can have *owner*{% if currentVersion == "free-pro-team@latest" %}, *billing manager*,{% endif %} or *member* roles. Owners have complete administrative access to your organization{% if currentVersion == "free-pro-team@latest" %}, while billing managers can manage billing settings{% endif %}. Member is the default role for everyone else. You can manage access permissions for multiple members at a time with teams. For more information, see:
@@ -39,10 +47,6 @@ Organization members can have *owner*{% if currentVersion == "free-pro-team@late
3947
<CoolTable />
4048
<!--end-react-->
4149

42-
<!--react--><RedContent>Red content!</RedContent><!--end-react-->
43-
44-
<!--react--><Timer /><!--end-react-->
45-
4650
{% if currentVersion == "free-pro-team@latest" %}
4751

4852
### Enterprise accounts

‎javascripts/index.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ import copyCode from './copy-code'
1717
import { fillCsrf } from './get-csrf'
1818
import initializeEvents from './events'
1919
import CodeBlock from '../react/CodeBlock'
20-
import RedContent from '../react/RedContent'
21-
import Timer from '../react/Timer'
2220
import CoolTable from '../react/CoolTable'
2321

2422
document.addEventListener('DOMContentLoaded', async () => {
@@ -42,7 +40,5 @@ document.addEventListener('DOMContentLoaded', async () => {
4240

4341
module.export = {
4442
CodeBlock,
45-
RedContent,
46-
Timer,
4743
CoolTable
4844
}

‎lib/react/engine.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ const transform = require('./transform')
55
/* eslint-disable */
66
const React = require('react')
77
const CodeBlock = require('../../dist/react/CodeBlock')
8-
const RedContent = require('../../dist/react/RedContent')
9-
const Timer = require('../../dist/react/Timer')
108
const CoolTable = require('../../dist/react/CoolTable')
119
/* eslint-enable */
1210

‎package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"react-data-grid": "^7.0.0-canary.24",
7777
"react-dom": "^16.14.0",
7878
"react-syntax-highlighter": "^15.2.1",
79+
"react-tabs": "^3.1.1",
7980
"readline-sync": "^1.4.10",
8081
"resolve-url-loader": "^3.1.1",
8182
"rimraf": "^3.0.0",

‎react/CodeBlock.js‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,79 @@ const React = require('react')
22
const ReactDOM = require('react-dom')
33
const { Prism } = require('react-syntax-highlighter')
44
const { dark } = require('react-syntax-highlighter/dist/cjs/styles/prism')
5+
const { Tab, Tabs, TabList, TabPanel } = require('react-tabs')
56

67
const CodeBlock = (props) => {
8+
let jsPanel
9+
let jsTab
10+
let phpPanel
11+
let phpTab
12+
let pythonPanel
13+
let pythonTab
14+
15+
if (props.js) {
16+
jsPanel = (
17+
<TabPanel>
18+
<Prism language='javascript' style={dark}>
19+
{props.js}
20+
</Prism>
21+
</TabPanel>
22+
)
23+
24+
jsTab = <Tab>Javascript</Tab>
25+
}
26+
27+
if (props.php) {
28+
phpPanel = (
29+
<TabPanel>
30+
<Prism language='php' style={dark}>
31+
{props.php}
32+
</Prism>
33+
</TabPanel>
34+
)
35+
36+
phpTab = <Tab>PHP</Tab>
37+
}
38+
39+
if (props.python) {
40+
pythonPanel = (
41+
<TabPanel>
42+
<Prism language='python' style={dark}>
43+
{props.python}
44+
</Prism>
45+
</TabPanel>
46+
)
47+
48+
pythonTab = <Tab>Python</Tab>
49+
}
50+
751
return (
8-
<Prism language={props.language} style={dark}>
9-
{props.children}
10-
</Prism>
52+
<div js={props.js} php={props.php} python={props.python}>
53+
<Tabs>
54+
<TabList>
55+
{jsTab}
56+
{phpTab}
57+
{pythonTab}
58+
</TabList>
59+
{jsPanel}
60+
{phpPanel}
61+
{pythonPanel}
62+
</Tabs>
63+
</div>
1164
)
1265
}
1366

1467
module.exports = CodeBlock
68+
69+
if (typeof window === 'undefined') {
70+
} else {
71+
const componentContainers = document.querySelectorAll('.react-component-CodeBlock')
72+
73+
for (const componentContainer of componentContainers) {
74+
const div = componentContainer.children[0]
75+
const js = div.getAttribute('js')
76+
const php = div.getAttribute('php')
77+
const python = div.getAttribute('python')
78+
ReactDOM.hydrate(React.createElement(CodeBlock, { js: js, php: php, python: python }), componentContainer)
79+
}
80+
}

‎react/RedContent.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎react/Timer.js‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

0 commit comments

Comments
 (0)