close #36

source/generate/parseMarkdown.ts

@@ -50,17 +50,6 @@ const md = markdownIt({
 	.use(highlightLines)
 	.use(markdownItFootnote)
 
-export default function parseMarkdown(markdownRaw: string): string {
-	return (
-		// todo: accurately calculate start and end of front matter
-		md.render(markdownRaw.slice(nthIndex(markdownRaw, "---", 2) + 3)) || ""
-	)
-}
-
-export function generateToc(markdownRaw: string): string {
-	return md.render(toc(markdownRaw).content)
-}
-
 /**
  * parse the front matter if it exists
  *
@@ -68,7 +57,7 @@ export function generateToc(markdownRaw: string): string {
  * @param {string} path - filename of the markdown file
  * @param {ParseMode} mode
  */
-export function parseFrontMatter(
+export default function parseMarkdown(
 	markdownRaw: string,
 	path: string,
 	mode: ParseMode
@@ -85,14 +74,38 @@ export function parseFrontMatter(
 			throw Error(`Date is not defined in file: ${path}`)
 	}
 
-	const dom = new JSDOM(parseMarkdown(markdownRaw))
+	//
+	// work with rendered DOM
+	//
+
+	const dom = new JSDOM(
+		md.render(markdownRaw.slice(nthIndex(markdownRaw, "---", 2) + 3)) || ""
+	)
 
 	// add .hljs class to all block codes
+
 	dom.window.document.querySelectorAll("pre > code").forEach((item) => {
 		item.classList.add("hljs")
 	})
 
+	// add parent div to tables (horizontally scroll table on small displays)
+
+	dom.window.document.querySelectorAll("table").forEach((item) => {
+		// `element` is the element you want to wrap
+		const parent = item.parentNode
+		if (!parent) return // stop if table doesn't have a parent node
+		const wrapper = dom.window.document.createElement("div")
+		wrapper.style.overflowX = "auto"
+
+		parent.replaceChild(wrapper, item)
+		wrapper.appendChild(item)
+	})
+
 	frontMatter.content = dom.window.document.documentElement.innerHTML
 
 	return frontMatter as MarkdownData
 }
+
+export function generateToc(markdownRaw: string): string {
+	return md.render(toc(markdownRaw).content)
+}

source/generate/recursiveParse/index.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import readTimeEstimate from "read-time-estimate" // post read time estimation
 
 import { path2FileOrFolderName, path2URL } from "../util"
-import { parseFrontMatter } from "../parseMarkdown"
+import parseMarkdown from "../parseMarkdown"
 
 import { ParseMode } from "../../types/types"
 import parsePost from "./parsePost"
@@ -69,7 +69,7 @@ function parseFile(mode: ParseMode, path: string): void {
 	 */
 
 	const markdownRaw = fs.readFileSync(path, "utf8")
-	const markdownData = parseFrontMatter(markdownRaw, path, mode)
+	const markdownData = parseMarkdown(markdownRaw, path, mode)
 	const { humanizedDuration, totalWords } = readTimeEstimate(
 		markdownData.content,
 		275,

source/src/styles/globalStyle.tsx

@@ -117,25 +117,27 @@ const kbdCSS = css`
 const tableCSS = css`
 	table {
 		border-collapse: collapse;
+		border-spacing: 0;
 		width: 100%;
-	}
 
-	table td,
+		td,
-	table th {
+		th {
-		border: ${(props) =>
+			padding: 8px;
-			theming.theme(props.theme.currentTheme, {
+			border: ${(props) =>
-				light: "1px solid #ddd",
+				theming.theme(props.theme.currentTheme, {
-				dark: "1px solid #777777",
+					light: "1px solid #ddd",
-			})};
+					dark: "1px solid #777777",
-		padding: 8px;
+				})};
-	}
+		}
 
-	table tr:nth-child(even) {
+		/* table alternating color */
-		background-color: ${(props) =>
+		tr:nth-child(even) {
-			theming.theme(props.theme.currentTheme, {
+			background-color: ${(props) =>
-				light: "#f2f2f2",
+				theming.theme(props.theme.currentTheme, {
-				dark: "#21272E",
+					light: "#f2f2f2",
-			})};
+					dark: "#21272E",
+				})};
+		}
 	}
 `