Merge pull request #45 from Developer-DAO/feat/v2-mvp

feat: V2 mvp version with new components added

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,

apps/academy/next.config.mjs

@@ -0,0 +1,64 @@
+import withPlugins from "next-compose-plugins";
+import withBundleAnalyzer from "@next/bundle-analyzer";
+import { PrismaPlugin } from "@prisma/nextjs-monorepo-workaround-plugin";
+import withPWA from "next-pwa";
+import remarkFrontmatter from "remark-frontmatter";
+import nextMDX from "@next/mdx";
+
+const withMDX = nextMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkFrontmatter],
+    rehypePlugins: [],
+    // If you use `MDXProvider`, uncomment the following line.
+    providerImportSource: "@mdx-js/react",
+  },
+});
+
+/** @type {import('next').NextConfig} */
+const config = {
+  // basePath,
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+  reactStrictMode: true,
+  transpilePackages: ["ui", "utils", "database"],
+  webpack: (config, { isServer }) => {
+    config.resolve.fallback = { fs: false, net: false, tls: false };
+    if (isServer) {
+      config.plugins = [...config.plugins, new PrismaPlugin()];
+    }
+    return config;
+  },
+  async headers() {
+    return [
+      {
+        // matching all API routes
+        source: "/api/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Credentials", value: "true" },
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          {
+            key: "Access-Control-Allow-Methods",
+            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
+          },
+          {
+            key: "Access-Control-Allow-Headers",
+            value:
+              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default withPlugins(
+  [
+    [withBundleAnalyzer({ enabled: !!process.env.ANALYZE })],
+    withPWA({
+      dest: "public",
+      disable: process.env.NODE_ENV === "development",
+    }),
+    withMDX(),
+  ],
+  config,
+);

apps/academy/package.json

@@ -42,10 +42,21 @@
     "zod": "^3.22.2"
   },
   "devDependencies": {
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@next/bundle-analyzer": "13.4.12",
+    "@next/mdx": "^14.0.4",
+    "@prisma/nextjs-monorepo-workaround-plugin": "^5.3.1",
+    "@types/mdx": "^2.0.10",
+    "@types/react-syntax-highlighter": "^15.5.11",
     "jest-config": "workspace:*",
     "lighthouse-config": "workspace:*",
+    "next-compose-plugins": "^2.2.1",
     "next-config": "workspace:*",
+    "next-pwa": "^5.6.0",
     "playwright-config": "workspace:*",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-frontmatter": "^5.0.0",
     "storybook-config": "workspace:*",
     "tailwindcss-config": "workspace:*",
     "typescript-config": "workspace:*"

apps/academy/src/components/AboutCourse.tsx

@@ -1,13 +1,12 @@
-export default function AboutCourse() {
+interface AboutCourseProps {
+  lessonDescription: string;
+}
+
+export default function AboutCourse({ lessonDescription }: AboutCourseProps) {
   return (
     <article className="px-7 pt-14 lg:ml-16 lg:w-[42rem] lg:p-0 ">
       <h2 className="text-2xl font-bold lg:text-3xl">About This Course</h2>
-      <p className="mt-4 leading-tight tracking-wide lg:text-xl">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula laoreet leo,
-        vehicula rhoncus lectus consectetur vel. Morbi sit amet fringilla erat, nec ultrices nulla.
-        Pellentesque habim volutpat, malesuada euismod turpis facilisis. Nunc non imperdiet eros.
-        Pellentesque lobortis justo a ligula efficitur congue.
-      </p>
+      <p className="mt-4 leading-tight tracking-wide lg:text-xl">{lessonDescription}</p>
     </article>
   );
 }

apps/academy/src/components/CopyToClipboard.tsx

@@ -0,0 +1,15 @@
+import { Button,Icons } from "ui";
+
+interface Props {
+  children: string;
+}
+
+export const CopyToClipboard = ({ children }: Props) => {
+  return (
+    <div className="border-1 border-silver rounded-5 absolute right-1 top-1 z-10 bg-gray-700">
+      <Button onClick={() => void navigator.clipboard.writeText(children)}>
+        <Icons.copy_icon />
+      </Button>
+    </div>
+  );
+};

apps/academy/src/components/Header.tsx

@@ -14,7 +14,7 @@ const sampleMenus: NavItem[] = [
   },
   {
     name: "Tracks",
-    href: "/track/1", // hardcoded trackID for now. For the sake of using the dynamic route - 23 nov 2023
+    href: "/intro-to-ethereum/1", // hardcoded trackID for now. For the sake of using the dynamic route - 23 nov 2023
     icon: "vector",
   },
   {

apps/academy/src/components/LessonLayout.tsx

@@ -0,0 +1,34 @@
+import AboutCourse from "@/components/AboutCourse";
+import CreatedBy from "@/components/CreatedBy";
+
+interface LessonLayoutProps {
+  children: React.ReactNode;
+  lessonTitle: string;
+  lessonDescription: string;
+}
+
+export default function LessonLayout({
+  children,
+  lessonTitle,
+  lessonDescription,
+}: LessonLayoutProps) {
+  return (
+    <main className="pt-32 text-white">
+      <section className="text-center">
+        <h1 className="font-future text-3xl lg:text-8xl">{lessonTitle}</h1>
+        <div className="ml-16 mt-7 h-px w-72 border border-white lg:w-[90%]"></div>
+      </section>
+      <div className="flex flex-col lg:flex-row lg:justify-between lg:pt-24">
+        <div className="order-first lg:order-last">
+          <CreatedBy />
+        </div>
+        <div className="order-last lg:order-first">
+          <AboutCourse lessonDescription={lessonDescription} />
+        </div>
+      </div>
+      <div className="font-clash-display px-36 pt-16 text-xl font-medium tracking-wider	">
+        {children}
+      </div>
+    </main>
+  );
+}

apps/academy/src/components/mdx/Callout.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export interface CalloutProps {
+  [x: string]: any;
+  // size?: string;
+  // variant?: string;
+  emoji: string;
+  children: React.ReactNode;
+}
+
+const Callout = (props: CalloutProps): JSX.Element => {
+  const { /* size, variant, */ emoji, children, ...rest } = props;
+
+  // const styles = useStyleConfig("Callout", { size, variant });
+  return (
+    <div /*__css={styles} */ {...rest}>
+      <div className="flex border-spacing-4 flex-row">
+        <div className="mt-3 text-2xl">{emoji}</div>
+        <div className="max-w-[90%]">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Callout;

apps/academy/src/components/mdx/Components.tsx

@@ -0,0 +1,43 @@
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import dracula from "react-syntax-highlighter/dist/cjs/styles/prism/dracula";
+
+import { CopyToClipboard } from "@/components/CopyToClipboard";
+import Callout from "@/components/mdx/Callout";
+import Question from "@/components/mdx/Question";
+// import SideDrawer from "@/components/mdx/SideDrawer";
+import Quiz from "@/components/mdx/Quiz";
+
+const Components = {
+  code: (props: any) => {
+    const [, language] =
+      props.className !== undefined && props.className.length > 0
+        ? props.className.match(/language-(\w+)/)
+        : [];
+
+    if (language !== undefined) {
+      return (
+        <div className="relative">
+          <SyntaxHighlighter language={language} {...props} style={dracula} />
+          <CopyToClipboard {...props} />
+        </div>
+      );
+    }
+
+    // return <Code fontSize="md" wordBreak="break-all" {...props} />;
+    return <div className="text-md break-all" {...props} />;
+  },
+  h1: (props: any) => <h1 apply="mdx.h1" className="text-4xl" {...props} />,
+  h2: (props: any) => <h2 apply="mdx.h2" className="text-3xl" {...props} />,
+  h3: (props: any) => <h3 apply="mdx.h3" className="text-2xl" {...props} />,
+  h4: (props: any) => <h4 apply="mdx.h4" className="text-xl" {...props} />,
+  p: (props: any) => <p apply="mdx.p" className="text-xl" {...props} />,
+  a: (props: any) => <a apply="mdx.a" {...props} />,
+  ul: (props: any) => <ul apply="mdx.ul" className="text-xl" {...props} />,
+  img: (props: any) => <img apply="mdx.image" className="m-0" alt="" {...props} />,
+  // SideDrawer,
+  Callout,
+  Quiz,
+  Question,
+};
+
+export default Components;

apps/academy/src/components/mdx/LessonHeader.tsx

@@ -0,0 +1,40 @@
+import NextLink from "next/link";
+import { Icons } from "ui";
+
+interface LessonHeaderProps {
+  title: string;
+  discussionUrl?: string;
+}
+
+const DEFAULT_DISCUSSION_URL = "https://developerdao.peeranha.io/";
+
+export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
+  const forumLink = discussionUrl !== undefined ? discussionUrl : DEFAULT_DISCUSSION_URL;
+
+  return (
+    <div>
+      <div>
+        <h1
+          className="color-yellow-300 mt-6 text-3xl font-bold"
+          // letterSpacing={-0.025}
+        >
+          {title}
+        </h1>
+      </div>
+      {forumLink && (
+        <div className="my-6 flex max-w-xl flex-row">
+          <div>
+            <Icons.help_circle className="h-8 w-8" />
+          </div>
+          <div>
+            If you get stuck or have questions please visit our{" "}
+            <NextLink href={forumLink} className="underline">
+              forum
+            </NextLink>
+            .
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}