Ratstail91/mechaimmensewarfare.com
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removed duplicated markdown pages, improved NotFound page

Browse Source
This commit is contained in:
Kayne Ruse
2018-12-13 01:18:22 +11:00
parent 59fbb7fb2e
commit c8d17f6af9
7 changed files with 24 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1 -1
View File
@@ -11,6 +11,6 @@
</head>
<body>
<div id = "root"></div>
<script src="/app.bundle.js?v=7"></script>
<script src="/app.bundle.js?v=8"></script>
</body>
</html>
src/app.jsx
+6 -7
View File
@@ -6,11 +6,9 @@ import { Header, Container, Divider } from "semantic-ui-react";
import "./styles/shared.css";
//include other pages
import Landing from "./pages/landing.jsx";
import Rules from "./pages/rules.jsx";
import MarkdownPage from "./pages/markdown_page.jsx";
import CardList from "./pages/card_list.jsx";
import Concepts from "./pages/concepts.jsx";
import About from "./pages/about.jsx";
import NotFound from "./pages/not_found.jsx";
//include panels
@@ -23,10 +21,11 @@ class App extends React.Component {
}
render() {
//NOTE: display: flex is set for the container to fix a centering issue in NotFound
return (
<div className="central">
<BrowserRouter>
<Container className="panel">
<Container className="panel" style={{ display: "flex" }}>
<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
<LinkButton.Group widths="4">
<LinkButton to="/rules" className="noPadding">Rules</LinkButton>
@@ -36,11 +35,11 @@ class App extends React.Component {
</LinkButton.Group>
<Divider hidden />
<Switch>
<Route exact path="/" component={ Landing } />
<Route exact path="/rules" component={ Rules } />
<Route exact path="/" component={() => <MarkdownPage source={"content/landing.md"} /> } />
<Route exact path="/rules" component={() => <MarkdownPage source={"content/rules.md"} /> } />
<Route exact path="/cardlist" component={ CardList } />
<Route exact path="/concepts" component={ Concepts } />
<Route exact path="/about" component={ About } />
<Route exact path="/about" component={() => <MarkdownPage source={"content/about.md"} /> } />
<Route path="*" component={ NotFound } />
</Switch>
</Container>
src/pages/landing.jsx
-39
View File
@@ -1,39 +0,0 @@
import React from "react";
import ReactMarkdown from "react-markdown";
import MarkdownRenderers from "../utilities/markdown_renderers.js";
class Landing extends React.Component {
constructor(props) {
super(props);
this.state = {
body: "Loading..."
};
}
componentDidMount() {
fetch("/content/landing.md")
.then(result => result.text())
.then((result) => {
this.setState({
body: result
});
},
//handle errors here instead of a catch block because internet said so
(error) => {
this.setState({
body: error
});
});
}
render() {
return (
<div>
<ReactMarkdown source={this.state.body} renderers={MarkdownRenderers} />
</div>
);
}
}
export default Landing;
src/pages/about.jsx → src/pages/markdown_page.jsx
+4 -3
View File
@@ -2,17 +2,18 @@ import React from "react";
import ReactMarkdown from "react-markdown";
import MarkdownRenderers from "../utilities/markdown_renderers.js";
class About extends React.Component {
class MarkdownPage extends React.Component {
constructor(props) {
super(props);
this.state = {
source: props.source,
body: "Loading..."
};
}
componentDidMount() {
fetch("/content/about.md")
fetch(this.state.source)
.then(result => result.text())
.then((result) => {
this.setState({
@@ -36,4 +37,4 @@ class About extends React.Component {
}
}
export default About;
export default MarkdownPage;
src/pages/not_found.jsx
+5 -2
View File
@@ -1,4 +1,6 @@
import React from "react";
import { Header } from "semantic-ui-react";
import LinkButton from "../panels/link_button.jsx";
class NotFound extends React.Component {
constructor(props) {
@@ -7,8 +9,9 @@ class NotFound extends React.Component {
render() {
return (
<div>
<p>NotFound</p>
<div className="centeredPage">
<Header as="h1">Page Not Found</Header>
<LinkButton to="/">Return Home</LinkButton>
</div>
);
}
src/pages/rules.jsx
-39
View File
@@ -1,39 +0,0 @@
import React from "react";
import ReactMarkdown from "react-markdown";
import MarkdownRenderers from "../utilities/markdown_renderers.js";
class Rules extends React.Component {
constructor(props) {
super(props);
this.state = {
body: "Loading..."
};
}
componentDidMount() {
fetch("/content/rules.md")
.then(result => result.text())
.then((result) => {
this.setState({
body: result
});
},
//handle errors here instead of a catch block because internet said so
(error) => {
this.setState({
body: error
});
});
}
render() {
return (
<div>
<ReactMarkdown source={this.state.body} renderers={MarkdownRenderers} />
</div>
);
}
}
export default Rules;
src/styles/shared.css
+8
View File
@@ -53,6 +53,14 @@ footer {
}
/* centering */
.centeredPage {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.centeredContent {
flex: 0 1 auto;
display: flex;