feat: gateway 支持查看所有 artifact

surgioproject · Oct 19, 2019 · 7cd7dc3 · 7cd7dc3
1 parent 87d5b9a
commit 7cd7dc3
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 34 deletions.
diff --git a/lib/gateway/index.ts b/lib/gateway/index.ts
@@ -60,31 +60,21 @@ export async function nowHandler(req: NowRequest, res: NowResponse): Promise<voi
   await server.init();
 
   const {
-    query: { name: artifactName },
     headers,
     url,
     method,
   } = req;
+  const gatewayAction = req.query.action || 'get-artifact';
   const clientIP = headers['x-real-ip'] || '-';
 
-  if (!artifactName) {
-    server.nowNotFound(res);
-    return;
-  }
-
   console.log('[request] [%s] %s %s "%s"', clientIP, method, url, headers['user-agent'] || '-');
 
-  server.getArtifact(artifactName)
-    .then(result => {
-      if (result) {
-        res.setHeader('content-type', 'text/plain; charset=utf-8');
-        res.setHeader('cache-control', 'private, no-cache, no-store');
-        res.send(result);
-      } else {
-        server.nowNotFound(res);
-      }
-    })
-    .catch(err => {
-      server.nowErrorHandler(res, err);
-    });
+  switch (gatewayAction) {
+    case 'get-artifact':
+      server.nowGetArtifact(req, res);
+      break;
+    case 'list-artifact':
+      server.nowListArtifact(req, res);
+      break;
+  }
 }
diff --git a/lib/gateway/server.ts b/lib/gateway/server.ts
@@ -1,7 +1,9 @@
 // tslint:disable-next-line:no-submodule-imports
-import { NowResponse } from '@now/node/dist';
+import { NowRequest, NowResponse } from '@now/node/dist';
+import nunjucks from 'nunjucks';
+
 import { ArtifactConfig, CommandConfig, RemoteSnippet } from '../types';
-import { loadRemoteSnippetList } from '../utils';
+import { getDownloadUrl, loadRemoteSnippetList } from '../utils';
 import { generate } from '../generate';
 import { FcResponse } from './types';
 
@@ -43,10 +45,10 @@ export class Server {
     console.error(err);
   }
 
-  public fcNotFound(response: FcResponse): void {
-    response.setStatusCode(404);
-    response.setHeader('content-type', 'text/html; charset=UTF-8');
-    response.send(
+  public fcNotFound(res: FcResponse): void {
+    res.setStatusCode(404);
+    res.setHeader('content-type', 'text/html; charset=UTF-8');
+    res.send(
       '<h1>Not Found</h1>'
     );
   }
@@ -63,12 +65,50 @@ export class Server {
     console.error(err);
   }
 
-  public nowNotFound(response: NowResponse): void {
-    response.setHeader('content-type', 'text/html; charset=UTF-8');
-    response
+  public nowNotFound(res: NowResponse): void {
+    res.setHeader('content-type', 'text/html; charset=UTF-8');
+    res
       .status(404)
       .send(
         '<h1>Not Found</h1>'
       );
   }
+
+  public nowGetArtifact(req: NowRequest, res: NowResponse): void {
+    const {
+      query: { name: artifactName },
+    } = req;
+
+    if (!artifactName) {
+      this.nowNotFound(res);
+      return;
+    }
+
+    this.getArtifact(artifactName as string)
+      .then(result => {
+        if (result) {
+          res.setHeader('content-type', 'text/plain; charset=utf-8');
+          res.setHeader('cache-control', 'private, no-cache, no-store');
+          res.send(result);
+        } else {
+          this.nowNotFound(res);
+        }
+      })
+      .catch(err => {
+        this.nowErrorHandler(res, err);
+      });
+  }
+
+  public nowListArtifact(_: NowRequest, res: NowResponse): void {
+    const engine = nunjucks.configure({
+      autoescape: false,
+    });
+    const artifactListTpl = require('./template/artifact-list').default;
+    const result = engine.renderString(artifactListTpl, {
+      artifactList: this.artifactList,
+      getDownloadUrl: (name: string) => getDownloadUrl(this.config.urlBase, name),
+      encodeURIComponent,
+    });
+    res.send(result);
+  }
 }
diff --git a/lib/gateway/template/artifact-list.ts b/lib/gateway/template/artifact-list.ts
@@ -0,0 +1,67 @@
+export default `
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@1.0.1/build/pure-min.min.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@1.0.1/build/grids-responsive-min.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-normalize@0.5.0/modern-normalize.min.css" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
+  <title>Artifact 查看</title>
+  <style>
+    .container li,
+    .container ul {
+      margin: 0;
+      padding: 0;
+    }
+    .container .artifact {
+      list-style: none;
+      padding: 20px 15px;
+      border-bottom: 1px solid #eee;
+    }
+    .artifact .preview {
+      background-color: #eee;
+      padding: 15px 10px;
+      -webkit-overflow-scrolling: touch;
+    }
+    .artifact .link {
+    }
+  </style>
+</head>
+<body>
+<div class="container pure-g">
+  <div class="pure-u-1 pure-u-md-1-2" style="margin: auto">
+    <ul>
+    {% for artifact in artifactList %}
+      <li class="artifact">
+        <div class="inner-wrapper">
+          <div class="name">{{ artifact.name }}</div>
+          <pre class="preview">{{ getDownloadUrl(artifact.name) }}</pre>
+          <div class="link-group">
+            <a class="link pure-button pure-button-primary" target="_blank" href="{{ getDownloadUrl(artifact.name) }}">Link</a>
+            <button class="ctc link pure-button pure-button-primary" data-clipboard-text="{{ getDownloadUrl(artifact.name) }}">Copy Link</button>
+            
+            {% if artifact.name.toLowerCase().includes('surge') %}
+              <a class="link pure-button" target="_blank" href="surge:///install-config?url={{ encodeURIComponent(getDownloadUrl(artifact.name)) }}">Surge</a>
+            {% endif %}
+          </div>
+        </div>
+      </li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>
+<script>
+const clipboard = new ClipboardJS('.ctc');
+
+clipboard.on('success', function(e) {
+  alert('复制成功');
+});
+clipboard.on('error', function() {
+  alert('该浏览器不支持复制');
+});
+</script>
+</body>
+</html>
+`;
diff --git a/yarn.lock b/yarn.lock
@@ -967,11 +967,6 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
   integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==
 
-"@types/json5@^0.0.30":
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.30.tgz#44cb52f32a809734ca562e685c6473b5754a7818"
-  integrity sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==
-
 "@types/lodash@^4.14.144":
   version "4.14.144"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.144.tgz#12e57fc99064bce45e5ab3c8bc4783feb75eab8e"
@@ -6859,7 +6854,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.0, json5@^2.1.1:
+json5@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
   integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==