(Unfinished) Testing build process

.gitignore

@@ -61,7 +61,6 @@ typings/
 dist/
 /package-lock.json
 /dist
-src/private/data
-/nbproject/private/
-public/
+src/private/dist
+src/public/public/*
 .cache

.travis.yml

@@ -0,0 +1,29 @@
+language: generic
+  
+cache:
+  yarn: true
+  directories:
+  - node_modules
+
+matrix:
+  include:
+    - env: PROJECT=src/private/
+      node_js: "10.16.3"
+
+install:
+  - cd $PROJECT
+  - yarn global add serverless
+  - yarn install
+
+script:
+  - cd $PROJECT
+  - yarn test
+  - yarn build  
+
+deploy:
+  provider: script
+  script:
+    - yarn deploy
+  skip_cleanup: true
+#on:
+# branch: master

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2012-2020 Dominic Masters
-
-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.

README.md

@@ -1,25 +0,0 @@
-
-<p align="center"><font size="36" face=" ms pgothic,courier new,lucida consolas,monospace">domsPlace(); </font></p>
-
-My personal website, written in Javascript, HTML, CSS using Node, React, SCSS, Webpack and Babel.
-
-Yet another redesign after many, the site is permanently stuck in limbo as I don't have as much time to work on it as I would like.
-
-## Roadmap
-Plans to add are:
-
- - ~~Favicon~~
- - Short Blog Page
- - Featured Video (Code is ready, video needs to be made)
- - More Social integration and show off my social pages
- - Faster loading (SVG Backgrounds are quite large)
- - ~~Responsive Image Loading~~
- - ~~Async Image/Video loading for content (no point just yet)~~
- - ~~Async page offsetting,~~ as well as proper loading templates
- - Improved SEO
- - Reduce Divitis
- - Restore previously removed page transitions
- - ~~Convert some of the SVGs into responsive PNGs~~ Unsure if I'll stick with this permanently
- - Work on Async Sections
- - Proper Server
- - Adjust the order import order so to help CSS Overrides.

serverless.yml

@@ -0,0 +1,53 @@
+org: yourwishes
+service: domsplace
+
+frameworkVersion: ">=1.26.0"
+
+package:
+  excludeDevDependencies: false
+  individually: true
+  include:
+    - backend/dist/**
+
+provider:
+  name: aws
+  runtime: nodejs10.x
+  stage: ${opt:stage, "prod"}
+  region: ap-southeast-2
+  memorySize: 512
+  deploymentBucket:
+    name: domsplace-${self:provider.stage}-${self:provider.region}-private
+  environment:
+    EMAIL_HOST: ${self:custom.variables.email.host}
+    EMAIL_PORT: ${self:custom.variables.email.port}
+    EMAIL_USER: ${self:custom.variables.email.user}
+    EMAIL_PASS: ${self:custom.variables.email.pass}
+    EMAIL_DEST: ${self:custom.variables.email.dest}
+
+functions:
+  ping:
+    handler: backend/dist/index.ping
+    events:
+      - http: ANY ping
+  sendMail:
+    handler: backend/dist/functions/mail/send.sendMail
+    events:
+      - http: ANY mail/send
+
+plugins:
+  - serverless-plugin-include-dependencies
+  - serverless-offline
+  - serverless-finch
+
+custom:
+  ssm: '/aws/reference/secretsmanager/prod.domsPlace.'
+  client:
+    bucketName: domsplace-${self:provider.stage}-${self:provider.region}-public
+    distributionFolder: frontned/public/
+    indexDocument: index.html
+    errorDocument: index.html
+  serverless-offline:
+    disableCookieValidation: true
+    port: 3001
+  variables:
+    email: ${ssm:${self:custom.ssm}email~true}

src/private/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  "roots": [
+    "<rootDir>/src"
+  ],
+  "transform": {
+    "^.+\\.ts?$": "ts-jest"
+  },
+  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.ts?$",
+  "moduleFileExtensions": [
+    "ts",
+    "js",
+    "json"
+  ]
+}

src/private/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "domsplace-backend",
+  "version": "7.0.0",
+  "description": "Personal website for Dominic \"YouWish\" Masters.",
+  "main": "./dist/private/",
+  "scripts": {
+    "build": "tsc -p .",
+    "start:prod": "cross-env NODE_ENV=production \"serverless offline\"",
+    "start:dev": "cross-env NODE_ENV=development \"serverless offline --port 3001\"",
+    "start": "npm run start:prod",
+    "watch": "npm run start:dev",
+    "deploy": "echo \"Building private\""
+    "test": "yarn jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YourWishes/domsPlace.git"
+  },
+  "keywords": [
+    "domsplace",
+    "personal",
+    "portfolio",
+    "website"
+  ],
+  "author": "Dominic Masters",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/YourWishes/domsPlace/issues"
+  },
+  "homepage": "https://github.com/YourWishes/domsPlace#readme",
+  "dependencies": {
+    "email-validator": "^2.0.4",
+    "nodemailer": "^6.3.0",
+    "serverless-plugin-include-dependencies": "^3.2.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.1",
+    "@types/nodemailer": "^6.2.1",
+    "cross-env": "^5.2.0",
+    "escape-html": "^1.0.3",
+    "jest": "^24.9.0",
+    "serverless": "^1.51.0",
+    "serverless-finch": "^2.4.3",
+    "serverless-offline": "^5.11.0",
+    "ts-jest": "^24.1.0",
+    "ts-node": "^8.3.0",
+    "typescript": "^3.5.3",
+    "utility-types": "^3.7.0"
+  }
+}

src/private/src/functions/mail/__tests__/send.test.ts

@@ -0,0 +1,8 @@
+import { sendMail } from './../send';
+
+describe('sendMail', () => {
+  it('should require a body', async () => {
+    await expect(sendMail({ body: null })).resolves.toHaveProperty('statusCode', 400);
+  });
+
+})

src/private/src/functions/mail/send.ts

@@ -0,0 +1,59 @@
+import { withHandler } from "../../handler/handler";
+import { validate } from 'email-validator';
+import { createTransport } from 'nodemailer';
+import * as escapeHTML from 'escape-html';
+
+export interface sendMailParams {
+  name:string;
+  email:string;
+  message:string;
+}
+
+export const sendMail = withHandler<sendMailParams>(async (e,c) => {
+  //Required
+  if(!e || !e.body) return { statusCode: 400, body: 'Missing Contact Details' };
+
+  let { name, email, message } = e.body;
+
+  if(!name) return { statusCode: 400, body: 'Missing Contact Name' };
+  if(!email) return { statusCode: 400, body: 'Missing Contact Email' };
+  if(!message) return { statusCode: 400, body: 'Missing Contact Message' };
+
+
+  //Validate
+  if(name.length > 128 || !name.replace(/\s/g, '').length) return { statusCode: 400, body: 'Invalid Name' };
+  if(!validate(email)) return { statusCode: 400, body: 'Invalid Email' };
+  if(message.length > 10000 || !message.replace(/\s/g,'').length) {
+    return { statusCode: 400, body: 'Invalid Messatge' };
+  }
+
+  //Prepare mail
+  let {
+    EMAIL_HOST, EMAIL_PORT, EMAIL_USER, EMAIL_PASS, EMAIL_DEST, EMAIL_FROM
+  } = process.env
+
+  let transporter = createTransport({
+    host: EMAIL_HOST,
+    port: parseInt(EMAIL_PORT),
+    secure: true,
+    auth: {
+      user: EMAIL_USER, pass: EMAIL_PASS
+    }
+  });
+
+  let x = await transporter.sendMail({
+    from: `${name} <${email}>`,
+    to: EMAIL_DEST,
+    subject: 'Contact Message Received',
+    text: `Contact Message Received:\n${message}\nFrom: ${name} ${email}`,
+    html: `
+      <h1>Contact Message Received</h1>
+      <p>You have received a contact message from ${escapeHTML(name)} - ${escapeHTML(email)} who wrote:</p>
+      <p>
+        ${escapeHTML(message)}
+      </p>
+      <span>Time: ${new Date().toLocaleString()}
+    `
+  });
+  return { statusCode: 200, body: true }
+});

src/private/src/functions/ping/__tests__/ping.test.ts

@@ -0,0 +1,7 @@
+import { ping } from './../ping';
+
+describe('ping', () => {
+  it('shold return a hello world and a 200 code', async () => {
+    await expect(ping()).resolves.toStrictEqual({ statusCode: 200, body: 'Thank funk!' });
+  })
+})

src/private/src/functions/ping/ping.ts

@@ -0,0 +1,5 @@
+import { withHandler } from "../../handler/handler";
+
+export const ping = withHandler(async () => {
+  return { statusCode: 200, body: 'Thank funk!' };
+});

src/private/src/handler/__tests__/handler.test.ts

@@ -0,0 +1,43 @@
+import { withHandler, APICallable } from './../handler';
+
+describe('withHandler', () => {
+  it('should wrap an async function into a serverless callbackable function', () => {
+    let callbackable = jest.fn(async () => ({ body: 'Hello World', statusCode: 200 }));
+    let x = withHandler(callbackable);
+    expect(typeof x).toBe('function');
+  });
+
+  it('should call the promise and pass the result to the callback', async () => {
+    let callbackable = async () => ({ body: 'Hello World', statusCode: 200 });
+    let x = withHandler(callbackable);
+    let fn = jest.fn();
+
+    x({} as any, null, fn);
+
+    await new Promise(resolve => setImmediate(resolve));
+
+    expect(fn).toHaveBeenCalled();
+  });
+
+  it('should set the content type', async () => {
+    let x = withHandler(async () => ({ body: 'Hello World', statusCode: 200 }));
+    let fn = jest.fn();
+
+    x({} as any, null, fn);
+
+    await new Promise(resolve => setImmediate(resolve));
+
+    expect(fn).toHaveBeenCalledWith(null, { body: '"Hello World"', statusCode: 200,
+      headers: { 'Content-Type': 'application/json'}
+    });
+  });
+
+  it('should return the invoked functions returned promise', async () => {
+    let x = withHandler(async () => ({ body: 'Hello World', statusCode: 200 }));
+    let fn = jest.fn();
+    let prom = x({} as any, null, fn);
+
+    let result = await prom;
+    expect(result).toStrictEqual({ body: 'Hello World', statusCode: 200 });
+  })
+})

src/private/src/handler/handler.ts

@@ -0,0 +1,71 @@
+export type APIResponse = {
+  statusCode?:number;
+  body:any;
+  headers?:{
+    [key:string]:string,
+    "Content-Type"?:string
+  };
+}
+
+export type APICallable<T=any> = (event:APIEvent<T>, context:any) => Promise<APIResponse>;
+
+export type APIMethod = 'GET'|'POST'|'PUT'|'PATCH'|'DELETE'|'TRACE'|'OPTIONS'|'CONNECT';
+
+export interface APIEvent<T=any> {
+  body:T;
+  headers?:{[key:string]:string};
+  httpMethod?:APIMethod;
+  isOffline?:boolean;
+  multiValueHeaders?:{[key:string]:string};
+  multiValueQueryStringParameters?:{[key:string]:string};
+  path?:string;
+  pathParameters?:never;
+  queryStringParameters?:{[key:string]:string};
+  requestContext?:{[key:string]:string};
+  resource?:string;
+  stageVariables?:any;
+}
+
+export const withHandler = <T=any>(callable:APICallable<T>) => {
+  return (event?:APIEvent<T>, context?, callback?) => {
+    if(event && event.headers && event.headers['Content-Type']) {
+      let contentType = event.headers['Content-Type'];
+      if(contentType.indexOf('application/json') !== -1) {
+        try {
+          let body:T = JSON.parse(event.body as any);
+          event.body = body;
+        } catch(e) {
+          callback(null, {
+            statusCode: 400,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify('Invalid body')
+          })
+        }
+      }
+    }
+
+    return callable(event, context).then(d => {
+      if(callback) {
+        let contentType = (d.headers ? d.headers['Content-Type']:null) ||'application/json';
+        let json = contentType == 'application/json';
+
+        callback(null, {
+          ...d,
+          body: json ? JSON.stringify(d.body) : d.body,
+          statusCode: d.statusCode || 200,
+          headers: {
+            ...(d.headers||{}),
+            "Content-Type": contentType
+          }
+        });
+      }
+
+      return d;
+    }).catch(ex => {
+      if(callback) {
+        callback(null, { statusCode: 500, body: null, });
+      }
+      throw ex;
+    })
+  };
+}

src/private/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "es5",
+    "module": "commonjs",
+    "noImplicitAny": false,
+    "sourceMap": true,
+    "baseUrl": "./src/"
+  },
+  "include": [
+    "./src/**/*.ts"
+  ],
+  "exclude": ["node_modules", "**/*.test.ts"]
+}

src/public/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "domsplace",
-  "version": "7.0.0",
+  "name": "domsplace-frontend",
+  "version": "8.0.0",
   "description": "Personal website for Dominic \"YourWishes\" Masters.",
   "scripts": {
     "build": "gatsby build",
@@ -26,7 +26,6 @@
   },
   "homepage": "https://domsplace.com",
   "dependencies": {
-    "@types/react-helmet": "^5.0.15",
     "babel-plugin-styled-components": "^1.10.7",
     "gatsby": "^2.18.12",
     "gatsby-image": "^2.2.39",
@@ -51,6 +50,7 @@
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/styled-components": "^4.4.2",
+    "@types/react-helmet": "^5.0.15",
     "@types/yup": "^0.26.29"
   },
   "browserslist": [

src/public/src/api/SendMail.tsx

@@ -0,0 +1,12 @@
+export const sendMail = (name:string, email:string, message:string) => {
+  return fetch('https://api.domsplace.com/v1/mail/send', {
+    method: 'POST',
+    body: JSON.stringify({
+      name, email, message
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+    }
+  }).then(d => d.json());
+}

src/public/src/components/forms/ContactForm.tsx

@@ -5,6 +5,7 @@ import { Button, ButtonGroup } from '@objects/interactive/Button';
 import * as yup from 'yup';
 import { Panel } from '@objects/feedback/Panel';
 import { Heading2 } from '@objects/typography/Heading';
+import { sendMail } from '@api/SendMail';
 
 export interface ContactFormProps {
 
@@ -27,7 +28,13 @@ export const ContactForm = (props:ContactFormProps) => {
   const onSubmit = async (data:any) => {
     setPending(true);
 
-    await new Promise(resolve => setTimeout(resolve, 3000));
+    //await new Promise(resolve => setTimeout(resolve, 3000));
+
+    await sendMail(
+      '',
+      '',
+      ''
+    );
     
     setPending(false);
     setSuccess(true);

src/public/src/components/sections/IconGrid.tsx

@@ -111,7 +111,7 @@ export const IconGrid = ({ icons, title, ...props }:IconGridProps) => (
 
     <IconGridGrid delay="long" from="bottom">
       <IconGridInner>
-        { icons ? icons.map((icon,i) => <IconGridIcon index={i} {...icon} />) : null }
+        { icons ? icons.map((icon,i) => <IconGridIcon key={i} index={i} {...icon} />) : null }
       </IconGridInner>
     </IconGridGrid>
   </IconGridWrapper>

src/public/src/components/sections/StackedMosaic.tsx

@@ -83,7 +83,7 @@ export type StackedMosaicProps = BoundaryProps & {
 export const StackedMosaic = ({ title, body, images, ...p }:StackedMosaicProps) => (
   <StackedMosaicWrapper {...p}>
     <StackedMosaicGrid>
-      {images.map((e,i) => <StackedMosaicTile {...e} index={i+1} />)}
+      {images.map((e,i) => <StackedMosaicTile key={i} {...e} index={i+1} />)}
     </StackedMosaicGrid>
     
     

src/public/tsconfig.json

@@ -20,6 +20,7 @@
     "moduleResolution": "node",
     "baseUrl": "src",
     "paths": {
+      "@api/*": [ "api/*" ],
       "@components/*": [ "components/*" ],
       "@objects/*": [ "objects/*" ],
       "@settings/*": [ "settings/*" ],