s.active = false; + onClose(): Promise { + this.contentEl.empty(); + return Promise.resolve(); } } @@ -151,18 +266,27 @@ const renderCard = async ( ): Promise => { const cardEl = createDiv({ cls: "card-forge-card" }); const headerEl = cardEl.createDiv({ cls: "cf-header" }); - const titleEl = headerEl.createDiv({ cls: "cf-title" }); - const typeEl = headerEl.createDiv({ cls: "cf-type" }); const bodyEl = cardEl.createDiv({ cls: "cf-body" }); + const footerEl = cardEl.createDiv({ cls: "cf-footer" }); + const typeEl = footerEl.createDiv({ cls: "cf-type" }); + const numberEl = footerEl.createDiv({ cls: "cf-number" }); - const metadata = app.metadataCache.getFileCache(file)?.frontmatter || {}; - titleEl.appendText(metadata["card-forge-title"] || file.basename); - typeEl.appendText(metadata["card-forge-type"] || ""); + const metadata = (app.metadataCache.getFileCache(file)?.frontmatter || + {}) as Record; + headerEl.appendText((metadata[FRONTMATTER_TITLE] as string) || file.basename); + typeEl.appendText((metadata[FRONTMATTER_TYPE] as string) || ""); if (metadata["cssclasses"]) { - cardEl.classList.add(metadata["cssclasses"]); + cardEl.classList.add(metadata["cssclasses"] as string); + } + const rawNumber = metadata[FRONTMATTER_NUMBER]; + if (rawNumber !== undefined && typeof rawNumber === "number") { + // pad number with zeroes + numberEl.appendText( + rawNumber <= 999 ? `00${rawNumber}`.slice(-3) : `${rawNumber}`, + ); } - MarkdownRenderer.render( + await MarkdownRenderer.render( app, await app.vault.cachedRead(file), bodyEl, @@ -172,3 +296,118 @@ const renderCard = async ( return cardEl; }; + +function resolveAttachmentFolder(app: App, file: TFile): string { + const setting = app.vault.getConfig("attachmentFolderPath"); + if (!setting) { + // Same folder as current file + return file.parent?.path ?? ""; + } + if (setting.startsWith("./")) { + // Subfolder under current folder + return file.parent + ? `${file.parent.path}/${setting.slice(2)}` + : setting.slice(2); + } + // Fixed folder + return setting; +} + +const renderCardToBlob = async ( + app: App, + file: TFile, +): Promise> => { + const component = new Component(); + component.load(); + const cardEl = await renderCard(app, file, component); + + const mount = createDiv(); + mount.className = "card-forge-render-surface"; + document.body.appendChild(mount); + + try { + mount.appendChild(cardEl); + + // wait for layout + await new Promise(requestAnimationFrame); + + return await toBlob(cardEl, { + pixelRatio: 4, + width: 238, + height: 332, + }); + } finally { + component.unload(); + mount.remove(); + } +}; + +const renderCardToFile = async ( + app: App, + file: TFile, +) => { + let data = await ( + await renderCardToBlob(app, file) + )?.arrayBuffer(); + if (!data) { + new Notice("Failed to render card to file"); + return; + } + + const meta = app.metadataCache.getFileCache(file); + const frontmatter = (meta?.frontmatter || {}) as Record; + const cf_type: string = (frontmatter[FRONTMATTER_TYPE] as string) || "unknown"; + + const rawNum = frontmatter[FRONTMATTER_NUMBER]; + const cf_num: number = typeof rawNum === "number" ? rawNum : 0; + let cf_num_pad = cf_num <= 999 ? `00${cf_num}`.slice(-3) : `${cf_num}`; + + const attachments = resolveAttachmentFolder(app, file); + const name = file.basename.toLowerCase().replace(/ /g, "-"); + const path = `${attachments}/cf-${cf_type}-${cf_num_pad}-${name}.png`.replace( + /^\/+/, + "", + ); + + let card = app.vault.getFileByPath(path); + if (card) { + await app.vault.modifyBinary(card, data); + } else { + card = await app.vault.createBinary(path, data); + } + + // now update the `card-image` property on the current editor file + await app.fileManager.processFrontMatter( + file, + (meta: Record) => { + meta[FRONTMATTER_IMAGE] = a

Card Forge