Fetch md files parallely with js

index.hbs

@@ -3,10 +3,14 @@
 <div id="index-placeholder"></div>
 
 <script>
-    const script = document.querySelector('#helpers');
-    script.addEventListener('load', () => {
-        fetchMarkdownAndReplaceId('index.md', 'index-placeholder');
-    });
+    (async () => {
+        const response = await fetch('index.md');
+        const text = await response.text();
+        const script = document.getElementById('helpers');
+        script.addEventListener('load', () => {
+            transformMarkdownAndReplaceId(text, 'index-placeholder');
+        });
+    })();
 </script>
 
-{{> partials/footer}}
+{{> partials/footer}}

lib/helpers.js

@@ -1,11 +1,9 @@
 /**
- * Reads markdown from the given URL and tranforms it into HTML
- * @param {string} filePath URL to fetch the markdown from
+ * Transforms markdown to HTML
+ * @param {string} text Markdown
  * @returns {string} HTML
  */
-const readMarkdown = async (filePath) => {
-    const response = await fetch(filePath);
-    const text = await response.text();
+const markdownToHtml = (text) => {
     marked.setOptions({
         headerIds: false,
     });
@@ -24,13 +22,13 @@ const replaceWithContent = (element) => {
 }
 
 /**
- * Replaces an element in the DOM with the HTML obtaining by transforming markdown fetched from the given URL
- * @param {string} filePath URL to fetch the markdown from
+ * Replaces an element in the DOM with the HTML obtaining by transforming given markdown
+ * @param {string} text Markdown
  * @param {string} id id of the element in DOM to replace
  */
-const fetchMarkdownAndReplaceId = async (filePath, id) => {
-    const text = await readMarkdown(filePath);
+const transformMarkdownAndReplaceId = (text, id) => {
+    const html = markdownToHtml(text);
     const toReplace = document.getElementById(id);
-    toReplace.innerHTML = marked(text);
+    toReplace.innerHTML = html;
     replaceWithContent(toReplace);
 }

news.hbs

@@ -8,10 +8,14 @@
 {{> partials/old_news}}
 
 <script>
-    const script = document.querySelector('#helpers');
-    script.addEventListener('load', () => {
-        fetchMarkdownAndReplaceId('news.md', 'news-placeholder');
-    });
+    (async () => {
+        const response = await fetch('news.md');
+        const text = await response.text();
+        const script = document.getElementById('helpers');
+        script.addEventListener('load', () => {
+            transformMarkdownAndReplaceId(text, 'news-placeholder');
+        });
+    })();
 </script>
 
-{{> partials/footer}}
+{{> partials/footer}}