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
2025-12-21 13:36:04 +01:00
committed by GitHub
co-authored by Rotimi Best
parent ac1a05f006
commit 2526f4c227
126 changed files with 5808 additions and 1019 deletions
-2
View File
@@ -1,2 +0,0 @@
.next
node_modules
-21
View File
@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2022 Shu Ding
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-31
View File
@@ -1,31 +0,0 @@
# ClassroomIO Documentation
The help docs of classroomio in Next.js live on [https://classroomio.com/docs](https://classroomio.com/docs)
## Development
### Local setup
1. Clone the repo
```bash
git clone https://github.com/rotimi-best/classroomio.git
```
2. Go to project folder
```bash
cd classroomio
```
3. Install the required dependencies
```bash
pnpm i
```
4. Run (in development mode)
```bash
pnpm dev --filter=docs
```
-6
View File
@@ -1,6 +0,0 @@
.counter {
border: 1px solid #ccc;
border-radius: 5px;
padding: 2px 6px;
margin: 12px 0 0;
}
-24
View File
@@ -1,24 +0,0 @@
// Example from https://beta.reactjs.org/learn
import { useState } from 'react'
import styles from './counters.module.css'
function MyButton() {
const [count, setCount] = useState(0)
function handleClick() {
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick} className={styles.counter}>
Clicked {count} times
</button>
</div>
)
}
export default function MyApp() {
return <MyButton />
}
-5
View File
@@ -1,5 +0,0 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
-25
View File
@@ -1,25 +0,0 @@
const million = require('million/compiler');
const env = process.env.NODE_ENV;
const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.tsx'
});
const nextConfig = {
basePath: env === 'production' ? '/docs' : undefined,
env: {
imagePath: env === 'production' ? '/docs' : ''
},
images: {
unoptimized: true
},
...withNextra()
};
const millionConfig = {
auto: true
};
module.exports = million.next(nextConfig, millionConfig);
-35
View File
@@ -1,35 +0,0 @@
{
"name": "@cio/docs",
"version": "0.0.1",
"description": "ClassroomIO Documentation",
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/classroomio/classroomio.git"
},
"author": "Shu Ding <g@shud.in>",
"license": "MIT",
"bugs": {
"url": "https://github.com/classroomio/classroomio/issues"
},
"homepage": "https://github.com/classroomio/classroomio#readme",
"dependencies": {
"million": "^3.0.3",
"next": "^13.0.6",
"nextra": "2.13.2",
"nextra-theme-docs": "2.13.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "18.11.10",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"typescript": "^4.9.3"
}
}
-36
View File
@@ -1,36 +0,0 @@
{
"-": {
"type": "separator",
"title": "Introduction"
},
"index": "Welcome",
"what-is-classroomio": "What is ClassroomIO",
"quickstart": "Quick Start",
"--": {
"type": "separator",
"title": "Core Features"
},
"organization": "Organization",
"course": "Course",
"student-dashboard": "Student Dashboard",
"community": "Community",
"audience": "Audience",
"---": {
"type": "separator",
"title": "Guides"
},
"contributor-guides": "Contributor Guides",
"howtoguides": "How To Guides",
"contact": {
"title": "Contact ↗",
"type": "page",
"href": "https://twitter.com/classroomio",
"newWindow": true
},
"demo": {
"title": "Demo ↗",
"type": "page",
"href": "https://dub.sh/ciodemo",
"newWindow": true
}
}
-7
View File
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# Audience
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
-7
View File
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# Community
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
@@ -1,9 +0,0 @@
{
"demo-accounts": "Demo Accounts",
"devs": "Developers Guide",
"gitpod": "Gitpod setup",
"supabase-cloud": "Supabase Cloud Setup",
"design": "Designers Guide",
"student-dashboard": "Student Dashboard",
"cloudflare-setup": "Cloudflare Setup"
}
@@ -1,44 +0,0 @@
# Adding Translation To Your Code - Developer's Guide
In this guide, we'll walk through the process of adding translations to your code. This enables multi-translation support on the platform, enhancing the experience for every users.
## Obtain Your RapidAPI Key
Follow these steps:
1. Open your browser and navigate to https://rapidapi.com/hub.
2. Sign up using your GitHub account or email, whichever you prefer.
3. Search for 'Google Translate' then click on the 'Pricing' tab.
4. Choose a subscription plan and return to the 'Endpoints' tab.
5. Focus on the last tab (on your right).
6. Your key is located in the 'headers' object under 'X-RapidAPI-Key'.
7. Go to your `.env` file in the `/apps/dashboard` directory and assign your key to this variable `RAPID_API_KEY`
## Update Your English File
Once you have your API Key, follow these steps to add a translation:
1. Open the English file named `en` located in `apps\dashboard\src\lib\utils\translations\en.json`.
2. Create an object with a name corresponding to the translation you wish to add.
Example: `"tabs": { "profile": "Profile", "landing_page": "Landing Page" }`.
3. Now, navigate to the file where you want to insert the translation.
4. Import the translation function:
````bash copy
import { t } from '$lib/utils/functions/translations';
````
5. Locate the line where you want to add the translation and use the following syntax: `$t('path to the value in the object')`.
Example: `<p>{$t('tabs.profile')}</p>` (This will output "Profile").
Note: `$t('')` returns a string.
## Run the translate script
Once you've updated the English file, you need to update the other files. To do this, run a command. Firstly ensure you're still in the `/apps/dashboard` directory, then execute:
````bash copy
pnpm run script:translate
````
This command runs a script that updates the other translation files.
@@ -1,7 +0,0 @@
import Image from 'next/image';
import { Steps } from 'nextra/components';
import { Callout } from 'nextra/components';
# Cloudflare Setup
In this guide, you will learn how to get your cloudflare environment variables. We use Cloudflare R2 for video uploads and the aim of this guide is to help you get the right variables to properly setup our api.
@@ -1,50 +0,0 @@
import { Callout } from 'nextra/components';
# Login quickly with Demo Accounts
This guide will help you get started quickly once you setup our local environment and you want to start using the [dashboard](https://app.classroomio.com).
<Callout>
The assumption of this guide is that you've gone through our README and you've setup `supabase`
and you have `dashboard` running locally.
</Callout>
### Admin Login Credentials.
Once you have the `dashboard` service running locally and you have setup supabase, we added seed data that can allow you access an admin account to a demo organization and a student account to a student dashboard. This allows you see what ClassroomIO can do quickly without trying to figure it out.
**Login:** admin@test.com
**Password:** 123456
<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/RfE4tQ_BEds?si=uXpYKokMg4SWMkQX"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
className="nx-my-4 nx-rounded-md"
allowfullscreen
></iframe>
</div>
### Student Login Credentials
**Login:** student@test.com
**Password:** 123456
<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/FG7B9rKjVi4?si=TeY088zf8OsELocC"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
className="nx-my-4 nx-rounded-md"
allowfullscreen
></iframe>
</div>
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# Design Contribution Guide
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
@@ -1,29 +0,0 @@
# Developers Contribution Guide
First and foremost, we're absolutely thrilled that you're considering becoming a part of the community
## Issue Hunters
Did you stumble upon a bug? Encountered a hiccup in deployment? Perhaps you have some user feedback to share? Your quickest route to help us out is by [raising an issue](https://github.com/rotimi-best/classroomio/issues/new/choose).
## Feature Architects
We invite innovative minds to contribute to the evolution of ClassroomIO. If you have a compelling feature proposal that could enhance our platform, please initiate a formal issue submission and apply the "Enhancement" label. We highly value and eagerly anticipate each unique idea presented by our community. To ensure thorough understanding and effective evaluation, kindly include a detailed rationale for your proposed feature. Your insights are crucial to our continuous growth and innovation.
## Pull Requests
Ready to dive into the code and make a real impact? Here's your path:
1. **Fork the Repository:** Fork our repository or use [Gitpod](https://classroomio.com/docs/contributor-guides/gitpod)
2. **Implementation:** Code it out, test it and apply your changes.
3. **Pull Request:** If you're ready to go, create a new pull request following our PR template
Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://dub.sh/ciodiscord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
## Feature Ideas
If you spot a feature that isn't part of our official plan but could propel ClassroomIO forward, don't hesitate. Raise it as an enhancement issue, and let us know you're ready to take the lead. We'll be quick to respond.
Together, let's craft the future of ClassroomIO, making it better, bolder, and more brilliant!
@@ -1,28 +0,0 @@
import Image from 'next/image';
import { Callout } from 'nextra/components';
import GitpodEnv from './images/gitpod_env.png';
# Gitpod Setup
## One Click Setup
- This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
- Click the button below to open this project in Gitpod.
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rotimi-best/classroomio)
<Callout type="info">
Gitpod does not utilize `localhost` for accessing services. Instead, it uses its own URL after
starting all the necessary services. The correct URLs to access the project are automatically
inserted into the `.env` file upon initialization.
</Callout>
### Viewing URLs in Terminals
To view the URLs, follow these steps:
1. Open your terminal.
2. Click on the `port` to see the URLs.
<Image src={GitpodEnv} alt="gitpod" quality="100" />
Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

@@ -1,31 +0,0 @@
import { Callout } from 'nextra/components';
# Student Dashboard - Developers guide
In this guide I will be showing you how to set up a local student dashboard that a student will see. This dashboard will allow students to view their grades, attendance, and other information. This dashboard will also allow students to submit assignments and view their grades for those assignments.
## Follow the steps in this video
### Requirements
<Callout type="info" emoji="ℹ️">
Make sure to use 2 different browser windows: The reason is that one will be for the admin and
another for the students. For the student we will need to set the cookies value to hold the
organization siteName since we are using the subdomain to access the student dashboard like on
production.
</Callout>
### Demo
<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/QGTnK39xexs?si=ogFbyl2KK0XaFob4"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
className="nx-my-4 nx-rounded-md"
allowfullscreen
></iframe>
</div>
@@ -1,148 +0,0 @@
import Image from 'next/image';
import { Callout, Steps } from 'nextra/components';
import AuthSettings from './images/auth-settings.webp';
import DBPushResult from './images/db-push-result.webp';
import DBUrl from './images/db-url.webp';
import MatchEnvVariables from './images/match-env.webp';
import NewProject from './images/new-project.webp';
import SmtpSettings from './images/smtp-settings.webp';
# Supabase Cloud Setup
In this guide, you will learn how to setup a supabase cloud project and link it to your local environment.
## Who is this guide for?
1. You don't want to setup supabase on your local machine
2. You can't run docker on your computer
3. You are experiencing performance issues using supabase locally
4. You want to selfhost our frontend app but use supabase cloud.
If your requirement matches any of the above, then this guide is for you.
## Video Walkthrough
<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dAZAZ0oiky0?si=1h-KtppNqJ3U4BTe"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
className="nx-my-4 nx-rounded-md"
allowfullscreen
></iframe>
</div>
## Step by Step guide
<Steps>
### Create a Supabase project
For this step you need to have signed up for supabase and create an account, just visit [supabase.com](https://supabase.com).
Once you have an account just click on the _New Project_ on your dashboard. After that you should see a similar screen to the below, fill in the fields.
<Image src={NewProject} alt="New project in supabase" quality="100" />
<Callout>
Make sure you save your database password somewhere, else you won't be able to get it back
anywhere in the dashboard for security reasons.
</Callout>
### Setup Supabase CLI
Follow the instructions [here](https://supabase.com/docs/guides/local-development/cli/getting-started) to setup the Supabase CLI on your computer.
### Login to Supabase via the CLI
Open your terminal and go to the root of the project. Run the following:
```bash copy
supabase login
```
Follow the instruction in your terminal to generate your access token. Paste the token in the console and hit **Enter**
### Push migrations to your Supabase project
- Go to the supabase dashboard, go to your project, click on the settings icon on the left side bar
<Image src={DBUrl} alt="DB URL in the supabase dashboard" quality="100" />
- Copy the URL in the image above for your `db url`
- Paste it somewhere
- In the url, replace `[YOUR PASSWORD]` with your db password (which you saved in section 1).
- Then run in your terminal:
```bash copy
supabase db push --db-url "URL HERE"
```
<Callout>
Make sure you preserve the double quotes before and after the url. Only replace `URL HERE` with
your `db url` that contains your password
</Callout>
#### Result
<Image src={DBPushResult} alt="Result of supabase db push" quality="100" />
### Configure Auth in your Supabase project
Here we will update our email configurations, to prevent supabase from sending confirmation emails on signup. This is because we don't use Supabase for email verification, we handle that internally due to the quality of the email.
<Image src={AuthSettings} alt="Authentication configuration" quality="100" />
### Configure SMTP
Supabase [now requires adding custom SMTP](https://github.com/orgs/supabase/discussions/29370) to your supabase project in order to avoid abuse of their system. Without adding a custom SMTP, your signup requests to your supabase project will fail. To avoid this, you should go to the [STMP section](https://supabase.com/dashboard/project/_/settings/auth) of your supabase settings.
Make sure to toggle **Enable Custom SMTP** and fill in the following fields:
- Sender email
- Sender name
- SMTP host
- SMTP port
- SMTP username
- SMTP password
<Image src={SmtpSettings} alt="SMTP Settings" quality="100" />
<Callout type="info" emoji="ℹ️">
Learn more about setting up SMTP [here](https://supabase.com/docs/guides/auth/auth-smtp)
</Callout>
### Add configurations to your environment variables
Now with all these set up you need to get update the .env file in `apps/dashboard`. You need to update the following environment variables:
```bash copy
PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_ANON_KEY=
PRIVATE_SUPABASE_SERVICE_ROLE=
```
To get the correct environment variables, follow the instructions in this image
<Image src={MatchEnvVariables} alt="Source of supabase environment variables" quality="100" />
### Tada - That's all
Now you can run:
```bash copy
pnpm dev --filter=dashboard
```
- Open the url in your browser
- Click on Sign up
- And that's it ...
<Callout type="info" emoji="ℹ️">
Visit the [Sign up guide](/quickstart/signup) to learn how to signup
</Callout>
</Steps>
-7
View File
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# Course
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
-3
View File
@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-12
View File
@@ -1,12 +0,0 @@
{
"setup-profile": "Setup your Profile",
"customize-organization": "Customize Organization",
"create-first-course": "Create Сourse",
"create-exercise": "Create an Exercise",
"grade-exercise": "Grade an Exercise",
"take-attendance": "Take Attendance",
"certificates": "Create Certificates",
"course-landingpage": "Course Landing Page",
"invite-team-member": "Inviting Team Members",
"invite-students": "Inviting Students"
}
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# How to Create Certificates
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
@@ -1,33 +0,0 @@
import Image from 'next/image';
import CourseLandingPage from './images/course-landing-page.webp';
import CoursePage from './images/course-page.png';
import LandingPage from './images/landing page.png';
# 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.**
<br />
## 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 diaplayed in the image below. Click on the desired course to proceeed to it's respective dashboard.
<br />
<Image src={CourseLandingPage} alt="ClassroomIO Landing Page" quality={100} />
### 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.
<br />
<Image src={CoursePage} alt="ClassroomIO Course Page" quality={100} />
### 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.
<br />
<Image src={LandingPage} alt="ClassroomIO Course Page Settings" quality={100} />
@@ -1,93 +0,0 @@
import Image from 'next/image';
import { Steps } from "nextra/components";
import OrganizationDashboard from './images/organization-dashboard.webp';
import CoursesPage from './images/courses-page.webp';
import CoursePage from './images/course-page.webp';
import Exercise from './images/exercise.webp';
import FromScratch from './images/from-scratch.webp';
import UsingATemplate from './images/using-a-template.webp';
import UsingAI from './images/using-AI.webp';
import Preview from './images/preview.webp';
import AddQuestion from './images/add-question.webp';
import ReorderQuestions from './images/reorder-questions.webp';
import NewExercise from './images/new-exercise.webp';
# How to Create an Exercise
In ClassroomIO, exercises are a great way to assess students' understanding through practice activities. Once you’ve [set up your organization](https://www.classroomio.com/docs/howtoguides/customize-organization), [created a course](https://www.classroomio.com/docs/howtoguides/create-first-course), and [added a lesson](https://www.classroomio.com/docs/howtoguides/create-first-course#adding-lessons), you can start creating exercises. Follow the process below to create your first exercise.
<Steps>
### Go to the Courses Page
Access the courses page from the dashboard by clicking on **Courses** via the sidebar menu.
<Image src={OrganizationDashboard} alt="Organization dashboard displaying a sidebar menu" quality={100} />
### Select a Course
On the courses page, click on a course to go to the course page.
<Image src={CoursesPage} alt="Courses page for organization displaying a sidebar menu and a course card component" quality={100} />
### 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.
<Image src={CoursePage} alt="Course page displaying sidebar menu with the lesson page open" quality={100} />
### 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:
<Image src={Exercise} alt="Course page displaying sidebar menu with the exercise tab open" quality={100} />
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.
<Image src={FromScratch} alt="A pop-up displaying new exercise with an empty field" quality={100} />
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.
<Image src={UsingATemplate} alt="A pop-up displaying new exercise with an array of exercise templates" quality={100} />
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.
<Image src={UsingAI} alt="A pop-up displaying new exercise with two questions about the exercise content" quality={100} />
#### Preview Exercise
To preview the exercise, click on the **preview icon**. This is to ensure the exercise looks and functions as expected.
<Image src={Preview} alt="Exercise content edit page" quality={100} />
#### Add Questions
To add a question, click on the **add icon**.
<Image src={AddQuestion} alt="Exercise content edit page with a red box highlight on the add icon" quality={100} />
#### Reorder Questions
To reorder questions, click on the **three dots** > **Reorder Questions**, then drag and drop the questions.
<Image src={ReorderQuestions} alt="A pop-up showing the question order for exercise" quality={100} />
#### 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.
### 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.
<Image src={NewExercise} alt="Course page displaying sidebar menu with the exercise tab open showing the newly created exercise" quality={100} />
</Steps>
@@ -1,94 +0,0 @@
import { Steps, Callout } from 'nextra/components';
# Creating Your First Course
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 className="nx-w-full nx-flex nx-items-center nx-justify-center">
<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
className="nx-my-4 nx-rounded-md"
></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>
### 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.
### Fill in the Lesson Details
Provide the lesson title, select a tutor, date, and optionally lock the lesson or notes.
<Callout type="info" emoji="💡">
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.
</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 emoji="🚨">
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.
@@ -1,78 +0,0 @@
import Image from 'next/image';
import { Callout, Steps } from 'nextra/components';
import DommainSetupOne from './images/domain-setup-one.webp';
import DommainSetupTwo from './images/domain-setup-two.webp';
import DommainSetupThree from './images/domain-setup-three.webp';
import CustomizeOrg from './images/customize-organization.webp';
# Customize Your Organization
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**.
<Image src={CustomizeOrg} alt="ClassroomIO Organization settings page" quality={100} />
## 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>
### Go to Organization Settings
From your dashboard, click on Settings, then select Organization in the tabs of the settings page.
### Change Your Organization Name
Fill the Organization name field with your preferred name.
### Click on Upload Image
Click the Upload Image button to select an image for upload.
### Select an Image
Choose a logo or image of your choice from your device.
### Click Update Organization Button
Save the changes by clicking the **Update Organization** button.
</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>
### Click on "Edit Domain"
Click the Edit Domain button to navigate to the domain setup page.
<Image src={DommainSetupOne} alt="Custom Domain setup" quality={100} />
### Update the URL Field with Your Preferred Choice
Fill the field with your desired URL.
<Image src={DommainSetupTwo} alt="Edit Custom domain URL" quality={100} />
### 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.
<Image src={DommainSetupThree} alt="Edit Custom domain URL" quality={100} />
</Steps>
<Callout type="info" emoji="⏳">
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 accross your entire application.
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# How to Grade an Exercise
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 270 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 356 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# How to Invite Students
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# Inviting a Team Member
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
@@ -1,35 +0,0 @@
import Image from 'next/image';
import { Steps } from 'nextra/components';
import classroomioBasePage from './images/classroomio.webp';
import signUpPage from './images/login-page.webp';
import unEditedProfilePage from './images/unedited-profile-page.webp';
import editedProfilePage from './images/edited-profile-page.webp';
# Setup Profile
<Steps>
### 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.
<Image src={classroomioBasePage} alt="Classroomio Page" quality="100" />
### Sign In
Sign in with your email & password.
<Image src={signUpPage} alt="Classroomio Page" quality="100" />
### 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.
<Image src={unEditedProfilePage} alt="Unedited Profile Page" quality="100" />
### Make Changes
Upload a profile picture and edit any input field you want to then click "Update Profile".
<Image src={editedProfilePage} alt="Edited Profile Page" quality="100" />
</Steps>
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# How to Take Attendance
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
-11
View File
@@ -1,11 +0,0 @@
# The ClassroomIO Documentation
<br />
<img
alt="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations"
src="https://brand.cdn.clsrio.com/og/classroomio-og.png"
/>
This is the documentation for ClassroomIO, a platform to streamline training for everyone. Our all-in-one platform empowers bootcamps, educators, and businesses to manage training programs easily. Anyone can run multiple classes and cohorts all from one UI, the application is mobile-first, which means that students can access all published content from any device.
It covers everything from setup to usage. You'd find a well detailed explanation of the core features ClassroomIO offers and how to take advantage of them. Developers and Designers can find everything they need to successfully contribute to the project. For more practical usage, we've got a ton of guides ranging from simple functionalities to more complex ones. If there is something we don't cover in this documentation, please feel free to open an issue and we can pick it up from there.
-9
View File
@@ -1,9 +0,0 @@
import { Callout } from "nextra/components";
# Organization
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
We will write about organizations here
-5
View File
@@ -1,5 +0,0 @@
{
"signup": "Signup",
"onboarding": "Onboarding",
"self-hosting": "Self-hosting"
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

@@ -1,9 +0,0 @@
# Onboarding
Welcome again to ClassroomIO and we are super excited you are giving it a try. On this page you will find your onboarding checklist, the first thing you need to do after you've created an account.
1. Set your profile picture
2. Set your organization details
3. Customize your organization landing page
4. Create your first course
5. Share your course with students
-170
View File
@@ -1,170 +0,0 @@
import Image from 'next/image';
import { Callout } from 'nextra/components';
import SelfhostClassroomIO from './images/selfhost-classroomio.webp';
# Self-hosting ClassroomIO.com
This guide will help you quickly selfhost ClassroomIO
<Image src={SelfhostClassroomIO} alt="Selfhost ClassroomIO" quality="100" />
ClassroomIO is made up of the following applications
- [apps/api](https://github.com/rotimi-best/classroomio/tree/main/apps/api) - an Express server
- [apps/dashboard](https://github.com/rotimi-best/classroomio/tree/main/apps/dashboard) - the admin dashboard + LMS
- [supabase](https://github.com/rotimi-best/classroomio/tree/main/supabase) - the database + REST API.
The quickest and easiest way to deploy both the api and dashboard is by using our [Railway Template](https://railway.app/template/dl9RG7?referralCode=8OyIj5). However there are a couple of things that you'd need first before heading over to the template, which are:
1. SMTP values - For sending emails on the api
2. Supabase - For the database used on the dashboard
3. Cloudflare R2 (optional) - Video uploads on the api
## SMTP Setup
Both for the supabase and api setup, you'd need a custom SMTP for email sending. Most importantly you need these values:
```bash
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASSWORD=
SMTP_SENDER=
```
Make sure you have them handy because you'd need them while we go through this selfhosting guide.
<Callout type="info" emoji="ℹ️">
Learn more about setting up a custom SMTP server
[here](https://supabase.com/docs/guides/auth/auth-smtp)
</Callout>
## Supabase
There are 2 options to go about setting up Supabase, you could [selfhost supabase](https://supabase.com/docs/guides/self-hosting) on your own servers or you could use their cloud version. We recommend you use the cloud version because it has a very generous free tier and you get to deploy it very quickly.
We have a standalone guide to help you setup your Supabase Cloud and you can find it [here](https://classroomio.com/docs/contributor-guides/supabase-cloud)
After you go through that guide you will need the following environment variables, please also store them somewhere:
```bash
PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_ANON_KEY=
PRIVATE_SUPABASE_SERVICE_ROLE=
```
## Cloudflare R2
We use Cloudflare R2 for video uploading within the course builder. It is not required though and you can do without it in the app if you don't need video upload.
<Callout type="info" emoji="⏳">
This section is a work in progress.
</Callout>
## Deploy on Railway
Now you have everything you need and you are ready to deploy the api and dashboard.
Go ahead and click this button to get started.
[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/dl9RG7?referralCode=8OyIj5)
### Environment Variables.
#### cio-api
```bash
# Required
SMTP_HOST=""
SMTP_PORT=""
SMTP_USER=""
SMTP_SENDER=""
SMTP_PASSWORD=""
PUBLIC_SUPABASE_URL=""
PUBLIC_SUPABASE_ANON_KEY=""
# Optional
CLOUDFLARE_BUCKET_ID=""
CLOUDFLARE_ACCESS_KEY=""
CLOUDFLARE_ACCOUNT_ID=""
CLOUDFLARE_BUCKET_DOMAIN=""
CLOUDFLARE_SECRET_ACCESS_KEY=""
SENTRY_DNS=""
```
<Callout type="info" emoji="ℹ️">
Learn more about the environment variables
[here](https://github.com/rotimi-best/classroomio/blob/main/apps/api/.env.example)
</Callout>
#### cio-dashboard
```bash
# Required
PUBLIC_SUPABASE_URL=""
PUBLIC_SUPABASE_ANON_KEY=""
PRIVATE_SUPABASE_SERVICE_ROLE=""
PUBLIC_SERVER_URL=""
# Optional
OPENAI_API_KEY=""
PUBLIC_IP_REGISTRY_KEY=""
UNSPLASH_API_KEY=""
PRIVATE_APP_HOST=""
PRIVATE_APP_SUBDOMAINS=""
```
<Callout type="info" emoji="ℹ️">
Learn more about the environment variables
[here](https://github.com/rotimi-best/classroomio/blob/main/apps/dashboard/.env.example)
</Callout>
## Using Docker
We provide a docker-compose configuration to deploy both the api and dashboard services. Here's how to use it:
1. Clone the repository:
```bash
git clone https://github.com/rotimi-best/classroomio.git
cd classroomio
```
2. Create a `.env` file with your environment variables (see Environment Variables section above)
3. Start the services:
```bash
docker compose up --build
```
The services will be available at:
- Dashboard: http://localhost:3082
- Backend: http://localhost:3081
### Service Configuration
The docker-compose file sets up two services:
#### Backend Service
- Runs on port 3081
- Uses Node.js slim image
- Mounts the api code directory
- Requires environment variables for:
- Supabase configuration
- Cloudflare R2 for video uploads
- SMTP for email notifications
#### Dashboard Service
- Runs on port 3082
- Uses Node.js Alpine image
- Uses pnpm for package management
- Requires environment variables for:
- Supabase configuration
- Application settings
- Optional API keys (OpenAI, Unsplash)
Note: We're currently working on including Supabase in the docker-compose file. If you'd like to help with this, please open a PR on GitHub! 👍
-68
View File
@@ -1,68 +0,0 @@
import Image from 'next/image';
import { Steps } from 'nextra/components';
import DashboardHomePageSignedin from './images/dashboard-homepage-signedin.webp';
import DashboardHomePageSignedout from './images/dashboard-homepage-signedout.webp';
import DashboardOnboardingPage1 from './images/onboarding-page1.webp';
import DashboardOnboardingPage2 from './images/onboarding-page2.webp';
import DashboardSignupPage from './images/signup-page.webp';
# Sign Up for ClassroomIO
If you're new to ClassroomIO, you must create an account to set up and launch your organization. By signing up, you'll gain access to all the [exciting features we offer](https://www.classroomio.com/docs/what-is-classroomio#key-features) to supercharge your classroom.
<Steps>
### Go to the Signup Page
Navigate to [app.classroomio.com](https://app.classroomio.com) and click the **Signup** button at the top right corner of the page.
<Image
src={DashboardHomePageSignedout}
alt="ClassroomIO website with a navigation bar at the top of the page containing the logo on the left along with the login and signup button on the right. Also, the page contains an email field with a Join waiting list button."
quality="100"
/>
### Fill the Signup Form
On the signup page, enter your **valid email address**. Next, create a secure password with a **minimum of 6 characters** and confirm it. Click **Create Account**.
You can also sign up using your Google account.
<Image
src={DashboardSignupPage}
alt="ClassroomIO sign-up page with a sign-up form containing inputs for Your Name, Your Password, and, Confirm Password. At the bottom, there is a Create Account button, a Sign up with Google button, and, a link to log in if you already have an account."
quality="100"
/>
### Complete the Onboarding
After completing the Signup form, you'll be redirected to the **Onboarding** page. There, you'll provide your **Full Name** and **Name of Organization.** As you enter your organization name, the **Organization Site Name** field will auto-fill. To proceed, click **Continue**.
<Image
src={DashboardOnboardingPage1}
alt="ClassroomIO onboarding page with a form containing inputs for Full Name, Name of Organization, and, Organization Site Name. At the bottom, there is a Continue button."
quality="100"
/>
Next, you'll complete a brief survey regarding what brought you to ClassroomIO and how you discovered our platform. Your responses will help us tailor ClassroomIO's features to best suit your needs. Finally, click **Continue** to submit.
<Image
src={DashboardOnboardingPage2}
alt="ClassroomIO second slide of onboarding page with a questionnaire"
quality="100"
/>
### Welcome to the Dashboard
You are successfully signed up and ready to use ClassroomIO when you see the dashboard.
<Image
src={DashboardHomePageSignedin}
alt="ClassroomIO dashboard with a big pop-up containing a welcome message"
quality="100"
/>
### What Next?
After signing up successfully, you can now set up and [customize your Organization](https://www.classroomio.com/docs/howtoguides/customize-organization)
</Steps>
-7
View File
@@ -1,7 +0,0 @@
import { Callout } from "nextra/components";
# Student Dashboard
<Callout emoji='🚨'>
This page is a work in progress. Help us expand it by contributing!
</Callout>
-20
View File
@@ -1,20 +0,0 @@
# What is ClassroomIO
<br />
<img alt="ClassroomIO Courses page" src="https://brand.cdn.clsrio.com/classroomio-courses.png" />
Streamline training for everyone with ClassroomIO.com. Our all-in-one platform empowers bootcamps, educators, and businesses to manage training programs easily. With our platform, anyone can run multiple classes and cohorts all from one UI. The application is mobile-first, which means that students can access your lesson materials from any device.
### Mission: Provide Students with the Best Learning Experience
At ClassroomIO, our mission is to provide students with the best possible learning experience. We believe in empowering educators with the tools they need to deliver high-quality education that is accessible, engaging, and effective.
### Key Features
1. **📚 Advanced Course Management:** You can create unlimited courses, create lessons, invite students, add assignments, grade their assignments, and even generate certificates.
2. **👨‍👩‍👦 Multi-Teacher Management:** You can invite other teachers into your organization and assign them individual courses.
3. **🤖 AI Integration:** We've got OpenAI integration for quick course creation where you can generate course content, lesson outlines, and even generate assignments right from your lesson notes.
4. **💬 Forum:** Students can ask questions in your dedicated community and get answers from either you or other students.
5. **🏆 Kahoot-Like Quiz:** You can create live quizzes to create more engagement in your classrooms.
6. **💻 Dedicated Student Dashboard:** Once you create an account, you get a dedicated dashboard where your students can access all their courses, assignments, and more.
7. **🔒 Fully open source:** You can self-host the entire stack on your servers.
-6
View File
@@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 735 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 939 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 776 KiB

-2
View File
@@ -1,2 +0,0 @@
User-agent: *
Disallow:
-14
View File
@@ -1,14 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,jsx,ts,tsx,md,mdx}',
'./components/**/*.{js,jsx,ts,tsx,md,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,jsx,ts,tsx,md,mdx}'
],
theme: {
extend: {}
},
plugins: []
};
-90
View File
@@ -1,90 +0,0 @@
import React from 'react';
import { DocsThemeConfig } from 'nextra-theme-docs';
const config: DocsThemeConfig = {
head: (
<>
<title>ClassroomIO | The Open Source Learning Management System for Companies</title>
<meta
name="description"
content="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations"
/>
<meta property="og:url" content="https://classroomio.com/docs" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="ClassroomIO | The Open Source Learning Management System for Companies"
/>
<meta
property="og:description"
content="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta
property="og:image:secure_url"
itemProp="image"
content="https://brand.cdn.clsrio.com/og/classroomio-og.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="classroomio.com" />
<meta property="twitter:url" content="https://classroomio.com/docs" />
<meta
name="twitter:title"
content="ClassroomIO | The Open Source Learning Management System for Companies"
/>
<meta
name="twitter:description"
content="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations"
/>
<meta name="twitter:creator" content="@classroomio" />
<meta name="twitter:image" content="https://brand.cdn.clsrio.com/og/classroomio-og.png" />
</>
),
logo: (
<div style={{ display: 'flex', alignItems: 'center' }}>
<img
src={`${process.env.imagePath}/img/logo-512.png`}
alt={'ClassroomIO logo'}
width={32}
height={32}
/>
<span style={{ marginLeft: '5px', lineHeight: '15px' }}>ClassroomIO Docs</span>
</div>
),
navbar: {
extraContent: (
<a
style={{
display: 'flex',
alignItems: 'center',
border: '1px solid gray',
borderRadius: 5,
padding: '2px 7px'
}}
href="https://app.classroomio.com"
>
Dashboard ↗
</a>
)
},
project: {
link: 'https://github.com/rotimi-best/classroomio'
},
chat: {
link: 'https://dub.sh/ciodiscord'
},
sidebar: {
defaultMenuCollapseLevel: 1,
autoCollapse: false
},
docsRepositoryBase: 'https://github.com/rotimi-best/classroomio/tree/main/apps/docs',
footer: {
text: 'ClassroomIO Docs'
}
};
export default config;
-20
View File
@@ -1,20 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.js"],
"exclude": ["node_modules"]
}
-6
View File
@@ -1,6 +0,0 @@
{
"rewrites": [
{"source": "/", "destination": "https://classroomio-com.vercel.app/"},
{"source": "/:match*", "destination": "https://classroomio-com.vercel.app/:match*"}
]
}