Merge pull request #113 from blenderskool/next

Version 2.1.2 🔮

.dockerignore

@@ -3,3 +3,4 @@ app.json
 .now
 .vercel
 client/build
+api

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.16.3 AS base
+FROM node:14.16.1 AS base
 
 WORKDIR /app
 
@@ -26,7 +26,7 @@ FROM nginx:alpine
 
 # Installing node and npm
 RUN apk add --no-cache --repository http://nl.alpinelinux.org/alpine/edge/main libuv \
-    && apk add  --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/v3.9/main/ nodejs=10.19.0-r0 npm=10.19.0-r0
+    && apk add  --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/v3.9/main/ nodejs=14.16.1-r1 npm=14.16.1-r1
 
 COPY ./nginx/image-nginx.template /etc/nginx/nginx.template
 COPY --from=base /app/client/build /etc/nginx/html

README.md

@@ -14,6 +14,12 @@
     </a>
   </p>
 
+  <p align="center">
+    <img src="https://blaze.now.sh/api/badges/status" />
+    <img src="https://blaze.now.sh/api/badges/release" />
+    <img src="https://blaze.now.sh/api/badges/license" />
+  </p>
+
   <h1>Blaze - A file sharing web app ⚡</h1>
 </div>
 
@@ -50,7 +56,9 @@ Read more on [Deploying on your own server](#deploying-on-your-own-server)
   - [Backend](#backend)
   - [Frontend](#frontend)
     - [Sub-directories](#sub-directories)
-  - [Common](#common)
+  - [common](#common)
+  - [nginx](#nginx)
+  - [api](#api)
   - [Build process](#build-process)
 - [Deploying on your own server](#deploying-on-your-own-server)
   - [Using docker-compose](#using-docker-compose)
@@ -94,14 +102,17 @@ The frontend source code is in the `client` directory. The dependencies of the f
 - `scss` - theme level scss. (Note: component specific scss goes within the corresponding component directory)
 - `utils` - javascript utility functions
 
-### Common
+### common
 The `common` directory contains javascript modules that are **shared by both frontend and backend**. These include constants in `constants.js` file and utility functions in `utils` sub-directory.
 
-### Nginx
+### nginx
 The `nginx` directory contains configuration files for nginx to be used in Docker containers. These usually don't change much.
 - `compose-nginx.conf` - Used when the project is run using docker-compose.
 - `image-nginx.template` - Used when the project is run on a single container from higher level Docker image.
 
+### api
+The `api` directory contains a few serverless functions deployed on Vercel. Serverless functions are used in Blaze only for very basic server logic that can be kept separate from the main Blaze backend (which is the `server` directory).
+
 ### Build process
 The build process for the frontend internally setup with webpack via preact-cli. Overrides can be made in `preact.config.js` file. Following environment variables can be set in the build process:
 
@@ -114,10 +125,12 @@ The build process for the frontend internally setup with webpack via preact-cli.
 | `TORRENT_SIZE_LIMIT` | Max file size limit when transferring files over WebTorrent in bytes. | 700000000 (700 MBs)             |
 | **server**           |                                                                       |                                 |
 | `ORIGIN`             | Array of string URLs to allow CORS.                                   | *                               |
-| `PORT`               | Port for the server to run                                            | 3030                            |
-| `WS_SIZE_LIMIT`      | Max file size limit when transferring files over WebSockets in bytes  | 100000000 (100 MBs)             |
+| `PORT`               | Port for the server to run.                                           | 3030                            |
+| `WS_SIZE_LIMIT`      | Max file size limit when transferring files over WebSockets in bytes. | 100000000 (100 MBs)             |
 ----------------------------------------------------------------------------------------------------------------------------------
 
+**NOTE:** Any URL in the environment variables should not end with `/`.
+
 ## Deploying on your own server
 Blaze can be easily deployed on your own server using Docker. The frontend and the backend is completely decoupled from each other. Following Docker images are available:
 - Blaze Server: This is the backend Node.js server that is used for WebSockets. The environment variables listed for the server above can be passed to the container. It exposes port `3030`.

api/badges/_Badge.js

@@ -0,0 +1,77 @@
+/** @jsx h */
+import { h } from 'preact';
+
+function Badge({ width, height, title, value, type }) {
+  const styles = `
+    @import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap');
+  
+    .badge {
+      border-radius: 4px;
+      color: #fff;
+      font-family: 'Jost', Verdana, DejaVu Sans, sans-serif;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      font-size: 14px;
+      line-height: 1.8;
+      -webkit-font-smoothing: antialiased;
+      -moz-font-smoothing: antialiased;
+      -o-font-smoothing: antialiased;      
+    }
+    .badge * {
+      box-sizing: border-box;
+    }
+
+    .title {
+      width: 70%;
+      height: 100%;
+      text-align: center;
+      background-color: #0D1322;
+    }
+
+    .value {
+      border: 1px solid #3BE8B0;
+      background-color: #173f3c;
+      color: #3BE8B0;
+      padding: 0 6px;
+      width: 40%;
+      text-align: center;
+      height: 100%;
+      line-height: 1.6;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+
+    .error .value {
+      background-color: #441f28;
+      color: #ff7979;
+      border-color: #ff7979;
+    }
+  `;
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>{title}: {value}</title>
+      <defs>
+        <style type="text/css">
+          {styles}
+        </style>
+      </defs>
+      <foreignObject width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+        <div class={`badge ${type}`} style={{ height, width }}>
+          <div class="title">
+            {title}
+          </div>
+          <div class="value">
+            {value}
+          </div>
+        </div>
+        </div>
+      </foreignObject>
+    </svg>
+  );
+}
+
+export default Badge;

api/badges/license.js

@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'preact';
+import render from 'preact-render-to-string';
+
+import Badge from './_Badge';
+
+export default async (req, res) => {
+
+  res.setHeader('content-type', 'image/svg+xml');
+  res.setHeader('Cache-control', 'max-age=0, s-maxage=86400');
+
+  res.send(render(<Badge type="success" width={120} height={24} title="license" value="MIT" />));
+};

api/badges/release.js

@@ -0,0 +1,19 @@
+/** @jsx h */
+import { h } from 'preact';
+import render from 'preact-render-to-string';
+import fetch from 'node-fetch';
+
+import Badge from './_Badge';
+
+export default async (req, res) => {
+
+  res.setHeader('content-type', 'image/svg+xml');
+  res.setHeader('Cache-control', 'max-age=0, s-maxage=3600');
+
+  try {
+    const { tag_name } = await (await fetch('https://api.github.com/repos/blenderskool/blaze/releases/latest')).json();
+    res.send(render(<Badge type="success" width={140} height={24} title="release" value={tag_name} />));
+  } catch(err) {
+    res.send(render(<Badge type="error" width={120} height={24} title="release" value="error" />));
+  }
+};

api/badges/status.js

@@ -0,0 +1,19 @@
+/** @jsx h */
+import { h } from 'preact';
+import render from 'preact-render-to-string';
+import fetch from 'node-fetch';
+
+import Badge from './_Badge';
+
+export default async (req, res) => {
+
+  res.setHeader('content-type', 'image/svg+xml');
+  res.setHeader('Cache-control', 'max-age=0, s-maxage=60');
+
+  try {
+    await fetch('https://blaze.beaconapp.in');
+    res.send(render(<Badge type="success" width={90} height={24} title="status" value="up" />));
+  } catch(err) {
+    res.send(render(<Badge type="error" width={120} height={24} title="status" value="down" />));
+  }
+};