From 6fe26c66b4facb3b14066408958c38fc2c58e97e Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 1 Jul 2020 20:19:26 +1000
Subject: [PATCH] Moved markdown image loading to a static asset

---
 src/components/Markdown.js                          |  10 ++++++++--
 .../docs => src/docs/assets}/AudioSharingFAQ.png    | Bin
 src/docs/assets/index.js                            |   5 +++++
 src/docs/faq/radio.md                               |   2 +-
 src/routes/FAQ.js                                   |   8 +++++---
 5 files changed, 19 insertions(+), 6 deletions(-)
 rename {public/docs => src/docs/assets}/AudioSharingFAQ.png (100%)
 create mode 100644 src/docs/assets/index.js

diff --git a/src/components/Markdown.js b/src/components/Markdown.js
index 1d341eb..c60b7bd 100644
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.js
@@ -109,7 +109,7 @@ function Link({ href, children }) {
   }
 }
 
-function Markdown({ source }) {
+function Markdown({ source, assets }) {
   const renderers = {
     paragraph: Paragraph,
     heading: Heading,
@@ -123,7 +123,13 @@ function Markdown({ source }) {
     tableRow: TableRow,
     tableCell: TableCell,
   };
-  return <ReactMarkdown source={source} renderers={renderers} />;
+  return (
+    <ReactMarkdown
+      source={source}
+      renderers={renderers}
+      transformImageUri={(uri) => assets[uri]}
+    />
+  );
 }
 
 export default Markdown;
diff --git a/public/docs/AudioSharingFAQ.png b/src/docs/assets/AudioSharingFAQ.png
similarity index 100%
rename from public/docs/AudioSharingFAQ.png
rename to src/docs/assets/AudioSharingFAQ.png
diff --git a/src/docs/assets/index.js b/src/docs/assets/index.js
new file mode 100644
index 0000000..c7048b0
--- /dev/null
+++ b/src/docs/assets/index.js
@@ -0,0 +1,5 @@
+import audioSharingFaq from "./AudioSharingFAQ.png";
+
+export default {
+  audioSharingFaq,
+};
diff --git a/src/docs/faq/radio.md b/src/docs/faq/radio.md
index efedf31..e74e087 100644
--- a/src/docs/faq/radio.md
+++ b/src/docs/faq/radio.md
@@ -4,7 +4,7 @@
 
 When using audio sharing you must select the **Share audio** option when choosing the browser tab or screen to share. Support for sharing audio depends on browser and operating system. Currently Google Chrome on Windows allows you to share the audio of any tab or an entire screen while on MacOS you can only share the audio of a tab. For an example of selecting the **Share audio** option for a tab on MacOS see Figure 1.
 
-![Figure 1 Using Audio Sharing](/docs/AudioSharingFAQ.png)
+![Figure 1 Using Audio Sharing](audioSharingFaq)
 **Figure 1 Using Audio Sharing.** First select what type of content you would like to share. Second select the content. Third select Share audio. Fourth select Share.
 
 ### Browser not supported for audio sharing.
diff --git a/src/routes/FAQ.js b/src/routes/FAQ.js
index 6393b66..cdd264f 100644
--- a/src/routes/FAQ.js
+++ b/src/routes/FAQ.js
@@ -5,6 +5,8 @@ import raw from "raw.macro";
 import Footer from "../components/Footer";
 import Markdown from "../components/Markdown";
 
+import assets from "../docs/assets";
+
 const connection = raw("../docs/faq/connection.md");
 const radio = raw("../docs/faq/radio.md");
 const saving = raw("../docs/faq/saving.md");
@@ -31,13 +33,13 @@ function FAQ() {
           Frequently Asked Questions
         </Text>
         <div id="connection">
-          <Markdown source={connection} />
+          <Markdown source={connection} assets={assets} />
         </div>
         <div id="radio">
-          <Markdown source={radio} />
+          <Markdown source={radio} assets={assets} />
         </div>
         <div id="saving">
-          <Markdown source={saving} />
+          <Markdown source={saving} assets={assets} />
         </div>
       </Flex>
       <Footer />