Skip to content

Commit ccac640

Browse files
jpdriverjpdriver
authored
Merge pull request #138 from FormidableLabs/jp-update-demo
fixup demo site
2 parents 7370f4a + 92eb090 commit ccac640

13 files changed

+6664
-8036
lines changed

‎demo/.gitignore

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
1-
node_modules
2-
dist
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
315
.DS_Store
4-
bundle-stats.html
5-
.vscode
6-
__diff_output__
7-
lib/
8-
es/
9-
sandbox/node_modules
10-
*.log
11-
test-results.json
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎demo/package.json

100755100644
Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,40 @@
11
{
22
"name": "prism-react-renderer-example",
3-
"version": "1.0.0",
4-
"description": "",
5-
"keywords": [],
6-
"main": "src/index.js",
3+
"version": "1.1.0",
4+
"private": true,
75
"dependencies": {
6+
"@testing-library/jest-dom": "^5.14.1",
7+
"@testing-library/react": "^12.0.0",
8+
"@testing-library/user-event": "^13.2.1",
89
"prism-react-renderer": "file:../",
9-
"react": "16.8.3",
10-
"react-dom": "16.8.3",
11-
"react-scripts": "2.1.5",
12-
"styled-components": "4.1.3"
13-
},
14-
"devDependencies": {
15-
"cross-env": "^5.2.0"
10+
"react": "^17.0.2",
11+
"react-dom": "^17.0.2",
12+
"react-scripts": "5.0.0",
13+
"styled-components": "^5.3.3",
14+
"web-vitals": "^2.1.0"
1615
},
1716
"scripts": {
18-
"start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
17+
"start": "react-scripts start",
1918
"build": "react-scripts build",
20-
"test": "react-scripts test --env=jsdom",
19+
"test": "react-scripts test",
2120
"eject": "react-scripts eject"
2221
},
23-
"browserslist": [
24-
">0.2%",
25-
"not dead",
26-
"not ie <= 11",
27-
"not op_mini all"
28-
]
22+
"eslintConfig": {
23+
"extends": [
24+
"react-app",
25+
"react-app/jest"
26+
]
27+
},
28+
"browserslist": {
29+
"production": [
30+
">0.2%",
31+
"not dead",
32+
"not op_mini all"
33+
],
34+
"development": [
35+
"last 1 chrome version",
36+
"last 1 firefox version",
37+
"last 1 safari version"
38+
]
39+
}
2940
}

‎demo/public/favicon.ico

3.78 KB
Binary file not shown.

‎demo/public/index.html

100755100644
Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7-
<meta name="theme-color" content="#000000">
8-
<!--
9-
manifest.json provides metadata used when your web app is added to the
10-
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1116
-->
12-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14-
<!--
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
1519
Notice the use of %PUBLIC_URL% in the tags above.
1620
It will be replaced with the URL of the `public` folder during the build.
1721
Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +24,12 @@
2024
work correctly both with client-side routing and a non-root public URL.
2125
Learn how to configure a non-root public URL by running `npm run build`.
2226
-->
23-
<title>React App</title>
24-
</head>
25-
26-
<body>
27-
<noscript>
28-
You need to enable JavaScript to run this app.
29-
</noscript>
30-
<div id="root"></div>
31-
<!--
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
3233
This HTML file is a template.
3334
If you open it directly in the browser, you will see an empty page.
3435
@@ -38,6 +39,5 @@
3839
To begin the development, run `npm start` or `yarn start`.
3940
To create a production bundle, use `npm run build` or `yarn build`.
4041
-->
41-
</body>
42-
43-
</html>
42+
</body>
43+
</html>

‎demo/public/logo192.png

5.22 KB
Loading

‎demo/public/logo512.png

9.44 KB
Loading

‎demo/public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎demo/public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎demo/src/App.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
import { Wrapper, Pre, LineNo } from './styles'
3+
4+
import Highlight, { defaultProps } from 'prism-react-renderer'
5+
import theme from 'prism-react-renderer/themes/oceanicNext'
6+
7+
const exampleCode = `
8+
(function someDemo() {
9+
var test = "Hello World!";
10+
console.log(test);
11+
})();
12+
13+
return () => <App />;
14+
`.trim()
15+
16+
const App = () => (
17+
<Wrapper>
18+
<h1>Welcome to prism-react-renderer!</h1>
19+
20+
<Highlight {...defaultProps} code={exampleCode} language="jsx" theme={theme}>
21+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
22+
<Pre className={className} style={style}>
23+
{tokens.map((line, i) => (
24+
<div {...getLineProps({ line, key: i })}>
25+
<LineNo>{i + 1}</LineNo>
26+
{line.map((token, key) => <span {...getTokenProps({ token, key })} />)}
27+
</div>
28+
))}
29+
</Pre>
30+
)}
31+
</Highlight>
32+
</Wrapper>
33+
)
34+
35+
export default App;

‎demo/src/index.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}

‎demo/src/index.js

100755100644
Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,17 @@
1-
import React from 'react'
2-
import { render } from 'react-dom'
3-
import { Wrapper, Pre, LineNo } from './styles'
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './index.css';
4+
import App from './App';
5+
import reportWebVitals from './reportWebVitals';
46

5-
import Highlight, { defaultProps } from 'prism-react-renderer'
6-
import theme from 'prism-react-renderer/themes/oceanicNext'
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
document.getElementById('root')
12+
);
713

8-
const exampleCode = `
9-
(function someDemo() {
10-
var test = "Hello World!";
11-
console.log(test);
12-
})();
13-
14-
return () => <App />;
15-
`.trim()
16-
17-
const App = () => (
18-
<Wrapper>
19-
<h1>Welcome to prism-react-renderer!</h1>
20-
21-
<Highlight {...defaultProps} code={exampleCode} language="jsx" theme={theme}>
22-
{({ className, style, tokens, getLineProps, getTokenProps }) => (
23-
<Pre className={className} style={style}>
24-
{tokens.map((line, i) => (
25-
<div {...getLineProps({ line, key: i })}>
26-
<LineNo>{i + 1}</LineNo>
27-
{line.map((token, key) => <span {...getTokenProps({ token, key })} />)}
28-
</div>
29-
))}
30-
</Pre>
31-
)}
32-
</Highlight>
33-
</Wrapper>
34-
)
35-
36-
render(<App />, document.getElementById('root'))
14+
// If you want to start measuring performance in your app, pass a function
15+
// to log results (for example: reportWebVitals(console.log))
16+
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17+
reportWebVitals();

‎demo/src/reportWebVitals.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const reportWebVitals = onPerfEntry => {
2+
if (onPerfEntry && onPerfEntry instanceof Function) {
3+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4+
getCLS(onPerfEntry);
5+
getFID(onPerfEntry);
6+
getFCP(onPerfEntry);
7+
getLCP(onPerfEntry);
8+
getTTFB(onPerfEntry);
9+
});
10+
}
11+
};
12+
13+
export default reportWebVitals;

0 commit comments

Comments
 (0)