dancingCycle
/
gtfs-rt-display
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: enable bootstrap

This commit is contained in:
dancingCycle 2022-09-15 22:10:12 +02:00
parent b70b821af5
commit 35ff2f2c96
6 changed files with 975 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/app.jsx
View File

@ -1,9 +1,25 @@
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 NavBar from './components/nav-bar';
export default function App() {
return (
<>
<Home />
</>
//BrowserRouter is the router implementation for HTML5 browsers
//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>
);
}

22
app/components/nav-bar.js Normal file
View File

@ -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;

41
app/pages/contact.js Normal file
View File

@ -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;

894
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -29,14 +29,19 @@
"@babel/preset-env": "7.19.1",
"@babel/preset-react": "7.18.6",
"babel-loader": "8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "5.5.0",
"style-loader": "^3.3.1",
"webpack": "5.74.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.11.0",
"webpack-merge": "5.8.0"
},
"dependencies": {
"bootstrap": "^5.2.1",
"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"
}
}

2
public/index.html
View File

@ -14,7 +14,7 @@
padding-top: 100px;
}
</style>
<title>GTFS Display</title>
<title>GTFS Realtime Display</title>
</head>
<body>
<div id="root"></div>