Skip to content

Commit e83b848

Browse files
amareshsmamareshsm
committed
updated docs
1 parent 4abf239 commit e83b848

File tree

20 files changed

+2153
-405
lines changed

20 files changed

+2153
-405
lines changed

‎documentation/package-lock.json‎

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

‎documentation/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@
88
"@testing-library/jest-dom": "^4.2.4",
99
"@testing-library/react": "^9.3.2",
1010
"@testing-library/user-event": "^7.1.2",
11+
"prismjs": "^1.20.0",
1112
"react": "^16.13.1",
1213
"react-dom": "^16.13.1",
13-
"react-scripts": "3.4.1"
14+
"react-router-dom": "^5.2.0",
15+
"react-scripts": "3.4.1",
16+
"react-syntax-highlighter": "^13.0.0"
1417
},
1518
"scripts": {
1619
"start": "react-scripts start",
@@ -30,4 +33,4 @@
3033
"last 1 safari version"
3134
]
3235
}
33-
}
36+
}

‎documentation/src/App.js‎

Lines changed: 24 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,30 @@
11
import React from 'react'
2-
import { Grid } from '@material-ui/core'
3-
import Link from '@material-ui/core/Link'
4-
import GitHubIcon from '@material-ui/icons/GitHub'
5-
import Installation from './components/installation'
6-
import CJS from './components/cjs'
7-
import ESM from './components/esm'
8-
import UMD from './components/umd'
9-
import useStyles from './styles/AppCss'
10-
2+
import {
3+
BrowserRouter as Router,
4+
Switch,
5+
Route,
6+
} from 'react-router-dom'
7+
import Landing from './components/LandingPage/Landing'
8+
import Installation from './components/Installation'
9+
import ESM from './components/ESM'
10+
import CJS from './components/CJS'
11+
import UMD from './components/UMD'
1112
function App() {
12-
const classes = useStyles()
13-
1413
return (
15-
<div className={classes.root}>
16-
<div className={classes.title}>
17-
<i
18-
className={'fab fa-css3 ' + classes.cssFontIcon}
19-
aria-hidden="true"></i>
20-
<div className={classes.titleText}>
21-
<h1 className={classes.titleTextBig}>CSS LOADERS</h1>
22-
<h3 className={classes.titileTextSmall}>
23-
Simple loaders using css
24-
</h3>
25-
</div>
26-
</div>
27-
<div className={classes.packageIconDiv}>
28-
<Link
29-
className={classes.black}
30-
href="https://github.com/amareshsm/react-js-css-loaders">
31-
<GitHubIcon
32-
className={classes.packageIconGithub}></GitHubIcon>
33-
</Link>
34-
<Link href="https://www.npmjs.com/package/react-js-css-loaders">
35-
<i className={'fab fa-npm ' + classes.packageIconNpm}></i>
36-
</Link>
37-
</div>
38-
<Grid
39-
container
40-
spacing={0}
41-
className={classes.gridContainer}
42-
justify="space-between"
43-
alignItems="center">
44-
<Grid className={classes.gridItem} item xs={12} sm={6}>
45-
<Installation />
46-
</Grid>
47-
<Grid className={classes.gridItem} item xs={12} sm={6}>
48-
<ESM />
49-
</Grid>
50-
<Grid className={classes.gridItem} item xs={12} sm={6}>
51-
<CJS />
52-
</Grid>
53-
<Grid className={classes.gridItem} item xs={12} sm={6}>
54-
<UMD />
55-
</Grid>
56-
</Grid>
14+
<div>
15+
<Router>
16+
<Switch>
17+
<Route path="/" exact component={Landing} />
18+
<Route
19+
path="/installation"
20+
exact
21+
component={Installation}
22+
/>
23+
<Route path="/esm" exact component={ESM} />
24+
<Route path="/cjs" exact component={CJS} />
25+
<Route path="/umd" exact component={UMD} />
26+
</Switch>
27+
</Router>
5728
</div>
5829
)
5930
}

‎documentation/src/components/CJS/index.js‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
4+
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
5+
import AppBar from '@material-ui/core/AppBar'
6+
import CssBaseline from '@material-ui/core/CssBaseline'
7+
import Card from '@material-ui/core/Card'
8+
import CardContent from '@material-ui/core/CardContent'
9+
import Drawer from '@material-ui/core/Drawer'
10+
import Hidden from '@material-ui/core/Hidden'
11+
import IconButton from '@material-ui/core/IconButton'
12+
import MenuIcon from '@material-ui/icons/Menu'
13+
import Toolbar from '@material-ui/core/Toolbar'
14+
import Typography from '@material-ui/core/Typography'
15+
import { makeStyles, useTheme } from '@material-ui/core/styles'
16+
import NavItemList from '../NavigationDrawer/NavItems'
17+
import { Grid } from '@material-ui/core'
18+
const drawerWidth = 240
19+
20+
const useStyles = makeStyles((theme) => ({
21+
root: {
22+
display: 'flex',
23+
},
24+
drawer: {
25+
[theme.breakpoints.up('sm')]: {
26+
width: drawerWidth,
27+
flexShrink: 0,
28+
},
29+
},
30+
appBar: {
31+
[theme.breakpoints.up('sm')]: {
32+
width: `calc(100% - ${drawerWidth}px)`,
33+
marginLeft: drawerWidth,
34+
},
35+
backgroundColor: '#f65959',
36+
display: 'flex',
37+
justifyContent: 'center',
38+
height: 62,
39+
},
40+
41+
menuButton: {
42+
marginRight: theme.spacing(2),
43+
[theme.breakpoints.up('sm')]: {
44+
display: 'none',
45+
},
46+
},
47+
// necessary for content to be below app bar
48+
toolbar: theme.mixins.toolbar,
49+
drawerPaper: {
50+
width: drawerWidth,
51+
},
52+
Icon: {
53+
fontSize: '2rem',
54+
color: '#f65959',
55+
padding: '1px 12px 1px 6px',
56+
},
57+
card: {
58+
backgroundColor: '#fefefe',
59+
padding: 4,
60+
},
61+
title: {
62+
display: 'flex',
63+
alignItems: 'center',
64+
fontSize: '1.6rem',
65+
fontWeight: 'bold',
66+
margin: '18px 0px',
67+
},
68+
subTitle: {
69+
fontSize: '1.2rem',
70+
marginTop: '15px',
71+
},
72+
subTitle2: {
73+
fontSize: '1.1rem',
74+
marginTop: '15px',
75+
},
76+
Note: {
77+
fontSize: '1.05rem',
78+
marginTop: '15px',
79+
},
80+
CardAction: {
81+
display: 'flex',
82+
justifyContent: 'flex-end',
83+
},
84+
highlighter: {
85+
borderRadius: 2,
86+
},
87+
link: {
88+
color: '#f65959',
89+
height: 34,
90+
justifyContent: 'center',
91+
display: 'flex',
92+
alignItems: 'center',
93+
width: 'auto',
94+
padding: '0px 16px',
95+
borderRadius: 4,
96+
border: '1px solid #f65959',
97+
'&:hover': {
98+
backgroundColor: '#f65959',
99+
color: 'white',
100+
},
101+
},
102+
pos: {
103+
marginBottom: 12,
104+
},
105+
content: {
106+
marginTop: 60,
107+
width: '100%',
108+
padding: theme.spacing(3),
109+
},
110+
gridContainer: {
111+
boxSizing: 'border-box',
112+
},
113+
gridItem: {
114+
maxWidth: '100%',
115+
},
116+
}))
117+
118+
const CJS = (props) => {
119+
const { window } = props
120+
const classes = useStyles()
121+
const theme = useTheme()
122+
const [mobileOpen, setMobileOpen] = React.useState(false)
123+
const code = `<script src="https://unpkg.com/browse/react-js-css-loaders@latest/dist/bundle.umd.js"></script>`
124+
const Note = `react >= 16.2.0 is peer dependencies and node js version should be >=8.`
125+
const handleDrawerToggle = () => {
126+
setMobileOpen(!mobileOpen)
127+
}
128+
const reactCode = `<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
129+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>`
130+
131+
const drawer = (
132+
<div>
133+
<NavItemList />
134+
</div>
135+
)
136+
137+
const container =
138+
window !== undefined ? () => window().document.body : undefined
139+
140+
return (
141+
<div className={classes.root}>
142+
<CssBaseline />
143+
<AppBar position="fixed" className={classes.appBar}>
144+
<Toolbar>
145+
<IconButton
146+
color="inherit"
147+
aria-label="open drawer"
148+
edge="start"
149+
onClick={handleDrawerToggle}
150+
className={classes.menuButton}>
151+
<MenuIcon />
152+
</IconButton>
153+
<Typography variant="h6" noWrap>
154+
Installation
155+
</Typography>
156+
</Toolbar>
157+
</AppBar>
158+
<nav className={classes.drawer} aria-label="mailbox folders">
159+
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
160+
<Hidden smUp implementation="css">
161+
<Drawer
162+
container={container}
163+
variant="temporary"
164+
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
165+
open={mobileOpen}
166+
onClose={handleDrawerToggle}
167+
classes={{
168+
paper: classes.drawerPaper,
169+
}}
170+
ModalProps={{
171+
keepMounted: true, // Better open performance on mobile.
172+
}}>
173+
{drawer}
174+
</Drawer>
175+
</Hidden>
176+
<Hidden xsDown implementation="css">
177+
<Drawer
178+
classes={{
179+
paper: classes.drawerPaper,
180+
}}
181+
variant="permanent"
182+
open>
183+
{drawer}
184+
</Drawer>
185+
</Hidden>
186+
</nav>
187+
<main className={classes.content}>
188+
<Grid
189+
container
190+
spacing={0}
191+
className={classes.gridContainer}
192+
justify="space-between"
193+
alignItems="center">
194+
<Grid
195+
className={classes.gridItem}
196+
item
197+
xs={12}
198+
md={12}
199+
sm={12}>
200+
<Card className={classes.card}>
201+
<CardContent>
202+
<Typography className={classes.subTitle}>
203+
<b>React js css loaders</b> is available as an
204+
<b> npm package </b>
205+
and also includes <b>cdn</b> support
206+
</Typography>
207+
<Typography className={classes.title}>npm</Typography>
208+
<Typography className={classes.subTitle2}>
209+
To Install react-js-css-loaders source files via
210+
npm.
211+
</Typography>
212+
<SyntaxHighlighter
213+
className={classes.highlighter}
214+
language="jsx"
215+
style={tomorrow}>
216+
npm install react-js-css-loaders --save
217+
</SyntaxHighlighter>
218+
<Typography className={classes.subTitle2}>
219+
To Install react-js-css-loaders source files via
220+
yarn.
221+
</Typography>
222+
<SyntaxHighlighter
223+
className={classes.highlighter}
224+
language="jsx"
225+
style={tomorrow}>
226+
yarn add react-js-css-loaders
227+
</SyntaxHighlighter>
228+
<Typography className={classes.Note}>
229+
<b> Note:</b> {Note}
230+
</Typography>
231+
<Typography className={classes.title}>CDN</Typography>
232+
<Typography className={classes.subTitle2}>
233+
You can also start using react-js-css-loaders with
234+
minimal infra setup - it requires react CDN and our
235+
package CDN link
236+
</Typography>
237+
<Typography className={classes.subTitle2}>
238+
Minified and optimized production versions of React
239+
are available at:
240+
</Typography>
241+
<SyntaxHighlighter
242+
className={classes.highlighter}
243+
language="html"
244+
style={tomorrow}>
245+
{reactCode}
246+
</SyntaxHighlighter>
247+
<Typography classes={classes.subTitle2}>
248+
To load a specific version of react and react-dom,
249+
replace 16 with the version number.
250+
</Typography>
251+
252+
<Typography className={classes.subTitle2}>
253+
our package CDN link :
254+
</Typography>
255+
256+
<SyntaxHighlighter
257+
className={classes.highlighter}
258+
language="html"
259+
style={tomorrow}>
260+
{code}
261+
</SyntaxHighlighter>
262+
263+
<Typography>
264+
<b> Note:</b> Affects performance and bandwidth
265+
utilization.
266+
</Typography>
267+
</CardContent>
268+
</Card>
269+
</Grid>
270+
</Grid>
271+
</main>
272+
</div>
273+
)
274+
}
275+
CJS.propTypes = {
276+
/**
277+
* Injected by the documentation to work in an iframe.
278+
* You won't need it on your project.
279+
*/
280+
window: PropTypes.func,
281+
}
282+
283+
export default CJS

0 commit comments

Comments
 (0)