@bigbinary/neeto-course-page

Usage

import NeetoCoursePage from "@bigbinary/neeto-course-page"; // as a external package

const App = () => (
  <NeetoCoursePage
    courseId="learn-sql"
    chapterId="joins"
    pageId="introduction-to-joins"
    metadata={{
                courseName: "learn HTML",
                pageType: "lesson",
                chapterNumber: "1",
                pageNumber: "3",
                title: "Tables",
              }}
    pageComponents={[
      {
        data: "Currently in the students table there are two types of information - students information and course information.\n\n",
        type: "text",
        index: 0,
      },
      {
        type: "image",
        index: 1,
        config: {
          imageClasses: "h-72",
          containerClasses: "flex justify-center",
        },
        content: {
          url: "https://res.cloudinary.com/xyz/images/students-ID-table.png",
          name: "students-ID-table.png",
        },
      },
      {
        code: {
          code_tabs: [],
          code_panels: [],
          code_content: "\nSELECT name, course\nFROM   students\n",
          code_composition: "single_language",
        },
        type: "codeblock",
        index: 2,
        config: {
          type: "lesson",
          dbName: "students1.db",
          language: "sql",
        },
      },
    ]}
    courseSlug="learn-ruby"
    showNeetoCodeLink
    signedInUser={{ email: "[e-mail]" }}
  />
);

Props:

Prop	Type	Required	Description
courseId	string	Yes	Course ID/slug of the course that the page belongs to.
chapterId	string	Yes	Chapter ID/slug of the course that the page belongs to.
pageId	string	Yes	Page ID/slug of the course that the page belongs to.
pageComponents	Array of objects	Yes	Block components of the page
courseSlug	string	Yes	Course slug of the course that the page belongs to.
saveExerciseCode	boolean	No	Specifies whether exercises code per codeblock is saved in localstorage (Default: true)
pageVersionId	string	No	Page version ID of the page if we want to load data specific to a particular version of the page specified. (Default: null)
subdomain	string	No	Subdomain of organization the page belongs to (Default: null). Needed in use cases where there are common pages across organizations and we're building a generic app for across organizations.
prAppName	string	No	PR review app name for cases where we want to load a page in the scope of a PR app in neetoCourse (Default: null).
showNeetoCodeLink	boolean	No	Specifies whether to show link to redirect to neetoCode or not.
signedInUser	object	required if showNeetoCodeLink is true	Object containing user details in neetoCode.
onNeetoCodeLinkClick	function	No	Callback function which is triggered when neetoCode link is clicked.
metadata	object	No	Metadata used to create project title in neetoCode.

To test the local packages as dependencies using yalc

Install yalc globally

yarn global add yalc

The usage of yalc is explained in this video: https://youtu.be/F4zZFnrNTq8

cd into NeetoCoursePage directory:

cd Components/NeetoCoursePage

run the commands from the NeetoCoursePage root directory:

yarn install
yarn build
yalc publish

Delete the neeto-course-page node_module directory from your dependent projects like: https://github.com/bigbinary/neeto-course-web

rm -rf node_modules/@bigbinary/neeto-course-page

Add the yalc-stored dependency to your dependent project & then install

yalc add  @bigbinary/neeto-course-page
yarn install

We can update the package with the local changes in the store and push the changes to the dependent project. From neeto-course-page directory run

yalc push

To remove the dependency from the dependent project run:

yalc remove package-b

[!WARNING] After pushing the changes, you need to remove the build artifacts created by yarn build else neeto-course-site won't load. Inside the NeetoCoursePage directory, do:

rm -rf node_modules index.cjs.js index.js index.css