aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add worktree-specific favicon branding

Browse Source
This commit is contained in:
Dotta
2026-03-10 16:15:11 -05:00
parent 50db379db2
commit c799fca313
11 changed files with 97 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
server/src/__tests__/ui-branding.test.ts Normal file
View File

@@ -0,0 +1,38 @@
import { describe, expect, it } from "vitest";
import { applyUiBranding, isWorktreeUiBrandingEnabled, renderFaviconLinks } from "../ui-branding.js";
const TEMPLATE = `<!doctype html>
<head>
<!-- PAPERCLIP_FAVICON_START -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- PAPERCLIP_FAVICON_END -->
</head>`;
describe("ui branding", () => {
it("detects worktree mode from PAPERCLIP_IN_WORKTREE", () => {
expect(isWorktreeUiBrandingEnabled({ PAPERCLIP_IN_WORKTREE: "true" })).toBe(true);
expect(isWorktreeUiBrandingEnabled({ PAPERCLIP_IN_WORKTREE: "1" })).toBe(true);
expect(isWorktreeUiBrandingEnabled({ PAPERCLIP_IN_WORKTREE: "false" })).toBe(false);
});
it("renders the worktree favicon asset set when enabled", () => {
const links = renderFaviconLinks(true);
expect(links).toContain("/worktree-favicon.ico");
expect(links).toContain("/worktree-favicon.svg");
expect(links).toContain("/worktree-favicon-32x32.png");
expect(links).toContain("/worktree-favicon-16x16.png");
});
it("rewrites the favicon block for worktree instances only", () => {
const branded = applyUiBranding(TEMPLATE, { PAPERCLIP_IN_WORKTREE: "true" });
expect(branded).toContain("/worktree-favicon.svg");
expect(branded).not.toContain('href="/favicon.svg"');
const defaultHtml = applyUiBranding(TEMPLATE, {});
expect(defaultHtml).toContain('href="/favicon.svg"');
expect(defaultHtml).not.toContain("/worktree-favicon.svg");
});
});

5
server/src/app.ts
View File

@@ -24,6 +24,7 @@ import { sidebarBadgeRoutes } from "./routes/sidebar-badges.js";
import { llmRoutes } from "./routes/llms.js";
import { assetRoutes } from "./routes/assets.js";
import { accessRoutes } from "./routes/access.js";
import { applyUiBranding } from "./ui-branding.js";
import type { BetterAuthSessionResult } from "./auth/better-auth.js";
type UiMode = "none" | "static" | "vite-dev";
@@ -135,7 +136,7 @@ export async function createApp(
];
const uiDist = candidates.find((p) => fs.existsSync(path.join(p, "index.html")));
if (uiDist) {
const indexHtml = fs.readFileSync(path.join(uiDist, "index.html"), "utf-8");
const indexHtml = applyUiBranding(fs.readFileSync(path.join(uiDist, "index.html"), "utf-8"));
app.use(express.static(uiDist));
app.get(/.*/, (_req, res) => {
res.status(200).set("Content-Type", "text/html").end(indexHtml);
@@ -168,7 +169,7 @@ export async function createApp(
try {
const templatePath = path.resolve(uiRoot, "index.html");
const template = fs.readFileSync(templatePath, "utf-8");
const html = await vite.transformIndexHtml(req.originalUrl, template);
const html = applyUiBranding(await vite.transformIndexHtml(req.originalUrl, template));
res.status(200).set({ "Content-Type": "text/html" }).end(html);
} catch (err) {
next(err);

41
server/src/ui-branding.ts Normal file
View File

@@ -0,0 +1,41 @@
const FAVICON_BLOCK_START = "<!-- PAPERCLIP_FAVICON_START -->";
const FAVICON_BLOCK_END = "<!-- PAPERCLIP_FAVICON_END -->";
const DEFAULT_FAVICON_LINKS = [
'<link rel="icon" href="/favicon.ico" sizes="48x48" />',
'<link rel="icon" href="/favicon.svg" type="image/svg+xml" />',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />',
].join("\n");
const WORKTREE_FAVICON_LINKS = [
'<link rel="icon" href="/worktree-favicon.ico" sizes="48x48" />',
'<link rel="icon" href="/worktree-favicon.svg" type="image/svg+xml" />',
'<link rel="icon" type="image/png" sizes="32x32" href="/worktree-favicon-32x32.png" />',
'<link rel="icon" type="image/png" sizes="16x16" href="/worktree-favicon-16x16.png" />',
].join("\n");
function isTruthyEnvValue(value: string | undefined): boolean {
if (!value) return false;
const normalized = value.trim().toLowerCase();
return normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on";
}
export function isWorktreeUiBrandingEnabled(env: NodeJS.ProcessEnv = process.env): boolean {
return isTruthyEnvValue(env.PAPERCLIP_IN_WORKTREE);
}
export function renderFaviconLinks(worktree: boolean): string {
return worktree ? WORKTREE_FAVICON_LINKS : DEFAULT_FAVICON_LINKS;
}
export function applyUiBranding(html: string, env: NodeJS.ProcessEnv = process.env): string {
const start = html.indexOf(FAVICON_BLOCK_START);
const end = html.indexOf(FAVICON_BLOCK_END);
if (start === -1 || end === -1 || end < start) return html;
const before = html.slice(0, start + FAVICON_BLOCK_START.length);
const after = html.slice(end);
const links = renderFaviconLinks(isWorktreeUiBrandingEnabled(env));
return `${before}\n${links}\n ${after}`;
}