Refactor template string with handlebars.

- Refactor static routing, template vars.
- Fixed issue where JSON entities may be unescaped
- Updated web manifest schema, route handler.
- Clean up issues surrounding static paths, types.
- Removed static path helper.
- Fixed issue where locals may change during request handling.
- Added missing types.
- Fixed issue where body theme color is stale.

Author: GirlBossRush

ci/build/build-code-server.sh

@@ -25,13 +25,10 @@ main() {
   fi
 
   parcel build \
-    --public-url "." \
+    --public-url "/static/" \
     --out-dir dist \
-    $([[ $MINIFY ]] || echo --no-minify) \
-    src/browser/register.ts \
-    src/browser/serviceWorker.ts \
-    src/browser/pages/login.ts \
-    src/browser/pages/vscode.ts
+    "$([[ $MINIFY ]] || echo --no-minify)" \
+    src/browser/**/*.ts
 }
 
 main "$@"

ci/build/build-release.sh

@@ -38,10 +38,9 @@ bundle_code_server() {
 
   # For source maps and images.
   mkdir -p "$RELEASE_PATH/src/browser"
-  rsync src/browser/media/ "$RELEASE_PATH/src/browser/media"
-  mkdir -p "$RELEASE_PATH/src/browser/pages"
-  rsync src/browser/pages/*.html "$RELEASE_PATH/src/browser/pages"
-  rsync src/browser/robots.txt "$RELEASE_PATH/src/browser"
+  rsync -r src/browser/public "$RELEASE_PATH/src/browser"
+  mkdir -p "$RELEASE_PATH/src/browser/views"
+  rsync -r src/browser/views "$RELEASE_PATH/src/browser"
 
   # Adds the commit to package.json
   jq --slurp '.[0] * .[1]' package.json <(

ci/dev/watch.ts

@@ -173,21 +173,13 @@ class Watcher {
   }
 
   private createBundler(out = "dist"): Bundler {
-    return new Bundler(
-      [
-        path.join(this.rootPath, "src/browser/register.ts"),
-        path.join(this.rootPath, "src/browser/serviceWorker.ts"),
-        path.join(this.rootPath, "src/browser/pages/login.ts"),
-        path.join(this.rootPath, "src/browser/pages/vscode.ts"),
-      ],
-      {
-        outDir: path.join(this.rootPath, out),
-        cacheDir: path.join(this.rootPath, ".cache"),
-        minify: !!process.env.MINIFY,
-        logLevel: 1,
-        publicUrl: ".",
-      },
-    )
+    return new Bundler([path.join(this.rootPath, "src/browser/**/*.ts")], {
+      outDir: path.join(this.rootPath, out),
+      cacheDir: path.join(this.rootPath, ".cache"),
+      minify: !!process.env.MINIFY,
+      logLevel: 1,
+      publicUrl: "/static/",
+    })
   }
 }
 

package.json

@@ -32,7 +32,9 @@
   "devDependencies": {
     "@types/body-parser": "^1.19.0",
     "@types/cookie-parser": "^1.4.2",
+    "@types/entities": "^1.1.1",
     "@types/express": "^4.17.8",
+    "@types/express-handlebars": "^3.1.0",
     "@types/fs-extra": "^8.0.1",
     "@types/http-proxy": "^1.17.4",
     "@types/js-yaml": "^3.12.3",
@@ -71,8 +73,10 @@
     "@coder/logger": "1.1.16",
     "body-parser": "^1.19.0",
     "cookie-parser": "^1.4.5",
+    "entities": "^2.1.0",
     "env-paths": "^2.2.0",
     "express": "^4.17.1",
+    "express-handlebars": "^5.2.0",
     "fs-extra": "^9.0.1",
     "http-proxy": "^1.18.0",
     "httpolyglot": "^0.1.2",

src/browser/main.ts

@@ -0,0 +1,16 @@
+import "./views/error/index.css"
+import "./views/global.css"
+import "./views/login/index.css"
+
+import { getOptions, normalize } from "../common/util"
+
+const options = getOptions()
+
+if ("serviceWorker" in navigator) {
+  const path = normalize(`${options.base}/serviceWorker.js`)
+  navigator.serviceWorker
+    .register(path, {
+      scope: (options.base ?? "") + "/",
+    })
+    .then(() => console.debug("[Code Server Service Worker] registered"))
+}

src/browser/media/manifest.json

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 self.addEventListener("install", () => {
-  console.log("[Service Worker] install")
+  console.debug("[Code Server Service Worker] install")
 })
 
 self.addEventListener("activate", (event: any) => {

src/browser/pages/login.ts

@@ -10,23 +10,23 @@
       http-equiv="Content-Security-Policy"
       content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
-    <title>{{ERROR_TITLE}} - code-server</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" type="image/x-icon" />
-    <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
-    <link rel="apple-touch-icon" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png" />
-    <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
-    <meta id="coder-options" data-settings="{{OPTIONS}}" />
+    <title>{{ERROR_TITLE}} — Code Server</title>
+    <link rel="icon" href="{{assetPath base '/static/media/favicon.ico'}}" type="image/x-icon" />
+    <link rel="manifest" href="{{assetPath base '/code-server.webmanifest'}}" crossorigin="use-credentials" />
+    <link rel="apple-touch-icon" href="{{assetPath base '/static/media/pwa-icon-384.png'}}" />
+    <link href="{{assetPath base '/static/main.css'}}" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{{json coderOptions}}}" />
   </head>
   <body>
     <div class="center-container">
       <div class="error-display">
         <h2 class="header">{{ERROR_HEADER}}</h2>
         <div class="body">{{ERROR_BODY}}</div>
         <div class="links">
-          <a class="link" href="{{BASE}}{{TO}}">go home</a>
+          <a class="link" href="{{HOME_PATH}}">Go home</a>
         </div>
       </div>
     </div>
-    <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
+    <script data-cfasync="false" src="{{assetPath base '/static/main.js'}}"></script>
   </body>
 </html>

src/browser/pages/vscode.html

@@ -10,19 +10,21 @@
       http-equiv="Content-Security-Policy"
       content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
-    <title>code-server login</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" type="image/x-icon" />
-    <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
-    <link rel="apple-touch-icon" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png" />
-    <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
-    <meta id="coder-options" data-settings="{{OPTIONS}}" />
+    <title>Login — Code Server</title>
+
+    <link rel="icon" href="{{assetPath base '/static/media/favicon.ico'}}" type="image/x-icon" />
+    <link rel="manifest" href="{{assetPath base '/code-server.webmanifest'}}" crossorigin="use-credentials" />
+    <link rel="apple-touch-icon" href="{{assetPath base '/static/src/browser/media/pwa-icon-384.png'}}" />
+    <link href="{{assetPath base '/static/main.css'}}" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{{json coderOptions}}}" />
   </head>
   <body>
     <div class="center-container">
       <div class="card-box">
         <div class="header">
           <h1 class="main">Welcome to code-server</h1>
-          <div class="sub">Please log in below. {{PASSWORD_MSG}}</div>
+          <div class="sub">Please log in below.</div>
+          <div class="sub">{{PASSWORD_MSG}}</div>
         </div>
         <div class="content">
           <form class="login-form" method="post">
@@ -40,12 +42,14 @@ <h1 class="main">Welcome to code-server</h1>
               />
               <input class="submit -button" value="SUBMIT" type="submit" />
             </div>
-            {{ERROR}}
+
+            {{#if ERROR}}
+              <div class="error">{{ERROR}}</div>
+            {{/if}}
           </form>
         </div>
       </div>
     </div>
   </body>
-  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/register.js"></script>
-  <script data-cfasync="false" src="{{CS_STATIC_BASE}}/dist/pages/login.js"></script>
-</html>
+  <script data-cfasync="false" src="{{assetPath base '/static/main.js'}}"></script>
+  </html>