added tables, TODO: revise READMEs and add warnings

.gitignore

@@ -6,3 +6,4 @@ node_modules
 static/smui-dark.css
 static/smui.css
 build
+.vercel_build_output

src/lib/BlogPosts/Post.svelte

@@ -60,6 +60,48 @@
         padding-left: 0.875em;
     }
 
+    :global(.body .heading-1) {
+        margin: 0.4em 0;
+        padding: 0 2em;
+        font-size: 1.9em;
+        text-align: center;
+    }
+
+    :global(.body .heading-2) {
+        margin: 0.4em 0;
+        padding: 0 2em;
+        font-size: 1.8em;
+        text-align: center;
+    }
+
+    :global(.body .heading-3) {
+        margin: 0.4em 0;
+        padding: 0 2em;
+        font-size: 1.7em;
+        text-align: center;
+    }
+
+    :global(.body .heading-4) {
+        margin: 0.4em 0;
+        padding: 0 2em;
+        font-size: 1.6em;
+        text-align: center;
+    }
+
+    :global(.body .heading-5) {
+        margin: 0.4em 0;
+        padding: 0 2em;
+        font-size: 1.5em;
+        text-align: center;
+    }
+
+    :global(.body .heading-6) {
+        margin: 0.4em 0;
+        padding: 0 2em;
+        font-size: 1.4em;
+        text-align: center;
+    }
+
     :global(.body .bodyParagraph) {
         margin: 1em 0;
         padding: 0 2em;
@@ -79,6 +121,35 @@
         color: var(--g111);
     }
 
+    :global(.body .blogImg) {
+        margin: 1em 0;
+        padding: 0 2em;
+        display: flex;
+        justify-content: center;
+    }
+
+    :global(.body table) {
+        margin: 1em 2em;
+        min-width: 80%;
+	    border: 1px solid var(--ddd);
+        border-collapse: collapse;
+    }
+
+    :global(.body tr:nth-child(odd)) {
+        background-color: var(--ddd);
+    }
+
+    :global(.body td) {
+        padding: 0.5em 0;
+	    text-align:center;
+    }
+
+    :global(.body th) {
+        padding: 0.8em 0;
+        background-color: var(--blueOne);
+        color: #fff;
+    }
+
     .divider {
         border:0;
         margin:0;

src/lib/utils/helperFunctions/getBlogPosts.js

@@ -27,139 +27,236 @@ export const getBlogPosts = async (bypass = false) => {
 	return {posts: finalPosts, fresh: true};
 }
 
-// helper function for generateParagraph that shouldn't be exported
-const getImg = (img) => {
-    return `https://${img.fields.file.url.split('//')[1]}?fm=jpg&fl=progressive`;
+export const generateParagraph = (paragraph, indent = true) => {
+    let {paragraphText, newIndent} = genElementStart(paragraph.nodeType, indent, paragraph.data.target);
+    indent = newIndent;
+
+    for(const element of paragraph.content) {
+        paragraphText += genContent(element, indent);
+    }
+    paragraphText += genElementEnd(paragraph.nodeType, indent);
+
+    return paragraphText;
 }
 
-export const generateParagraph = (paragraph, indent = true) => {
-    let paragraphText = '';
-    switch (paragraph.nodeType) {
+const genElementStart = (nodeType, indent, target) => {
+    let paragraphText = "";
+
+    switch (nodeType) {
+        case 'heading-1':
+            if(indent) {
+                paragraphText = '<h1 class="heading-1">'
+            }
+            break;
+        case 'heading-2':
+            if(indent) {
+                paragraphText = '<h2 class="heading-2">'
+            }
+            break;
+        case 'heading-3':
+            if(indent) {
+                paragraphText = '<h3 class="heading-3">'
+            }
+            break;
+        case 'heading-4':
+            if(indent) {
+                paragraphText = '<h4 class="heading-4">'
+            }
+            break;
+        case 'heading-5':
+            if(indent) {
+                paragraphText = '<h5 class="heading-5">'
+            }
+            break;
+        case 'heading-6':
+            if(indent) {
+                paragraphText = '<h6 class="heading-6">'
+            }
+            break;
         case 'paragraph':
             if(indent) {
-                paragraphText += '<p class="bodyParagraph">'
+                paragraphText = '<p class="bodyParagraph">'
             }
             break;
+        case 'table':
+            paragraphText = '<table>'
+            break;
+        case 'table-row':
+            paragraphText = '<tr>'
+            break;
+        case 'table-cell':
+            paragraphText = '<td>'
+            break;
+        case 'table-header-cell':
+            paragraphText = '<th>'
+            break;
         case 'unordered-list':
-            paragraphText += '<ul>'
+            paragraphText = '<ul>'
             break;
         case 'ordered-list':
-            paragraphText += '<ol>'
+            paragraphText = '<ol>'
             break;
         case 'blockquote':
-            paragraphText += '<blockquote>'
+            paragraphText = '<blockquote>'
             indent = false;
             break;
         case 'hr':
-            paragraphText += '<hr />'
+            paragraphText = '<hr />'
             break;
         case 'embedded-asset-block':
-            paragraphText += `<br /><img class="recipeImg" src="${getImg(paragraph.data.target)}" alt="${paragraph.data.target.fields.title}" />`
+            paragraphText = `<br /><div class="blogImg"><img src="${getImg(target)}" alt="${target.fields.title}" /></div>`
             break;
 
         default:
             break;
     }
-    for(const element of paragraph.content) {
-        // if the node type is a paragraph, then recursively call generateParagraph on it
-        if(element.nodeType == 'paragraph') {
-            paragraphText += generateParagraph(element, indent);
-            continue;
-        }
-        // add list item
-        if(element.nodeType == 'list-item') {
-            paragraphText += '<li>';
-            paragraphText += generateParagraph(element, false);
-            paragraphText += '</li>';
-            continue;
-        }
-        // add image
-        if(element.nodeType == 'embedded-asset-block') {
-            paragraphText += generateParagraph(element, false);
-            continue;
-        }
-        // add orderer list
-        if(element.nodeType == 'ordered-list') {
-            paragraphText += generateParagraph(element, false);
-            continue;
-        }
-        // add unorderer list
-        if(element.nodeType == 'unordered-list') {
-            paragraphText += generateParagraph(element, false);
-            continue;
-        }
+    return {paragraphText, newIndent: indent};
+}
 
-        // add modifiers
-        if(element.marks) {
-            for(const modifier of element.marks) {
-                // add bold text
-                if(modifier.type == 'bold') {
-                    paragraphText += '<b>';
-                }
-                // add italic modifier
-                if(modifier.type == 'italic') {
-                    paragraphText += '<i>';
-                }
-                // add underline text
-                if(modifier.type == 'underline') {
-                    paragraphText += '<u>';
-                }
-                // add code text
-                if(modifier.type == 'code') {
-                    paragraphText += '<code>';
-                }
+const genElementEnd = (nodeType, indent) => {
+    switch (nodeType) {
+        case 'heading-1':
+            if(indent) {
+                return '</h1">';
             }
-        }
-        // add content
-        if(element.nodeType == 'text') {
-            paragraphText += element.value;
-        }
-        if(element.nodeType == 'hyperlink') {
-            paragraphText += `<a href="${element.data.uri}" class="blogLink">`;
-            paragraphText += generateParagraph(element);
-            paragraphText += '</a>';
-        }
-        // add closing modifiers
-        if(element.marks) {
-            for(const modifier of element.marks) {
-                // add code text
-                if(modifier.type == 'code') {
-                    paragraphText += '</code>';
-                }
-                // add underline text
-                if(modifier.type == 'underline') {
-                    paragraphText += '</u>';
-                }
-                // add italic modifier
-                if(modifier.type == 'italic') {
-                    paragraphText += '</i>';
-                }
-
-                // add bold text
-                if(modifier.type == 'bold') {
-                    paragraphText += '</b>';
-                }
+            return '';
+        case 'heading-2':
+            if(indent) {
+                return '</h2">';
             }
-        }
-    }
-    switch (paragraph.nodeType) {
+            return '';
+        case 'heading-3':
+            if(indent) {
+                return '</h3">'
+            }
+            return '';
+        case 'heading-4':
+            if(indent) {
+                return '</h4">';
+            }
+            return '';
+        case 'heading-5':
+            if(indent) {
+                return '</h5">';
+            }
+            return '';
+        case 'heading-6':
+            if(indent) {
+                return '</h6">';
+            }
+            return '';
         case 'paragraph':
             if(indent) {
-                paragraphText += '</p>'
+                return '</p>';
             }
-            break;
+            return '';
+        case 'table':
+            return '</table>';
+        case 'table-row':
+            return '</tr>';
+        case 'table-cell':
+            return '</td>';
+        case 'table-header-cell':
+            return '</th>';
         case 'unordered-list':
-            paragraphText += '</ul>'
-            break;
+            return '</ul>';
         case 'blockquote':
-            paragraphText += '</blockquote>'
-            break;
+            return '</blockquote>';
         case 'ordered-list':
-            paragraphText += '</ol>'
-            break;
+            return '</ol>';
         default:
-            break;
+            return '';
     }
-
+}
+
+const genContent = (element, indent) => {
+    let paragraphText = '';
+
+    // if the node type is a paragraph, then recursively call generateParagraph on it
+    switch(element.nodeType) {
+        case 'paragraph':
+            return generateParagraph(element, indent);
+        case 'list-item':
+            paragraphText += '<li>';
+            paragraphText += generateParagraph(element, false);
+            paragraphText += '</li>';
+            return paragraphText;
+        case 'embedded-asset-block':
+        case 'ordered-list':
+        case 'unordered-list':
+        case 'table':
+        case 'table-row':
+        case 'table-cell':
+        case 'table-header-cell':
+            return generateParagraph(element, false);
+    }
+
+    // add modifiers
+    paragraphText += genOpeningModifiers(element.marks)
+    // add content
+    if(element.nodeType == 'text') {
+        paragraphText += element.value;
+    }
+    if(element.nodeType == 'hyperlink') {
+        paragraphText += `<a href="${element.data.uri}" class="blogLink">`;
+        paragraphText += generateParagraph(element);
+        paragraphText += '</a>';
+    }
+    // add closing modifiers
+    paragraphText += genClosingModifiers(element.marks);
     return paragraphText;
 }
+
+// helper function for generateParagraph that shouldn't be exported
+const getImg = (img) => {
+    return `https://${img.fields.file.url.split('//')[1]}?fm=jpg&fl=progressive`;
+}
+
+const genOpeningModifiers = (marks) => {
+    if(marks) {
+        for(const modifier of marks) {
+            // add bold text
+            if(modifier.type == 'bold') {
+                return '<b>';
+            }
+            // add italic modifier
+            if(modifier.type == 'italic') {
+                return '<i>';
+            }
+            // add underline text
+            if(modifier.type == 'underline') {
+                return '<u>';
+            }
+            // add code text
+            if(modifier.type == 'code') {
+                return '<code>';
+            }
+        }
+    }
+    return '';
+}
+
+const genClosingModifiers = (marks) => {
+    if(marks) {
+        for(const modifier of marks) {
+            // add code text
+            if(modifier.type == 'code') {
+                return '</code>';
+            }
+            // add underline text
+            if(modifier.type == 'underline') {
+                return '</u>';
+            }
+            // add italic modifier
+            if(modifier.type == 'italic') {
+                return '</i>';
+            }
+
+            // add bold text
+            if(modifier.type == 'bold') {
+                return '</b>';
+            }
+        }
+    }
+    return '';
+}

src/routes/api/addBlogComments/[id].js

@@ -1,8 +1,8 @@
-import * as contentful from 'contentful-management';
+import * as contentfulManagement from 'contentful-management';
 
 import { getLeagueUsers } from "$lib/utils/helper";
 
-const client = contentful.createClient({
+const client = contentfulManagement.createClient({
     // This is the access token for this space. Normally you get the token in the Contentful web app
     accessToken: import.meta.env.VITE_CONTENTFUL_ACCESS_TOKEN,
 });