chore: rename docs-v2 to docs
This commit is contained in:
Rotimi Best
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Adding Translation To Your Code - Developer's Guide
|
||||
description: Developer's guide to adding translations to the code.
|
||||
---
|
||||
|
||||
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 user.
|
||||
|
||||
## 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
|
||||
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:
|
||||
|
||||
```zsh title="Terminal"
|
||||
pnpm run script:translate
|
||||
```
|
||||
|
||||
This command runs a script that updates the other translation files.
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Cloudflare Setup
|
||||
description: Guide to setting up Cloudflare for ClassroomIO.
|
||||
---
|
||||
|
||||
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 set up our api.
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Login with Demo Accounts
|
||||
description: Quick login guide using demo accounts for testing.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
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:** [email protected]
|
||||
|
||||
**Password:** 123456
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
|
||||
<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"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Design Contribution Guide
|
||||
description: Guidelines for contributing design improvements.
|
||||
---
|
||||
|
||||
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,32 @@
|
||||
---
|
||||
title: Developers Contribution Guide
|
||||
description: Guidelines for contributing code to ClassroomIO.
|
||||
---
|
||||
|
||||
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](/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!
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Gitpod Setup
|
||||
description: Guide to setting up Gitpod for ClassroomIO development.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
## 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.
|
||||
|
||||
[](https://gitpod.io/#https://github.com/rotimi-best/classroomio)
|
||||
|
||||
<Callout title="Note">
|
||||
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.
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"devs": "Developers Guide",
|
||||
"design": "Design Contribution Guide",
|
||||
"supabase-cloud": "Supabase Cloud Setup",
|
||||
"cloudflare-setup": "Cloudflare Setup",
|
||||
"gitpod": "Gitpod Setup",
|
||||
"demo-accounts": "Login with Demo Accounts",
|
||||
"student-dashboard": "Student Dashboard Guide",
|
||||
"adding-translation-to-code": "Adding Translations to Code"
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Student Dashboard - Developers Guide
|
||||
description: Guide to setting up the student dashboard locally.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
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 title="ℹ️ Important">
|
||||
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 style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
|
||||
<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"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
title: Supabase Cloud Setup
|
||||
description: Guide to setting up Supabase cloud for ClassroomIO.
|
||||
---
|
||||
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
|
||||
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 style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
|
||||
<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"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
## Step by Step Guide
|
||||
|
||||
<Steps>
|
||||
<Step>
|
||||
### 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.
|
||||
|
||||
|
||||
|
||||
<Callout title="Important">
|
||||
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>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### 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.
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Login to Supabase via the CLI
|
||||
|
||||
Open your terminal and go to the root of the project. Run the following:
|
||||
|
||||
```zsh title="Terminal"
|
||||
supabase login
|
||||
```
|
||||
|
||||
Follow the instruction in your terminal to generate your access token. Paste the token in the console and hit **Enter**
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### 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
|
||||
|
||||
|
||||
|
||||
- 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:
|
||||
|
||||
```zsh title="Terminal"
|
||||
supabase db push --db-url "URL HERE"
|
||||
```
|
||||
|
||||
<Callout title="Important">
|
||||
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
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### 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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### 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 [SMTP 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
|
||||
|
||||
|
||||
|
||||
<Callout title="ℹ️ Learn More">
|
||||
Learn more about setting up SMTP [here](https://supabase.com/docs/guides/auth/auth-smtp)
|
||||
</Callout>
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### 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:
|
||||
|
||||
```zsh title="env"
|
||||
PUBLIC_SUPABASE_URL=
|
||||
PUBLIC_SUPABASE_ANON_KEY=
|
||||
PRIVATE_SUPABASE_SERVICE_ROLE=
|
||||
```
|
||||
|
||||
To get the correct environment variables, follow the instructions in this image:
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Tada - That's all
|
||||
|
||||
Now you can run:
|
||||
|
||||
```zsh title="Terminal"
|
||||
pnpm dev --filter=dashboard
|
||||
```
|
||||
|
||||
- Open the url in your browser
|
||||
- Click on Sign up
|
||||
- And that's it...
|
||||
|
||||
<Callout title="ℹ️ Learn More">
|
||||
Visit the [Sign up guide](/docs/quickstart/signup) to learn how to signup
|
||||
</Callout>
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
Reference in New Issue
Block a user