✨ Add support for annotations in the page title (color, code, underline, etc.)

Author: Sergei Orlov

package.json

@@ -33,7 +33,8 @@
 	},
 	"readme": "https://github.com/orlowdev/gatsby-source-notion-api#readme",
 	"dependencies": {
-		"node-fetch": "^2.6.1"
+		"node-fetch": "^2.6.1",
+		"or-pipets": "^1.0.1"
 	},
 	"devDependencies": {
 		"ava": "^3.15.0",

src/block-to-string.js

@@ -0,0 +1,70 @@
+const { pipeExtend } = require("or-pipets")
+
+const pick = (key) => (obj) => obj[key]
+
+const ifTrue = (predicate, transformer, orElse) => (data) =>
+	predicate(data) ? transformer(data) : orElse(data)
+
+const id = (x) => x
+
+const annotateBold = ifTrue(pick("bold"), ({ content }) => ({ content: `**${content}**` }), id)
+const annotateItalic = ifTrue(pick("italic"), ({ content }) => ({ content: `_${content}_` }), id)
+const annotateCode = ifTrue(pick("code"), ({ content }) => ({ content: `\`${content}\`` }), id)
+const annotateStrikethrough = ifTrue(
+	pick("strikethrough"),
+	({ content }) => ({ content: `~~${content}~~` }),
+	id,
+)
+const annotateUnderline = ifTrue(
+	pick("underline"),
+	({ content }) => ({ content: `<u>${content}</u>` }),
+	id,
+)
+const annotateColor = ifTrue(
+	({ color }) => color != "default",
+	({ content, color }) => ({ content: `<span notion-color="${color}">${content}</span>` }),
+	id,
+)
+const annotateLink = ifTrue(
+	pick("link"),
+	({ content, link }) => ({ content: `[${content}](${link.url ? link.url : link})` }),
+	id,
+)
+
+const stylize = pipeExtend(annotateBold)
+	.pipeExtend(annotateItalic)
+	.pipeExtend(annotateCode)
+	.pipeExtend(annotateStrikethrough)
+	.pipeExtend(annotateUnderline)
+	.pipeExtend(annotateColor)
+	.pipeExtend(annotateLink)
+
+exports.blockToString = (textBlocks) =>
+	textBlocks.reduce((text, textBlock) => {
+		const data = {
+			...textBlock.text,
+			...textBlock.annotations,
+		}
+
+		if (textBlock.type == "mention") {
+			if (textBlock.mention.type == "user") {
+				data.content = textBlock.plain_text
+			}
+
+			if (textBlock.mention.type == "date") {
+				if (textBlock.mention.date.end) {
+					data.content = `${textBlock.mention.date.start} → ${textBlock.mention.date.start}`
+				} else {
+					data.content = textBlock.mention.date.start
+				}
+
+				data.content = `<time datetime="${data.content}">${data.content}</time>`
+			}
+
+			if (textBlock.mention.type == "page") {
+				data.content = textBlock.plain_text
+			}
+		}
+
+		return text.concat(stylize.process(data).content)
+	}, "")

src/transformers/get-page-title.js

@@ -1,33 +1,9 @@
+const { blockToString } = require("../block-to-string")
+
 exports.getNotionPageTitle = (page) => {
 	const titleProperty = Object.keys(page.properties).find(
 		(key) => page.properties[key].type == "title",
 	)
 
-	return page.properties[titleProperty].title
-		.reduce((acc, chunk) => {
-			if (chunk.type == "text") {
-				return acc.concat(chunk.plain_text)
-			}
-
-			if (chunk.type == "mention") {
-				if (chunk.mention.type == "user") {
-					return acc.concat(chunk.plain_text)
-				}
-
-				if (chunk.mention.type == "date") {
-					if (chunk.mention.date.end) {
-						return acc.concat(`${chunk.mention.date.start} → ${chunk.mention.date.start}`)
-					}
-
-					return acc.concat(chunk.mention.date.start)
-				}
-
-				if (chunk.mention.type == "page") {
-					return acc.concat(chunk.plain_text)
-				}
-			}
-
-			return acc
-		}, "")
-		.trim()
+	return blockToString(page.properties[titleProperty].title)
 }

yarn.lock

@@ -2259,6 +2259,11 @@ optionator@^0.8.1:
     type-check "~0.3.2"
     word-wrap "~1.2.3"
 
+or-pipets@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/or-pipets/-/or-pipets-1.0.1.tgz#0699c99f95a535614a585cd7fb3a1a216a47b5c0"
+  integrity sha512-xgIIdB4w00pbhtNPYLF/caifwbc4KrE7jy4WqiDRzRrC2g3YVR4ypRwbKRA/bXzftQEA2SK8c+wKI2R7kqKiLQ==
+
 ora@^5.0.0, ora@^5.2.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.0.tgz#42eda4855835b9cd14d33864c97a3c95a3f56bf4"