feat: support syntax highlighting

6 files changed, 37 insertions, 30 deletions

diff --git a/src/Code.tsx b/src/Code.tsx
new file mode 100644
index 0000000..d715230
--- /dev/null
+++ b/src/Code.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { gruvboxDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+
+const Code: FC<any> = ({ node, inline, className, children, ...props }) => {
+  const match = /language-(\w+)/.exec(className || '')
+  return !inline && match ? (
+    <SyntaxHighlighter
+      style={gruvboxDark}
+      language={match[1]}
+      PreTag="div"
+      {...props}
+    >
+      {String(children).replace(/\n$/, '')}
+    </SyntaxHighlighter>
+  ) : (
+      <code className={className} {...props}>
+        {children}
+      </code>
+  );
+}
+
+export default Code;
diff --git a/src/benzinConfig.ts b/src/benzinConfig.ts
index 6543117..8d58950 100644
--- a/src/benzinConfig.ts
+++ b/src/benzinConfig.ts
@@ -2,10 +2,11 @@ import { BenzinConfig  } from './lib/types';
 import nginxAdapter from './lib/nginxAdapter';
 
 const benzinConfig: BenzinConfig = {
+  title: `Eugene's Space`,
   CDN: 'https://git.eug-vs.xyz/eug-vs/eug-vs-xyz/plain/src',
   adapter: nginxAdapter,
-  title: `Eugene's Space`,
   faviconPath: '/public/icon-64.png',
+  emojiRootPath: 'emoji',
 };
 
 export default benzinConfig;
diff --git a/src/lib/nginxAdapter.ts b/src/lib/nginxAdapter.ts
index fdadd87..be39022 100644
--- a/src/lib/nginxAdapter.ts
+++ b/src/lib/nginxAdapter.ts
@@ -41,9 +41,9 @@ const nginxAdapter: Adapter = {
     return markdownSource;
   },
 
-  async getEmojiFileNames(cdn) {
+  async getEmojiFileNames(cdn, emojiRootPath) {
     const urls = await memoizedDeepListNginxDirectory(cdn);
-    return _.compact(urls.map((s: string) => s.match(/emoji\/(.*)/)?.[1]));
+    return _.compact(urls.map((s: string) => s.match(`${emojiRootPath}\/(.*)`)?.[1]));
   },
 }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index da073e6..2070e0b 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -4,7 +4,7 @@ import { GetStaticPathsResult } from 'next';
 export interface Adapter {
   getStaticMarkdownPaths: (cdn: string) => Promise<GetStaticPathsResult['paths']>;
   getMarkdownSource: (cdn: string, path: string[]) => Promise<string>;
-  getEmojiFileNames: (cdn: string) => Promise<string[]>;
+  getEmojiFileNames: (cdn: string, emojiRootPath: string) => Promise<string[]>;
 }
 
 export interface BenzinConfig {
@@ -12,4 +12,5 @@ export interface BenzinConfig {
   adapter: Adapter;
   title: string;
   faviconPath: string;
+  emojiRootPath: string;
 }
diff --git a/src/pages/[...path].tsx b/src/pages/[...path].tsx
index 5bedae3..19dc42d 100644
--- a/src/pages/[...path].tsx
+++ b/src/pages/[...path].tsx
@@ -7,15 +7,18 @@ import Image from '../Image';
 import emojiPlugin from '../emojiPlugin';
 import remarkGemoji from 'remark-gemoji';
 import benzinConfig from '../benzinConfig';
+import Code from '../Code';
 
 const transformLinkUri = (uri: string): string => {
   return uri.match(/(.*)\.md/)?.[1] || uri;
 }
 
+/* Image sources are relative to CDN root */
 const transformImageUri = (uri: string): string => {
   return uri.startsWith('http') ? uri : benzinConfig.CDN + uri;
 }
 
+/* Disable JavaScript in runtime */
 export const config = {
   unstable_runtimeJS: false,
 };
@@ -27,7 +30,7 @@ export const getStaticProps = async (context: GetStaticPropsContext) => {
   );
 
   const markdownSource = await benzinConfig.adapter.getMarkdownSource(benzinConfig.CDN, path);
-  const emojiFileNames = await benzinConfig.adapter.getEmojiFileNames(benzinConfig.CDN);
+  const emojiFileNames = await benzinConfig.adapter.getEmojiFileNames(benzinConfig.CDN, benzinConfig.emojiRootPath);
 
   return {
     props: {
@@ -63,6 +66,7 @@ const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
           components={{
             emoji: Emoji,
             img: Image,
+            code: Code,
             h1: 'h2',
             h2: 'h3',
             h3: 'h4',
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6023273..758775e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -66,7 +66,7 @@ blockquote {
   color: rgba(255, 255, 255, 0.75);
   font-style: italic;
 }
-code {
+code:not(pre code) {
   font-family: monospace;
   font-size: 90%;
   margin: 0;
@@ -75,25 +75,10 @@ code {
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.12);
 }
-pre {
-  margin: 1em 0;
-  overflow: auto;
-  padding: 16px 8px;
-}
-pre code {
-  overflow: visible;
-}
-.sourceCode {
-  background-color: transparent;
-  overflow: visible;
+pre div {
   border-radius: 4px;
-}
-div.sourceCode {
   border: 1px solid rgba(255, 255, 255, 0.12);
-}
-code.sourceCode {
-  padding: 0;
-  border: none;
+  background-color: #1d2021 !important;
 }
 hr {
   background-color: #1a1a1a;
@@ -134,10 +119,3 @@ header {
 #TOC a:not(:hover) {
   text-decoration: none;
 }
-code{white-space: pre-wrap;}
-span.smallcaps{font-variant: small-caps;}
-span.underline{text-decoration: underline;}
-div.column{display: inline-block; vertical-align: top; width: 50%;}
-div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
-ul.task-list{list-style: none;}
-.display.math{display: block; text-align: center; margin: 0.5rem auto;}