From 2b1f753d72d77568c4a95381682629d795059d99 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Sat, 26 Jan 2019 16:55:28 -0500
Subject: [PATCH] site: tidy code highlighting

---
 site/src/routes/api/blog/_posts.js | 91 ++++++++++++++----------------
 site/src/routes/guide/_sections.js | 32 ++---------
 2 files changed, 48 insertions(+), 75 deletions(-)

diff --git a/site/src/routes/api/blog/_posts.js b/site/src/routes/api/blog/_posts.js
index 5a9765dfd0..8b70483cd1 100644
--- a/site/src/routes/api/blog/_posts.js
+++ b/site/src/routes/api/blog/_posts.js
@@ -3,58 +3,53 @@ import path from 'path';
 import process_markdown from '../../../utils/_process_markdown.js';
 import marked from 'marked';
 
-// import hljs from 'highlight.js';
-import prismjs from 'prismjs'; // prism-highlighter – smaller footprint [hljs: 192.5k]
-require('prismjs/components/prism-bash');
+import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash';
 
 // map lang to prism-language-attr
 const prismLang = {
-  bash: 'bash',
-  html: 'markup',
-  js: 'javascript',
-  css: 'css',
+	bash: 'bash',
+	html: 'markup',
+	js: 'javascript',
+	css: 'css',
 };
 
 export default function() {
-  return fs
-    .readdirSync('content/blog')
-    .map(file => {
-      if (path.extname(file) !== '.md') return;
-
-      const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8');
-
-      const { content, metadata } = process_markdown(markdown);
-
-      const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack
-      metadata.dateString = date.toDateString();
-
-      const renderer = new marked.Renderer();
-
-      renderer.code = (source, lang) => {
-        let plang = prismLang[lang];
-        const highlighted = Prism.highlight(
-          source,
-          Prism.languages[plang],
-          lang,
-        );
-
-        return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
-      };
-
-      const html = marked(
-        content.replace(/^\t+/gm, match => match.split('\t').join('  ')),
-        {
-          renderer,
-        },
-      );
-
-      return {
-        html,
-        metadata,
-        slug: file.replace(/^[\d-]+/, '').replace(/\.md$/, ''),
-      };
-    })
-    .sort((a, b) => {
-      return a.metadata.pubdate < b.metadata.pubdate ? 1 : -1;
-    });
+	return fs
+		.readdirSync('content/blog')
+		.map(file => {
+			if (path.extname(file) !== '.md') return;
+
+			const markdown = fs.readFileSync(`content/blog/${file}`, 'utf-8');
+
+			const { content, metadata } = process_markdown(markdown);
+
+			const date = new Date(`${metadata.pubdate} EDT`); // cheeky hack
+			metadata.dateString = date.toDateString();
+
+			const renderer = new marked.Renderer();
+
+			renderer.code = (source, lang) => {
+				const plang = prismLang[lang];
+				const highlighted = PrismJS.highlight(
+					source,
+					PrismJS.languages[plang],
+					lang,
+				);
+
+				return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
+			};
+
+			const html = marked(
+				content.replace(/^\t+/gm, match => match.split('\t').join('  ')),
+				{ renderer }
+			);
+
+			return {
+				html,
+				metadata,
+				slug: file.replace(/^[\d-]+/, '').replace(/\.md$/, ''),
+			};
+		})
+		.sort((a, b) => a.metadata.pubdate < b.metadata.pubdate ? 1 : -1);
 }
diff --git a/site/src/routes/guide/_sections.js b/site/src/routes/guide/_sections.js
index fd15fb4571..6b282115d3 100644
--- a/site/src/routes/guide/_sections.js
+++ b/site/src/routes/guide/_sections.js
@@ -4,13 +4,8 @@ import * as fleece from 'golden-fleece';
 import process_markdown from '../../utils/_process_markdown.js';
 import marked from 'marked';
 
-import Prism from 'prismjs'; // prism-highlighter – smaller footprint [hljs: 192.5k]
-require('prismjs/components/prism-bash');
-
-const langs = {
-	'hidden-data': 'json',
-	'html-no-repl': 'html',
-};
+import PrismJS from 'prismjs';
+import 'prismjs/components/prism-bash';
 
 // map lang to prism-language-attr
 const prismLang = {
@@ -20,10 +15,6 @@ const prismLang = {
 	css: 'css',
 };
 
-function btoa(str) {
-	return new Buffer(str).toString('base64');
-}
-
 const escaped = {
 	'"': '&quot;',
 	"'": '&#39;',
@@ -112,13 +103,6 @@ export default function() {
 				let className = 'code-block';
 
 				if (lang === 'html' && !group) {
-					/* prettier-ignore
-					-----------------------------------------------
-						edit vedam
-						don't know how to access components here
-						so i hardcoded icon here
-					-----------------------------------------------
-					*/
 					if (!meta || meta.repl !== false) {
 						prefix = `<a class='open-in-repl' href='repl?demo=@@${uid}' title='open in REPL'><svg class='icon'><use xlink:href='#maximize-2' /></svg></a>`;
 					}
@@ -140,16 +124,10 @@ export default function() {
 
 				if (meta && meta.hidden) return '';
 
-				/* prettier-ignore
-				-----------------------------------------------
-				design-edit vedam
-				insert prism-highlighter
-				-----------------------------------------------
-				*/
-				let plang = prismLang[lang];
-				const highlighted = Prism.highlight(
+				const plang = prismLang[lang];
+				const highlighted = PrismJS.highlight(
 					source,
-					Prism.languages[plang],
+					PrismJS.languages[plang],
 					lang
 				);