Feature Release: CTFGuide Learn

next.config.js

@@ -6,25 +6,32 @@ const withPWA = require('next-pwa')({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  webpack: (config, { dev }) => {
-    if (!dev) {
-      config.plugins = config.plugins.filter(
-        (plugin) => plugin.constructor.name !== 'ESLintWebpackPlugin'
-      );
-    }
-
-    return config;
-  },
   reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true,
   },
   experimental: {
     scrollRestoration: true,
-    esmExternals: true, // Add this to ensure esmExternals is true
+    esmExternals: 'loose',
+  },
+  transpilePackages: ['@uiw/react-md-editor', '@uiw/react-markdown-preview'],
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin',
+          },
+        ],
+      },
+    ];
   },
-  ignoreDuringBuilds: true,
-  transpilePackages: ['react-md-editor']
 };
 
 module.exports = withPWA(removeImports(nextConfig));

package.json

@@ -19,15 +19,18 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.2",
     "@heroicons/react": "^2.0.13",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/material": "^5.15.2",
     "@mui/x-charts": "^6.18.4",
     "@react-oauth/google": "^0.12.1",
     "@stripe/stripe-js": "^2.1.7",
     "@tailwindcss/forms": "^0.5.3",
     "@tremor/react": "^1.8.1",
     "@uiw/react-markdown-editor": "^6.1.1",
-    "@uiw/react-md-editor": "3.6.0",
+    "@uiw/react-markdown-preview": "^5.1.3",
+    "@uiw/react-md-editor": "^4.0.5",
     "@vercel/analytics": "^1.3.1",
+    "@webcontainer/api": "^1.5.1-internal.5",
     "asciinema-player": "3.6.3",
     "autoprefixer": "^10.4.12",
     "babel-plugin-macros": "^3.1.0",
@@ -39,7 +42,7 @@
     "easymde": "^2.18.0",
     "enable": "^3.4.0",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^10.2.4",
+    "framer-motion": "^11.15.0",
     "heroicons": "^2.0.13",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.456.0",
@@ -53,10 +56,11 @@
     "puppeteer": "^22.0.0",
     "react": "18.2.0",
     "react-activity-calendar": "^2.2.11",
+    "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-collapsible": "^2.10.0",
-    "react-confetti": "^6.1.0",
+    "react-confetti": "^6.2.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
@@ -81,6 +85,7 @@
     "react-tooltip": "^5.25.1",
     "react-top-loading-bar": "^2.3.1",
     "react-transition-group": "^4.4.5",
+    "react-use": "^17.6.0",
     "react-visibility-sensor": "^5.1.1",
     "reactjs-popup": "^2.0.5",
     "reactour": "^1.19.4",
@@ -92,7 +97,8 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "xterm": "^5.3.0"
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
     "eslint": "8.26.0",

src/components/StandardNav.jsx

@@ -314,6 +314,16 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                     </Link>
                   </div>
                   <div className=" vertical-align md:ml-6 md:flex  ">
+                  <Link
+                      href="/learn/modules"
+                      className={
+                        linkClass('/learn/modules') + ' hidden lg:inline-flex'
+                      }
+                    >
+                      Learn
+
+                      <span className="bg-blue-600 text-xs  ml-2 text-white px-2 rounded-full">New!</span>
+                    </Link>
                     <Link
                       href="/practice"
                       className={
@@ -648,6 +658,13 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
                   >
                     Dashboard
                   </Disclosure.Button>
+                  <Disclosure.Button
+                    as="a"
+                    href="../practice"
+                    className="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-300 hover:border-gray-300  hover:text-gray-100 sm:pl-5 sm:pr-6"
+                  >
+                    Learn
+                  </Disclosure.Button>
                   <Disclosure.Button
                     as="a"
                     href="../practice"