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

Lil site rebuild

Browse Source
This commit is contained in:
Dominic Masters
2019-05-30 21:28:50 +10:00
parent 9a777f5e83
commit 8a19fbe78f
392 changed files with 14556 additions and 27299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/public/components/layout/footer/index.tsx Normal file
View File

@ -0,0 +1,75 @@
// Copyright (c) 2019 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 * as React from 'react';
import { Link, LinkProps } from '@yourwishes/app-simple-react/dist/public';
import { Logo } from './../../../objects/logo/';
import './styles.scss';
//FooterLinks
export const FooterLink = (props:LinkProps) => (
<Link {...props} className={`c-footer__navigation-link ${props.className||""}`} />
);
//Footer
export interface FooterProps extends React.HTMLAttributes<HTMLElement> {}
export interface FooterState {
now:Date
};
export class Footer extends React.Component<FooterProps, FooterState> {
interval:NodeJS.Timeout;
constructor(props:FooterProps) {
super(props);
this.state = {
now: new Date()
}
}
componentDidMount() {
this.interval = setInterval(() => this.setState({ now: new Date() }), 1000);
}
componentWillUnmount() {
if(this.interval) clearInterval(this.interval);
}
render() {
return (
<footer {...this.props} className={`c-footer ${this.props.className||""}`}>
<Logo className="c-footer__logo" />
<span className="c-footer__copyright">
&copy; 2012 ~ { this.state.now.getFullYear() } Dominic Masters
</span>
<nav className="c-footer__navigation">
<FooterLink to="/contact">Contact Me</FooterLink>
<FooterLink to="/legal/privacy">Privacy Policy</FooterLink>
</nav>
</footer>
);
}
}

74
src/public/components/layout/footer/styles.scss Normal file
View File

@ -0,0 +1,74 @@
@import './../../../styles/global';
.c-footer {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding: $s-gutter--small;
background: $s-color--background-footer;
&__logo {
display: none;
width: 100%;
}
&__copyright,&__navigation {
width: 100%;
font-size: 0.8em;
margin-bottom: 1em;
text-align: center;
}
&__navigation {
&-link {
display: inline-block;
position: relative;
+ #{&} {
margin-left: 1em;
&::before {
content: "|";
display: inline-block;
position: absolute;
left: 0;
transform: translateX(-0.5em) translateX(-50%);
}
}
}
}
@include t-media-query($s-xsmall-up) {
&__logo {
display: block;
width: 100%;
img {
width: 120px;
margin: 0 auto;
}
}
&__copyright,&__navigation {
width: auto;
margin: 0;
}
}
/* Specific for the footer, I want the logo to go down and be centered */
@media screen and (min-width: 620px) {
&__logo {
display: flex;
align-items: center;
height: 100%;
width: auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
}

83
src/public/components/layout/header/index.tsx Normal file
View File

@ -0,0 +1,83 @@
// Copyright (c) 2019 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 * as React from 'react';
import { Link, Image } from '@yourwishes/app-simple-react/dist/public';
import { Logo } from './../../../objects/logo/';
import './styles.scss';
//Social Icon
export interface HeaderSocialIconProps {
to:string,
className?:string,
icon:string,
title:string
};
export const HeaderSocialIcon = (props:HeaderSocialIconProps) => (
<Link to={props.to} className={`c-header__social-icon ${props.className||""} is-${props.icon}`}>
<Image src={ require('./../../../assets/icons/icon-'+props.icon+'.svg') } className="c-header__social-icon-image" />
<span className="c-header__social-icon-label">
{ props.title }
</span>
</Link>
);
//Header
export interface HeaderProps extends React.HTMLAttributes<HTMLElement> { }
export interface HeaderState { now:Date }
export class Header extends React.Component<HeaderProps, HeaderState> {
interval:NodeJS.Timeout;
constructor(props:HeaderProps) {
super(props);
this.state = { now: new Date() }
}
componentDidMount() {
this.interval = setInterval(() => this.setState({ now: new Date() }), 1000);
}
componentWillUnmount() {
if(this.interval) clearInterval(this.interval);
}
render() {
let { className } = this.props;
let { now } = this.state;
return (
<header {...this.props} className={`c-header ${className||""}`}>
<time dateTime={now.toString()} className="c-header__time">
{ now.getHours() }<span className="c-header__time-colon">:</span>{ `${now.getMinutes()}`.padStart(2, '0') }
</time>
<Logo className="c-header__logo" />
<div className="c-header__social">
<HeaderSocialIcon to="//github.com/YourWishes" icon="github" title="GitHub" />
</div>
</header>
);
}
};

103
src/public/components/layout/header/styles.scss Normal file
View File

@ -0,0 +1,103 @@
@import './../../../styles/global';
@keyframes c-header--time-tick {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1;}
}
$c-header--spacing: $s-gutter--small;
.c-header {
padding: $c-header--spacing;
z-index: $s-z--header;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
&__time{
font-size: 0.75em;
position: absolute;
&-colon { animation: 2s c-header--time-tick infinite step-end; }
}
&__logo {
width: 100%;
img {
width: 60%;
max-width: 250px;
margin: 0 auto;
}
}
&__social {
display: flex;
justify-content: center;
width: 100%;
margin-top: $s-gutter--xsmall;
&-icon {
display: flex;
align-items: center;
margin: 0 0.5em;
&-image {
width: 2em;
height: 2em;
padding: 0.25em;
border-radius: 50%;
overflow: hidden;
}
&-label {
display: none;
max-width: 0;
overflow: hidden;
transition: all $s-animation--time-medium $s-animation--ease-out;
}
&:hover > .c-header__social-icon-label {
max-width: 100px;
padding-left: 0.5em;
}
/* Social Specific Styles */
&.is-github #{&}-image { background: $s-social--github-background; }
}
}
@include t-media-query($s-xsmall-up) {
padding: 0;
&__logo { display: none; }
&__time{
font-size: 1em;
top: $c-header--spacing;
left: $c-header--spacing;
}
&__social {
position: absolute;
top: $c-header--spacing;
right: $c-header--spacing;
width: auto;
margin-top: 0;
&-icon {
padding: 0.5em 0;
margin: 0;
padding-right: $s-gutter--small;
&:first-child { padding-top: 0; }
&:last-child { padding-bottom: 0; }
&-image { width: 2.5em; height: 2.5em; }
&-label { display: inline-block; }
}
}
}
}

93
src/public/components/layout/layout/index.tsx Normal file
View File

@ -0,0 +1,93 @@
// Copyright (c) 2019 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 * as React from 'react';
import { History } from 'history';
import { AnimatedSwitch, Router } from '@yourwishes/app-simple-react/dist/public';
import { StarBackground } from './../../background/stars/';
import { Header } from './../header/';
import { Footer } from './../footer/';
import { Page } from './../../page/';
import './styles.scss';
//Paths (this will generate the necessary pages)
export interface LayoutProps {
history:History
};
class LayoutComponent extends React.Component<LayoutProps> {
view:HTMLDivElement;
constructor(props:LayoutProps) {
super(props);
}
//We use these to let the body know we're changing routes, which is a fake
//way of stopping a user changing the route mid transition.
onTransitionStart() {
document.body.classList.add('is-route-changing');
}
onTransitionEnd() {
document.body.classList.remove('is-route-changing');
}
render() {
return (
<Router history={this.props.history}>
<>
<StarBackground />
<div className="c-layout">
<Header className="c-layout__header" />
<div className="c-layout__view" ref={e => this.view = e}>
<AnimatedSwitch
timeout={1000} classNames="c-page__transition"
onEntering={() => this.onTransitionStart()}
onEntered={() => this.onTransitionEnd()}
>
<Page exact path="/" name="home" />
<Page exact path="/about" name="about" />
<Page exact path="/contact" name="contact" />
<Page exact path="/projects" name="projects" />
<Page exact path="/legal/privacy" name="privacy" />
<Page exact path="/blog" name="blog" />
<Page exact path="/blog/article/:handle" name="article" />
<Page path="/" name="404" />
</AnimatedSwitch>
</div>
<Footer className="c-layout__footer" />
</div>
</>
</Router>
)
}
}
export const Layout = LayoutComponent;

36
src/public/components/layout/layout/styles.scss Normal file
View File

@ -0,0 +1,36 @@
@import './../../../styles/global';
$c-layout--menu-width: 275px;
.c-layout {
height: 100%;
//Set position relative and a z-index to allow the layout to draw over the
//background
position: relative;
z-index: $s-z--layout;
&__header,&__footer { width: 100%; }
&__view { position: relative; }
@include t-media-query($s-xsmall-up) {
display: flex;
flex-direction: column;
&__view {
position: relative;
flex: 1;
overflow: hidden;
}
&__header {
position: absolute;
top: 0;
left: 0;
}
}
//Entering transition
&.is-not-ready { opacity: 0; }
}