fix: authors, bibliography and CSS in published article

- Read authors from Y.Array("frontmatter.authors") instead of
Y.Map("frontmatter") which only holds scalar fields
- Read date from "published" key (matching frontend convention)
- Render authors with links and affiliations in the article header
- Fix bibliography: renderHTML was outputting raw HTML as a text node
(escaped); now uses postProcess to decode the renderedhtml attribute
- Fix CSS loading: try multiple paths so it works both in dev and
in Docker production (/app/frontend-styles/)

Made-with: Cursor

backend/src/publisher/extensions.ts

@@ -61,18 +61,15 @@ const BibliographyServer = Node.create({
   parseHTML() {
     return [{ tag: 'div[data-type="bibliography"]' }];
   },
-  renderHTML({ HTMLAttributes, node }) {
-    const content = node.attrs.renderedHtml || "";
-    const inner = content
-      ? `<h2 class="bibliography-title">References</h2><div class="bibliography-content">${content}</div>`
-      : '<p class="bibliography-empty">No citations</p>';
+  renderHTML({ HTMLAttributes }) {
+    // Render an empty placeholder; postProcess in html-renderer will inject
+    // the actual bibliography HTML from the renderedhtml attribute.
     return [
       "div",
       mergeAttributes(HTMLAttributes, {
         "data-type": "bibliography",
         class: "bibliography-block",
       }),
-      inner,
     ];
   },
 });

backend/src/publisher/html-renderer.ts

@@ -8,10 +8,16 @@
 import { generateHTML } from "@tiptap/html";
 import { getServerExtensions } from "./extensions.js";
 
+export interface PublishAuthor {
+  name: string;
+  url?: string;
+  affiliationNames: string[];
+}
+
 export interface PublishMeta {
   title: string;
   description: string;
-  authors: string[];
+  authors: PublishAuthor[];
   date: string;
   ogImage?: string;
 }
@@ -29,7 +35,8 @@ export function renderArticleHTML(
   const bodyHtml = generateHTML(json as any, extensions);
   const enrichedBody = postProcess(bodyHtml);
 
-  const authorsStr = meta.authors.join(", ");
+  const authorNames = meta.authors.map((a) => a.name);
+  const authorsStr = authorNames.join(", ");
   const safeTitle = escapeHtml(meta.title);
   const safeDesc = escapeHtml(meta.description);
 
@@ -48,7 +55,7 @@ export function renderArticleHTML(
   <meta property="og:description" content="${safeDesc}">
   ${meta.ogImage ? `<meta property="og:image" content="${escapeHtml(meta.ogImage)}">` : ""}
   <meta property="article:published_time" content="${escapeHtml(meta.date)}">
-  ${meta.authors.map((a) => `<meta property="article:author" content="${escapeHtml(a)}">`).join("\n  ")}
+  ${authorNames.map((a) => `<meta property="article:author" content="${escapeHtml(a)}">`).join("\n  ")}
 
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">
@@ -102,6 +109,30 @@ body {
   color: var(--text-secondary);
   font-size: 0.9375rem;
   margin-bottom: 0.25rem;
+  line-height: 1.6;
+}
+
+.article-header .author-link {
+  color: var(--accent-light);
+  text-decoration: none;
+}
+
+.article-header .author-link:hover {
+  text-decoration: underline;
+}
+
+.article-header .author-affiliation {
+  color: var(--text-tertiary);
+  font-size: 0.8125rem;
+  margin-left: 0.25rem;
+}
+
+.article-header .author-affiliation::before {
+  content: "(";
+}
+
+.article-header .author-affiliation::after {
+  content: ")";
 }
 
 .article-header .date {
@@ -187,7 +218,7 @@ dialog.lightbox img {
   <article class="article-container">
     <header class="article-header">
       <h1>${safeTitle}</h1>
-      ${authorsStr ? `<p class="authors">${escapeHtml(authorsStr)}</p>` : ""}
+      ${meta.authors.length > 0 ? `<div class="authors">${renderAuthors(meta.authors)}</div>` : ""}
       ${meta.date ? `<p class="date">${escapeHtml(formatDate(meta.date))}</p>` : ""}
     </header>
 
@@ -254,6 +285,26 @@ function postProcess(html: string): string {
     }
   );
 
+  // Bibliography: inject renderedhtml attribute as actual HTML content
+  result = result.replace(
+    /<div([^>]*data-type="bibliography"[^>]*)><\/div>/gi,
+    (_match, attrs: string) => {
+      const htmlMatch = attrs.match(/renderedhtml="([^"]*)"/i);
+      const cleanAttrs = attrs.replace(/\s*renderedhtml="[^"]*"/i, "");
+      if (!htmlMatch || !htmlMatch[1]) {
+        return `<div${cleanAttrs}><p class="bibliography-empty">No citations</p></div>`;
+      }
+      const decoded = htmlMatch[1]
+        .replace(/&amp;/g, "&")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'")
+        .replace(/&#x27;/g, "'");
+      return `<div${cleanAttrs}><h2 class="bibliography-title">References</h2><div class="bibliography-content">${decoded}</div></div>`;
+    }
+  );
+
   // HtmlEmbed: div[data-component="htmlEmbed"] → iframe with srcdoc
   result = result.replace(
     /<div[^>]*data-component="htmlEmbed"[^>]*data-src="([^"]*)"[^>]*><\/div>/g,
@@ -278,6 +329,18 @@ function escapeHtml(str: string): string {
     .replace(/'/g, "&#039;");
 }
 
+function renderAuthors(authors: PublishAuthor[]): string {
+  return authors.map((a) => {
+    const name = a.url
+      ? `<a href="${escapeHtml(a.url)}" class="author-link" target="_blank" rel="noopener">${escapeHtml(a.name)}</a>`
+      : `<span class="author-name">${escapeHtml(a.name)}</span>`;
+    const affil = a.affiliationNames.length > 0
+      ? `<span class="author-affiliation">${escapeHtml(a.affiliationNames.join(", "))}</span>`
+      : "";
+    return `<span class="author">${name}${affil}</span>`;
+  }).join('<span class="author-sep">, </span>');
+}
+
 function formatDate(dateStr: string): string {
   try {
     return new Date(dateStr).toLocaleDateString("en-US", {

backend/src/publisher/index.ts

@@ -26,33 +26,54 @@ function docPath(name: string) {
 
 /**
  * Load CSS files for injection into the published HTML.
+ * Tries multiple paths: dev source, Docker copy, relative fallback.
  */
 function loadCSS(): { tokens: string; article: string } {
-  const frontendStyles = join(__dirname, "..", "..", "..", "frontend", "src", "styles");
-  const distStyles = join(__dirname, "..", "frontend-dist", "assets");
-
-  let tokens = "";
-  let article = "";
+  const candidates = [
+    join(__dirname, "..", "..", "..", "frontend", "src", "styles"),
+    join(__dirname, "..", "..", "frontend-styles"),
+    join(__dirname, "..", "frontend-styles"),
+  ];
+
+  for (const dir of candidates) {
+    const tokensPath = join(dir, "tokens.css");
+    const articlePath = join(dir, "article.css");
+    if (existsSync(tokensPath) && existsSync(articlePath)) {
+      console.log("[publish] CSS found at:", dir);
+      return {
+        tokens: readFileSync(tokensPath, "utf-8"),
+        article: readFileSync(articlePath, "utf-8"),
+      };
+    }
+  }
 
-  // Development: read source files directly
-  const tokensPath = join(frontendStyles, "tokens.css");
-  const articlePath = join(frontendStyles, "article.css");
+  console.warn("[publish] CSS files not found, tried:", candidates);
+  return { tokens: "", article: "" };
+}
 
-  if (existsSync(tokensPath)) {
-    tokens = readFileSync(tokensPath, "utf-8");
-    article = readFileSync(articlePath, "utf-8");
-  }
+interface AuthorObj {
+  name: string;
+  url?: string;
+  affiliations: number[];
+}
 
-  return { tokens, article };
+interface AffiliationObj {
+  name: string;
+  url?: string;
 }
 
 /**
  * Extract TipTap JSON and frontmatter from a Yjs document.
  * Uses @hocuspocus/transformer to convert the XmlFragment to ProseMirror JSON.
+ *
+ * Scalar fields live in Y.Map("frontmatter"), while authors/affiliations/links
+ * each have their own Y.Array for concurrent-safe editing.
  */
 function extractFromYDoc(ydoc: Y.Doc): {
   json: Record<string, unknown>;
   frontmatter: Record<string, unknown>;
+  authors: AuthorObj[];
+  affiliations: AffiliationObj[];
 } {
   const metaMap = ydoc.getMap("frontmatter");
   const frontmatter: Record<string, unknown> = {};
@@ -60,10 +81,17 @@ function extractFromYDoc(ydoc: Y.Doc): {
     frontmatter[key] = value;
   });
 
+  const yAuthors = ydoc.getArray<AuthorObj>("frontmatter.authors");
+  const yAffiliations = ydoc.getArray<AffiliationObj>("frontmatter.affiliations");
+  const authors = yAuthors.toArray();
+  const affiliations = yAffiliations.toArray();
+
   const sharedTypes: string[] = [];
   ydoc.share.forEach((_value, key) => sharedTypes.push(key));
   console.log("[publish] Y.Doc shared types:", sharedTypes);
-  console.log("[publish] frontmatter:", JSON.stringify(frontmatter));
+  console.log("[publish] frontmatter scalars:", JSON.stringify(frontmatter));
+  console.log("[publish] authors:", JSON.stringify(authors));
+  console.log("[publish] affiliations:", JSON.stringify(affiliations));
 
   const fragment = ydoc.getXmlFragment("default");
   console.log("[publish] XmlFragment 'default' length:", fragment.length);
@@ -86,13 +114,15 @@ function extractFromYDoc(ydoc: Y.Doc): {
   console.log("[publish] Full JSON (truncated):", JSON.stringify(json).slice(0, 2000));
 
   if (json && typeof json === "object" && json.type === "doc") {
-    return { json, frontmatter };
+    return { json, frontmatter, authors, affiliations };
   }
 
   console.warn("[publish] TiptapTransformer returned unexpected format, using fallback");
   return {
     json: { type: "doc", content: [{ type: "paragraph" }] },
     frontmatter,
+    authors,
+    affiliations,
   };
 }
 
@@ -120,16 +150,20 @@ export async function publishDocument(docName: string, token?: string): Promise<
   Y.applyUpdate(ydoc, new Uint8Array(data));
 
   // Extract content
-  const { json, frontmatter } = extractFromYDoc(ydoc);
+  const { json, frontmatter, authors, affiliations } = extractFromYDoc(ydoc);
 
-  // Build metadata
+  // Build metadata - authors come from Y.Array, date from "published" scalar
   const meta: PublishMeta = {
     title: (frontmatter.title as string) || docName,
     description: (frontmatter.description as string) || "",
-    authors: Array.isArray(frontmatter.authors)
-      ? (frontmatter.authors as string[])
-      : [],
-    date: (frontmatter.date as string) || new Date().toISOString(),
+    authors: authors.map((a) => ({
+      name: a.name,
+      url: a.url,
+      affiliationNames: (a.affiliations || [])
+        .map((idx) => affiliations[idx - 1]?.name)
+        .filter(Boolean) as string[],
+    })),
+    date: (frontmatter.published as string) || (frontmatter.date as string) || new Date().toISOString(),
   };
 
   const css = loadCSS();