feat: add support for rendering page mentions

JohannesRudolph · JohannesRudolph · commit e23954b075df · 2021-10-25T23:04:36.000+02:00
diff --git a/src/BlockRenderer.ts b/src/BlockRenderer.ts
@@ -16,6 +16,7 @@ import { Database } from "./Database";
 import { DeferredRenderer } from "./DeferredRenderer";
 import { RichTextRenderer } from "./RichTextRenderer";
 import { logger } from "./logger";
+import { LinkRenderer } from "./LinkRenderer";
 
 const debug = require("debug")("blocks");
 
@@ -65,48 +66,49 @@ export type Block =
 export class BlockRenderer {
   constructor(
     private readonly deferredRenderer: DeferredRenderer,
-    private readonly richText: RichTextRenderer
+    private readonly richText: RichTextRenderer,
+    private readonly linkRenderer: LinkRenderer
   ) {}
 
   async renderBlock(block: Block, assets: AssetWriter): Promise<string> {
     switch (block.type) {
       case "paragraph":
-        return this.richText.renderMarkdown(block.paragraph.text);
+        return await this.richText.renderMarkdown(block.paragraph.text);
       case "heading_1":
-        return "# " + this.richText.renderMarkdown(block.heading_1.text);
+        return "# " + await this.richText.renderMarkdown(block.heading_1.text);
       case "heading_2":
-        return "## " + this.richText.renderMarkdown(block.heading_2.text);
+        return "## " + await this.richText.renderMarkdown(block.heading_2.text);
       case "heading_3":
-        return "### " + this.richText.renderMarkdown(block.heading_3.text);
+        return "### " + await this.richText.renderMarkdown(block.heading_3.text);
       case "bulleted_list_item":
         return (
-          "- " + this.richText.renderMarkdown(block.bulleted_list_item.text)
+          "- " + await this.richText.renderMarkdown(block.bulleted_list_item.text)
         );
       case "numbered_list_item":
         return (
-          "1. " + this.richText.renderMarkdown(block.numbered_list_item.text)
+          "1. " + await this.richText.renderMarkdown(block.numbered_list_item.text)
         );
       case "to_do":
-        return "[ ] " + this.richText.renderMarkdown(block.to_do.text);
+        return "[ ] " + await this.richText.renderMarkdown(block.to_do.text);
       case "image":
         return await this.renderImage(block, assets);
       case "quote":
         block as any;
-        return "> " + this.richText.renderMarkdown((block as any).quote.text);
+        return "> " + await this.richText.renderMarkdown((block as any).quote.text);
       case "code":
         return (
           "```" +
           block.code.language +
           "\n" +
-          this.richText.renderMarkdown(block.code.text) +
+          await this.richText.renderMarkdown(block.code.text) +
           "\n```"
         );
       case "callout":
         return (
           "> " +
           this.renderIcon(block.callout.icon) +
           " " +
-          this.richText.renderMarkdown(block.callout.text)
+          await this.richText.renderMarkdown(block.callout.text)
         );
       case "divider":
         return "---";
@@ -154,7 +156,7 @@ export class BlockRenderer {
         cols.map((c, i) => {
           const content = escapeTableCell(r.properties.values[c]);
           return i == 0
-            ? this.renderMarkdownLink(content, r.file.substr("docs".length)) // make the first cell a relative link to the page
+            ? this.linkRenderer.renderPageLink(content, r) // make the first cell a relative link to the page
             : content;
         })
       )
@@ -195,10 +197,6 @@ export class BlockRenderer {
     }
   }
 
-  private renderMarkdownLink(text: string, url: string): string {
-    return `[${text}](${url})`;
-  }
-
   private renderUnsupported(msg: string, obj: any): string {
     logger.warn(msg);
     debug(msg + "\n%O", obj);
diff --git a/src/Database.ts b/src/Database.ts
@@ -1,5 +1,5 @@
 import { DatabaseConfig } from "./SyncConfig";
-import { RenderPageTask } from "./RenderedPageTask";
+import { RenderPageTask } from "./RenderPageTask";
 
 export interface Database {
   config: DatabaseConfig;
diff --git a/src/DatabaseRenderer.ts b/src/DatabaseRenderer.ts
@@ -1,28 +1,18 @@
 import { Client } from "@notionhq/client";
-import { DatabaseConfig } from "./SyncConfig";
 import { Database } from "./Database";
 import { DeferredRenderer } from "./DeferredRenderer";
 import { SyncConfig } from ".";
+import { lookupDatabaseConfig } from "./config";
 
-export class DatabasePageRenderer {
+export class DatabaseRenderer {
   constructor(
     readonly publicApi: Client,
     readonly deferredRenderer: DeferredRenderer,
     readonly config: SyncConfig
   ) {}
 
   async renderDatabase(databaseId: string): Promise<Database> {
-    const fallbackDbConfig: DatabaseConfig = {
-      outDir:
-        databaseId === this.config.cmsDatabaseId
-          ? this.config.outDir
-          : this.config.outDir + "/" + databaseId,
-      properties: {
-        category: "Category",
-      },
-    };
-    const dbConfig: DatabaseConfig =
-      this.config.databases[databaseId] || fallbackDbConfig;
+    const dbConfig = lookupDatabaseConfig(this.config, databaseId);
 
     const db = await this.publicApi.databases.retrieve({
       database_id: databaseId,
@@ -40,12 +30,15 @@ export class DatabasePageRenderer {
       );
     }
 
-    const tasks = allPages.results.map((x) =>
+    const prepareRenderPageTasks = allPages.results.map((x) =>
       this.deferredRenderer.renderPage(x, dbConfig)
     );
 
+    // note: the await here is not actually starting to render the pages, however it prepares the page render task
+    const renderPageTasks = await Promise.all(prepareRenderPageTasks);
+
     return {
-      pages: tasks,
+      pages: renderPageTasks,
       config: dbConfig,
     };
   }
diff --git a/src/DeferredRenderer.ts b/src/DeferredRenderer.ts
@@ -1,16 +1,16 @@
 import { Page } from "@notionhq/client/build/src/api-types";
 import { DatabaseConfig } from "./SyncConfig";
 import { Database } from "./Database";
-import { DatabasePageRenderer } from "./DatabasePageRenderer";
+import { DatabaseRenderer } from "./DatabaseRenderer";
 import { logger } from "./logger";
 import { PageRenderer } from "./PageRenderer";
-import { RenderPageTask as RenderPageTask } from "./RenderedPageTask";
+import { RenderPageTask as RenderPageTask } from "./RenderPageTask";
 import { RenderedPage } from "./RenderedPage";
 
 const debug = require("debug")("rendering");
 
 export class DeferredRenderer {
-  private dbRenderer!: DatabasePageRenderer;
+  private dbRenderer!: DatabaseRenderer;
   private pageRenderer!: PageRenderer;
 
   private pageQueue: (() => Promise<any>)[] = [];
@@ -19,7 +19,7 @@ export class DeferredRenderer {
   private readonly renderedPages = new Map<string, RenderPageTask>();
 
   public initialize(
-    dbRenderer: DatabasePageRenderer,
+    dbRenderer: DatabaseRenderer,
     pageRenderer: PageRenderer
   ) {
     this.dbRenderer = dbRenderer;
@@ -40,14 +40,15 @@ export class DeferredRenderer {
     return fetched;
   }
 
-  public renderPage(page: Page, config: DatabaseConfig): RenderPageTask {
+  public async renderPage(page: Page, config: DatabaseConfig): Promise<RenderPageTask> {
     const cached = this.renderedPages.get(page.id);
     if (cached) {
       debug("page cache hit " + page.id);
       return cached;
     }
 
-    const task = this.pageRenderer.renderPage(page, config);
+    const task = await this.pageRenderer.renderPage(page, config);
+
     this.renderedPages.set(page.id, task);
     this.pageQueue.push(task.render);
 
diff --git a/src/LinkRenderer.ts b/src/LinkRenderer.ts
@@ -0,0 +1,16 @@
+import { SyncConfig } from ".";
+import { RenderPageTask } from "./RenderPageTask";
+
+export class LinkRenderer {
+  constructor(private readonly config: SyncConfig) {}
+
+  renderUrlLink(text: string, url: string): string {
+    return `[${text}](${url})`;
+  }
+
+  renderPageLink(text: string, page: RenderPageTask): string {
+    const url = page.file.substr(this.config.outDir.length);
+
+    return this.renderUrlLink(text, url);
+  }
+}
diff --git a/src/MentionedPageRenderer.ts b/src/MentionedPageRenderer.ts
@@ -0,0 +1,42 @@
+import { APIErrorCode, Client } from "@notionhq/client";
+import { DeferredRenderer } from "./DeferredRenderer";
+import { SyncConfig } from ".";
+import { RenderPageTask } from "./RenderPageTask";
+import { lookupDatabaseConfig } from "./config";
+
+export class MentionedPageRenderer {
+  constructor(
+    readonly publicApi: Client,
+    readonly deferredRenderer: DeferredRenderer,
+    readonly config: SyncConfig
+  ) {}
+
+  async renderPage(pageId: string): Promise<RenderPageTask | null> {
+    const page = await this.tryFindPage(pageId);
+
+    if (!page) {
+      return null;
+    }
+
+    let databaseId: string | null = null;
+    if (page.parent.type === "database_id") {
+      databaseId = page.parent.database_id;
+    }
+
+    const dbConfig = lookupDatabaseConfig(this.config, databaseId);
+
+    return this.deferredRenderer.renderPage(page, dbConfig);
+  }
+
+  async tryFindPage(pageId: string) {
+    try {
+      return await this.publicApi.pages.retrieve({ page_id: pageId });
+    } catch (error: any) {
+      if (error.code === APIErrorCode.ObjectNotFound) {
+        return null;
+      } else {
+        throw error;
+      }
+    }
+  }
+}
diff --git a/src/PageRenderer.ts b/src/PageRenderer.ts
@@ -6,7 +6,7 @@ import { AssetWriter } from "./AssetWriter";
 import { FrontmatterRenderer } from "./FrontmatterRenderer";
 import { RecursiveBodyRenderer } from "./RecursiveBodyRenderer";
 import { slugify } from "./slugify";
-import { RenderPageTask as RenderPageTask } from "./RenderedPageTask";
+import { RenderPageTask as RenderPageTask } from "./RenderPageTask";
 import { DatabaseConfig } from "./SyncConfig";
 import { PropertiesParser } from "./PropertiesParser";
 import { logger } from "./logger";
@@ -20,8 +20,12 @@ export class PageRenderer {
     readonly bodyRenderer: RecursiveBodyRenderer
   ) {}
 
-  renderPage(page: Page, config: DatabaseConfig): RenderPageTask {
-    const props = this.propertiesParser.parse(page, config);
+  async renderPage(page: Page, config: DatabaseConfig): Promise<RenderPageTask> {
+    if (page.archived){
+      logger.warn(`rendering archived page ${page.url}`);
+    }
+
+    const props = await this.propertiesParser.parse(page, config);
 
     const categorySlug = slugify(props.meta.category);
     const destDir = `${config.outDir}/${categorySlug}`;
diff --git a/src/PropertiesParser.ts b/src/PropertiesParser.ts
@@ -11,16 +11,16 @@ const debug = require("debug")("properties");
 export class PropertiesParser {
   constructor(private readonly richText: RichTextRenderer) {}
 
-  public parse(page: Page, config: DatabaseConfig): PageProperties {
+  public async parse(page: Page, config: DatabaseConfig): Promise<PageProperties> {
     const properties: Record<string, any> = {};
     const keys = new Map<string, string>();
 
     let title: string | null = null;
     let category: string | null = null;
     let order: number | undefined = undefined;
 
-    Object.entries(page.properties).forEach(([name, value]) => {
-      const parsedValue = this.parsePropertyValue(value);
+    for (const [name, value] of Object.entries(page.properties)) {
+      const parsedValue = await this.parsePropertyValue(value);
 
       if (
         !config.properties.include ||
@@ -42,7 +42,7 @@ export class PropertiesParser {
       if (name === "order") {
         order = parsedValue;
       }
-    });
+    }
 
     if (!title) {
       throw this.errorMissingRequiredProperty("of type 'title'", page);
@@ -59,21 +59,21 @@ export class PropertiesParser {
         title: title, // notion API always calls it name
         category: category,
         order: order,
-        ...config.additionalPageFrontmatter
+        ...config.additionalPageFrontmatter,
       },
       values: properties,
       keys: this.sortKeys(config, keys),
     };
   }
 
-  private parsePropertyValue(value: PropertyValue): any {
+  private async parsePropertyValue(value: PropertyValue): Promise<any> {
     switch (value.type) {
       case "number":
         return value.number;
       case "title":
-        return this.richText.renderMarkdown(value.title);
+        return await this.richText.renderMarkdown(value.title);
       case "rich_text":
-        return this.richText.renderMarkdown(value.rich_text);
+        return await this.richText.renderMarkdown(value.rich_text);
       case "select":
         return value.select?.name;
       case "multi_select":
diff --git a/src/RenderPageTask.ts b/src/RenderPageTask.ts
diff --git a/src/RichTextRenderer.ts b/src/RichTextRenderer.ts
diff --git a/src/config.ts b/src/config.ts
diff --git a/src/sync.ts b/src/sync.ts
