chore: enable bootstrap
This commit is contained in:
parent
b70b821af5
commit
35ff2f2c96
22
app/app.jsx
22
app/app.jsx
|
@ -1,9 +1,25 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||||
|
|
||||||
|
/*some stylesheet is required to use react-bootstrip components*/
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
|
||||||
|
import Contact from './pages/contact';
|
||||||
import Home from './pages/home';
|
import Home from './pages/home';
|
||||||
|
import NavBar from './components/nav-bar';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
//BrowserRouter is the router implementation for HTML5 browsers
|
||||||
<Home />
|
//Link enables Routes on an anchor tag
|
||||||
</>
|
//Switch returns only the first matching route rather than all
|
||||||
|
//Route is the conditionally shown component //based on matching a path to a URL
|
||||||
|
<BrowserRouter>
|
||||||
|
<NavBar />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/contact" element={<Contact />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Navbar, Nav } from 'react-bootstrap';
|
||||||
|
import { LinkContainer } from 'react-router-bootstrap';
|
||||||
|
|
||||||
|
function NavigationBar () {
|
||||||
|
return (
|
||||||
|
<Navbar collapseOnSelect fixed="top" bg="dark" expand="xxl" variant="dark">
|
||||||
|
//TODO make brand available through configuration
|
||||||
|
<Navbar.Brand href="/">GTFS Realtime Display</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||||
|
<Navbar.Collapse id="basic-navbar-nav">
|
||||||
|
<Nav className="mr-auto">
|
||||||
|
<LinkContainer to="/contact">
|
||||||
|
<Nav.Link>Contact</Nav.Link>
|
||||||
|
</LinkContainer>
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Navbar>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NavigationBar;
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React from 'react';
|
||||||
|
import packageInfo from '../../package.json'
|
||||||
|
const VERSION = packageInfo.version;
|
||||||
|
const Contact = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h2>About this website</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
For questions about this website please do not hesitate to reach out to{' '}
|
||||||
|
<a href="mailto:dialog@swingbe.de">Software Ingenieur Begerad</a>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Source code has been made public on{' '}
|
||||||
|
<a
|
||||||
|
href="https://github.com/Software-Ingenieur-Begerad/gtfs-display"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
<h2>Imprint</h2>
|
||||||
|
<address>
|
||||||
|
<strong>Software Ingenieur Begerad</strong>
|
||||||
|
<br />
|
||||||
|
Lammer Heide 87
|
||||||
|
<br />
|
||||||
|
38116 Braunschweig
|
||||||
|
<br />
|
||||||
|
Deutschland
|
||||||
|
<br />
|
||||||
|
</address>
|
||||||
|
<h2>Other</h2>
|
||||||
|
<p>
|
||||||
|
Version: {VERSION}
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Contact;
|
File diff suppressed because it is too large
Load Diff
|
@ -29,14 +29,19 @@
|
||||||
"@babel/preset-env": "7.19.1",
|
"@babel/preset-env": "7.19.1",
|
||||||
"@babel/preset-react": "7.18.6",
|
"@babel/preset-react": "7.18.6",
|
||||||
"babel-loader": "8.2.5",
|
"babel-loader": "8.2.5",
|
||||||
|
"css-loader": "^6.7.1",
|
||||||
"html-webpack-plugin": "5.5.0",
|
"html-webpack-plugin": "5.5.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
"webpack": "5.74.0",
|
"webpack": "5.74.0",
|
||||||
"webpack-cli": "4.10.0",
|
"webpack-cli": "4.10.0",
|
||||||
"webpack-dev-server": "4.11.0",
|
"webpack-dev-server": "4.11.0",
|
||||||
"webpack-merge": "5.8.0"
|
"webpack-merge": "5.8.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.2.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-bootstrap": "^2.5.0",
|
||||||
|
"react-dom": "18.2.0",
|
||||||
|
"react-router-bootstrap": "^0.26.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
padding-top: 100px;
|
padding-top: 100px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<title>GTFS Display</title>
|
<title>GTFS Realtime Display</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
Loading…
Reference in New Issue