update design

This commit is contained in:
tdurieux
2026-05-05 00:36:42 +03:00
parent 49b124e188
commit dee406e2ea
7 changed files with 232 additions and 43 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+25 -1
View File
@@ -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;
+11 -9
View File
@@ -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">
<li class="pr-comment" ng-repeat="file in details.gist.files" ng-if="options.content">
<div class="pr-comment-head">
<strong ng-bind="anonymizeGistContent(file.filename)"></strong>
<span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
</div>
<pre class="pr-diff"><code ng-bind="anonymizeGistContent(file.content)"></code></pre>
</li>
</ul>
<div ng-if="options.content && previewGistFiles.length">
<ul class="pr-comments mt-3">
<li class="pr-comment" ng-repeat="file in previewGistFiles">
<div class="pr-comment-head">
<strong ng-bind="file.filename"></strong>
<span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
</div>
<gist-file file="file" terms="terms" options="options"></gist-file>
</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">
+2 -2
View File
@@ -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>
+108
View File
@@ -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;
+1 -1
View File
File diff suppressed because one or more lines are too long
+84 -29
View File
@@ -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) => ({
body: comment.body || "",
creationDate: new Date(comment.created_at),
updatedDate: new Date(comment.updated_at),
author: comment.user?.login || "",
})),
comments: commentsMapped,
};
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(
this._model.gist.ownerLogin || ""
);
output.ownerLogin = anonymizer.anonymize(g?.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.creationDate = this._model.gist.creationDate;
output.updatedDate = g?.updatedDate;
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,
options: this._model.options,
conference: this._model.conference,
anonymizeDate: this._model.anonymizeDate,
status: this._model.status,
isPublic: this._model.gist.isPublic,
statusMessage: this._model.statusMessage,
source: {
gistId: this._model.source.gistId,
},
gist: this._model.gist,
lastView: this._model.lastView,
pageView: this._model.pageView,
gistId: m.gistId,
options: m.options,
conference: m.conference,
anonymizeDate: m.anonymizeDate,
status: m.status,
isPublic: g?.isPublic,
statusMessage: m.statusMessage,
source: { gistId: m.source.gistId },
gist: g
? {
description: g.description,
isPublic: g.isPublic,
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,
};
}
}