Merge pull request #55 from CameraKit/develop

Release v4.0.0

.flowconfig

@@ -0,0 +1,8 @@
+[ignore]
+.*/node_modules/*
+
+[include]
+
+[libs]
+
+[options]

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.exclude": {
+    "node_modules": true
+  }
+}

README.md

@@ -4,31 +4,10 @@
     </a>
 </p>
 
-<p align="center">
-    <a href="https://play.google.com/store/apps/details?id=com.camerakit.demo&hl=en" target="_blank">
-        <img alt='CameraKit Header' height="42px" src='.repo/gh-readme-app.svg'/>
-    </a>
-    <a href="https://buddy.works/" target="_blank">
-        <img alt='Buddy.Works' height="42px" src='https://assets.buddy.works/automated-dark.svg'/>
-    </a>
-</p>
-
-<p align="center">
-    <a href="https://join-slack.camerakit.website"><img src="https://join-slack.camerakit.website/badge.svg" alt="Join Slack"></a>
-    <a href="https://codeclimate.com/github/wonderkiln/CameraKit-Android"><img src="https://codeclimate.com/github/wonderkiln/CameraKit-Android/badges/coverage.svg" alt="Code Climate"></a>
-    <a href="https://codeclimate.com/github/wonderkiln/CameraKit-Android"><img src="https://codeclimate.com/github/wonderkiln/CameraKit-Android/badges/issue_count.svg" alt="Code Climate"></a>
-</p>
-
 # What is CameraKit?
 
 CameraKit takes one of the hardest Android APIs and makes it into a high level and easy to use library that solves all of your problems. This is the repository for the CameraKit Project's Website. We ue this as our central open-source website which anyone can contribute to, log bugs for, and help improve.
 
-
-## Sponsors
-
-<a href="https://www.expensify.com/"><img src=".repo/gh-readme-expensify.png"></a>
-<a href="https://www.buddy.works/"><img src=".repo/gh-readme-buddyworks.png"></a>
-
 ## Run Development Environment
 
 1. `yarn install`

components/background-slider.js

@@ -0,0 +1,35 @@
+
+export default ({ duration, children }) => (
+  <div className="slider-container">
+    <style jsx>
+      {`
+        .slider-container {
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .slider-content-wrapper {
+          display: inline-block;
+          white-space: nowrap;
+          overflow: hidden;
+          animation: slide ${duration * 2 || 10}s linear infinite;
+        }
+        .slider-content-wrapper > div {
+          display: inline-block;
+        }
+        @keyframes slide {
+          from {
+            transform: translate3d(0, 0, 0);
+          }
+          to {
+            transform: translate3d(-33.33%, 0, 0);
+          }
+        }
+      `}
+    </style>
+    <div className="slider-content-wrapper">
+      <div>{children}</div>
+      <div>{children}</div>
+      <div>{children}</div>
+    </div>
+  </div>
+);

components/blog.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import styles from '../styles/blog.scss';
+
+class BlogItem extends React.Component {
+  state = {
+    expanded: false,
+  };
+
+  render() {
+    const { item } = this.props;
+    const { expanded } = this.state;
+
+    const contentClass = expanded
+      ? styles.blog__item__expanded__content
+      : styles.blog__item__content;
+
+    return (
+      <div className={styles.blog__item}>
+        <div className={styles.blog__item__wrapper}>
+          <h2 className={styles.blog__item__title}>{item.title}</h2>
+          <p>{new Date(item.created).toDateString()}</p>
+          <div className={contentClass} dangerouslySetInnerHTML={{ __html: item.content }} />
+          {expanded
+            ? (
+              <a
+                href="javascript:void(0);"
+                className={styles.blog__item__read}
+                onClick={() => this.setState({ expanded: false })}
+              >
+                Show less
+              </a>
+            )
+            : (
+              <a
+                href="javascript:void(0);"
+                className={styles.blog__item__read}
+                onClick={() => this.setState({ expanded: true })}
+              >
+                Show more
+              </a>
+            )
+        }
+        </div>
+      </div>
+    );
+  }
+}
+
+const Blog = ({ feed }) => (
+  <div className={styles.blog}>
+    {feed && feed.length > 0 && feed.map(item => (
+      <BlogItem key={item.link} item={item} />
+    ))}
+  </div>
+);
+
+export default Blog;

components/button.js

@@ -0,0 +1,83 @@
+import Link from 'next/link';
+import classNames from 'classnames';
+
+import withPure from './hoc/pure';
+
+export default withPure(
+  ({ children, invert, callout, href, as, className, prefetch, ...props }) => {
+    const a = (
+      <a
+        className={classNames(className, 'fw4 no-drag', { invert, callout })}
+        role="button"
+        {...props}
+      >
+        {children}
+        <style jsx>
+          {`
+            a {
+              display: inline-block;
+              cursor: pointer;
+              text-decoration: none;
+              padding: 0.25rem 0.5rem;
+              margin: -0.25rem -0.5rem;
+              border-radius: 7px;
+              color: #0076ff;
+              transition: background 0.2s ease, color 0.2s ease,
+              box-shadow 0.2s ease;
+            }
+            a:hover {
+              color: #0076ff;
+              background: rgba(0, 118, 255, 0.1);
+            }
+            a.callout {
+              color: white;
+              font-weight: 600;
+              margin: 0;
+              padding: 0 3rem;
+              height: 3rem;
+              line-height: 3rem;
+              border-radius: 4px;
+              background: #6B60E9;
+              box-shadow: 0 0 0px 6px #6B60E92F;
+              transition: all 0.45s;
+            }
+            a.callout:hover {
+              // background: rgba(245,245,245,1);
+              // box-shadow: 0 0 0px 9px rgba(255, 255, 255, 0.15);
+            }
+            a.callout:active {
+              // color: white;
+              // background: #006ae6;
+            }
+            a.invert {
+              margin: 0;
+              padding: 0 2rem;
+              height: 2.5rem;
+              line-height: 2.5rem;
+              border-radius: 4px;
+              background: #6B60E9;
+              box-shadow: 0 4px 14px 0 #6B60E96F;
+              color: white;
+            }
+            a.invert:hover {
+              // background: rgba(0, 118, 255, 0.9);
+              box-shadow: 0 4px 10px 0 #6B60E99F;
+            }
+            a.invert:active {
+              background: #006ae6;
+            }
+          `}
+        </style>
+      </a>
+    );
+
+    if (href) {
+      return (
+        <Link href={href} as={as} prefetch={prefetch}>
+          {a}
+        </Link>
+      );
+    }
+    return a;
+  },
+);