Neeto Course Page Component
npm install @bigbinary/neeto-course-page``jsx
import NeetoCoursePage from "@bigbinary/neeto-course-page"; // as a external package
const App = () => (
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: "oliver@example.com" }}
/>
);
`
| 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. |
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
>