feat: migrate docs from Nextra to Fumadocs (#606)
* feat: checkpoint * feat: Migrate docs to Fumadocs * chore: docs layout * chore: - remove home route - make docs home route - remove docs prefix * chore: docs layout * chore: - reorder sidebar - fix home page redirect * chore: rename package to avoid error during pnpm clean * chore: remove private and sideEffects properties from package.json * chore: requested fixes * feat: update fumadocs layout * feat: hide theme switch on sidebar * add /docs * feat: enhance documentation and layout with new guides and updates - Added multiple how-to guides for creating courses, exercises, and managing organization settings. - Updated existing documentation for clarity and consistency, including renaming sections for better navigation. - Introduced new assets such as logos and favicon for improved branding. - Modified layout components to enhance user experience and visual appeal. - Updated package dependencies to include lucide-react for icon usage. * chore: update pnpm-lock.yaml with dependency version changes * add favicon * fix: update links in documentation for consistency - Corrected the links in the create-exercise and signup guides to ensure they point to the correct paths, enhancing clarity and navigation for users. * delete docs --------- Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
ac1a05f006
commit
2526f4c227
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: How to Create Certificates
|
||||
description: Learn how to create certificates for your course.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
<Callout type="warn" title="Work in Progress">
|
||||
This page is a work in progress. Help us expand it by contributing!
|
||||
</Callout>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Create a Course Landing Page
|
||||
description: Learn how to create a course landing page.
|
||||
---
|
||||
|
||||
ClassroomIO empowers you to design a course landing page, enabling you to showcase your courses to prospective students. On this page, students can explore course details, enrollment statistics, fees (if applicable), and course availability, enabling them to make informed choices. To access this, from your admin dashboard, navigate to **Settings** > **Landing Page.**
|
||||
|
||||
## Steps
|
||||
|
||||
### 1. Go to the Courses page
|
||||
|
||||
Once you are logged in, click on **Courses** on the left sidebar, you will be taken to your course list page where you can access the courses you have created. For this tutorial, we will focus on the **Intro to Javascript** course displayed in the image below. Click on the desired course to proceed to its respective dashboard.
|
||||
|
||||
|
||||
|
||||
### 2. Open the Landing page editor
|
||||
|
||||
Select the "**Landing page**" option from the sidebar, which will lead you to the settings for your landing page. Here, you can customize various aspects of your course, including the course title, fees (if applicable), requirements, description, and more.
|
||||
|
||||
|
||||
|
||||
### 3. Edit and Save your changes
|
||||
|
||||
After making the desired adjustments, ensure to save your changes by clicking on the "**Save**" button located at the top-left corner of the screen. Then, to preview the updated landing page, click on the arrow button situated to the right of the "**Save**" button.
|
||||
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
title: How to Create an Exercise
|
||||
description: Learn how to create exercises in ClassroomIO.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
In ClassroomIO, exercises are a great way to assess students' understanding through practice activities. Once you've [set up your organization](/docs/how-to-guides/customize-organization), [created a course](/docs/how-to-guides/create-first-course), and [added a lesson](/docs/how-to-guides/create-first-course#adding-lessons), you can start creating exercises. Follow the process below to create your first exercise.
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
### Go to the Courses Page
|
||||
|
||||
Access the courses page from the dashboard by clicking on **Courses** via the sidebar menu.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Select a Course
|
||||
|
||||
On the courses page, click on a course to go to the course page.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Select a Lesson
|
||||
|
||||
On the course page, click on **Lessons** via the left sidebar menu and select the lesson you want to create an exercise for.
|
||||
|
||||
> Alternatively, you can click on the **⌄** icon next to the **Lessons** option to select a lesson.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Add an Exercise
|
||||
|
||||
Locate the tabs at the top of the page and select the **Exercises** tab. Then click on the **Add** button. On the modal, select a method to create an exercise. You can create an exercise:
|
||||
|
||||
|
||||
|
||||
1. **From scratch**: Create an exercise by adding the questions yourself. This is handy if you've prepared your questions.
|
||||
- Enter the exercise name and click on the **Finish** button.
|
||||
- Click on the newly created exercise and provide the exercise description, due date, and question details.
|
||||
|
||||
|
||||
|
||||
2. **Using a template**: You can select from an array of templates with predefined exercises complete with questions and options.
|
||||
- Select a template and click on the **Finish** button.
|
||||
|
||||
|
||||
|
||||
3. **Using AI**: AI helps you generate exercises directly from lesson notes.
|
||||
- Enter the number of questions and options. Next, click on the **Generate** button.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Preview Exercise
|
||||
|
||||
To preview the exercise, click on the **preview icon**. This is to ensure the exercise looks and functions as expected.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Add Questions
|
||||
|
||||
To add a question, click on the **add icon**.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Reorder Questions
|
||||
|
||||
To reorder questions, click on the **three dots** > **Reorder Questions**, then drag and drop the questions.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Save Changes
|
||||
|
||||
After previewing, adding, and rearranging questions, ensure to save your changes by clicking on the **Save** button. This will apply your modifications to the exercise.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Your Exercise Is Ready
|
||||
|
||||
You've successfully created your first exercise and it is now accessible to students enrolled in the course. Move on to the next section to start grading your exercise.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: Creating Your First Course
|
||||
description: Learn how to create your first course on ClassroomIO.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
|
||||
Below is a video guiding you through the process of creating your inaugural course. Should you have any inquiries, feel free to drop a comment in the YouTube comment section, reach out to us on **[Discord](https://discord.gg/BSaEzcfu)**, or send a DM on **[Twitter](https://x.com/rotimi_best?s=20)**.
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/ztiZ6vo2gg0?si=v_UUL1YUPyDQ4_pp"
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
## Procedure
|
||||
|
||||
Initiating a course on ClassroomIO is a straightforward process, involving the following steps:
|
||||
|
||||
1. **Accessing the Course Section:** Navigate to the admin dashboard and select "Courses" from the sidebar menu.
|
||||
|
||||
2. **Initiating Course Creation:** Once on the Courses page, locate and click the "Create Course" button situated in the top right corner of the interface.
|
||||
|
||||
3. **Providing Course Details:** Complete the necessary fields, including the course title and description. Optionally, utilize the wand icon next to the description field for AI-assisted generation.
|
||||
|
||||
Upon completion, click **Finish** to save and automatically redirect to the course page.
|
||||
|
||||
## Next Steps
|
||||
|
||||
Following course creation, consider the following enhancements:
|
||||
|
||||
- Adding Lessons
|
||||
- Including Notes
|
||||
- Generating Notes with AI
|
||||
- Embedding Slides
|
||||
- Embedding YouTube Videos
|
||||
|
||||
## Adding Lessons
|
||||
|
||||
Adding lessons to a course is achieved through the following steps:
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
### Click the Lesson Link
|
||||
|
||||
On the course page, click "Lessons" in the sidebar to access the lessons page. Click the "Add" button in the top right corner to open the Add Lesson modal.
|
||||
|
||||
> Alternatively, add a lesson on-the-go by clicking the '+' icon next to the lesson link in the sidebar.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Fill in the Lesson Details
|
||||
|
||||
Provide the lesson title, select a tutor, date, and optionally lock the lesson or notes.
|
||||
|
||||
<Callout title="💡 Tip">
|
||||
Locking the lesson renders it inaccessible to students upon course publication.
|
||||
</Callout>
|
||||
|
||||
Save your changes to be redirected to the lesson page for material addition.
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
For each lesson, you may furnish materials such as notes, slides, and videos by clicking the "Edit" button on the top right corner of the **Materials** tab.
|
||||
|
||||
## Adding Notes
|
||||
|
||||
Notes can be added to a lesson manually or via AI assistance:
|
||||
|
||||
1. Click "Edit" while on the materials tab of the lesson page.
|
||||
2. Navigate to the notes tab if not already selected.
|
||||
3. Input your lesson content using the provided text editor or utilize AI assistance by clicking the **magic wand** icon.
|
||||
4. Click "Done" in the top right corner to save your note.
|
||||
|
||||
### Generating Notes with AI
|
||||
|
||||
The assistive AI can generate notes based on your lesson topic, offering options such as generating an outline, notes, or activities, streamlining the note creation process.
|
||||
|
||||
## Embedding Slides
|
||||
|
||||
To embed slides, navigate to the slides tab and input the link to the slides. Click "Done" to save your slides.
|
||||
|
||||
## Embedding Videos
|
||||
|
||||
Embedding videos is simple: select the "Videos" tab to open the modal for adding videos. From the "Add By" options in the modal, select the "YouTube Link" tab. Input the link to the YouTube video and click the "Add Video" button. Once added, the video is automatically included in your materials. You can delete the video using the trash icon.
|
||||
|
||||
<Callout type="warn">
|
||||
Please note that for now, we do not support adding videos from local sources.
|
||||
</Callout>
|
||||
|
||||
## Publishing a course
|
||||
|
||||
To publish a course, navigate to the settings section in the sidebar of the course page. Scroll down to find the "Publish Course" option and toggle it to "Publish". Finally, click the "Save Changes" button to ensure your modifications are saved.
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
title: Customize Your Organization
|
||||
description: Learn how to customize your organization settings.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
|
||||
ClassroomIO empowers every organization to tailor their experience to their unique needs. In this guide, you will learn how to customize your organization settings. To access this, from your admin dashboard, navigate to **Settings** > **Organization**.
|
||||
|
||||
|
||||
|
||||
## Update Organization Profile
|
||||
|
||||
Easily update your organization's profile by modifying the designated fields in the Organization Profile section of the Settings page. Here, you can update your organization name and logo with your preferred choices.
|
||||
|
||||
To update your organization profile details, follow these steps:
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
### Go to Organization Settings
|
||||
|
||||
From your dashboard, click on Settings, then select Organization in the tabs of the settings page.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Change Your Organization Name
|
||||
|
||||
Fill the Organization name field with your preferred name.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Click on Upload Image
|
||||
|
||||
Click the Upload Image button to select an image for upload.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Select an Image
|
||||
|
||||
Choose a logo or image of your choice from your device.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Click Update Organization Button
|
||||
|
||||
Save the changes by clicking the **Update Organization** button.
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
By clicking the **Update Organization** button, the updated preferences in the Organization section will be applied across the entire dashboard.
|
||||
|
||||
## Customize Domain
|
||||
|
||||
Upon onboarding, each organization in ClassroomIO is assigned a custom Domain URL. This URL directs users to the organization's customizable website, making it easy for audiences to access published courses, FAQs, and other relevant information tailored to your organization's preferences. To customize your organization's domain URL, follow these steps:
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
### Click on "Edit Domain"
|
||||
|
||||
Click the Edit Domain button to navigate to the domain setup page.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Update the URL Field with Your Preferred Choice
|
||||
|
||||
Fill the field with your desired URL.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Save Changes
|
||||
|
||||
Click on Update Domain to save the changes.
|
||||
|
||||
> You can click on **View Site** to be redirected to your Organization website with the updated URL.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
<Callout title="⏳ Coming Soon">Organizations can also integrate existing domain names.</Callout>
|
||||
|
||||
## Set Brand Color
|
||||
|
||||
We understand that every organization has a preferred color that suits their brand, hence we offer organizations the flexibility to choose a theme for their brand from a variety of colors like **blue**, **green**, **orange**, and more. To select a brand color for your organization simply click on any of the provided color theme and this would be automatically applied across your entire application.
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: How to Grade an Exercise
|
||||
description: Learn how to grade exercises submitted by students.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
|
||||
<Callout type="warn" title="Work in Progress">
|
||||
This page is a work in progress. Help us expand it by contributing!
|
||||
</Callout>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: How to Invite Students
|
||||
description: Learn how to invite students to your courses.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
|
||||
<Callout type="warn" title="Work in Progress">
|
||||
This page is a work in progress. Help us expand it by contributing!
|
||||
</Callout>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Inviting a Team Member
|
||||
description: Learn how to invite team members to your organization.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
|
||||
<Callout type="warn" title="Work in Progress">
|
||||
This page is a work in progress. Help us expand it by contributing!
|
||||
</Callout>
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"create-first-course": "Creating Your First Course",
|
||||
"create-exercise": "How to Create an Exercise",
|
||||
"customize-organization": "Customize Your Organization",
|
||||
"course-landingpage": "Create a Course Landing Page",
|
||||
"setup-profile": "Setup Profile",
|
||||
"certificates": "How to Create Certificates",
|
||||
"grade-exercise": "How to Grade an Exercise",
|
||||
"invite-students": "How to Invite Students",
|
||||
"invite-team-member": "Inviting a Team Member",
|
||||
"take-attendance": "How to Take Attendance"
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: Setup Profile
|
||||
description: Learn how to setup your profile on ClassroomIO.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
### Go to ClassroomIO
|
||||
|
||||
Go to [app.classroomio.com](https://app.classroomio.com). Click on the "Login" button on the top right to take you to the Login page.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Sign In
|
||||
|
||||
Sign in with your email & password.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Go to the Settings page
|
||||
|
||||
Click on the "Settings" button on the lower left corner on your dashboard page and you'll be routed to the profile page.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Make Changes
|
||||
|
||||
Upload a profile picture and edit any input field you want to then click "Update Profile".
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: How to Take Attendance
|
||||
description: Learn how to take attendance for your classes.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
|
||||
<Callout type="warn" title="Work in Progress">
|
||||
This page is a work in progress. Help us expand it by contributing!
|
||||
</Callout>
|
||||
Reference in New Issue
Block a user