update design

public/css/style.css

@@ -784,6 +784,20 @@ a:hover {
   color: var(--color) !important;
 }
 
+.markdown-body table tr {
+  background-color: var(--main-bg-color);
+  border-top: 1px solid var(--border-color);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--paper-bg-alt);
+}
+
+.markdown-body table td,
+.markdown-body table th {
+  border: 1px solid var(--border-color);
+}
+
 .file-content {
   padding: 4px 7px;
   text-align: left;
@@ -2274,7 +2288,7 @@ code {
   gap: 8px;
   position: fixed;
   bottom: 18px;
-  left: 18px;
+  right: 18px;
   z-index: 1100;
   padding: 10px 14px;
   background: var(--color);
@@ -2295,6 +2309,16 @@ code {
 @media (max-width: 991px) {
   .sidebar-toggle { display: inline-flex; }
 
+  /* Move Ko-fi widget to the left to avoid clashing with the Files button */
+  .floatingchat-container-wrap {
+    left: 3px !important;
+    right: auto !important;
+  }
+  .floating-chat-kofi-popup-iframe {
+    left: 10px !important;
+    right: auto !important;
+  }
+
   /* Sidebar becomes a slide-in drawer */
   .leftCol {
     position: fixed;

public/partials/anonymize.htm

@@ -372,15 +372,17 @@
           </div>
           <small ng-if="options.origin">Gist ID: {{details.source.gistId}}</small>
           <small ng-if="options.username && details.gist.ownerLogin">By @{{anonymizeGistContent(details.gist.ownerLogin)}}</small>
-          <ul class="pr-comments mt-3">
+          <div ng-if="options.content && previewGistFiles.length">
-            <li class="pr-comment" ng-repeat="file in details.gist.files" ng-if="options.content">
+            <ul class="pr-comments mt-3">
-              <div class="pr-comment-head">
+              <li class="pr-comment" ng-repeat="file in previewGistFiles">
-                <strong ng-bind="anonymizeGistContent(file.filename)"></strong>
+                <div class="pr-comment-head">
-                <span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
+                  <strong ng-bind="file.filename"></strong>
-              </div>
+                  <span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
-              <pre class="pr-diff"><code ng-bind="anonymizeGistContent(file.content)"></code></pre>
+                </div>
-            </li>
+                <gist-file file="file" terms="terms" options="options"></gist-file>
-          </ul>
+              </li>
+            </ul>
+          </div>
           <div ng-if="options.comments && details.gist.comments && details.gist.comments.length">
             <h3 class="paper-section-eyebrow mt-3">Comments</h3>
             <ul class="pr-comments">

public/partials/gist.htm

@@ -26,7 +26,7 @@
       </div>
     </header>
 
-    <nav class="paper-tabs" ng-if="details.files || details.comments" role="tablist">
+    <nav class="paper-tabs" ng-if="(details.files && details.files.length) || (details.comments && details.comments.length)" role="tablist">
       <button
         class="paper-tab"
         ng-if="details.files"
@@ -65,7 +65,7 @@
               <strong ng-bind="file.filename"></strong>
               <span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
             </div>
-            <pre class="pr-diff"><code ng-bind="file.content"></code></pre>
+            <gist-file file="file"></gist-file>
           </li>
           <li class="paper-table-empty" ng-if="!details.files.length">
             <i class="fas fa-file"></i>

public/script/app.js

@@ -341,6 +341,92 @@ angular
       };
     },
   ])
+  .directive("gistFile", [
+    "$location",
+    "$timeout",
+    "$sce",
+    function ($location, $timeout, $sce) {
+      // Map GitHub `language` and file extensions to Prism aliases. Prism
+      // only ships a handful of grammars (js/py/r/julia/markup); unknown
+      // classes still render as readable <pre><code>.
+      const langAliases = {
+        javascript: "javascript",
+        js: "javascript",
+        typescript: "javascript",
+        ts: "javascript",
+        jsx: "javascript",
+        tsx: "javascript",
+        python: "python",
+        py: "python",
+        ipynb: "json",
+        r: "r",
+        julia: "julia",
+        html: "markup",
+        xml: "markup",
+        svg: "markup",
+        json: "json",
+        yaml: "yaml",
+        yml: "yaml",
+        bash: "bash",
+        sh: "bash",
+        shell: "bash",
+        css: "css",
+        scss: "css",
+        c: "c",
+        "c++": "cpp",
+        cpp: "cpp",
+        java: "java",
+        go: "go",
+        rust: "rust",
+        ruby: "ruby",
+        php: "php",
+        sql: "sql",
+        diff: "diff",
+      };
+      function ext(filename) {
+        const i = (filename || "").lastIndexOf(".");
+        return i < 0 ? "" : filename.slice(i + 1).toLowerCase();
+      }
+      function langFor(file) {
+        const fromLang =
+          file && file.language && langAliases[file.language.toLowerCase()];
+        if (fromLang) return fromLang;
+        const fromExt = langAliases[ext(file && file.filename)];
+        return fromExt || "none";
+      }
+      function kind(file) {
+        const e = ext(file && file.filename);
+        if (e === "md" || e === "markdown" || (file && file.language === "Markdown"))
+          return "md";
+        return "code";
+      }
+      return {
+        restrict: "E",
+        scope: { file: "=", terms: "=", options: "=" },
+        template:
+          '<div ng-if="kind === \'md\'"><markdown content="file.content" terms="terms" options="options"></markdown></div>' +
+          '<pre ng-if="kind === \'code\'" class="line-numbers"><code class="{{prismClass}}" ng-bind="file.content"></code></pre>',
+        link: function (scope, elem) {
+          function update() {
+            if (!scope.file) return;
+            scope.kind = kind(scope.file);
+            scope.prismClass = "language-" + langFor(scope.file);
+            // Re-run Prism after the new <code> lands in the DOM.
+            $timeout(() => {
+              const codes = elem[0].querySelectorAll("pre code");
+              codes.forEach((c) => {
+                if (window.Prism) Prism.highlightElement(c);
+              });
+            }, 50);
+          }
+          scope.$watch("file", update);
+          scope.$watch("file.content", update);
+          scope.$watch("terms", update);
+          scope.$watch("options", update, true);
+        },
+      };
+    },
+  ])
   .directive("markdown", [
     "$location",
     function ($location) {
@@ -1656,6 +1742,7 @@ angular
 
       let _gistAnonCache = new Map();
       let _gistSeenContents = new Set();
+      let _gistCacheVersion = 0;
 
       function collectGistContents() {
         const out = new Set();
@@ -1692,6 +1779,8 @@ angular
             next.set(seen[i], data.contents[i]);
           }
           _gistAnonCache = next;
+          _gistCacheVersion++;
+          rebuildPreviewGistFiles();
         }
       );
 
@@ -1704,6 +1793,25 @@ angular
         return content;
       };
 
+      // Precomputed file objects for the preview pane so <gist-file>'s
+      // two-way binding has a stable reference. Recomputes when the source
+      // files change OR when the anonymization cache turns over.
+      $scope.previewGistFiles = [];
+      function rebuildPreviewGistFiles() {
+        const files =
+          ($scope.details && $scope.details.gist && $scope.details.gist.files) || [];
+        $scope.previewGistFiles = files.map((f) => ({
+          filename: $scope.anonymizeGistContent(f.filename),
+          content: $scope.anonymizeGistContent(f.content),
+          language: f.language,
+        }));
+      }
+      // _prAnonCache turns over inside refreshGistPreview's applyResult; the
+      // simplest signal we have is the digest cycle, so re-derive each digest.
+      // Cheap when _gistAnonCache hits.
+      $scope.$watch("details.gist.files", rebuildPreviewGistFiles, true);
+      $scope.$watch("terms", rebuildPreviewGistFiles);
+
       // ========== SHARED LOGIC ==========
       function getConference() {
         if (!$scope.conference) return;

src/core/Gist.ts

@@ -9,8 +9,30 @@ import config from "../config";
 import { octokit } from "./GitHubUtils";
 import { ContentAnonimizer } from "./anonymize-utils";
 
+type GistPayload = {
+  description: string;
+  isPublic?: boolean;
+  creationDate: Date;
+  updatedDate: Date;
+  ownerLogin?: string;
+  files: {
+    filename: string;
+    content: string;
+    language?: string;
+    size: number;
+    type?: string;
+  }[];
+  comments: {
+    body: string;
+    creationDate: Date;
+    updatedDate: Date;
+    author: string;
+  }[];
+};
+
 export default class Gist {
   private _model: IAnonymizedGistDocument;
+  private _gistPayload?: GistPayload;
   owner: User;
 
   constructor(data: IAnonymizedGistDocument) {
@@ -67,7 +89,18 @@ export default class Gist {
         type: f.type || undefined,
       }));
 
-    this._model.gist = {
+    const commentsMapped = comments.map((comment) => ({
+      body: comment.body || "",
+      creationDate: new Date(comment.created_at),
+      updatedDate: new Date(comment.updated_at),
+      author: comment.user?.login || "",
+    }));
+
+    // Mongoose treats `gist` as a nested path; assigning a plain object that
+    // contains nested arrays (files/comments) on an unsaved doc silently drops
+    // those arrays. Cache the populated payload off-model so toJSON can read
+    // it directly, and also set it on the model for the persisted path.
+    const payload = {
       description: gistInfo.data.description || "",
       isPublic: gistInfo.data.public,
       creationDate: gistInfo.data.created_at
@@ -78,13 +111,11 @@ export default class Gist {
         : new Date(),
       ownerLogin: gistInfo.data.owner?.login,
       files,
-      comments: comments.map((comment) => ({
+      comments: commentsMapped,
-        body: comment.body || "",
-        creationDate: new Date(comment.created_at),
-        updatedDate: new Date(comment.updated_at),
-        author: comment.user?.login || "",
-      })),
     };
+    this._gistPayload = payload;
+    this._model.set("gist", payload);
+    this._model.markModified("gist");
   }
 
   /**
@@ -194,24 +225,23 @@ export default class Gist {
   }
 
   content() {
+    const g = this._gistPayload || this._model.gist;
     const output: Record<string, unknown> = {
       anonymizeDate: this._model.anonymizeDate,
-      isPublic: this._model.gist.isPublic,
+      isPublic: g?.isPublic,
     };
     const anonymizer = new ContentAnonimizer({
       ...this.options,
       repoId: this.gistId,
     });
     if (this.options.title) {
-      output.description = anonymizer.anonymize(this._model.gist.description);
+      output.description = anonymizer.anonymize(g?.description || "");
     }
     if (this.options.username) {
-      output.ownerLogin = anonymizer.anonymize(
+      output.ownerLogin = anonymizer.anonymize(g?.ownerLogin || "");
-        this._model.gist.ownerLogin || ""
-      );
     }
     if (this.options.content) {
-      output.files = (this._model.gist.files || []).map((f) => ({
+      output.files = (g?.files || []).map((f) => ({
         filename: anonymizer.anonymize(f.filename),
         content: anonymizer.anonymize(f.content),
         language: f.language,
@@ -220,7 +250,7 @@ export default class Gist {
       }));
     }
     if (this.options.comments) {
-      output.comments = this._model.gist.comments?.map((comment) => {
+      output.comments = g?.comments?.map((comment) => {
         const o: Record<string, unknown> = {};
         if (this.options.body) o.body = anonymizer.anonymize(comment.body);
         if (this.options.username)
@@ -236,8 +266,8 @@ export default class Gist {
       output.sourceGistId = this._model.source.gistId;
     }
     if (this.options.date) {
-      output.updatedDate = this._model.gist.updatedDate;
+      output.updatedDate = g?.updatedDate;
-      output.creationDate = this._model.gist.creationDate;
+      output.creationDate = g?.creationDate;
     }
     return output;
   }
@@ -265,20 +295,45 @@ export default class Gist {
   }
 
   toJSON() {
+    const m = this._model;
+    const g = this._gistPayload || m.gist;
+    // Build the gist payload by hand instead of returning the Mongoose
+    // sub-doc directly. The /api/gist/source endpoint returns this for an
+    // unsaved model right after download(), and the sub-doc's nested array
+    // (files) doesn't always survive res.json on a freshly assigned doc.
     return {
-      gistId: this._model.gistId,
+      gistId: m.gistId,
-      options: this._model.options,
+      options: m.options,
-      conference: this._model.conference,
+      conference: m.conference,
-      anonymizeDate: this._model.anonymizeDate,
+      anonymizeDate: m.anonymizeDate,
-      status: this._model.status,
+      status: m.status,
-      isPublic: this._model.gist.isPublic,
+      isPublic: g?.isPublic,
-      statusMessage: this._model.statusMessage,
+      statusMessage: m.statusMessage,
-      source: {
+      source: { gistId: m.source.gistId },
-        gistId: this._model.source.gistId,
+      gist: g
-      },
+        ? {
-      gist: this._model.gist,
+            description: g.description,
-      lastView: this._model.lastView,
+            isPublic: g.isPublic,
-      pageView: this._model.pageView,
+            creationDate: g.creationDate,
+            updatedDate: g.updatedDate,
+            ownerLogin: g.ownerLogin,
+            files: (g.files || []).map((f) => ({
+              filename: f.filename,
+              content: f.content,
+              language: f.language,
+              size: f.size,
+              type: f.type,
+            })),
+            comments: (g.comments || []).map((c) => ({
+              body: c.body,
+              creationDate: c.creationDate,
+              updatedDate: c.updatedDate,
+              author: c.author,
+            })),
+          }
+        : undefined,
+      lastView: m.lastView,
+      pageView: m.pageView,
     };
   }
 }