Added custom title support

This commit is contained in:
2018-06-29 08:00:07 +10:00
parent 0ef9b02ff9
commit dfc78cf102
7 changed files with 62 additions and 13 deletions

View File

@ -27,6 +27,7 @@
"babel-polyfill": "^6.26.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",

View File

@ -22,14 +22,17 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Language from './../language/Language';
import { NavLink } from 'react-router-dom'
import { PageBoundary } from './../page/Page';
const FooterLink = function(props) {
let key = "footer.links." + props.title;
return (
<span className="c-footer__link">
<NavLink to="/about">
Link
<NavLink to={ props.to }>
{ Language.get(key) }
</NavLink>
</span>
);
@ -50,10 +53,10 @@ class Footer extends React.Component {
<div className="c-footer__inner">
<nav className="c-footer__links">
<FooterLink title="privacy" />
<FooterLink title="privacy" />
<FooterLink title="privacy" />
<FooterLink title="privacy" />
<FooterLink title="home" to="/" />
<FooterLink title="about" to="/about" />
<FooterLink title="contact" to="/contact" />
<FooterLink title="privacy" to="/legal/privacy" />
</nav>
<div className="c-footer__copyright">
@ -68,4 +71,10 @@ class Footer extends React.Component {
}
}
export default Footer;
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(Footer);

View File

@ -5,7 +5,9 @@ import Policy from './policy-english';
module.exports = {
"site": {
"name": "domsPlace"
"name": "domsPlace",
"title": "domsPlace - Personal Site of Dominic Masters",
"titleTemplate": "%s - domsPlace"
},
"navbar": {
@ -14,6 +16,15 @@ module.exports = {
"contact": "Contact"
},
"footer": {
"links": {
"home": "Home",
"about": "About Me",
"contact": "Contact Me",
"privacy": "Privacy Policy"
}
},
"pages": {
"about": {

View File

@ -22,9 +22,12 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import { Helmet } from "react-helmet";
import PageBoundary from './PageBoundary';
import Language from './../language/Language';
export default class Page extends React.Component {
class Page extends React.Component {
constructor(props) {
super(props);
}
@ -34,12 +37,36 @@ export default class Page extends React.Component {
if(this.props.className) clazzes += " " + this.props.className;
let title;
if(
(typeof this.props.title === typeof undefined ||
typeof this.props.title.length === typeof undefined ||
!this.props.title.length) && this.props.style != "home-page"
) {
console.exception("This page (" + (this.props.style || this.props.className) + ") does not have a title!");
} else {
title = <title>{ this.props.title }</title>
}
return (
<div className={clazzes}>
<Helmet defaultTitle={ Language.get("site.title") } titleTemplate={ Language.get("site.titleTemplate") }>
{ title }
</Helmet>
{ this.props.children }
</div>
);
}
}
export { PageBoundary };
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(Page);
export {
PageBoundary
}

View File

@ -24,6 +24,7 @@
import React from 'react';
import { connect } from 'react-redux';
import Page from './../Page';
import Language from './../../language/Language'
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
@ -34,7 +35,7 @@ import ExistingWorkSection from './sections/ExistingWorkSection';
const AboutPage = (props) => {
//Return
return (
<Page style="home-page" className="p-about-page">
<Page style="about-page" className="p-about-page" title={ Language.get("pages.about.title") }>
{ /* Banner */ }
<BannerSection />

View File

@ -43,7 +43,7 @@ class ContactPage extends React.Component {
render() {
return (
<Page style="contact-page" className="p-contact-page" title="">
<Page style="contact-page" className="p-contact-page" title={ Language.get("pages.contact.title") }>
<ClearSection />

View File

@ -35,7 +35,7 @@ export default function() {
}
return (
<Page style="home-page" className="p-home-page">
<Page style="home-page" title={0} className="p-home-page">
Welcome home
{ lines }
</Page>