Merge pull request #10 from SourabhJaz/sourabh/markup-integration

React-markdown support added and a local script format_json to transf…
SourabhJaz · Oct 1, 2024 · ed7abee · ed7abee
2 parents 4b2ff8f + 7603c54
commit ed7abee
Show file tree

Hide file tree

Showing 12 changed files with 327 additions and 255 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/upskill-club-web/static/js/main.3f1019cb.js",
+    "main.js": "/upskill-club-web/static/js/main.3a6d1ac9.js",
     "index.html": "/upskill-club-web/index.html",
-    "main.3f1019cb.js.map": "/upskill-club-web/static/js/main.3f1019cb.js.map"
+    "main.3a6d1ac9.js.map": "/upskill-club-web/static/js/main.3a6d1ac9.js.map"
   },
   "entrypoints": [
-    "static/js/main.3f1019cb.js"
+    "static/js/main.3a6d1ac9.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.3f1019cb.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.3a6d1ac9.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/docs/static/js/main.3a6d1ac9.js b/docs/static/js/main.3a6d1ac9.js
diff --git a/docs/static/js/main.3f1019cb.js.LICENSE.txt → docs/static/js/main.3a6d1ac9.js.LICENSE.txt b/docs/static/js/main.3f1019cb.js.LICENSE.txt → docs/static/js/main.3a6d1ac9.js.LICENSE.txt
@@ -49,7 +49,7 @@
  */
 
 /**
- * @mui/styled-engine v6.1.1
+ * @mui/styled-engine v6.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -67,6 +67,15 @@
  * @license MIT
  */
 
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
 /**
  * React Router v6.26.2
  *

diff --git a/docs/static/js/main.3a6d1ac9.js.map b/docs/static/js/main.3a6d1ac9.js.map
diff --git a/docs/static/js/main.3f1019cb.js b/docs/static/js/main.3f1019cb.js
diff --git a/docs/static/js/main.3f1019cb.js.map b/docs/static/js/main.3f1019cb.js.map
diff --git a/format_json.js b/format_json.js
@@ -0,0 +1,161 @@
+const _ = require('lodash');
+const fs = require('fs');
+
+const path = '/Users/sourabhjajoria/Documents/upskill_design/dummy.json';
+
+const getHeadingLevelText = (text) => {
+    return `# ${text} \\\\`;
+};
+
+const getFirstLevelText = (text) => {
+    if (text.length > 26) return ` ${text} \\\\`;
+    return `## ${text} \\\\`;
+};
+
+const getSecondLevelText = (text) => {
+    return `- ${text} \\\\`;
+};
+
+const getThirdLevelText = (text) => {
+    return `    - ${text} \\\\`;
+};
+
+const getHyperLinkText = (text) => {
+    const splitText = _.split(text, 'https://');
+    return `    - [${splitText[0]}](https://${splitText[1]}) \\\\`
+}
+
+const getJSCode = (text) => {
+    const splitText = _.split(text, '; ');
+    const codeStr = '```javascript \\\\ ' + splitText.join('; \\\\') + '\\\\ ``` \\\\';
+    return codeStr;
+};
+
+const getJSON = (text) => {
+    const splitText = _.split(text, ',');
+    const codeStr = '```json \\\\ ' + splitText.join(', \\\\') + '\\\\ ``` \\\\';
+    return codeStr;
+};
+
+
+const parseDescription = ({ title, image_url, description }) => {
+    const componentList= [];
+    if (title)
+        componentList.push(getHeadingLevelText(title));
+    const words = description.split(' ');
+    let index = 0,
+        count = 0;
+    while (index < words.length) {
+        count = 0;
+        let stringStart, stringEnd;
+        if (words[index] == '<level_0>') {
+            stringStart = index + 1;
+            while (words[index] !== '</level_0>' && count < 500) {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getHeadingLevelText(words.slice(stringStart, stringEnd).join(' ')));
+        }
+        if (words[index] == '<level_1>') {
+            stringStart = index + 1;
+            while (words[index] !== '</level_1>' && count < 500) {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getFirstLevelText(words.slice(stringStart, stringEnd).join(' ')));
+        } else if (words[index] == '<level_2>') {
+            stringStart = index + 1;
+            while (words[index] !== '</level_2>' && count < 500) {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getSecondLevelText(words.slice(stringStart, stringEnd).join(' ')));
+        } else if (words[index] == '<level_3>') {
+            stringStart = index + 1;
+            while (words[index] !== '</level_3>' && count < 500) {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getThirdLevelText(words.slice(stringStart, stringEnd).join(' ')));
+        } else if (words[index] == '<level_4>') {
+        stringStart = index + 1;
+            while (words[index] !== '</level_4>' && count < 500) {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getThirdLevelText(words.slice(stringStart, stringEnd).join(' ')));
+        } else if (words[index] == '<href>') {
+            stringStart = index + 1;
+            while (words[index] !== '</href>') {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getHyperLinkText(words.slice(stringStart, stringEnd).join(' ')));
+        }
+        else if (words[index] == '```javascript') {
+            stringStart = index + 1;
+            while (words[index] !== '```') {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getJSCode(words.slice(stringStart, stringEnd).join(' ')));
+        }
+        else if (words[index] == '```json') {
+            stringStart = index + 1;
+            while (words[index] !== '```') {
+                index++;
+                count++;
+            }
+            stringEnd = index;
+            componentList.push(getJSON(words.slice(stringStart, stringEnd).join(' ')));
+        }
+        index++;
+    }
+    if (image_url)
+        componentList.push(`![Image](${image_url}) \\\\`);
+    return componentList.join(' ');
+};
+
+fs.readFile(path, 'utf8', (err, data) => {
+    if (err) {
+        console.error('Error while reading the file:', err);
+        return;
+    }
+    try {
+        const jsonData = JSON.parse(data);
+        const outputJSONData = [];
+        const keyedSession = _.groupBy(jsonData, 'fields.session');
+        for (key in keyedSession) {
+            const descriptionList = _.map(keyedSession[key], (model) => {
+                return parseDescription(model.fields);
+            });
+            outputJSONData.push({
+                model: "api.concept",
+                pk: keyedSession[key][0].pk,
+                fields: {
+                    session: Number(key),
+                    title: null,
+                    image_url: null,
+                    description: descriptionList.join(' ')
+                }
+            })
+        }
+        const jsonString = JSON.stringify(outputJSONData, null, 2);
+        fs.writeFile('formatted_model.json', jsonString, (err) => {
+            if (err) {
+                console.error('Error writing file:', err);
+            } else {
+                console.log('Successfully wrote file');
+            }
+        });
+    } catch (parseErr) {
+        console.error('Error while parsing JSON data:', parseErr);
+    }
+});
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "lodash": "^4.17.21",
     "react": "latest",
     "react-dom": "latest",
     "react-scripts": "latest",
@@ -40,7 +41,10 @@
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-react": "^7.36.1",
     "globals": "^15.9.0",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
     "typescript-eslint": "^8.5.0"
   }
 }
diff --git a/src/apis/upskill_club/constants.ts b/src/apis/upskill_club/constants.ts
@@ -1 +1 @@
-export const UPSKILL_CLUB_SERVER_URL = 'https://sourabhjaz.pythonanywhere.com/api';
+export const UPSKILL_CLUB_SERVER_URL = 'http://127.0.0.1:8000/api';
diff --git a/src/components/MarkdownRenderer.tsx b/src/components/MarkdownRenderer.tsx
@@ -0,0 +1,35 @@
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+
+const MarkdownRenderer = ({ markdown }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      children={markdown}
+      components={{
+        img:({node,...props})=><img style={{maxWidth:'100%'}}{...props}/>,
+        code({ node, className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || '');
+          return match ? (
+            <SyntaxHighlighter
+              style={vscDarkPlus}
+              language={match[1]}
+              PreTag="div"
+              {...props}
+            >
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        }
+      }}
+    />
+  );
+};
+
+export default MarkdownRenderer;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.3f1019cb.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/upskill-club-web/favicon.ico"/><meta name="viewport" content="initial-scale=1,width=device-width"/><title>Upskill Club</title><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"/><script type="text/javascript">!function(n){if("/"===n.search[1]){var a=n.search.slice(1).split("&").map((function(n){return n.replace(/~and~/g,"&")})).join("?");window.history.replaceState(null,null,n.pathname.slice(0,-1)+a+n.hash)}}(window.location)</script><script defer="defer" src="/upskill-club-web/static/js/main.3a6d1ac9.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const UPSKILL_CLUB_SERVER_URL = 'https://sourabhjaz.pythonanywhere.com/api';
		export const UPSKILL_CLUB_SERVER_URL = 'http://127.0.0.1:8000/api';