diff --git a/.env.production b/.env.production index 4a2f14e..9f03ecf 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1,2 @@ -NETLIFY_FUNCTIONS_URL=https://kentcdodds.com/.netlify/functions -ROOT_URL=https://kentcdodds.com +NETLIFY_FUNCTIONS_URL=https://macieksitkowski.com/.netlify/functions +ROOT_URL=https://macieksitkowski.com diff --git a/.gitignore b/.gitignore index ef0da19..f68761a 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,8 @@ coverage # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release +.netlify + # Dependency directory # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git node_modules diff --git a/.nvmrc b/.nvmrc index 8351c19..48082f7 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14 +12 diff --git a/config/theme.js b/config/theme.js index da0ee6b..e5fe86d 100644 --- a/config/theme.js +++ b/config/theme.js @@ -18,9 +18,12 @@ const colors = { red: '#E75248', green: '#17A974', blue: '#327CDC', + navy_dark: '#0F1B35', yellow: '#FFB700', purple: '#8242F6', purple_dark: '#231c42', + background_light: '#5e31dc', + background_dark: '#1e243a', } const theme = { diff --git a/netlify/functions/contact.js b/netlify/functions/contact.js index 72154d5..fcfc88d 100644 --- a/netlify/functions/contact.js +++ b/netlify/functions/contact.js @@ -1,25 +1,7 @@ -const {URL} = require('url') const nodemailer = require('nodemailer') -const ow = require('ow') -const unified = require('unified') -const markdown = require('remark-parse') -const remark2rehype = require('remark-rehype') -const doc = require('rehype-document') -const format = require('rehype-format') -const html = require('rehype-stringify') +const ow = require('ow').default const {username} = require('os').userInfo() -function markdownToHtml(markdownString) { - return unified() - .use(markdown) - .use(remark2rehype) - .use(doc) - .use(format) - .use(html) - .process(markdownString) - .then(x => x.contents) -} - const isEmail = ow.string.is(e => /^.+@.+\..+$/.test(e)) function owWithMessage(val, message, validator) { @@ -42,7 +24,7 @@ owWithMessage( ) const transporter = nodemailer.createTransport({ - host: 'smtp.mailgun.org', + host: 'smtp.eu.mailgun.org', port: 587, secure: false, auth: { @@ -55,15 +37,18 @@ const headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Content-Type', } + async function handler(event) { + // Logger const runId = Date.now().toString().slice(-5) // eslint-disable-next-line no-console const log = (...args) => console.log(runId, ...args) + // CORS const origin = new URL(event.headers.origin) const acceptable = - (origin.hostname === 'localhost' && username === 'kentcdodds') || - origin.hostname === 'kentcdodds.com' + (origin.hostname === 'localhost' && username === 'sitek') || + origin.hostname === 'macieksitkowski.com' if (!acceptable) { return { @@ -79,35 +64,25 @@ async function handler(event) { headers, } } - const {name, email, subject, body, ...otherData} = JSON.parse(event.body) + const {email, message, ...otherData} = JSON.parse(event.body) + + // Validating try { - log('> Validating input', ' name: ', name, ' email:', email) - owWithMessage(name, 'The name is required.', ow.string.minLength(1)) - owWithMessage(name, 'The name is too long.', ow.string.maxLength(60)) + log('> Validating input', ' email: ', email, ' message:', message) owWithMessage( email, 'The email is invalid. Please enter a valid email address.', isEmail, ) owWithMessage( - subject, - 'The subject is too short. Please be more specific.', - ow.string.minLength(5), - ) - owWithMessage( - subject, - 'The subject is too long. Please shorten it.', - ow.string.maxLength(120), - ) - owWithMessage( - body, - 'The email body is too short. Give me more details please.', + message, + 'The message is too short. Please, give more details.', ow.string.minLength(40), ) owWithMessage( - body, - 'The email body is too long. Be more succinct please.', + message, + 'The message is too long. Please, be more succinct.', ow.string.maxLength(1001), ) } catch (e) { @@ -121,24 +96,23 @@ async function handler(event) { const otherDataString = JSON.stringify(otherData, null, 2) - const text = `${body}\n\n---\n\nOther form data:\n\`\`\`\n${otherDataString}\n\`\`\`\n` - const sender = `"${name}" <${email}>` + const text = `${message}\n\n---\n\nOther form data:\n\`\`\`\n${otherDataString}\n\`\`\`\n` + const sender = email - const message = { + const mail = { from: sender, - to: `"Kent C. Dodds" `, - subject, + to: `"Maciek Sitkowski" `, + subject: `Email from ${sender}`, text, - html: await markdownToHtml(text), } try { log('> Sending...') await transporter.verify() - await transporter.sendMail(message) + await transporter.sendMail(mail) log('> Send success!') } catch (error) { - log('> Send failure!', error.message) + log('> Send failure!', error, error.message) return { statusCode: 500, body: JSON.stringify({message: error.message}), diff --git a/package.json b/package.json index 195f162..4563556 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "http-proxy-middleware": "^1.0.6", "lodash": "^4.17.20", "match-sorter": "^6.0.2", - "nodemailer": "^6.4.16", - "ow": "^0.20.0", + "nodemailer": "^6.4.17", + "ow": "^0.21.0", "polished": "^4.0.5", "prism-react-renderer": "^1.1.1", "prism-themes": "^1.5.0", diff --git a/src/components/big-hero.js b/src/components/big-hero.js index feba294..6c3e09e 100644 --- a/src/components/big-hero.js +++ b/src/components/big-hero.js @@ -24,7 +24,11 @@ function Hero({ color: ${theme.colors.white}; } width: 100%; - background: linear-gradient(-213deg, #5e31dc 0%, #3155dc 100%); + background: linear-gradient( + -213deg, + ${theme.colors.background_light} 0%, + ${theme.colors.background_dark} 100% + ); z-index: 0; position: relative; align-items: center; diff --git a/src/components/confirm-message/illustrations.js b/src/components/confirm-message/illustrations.js deleted file mode 100644 index e3074d6..0000000 --- a/src/components/confirm-message/illustrations.js +++ /dev/null @@ -1,567 +0,0 @@ -import * as React from 'react' -import {css, keyframes} from '@emotion/react' -import {fonts} from '../../lib/typography' -import theme from '../../../config/theme' - -// PleaseConfirmIllustration -const PaperRollOut = keyframes` -from, 0% { - transform: translate(10px, 80px); -} -to, 100% { - transform: translate(10px, 0); - -} -` -const ButtonRollOut = keyframes` -from, 0% { - opacity: 0; - transform: translate(0px, 80px) scale(1); - transform-origin: center center; -} -70% { - transform: scale(1); -} -90% { - transform: scale(0.95); - transform-origin: center center; -} -to, 100% { - opacity: 1; - transform: translate(0px, 0) scale(1); - transform-origin: center center; -} -` -const TextCopyRollOut = keyframes` -from, 0% { - opacity: 0; - transform: translate(0px, 80px); -} -to, 100% { - opacity: 1; - transform: translate(0px, 0); -} -` -const TextCopyWidth1 = keyframes` -from, 0% { - width: 0; -} -to, 100% { - width: 25; -} -` -const TextCopyWidth2 = keyframes` -from, 0% { - width: 0; -} -to, 100% { - width: 47; -} -` -const NotificationFadeIn = keyframes` -0% { - opacity: 0; - r: 0; -} -50% { - opacity: 0; - r: 0; -} -100% { - opacity: 1; - r: 9.5; - -} -` -// SVG -export const PleaseConfirmIllustration = ( -
- - - - - - - - - - - - - - - - 1 - - - - - - - - - - - - - - - -
-) - -// ThankYouIllustration -const SlopeRollOut = keyframes` -from, 0% { -//transform: translate(0, 115px) rotate(90deg); -transform: translate(0, 115px); -} -to, 100% { - //transform: translate(0, 0) rotate(0); - transform: translate(0, 0); -} -` -const SheetGrow = keyframes` -from, 0% { -transform: scale(0, 1) rotate(-20deg) skew(30deg); -} -to, 100% { - transform: scale(1, 1) rotate(0) skew(0); -} -` -const TextFadeIn = keyframes` -from, 0% { - opacity: 0; - //transform: rotate(-20deg); -} -5% { - opacity: 0; - //transform: rotate(-20deg); -} -to, 100% { - opacity: 1; - //transform: rotate(0); -} -` -const GrassGrow = keyframes` -from, 0% { - -transform: translate(-35px, 20px); -} -40% { - transform: translate(-35px, 20px); -} -to, 100% { - - transform: translate(-35px, 0); -} -` -const SlopeGrow = keyframes` -from, 0% { -transform: translate(0, 80px); -} -to, 100% { - transform: translate(0, 0); -} -` -// SVG -export const ThankYouIllustration = ( -
- - - - - - - - - - - - - - - - - - - - - WELCOME - - - - - - -
-) - -// UnsubscribeIllustration -const MailSlide = keyframes` -from, 0% { - opacity: 0; - transform: translate(18px, 20px); -} -20% { - opacity: 1; - -} -to, 100% { - opacity: 1; - transform: translate(18px, 75px); -} -` -const PiecesSlide = keyframes` -from, 0% { - transform: scale(1, 0); - opacity: 0; -} -20% { - transform: scale(1, 0); - opacity: 1; -} -85% { - opacity: 1; - transform: scale(1, 1); -} -to, 100% { - transform: scale(1,1) translate(0, 50px); - opacity: 1; -} -` -const LightBlink = keyframes` -from, 20% { -opacity: 0.4; -} -80% { - fill: white; - opacity: 1; -} -to, 100% { - opacity: 0.4; -} -` -const ShadowOpacity = keyframes` -from, 0% { - opacity: 0; -} -80% { - opacity: 1; -} -to, 100% { - opacity: 0; -} -` -const LoadShredder = keyframes` -from, 0% { - transform: scale(0, 1) translate(0, 67px); -} -to, 100% { - transform: scale(1, 1) translate(0, 67px); -} -` -// SVG -export const UnsubscribeIllustration = ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-) diff --git a/src/components/footer.js b/src/components/footer.js index 0754fe4..8b6afd7 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -3,7 +3,7 @@ import {css} from '@emotion/react' import theme from '../../config/theme' import Link from 'components/link' import {bpMaxSM} from 'lib/breakpoints' -import SubscribeForm from './forms/subscribe' +import ContactForm from './forms/contact' import {GitHub, YouTube, FreeCodeCamp} from './social' import Container from './container' @@ -11,7 +11,7 @@ import particlesOptions from 'lib/particles.json' import Particles from 'react-tsparticles' import {fonts} from 'lib/typography' -const Footer = ({subscribeForm = , maxWidth}) => ( +const Footer = ({contactForm = , maxWidth}) => (