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" "@babel/preset-react"
],
"plugins": [
], ],
"ignore": [ "ignore": [
"node_modules" "node_modules"

2
package.json
View File

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

47
public/components/App.jsx
View File

@ -28,7 +28,7 @@ import { HashRouter, BrowserRouter } from 'react-router-dom';
import Background from '@objects/background/Background'; import Background from '@objects/background/Background';
import Header from './header/Header'; import Header from './header/Header';
import Footer from './footer/Footer'; import Footer from './footer/Footer';
import Routes from './page/Routes'; import Routes, { RouteWrapper } from './page/Routes';
import Favicon from './Favicon'; import Favicon from './Favicon';
class App extends React.Component { class App extends React.Component {
@ -47,27 +47,44 @@ class App extends React.Component {
} }
render() { render() {
let { className, menuOpen, modal } = this.props;
//Generate base clazzes
let clazz = "c-app"; let clazz = "c-app";
if(this.props.menuOpen) clazz += " is-menu-open ";
let modal; //Menu Open?
if(this.props.modal.open) clazz += " is-modal-open"; if(menuOpen) clazz += " is-menu-open ";
if(this.props.modal.modal) modal = this.props.modal.modal;
let children = ( //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"> <div className={clazz} ref="app">
<Favicon /> <Favicon />
<Header /> <Header />
{ modal }
<Routes onEntering={this.onEnteringBound} />
</div>
);
if(false) { { modalObject }
return <HashRouter>{children}</HashRouter>;
} else { {/* Routes */}
return <BrowserRouter>{children}</BrowserRouter>; <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>
);
} }
} }

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

@ -33,25 +33,23 @@ class Page extends React.Component {
} }
render() { render() {
let { title, style, className } = this.props;
let clazzes = "c-page"; let clazzes = "c-page";
if(this.props.className) clazzes += " " + this.props.className; if(className) clazzes += " " + className;
let title; let titleHelmet;
if( if((!title || !title.length) && this.props.style != "home-page") {
(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!"); console.exception("This page (" + (this.props.style || this.props.className) + ") does not have a title!");
} else { } else {
title = <title>{ this.props.title }</title> titleHelmet = <title>{ this.props.title }</title>
} }
return ( return (
<div className={clazzes}> <div className={clazzes}>
<Helmet defaultTitle={ Language.get("site.title") } titleTemplate={ Language.get("site.titleTemplate") }> <Helmet defaultTitle={ Language.get("site.title") } titleTemplate={ Language.get("site.titleTemplate") }>
{ title } { titleHelmet }
</Helmet> </Helmet>
{ this.props.children } { this.props.children }
</div> </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 { withRouter } from 'react-router';
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { HashRouter, Route, Switch } from 'react-router-dom'; import { HashRouter, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
import Header from './../header/Header'; import Header from './../header/Header';
import Footer from './../footer/Footer'; import Footer from './../footer/Footer';
//Pages const PageLoading = (props) => {
import Homepage from './home/Homepage'; if(props.error) return <span>Loading Error</span>;
import ContactPage from './contact/ContactPage'; if(props.pastDelay) return <span>Loading...</span>;
return null;
};
import PrivacyPolicyPage from './legal/privacy/PrivacyPolicyPage'; export const RouteWrapper = (props) => {
const RouteWrapper = (props) => {
let newProps = Object.assign({}, props);
return ( return (
<Route {...props} render={() => { <Route {...props} render={() => {
let CustomTag = props.page; let CustomLoadable = Loadable({
loader: props.page,
loading: PageLoading
});
let CustomTag = <span>Not loading</span>;
return ( return (
<main className="c-main"> <main className="c-main">
<CustomTag /> <CustomLoadable />
<Footer /> <Footer />
</main> </main>
); );
@ -57,7 +61,7 @@ class Routes extends React.Component {
} }
render() { render() {
const { match, location, history } = this.props; const { match, location, history, children } = this.props;
return ( return (
<Route> <Route>
@ -71,10 +75,7 @@ class Routes extends React.Component {
onEntering={ this.props.onEntering } onEntering={ this.props.onEntering }
> >
<Switch location={ location }> <Switch location={ location }>
<RouteWrapper exact path="/" page={ Homepage } /> { children }
<RouteWrapper exact path="/contact" page={ ContactPage } />
<RouteWrapper exact path="/legal/privacy" page={ PrivacyPolicyPage } />
</Switch> </Switch>
</CSSTransition> </CSSTransition>
</TransitionGroup> </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 { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import Forms from '@common/Forms';
//Actions
import { openModal } from '@public/actions/ModalActions';
//Components //Components
import Page, { PageBoundary } from './../Page'; import Page, { PageBoundary } from '@components/page/Page';
import Language from '@public/language/Language'; import Language from '@public/language/Language';
import Section, {
BodySection,
ClearSection,
SplitSection,
Split
} from '@components/section/Section';
//Objects //Objects
import ElementScrollFader from './../../../objects/animation/fade/ElementScrollFader'; import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
import ContentBox from './../../../objects/content/ContentBox'; import ContentBox from '@objects/content/ContentBox';
import { Title, Heading1, Paragraph } from './../../../objects/typography/Typography'; import { Title, Heading1, Paragraph } from '@objects/typography/Typography';
//import Forms from './../../../common/Forms';
import Input, { import Input, {
Form, Form,
FormManager, FormManager,
@ -41,15 +51,8 @@ import Input, {
TextArea, TextArea,
Label, Label,
ButtonGroup ButtonGroup
} from './../../../objects/input/Input'; } from '@objects/input/Input';
import Section, { import Modal from '@objects/modal/Modal';
BodySection,
ClearSection,
SplitSection,
Split
} from './../../section/Section';
import { openModal } from './../../../actions/ModalActions';
import Modal from './../../../objects/modal/Modal';
class ContactPage extends React.Component { class ContactPage extends React.Component {
constructor(props) { 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 React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Page from './../Page'; import Page from '@components/page/Page';
import Language from '@public/language/Language' import Language from '@public/language/Language'
import BannerSection from './sections/BannerSection'; 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 ( return (
<ImageSection <ImageSection
className="p-home-page__banner" className="p-home-page__banner"
src={ require('./../../../../assets/images/banners/about/glasses.svg') } src={ require('@assets/images/banners/about/glasses.svg') }
alt="domsPlace" alt="domsPlace"
width="2400" width="2400"
height="1200" 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, ContextMenu, ContextMenuOption,
Frame, Frame,
AddressBar AddressBar
} from './../../../../objects/window/Window95'; } from '@objects/window/Window95';
const ExistingWorkFrame = (props) => { const ExistingWorkFrame = (props) => {
let fakeURL = props.href; let fakeURL = props.href;
@ -113,7 +113,7 @@ export default (props) => {
return ( return (
<ImageSection <ImageSection
className="p-home-page__promo p-home-page__promo-work" 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 loadable
background background
> >
@ -139,7 +139,7 @@ export default (props) => {
href="//www.kopalife.com/products/kube-customise" href="//www.kopalife.com/products/kube-customise"
fromLeft="top" fromLeft="top"
fromRight="bottom" 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") } title={ Language.get("pages.home.work.kopa.heading") }
description={ Language.get("pages.home.work.kopa.description") } description={ Language.get("pages.home.work.kopa.description") }
/> />
@ -150,7 +150,7 @@ export default (props) => {
fromLeft="right" fromLeft="right"
fromRight="right" fromRight="right"
swap 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") } title={ Language.get("pages.home.work.smai.heading") }
description={ Language.get("pages.home.work.smai.description") } description={ Language.get("pages.home.work.smai.description") }
/> />
@ -161,7 +161,7 @@ export default (props) => {
fromLeft="left" fromLeft="left"
fromRight="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") } title={ Language.get("pages.home.work.ozhair.heading") }
description={ Language.get("pages.home.work.ozhair.description") } 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 ( return (
<ImageSection <ImageSection
className="p-home-page__promo p-home-page__promo-platforms" 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 loadable
background background
> >
@ -74,14 +74,14 @@ export default (props) => {
<div className="p-home-page__brands"> <div className="p-home-page__brands">
{/* Shopify */} {/* Shopify */}
<Platform <Platform
src={require('./../../../../assets/images/branding/shopify/shopify_glyph.svg')} src={require('@assets/images/branding/shopify/shopify_glyph.svg')}
from="left" from="left"
to="//www.shopify.com" to="//www.shopify.com"
title={ Language.get("pages.home.platforms.shopify") } title={ Language.get("pages.home.platforms.shopify") }
/> />
{/* React */} {/* React */}
<Platform <Platform
src={require('./../../../../assets/images/branding/react/react-logo.svg')} src={require('@assets/images/branding/react/react-logo.svg')}
from="top" from="top"
to="//reactjs.org" to="//reactjs.org"
title={ Language.get("pages.home.platforms.react") } title={ Language.get("pages.home.platforms.react") }
@ -89,7 +89,7 @@ export default (props) => {
{/* MonoGame */} {/* MonoGame */}
<Platform <Platform
src={require('./../../../../assets/images/branding/monogame/monogame-logo.svg')} src={require('@assets/images/branding/monogame/monogame-logo.svg')}
from="bottom" from="bottom"
to="http://www.monogame.net" to="http://www.monogame.net"
title={ Language.get("pages.home.platforms.monogame") } title={ Language.get("pages.home.platforms.monogame") }
@ -97,7 +97,7 @@ export default (props) => {
{/* PGSQL */} {/* PGSQL */}
<Platform <Platform
src={require('./../../../../assets/images/branding/pgsql/pgsql-logo.svg')} src={require('@assets/images/branding/pgsql/pgsql-logo.svg')}
from="right" from="right"
to="//www.postgresql.org" to="//www.postgresql.org"
title={ Language.get("pages.home.platforms.pgsql") } title={ Language.get("pages.home.platforms.pgsql") }
@ -105,7 +105,7 @@ export default (props) => {
{/* NodeJS */} {/* NodeJS */}
<Platform <Platform
src={require('./../../../../assets/images/branding/nodejs/nodejs-logo.svg')} src={require('@assets/images/branding/nodejs/nodejs-logo.svg')}
from="top" from="top"
to="//nodejs.org" to="//nodejs.org"
title={ Language.get("pages.home.platforms.nodejs") } title={ Language.get("pages.home.platforms.nodejs") }
@ -113,7 +113,7 @@ export default (props) => {
{/* C# */} {/* C# */}
<Platform <Platform
src={require('./../../../../assets/images/branding/csharp/csharp-logo.svg')} src={require('@assets/images/branding/csharp/csharp-logo.svg')}
from="top" from="top"
to="//docs.microsoft.com/en-us/dotnet/csharp/" to="//docs.microsoft.com/en-us/dotnet/csharp/"
title={ Language.get("pages.home.platforms.csharp") } title={ Language.get("pages.home.platforms.csharp") }
@ -121,7 +121,7 @@ export default (props) => {
{/* PHP */} {/* PHP */}
<Platform <Platform
src={require('./../../../../assets/images/branding/php/php-logo.svg')} src={require('@assets/images/branding/php/php-logo.svg')}
from="top" from="top"
to="//php.net" to="//php.net"
title={ Language.get("pages.home.platforms.php") } title={ Language.get("pages.home.platforms.php") }
@ -129,7 +129,7 @@ export default (props) => {
{/* Java */} {/* Java */}
<Platform <Platform
src={require('./../../../../assets/images/branding/java/java-logo.svg')} src={require('@assets/images/branding/java/java-logo.svg')}
from="top" from="top"
to="//java.com" to="//java.com"
title={ Language.get("pages.home.platforms.java") } title={ Language.get("pages.home.platforms.java") }
@ -137,7 +137,7 @@ export default (props) => {
{/* neto */} {/* neto */}
<Platform <Platform
src={require('./../../../../assets/images/branding/neto/neto-logo.svg')} src={require('@assets/images/branding/neto/neto-logo.svg')}
from="bottom" from="bottom"
to="//www.neto.com.au" to="//www.neto.com.au"
title={ Language.get("pages.home.platforms.neto") } title={ Language.get("pages.home.platforms.neto") }
@ -145,7 +145,7 @@ export default (props) => {
{/* MySQL */} {/* MySQL */}
<Platform <Platform
src={require('./../../../../assets/images/branding/mysql/mysql-logo.svg')} src={require('@assets/images/branding/mysql/mysql-logo.svg')}
from="bottom" from="bottom"
to="//www.mysql.com" to="//www.mysql.com"
title={ Language.get("pages.home.platforms.mysql") } title={ Language.get("pages.home.platforms.mysql") }
@ -153,7 +153,7 @@ export default (props) => {
{/* Heroku */} {/* Heroku */}
<Platform <Platform
src={require('./../../../../assets/images/branding/heroku/heroku-logo.svg')} src={require('@assets/images/branding/heroku/heroku-logo.svg')}
from="bottom" from="bottom"
to="//heroku.com" to="//heroku.com"
title={ Language.get("pages.home.platforms.heroku") } title={ Language.get("pages.home.platforms.heroku") }
@ -161,7 +161,7 @@ export default (props) => {
{/* OpenGL */} {/* OpenGL */}
<Platform <Platform
src={require('./../../../../assets/images/branding/opengl/opengl-logo.svg')} src={require('@assets/images/branding/opengl/opengl-logo.svg')}
from="bottom" from="bottom"
to="//www.opengl.org" to="//www.opengl.org"
title={ Language.get("pages.home.platforms.opengl") } title={ Language.get("pages.home.platforms.opengl") }
@ -169,7 +169,7 @@ export default (props) => {
{/* Discord */} {/* Discord */}
<Platform <Platform
src={ require('./../../../../assets/images/branding/discord/discord-logo.svg') } src={ require('@assets/images/branding/discord/discord-logo.svg') }
from="right" from="right"
to="//discordapp.com" to="//discordapp.com"
title={ Language.get("pages.home.platforms.discord") } title={ Language.get("pages.home.platforms.discord") }
@ -177,7 +177,7 @@ export default (props) => {
{/* Twitch */} {/* Twitch */}
<Platform <Platform
src={ require('./../../../../assets/images/branding/twitch/twitch-logo.svg') } src={ require('@assets/images/branding/twitch/twitch-logo.svg') }
from="right" from="right"
to="//twitch.tv" to="//twitch.tv"
title={ Language.get("pages.home.platforms.twitch") } title={ Language.get("pages.home.platforms.twitch") }
@ -185,7 +185,7 @@ export default (props) => {
{/* Twitter */} {/* Twitter */}
<Platform <Platform
src={require('./../../../../assets/images/branding/twitter/twitter-logo.svg')} src={require('@assets/images/branding/twitter/twitter-logo.svg')}
from="left" from="left"
to="//twitter.com" to="//twitter.com"
title={ Language.get("pages.home.platforms.twitter") } title={ Language.get("pages.home.platforms.twitter") }
@ -193,7 +193,7 @@ export default (props) => {
{/* Google Cloud */} {/* Google Cloud */}
<Platform <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" from="left"
to="//console.cloud.google.com" to="//console.cloud.google.com"
title={ Language.get("pages.home.platforms.googlecloud") } 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 ( return (
<ImageSection <ImageSection
className="p-home-page__promo p-home-page__promo-programming" 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 loadable
background 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> <Split className="u-text-center" padded>
<ElementScrollFader> <ElementScrollFader>
<Video <Video
image={ require('./../../../../assets/videos/bunny/big_buck_bunny.jpg') } image={ require('@assets/videos/bunny/big_buck_bunny.jpg') }
mp4={ require('./../../../../assets/videos/bunny/big_buck_bunny.mp4') } mp4={ require('@assets/videos/bunny/big_buck_bunny.mp4') }
controls controls
/> />
</ElementScrollFader> </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 React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Language from '@public/language/Language'; 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 { BodySection, ClearSection } from '@components/section/Section';
import { Title } from '@objects/typography/Typography'; import { Title } from '@objects/typography/Typography';
const PrivacyPolicyPage = (props) => { const PrivacyPolicyPage = (props) => {

7
webpack.config.js
View File

@ -32,7 +32,9 @@ module.exports = {
'@public': path.resolve(__dirname, './public'), '@public': path.resolve(__dirname, './public'),
'@objects': path.resolve(__dirname, './public/objects'), '@objects': path.resolve(__dirname, './public/objects'),
'@components': path.resolve(__dirname, './public/components'), '@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" "@babel/preset-react"
],
"plugins": [
'@babel/plugin-syntax-dynamic-import'
] ]
} }
} }