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> </head>
<body> <body>
<div id = "root"></div> <div id = "root"></div>
<script src="/app.bundle.js?v=7"></script> <script src="/app.bundle.js?v=8"></script>
</body> </body>
</html> </html>
src/app.jsx
+6 -7
View File
@@ -6,11 +6,9 @@ import { Header, Container, Divider } from "semantic-ui-react";
import "./styles/shared.css"; import "./styles/shared.css";
//include other pages //include other pages
import Landing from "./pages/landing.jsx"; import MarkdownPage from "./pages/markdown_page.jsx";
import Rules from "./pages/rules.jsx";
import CardList from "./pages/card_list.jsx"; import CardList from "./pages/card_list.jsx";
import Concepts from "./pages/concepts.jsx"; import Concepts from "./pages/concepts.jsx";
import About from "./pages/about.jsx";
import NotFound from "./pages/not_found.jsx"; import NotFound from "./pages/not_found.jsx";
//include panels //include panels
@@ -23,10 +21,11 @@ class App extends React.Component {
} }
render() { render() {
//NOTE: display: flex is set for the container to fix a centering issue in NotFound
return ( return (
<div className="central"> <div className="central">
<BrowserRouter> <BrowserRouter>
<Container className="panel"> <Container className="panel" style={{ display: "flex" }}>
<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link> <Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
<LinkButton.Group widths="4"> <LinkButton.Group widths="4">
<LinkButton to="/rules" className="noPadding">Rules</LinkButton> <LinkButton to="/rules" className="noPadding">Rules</LinkButton>
@@ -36,11 +35,11 @@ class App extends React.Component {
</LinkButton.Group> </LinkButton.Group>
<Divider hidden /> <Divider hidden />
<Switch> <Switch>
<Route exact path="/" component={ Landing } /> <Route exact path="/" component={() => <MarkdownPage source={"content/landing.md"} /> } />
<Route exact path="/rules" component={ Rules } /> <Route exact path="/rules" component={() => <MarkdownPage source={"content/rules.md"} /> } />
<Route exact path="/cardlist" component={ CardList } /> <Route exact path="/cardlist" component={ CardList } />
<Route exact path="/concepts" component={ Concepts } /> <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 } /> <Route path="*" component={ NotFound } />
</Switch> </Switch>
</Container> </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 ReactMarkdown from "react-markdown";
import MarkdownRenderers from "../utilities/markdown_renderers.js"; import MarkdownRenderers from "../utilities/markdown_renderers.js";
class About extends React.Component { class MarkdownPage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
source: props.source,
body: "Loading..." body: "Loading..."
}; };
} }
componentDidMount() { componentDidMount() {
fetch("/content/about.md") fetch(this.state.source)
.then(result => result.text()) .then(result => result.text())
.then((result) => { .then((result) => {
this.setState({ 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 React from "react";
import { Header } from "semantic-ui-react";
import LinkButton from "../panels/link_button.jsx";
class NotFound extends React.Component { class NotFound extends React.Component {
constructor(props) { constructor(props) {
@@ -7,8 +9,9 @@ class NotFound extends React.Component {
render() { render() {
return ( return (
<div> <div className="centeredPage">
<p>NotFound</p> <Header as="h1">Page Not Found</Header>
<LinkButton to="/">Return Home</LinkButton>
</div> </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 */ /* centering */
.centeredPage {
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.centeredContent { .centeredContent {
flex: 0 1 auto; flex: 0 1 auto;
display: flex; display: flex;