Skip to main content

Conventions and Styles

Next Steps 2023-02-20​

  1. Fix capitalization: Use UpperCase for Components only and lower-case for everything else
  2. How to handle Transaction Components. If a Tx Component is part of a Lesson or Module, then keep it in the course-modules folder. If a Tx Component is more general and will be re-used across LMS instances, then it will go in src/components/transactions. ContributorPairMintingComponent.tsx could fit into either category. For now, it is in course-modules/100. (As we move on, it will be easier to distinguish course content from lms components.)
  3. One example of re-usable LMS components are the GPTE interactions. We will use GPTE contracts for students to commit to modules and then get validation by an "Issuer" (ie, Teacher) that the assignment is complete. This does not have to start right away - maybe by module 102? For immediate next step: build GPTE Template (James by EOD Monday). When that's done, integrate GPTE Template into main. Show as a proof of concept how holder to Contributor token minted in 100 can be use to Commit to Module 102.
  4. All of the above gives us a reason to Add transactions folder /components - what sub folders are needed?
  5. Start thinking about Data - back to discussion boards and mastery status
  6. For storing instance variables like addresses and .plutus scripts, what's best, /cardano folder or config file at project root?

LMS File Structure​

We are building as we go and must be sure to distinguish between reusable LMS components and course-specific content.

Reusable LMS components are found in src/components/lms/ and src/components/ui. As we build, we'll create collections of templates for use in src/pages.

Course Content Structure​

How to organize pages in each Course Module:​

  • src/pages/modules/[module_id] includes a sequence of Lesson pages.
  • src/pages/modules/[module_id]/index.tsx is the home page for the module and can include a welcome message or overview.
  • deprecated? src/pages/modules/[module_id]/[module_id]-SLTs.tsx follows the index and includes the list of Student Learning Targets. We might make this page dynamic, for example by reporting to student their status on each SLT.
  • Finally, add a sequence of lesson pages. We'll build templates as we go for Projects, Plutus Puzzles, Lessons, Videos, Assignments, and whatever other experiments we can think of.

Components​

  • src/components/course-modules/[module_id] includes all of the components for that section of the course.
  • src/components/course-details/ provides course-level components and can be used as an example or template for other courses.

Theming​

Colors, spacing, fonts and more are found in _app.tsx. Look for mdx-content to change the look of .mdx files.

Content Structure​

src
 ┣ cardano
 ┃ ┗ plutus
 ┃ ┃ ┣ contributorPlutusMintingScript.ts
 ┃ ┃ ┗ contributorReferenceValidator.ts
 ┣ components
 ┃ ┣ course-details
 ┃ ┃ ┣ About-SLTs.tsx
 ┃ ┃ ┣ Governance.tsx
 ┃ ┃ ┣ List-of-modules.tsx
 ┃ ┃ ┗ PBL-framework.tsx
 ┃ ┣ course-modules
 ┃ ┃ ┣ 100
 ┃ ┃ ┃ ┣ ContributorMinter
 ┃ ┃ ┃ ┃ ┗ ContributorPairMintingComponent.tsx
 ┃ ┃ ┃ ┗ Status100.tsx
 ┃ ┃ ┗ SLTs.tsx
 ┃ ┣ lms
 ┃ ┃ ┣ Lesson
 ┃ ┃ ┃ ┣ AssignmentComponent.tsx
 ┃ ┃ ┃ ┣ MDXLessonLayout.tsx
 ┃ ┃ ┃ ┣ SuccessComponent.tsx
 ┃ ┃ ┃ ┗ VideoComponent.tsx
 ┃ ┃ ┗ Status
 ┃ ┃ ┃ ┗ StatusBox.tsx
 ┃ ┗ ui
 ┃ ┃ ┗ Text
 ┃ ┃ ┃ ┣ Hero.tsx
 ┃ ┃ ┃ ┣ Navbar.tsx
 ┃ ┃ ┃ ┣ SLT.tsx
 ┃ ┃ ┃ ┗ Sidebar.tsx
 ┣ data
 ┃ ┗ nav-items
 ┃ ┃ ┣ mastery.json
 ┃ ┃ ┣ modules.json
 ┃ ┃ ┗ plutus.json
 ┣ pages
 ┃ ┣ contributors
 ┃ ┣ dashboard
 ┃ ┣ get-started
 ┃ ┃ ┗ index.tsx
 ┃ ┣ modules
 ┃ ┃ ┣ 100
 ┃ ┃ ┃ ┣ 100-SLTs.tsx
 ┃ ┃ ┃ ┣ index.tsx
 ┃ ┃ ┃ ┣ lesson-1001.tsx
 ┃ ┃ ┃ ┣ lesson-1002.tsx
 ┃ ┃ ┃ ┣ lesson-1003.tsx
 ┃ ┃ ┃ ┗ lesson-1004.tsx
 ┃ ┃ ┗ 101
 ┃ ┃ ┃ ┣ example.mdx
 ┃ ┃ ┃ ┗ index.tsx
 ┃ ┣ projects
 ┃ ┣ _app.tsx
 ┃ ┣ _document.tsx
 ┃ ┗ index.tsx
 ┗ styles