Use remark and rehype directly

react-markdown doesn't support transformer plugins
(remarkjs/react-markdown#188), so we can't use
remark-ping with it. My hand-coded @tag plugin was
buggy--better to use remark-ping

package.json

@@ -52,8 +52,6 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-markdown": "^3.3.4",
-    "react-syntax-highlighter": "^8.0.1",
     "rimraf": "^2.6.1",
     "rollup": "^0.63.3",
     "rollup-plugin-babel": "^3.0.3",
@@ -73,9 +71,8 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "prop-types": "^15.6.2",
-    "react-markdown": "^3.3.4",
-    "react-syntax-highlighter": "^8.0.1",
-    "tachyons": "^4.11.0"
+    "tachyons": "^4.11.0",
+    "highlight.js": "^9.12.0"
   },
   "browserslist": [
     "IE >= 11"
@@ -92,5 +89,11 @@
       "git add"
     ]
   },
-  "dependencies": {}
+  "dependencies": {
+    "rehype-highlight": "^2.1.0",
+    "rehype-stringify": "^4.0.0",
+    "remark": "^9.0.0",
+    "remark-ping": "^2.1.2",
+    "remark-rehype": "^3.0.0"
+  }
 }

rollup.config.js

@@ -48,7 +48,7 @@ config.plugins.push(
     // Needed for rollup: https://rollupjs.org/guide/en#babel
     // NOTE: this gets merged with .babelrc
     plugins: ["external-helpers"],
-    exclude: ["**/*.json"]
+    exclude: ["**/*.json", "node_modules/**"]
   }),
   nodeBuiltins(),
   nodeGlobals(),

src/Markdown.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import t from "prop-types";
+import remark from "remark";
+import remarkPing from "remark-ping";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+import rehypeHighlight from "rehype-highlight";
+
+export default class Markdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rendered: ""
+    };
+  }
+  componentDidMount() {
+    const remarkInst = remark()
+      // Use remark-ping to transform tags (e.g. @javascript) into links
+      .use(remarkPing, {
+        pingUsername: tag => true,
+        userURL: this.props.tagURL
+      })
+      .use(remarkRehype)
+      .use(rehypeStringify)
+      .use(rehypeHighlight);
+    const result = remarkInst.process(this.props.source, (err, rendered) => {
+      if (err) throw err;
+      this.setState({ rendered });
+    });
+  }
+  render() {
+    return <div dangerouslySetInnerHTML={{ __html: this.state.rendered }} />;
+  }
+}
+Markdown.propTypes = {
+  source: t.string.isRequired,
+  tagURL: t.func
+};

src/get-query-param.js

@@ -0,0 +1,10 @@
+// https://stackoverflow.com/a/901144/1157536
+export default function getQueryParam(name, url) {
+  if (!url) url = window.location.href;
+  name = name.replace(/[\[\]]/g, "\\$&");
+  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+    results = regex.exec(url);
+  if (!results) return null;
+  if (!results[2]) return "";
+  return decodeURIComponent(results[2].replace(/\+/g, " "));
+}

src/index.jsx

@@ -1,28 +1,19 @@
 import parse from "jrnl-parser";
-import Markdown from "react-markdown";
 import React from "react";
 import t from "prop-types";
 
-import CodeBlock from "./CodeBlock.jsx";
+import getQueryParam from "./get-query-param";
 import fetchTxt from "./fetch-txt";
-import remarkTags, { Ping } from "./remark-tags";
+import Markdown from "./Markdown";
 
 const EntryBody = ({ body, onClickTag }) => (
   <p className="f6 f5-l lh-copy">
-    <Markdown
-      source={body}
-      renderers={{ code: CodeBlock, ping: Ping }}
-      astPlugins={[
-        remarkTags({
-          onClick: onClickTag
-        })
-      ]}
-    />
+    <Markdown source={body} tagURL={tag => `?q=@${tag}`} />
   </p>
 );
 EntryBody.propTypes = {
   body: t.string,
-  onClickTag: t.function
+  onClickTag: t.func
 };
 
 const EntryContainer = ({ date, children }) => (
@@ -49,7 +40,7 @@ const Entry = ({ entry, onClickTag }) => (
 );
 Entry.propTypes = {
   entry: t.object,
-  onClickTag: t.function
+  onClickTag: t.func
 };
 
 const Loader = () => <div className="tc ma6 code gray">Loading entries…</div>;
@@ -84,7 +75,7 @@ const Header = ({ title, onInputChange, filter }) => (
 );
 Header.propTypes = {
   title: t.string,
-  onInputChange: t.function,
+  onInputChange: t.func,
   filter: t.string
 };
 
@@ -121,8 +112,8 @@ JRNL.propTypes = {
   source: t.string,
   loaded: t.bool,
   filter: t.string,
-  onInputChange: t.function,
-  onClickTag: t.function
+  onInputChange: t.func,
+  onClickTag: t.func
 };
 
 export default class App extends React.Component {
@@ -145,7 +136,8 @@ export default class App extends React.Component {
     this.setState({ filter: tag });
   }
   componentDidMount() {
-    this.setState({ loaded: false });
+    const filter = getQueryParam("q") || "";
+    this.setState({ filter, loaded: false });
     fetchTxt(this.props.src).then(source => {
       this.setState({ source, loaded: true });
     });

src/remark-tags.jsx

@@ -9,13 +9,8 @@ import React from "react";
 import visit from "unist-util-visit";
 import t from "prop-types";
 
-export const Ping = ({ value, onClick }) => {
-  const handleClick = e => onClick(value, e);
-  return (
-    <a onClick={handleClick} href="#">
-      {value}
-    </a>
-  );
+export const Ping = ({ value }) => {
+  return <a href="#">{value}</a>;
 };
 Ping.propTypes = {
   value: t.string,

src/standalone.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./index.jsx";
 import "tachyons";
+import "highlight.js/styles/github.css";
 
 function autoInit() {
   const elem = document.querySelector("jrnl");