diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index db528e4..80c43ed 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -1,114 +1,7 @@
 import './src/styles/main.css';
 import * as React from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import { ProblemsListComponent } from './src/components/markdown/Problems';
-import CodeBlock from './src/components/markdown/CodeBlock';
-import SpoilerComponent from './src/components/markdown/SpoilerComponent';
-import {
-  ResourceComponent,
-  ResourcesListComponent,
-} from './src/components/markdown/Resources';
-
-const components = {
-  'module-excerpt': props => <div {...props} />,
-  spoiler: SpoilerComponent,
-  'info-block': ({
-    children,
-    title,
-  }: {
-    children: React.ReactNode;
-    title: string;
-  }) => (
-    <div className="rounded-md bg-blue-50 p-4 mb-12 info-block">
-      <div className="flex">
-        <div className="flex-shrink-0">
-          <svg
-            className="h-5 w-5 text-blue-400"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-          >
-            <path
-              fillRule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </div>
-        <div className="ml-3">
-          <h3 className="info-block__heading">{title}</h3>
-          <div className="info-block__body">{children}</div>
-        </div>
-      </div>
-    </div>
-  ),
-  'warning-block': ({ children }) => (
-    <div className="rounded-md bg-yellow-50 p-4">
-      <div className="flex">
-        <div className="flex-shrink-0">
-          <svg
-            className="h-5 w-5 text-yellow-400"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </div>
-        <div className="ml-3">
-          <h3 className="text-sm leading-5 font-medium text-yellow-800">
-            Warning!
-          </h3>
-          <div className="mt-2 text-sm leading-5 text-yellow-700">
-            <p>{children}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  'optional-content': ({
-    children,
-    title,
-    className,
-  }: {
-    children: React.ReactNode;
-    title?: string;
-    className?: string;
-  }) => (
-    <div
-      className={`bg-white overflow-hidden shadow rounded-lg border border-purple-400`}
-      style={{ margin: '1rem 0' }}
-    >
-      <div className="p-4 flex items-center font-medium text-purple-800 bg-purple-50">
-        <svg className="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 20 20">
-          <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
-        </svg>
-        Optional{title ? `: ${title}` : ''}
-      </div>
-      <div className="px-4 pt-5 pb-2 sm:p-6 sm:pb-2">{children}</div>
-    </div>
-  ),
-  'problems-list': ProblemsListComponent,
-  resources: ResourcesListComponent,
-  resource: ResourceComponent,
-  code: CodeBlock,
-  inlineCode: props => (
-    <code
-      {...props}
-      className="font-mono text-sm inline bg-gray-200 rounded px-1 py-05"
-    />
-  ),
-  table: props => <table {...props} className="text-base border-gray-600" />,
-  th: props => <th {...props} className="border py-1 px-3" />,
-  td: props => <td {...props} className="border py-1 px-3" />,
-  h3: props => (
-    <h3 {...props} className="leading-snug text-lg font-semibold mb-4 mt-6" />
-  ),
-  p: props => <p {...props} className="mb-4" />,
-};
+import MDXProvider from './src/components/markdown/MDXProvider';
 
 export const wrapRootElement = ({ element }) => (
-  <MDXProvider components={components}>{element}</MDXProvider>
+  <MDXProvider>{element}</MDXProvider>
 );
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
new file mode 100644
index 0000000..75d85b8
--- /dev/null
+++ b/gatsby-ssr.js
@@ -0,0 +1,6 @@
+// This file shouldn't be necessary, but for some reason Gatsby is not loading
+// gatsby-ssr.tsx (note the "x") properly...
+module.exports = require('./gatsby-ssr.tsx');
+// this line shouldn't be necessary, but for some reason Gatsby does not load
+// gatsby-ssr.js without it...
+exports.onRenderBody = () => {};
diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
new file mode 100644
index 0000000..14e873b
--- /dev/null
+++ b/gatsby-ssr.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import MDXProvider from './src/components/markdown/MDXProvider';
+
+export const wrapRootElement = ({ element }) => (
+  <MDXProvider>{element}</MDXProvider>
+);
diff --git a/src/components/markdown/MDXProvider.tsx b/src/components/markdown/MDXProvider.tsx
new file mode 100644
index 0000000..499185e
--- /dev/null
+++ b/src/components/markdown/MDXProvider.tsx
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import SpoilerComponent from './SpoilerComponent';
+import { ProblemsListComponent } from './Problems';
+import { ResourceComponent, ResourcesListComponent } from './Resources';
+import CodeBlock from './CodeBlock';
+
+const components = {
+  'module-excerpt': props => <div {...props} />,
+  spoiler: SpoilerComponent,
+  'info-block': ({
+    children,
+    title,
+  }: {
+    children: React.ReactNode;
+    title: string;
+  }) => (
+    <div className="rounded-md bg-blue-50 p-4 mb-12 info-block">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-blue-400"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3">
+          <h3 className="info-block__heading">{title}</h3>
+          <div className="info-block__body">{children}</div>
+        </div>
+      </div>
+    </div>
+  ),
+  'warning-block': ({ children }) => (
+    <div className="rounded-md bg-yellow-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-yellow-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm leading-5 font-medium text-yellow-800">
+            Warning!
+          </h3>
+          <div className="mt-2 text-sm leading-5 text-yellow-700">
+            <p>{children}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  'optional-content': ({
+    children,
+    title,
+    className,
+  }: {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+  }) => (
+    <div
+      className={`bg-white overflow-hidden shadow rounded-lg border border-purple-400`}
+      style={{ margin: '1rem 0' }}
+    >
+      <div className="p-4 flex items-center font-medium text-purple-800 bg-purple-50">
+        <svg className="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
+        </svg>
+        Optional{title ? `: ${title}` : ''}
+      </div>
+      <div className="px-4 pt-5 pb-2 sm:p-6 sm:pb-2">{children}</div>
+    </div>
+  ),
+  'problems-list': ProblemsListComponent,
+  resources: ResourcesListComponent,
+  resource: ResourceComponent,
+  code: CodeBlock,
+  inlineCode: props => (
+    <code
+      {...props}
+      className="font-mono text-sm inline bg-gray-200 rounded px-1 py-05"
+    />
+  ),
+  table: props => <table {...props} className="text-base border-gray-600" />,
+  th: props => <th {...props} className="border py-1 px-3" />,
+  td: props => <td {...props} className="border py-1 px-3" />,
+  h3: props => (
+    <h3 {...props} className="leading-snug text-lg font-semibold mb-4 mt-6" />
+  ),
+  p: props => <p {...props} className="mb-4" />,
+};
+
+export default function ({ children }) {
+  return <MDXProvider components={components}>{children}</MDXProvider>;
+}
diff --git a/src/components/markdown/Problems.tsx b/src/components/markdown/Problems.tsx
index b09b1b3..d896a21 100644
--- a/src/components/markdown/Problems.tsx
+++ b/src/components/markdown/Problems.tsx
@@ -8,7 +8,6 @@ type ProblemsListComponentProps = {
 };
 
 export function ProblemsListComponent(props: ProblemsListComponentProps) {
-  console.log(props.problems);
   return (
     <div className="flex flex-col">
       <div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
diff --git a/src/components/markdown/Resources.tsx b/src/components/markdown/Resources.tsx
index dfb4620..4d3b0b5 100644
--- a/src/components/markdown/Resources.tsx
+++ b/src/components/markdown/Resources.tsx
@@ -80,7 +80,7 @@ export function ResourceComponent(props) {
             fill="currentColor"
             viewBox="0 0 20 20"
           >
-            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
           </svg>
         )}
       </td>
diff --git a/src/utils.ts b/src/utils.ts
index d2a302d..7c5e55a 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -43,7 +43,6 @@ export function graphqlToModuleLinks(
 }
 
 export function graphqlToModuleInfo(mdx: any): ModuleInfo {
-  console.log(mdx.frontmatter);
   return new ModuleInfo(
     mdx.frontmatter.id,
     moduleIDToDivisionMap[mdx.frontmatter.id],