canary

layouts/page.js

@@ -11,7 +11,7 @@ import Row from './../components/row'
 import Logo from './../components/logo'
 
 import pkg from './../package'
-import { colors, typography } from './../theme'
+import { colors, typography, phone } from './../theme'
 
 let progress
 const stopProgress = () => {
@@ -105,6 +105,12 @@ const Page = ({ children }) => {
                 </Link>
               </li>
 
+              <li>
+                <Link prefetch href="/canary">
+                  <span className="new">canary</span>
+                </Link>
+              </li>
+
               <li>
                 <Link prefetch href="/about">
                   <span>About</span>
@@ -186,14 +192,24 @@ const Page = ({ children }) => {
           display: block;
         }
 
+        .new:after {
+          content: 'new';
+          border: 1px solid ${colors.green};
+          padding: 1px 4px;
+          margin-left: 4px;
+          color: ${colors.green};
+          font-weight: ${typography.bold};
+          font-size: ${typography.f10};
+        }
+
         a {
           color: ${colors.white};
           font-weight: ${typography.bold};
           position: relative;
         }
 
-        a:after,
-        li span:after {
+        a:before,
+        li span:before {
           content: '';
           height: 1px;
           background-color: ${colors.white};
@@ -207,8 +223,8 @@ const Page = ({ children }) => {
           transition: all 200ms;
         }
 
-        a:hover:after,
-        li span:hover:after {
+        a:hover:before,
+        li span:hover:before {
           opacity: 1;
           transform: scale(1, 1);
         }
@@ -250,10 +266,15 @@ const Page = ({ children }) => {
           cursor: pointer;
           position: relative;
           display: inline-block;
-
           font-size: ${typography.f12};
           transition: all 200ms;
         }
+
+        @media ${phone} {
+          li {
+            line-height: 1.75rem;
+          }
+        }
       `}</style>
 
       <style jsx global>

package.json

@@ -1,18 +1,13 @@
 {
   "name": "secret",
   "version": "0.1.0",
-  "description": "send a message through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.",
+  "description":
+    "send a message through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.",
   "main": "index.js",
   "repository": "bukinoshita/secret.git",
   "author": "Bu Kinoshita <[email protected]>",
   "license": "MIT",
-  "keywords": [
-    "secret",
-    "getsecret",
-    "safe",
-    "private",
-    "encrypted"
-  ],
+  "keywords": ["secret", "getsecret", "safe", "private", "encrypted"],
   "scripts": {
     "start": "NODE_ENV=production node server",
     "dev": "node server",
@@ -24,6 +19,7 @@
     "axios": "^0.17.1",
     "babel-plugin-inline-dotenv": "^1.1.1",
     "babel-plugin-transform-inline-environment-variables": "^0.2.0",
+    "base64-arraybuffer": "^0.1.5",
     "copy-text-to-clipboard": "^1.0.3",
     "next": "^4.2.0-canary.1",
     "nprogress": "^0.2.0",
@@ -40,42 +36,27 @@
     "xo": "^0.18.2"
   },
   "babel": {
-    "presets": [
-      "next/babel"
-    ],
+    "presets": ["next/babel"],
     "env": {
       "development": {
-        "plugins": [
-          "inline-dotenv"
-        ]
+        "plugins": ["inline-dotenv"]
       },
       "production": {
-        "plugins": [
-          "transform-inline-environment-variables"
-        ]
+        "plugins": ["transform-inline-environment-variables"]
       }
     }
   },
   "xo": {
-    "extends": [
-      "prettier",
-      "prettier/react",
-      "plugin:react/recommended"
-    ],
+    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
     "rules": {
       "import/no-extraneous-dependencies": 0,
       "import/no-unresolved": 0,
       "react/no-unescaped-entities": 0,
       "react/prop-types": 0,
       "react/display-name": 0
     },
-    "ignores": [
-      "node_modules",
-      "static/*.js"
-    ],
-    "globals": [
-      "document"
-    ]
+    "ignores": ["node_modules", "static/*.js"],
+    "globals": ["document", "TextEncoder", "TextDecoder", "crypto"]
   },
   "lint-staged": {
     "*.js": [

pages/about.js

@@ -26,11 +26,40 @@ class About extends Component {
             person sees it it will automatically delete the secret forever.
           </p>
 
+          <h2 id="canary">Canary</h2>
+
+          <p>
+            When you use `secret`, we receive an encrypted copy of the secret.
+            `secret` does not have the ability to access the content of your
+            encrypted secret, and only keeps it untill somebody opens it.
+          </p>
+
+          <p>
+            `secret` uses WebCrypto API with the AES-GCM algorithm to encrypt
+            and decrypt the secret in the browser, meaning the secret that's
+            transferred to `secret`'s server is already encrypted and its
+            contents can't be viewed by us.
+          </p>
+
+          <p>
+            Anyone you provide with the unique link (including the encryption
+            key) to your encrypted secret will be able to open and access that
+            secret. You should not provide the link to anyone you do not want to
+            have access to your encrypted secret.
+          </p>
+
+          <p>
+            * Make sure you are using a modern browser that{' '}
+            <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API#Browser_compatibility">
+              supports WebCrypto API
+            </a>.
+          </p>
+
           <h2>Links</h2>
 
           <p>
             Check us on{' '}
-            <a href="https://www.producthunt.com/posts/secret-2">
+            <a href="https://www.producthunt.com/posts/secret-3">
               Product Hunt
             </a>{' '}
             and <a href="https://github.com/bukinoshita/secret">GitHub</a>.