Version 0.8

- Changed to Markdown for challenge descriptions along with math & code blocks support
- Added announcements with markdown support
- Added challenge filtering in tag sorting page & 1 new filter
- Fixed some bugs with loading challenge names with special chars
- Improved performance greatly using lazy loading and more

Author: Tkaixiang

client/package-lock.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/dark-theme": "^2.0.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^7.1.2",
@@ -13,16 +12,21 @@
     "lodash": "^4.17.21",
     "react": "^17.0.1",
     "react-dimensions": "^1.3.1",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.1",
     "react-jsx-parser": "^1.28.1",
     "react-markdown": "^6.0.2",
+    "react-mathjax": "^1.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-spinners-css": "^1.1.9",
     "react-spring": "^9.1.2",
     "react-syntax-highlighter": "^15.4.3",
-    "recharts": "^2.0.9"
+    "recharts": "^2.0.9",
+    "rehype-katex": "^5.0.0",
+    "rehype-raw": "^5.1.0",
+    "remark-gfm": "^1.0.0",
+    "remark-math": "^4.0.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -31,7 +35,10 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "ignorePatterns": [
+      "src/*",
+      "!src/test.js"
+    ]
   },
   "browserslist": {
     "production": [
@@ -47,14 +54,11 @@
   },
   "devDependencies": {
     "babel-plugin-import": "^1.13.3",
-    "css-loader": "^3.5.3",
+    "css-loader": "^5.2.6",
+    "cssnano": "^5.0.4",
     "customize-cra": "^1.0.0",
     "less-loader": "^6.1.0",
     "react-app-rewired": "^2.1.8",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^3.0.2"
-  },
-    "eslintConfig": {
-    "ignorePatterns": ["src/*", "!src/test.js"]
+    "style-loader": "^2.0.0"
   }
 }

client/package.json

@@ -1,95 +1,118 @@
 .buttonHover {
     background-color: #1765ad;
-    transition: 0.3s;
+    transition: .3s
 }
+
 .buttonHover:hover {
-    background-color: #15395b;
+    background-color: #15395b
 }
 
 .ant-layout-sider {
-    width: "10vw" !important;
-    min-width: "5vw" !important;
+    width: "10vw"!important;
+    min-width: "5vw"!important
 }
 
 @keyframes slideInFromLeft {
     0% {
         transform: translateX(-20%);
-        opacity: 0;
+        opacity: 0
     }
     100% {
         transform: translateX(0);
-        opacity: 1;
+        opacity: 1
     }
 }
 
 .pageTransition {
-    animation-duration: 0.3s;
+    animation-duration: .3s;
     animation-timing-function: ease-out;
     animation-delay: 0s;
     animation-iteration-count: 1;
-    animation-name: slideInFromLeft;
+    animation-name: slideInFromLeft
 }
 
 @keyframes slideInFromTop {
     0% {
         transform: translateY(50%);
-        opacity: 1;
+        opacity: 1
     }
     100% {
         transform: translateY(0);
-        opacity: 1;
+        opacity: 1
     }
 }
 
 .pageSwitch {
-    animation-duration: 0.38s;
+    animation-duration: .38s;
     animation-timing-function: ease-out;
     animation-delay: 0s;
     animation-iteration-count: 1;
-    animation-name: slideInFromTop;
+    animation-name: slideInFromTop
 }
 
 .card-design {
-    border-color: #1890ff !important;
-    border-radius: 5px !important;
-    transition: 0.35s !important;
+    border-color: #1890ff!important;
+    border-radius: 5px!important;
+    transition: .35s!important
 }
 
 .card-design:hover {
-    opacity: 0.5;
+    opacity: .5
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-    background-color: #1f1f1f;
+    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
+    background-color: #1f1f1f
 }
 
 ::-webkit-scrollbar {
     width: 10px;
-    background-color: #8c8c8c;
+    background-color: #8c8c8c
 }
 
 ::-webkit-scrollbar-thumb {
     -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3);
-    background-color: #8c8c8c;
+    background-color: #8c8c8c
 }
 
 .create_challenge_form h1 {
-    font-size: 120%;
+    font-size: 120%
 }
 
 .loadingStyle {
-    display: "flex" !important;
-    width: "100%" !important;
-    justify-content: "center";
-    justify-items: "center";
-    position: absolute;
+    display: flex!important;
+    width: "100%"!important;
+    justify-content: center;
+    justify-items: center;
+    position: absolute
 }
 
 .ant-table {
-    background:rgba(0, 0, 0, 0.5) !important;
+    background: rgba(0, 0, 0, .5)!important
 }
 
 .ant-table-container {
-    overflow: auto;
+    overflow: auto
+}
+
+.w-md-editor {
+    background-color: transparent !important;
+    border: 1px solid #434343 !important;
+    caret-color: rgba(255, 255, 255, 0.85) !important;
+}
+
+.w-md-editor ::selection {
+    background-color: rgba(24, 144, 255, 0.5);
+}
+
+.wmde-markdown-color code[class*="language-"] {
+    color: rgba(255, 255, 255, 0.85) !important;
+}
+
+.w-md-editor-toolbar {
+    background-color: #d9d9d9 !important;
+}
+
+.w-md-editor-text-pre .title, .w-md-editor-text-pre .bold {
+    color: rgba(255, 255, 255, 0.85) !important;
 }