Commit dc0a68ca authored by alain's avatar alain 🐙
Browse files

first bunch

parent a2c22b9f
Pipeline #280 canceled with stages
const { editWebpackPlugin, appendWebpackPlugin } = require('@rescripts/utilities')
module.exports = config => {
if(config.mode === 'production') {
// set css filename
config = editWebpackPlugin(
p => {
p.options.filename = 'style.css'
p.options.chunkFilename = 'style.css'
p.options.moduleFilename = () => 'style.css'
return p
},
'MiniCssExtractPlugin',
config,
)
// set js filename
config.output.filename = 'bundle.js'
// disable sourcemap
config.devtool = false
// disable code splitting
config.optimization.splitChunks = {
cacheGroups: {
default: false,
}
}
config.optimization.runtimeChunk = false
}
return config
}
...@@ -8,13 +8,18 @@ ...@@ -8,13 +8,18 @@
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-map-gl": "^5.2.8",
"react-scripts": "3.4.3" "react-scripts": "3.4.3"
}, },
"devDependencies": {
"@rescripts/cli": "0.0.14",
"@rescripts/rescript-env": "0.0.12",
"node-sass": "^4.14.1"
},
"scripts": { "scripts": {
"start": "react-scripts start", "start": "rescripts start",
"build": "react-scripts build", "build": "rescripts build",
"test": "react-scripts test", "eject": "rescripts eject"
"eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
......
...@@ -5,39 +5,12 @@ ...@@ -5,39 +5,12 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <title>Hollandse Luchten Route</title>
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import React from 'react'; import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css'; import ReactMapGL, { Marker, Source, Layer, GeolocateControl } from 'react-map-gl';
import { mapStyle } from "./mapStyle"
function App() { function App() {
const [viewport, setViewport] = useState({
latitude: 52.4934,
longitude: 4.5969,
zoom: 14,
pitch: 60
});
const onViewportChange = viewport => {
const {width, height, ...etc} = viewport
setViewport({...etc})
}
const routeData = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"shape": "Line",
},
"geometry": {
"type": "LineString",
"coordinates": [
[4.600461, 52.494056],
[4.59368, 52.494657],
[4.593487, 52.494304],
[4.593573, 52.494082],
[4.593701, 52.493834],
[4.594238, 52.493521],
[4.593294, 52.492528],
[4.592843, 52.492306],
[4.591985, 52.492462],
[4.591277, 52.491992],
[4.589539, 52.492253]
]
}
}]
}
const routeStyle = {
paint: {
'line-color': '#2FB6BC',
'line-width': 3
}
};
const points = [
{
title: "Meetstation",
latitude: 52.493990,
longitude: 4.602379
},
{
title: "Moriaan",
latitude: 52.4941078,
longitude: 4.594586
}
]
return ( return (
<div className="App"> <ReactMapGL width="100%" height="100%" {...viewport} onViewportChange={viewport => onViewportChange(viewport)} mapStyle={mapStyle}>
<header className="App-header"> <div key="5" className='mapboxgl-ctrl-top-left'>
<img src={logo} className="App-logo" alt="logo" /> <GeolocateControl positionOptions={{enableHighAccuracy: true}} trackUserLocation={true} />
<p> </div>
Edit <code>src/App.js</code> and save to reload.
</p> <Source type="geojson" data={routeData}>
<a <Layer id="route" type="line" {...routeStyle} />
className="App-link" </Source>
href="https://reactjs.org"
target="_blank" { points.map(point => (
rel="noopener noreferrer" <Marker key={point.title} latitude={point.latitude} longitude={point.longitude} offsetLeft={-10} offsetTop={-20}>
> <h3>{ point.title }</h3>
Learn React </Marker>
</a> )) }
</header> </ReactMapGL>
</div>
); );
} }
......
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: 'Maax', sans-serif;
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { h3 {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-weight: 500;
monospace;
} }
#root {
height: 100vh;
}
.mapboxgl-marker {
background-color: #FFF;
padding: 0.2em 0.4em;
white-space: nowrap;
box-shadow: 0 0 0.4rem 0.1rem rgba(0, 0, 0, 0.15);
}
.mapboxgl-marker:after {
content: "";
position: absolute;
top: 100%;
left: 4px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #FFF;
}
.mapboxgl-marker h3 {
margin: 0;
}
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
This diff is collapsed.
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment