@joystick.js/cli-canary 0.0.0-canary.165 → 0.0.0-canary.1650

package/.build/getFilesToBuild.js

@@ -26,7 +26,7 @@ export default () => {
   const filteredFiles = files.filter((path) => {
     return (
       !fs.lstatSync(path).isDirectory() &&
-      !["node_modules", "src/lib/rollup.config.js", ".DS_Store"].some(
+      !["node_modules", ".DS_Store"].some(
         (excludedPath) => {
           return path.includes(excludedPath);
         }

package/.build/index.js

@@ -3,7 +3,7 @@ import path from "path";
 import esbuild from "esbuild";
 import child_process from 'child_process';
 import getFilesToBuild from "./getFilesToBuild.js";
-import getPlatformSafePath from "../src/lib/getPlatformSafePath.js";
+import getPlatformSafePath from "./getPlatformSafePath.js";
 
 const buildFile = (fileToBuild) => {
   const [_, file] = fileToBuild.split(getPlatformSafePath("src/")); 
@@ -14,7 +14,7 @@ const buildFile = (fileToBuild) => {
       outfile: `./dist/${file}`,
       platform: "node",
       format: "esm",
-      minify: false,
+      minify: true,
       plugins: [],
     })
     .catch((error) => {
@@ -44,7 +44,7 @@ const files = filesToBuild.map((path) => {
   let target = "esm";
 
   const copyPaths = [
-    getPlatformSafePath("create/templates")
+    getPlatformSafePath("commands/create/template"),
   ];
 
   const isCopyPath = copyPaths.some((copyPath) => {

package/LICENSE.md

@@ -0,0 +1,59 @@
+## SAUCR License
+### Source Available Under Commercial Restriction
+Version 1, March 3rd, 2024
+
+## Copyright Notice
+
+Copyright © 2024 CheatCode Software LLC
+
+## Definitions
+
+"License" shall mean the terms and conditions for use, reproduction, and distribution of the source code as defined in this document.
+
+"Author" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+
+"Work" shall mean the work of authorship, whether in the form of source code, documentation, assets, or other materials, made available under the License, as indicated by a Copyright Notice that is included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in the form of source code, documentation, assets, or other materials that are based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship.
+
+## Scope
+
+This license covers any and all source code, documentation, assets, or other materials included in the source code ("software", "the software", "project", "the work", "work", "the code", "code", "source", "source code", "repo", "repository", or "git repo") accompanying this license created by the author ("author", "creator", "developer", "developers", "copyright holder", "copyright holders").
+
+This license does not cover any source code, documentation, assets, or other materials included in the source code that were not created by the author. Any source code that falls under this description is subject to its own license(s) and requirements.
+
+## Copyright & Attribution
+
+The full text of this license including the above Copyright Notice shall be included in all derivative works of the source code.
+
+The author retains full copyright, intellectual property rights, and patent rights to any and all source code, documentation, assets, or other materials included in the source code created by the author and is licensing usage of the source code, documentation, assets, or other materials included in the source code to you for the express purpose of creating any derivative work that falls within the limits imposed by the "Derivative Works Permitted" and the "Derivative Works Not Permitted" under "Agreement."
+
+## Agreement
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this source code, to use the source code in or as a part of any derivative work permitted under "Derivative Works Permitted." Copying, modifying, publishing, distributing, sub-licensing, and/or sale of the source code is permitted for any work that falls within the limits imposed by the "Derivative Works Permitted" and the "Derivative Works Not Permitted." Any usage not expressed or implied under "Derivative Works Permitted" is prohibited without written permission from the author in addition to the "Derivative Works Not Permitted."
+
+## Derivative Works Permitted
+
+Under this license, the following derivative works using the source code are permitted:
+
+Any software ("software", "app", "application", "tool", "intranet", "dashboard", "interface", "back end", "front end"), Software as a Service (SaaS) or Platform as a Service (PaaS) product or service offered either commercially or non-commercially that does not conflict with the limits of the "Derivative Works Not Permitted" stated below.
+
+## Derivative Works Not Permitted
+
+Under this license, the following derivative works using the source code are not permitted:
+
+An alternative or competing software framework ("framework", "library", "package", "packages", "fork", "forks") that originates as a fork (modified copy of the source code) or copy (either a verbatim, unmodified copy or a reproduction or re-implementation inspired by the source code) either for commercial or non-commercial purposes using either the current name or brand of the source code, Joystick, or a different name, brand, or entity.
+
+A Platform as a Service (PaaS) made available commercially or non-commercially that offers the source code itself as a service (e.g., offering a hosted version of the framework as a service).
+
+Use of the source code as the training data for any Artificial Intelligence (AI) model.
+
+## Requesting Permission for Derivative Works
+
+Permission for derivative works not listed under "Derivative Works Permitted" can be requested from the author via email at business@cheatcode.co.
+
+## Limitation of Liability
+
+THE SOURCE CODE 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 SOURCE CODE OR THE USE OR OTHER DEALINGS IN THE SOURCE CODE.

package/README.md

@@ -1,7 +1,48 @@
-<img src="https://cheatcode-assets.s3.amazonaws.com/cheatcode-logo-sm.svg" alt="CheatCode">
+## Joystick
 
-## @joystick.js/cli (Beta)
+A full-stack JavaScript framework for building apps and websites.
 
-CLI for the Joystick JavaScript framework.
+[Official Website](https://cheatcode.co/joystick) | [Documentation](https://docs.cheatcode.co/joystick)
 
-[Read the Documentation](https://github.com/cheatcode/joystick)
+### What is Joystick?
+
+Joystick is a full-stack JavaScript framework consisting of four packages:
+
+- `@joystick.js/ui` - A front-end framework for building UI components with HTML, CSS, and JavaScript.
+- `@joystick.js/node` - A batteries-included back-end framework based on Node.js, running an HTTP server based on Express.
+- `@joystick.js/test` - A testing library used for writing and instrumenting tests for your Joystick app on the front-end and back-end.
+- `@joystick.js/cli` - A command-line tool for creating Joystick apps, running their development server, and deploying them via CheatCode's [Push](https://cheatcode.co/push) service.
+
+Together, these four packages make up Joystick. When you build an app, the first two packages—`@joystick.js/ui` and `@joystick.js/node`—power the app itself, `@joystick.js/cli` helps you create, run, and deploy the app, and `@joystick.js/test` helps you write tests for the app.
+
+### What is Joystick conceptually?
+
+It's best and easiest to think of Joystick as the "Ruby on Rails" or "Django" of JavaScript. It's designed to give you everything you need in one, easy-to-use system without the need to stitch together a bunch of tools or packages. It was made for full-stack JavaScript developers who want to maximize productivity without sacrificing quality.
+
+If you'd like to learn more about the motivation to build Joystick, read about [the philosophy behind the framework](https://docs.cheatcode.co/joystick/philosophy).
+
+### Platform Support
+
+Joystick supports MacOS, Linux, and Windows and requires Node.js v20 or later.
+
+### Installation
+
+To start working with Joystick, install the `@joystick.js/cli` package on to your computer:
+
+```bash
+npm i @joystick.js/cli@latest
+```
+
+Once installed, to create an app, run:
+
+```bash
+joystick create <app_name>
+```
+
+### Documentation
+
+Joystick's documentation can be found [here](https://docs.cheatcode.co/joystick).
+
+### License
+
+Joystick is [SAUCR](https://saucr.org) licensed.

package/dist/cli.js

@@ -1,76 +1 @@
-import chalk from "chalk";
-import help from "./lib/help.js";
-import functions from "./functions/index.js";
-import getArgs from "./lib/getArgs.js";
-import getOptions from "./lib/getOptions.js";
-const functionNames = Object.keys(functions);
-const functionsCalled = process.argv.filter((arg) => functionNames.includes(arg));
-const showHelp = process.argv.some((arg) => ["-h", "--help"].includes(arg));
-if (showHelp || functionsCalled.length === 0) {
-  help();
-  process.exit(0);
-}
-if (functionsCalled.length > 1) {
-  console.log(chalk.red("Only one function can be called at a time."));
-  process.exit(0);
-}
-if (functionsCalled.includes("build")) {
-  const args = getArgs(functions.build.args);
-  const options = getOptions(functions.build.options);
-  if (functions.build.function && typeof functions.build.function === "function") {
-    functions.build.function(args, options);
-  }
-}
-if (functionsCalled.includes("create")) {
-  const args = getArgs(functions.create.args);
-  const options = getOptions(functions.create.options);
-  if (!args.name) {
-    console.log(chalk.red("Must pass a <name> for your app to joystick create. Run joystick --help for examples."));
-    process.exit(0);
-  }
-  if (functions.create.function && typeof functions.create.function === "function") {
-    functions.create.function(args, options);
-  }
-}
-if (functionsCalled.includes("logout")) {
-  const args = getArgs(functions.logout.args);
-  const options = getOptions(functions.logout.options);
-  if (functions.logout.function && typeof functions.logout.function === "function") {
-    functions.logout.function(args, options);
-  }
-}
-if (functionsCalled.includes("push")) {
-  const args = getArgs(functions.push.args);
-  const options = getOptions(functions.push.options);
-  if (functions.push.function && typeof functions.push.function === "function") {
-    functions.push.function(args, options);
-  }
-}
-if (functionsCalled.includes("start")) {
-  const args = getArgs(functions.start.args);
-  const options = getOptions(functions.start.options);
-  if (functions.start.function && typeof functions.start.function === "function") {
-    functions.start.function(args, options);
-  }
-}
-if (functionsCalled.includes("test")) {
-  const args = getArgs(functions.test.args);
-  const options = getOptions(functions.test.options);
-  if (functions.test.function && typeof functions.test.function === "function") {
-    functions.test.function(args, options);
-  }
-}
-if (functionsCalled.includes("update")) {
-  const args = getArgs(functions.update.args);
-  const options = getOptions(functions.update.options);
-  if (functions.update.function && typeof functions.update.function === "function") {
-    functions.update.function(args, options);
-  }
-}
-if (functionsCalled.includes("use")) {
-  const args = getArgs(functions.use.args);
-  const options = getOptions(functions.use.options);
-  if (functions.use.function && typeof functions.use.function === "function") {
-    functions.use.function(args, options);
-  }
-}
+import e from"chalk";import o from"./commands/index.js";import c from"./lib/parse_args.js";import a from"./lib/parse_options.js";const i=Object.keys(o),n=process.argv.filter(s=>i.includes(s)),m=process.argv.some(s=>["-h","--help"].includes(s));if((m||n.length===0)&&(o.help.command(),process.exit(0)),n.length>1&&(console.log(e.red("Only one command can be called at a time.")),process.exit(0)),n.includes("build")){const s=c(o.build.args),t=a(o.build.options);o.build.command&&o.build.command(s,t)}if(n.includes("create")){const s=c(o.create.args),t=a(o.create.options);s.name||(console.log(e.red("Must pass a <name> for your app to joystick create. Run joystick --help for examples.")),process.exit(0)),o.create.command&&o.create.command(s,t)}if(n.includes("help")){const s=c(o.help.args),t=a(o.help.options);o.help.command&&o.help.command(s,t)}if(n.includes("logout")){const s=c(o.logout.args),t=a(o.logout.options);o.logout.command&&o.logout.command(s,t)}if(n.includes("push")){const s=c(o.push.args),t=a(o.push.options);o.push.command&&o.push.command(s,t)}if(n.includes("push_v2")){const s=c(o.push_v2.args),t=a(o.push_v2.options);o.push_v2.command&&o.push_v2.command(s,t)}if(n.includes("start")){const s=c(o.start.args),t=a(o.start.options);o.start.command&&o.start.command(s,t)}if(n.includes("test")){const s=c(o.test.args),t=a(o.test.options);o.test.command&&o.test.command(s,t)}if(n.includes("update")){const s=c(o.update.args),t=a(o.update.options);o.update.command&&o.update.command(s,t)}if(n.includes("use")){const s=c(o.use.args),t=a(o.use.options);o.use.command&&o.use.command(s,t)}

package/dist/commands/build/definition.js

@@ -0,0 +1 @@
+import t from"./index.js";const[u,o,...e]=process.argv,n={description:"Build an existing Joystick app.",args:{},options:{environment:{flags:{"-e":{set:!!e.includes("-e"),value:!!e.includes("-e")&&e[e.indexOf("-e")+1],parent:"build"},"--environment":{set:!!e.includes("--environment"),value:!!e.includes("--environment")&&e[e.indexOf("--environment")+1],parent:"build"}},description:"The NODE_ENV you want to use for your build (default: production)."},outputPath:{flags:{"-o":{set:!!e.includes("-o"),value:!!e.includes("-o")&&e[e.indexOf("-o")+1],parent:"build"},"--outputPath":{set:!!e.includes("--outputPath"),value:!!e.includes("--outputPath")&&e[e.indexOf("--outputPath")+1],parent:"build"}},description:"The path you want to build the output to."},type:{flags:{"-t":{set:!!e.includes("-t"),value:!!e.includes("-t")&&e[e.indexOf("-t")+1],parent:"build"},"--type":{set:!!e.includes("--type"),value:!!e.includes("--type")&&e[e.indexOf("--type")+1],parent:"build"}},description:"The type of build you want to generate (tar or folder)."}},command:t};var d=n;export{d as default};

package/dist/commands/build/index.js

@@ -0,0 +1 @@
+import p from"../../lib/build/index.js";const r=(t={},o={})=>{p(o)};var d=r;export{d as default};

package/dist/commands/create/build_package_json.js

@@ -0,0 +1 @@
+const s=(t="")=>JSON.stringify({type:"module",name:t,version:"0.0.1",description:"",main:"index.js",scripts:{start:"joystick start",test:"joystick test"},keywords:[],author:"",license:"ISC"},null,2);var n=s;export{n as default};

package/dist/commands/create/definition.js

@@ -0,0 +1 @@
+import r from"./index.js";const[n,s,...e]=process.argv,a={description:"Create a new Joystick app.",args:{name:{set:!!e.includes("create")&&!!e[e.indexOf("create")+1],parent:"create",value:!!e.includes("create")&&e[e.indexOf("create")+1],description:"The name of the app to create."}},options:{release:{flags:{"-r":{set:!!e.includes("-r"),value:!!e.includes("-r")&&e[e.indexOf("-r")+1],parent:"create"},"--release":{set:!!e.includes("--release"),value:!!e.includes("--release")&&e[e.indexOf("--release")+1],parent:"create"}},description:"The release of Joystick to use (production or canary)."}},command:r};var c=a;export{c as default};

package/dist/commands/create/index.js

@@ -0,0 +1,2 @@
+import c from"fs";import i from"chalk";import s from"child_process";import o from"util";import n from"./build_package_json.js";import l from"../../lib/cli_log.js";import m from"../../lib/loader.js";import u from"../../lib/node_path_polyfills.js";import t from"../../lib/replace_in_files.js";const{cp:p,writeFile:d,mkdir:a}=c.promises,y=o.promisify(s.exec),$=(e="")=>d(`./${e}/package.json`,n(e)),j=async(e={},r={})=>{process.loader=new m,process.loader.print("Creating app..."),r?.release&&!["production","canary"].includes(r.release)&&(l("Must pass either production or canary for --release.",{level:"danger",docs:"https://docs.cheatcode.co/joystick/cli/create"}),process.exit(0)),await p(`${u?.__package}/commands/create/template`,`./${e.name}`,{recursive:!0}),await $(e.name),await a(`./${e?.name}/.joystick`,{recursive:!0}),await a(`./${e?.name}/fixtures`,{recursive:!0}),await a(`./${e?.name}/indexes`,{recursive:!0}),await a(`./${e?.name}/lib`,{recursive:!0}),await a(`./${e?.name}/private`,{recursive:!0}),await a(`./${e?.name}/queues`,{recursive:!0}),await a(`./${e?.name}/routes`,{recursive:!0}),await a(`./${e?.name}/uploaders`,{recursive:!0}),await a(`./${e?.name}/tests`,{recursive:!0}),await a(`./${e?.name}/websockets`,{recursive:!0}),r?.release==="canary"&&(await t(`${process.cwd()}/${e?.name}`,{match:[/\.js$/],exclude:[/node_modules/],replace_regex:/(@joystick.js\/node)(?!-)/g,replace_with:"@joystick.js/node-canary"}),await t(`${process.cwd()}/${e?.name}`,{match:[/\.js$/],exclude:[/node_modules/],replace_regex:/(@joystick.js\/ui)(?!-)/g,replace_with:"@joystick.js/ui-canary"})),setTimeout(async()=>{process.loader.print("Installing dependencies..."),await y(`cd ./${e?.name} && npm install --save @joystick.js/ui${r?.release==="canary"?"-canary":""}@latest @joystick.js/node${r?.release==="canary"?"-canary":""}@latest @joystick.js/test${r?.release==="canary"?"-canary":""}@latest`),console.log(`${i.green("Project created! To get started, run:")}
+cd ${e?.name} && joystick${r?.release==="canary"?"-canary":""} start`)},1e3)};var q=j;export{q as default};

package/dist/commands/create/template/api/index.js

@@ -0,0 +1,6 @@
+const api = {
+  getters: {},
+  setters: {},
+};
+
+export default api;

package/dist/commands/create/template/email/base.css

@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+  padding: 30px;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  background: #fff;
+  color: #222;
+  font-size: 15px;
+  line-height: 23px;
+}

package/dist/commands/create/template/email/base.html

@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>${subject}</title>
+    ${css}
+  </head>
+  <body>
+    <span class="preheader">${preheader}</span>
+    <div id="email"></div>
+  </body>
+</html>

package/dist/commands/create/template/email/reset_password.js

@@ -0,0 +1,20 @@
+import ui from '@joystick.js/ui';
+
+const ResetPassword = ui.component({
+  css: {
+    min: {
+      width: {
+        0: `
+        `,
+      },
+    },
+  },
+  render: ({ props }) => {
+    return `
+      <div>
+      </div>
+    `;
+  },
+});
+
+export default ResetPassword;

package/dist/commands/create/template/i18n/en-US.js

@@ -0,0 +1,14 @@
+const en_US = {
+  'ui/pages/index/index.js': {
+    buttons: {
+      get_started: 'Get Started',
+      view_on_github: '<span>{{stars}}</span> View on Github',
+    }
+  },
+  'ui/pages/error/index.js': {
+    page_not_found: 'Page Not Found',
+    double_check_url: 'Double-check the URL and try again.'
+  },
+};
+
+export default en_US;

package/dist/commands/create/template/index.client.js

@@ -0,0 +1 @@
+// Add analytics, metrics, etc. here.

package/dist/commands/create/template/index.css

@@ -0,0 +1,34 @@
+:root {
+  --brand: #ffcc00;
+}
+
+*,
+*:before,
+*:after {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  line-height: 1.5em;
+  background: #000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}

package/dist/{functions/create/templates → commands/create/template}/index.html

@@ -2,8 +2,8 @@
 <html class="no-js" lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Joystick</title>
-    <meta name="description" content="An awesome JavaScript app that's under development.">
+    <title>App</title>
+    <meta name="description" content="A new Joystick app.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#FFCC00">
     <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
@@ -13,7 +13,6 @@
   </head>
   <body>
     <div id="app"></div>
-    ${scripts}
     <script>
       if ("serviceWorker" in navigator) {
         navigator.serviceWorker.register("/service-worker.js");

package/dist/{functions/create/templates → commands/create/template}/index.server.js

@@ -1,19 +1,19 @@
-import node from "@joystick.js/node";
-import api from "./api";
+import joystick from "@joystick.js/node";
+import api from "./api/index.js";
 
-node.app({
+joystick.app({
   api,
   routes: {
-    "/": (req, res) => {
+    "/": (req = {}, res = {}) => {
       res.render("ui/pages/index/index.js", {
         layout: "ui/layouts/app/index.js",
       });
     },
-    "*": (req, res) => {
+    "*": (req = {}, res = {}) => {
       res.render("ui/pages/error/index.js", {
         layout: "ui/layouts/app/index.js",
         props: {
-          statusCode: 404,
+          status_code: 404,
         },
       });
     },

package/dist/{functions/create/templates → commands/create/template}/public/manifest.json

@@ -3,12 +3,12 @@
   "short_name": "app",
   "start_url": ".",
   "display": "standalone",
-  "background_color": "#fff",
-  "theme_color": "#ffcc00",
-  "description": "An awesome JavaScript app that's under development.",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "description": "A new Joystick app.",
   "icons": [{
     "src": "favicon.ico",
-    "sizes": "64x64",
+    "sizes": "32x32",
     "type": "image/x-icon"
   }, {
     "purpose": "any",

package/{src/functions/create/templates → dist/commands/create/template}/ui/components/button/index.js

@@ -1,23 +1,29 @@
-import ui from "@joystick.js/ui";
+import joystick from "@joystick.js/ui";
 
-const Button = ui.component({
+const Button = joystick.component({
   css: `
     .button {
       display: inline-block;
       background: #eee;
-      padding: 15px 20px;
+      padding: 12px 20px;
+      font-size: 15px;
+      font-weight: 400;
       border-radius: 3px;
       text-decoration: none;
       color: #333;
+      white-space: nowrap;
     }
 
     .button.brand {
       background: var(--brand);
+      border: 2px solid var(--brand);
       color: #333;
+      font-size: 15px;
+      font-weight: 500;
     }
 
     .button.github {
-      background: #333;
+      background: #111;
       color: #fff;
       padding: 0px 20px 0px 0px;
     }
@@ -25,10 +31,12 @@ const Button = ui.component({
     .button.github span {
       display: inline-block;
       margin-right: 20px;
-      font-weight: 500;
+      font-weight: 600;
       background: #000;
-      padding: 15px 20px;
+      padding: 12px 18px;
       border-radius: 3px 0px 0px 3px;
+      color: #fff;
+      border: 2px solid #111;
     }
   `,
   render: ({ props, when }) => {

package/{src/functions/create/templates → dist/commands/create/template}/ui/layouts/app/index.js

@@ -1,6 +1,6 @@
-import ui from "@joystick.js/ui";
+import joystick from "@joystick.js/ui";
 
-const App = ui.component({
+const App = joystick.component({
   render: ({ props, component }) => {
     return `
       <div>

package/dist/commands/create/template/ui/pages/error/index.js

@@ -0,0 +1,50 @@
+import joystick from "@joystick.js/ui";
+
+const Error = joystick.component({
+  css: `
+    .error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+
+    .error > header {
+      text-align: center;
+      margin: 50px 0;
+    }
+
+    h1 {
+      color: #444;
+      font-size: 64px;
+      font-weight: 400;
+      letter-spacing: 0.03em;
+    }
+
+    h4 {
+      color: #fff;
+      font-size: 20px;
+      font-weight: bold;
+      margin-top: 40px;
+    }
+
+    p {
+      font-size: 16px;
+      color: #888;
+      margin-top: 10px;
+    }
+  `,
+  render: ({ i18n, props }) => {
+    return `
+      <div class="error">
+        <header>
+          <h1>${props.status_code}</h1>
+          <h4>${i18n('page_not_found')}</h4>
+          <p>${i18n('double_check_url')}</p>
+        </header>
+      </div>
+    `;
+  },
+});
+
+export default Error;