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
Download Patch File Download Diff File Expand all files Collapse all files

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>

198
public/components/page/contact/ContactPage.jsx
View File

@ -1,198 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
//Components
import Page, { PageBoundary } from './../Page';
import Language from '@public/language/Language';
//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 Input, {
Form,
FormManager,
InputGroup,
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';
class ContactPage extends React.Component {
constructor(props) {
super(props);
//Form Manager (For the form and elements)
this.manager = new FormManager();
this.state = {
sent: false
};
}
onSuccess(data) {
if(data !== true) return this.onError(data);
this.setState({
sent: true
});
}
onError(e, a, b) {
this.props.openModal(
<Modal close title={Language.get("pages.contact.error")}>
{ e }
</Modal>
);
}
render() {
//Form
let inners;
if(this.state.sent) {
//Sent Display
inners = (
<ElementScrollFader from="bottom">
<ContentBox box className="u-text-center">
<Heading1>{ Language.get("pages.contact.success.heading") }</Heading1>
<Paragraph>{ Language.get("pages.contact.success.paragraph") }</Paragraph>
</ContentBox>
</ElementScrollFader>
);
} else {
//Form
inners = (
<ElementScrollFader from="right">
<BodySection>
<Form
post="/api/contact/send"
contentType="application/json"
ajax
loader
onSuccess={ this.onSuccess.bind(this) }
onError={ this.onError.bind(this) }
manager={ this.manager }
>
<InputGroup test="First Group">
<Label htmlFor="name">
{ Language.get("pages.contact.name.label") }
</Label>
<Input
name="name"
type="text"
placeholder={ Language.get("pages.contact.name.placeholder") }
required={ Forms.contact.name.required }
maxLength={ Forms.contact.name.maxLength }
manager={ this.manager }
/>
</InputGroup>
<InputGroup >
<Label htmlFor="email">
{ Language.get("pages.contact.email.label") }
</Label>
<Input
name="email"
type="email"
placeholder={ Language.get("pages.contact.email.placeholder") }
required={ Forms.contact.email.required }
maxLength={ Forms.contact.email.maxLength }
manager={ this.manager }
/>
</InputGroup>
<InputGroup>
<Label> htmlFor="message">
{ Language.get("pages.contact.message.label") }
</Label>
<TextArea
name="message"
placeholder={ Language.get("pages.contact.message.placeholder") }
rows="8"
className="p-contact-page__message"
required={ Forms.contact.message.required }
maxLength={ Forms.contact.message.maxLength }
manager={ this.manager }
/>
</InputGroup>
<ButtonGroup>
<Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
<Input type="reset" value={ Language.get("pages.contact.reset") } />
</ButtonGroup>
</Form>
</BodySection>
</ElementScrollFader>
);
}
return (
<Page style="contact-page" className="p-contact-page" title={ Language.get("pages.contact.title") }>
<ClearSection />
<PageBoundary small>
<ElementScrollFader from="left">
<ContentBox box className="u-text-center">
<Title>{ Language.get("pages.contact.heading") }</Title>
<Paragraph>
{ Language.get("pages.contact.paragraph") }
</Paragraph>
</ContentBox>
</ElementScrollFader>
<br />
<br />
{ inners }
</PageBoundary>
<ClearSection />
</Page>
);
}
}
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
openModal: openModal
},dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(ContactPage);

65
public/components/page/home/HomePage.jsx
View File

@ -1,65 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Page from './../Page';
import Language from '@public/language/Language'
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
import ProgrammingSection from './sections/ProgrammingSection';
import PlatformsSection from './sections/PlatformsSection';
import ExistingWorkSection from './sections/ExistingWorkSection';
const HomePage = (props) => {
//Return
return (
<Page style="home-page" className="p-home-page" title={0}>
{ /* Banner */ }
<BannerSection />
{ /* Promo Video
<PromoVideoSection />
*/ }
{/* Programming */}
<ProgrammingSection />
{/* Platforms */}
<PlatformsSection />
{/* Existing Work */}
<ExistingWorkSection />
</Page>
);
}
const mapStateToProps = (state) => {
return {
code: state.language.code
};
}
export default connect(mapStateToProps)(HomePage);

53
public/components/page/home/sections/BannerSection.jsx
View File

@ -1,53 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Language from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection } from '@components/section/Section';
import FloatingContentBox from '@objects/content/FloatingContentBox';
import { Title, Subtitle } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
export default (props) => {
return (
<ImageSection
className="p-home-page__banner"
src={ require('./../../../../assets/images/banners/about/glasses.svg') }
alt="domsPlace"
width="2400"
height="1200"
loadable
>
<PageBoundary full>
<FloatingContentBox position="middle center" size="large" className="u-text-center">
<ElementScrollFader from="bottom">
<Title>{ Language.get("pages.home.banner.title") }</Title>
<Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
</ElementScrollFader>
</FloatingContentBox>
</PageBoundary>
</ImageSection>
);
}

186
public/components/page/home/sections/ExistingWorkSection.jsx
View File

@ -1,186 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Language from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection, SplitSection, Split, ClearSection } from '@components/section/Section';
import ContentBox from '@objects/content/ContentBox';
import { Title, Subtitle, Paragraph, Heading1, Heading2 } from '@objects/typography/Typography';
import { Button } from '@objects/input/Input';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
import Image from '@objects/image/Image';
import Window95, {
TitleBar, Close, Minimize,
MenuBar, MenuOption,
ContextMenu, ContextMenuOption,
Frame,
AddressBar
} from './../../../../objects/window/Window95';
const ExistingWorkFrame = (props) => {
let fakeURL = props.href;
if(!fakeURL.startsWith("http") && typeof window !== typeof undefined) {
fakeURL = window.location.protocol + fakeURL;
}
let fakeWindow = (
<ElementScrollFader from={props.fromLeft}>
<Window95>
<TitleBar buttons={[
<Minimize key="Minimize" disabled />,
<Close key="close" disabled />
]}>
{ props.title }
</TitleBar>
<MenuBar>
<MenuOption title="File" disabled />
<MenuOption title="Visit Page" href={ props.href } target="_blank" />
</MenuBar>
<AddressBar href={fakeURL} />
<Frame>
<a href={ props.href} target="_blank" className="p-home-page__work-link">
<Image
src={props.src}
alt={props.title}
loadable
className="p-home-page__work-link-image"
maxWidth="600"
/>
</a>
</Frame>
</Window95>
</ElementScrollFader>
);
let box = (
<ElementScrollFader from={ props.fromRight }>
<ContentBox box>
<Heading2>{ props.title }</Heading2>
{ props.description }
</ContentBox>
</ElementScrollFader>
);
let left, right;
if(props.swap) {
left = box;
right = fakeWindow;
} else {
left = fakeWindow;
right = box;
}
return (
<SplitSection align="center">
<Split padded>
{ left }
</Split>
<Split padded>
{ right }
</Split>
</SplitSection>
);
};
export default (props) => {
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-work"
src={ require('./../../../../assets/images/patterns/arcade.svg') }
loadable
background
>
{/* Title */}
<PageBoundary small>
<ElementScrollFader from="left">
<ContentBox box>
<Heading1 className="u-text-center">
{ Language.get("pages.home.work.heading") }
</Heading1>
<Paragraph>
{ Language.get("pages.home.work.paragraph") }
</Paragraph>
</ContentBox>
</ElementScrollFader>
<ClearSection />{/* Space a bit */}
</PageBoundary>
<PageBoundary>
{/* KOPA */}
<ExistingWorkFrame
href="//www.kopalife.com/products/kube-customise"
fromLeft="top"
fromRight="bottom"
src={ require('./../../../../assets/images/work-showcase/kopalife.png') }
title={ Language.get("pages.home.work.kopa.heading") }
description={ Language.get("pages.home.work.kopa.description") }
/>
{/* SMAI */}
<ExistingWorkFrame
href="//www.smai.com.au/"
fromLeft="right"
fromRight="right"
swap
src={ require('./../../../../assets/images/work-showcase/smai.svg') }
title={ Language.get("pages.home.work.smai.heading") }
description={ Language.get("pages.home.work.smai.description") }
/>
{/* Oz Hair and Beauty */}
<ExistingWorkFrame
href="//www.ozhairandbeauty.com/"
fromLeft="left"
fromRight="left"
src={ require('./../../../../assets/images/work-showcase/ozhair.png') }
title={ Language.get("pages.home.work.ozhair.heading") }
description={ Language.get("pages.home.work.ozhair.description") }
/>
</PageBoundary>
<PageBoundary small>
<ClearSection />{/* Space a bit */}
<ElementScrollFader from="bottom">
<ContentBox box className="u-text-center">
<Subtitle>{ Language.get("pages.home.work.footer") }</Subtitle>
<Button size="large" to="/contact">
{ Language.get("pages.home.work.footer-button") }
</Button>
</ContentBox>
</ElementScrollFader>
<ClearSection />{/* Space a bit */}
</PageBoundary>
</ImageSection>
);
}

211
public/components/page/home/sections/PlatformsSection.jsx
View File

@ -1,211 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Language from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection, SplitSection, Split } from '@components/section/Section';
import FloatingContentBox from '@objects/content/FloatingContentBox';
import ContentBox from '@objects/content/ContentBox';
import Image from '@objects/image/Image';
import Video from '@objects/video/Video';
import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
const Platform = (props) => {
let children;
let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
if(props.to) {
children = (
<a href={props.to} target="_blank" className="p-home-page__brands-link" title={props.title}>
{image}
</a>
);
} else {
children = image;
}
//Wrap in a div and a fader. Div is to help with random transitions on resizing.
return (
<div className="p-home-page__brands-brand">
<ElementScrollFader from={props.from}>
{children}
</ElementScrollFader>
</div>
);
};
export default (props) => {
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-platforms"
src={ require('./../../../../assets/images/patterns/game-show.svg') }
loadable
background
>
<PageBoundary>
<ElementScrollFader from="left">
<Title className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.heading") }
</Title>
</ElementScrollFader>
<div className="p-home-page__brands">
{/* Shopify */}
<Platform
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')}
from="top"
to="//reactjs.org"
title={ Language.get("pages.home.platforms.react") }
/>
{/* MonoGame */}
<Platform
src={require('./../../../../assets/images/branding/monogame/monogame-logo.svg')}
from="bottom"
to="http://www.monogame.net"
title={ Language.get("pages.home.platforms.monogame") }
/>
{/* PGSQL */}
<Platform
src={require('./../../../../assets/images/branding/pgsql/pgsql-logo.svg')}
from="right"
to="//www.postgresql.org"
title={ Language.get("pages.home.platforms.pgsql") }
/>
{/* NodeJS */}
<Platform
src={require('./../../../../assets/images/branding/nodejs/nodejs-logo.svg')}
from="top"
to="//nodejs.org"
title={ Language.get("pages.home.platforms.nodejs") }
/>
{/* C# */}
<Platform
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") }
/>
{/* PHP */}
<Platform
src={require('./../../../../assets/images/branding/php/php-logo.svg')}
from="top"
to="//php.net"
title={ Language.get("pages.home.platforms.php") }
/>
{/* Java */}
<Platform
src={require('./../../../../assets/images/branding/java/java-logo.svg')}
from="top"
to="//java.com"
title={ Language.get("pages.home.platforms.java") }
/>
{/* neto */}
<Platform
src={require('./../../../../assets/images/branding/neto/neto-logo.svg')}
from="bottom"
to="//www.neto.com.au"
title={ Language.get("pages.home.platforms.neto") }
/>
{/* MySQL */}
<Platform
src={require('./../../../../assets/images/branding/mysql/mysql-logo.svg')}
from="bottom"
to="//www.mysql.com"
title={ Language.get("pages.home.platforms.mysql") }
/>
{/* Heroku */}
<Platform
src={require('./../../../../assets/images/branding/heroku/heroku-logo.svg')}
from="bottom"
to="//heroku.com"
title={ Language.get("pages.home.platforms.heroku") }
/>
{/* OpenGL */}
<Platform
src={require('./../../../../assets/images/branding/opengl/opengl-logo.svg')}
from="bottom"
to="//www.opengl.org"
title={ Language.get("pages.home.platforms.opengl") }
/>
{/* Discord */}
<Platform
src={ require('./../../../../assets/images/branding/discord/discord-logo.svg') }
from="right"
to="//discordapp.com"
title={ Language.get("pages.home.platforms.discord") }
/>
{/* Twitch */}
<Platform
src={ require('./../../../../assets/images/branding/twitch/twitch-logo.svg') }
from="right"
to="//twitch.tv"
title={ Language.get("pages.home.platforms.twitch") }
/>
{/* Twitter */}
<Platform
src={require('./../../../../assets/images/branding/twitter/twitter-logo.svg')}
from="left"
to="//twitter.com"
title={ Language.get("pages.home.platforms.twitter") }
/>
{/* Google Cloud */}
<Platform
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") }
/>
</div>
<ElementScrollFader from="bottom">
<Subtitle className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.footer") }
</Subtitle>
</ElementScrollFader>
</PageBoundary>
</ImageSection>
);
}

53
public/components/page/home/sections/ProgrammingSection.jsx
View File

@ -1,53 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Language from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection } from '@components/section/Section';
import ContentBox from '@objects/content/ContentBox';
import { Title, Paragraph, Heading1 } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
export default (props) => {
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-programming"
src={ require('./../../../../assets/images/patterns/rhythm-heaven.svg') }
loadable
background
>
<PageBoundary small>
<ElementScrollFader from="bottom">
<ContentBox box>
<Heading1 className="u-text-center">
{ Language.get("pages.home.programming.heading") }
</Heading1>
{ Language.get("pages.home.programming.paragraph") }
</ContentBox>
</ElementScrollFader>
</PageBoundary>
</ImageSection>
);
}

68
public/components/page/home/sections/PromoVideoSection.jsx
View File

@ -1,68 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Language from '@public/language/Language';
import Page, { PageBoundary } from '@components/page/Page';
import Section, { SplitSection, Split } from '@components/section/Section';
import FloatingContentBox from '@objects/content/FloatingContentBox';
import ContentBox from '@objects/content/ContentBox';
import Video from '@objects/video/Video';
import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
export default (props) => {
return (
<Section className="p-home-page__promo p-home-page__promo-video">
<PageBoundary>
<SplitSection align="center">
<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') }
controls
/>
</ElementScrollFader>
</Split>
<Split className="u-text-center" padded>
<ElementScrollFader from="bottom">
<ContentBox box>
<Title>
{ Language.get("pages.home.video.heading") }
</Title>
<Paragraph>
{ Language.get("pages.home.video.paragraph") }
</Paragraph>
</ContentBox>
</ElementScrollFader>
</Split>
</SplitSection>
</PageBoundary>
</Section>
);
}

53
public/components/page/legal/privacy/PrivacyPolicyPage.jsx
View File

@ -1,53 +0,0 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Language from '@public/language/Language';
import Page, { PageBoundary } from './../../Page';
import { BodySection, ClearSection } from '@components/section/Section';
import { Title } from '@objects/typography/Typography';
const PrivacyPolicyPage = (props) => {
return (
<Page style="privacy-policy" className="p-privacy-policy" title={ Language.get("pages.privacy.title") }>
<PageBoundary small>
<ClearSection />
<BodySection>
<Title>{ Language.get("pages.privacy.heading") }</Title>
{ Language.get("pages.privacy.policy") }
</BodySection>
<ClearSection />
</PageBoundary>
</Page>
);
};
const mapStateToProps = function(state) {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(PrivacyPolicyPage);