Merge pull request #37 from CameraKit/develop

Release v3.1.0

.dockerignore

@@ -41,3 +41,4 @@ jspm_packages
 
 # Distribution
 dist
+build

Dockerfile

@@ -1,19 +1,32 @@
-FROM node:alpine
+# Use a Node.js image and assign it as our build
+FROM mhart/alpine-node:10 as build
 
-# Create app directory
-RUN mkdir -p /usr/src/app
-WORKDIR /usr/src/app
-
-# Install app dependencies
-COPY package.json /usr/src/app/
+# Set the working directory, copy dependency management files to the working directory,
+# and install the dependencies
+WORKDIR /usr/src
+COPY package.json yarn.lock ./
 RUN yarn install
 
-# Bundle app source
-COPY . /usr/src/app
-RUN yarn run build
+# Copy all files to the working directly, build the application
+# and purge the development dependencies
+COPY . .
+RUN yarn build && yarn --production
+
+# Create a new image using a minimal Node.js image
+# with no extra tools packaged in, such as Yarn or npm for the smallest final size
+FROM mhart/alpine-node:base-10
+
+# Set the working directory for the new image and
+# set the `NODE_ENV` environment variable value to `production`
+# along with setting the path for node_modules to be accessible
+WORKDIR /usr/src
+ENV NODE_ENV="production"
+ENV PATH="./node_modules/.bin:$PATH"
+
+# Copy files from the base image over to our new image's working directory
+COPY --from=build /usr/src .
 
-# Set the default host/port
-ENV HOST 0.0.0.0
-ENV PORT 8080
+EXPOSE 3000
 
-CMD [ "yarn", "start" ]
+# Start the server for Next.js using Node.js
+CMD ["next", "start"]

components/public/subscribe/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import MailchimpSubscribe from 'react-mailchimp-subscribe';
+import { Transition } from 'react-spring';
+
 import styles from './subscribe.scss';
 
 import global from '../../../styles/styles.global.scss';
@@ -12,33 +14,48 @@ class Subscribe extends React.Component {
       <MailchimpSubscribe
         url={url}
         render={({ subscribe, status, message }) => (
-          <div className={styles.subscribe}>
-            <h2 className={global['heading--small']}>
-              {'Stay Up To Date'}
-            </h2>
-            <p className={styles.paragraph}>
-              {'We sometimes send out important updates concerning CameraKit. Provide your email if you are interested in receiving emails from us.'}
-            </p>
-            <form
-              className={styles.form}
-              onSubmit={event => {
-                event.preventDefault();
-                subscribe({ EMAIL: this.email.value });
-              }}
-            >
-              <div className={styles.inputWrapper}>
-                <input ref={input => { this.email = input; }} name="email" className={styles.input} type="email" required />
-                <button className={styles.submit} type="submit">
-                  {status === 'sending' ? 'Sending...' : 'Subscribe'}
-                </button>
+          <Transition
+            from={{ opacity: 0, height: 0 }}
+            enter={{ opacity: 1, height: 220 }}
+            leave={{ opacity: 0, height: 0 }}>
+
+            {status === 'error' || status === 'success'
+              ? s => <div style={s}>
+                <div className={styles.message}>
+                  <h3 className={styles.messageText}>
+                    {status === 'error' 
+                      ? 'Sorry, there was a problem subscribing to this list.'
+                      : 'Thanks for subscribing!'}
+                  </h3>
+                </div>
               </div>
-              {(status === 'error' || status === 'success') && (
-                <p className={styles.message}>
-                  {message}
-                </p>
-              )}
-            </form>
-          </div>
+
+              : s => <div style={s}>
+                <div className={styles.subscribe}>
+                  <h2 className={global['heading--small']}>
+                    {'Stay Up To Date'}
+                  </h2>
+                  <p className={styles.paragraph}>
+                    {'We sometimes send out important updates concerning CameraKit. Provide your email if you are interested in receiving emails from us.'}
+                  </p>
+                  <form
+                    className={styles.form}
+                    onSubmit={event => {
+                      event.preventDefault();
+                      subscribe({ EMAIL: this.email.value });
+                    }}
+                  >
+                    <div className={styles.inputWrapper}>
+                      <input ref={input => { this.email = input; }} name="email" className={styles.input} type="email" required />
+                      <button className={styles.submit} type="submit">
+                        {status === 'sending' ? 'Sending...' : 'Subscribe'}
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>              
+            }
+          </Transition>
         )}
       />
     );

components/public/subscribe/subscribe.scss

@@ -50,7 +50,16 @@
 }
 
 .message {
-	margin-top: 0.5rem;
-	font-weight: 500;
+	margin: 0 auto 5rem;
+	max-width: 30rem;
+	text-align: center;
+	transition: 0.5s;
+  opacity: 1;
+	visibility: visible; 
+}
+
+.messageText {
+	min-width: 30rem;
+	min-height: 3rem;
 	color: $primary;
 }

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "scratch",
-  "version": "1.0.0",
-  "description": "",
+  "name": "CameraKit-Website",
+  "version": "3.0.1",
+  "description": "Primary website for CameraKit",
   "main": "index.js",
   "scripts": {
     "build": "next build",
@@ -37,6 +37,7 @@
     "react-helmet": "^5.2.0",
     "react-mailchimp-subscribe": "^2.0.2",
     "react-router-dom": "^4.3.1",
+    "react-spring": "^5.8.0",
     "rss-to-json": "^1.0.4"
   },
   "devDependencies": {

yarn.lock

@@ -552,6 +552,12 @@
     core-js "^2.5.3"
     regenerator-runtime "^0.11.1"
 
+"@babel/runtime@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/[email protected]":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
@@ -5824,6 +5830,12 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-spring@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-5.8.0.tgz#52d8206487692b99c223377c252acea645d77307"
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 react@^16.4.2:
   version "16.4.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
@@ -5941,6 +5953,10 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"