Skip to content

Commit

Permalink
Merge pull request #122 from whitep4nth3r/add-tables-to-rich-text
Browse files Browse the repository at this point in the history 
Add tables to rich text renderer
  • Loading branch information
@whitep4nth3r
whitep4nth3r authored Jan 26, 2024
2 parents 61a4921 + 2f7e33e commit dc9fe0b
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 25 deletions.
94 changes: 74 additions & 20 deletions src/_components/richText.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,16 @@ const BlogPostEmbed = require("./blogPostEmbed");
const LighthouseComparison = require("./lighthouseComparison");
const DeployToNetlifyButton = require("./deployToNetlifyButton");

function stripParaTags(string) {
return string.replace(/(<p[^>]+?>|<p>|<\/p>)/gi, "");
}

function getRichTextRenderOptions(links, options) {
const { absoluteUrls, renderHeadingLinks, renderRssFriendlyImg } = options;

const assetBlockMap = new Map(links?.assets?.block?.map((asset) => [asset.sys.id, asset]));
const assetBlockMap = new Map(
links?.assets?.block?.map((asset) => [asset.sys.id, asset]),
);

const inlineEntryMap = new Map();
const blockEntryMap = new Map();
Expand All @@ -42,13 +48,17 @@ function getRichTextRenderOptions(links, options) {
},
renderNode: {
[INLINES.HYPERLINK]: (node, next) => {
const openInNewWindow = node.data.uri.includes("https://") ? `target="_blank"` : "";
const includeNoFollow = node.data.uri.includes("https://whitep4nth3r.com")
const openInNewWindow = node.data.uri.includes("https://")
? `target="_blank"`
: "";
const includeNoFollow = node.data.uri.includes(
"https://whitep4nth3r.com",
)
? ""
: ` rel="nofollow noreferrer"`;
return `<a href="${node.data.uri}" ${openInNewWindow}${includeNoFollow}>${next(
node.content,
)}</a>`;
return `<a href="${
node.data.uri
}" ${openInNewWindow}${includeNoFollow}>${next(node.content)}</a>`;
},
[INLINES.EMBEDDED_ENTRY]: (node, next) => {
const entry = inlineEntryMap.get(node.data.target.sys.id);
Expand All @@ -64,12 +74,29 @@ function getRichTextRenderOptions(links, options) {
return null;
}
},
[BLOCKS.TABLE]: (
node,
next,
) => `<div class="post__tableWrapper"><table class="post__table">
<tbody>${next(node.content)}</tbody>
</table></div>`,
[BLOCKS.TABLE_HEADER_CELL]: (node, next) =>
`<th class="post__tableHeader">${stripParaTags(
next(node.content),
)}</th>`,
[BLOCKS.TABLE_ROW]: (node, next) =>
`<tr class="post__tableRow">${next(node.content)}</tr>`,
[BLOCKS.TABLE_CELL]: (node, next) =>
`<td class="post__tableCell">${stripParaTags(next(node.content))}</td>`,
[BLOCKS.HR]: (text) => `<hr class="post__hr" />`,
[BLOCKS.HEADING_1]: (node, next) => `<h1 class="post__h1">${next(node.content)}</h1>`,
[BLOCKS.HEADING_1]: (node, next) =>
`<h1 class="post__h1">${next(node.content)}</h1>`,
[BLOCKS.HEADING_2]: (node, next) => {
if (renderHeadingLinks) {
return /*html*/ `
<a href="#${Tools.slugifyString(next(node.content))}" id="${Tools.slugifyString(
<a href="#${Tools.slugifyString(
next(node.content),
)}" id="${Tools.slugifyString(
next(node.content),
)}" class="post__linkedHeading">
<h2 class="post__h2">${next(node.content)}</h2>
Expand All @@ -81,7 +108,9 @@ function getRichTextRenderOptions(links, options) {
[BLOCKS.HEADING_3]: (node, next) => {
if (renderHeadingLinks) {
return /*html*/ `
<a href="#${Tools.slugifyString(next(node.content))}" id="${Tools.slugifyString(
<a href="#${Tools.slugifyString(
next(node.content),
)}" id="${Tools.slugifyString(
next(node.content),
)}" class="post__linkedHeading">
<h3 class="post__h3">${next(node.content)}</h3>
Expand All @@ -90,12 +119,18 @@ function getRichTextRenderOptions(links, options) {
return `<h3 class="post__h3">${next(node.content)}</h3>`;
}
},
[BLOCKS.HEADING_4]: (node, next) => `<h4 class="post__h4">${next(node.content)}</h4>`,
[BLOCKS.HEADING_5]: (node, next) => `<h5 class="post__h5">${next(node.content)}</h5>`,
[BLOCKS.HEADING_6]: (node, next) => `<h6 class="post__h6">${next(node.content)}</h6>`,
[BLOCKS.PARAGRAPH]: (node, next) => `<p class="post__p">${next(node.content)}</p>`,
[BLOCKS.HEADING_4]: (node, next) =>
`<h4 class="post__h4">${next(node.content)}</h4>`,
[BLOCKS.HEADING_5]: (node, next) =>
`<h5 class="post__h5">${next(node.content)}</h5>`,
[BLOCKS.HEADING_6]: (node, next) =>
`<h6 class="post__h6">${next(node.content)}</h6>`,
[BLOCKS.PARAGRAPH]: (node, next) =>
`<p class="post__p">${next(node.content)}</p>`,
[BLOCKS.QUOTE]: (node, next) =>
`<blockquote class="post__blockquote">${next(node.content)}</blockquote>`,
`<blockquote class="post__blockquote">${next(
node.content,
)}</blockquote>`,
[BLOCKS.UL_LIST]: (node, next) => `<ul>${next(node.content)}</ul>`,
[BLOCKS.OL_LIST]: (node, next) => `<ol>${next(node.content)}</ol>`,
[BLOCKS.LIST_ITEM]: (node, next) => `<li>${next(node.content)}</li>`,
Expand All @@ -105,9 +140,15 @@ function getRichTextRenderOptions(links, options) {

switch (__typename) {
case "DeployToNetlifyButton":
return DeployToNetlifyButton({ title: entry.title, deployUrl: entry.deployUrl });
return DeployToNetlifyButton({
title: entry.title,
deployUrl: entry.deployUrl,
});
case "CodePenEmbed":
return CodePenEmbed({ embedCode: entry.embedCode, title: entry.title });
return CodePenEmbed({
embedCode: entry.embedCode,
title: entry.title,
});
case "BlogPost":
return BlogPostEmbed({ post: entry });
case "LighthouseComparison":
Expand All @@ -123,11 +164,22 @@ function getRichTextRenderOptions(links, options) {
case "VideoEmbed":
return VideoEmbed({ embedUrl: entry.embedUrl, title: entry.title });
case "ArcadeEmbed":
return ArcadeEmbed({ embedCode: entry.embedCode, title: entry.title });
return ArcadeEmbed({
embedCode: entry.embedCode,
title: entry.title,
});
case "Callout":
return Callout({ title: entry.title, content: entry.content, emoji: entry.emoji });
return Callout({
title: entry.title,
content: entry.content,
emoji: entry.emoji,
});
case "CodeBlock":
return CodeBlock({ code: entry.code, lang: entry.language, isDiff: entry.isDiff });
return CodeBlock({
code: entry.code,
lang: entry.language,
isDiff: entry.isDiff,
});
default:
return null;
}
Expand All @@ -141,7 +193,9 @@ function getRichTextRenderOptions(links, options) {
// One image only for RSS feed
return `<img src="${url}" alt="${description}" height="${height}" width="${width}" />`;
} else {
return `<div class="post__responsiveImage">${ResponsiveImage({ image })}</div>`;
return `<div class="post__responsiveImage">${ResponsiveImage({
image,
})}</div>`;
}
},
},
Expand Down
45 changes: 43 additions & 2 deletions src/_css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit dc9fe0b

Please sign in to comment.