YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restructured and beginning to work with loadable pages.

Browse Source
This commit is contained in:
Dominic Masters
2018-10-23 08:19:45 +11:00
parent 0c94165fa1
commit 87ed8adbe5
14 changed files with 115 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -17,6 +17,9 @@
}
],
"@babel/preset-react"
],
"plugins": [
],
"ignore": [
"node_modules"

2
package.json
View File

@ -27,6 +27,7 @@
"homepage": "https://github.com/YourWishes/domsPlaceNew#readme",
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
@ -47,6 +48,7 @@
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-helmet": "^5.2.0",
"react-loadable": "^5.5.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",

53
public/components/App.jsx
View File

@ -28,7 +28,7 @@ import { HashRouter, BrowserRouter } from 'react-router-dom';
import Background from '@objects/background/Background';
import Header from './header/Header';
import Footer from './footer/Footer';
import Routes from './page/Routes';
import Routes, { RouteWrapper } from './page/Routes';
import Favicon from './Favicon';
class App extends React.Component {
@ -47,27 +47,44 @@ class App extends React.Component {
}
render() {
let { className, menuOpen, modal } = this.props;
//Generate base clazzes
let clazz = "c-app";
if(this.props.menuOpen) clazz += " is-menu-open ";
let modal;
if(this.props.modal.open) clazz += " is-modal-open";
if(this.props.modal.modal) modal = this.props.modal.modal;
//Menu Open?
if(menuOpen) clazz += " is-menu-open ";
let children = (
<div className={clazz} ref="app">
<Favicon />
<Header />
{ modal }
<Routes onEntering={this.onEnteringBound} />
</div>
//Fetch the modal from the store
let modalObject;
if(modal.open) clazz += " is-modal-open";
if(modal.modal) modalObject = modal.modal;
//Append any other clazzes there may be.
if(className) clazz += " " + className;
//For testing you can switch the router type
let RouterType = BrowserRouter;
if(true) RouterType = HashRouter;
return (
<RouterType>
<div className={clazz} ref="app">
<Favicon />
<Header />
{ modalObject }
{/* Routes */}
<Routes onEntering={ this.onEnteringBound }>
<RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
<RouteWrapper exact path="/contact" page={ () => import('@pages/contact/ContactPage') } />
<RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
</Routes>
</div>
</RouterType>
);
if(false) {
return <HashRouter>{children}</HashRouter>;
} else {
return <BrowserRouter>{children}</BrowserRouter>;
}
}
}

16
public/components/page/Page.jsx
View File

@ -33,25 +33,23 @@ class Page extends React.Component {
}
render() {
let { title, style, className } = this.props;
let clazzes = "c-page";
if(this.props.className) clazzes += " " + this.props.className;
if(className) clazzes += " " + 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"
) {
let titleHelmet;
if((!title || !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>
titleHelmet = <title>{ this.props.title }</title>
}
return (
<div className={clazzes}>
<Helmet defaultTitle={ Language.get("site.title") } titleTemplate={ Language.get("site.titleTemplate") }>
{ title }
{ titleHelmet }
</Helmet>
{ this.props.children }
</div>

29
public/components/page/Routes.jsx
View File

@ -26,24 +26,28 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { withRouter } from 'react-router';
import PropTypes from 'prop-types'
import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Header from './../header/Header';
import Footer from './../footer/Footer';
//Pages
import Homepage from './home/Homepage';
import ContactPage from './contact/ContactPage';
const PageLoading = (props) => {
if(props.error) return <span>Loading Error</span>;
if(props.pastDelay) return <span>Loading...</span>;
return null;
};
import PrivacyPolicyPage from './legal/privacy/PrivacyPolicyPage';
const RouteWrapper = (props) => {
let newProps = Object.assign({}, props);
export const RouteWrapper = (props) => {
return (
<Route {...props} render={() => {
let CustomTag = props.page;
let CustomLoadable = Loadable({
loader: props.page,
loading: PageLoading
});
let CustomTag = <span>Not loading</span>;
return (
<main className="c-main">
<CustomTag />
<CustomLoadable />
<Footer />
</main>
);
@ -57,7 +61,7 @@ class Routes extends React.Component {
}
render() {
const { match, location, history } = this.props;
const { match, location, history, children } = this.props;
return (
<Route>
@ -71,10 +75,7 @@ class Routes extends React.Component {
onEntering={ this.props.onEntering }
>
<Switch location={ location }>
<RouteWrapper exact path="/" page={ Homepage } />
<RouteWrapper exact path="/contact" page={ ContactPage } />
<RouteWrapper exact path="/legal/privacy" page={ PrivacyPolicyPage } />
{ children }
</Switch>
</CSSTransition>
</TransitionGroup>

31
public/components/page/contact/ContactPage.jsx → public/pages/contact/ContactPage.jsx
View File

@ -25,15 +25,25 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Forms from '@common/Forms';
//Actions
import { openModal } from '@public/actions/ModalActions';
//Components
import Page, { PageBoundary } from './../Page';
import Page, { PageBoundary } from '@components/page/Page';
import Language from '@public/language/Language';
import Section, {
BodySection,
ClearSection,
SplitSection,
Split
} from '@components/section/Section';
//Objects
import ElementScrollFader from './../../../objects/animation/fade/ElementScrollFader';
import ContentBox from './../../../objects/content/ContentBox';
import { Title, Heading1, Paragraph } from './../../../objects/typography/Typography';
//import Forms from './../../../common/Forms';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
import ContentBox from '@objects/content/ContentBox';
import { Title, Heading1, Paragraph } from '@objects/typography/Typography';
import Input, {
Form,
FormManager,
@ -41,15 +51,8 @@ import Input, {
TextArea,
Label,
ButtonGroup
} from './../../../objects/input/Input';
import Section, {
BodySection,
ClearSection,
SplitSection,
Split
} from './../../section/Section';
import { openModal } from './../../../actions/ModalActions';
import Modal from './../../../objects/modal/Modal';
} from '@objects/input/Input';
import Modal from '@objects/modal/Modal';
class ContactPage extends React.Component {
constructor(props) {

2
public/components/page/home/HomePage.jsx → public/pages/home/HomePage.jsx
View File

@ -23,7 +23,7 @@
import React from 'react';
import { connect } from 'react-redux';
import Page from './../Page';
import Page from '@components/page/Page';
import Language from '@public/language/Language'
import BannerSection from './sections/BannerSection';

2
public/components/page/home/sections/BannerSection.jsx → public/pages/home/sections/BannerSection.jsx
View File

@ -34,7 +34,7 @@ export default (props) => {
return (
<ImageSection
className="p-home-page__banner"
src={ require('./../../../../assets/images/banners/about/glasses.svg') }
src={ require('@assets/images/banners/about/glasses.svg') }
alt="domsPlace"
width="2400"
height="1200"

10
public/components/page/home/sections/ExistingWorkSection.jsx → public/pages/home/sections/ExistingWorkSection.jsx
View File

@ -37,7 +37,7 @@ import Window95, {
ContextMenu, ContextMenuOption,
Frame,
AddressBar
} from './../../../../objects/window/Window95';
} from '@objects/window/Window95';
const ExistingWorkFrame = (props) => {
let fakeURL = props.href;
@ -113,7 +113,7 @@ export default (props) => {
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-work"
src={ require('./../../../../assets/images/patterns/arcade.svg') }
src={ require('@assets/images/patterns/arcade.svg') }
loadable
background
>
@ -139,7 +139,7 @@ export default (props) => {
href="//www.kopalife.com/products/kube-customise"
fromLeft="top"
fromRight="bottom"
src={ require('./../../../../assets/images/work-showcase/kopalife.png') }
src={ require('@assets/images/work-showcase/kopalife.png') }
title={ Language.get("pages.home.work.kopa.heading") }
description={ Language.get("pages.home.work.kopa.description") }
/>
@ -150,7 +150,7 @@ export default (props) => {
fromLeft="right"
fromRight="right"
swap
src={ require('./../../../../assets/images/work-showcase/smai.svg') }
src={ require('@assets/images/work-showcase/smai.svg') }
title={ Language.get("pages.home.work.smai.heading") }
description={ Language.get("pages.home.work.smai.description") }
/>
@ -161,7 +161,7 @@ export default (props) => {
fromLeft="left"
fromRight="left"
src={ require('./../../../../assets/images/work-showcase/ozhair.png') }
src={ require('@assets/images/work-showcase/ozhair.png') }
title={ Language.get("pages.home.work.ozhair.heading") }
description={ Language.get("pages.home.work.ozhair.description") }
/>

34
public/components/page/home/sections/PlatformsSection.jsx → public/pages/home/sections/PlatformsSection.jsx
View File

@ -60,7 +60,7 @@ export default (props) => {
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-platforms"
src={ require('./../../../../assets/images/patterns/game-show.svg') }
src={ require('@assets/images/patterns/game-show.svg') }
loadable
background
>
@ -74,14 +74,14 @@ export default (props) => {
<div className="p-home-page__brands">
{/* Shopify */}
<Platform
src={require('./../../../../assets/images/branding/shopify/shopify_glyph.svg')}
src={require('@assets/images/branding/shopify/shopify_glyph.svg')}
from="left"
to="//www.shopify.com"
title={ Language.get("pages.home.platforms.shopify") }
/>
{/* React */}
<Platform
src={require('./../../../../assets/images/branding/react/react-logo.svg')}
src={require('@assets/images/branding/react/react-logo.svg')}
from="top"
to="//reactjs.org"
title={ Language.get("pages.home.platforms.react") }
@ -89,7 +89,7 @@ export default (props) => {
{/* MonoGame */}
<Platform
src={require('./../../../../assets/images/branding/monogame/monogame-logo.svg')}
src={require('@assets/images/branding/monogame/monogame-logo.svg')}
from="bottom"
to="http://www.monogame.net"
title={ Language.get("pages.home.platforms.monogame") }
@ -97,7 +97,7 @@ export default (props) => {
{/* PGSQL */}
<Platform
src={require('./../../../../assets/images/branding/pgsql/pgsql-logo.svg')}
src={require('@assets/images/branding/pgsql/pgsql-logo.svg')}
from="right"
to="//www.postgresql.org"
title={ Language.get("pages.home.platforms.pgsql") }
@ -105,7 +105,7 @@ export default (props) => {
{/* NodeJS */}
<Platform
src={require('./../../../../assets/images/branding/nodejs/nodejs-logo.svg')}
src={require('@assets/images/branding/nodejs/nodejs-logo.svg')}
from="top"
to="//nodejs.org"
title={ Language.get("pages.home.platforms.nodejs") }
@ -113,7 +113,7 @@ export default (props) => {
{/* C# */}
<Platform
src={require('./../../../../assets/images/branding/csharp/csharp-logo.svg')}
src={require('@assets/images/branding/csharp/csharp-logo.svg')}
from="top"
to="//docs.microsoft.com/en-us/dotnet/csharp/"
title={ Language.get("pages.home.platforms.csharp") }
@ -121,7 +121,7 @@ export default (props) => {
{/* PHP */}
<Platform
src={require('./../../../../assets/images/branding/php/php-logo.svg')}
src={require('@assets/images/branding/php/php-logo.svg')}
from="top"
to="//php.net"
title={ Language.get("pages.home.platforms.php") }
@ -129,7 +129,7 @@ export default (props) => {
{/* Java */}
<Platform
src={require('./../../../../assets/images/branding/java/java-logo.svg')}
src={require('@assets/images/branding/java/java-logo.svg')}
from="top"
to="//java.com"
title={ Language.get("pages.home.platforms.java") }
@ -137,7 +137,7 @@ export default (props) => {
{/* neto */}
<Platform
src={require('./../../../../assets/images/branding/neto/neto-logo.svg')}
src={require('@assets/images/branding/neto/neto-logo.svg')}
from="bottom"
to="//www.neto.com.au"
title={ Language.get("pages.home.platforms.neto") }
@ -145,7 +145,7 @@ export default (props) => {
{/* MySQL */}
<Platform
src={require('./../../../../assets/images/branding/mysql/mysql-logo.svg')}
src={require('@assets/images/branding/mysql/mysql-logo.svg')}
from="bottom"
to="//www.mysql.com"
title={ Language.get("pages.home.platforms.mysql") }
@ -153,7 +153,7 @@ export default (props) => {
{/* Heroku */}
<Platform
src={require('./../../../../assets/images/branding/heroku/heroku-logo.svg')}
src={require('@assets/images/branding/heroku/heroku-logo.svg')}
from="bottom"
to="//heroku.com"
title={ Language.get("pages.home.platforms.heroku") }
@ -161,7 +161,7 @@ export default (props) => {
{/* OpenGL */}
<Platform
src={require('./../../../../assets/images/branding/opengl/opengl-logo.svg')}
src={require('@assets/images/branding/opengl/opengl-logo.svg')}
from="bottom"
to="//www.opengl.org"
title={ Language.get("pages.home.platforms.opengl") }
@ -169,7 +169,7 @@ export default (props) => {
{/* Discord */}
<Platform
src={ require('./../../../../assets/images/branding/discord/discord-logo.svg') }
src={ require('@assets/images/branding/discord/discord-logo.svg') }
from="right"
to="//discordapp.com"
title={ Language.get("pages.home.platforms.discord") }
@ -177,7 +177,7 @@ export default (props) => {
{/* Twitch */}
<Platform
src={ require('./../../../../assets/images/branding/twitch/twitch-logo.svg') }
src={ require('@assets/images/branding/twitch/twitch-logo.svg') }
from="right"
to="//twitch.tv"
title={ Language.get("pages.home.platforms.twitch") }
@ -185,7 +185,7 @@ export default (props) => {
{/* Twitter */}
<Platform
src={require('./../../../../assets/images/branding/twitter/twitter-logo.svg')}
src={require('@assets/images/branding/twitter/twitter-logo.svg')}
from="left"
to="//twitter.com"
title={ Language.get("pages.home.platforms.twitter") }
@ -193,7 +193,7 @@ export default (props) => {
{/* Google Cloud */}
<Platform
src={ require('./../../../../assets/images/branding/google-cloud/google-cloud-logo.svg') }
src={ require('@assets/images/branding/google-cloud/google-cloud-logo.svg') }
from="left"
to="//console.cloud.google.com"
title={ Language.get("pages.home.platforms.googlecloud") }

2
public/components/page/home/sections/ProgrammingSection.jsx → public/pages/home/sections/ProgrammingSection.jsx
View File

@ -34,7 +34,7 @@ export default (props) => {
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-programming"
src={ require('./../../../../assets/images/patterns/rhythm-heaven.svg') }
src={ require('@assets/images/patterns/rhythm-heaven.svg') }
loadable
background
>

4
public/components/page/home/sections/PromoVideoSection.jsx → public/pages/home/sections/PromoVideoSection.jsx
View File

@ -41,8 +41,8 @@ export default (props) => {
<Split className="u-text-center" padded>
<ElementScrollFader>
<Video
image={ require('./../../../../assets/videos/bunny/big_buck_bunny.jpg') }
mp4={ require('./../../../../assets/videos/bunny/big_buck_bunny.mp4') }
image={ require('@assets/videos/bunny/big_buck_bunny.jpg') }
mp4={ require('@assets/videos/bunny/big_buck_bunny.mp4') }
controls
/>
</ElementScrollFader>

4
public/components/page/legal/privacy/PrivacyPolicyPage.jsx → public/pages/legal/privacy/PrivacyPolicyPage.jsx
View File

@ -24,8 +24,10 @@
import React from 'react';
import { connect } from 'react-redux';
import Language from '@public/language/Language';
import Page, { PageBoundary } from './../../Page';
import Page, { PageBoundary } from '@components/page/Page';
import { BodySection, ClearSection } from '@components/section/Section';
import { Title } from '@objects/typography/Typography';
const PrivacyPolicyPage = (props) => {

7
webpack.config.js
View File

@ -32,7 +32,9 @@ module.exports = {
'@public': path.resolve(__dirname, './public'),
'@objects': path.resolve(__dirname, './public/objects'),
'@components': path.resolve(__dirname, './public/components'),
'@assets': path.resolve(__dirname, './public/assets')
'@assets': path.resolve(__dirname, './public/assets'),
'@pages': path.resolve(__dirname, './public/pages'),
'@common': path.resolve(__dirname, './common/')
}
},
@ -63,6 +65,9 @@ module.exports = {
}
],
"@babel/preset-react"
],
"plugins": [
'@babel/plugin-syntax-dynamic-import'
]
}
}