chore(release): Bumped to Version 2.37.0

chore: sync translations from crowdin

.eslintrc

@@ -0,0 +1,124 @@
+{
+	"env": {
+		"browser": true,
+		"node": true,
+		"es2022": true
+	},
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"extends": "eslint:recommended",
+	"rules": {
+		"indent": "off",
+		"brace-style": "off",
+		"no-mixed-spaces-and-tabs": "off",
+		"no-useless-escape": "off",
+		"space-unary-ops": ["error", { "words": true }],
+		"linebreak-style": "off",
+		"quotes": ["off"],
+		"semi": "off",
+		"camelcase": "off",
+		"no-unused-vars": "off",
+		"no-console": ["warn"],
+		"no-extra-boolean-cast": ["off"],
+		"no-control-regex": ["off"],
+	},
+	"root": true,
+	"globals": {
+		"frappe": true,
+		"Vue": true,
+		"SetVueGlobals": true,
+		"__": true,
+		"repl": true,
+		"Class": true,
+		"locals": true,
+		"cint": true,
+		"cstr": true,
+		"cur_frm": true,
+		"cur_dialog": true,
+		"cur_page": true,
+		"cur_list": true,
+		"cur_tree": true,
+		"msg_dialog": true,
+		"is_null": true,
+		"in_list": true,
+		"has_common": true,
+		"posthog": true,
+		"has_words": true,
+		"validate_email": true,
+		"open_web_template_values_editor": true,
+		"validate_name": true,
+		"validate_phone": true,
+		"validate_url": true,
+		"get_number_format": true,
+		"format_number": true,
+		"format_currency": true,
+		"comment_when": true,
+		"open_url_post": true,
+		"toTitle": true,
+		"lstrip": true,
+		"rstrip": true,
+		"strip": true,
+		"strip_html": true,
+		"replace_all": true,
+		"flt": true,
+		"precision": true,
+		"CREATE": true,
+		"AMEND": true,
+		"CANCEL": true,
+		"copy_dict": true,
+		"get_number_format_info": true,
+		"strip_number_groups": true,
+		"print_table": true,
+		"Layout": true,
+		"web_form_settings": true,
+		"$c": true,
+		"$a": true,
+		"$i": true,
+		"$bg": true,
+		"$y": true,
+		"$c_obj": true,
+		"refresh_many": true,
+		"refresh_field": true,
+		"toggle_field": true,
+		"get_field_obj": true,
+		"get_query_params": true,
+		"unhide_field": true,
+		"hide_field": true,
+		"set_field_options": true,
+		"getCookie": true,
+		"getCookies": true,
+		"get_url_arg": true,
+		"md5": true,
+		"$": true,
+		"jQuery": true,
+		"moment": true,
+		"hljs": true,
+		"Awesomplete": true,
+		"Sortable": true,
+		"Showdown": true,
+		"Taggle": true,
+		"Gantt": true,
+		"Slick": true,
+		"Webcam": true,
+		"PhotoSwipe": true,
+		"PhotoSwipeUI_Default": true,
+		"io": true,
+		"JsBarcode": true,
+		"L": true,
+		"Chart": true,
+		"DataTable": true,
+		"Cypress": true,
+		"cy": true,
+		"it": true,
+		"describe": true,
+		"expect": true,
+		"context": true,
+		"before": true,
+		"beforeEach": true,
+		"after": true,
+		"qz": true,
+		"localforage": true,
+		"extend_cscript": true
+	}
+}

.github/helper/install_dependencies.sh

@@ -5,7 +5,7 @@ echo "Setting Up System Dependencies..."
 
 sudo apt update
 sudo apt remove mysql-server mysql-client
-sudo apt install libcups2-dev redis-server mariadb-client-10.6
+sudo apt-get install libcups2-dev redis-server mariadb-client libmariadb-dev
 
 install_wkhtmltopdf() {
   wget -q https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.focal_amd64.deb

.github/workflows/build.yml

@@ -0,0 +1,64 @@
+name: Build Container Image
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+    tags:
+      - "*"
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        arch: [amd64, arm64]
+
+    permissions:
+      packages: write
+
+    steps:
+      - name: Checkout Entire Repository
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/${{ matrix.arch }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+          
+      - name: Set Branch
+        run: |
+          export APPS_JSON='[{"url": "https://github.com/frappe/lms","branch": "main"}]'
+          echo "APPS_JSON_BASE64=$(echo $APPS_JSON | base64 -w 0)" >> $GITHUB_ENV
+          echo "FRAPPE_BRANCH=version-15" >> $GITHUB_ENV
+
+      - name: Set Image Tag
+        run: |
+          echo "IMAGE_TAG=stable" >> $GITHUB_ENV
+      - uses: actions/checkout@v4
+        with:
+          repository: frappe/frappe_docker
+          path: builds
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          context: builds
+          file: builds/images/layered/Containerfile
+          tags: >
+            ghcr.io/${{ github.repository }}:${{ github.ref_name }},
+            ghcr.io/${{ github.repository }}:${{ env.IMAGE_TAG }}
+          build-args: |
+            "FRAPPE_BRANCH=${{ env.FRAPPE_BRANCH }}"
+            "APPS_JSON_BASE64=${{ env.APPS_JSON_BASE64 }}"

.github/workflows/ci.yml

@@ -39,7 +39,7 @@ jobs:
         node-version: '18'
         check-latest: true
     - name: setup cache for bench
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         path: ~/bench-cache
         key: ${{ runner.os }}

.github/workflows/linters.yml

@@ -7,8 +7,27 @@ on:
     branches: [ main ]
 
 jobs:
+  commit-lint:
+    name: 'Semantic Commits'
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 200
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          check-latest: true
+
+      - name: Check commit titles
+        run: |
+          npm install @commitlint/cli @commitlint/config-conventional
+          npx commitlint --verbose --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }}
+
   linters:
-    name: Semantic Commits
+    name: Semgrep Rules
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
 
@@ -20,8 +39,17 @@ jobs:
         with:
           python-version: '3.10'
 
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+            ${{ runner.os }}-
+
       - name: Install and Run Pre-commit
-        uses: pre-commit/action@v2.0.3
+        uses: pre-commit/action@v3.0.1
 
       - name: Download Semgrep rules
         run: git clone --depth 1 https://github.com/frappe/semgrep-rules.git frappe-semgrep-rules

.github/workflows/make_release_pr.yml

@@ -1,8 +1,7 @@
 name: Create weekly release
 on:
   schedule:
-    # 13:00 UTC -> 7pm IST on every Wednesday
+    - cron: '30 3 * * 3'
-    - cron: '30 4 * * 3'
   workflow_dispatch:
 
 jobs:

.github/workflows/ui-tests.yml

@@ -24,7 +24,7 @@ jobs:
 
     services:
       mariadb:
-        image: mariadb:10.6
+        image: mariadb:10.8
         env:
           MARIADB_ROOT_PASSWORD: 123
         ports:
@@ -58,7 +58,7 @@ jobs:
           echo "127.0.0.1 lms.test" | sudo tee -a /etc/hosts
 
       - name: Cache pip
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml', '**/setup.py') }}
@@ -70,7 +70,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -79,7 +79,7 @@ jobs:
             ${{ runner.os }}-yarn-ui-
 
       - name: Cache cypress binary
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/Cypress
           key: ${{ runner.os }}-cypress
@@ -100,11 +100,12 @@ jobs:
           bench --site lms.test execute frappe.utils.install.complete_setup_wizard
           bench --site lms.test execute frappe.tests.ui_test_helpers.create_test_user
           bench --site lms.test set-password frappe@example.com admin
+          bench --site lms.test execute lms.lms.utils.persona_captured
 
       - name: cypress pre-requisites
         run: |
           cd ~/frappe-bench/apps/lms
-          yarn add cypress@^10 --no-lockfile
+          yarn add cypress@^10 --no-lockfile -W
 
       - name: UI Tests
         run: cd ~/frappe-bench/ && bench --site lms.test run-ui-tests lms --headless

.pre-commit-config.yaml

@@ -1,10 +1,10 @@
 exclude: 'node_modules|.git'
-default_stages: [commit]
+default_stages: [pre-commit]
 fail_fast: false
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.3.0
+    rev: v5.0.0
     hooks:
       - id: trailing-whitespace
         files: "lms.*"
@@ -16,17 +16,16 @@ repos:
       - id: check-toml
       - id: debug-statements
 
-  - repo: https://github.com/asottile/pyupgrade
+  - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v2.34.0
+    rev: v0.8.1
     hooks:
-      - id: pyupgrade
+      - id: ruff
-        args: ['--py310-plus']
+        name: "Run ruff import sorter"
-
+        args: ["--select=I", "--fix"]
-  - repo: https://github.com/adityahase/black
+      - id: ruff
-    rev: 9cb0a69f4d0030cdf687eddf314468b39ed54119
+        name: "Run ruff linter"
-    hooks:
+      - id: ruff-format
-      - id: black
+        name: "Run ruff formatter"
-        additional_dependencies: ['click==8.0.4']
 
   - repo: https://github.com/pre-commit/mirrors-prettier
     rev: v2.7.1
@@ -44,12 +43,22 @@ repos:
                 lms/public/js/lib/.*
             )$
 
-  - repo: https://github.com/PyCQA/flake8
+  - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: 5.0.4
+    rev: v8.44.0
     hooks:
-      - id: flake8
+      - id: eslint
-        additional_dependencies: ['flake8-bugbear',]
+        types_or: [javascript]
-        args: ['--config', '.github/helper/flake8.conf']
+        args: ['--quiet']
+        exclude: |
+            (?x)^(
+                lms/public/dist/.*|
+                cypress/.*|
+                .*node_modules.*|
+                .*boilerplate.*|
+                lms/www/website_script.js|
+                lms/templates/includes/.*|
+                lms/public/js/lib/.*
+            )$
 
 ci:
     autoupdate_schedule: weekly

README.md

@@ -1,115 +1,178 @@
-<p align="center">
+<div align="center" markdown="1">
-  <a href="https://www.frappelms.com/">
+
-    <img src="https://frappe.io/files/lms.png" alt="Frappe LMS" width="50px" height="50px">
+<img src=".github/lms-logo.png" alt="Frappe Learning logo" width="80" height="80"/>
-  </a>
+<h1>Frappe Learning</h1>
-  <p align="center">Easy to use, open source, learning management system.</p>
+
-</p>
+**Easy to use, open source, Learning Management System**
+
+![Tests](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress)
+
+</div>
 
 
-&nbsp;
+<div align="center">
+	<img src=".github/hero.png?v=5" alt="Hero Image" width="72%" />
+</div>
+<br />
+<div align="center">
+	<a href="https://frappe.io/learning">Website</a>
+	-
+	<a href="https://docs.frappe.io/learning">Documentation</a>
+</div>
 
-<p align="center">
+## Frappe Learning
-    <a href="https://www.producthunt.com/posts/frappe-lms?utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_souce=badge-frappe&#0045;lms" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=396079&theme=dark&period=weekly&topic_id=204" alt="Frappe&#0032;LMS - Easy&#0032;to&#0032;use&#0044;&#0032;100&#0037;&#0032;open&#0032;source&#0032;learning&#0032;management&#0032;system | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+Frappe Learning is an easy-to-use learning system that helps you bring structure to your content.
-</p>
+
+### Motivation
+In 2021, we were looking for a Learning Management System to launch [Mon.School](https://mon.school) for FOSS United. We checked out Moodle, but it didn’t feel right. The forms were unnecessarily lengthy and the UI was confusing. It shouldn't be this hard to create a course right? So I started making a learning system for Mon.School which soon became a product in itself. The aim is to have a simple platform that anyone can use to launch a course of their own and make knowledge sharing easier.
+
+### Key Features
+
+- **Structured Learning**: Design a course with a 3-level hierarchy, where your courses have chapters and you can group your lessons within these chapters. This ensures that the context of the lesson is set by the chapter.
+
+- **Live Classes**: Group learners into batches based on courses and duration. You can then create Zoom live class for these batches right from the app. Learners get to see the list of live classes they have to take as a part of this batch.
+
+- **Quizzes and Assignments**: Create quizzes where questions can have single-choice, multiple-choice options, or can be open ended. Instructors can also add assignments which learners can submit as PDF's or Documents.
+
+- **Getting Certified**: Once a learner has completed the course or batch, you can grant them a certificate. The app provides an inbuilt certificate template. You can use this or else create a template of your own and use that instead.
+
+<details>
+<summary>View Screenshots</summary>
 
 
-<div align="center" style="max-height: 40px;">
+![Batch](.github/batch.png)
-    <a href="https://frappecloud.com/lms/signup">
+<div align="center">
-        <img src=".github/try-on-f-cloud.svg" height="40">
+	<sub>
+		Create batches to group your learners
+	</sub>
+</div>
+<br>
+
+
+![Quiz](.github/quiz.png)
+<div align="center">
+	<sub>
+		Evaluate their knowledge by quizzes
+	</sub>
+</div>
+<br>
+
+
+![Cerficicate](.github/certificate.png)
+<div align="center">
+	<sub>
+		Autenticate their work with certification
+	</sub>
+</div>
+</details>
+
+
+### Under the Hood
+
+- [**Frappe Framework**](https://github.com/frappe/frappe): A full-stack web application framework.
+
+- [**Frappe UI**](https://github.com/frappe/frappe-ui): A Vue-based UI library, to provide a modern user interface.
+
+## Production Setup
+
+### Managed Hosting
+
+You can try [Frappe Cloud](https://frappecloud.com), a simple, user-friendly and sophisticated [open-source](https://github.com/frappe/press) platform to host Frappe applications with peace of mind.
+
+It takes care of installation, setup, upgrades, monitoring, maintenance and support of your Frappe deployments. It is a fully featured developer platform with an ability to manage and control multiple Frappe deployments.
+
+<div>
+	<a href="https://frappecloud.com/lms/signup" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/try-on-fc-white.png">
+			<img src="https://frappe.io/files/try-on-fc-black.png" alt="Try on Frappe Cloud" height="28" />
+		</picture>
 	</a>
 </div>
 
-&nbsp;
+### Self Hosting
 
-<p align="center">
+Follow these steps to set up Frappe Learning in production:
-	<a href="https://dashboard.cypress.io/projects/vandxn/runs">
-    <img alt="cypress" src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/vandxn/main&style=flat&logo=cypress">
-  </a>
-  <a href="https://github.com/frappe/lms/blob/main/LICENSE">
-    <img alt="license" src="https://img.shields.io/badge/license-AGPLv3-blue">
-  </a>
-</p>
 
-<img width="1402" alt="Lesson" src="https://frappelms.com/files/banner.png">
+**Step 1**: Download the easy install script
 
-<details>
+```bash
-	<summary>Show more screenshots</summary>
+wget https://frappe.io/easy-install.py
-	<img width="1520" alt="ss1" src="https://user-images.githubusercontent.com/31363128/210056046-584bc8aa-d28c-4514-b031-73817012837d.png">
+```
-	<img width="830" alt="ss2" src="https://user-images.githubusercontent.com/31363128/210056097-36849182-6db0-43a2-8c62-5333cd2aedf4.png">
-	<img width="941" alt="ss3" src="https://user-images.githubusercontent.com/31363128/210056134-01a7c429-1ef4-434e-9d43-128dda35d7e5.png">
-</details>
 
-Frappe LMS is an easy-to-use, open-source learning management system. You can use it to create and share online courses. The app has a clear UI that helps students focus only on what's important and assists in distraction-free learning.
+**Step 2**: Run the deployment command
 
-You can create courses and lessons through simple forms. Lessons can be in the form of text, videos, quizzes or a combination of all these. You can keep your students engaged with quizzes to help revise and test the concepts learned. Course Instructors and Students can reach out to each other through the discussions section available for each lesson and get queries resolved.
+```bash
+python3 ./easy-install.py deploy \
+    --project=learning_prod_setup \
+    --email=your_email.example.com \
+    --image=ghcr.io/frappe/lms \
+    --version=stable \
+    --app=lms \
+    --sitename subdomain.domain.tld
+```
 
-## Features
+Replace the following parameters with your values:
-- Create online courses. 📚
+- `your_email.example.com`: Your email address
-- Add detailed descriptions and preview videos to the course. 🎬
+- `subdomain.domain.tld`: Your domain name where Learning will be hosted
-- Add videos, quizzes, and assignments to your lessons and make them interesting and interactive 📝
-- Discussions section below each lesson where instructors and students can interact with each other. 💬
-- Create batches to group your students based on courses and track their progress 🏛
-- Statistics dashboard that provides all important numbers at a glimpse. 📈
-- Job Board where users can post and look for jobs. 💼
-- People directory with each person's profile page 👨‍👩‍👧‍👦
-- Set cover image, profile photo, short bio, and other professional information. 🦹🏼‍♀️
-- Simple layout that optimizes readability 🤓
-- Delightful user experience in overall usage ✨
 
-## Tech Stack
+The script will set up a production-ready instance of Frappe Learning with all the necessary configurations in about 5 minutes.
 
-Frappe LMS is built on [Frappe Framework](https://frappeframework.com) which is a batteries-included python web framework.
+**Note:** To avoid a `404 Page Not Found` error:
-These are some of the tools it's built on:
+- If hosting on a **public server**, make sure your DNS **A record** points to your server's IP.
-- [Python](https://www.python.org)
+- If hosting **locally**, map your domain to `127.0.0.1` in your `/etc/hosts` file:
-- [Redis](https://redis.io/)
-- [MariaDB](https://mariadb.org/)
-- [Socket.io](https://socket.io/)
 
-## Local Setup
+## Development Setup
 
 ### Docker
-You need Docker, docker-compose, and git setup on your machine. Refer to [Docker documentation](https://docs.docker.com/). After that, run the following commands:
-```
-git clone https://github.com/frappe/lms
-cd apps/lms/docker
-docker-compose up
-```
 
-Wait for some time until the setup script creates a site. After that, you can access `http://localhost:8000` in your browser and the app's login screen should appear.
+You need Docker, docker-compose and git setup on your machine. Refer [Docker documentation](https://docs.docker.com/). After that, follow below steps:
-You'll have to go through the setup wizard to set up the website the first time you access it. Log in using the following credentials to complete the setup wizard.
 
-```
+**Step 1**: Setup folder and download the required files
-Username: Administrator
-password: admin
-```
 
-### Frappe Bench
+    mkdir frappe-learning
+    cd frappe-learning
 
-Currently, this app depends on the `develop` branch of [frappe](https://github.com/frappe/frappe).
+    # Download the docker-compose file
+    wget -O docker-compose.yml https://raw.githubusercontent.com/frappe/lms/develop/docker/docker-compose.yml
 
-1. Setup frappe-bench by following [this guide](https://frappeframework.com/docs/v14/user/en/installation)
+    # Download the setup script
-1. In the frappe-bench directory, run `bench start` and keep it running. Open a new terminal session and cd into the `frappe-bench` directory.
+    wget -O init.sh https://raw.githubusercontent.com/frappe/lms/develop/docker/init.sh
-1. Run the following commands:
-    ```sh
-    bench new-site lms.test
-    bench get-app lms
-    bench --site lms.test install-app lms
-    bench --site lms.test add-to-hosts
 
- 1. Now, you can access the site at `http://lms.test:8000`
+**Step 2**: Run the container and daemonize it
 
+    docker compose up -d
 
-## Deployment
+**Step 3**: The site [http://lms.localhost:8000/lms](http://lms.localhost:8000/lms) should now be available. The default credentials are:
-Frappe LMS is an app built on top of the Frappe Framework. So, you can follow any deployment guide for hosting a Frappe Framework-based site.
+- Username: Administrator
+- Password: admin
 
-### Managed Hosting
+### Local
-Frappe LMS can be deployed in a few clicks on [Frappe Cloud](https://frappecloud.com/marketplace/apps/lms).
 
-### Self-hosting
+To setup the repository locally follow the steps mentioned below:
-If you want to self-host, you can follow official [Frappe Bench Installation](https://github.com/frappe/bench#installation) instructions.
 
-## Bugs and Feature Requests
+1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
-If you find any bugs or have a feature idea for the app, feel free to report them here on [GitHub Issues](https://github.com/frappe/lms/issues). Make sure you share enough information (app screenshots, browser console screenshots, stack traces, etc) for project maintainers.
+1. Start the server by running `bench start`
+1. In a separate terminal window, create a new site by running `bench new-site learning.test`
+1. Map your site to localhost with the command `bench --site learning.test add-to-hosts`
+1. Get the Learning app. Run `bench get-app https://github.com/frappe/lms`
+1. Run `bench --site learning.test install-app lms`.
+1. Now open the URL `http://learning.test:8000/lms` in your browser, you should see the app running
 
-## License
+## Learn and connect
-Distributed under [GNU AFFERO GENERAL PUBLIC LICENSE](license.txt)
+
+- [Telegram Public Group](https://t.me/frappelms)
+- [Discuss Forum](https://discuss.frappe.io/c/lms/70)
+- [Documentation](https://docs.frappe.io/learning)
+- [YouTube](https://www.youtube.com/channel/UCn3bV5kx77HsVwtnlCeEi_A)
+
+<br>
+<br>
+<div align="center" style="padding-top: 0.75rem;">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

commitlint.config.js

@@ -0,0 +1,26 @@
+export default {
+	parserPreset: "conventional-changelog-conventionalcommits",
+	rules: {
+		"subject-empty": [2, "never"],
+		"type-case": [2, "always", "lower-case"],
+		"type-empty": [2, "never"],
+		"type-enum": [
+			2,
+			"always",
+			[
+				"build",
+				"chore",
+				"ci",
+				"docs",
+				"feat",
+				"fix",
+				"perf",
+				"refactor",
+				"revert",
+				"style",
+				"test",
+				"deprecate", // deprecation decision
+			],
+		],
+	},
+};

cypress.config.js

@@ -1,6 +1,6 @@
-const { defineConfig } = require("cypress");
+import { defineConfig } from "cypress";
 
-module.exports = defineConfig({
+export default defineConfig({
 	projectId: "vandxn",
 	adminPassword: "admin",
 	testUser: "frappe@example.com",
@@ -13,6 +13,6 @@ module.exports = defineConfig({
 		openMode: 0,
 	},
 	e2e: {
-		baseUrl: "http://test_site_ui:8000",
+		baseUrl: "http://pertest:8000",
 	},
 });

cypress/e2e/batch_creation.cy.js

@@ -0,0 +1,168 @@
+describe("Batch Creation", () => {
+	it("creates a new batch", () => {
+		cy.login();
+		cy.wait(500);
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		// Open Settings
+		cy.get("span").contains("Learning").click();
+		cy.get("span").contains("Settings").click();
+
+		// Add a new member
+		cy.get("[data-dismissable-layer]")
+			.find("span")
+			.contains(/^Members$/)
+			.click();
+		cy.get("[data-dismissable-layer]")
+			.find("button")
+			.contains("New")
+			.click();
+
+		const dateNow = Date.now();
+		const randomEmail = `testuser_${dateNow}@example.com`;
+		const randomName = `Test User ${dateNow}`;
+
+		cy.get("input[placeholder='jane@doe.com']").type(randomEmail);
+		cy.get("input[placeholder='Jane']").type(randomName);
+		cy.get("button").contains("Add").click();
+
+		// Add evaluator
+		cy.get("[data-dismissable-layer]")
+			.find("span")
+			.contains(/^Evaluators$/)
+			.click();
+
+		cy.get("[data-dismissable-layer]")
+			.find("button")
+			.contains("New")
+			.click();
+		const randomEvaluator = `evaluator${dateNow}@example.com`;
+
+		cy.get("input[placeholder='jane@doe.com']").type(randomEvaluator);
+		cy.get("button").contains("Add").click();
+		cy.get("div").contains(randomEvaluator).should("be.visible").click();
+
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		// Create a batch
+		cy.get("button").contains("Create").click();
+		cy.wait(500);
+		cy.url().should("include", "/batches/new/edit");
+		cy.get("label").contains("Title").type("Test Batch");
+
+		cy.get("label").contains("Start Date").type("2030-10-01");
+		cy.get("label").contains("End Date").type("2030-10-31");
+		cy.get("label").contains("Start Time").type("10:00");
+		cy.get("label").contains("End Time").type("11:00");
+		cy.get("label").contains("Timezone").type("IST");
+		cy.get("label").contains("Seat Count").type("10");
+		cy.get("label").contains("Published").click();
+
+		cy.get("label")
+			.contains("Short Description")
+			.type("Test Batch Short Description to test the UI");
+		cy.get("div[contenteditable=true").invoke(
+			"text",
+			"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+		);
+
+		/* Instructor */
+		cy.get("label")
+			.contains("Instructors")
+			.parent()
+			.within(() => {
+				cy.get("input").click().type("evaluator");
+				cy.get("input")
+					.invoke("attr", "aria-controls")
+					.as("instructor_list_id");
+			});
+		cy.get("@instructor_list_id").then((instructor_list_id) => {
+			cy.get(`[id^=${instructor_list_id}`)
+				.should("be.visible")
+				.within(() => {
+					cy.get("[id^=headlessui-combobox-option-").first().click();
+				});
+		});
+
+		cy.button("Save").click();
+		cy.wait(1000);
+		let batchName;
+		cy.url().then((url) => {
+			console.log(url);
+			batchName = url.split("/").pop();
+			cy.wrap(batchName).as("batchName");
+		});
+		cy.wait(500);
+
+		// View Batch
+		cy.wait(1000);
+		cy.visit("/lms/batches");
+		cy.closeOnboardingModal();
+
+		cy.url().should("include", "/lms/batches");
+
+		cy.get('[id^="headlessui-radiogroup-v-"]')
+			.find("span")
+			.contains("Upcoming")
+			.should("be.visible")
+			.click();
+
+		cy.get("@batchName").then((batchName) => {
+			cy.get(`a[href='/lms/batches/details/${batchName}'`).within(() => {
+				cy.get("div").contains("Test Batch").should("be.visible");
+				cy.get("div")
+					.contains("Test Batch Short Description to test the UI")
+					.should("be.visible");
+				cy.get("span")
+					.contains("01 Oct 2030 - 31 Oct 2030")
+					.should("be.visible");
+				cy.get("span")
+					.contains("10:00 AM - 11:00 AM")
+					.should("be.visible");
+				cy.get("span").contains("IST").should("be.visible");
+				cy.get("a").contains("Evaluator").should("be.visible");
+				cy.get("div")
+					.contains("10")
+					.should("be.visible")
+					.get("span")
+					.contains("Seats Left")
+					.should("be.visible");
+			});
+			cy.get(`a[href='/lms/batches/details/${batchName}'`).click();
+		});
+
+		cy.get("div").contains("Test Batch").should("be.visible");
+		cy.get("div")
+			.contains("Test Batch Short Description to test the UI")
+			.should("be.visible");
+		cy.get("a").contains("Evaluator").should("be.visible");
+		cy.get("span:visible")
+			.contains("01 Oct 2030 - 31 Oct 2030")
+			.should("be.visible");
+		cy.get("span:visible")
+			.contains("10:00 AM - 11:00 AM")
+			.should("be.visible");
+		cy.get("span:visible").contains("IST").should("be.visible");
+		cy.contains("div:visible", "10 Seats Left").should("be.visible");
+
+		cy.get("p")
+			.contains(
+				"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+			)
+			.should("be.visible");
+		cy.get("button:visible").contains("Manage Batch").click();
+
+		/* Add student to batch */
+		cy.get("button").contains("Add").click();
+		cy.get('div[role="dialog"]').first().find("button").eq(1).click();
+		cy.get("input[id^='headlessui-combobox-input-v-']").type(randomEmail);
+		cy.get("div").contains(randomEmail).click();
+		cy.get("button").contains("Submit").click();
+
+		// Verify Seat Count
+		cy.get("span").contains("Details").click();
+		cy.contains("div:visible", "9 Seats Left").should("be.visible");
+	});
+});

cypress/e2e/course_creation.cy.js

@@ -1,12 +1,15 @@
 describe("Course Creation", () => {
 	it("creates a new course", () => {
 		cy.login();
-		cy.wait(1000);
+		cy.wait(500);
 		cy.visit("/lms/courses");
 
+		// Close onboarding modal
+		cy.closeOnboardingModal();
+
 		// Create a course
-		cy.get("a").contains("New").click();
+		cy.get("button").contains("Create").click();
-		cy.wait(1000);
+		cy.wait(500);
 		cy.url().should("include", "/courses/new/edit");
 
 		cy.get("label").contains("Title").type("Test Course");
@@ -19,7 +22,11 @@ describe("Course Creation", () => {
 		);
 
 		cy.fixture("profile.png", "base64").then((fileContent) => {
-			cy.get('input[type="file"]').attachFile({
+			cy.get("div")
+				.contains("Course Image")
+				.siblings("div")
+				.children('input[type="file"]')
+				.attachFile({
 					fileContent,
 					fileName: "profile.png",
 					mimeType: "image/png",
@@ -69,11 +76,11 @@ describe("Course Creation", () => {
 		cy.button("Add Chapter").click();
 
 		cy.wait(1000);
-		cy.get("[id^=headlessui-dialog-panel-")
+		cy.get("[data-dismissable-layer]")
 			.should("be.visible")
 			.within(() => {
 				cy.get("label").contains("Title").type("Test Chapter");
-				cy.button("Add Chapter").click();
+				cy.button("Create").click();
 			});
 
 		// Add Lesson
@@ -84,23 +91,23 @@ describe("Course Creation", () => {
 		cy.wait(1000);
 
 		cy.get("label").contains("Title").type("Test Lesson");
-
 		cy.get("#content .ce-block").type(
-			"This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
+			"{enter}This is an extremely big paragraph that is meant to test the UI. This is a very long paragraph. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 		);
 		cy.button("Save").click();
 
 		// View Course
 		cy.wait(1000);
-		cy.visit("/lms");
+		cy.visit("/lms/courses");
-		cy.wait(500);
+		cy.closeOnboardingModal();
+
 		cy.url().should("include", "/lms/courses");
 		cy.get(".grid a:first").within(() => {
 			cy.get("div").contains("Test Course");
 			cy.get("div").contains(
 				"Test Course Short Introduction to test the UI"
 			);
-			cy.get(".course-image")
+			cy.get(".bg-cover")
 				.invoke("css", "background-image")
 				.should("include", "/files/profile");
 		});
@@ -133,9 +140,10 @@ describe("Course Creation", () => {
 		);
 
 		// Add Discussion
+		cy.get("span").contains("Community").click();
 		cy.button("New Question").click();
 		cy.wait(500);
-		cy.get("[id^=headlessui-dialog-panel-").within(() => {
+		cy.get("[data-dismissable-layer]").within(() => {
 			cy.get("label").contains("Title").type("Test Discussion");
 			cy.get("div[contenteditable=true]").invoke(
 				"text",

cypress/support/commands.js

@@ -25,6 +25,7 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 import "cypress-file-upload";
+import "cypress-real-events";
 
 Cypress.Commands.add("login", (email, password) => {
 	if (!email) {
@@ -37,6 +38,9 @@ Cypress.Commands.add("login", (email, password) => {
 		url: "/api/method/login",
 		method: "POST",
 		body: { usr: email, pwd: password },
+		timeout: 60000,
+		retryOnStatusCodeFailure: true,
+		retryOnNetworkFailure: true,
 	});
 });
 
@@ -65,3 +69,18 @@ Cypress.Commands.add("paste", { prevSubject: true }, (subject, text) => {
 		element.dispatchEvent(event);
 	});
 });
+
+Cypress.Commands.add("closeOnboardingModal", () => {
+	cy.wait(500);
+	cy.get("body").then(($body) => {
+		// Check if any element with class including 'z-50' exists
+		if ($body.find('[class*="z-50"]').length > 0) {
+			cy.get('[class*="z-50"]')
+				.find('button:has(svg[class*="feather-x"])')
+				.realClick();
+			cy.wait(1000);
+		} else {
+			cy.log("Onboarding modal not found, skipping close.");
+		}
+	});
+});

docker/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.7"
 name: lms
 services:
   mariadb:
-    image: mariadb:10.6
+    image: mariadb:10.8
     command:
       - --character-set-server=utf8mb4
       - --collation-server=utf8mb4_unicode_ci

docker/init.sh

@@ -16,9 +16,9 @@ cd frappe-bench
 
 # Use containers instead of localhost
 bench set-mariadb-host mariadb
-bench set-redis-cache-host redis:6379
+bench set-redis-cache-host redis://redis:6379
-bench set-redis-queue-host redis:6379
+bench set-redis-queue-host redis://redis:6379
-bench set-redis-socketio-host redis:6379
+bench set-redis-socketio-host redis://redis:6379
 
 # Remove redis, watch from Procfile
 sed -i '/redis/d' ./Procfile

frontend/.gitignore

@@ -2,4 +2,5 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+dev-dist
 *.local

frontend/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

frontend/components.d.ts

@@ -0,0 +1,124 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Annoucements: typeof import('./src/components/Annoucements.vue')['default']
+    AnnouncementModal: typeof import('./src/components/Modals/AnnouncementModal.vue')['default']
+    AppHeader: typeof import('./src/components/AppHeader.vue')['default']
+    Apps: typeof import('./src/components/Apps.vue')['default']
+    AppSidebar: typeof import('./src/components/AppSidebar.vue')['default']
+    AssessmentModal: typeof import('./src/components/Modals/AssessmentModal.vue')['default']
+    AssessmentPlugin: typeof import('./src/components/AssessmentPlugin.vue')['default']
+    Assessments: typeof import('./src/components/Assessments.vue')['default']
+    Assignment: typeof import('./src/components/Assignment.vue')['default']
+    AssignmentForm: typeof import('./src/components/Modals/AssignmentForm.vue')['default']
+    AudioBlock: typeof import('./src/components/AudioBlock.vue')['default']
+    Autocomplete: typeof import('./src/components/Controls/Autocomplete.vue')['default']
+    BadgeAssignmentForm: typeof import('./src/components/Settings/BadgeAssignmentForm.vue')['default']
+    BadgeAssignments: typeof import('./src/components/Settings/BadgeAssignments.vue')['default']
+    BadgeForm: typeof import('./src/components/Settings/BadgeForm.vue')['default']
+    Badges: typeof import('./src/components/Settings/Badges.vue')['default']
+    BatchCard: typeof import('./src/components/BatchCard.vue')['default']
+    BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default']
+    BatchCourses: typeof import('./src/components/BatchCourses.vue')['default']
+    BatchDashboard: typeof import('./src/components/BatchDashboard.vue')['default']
+    BatchFeedback: typeof import('./src/components/BatchFeedback.vue')['default']
+    BatchOverlay: typeof import('./src/components/BatchOverlay.vue')['default']
+    BatchStudentProgress: typeof import('./src/components/Modals/BatchStudentProgress.vue')['default']
+    BatchStudents: typeof import('./src/components/BatchStudents.vue')['default']
+    BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default']
+    BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
+    Categories: typeof import('./src/components/Settings/Categories.vue')['default']
+    CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
+    ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']
+    ChildTable: typeof import('./src/components/Controls/ChildTable.vue')['default']
+    Code: typeof import('./src/components/Controls/Code.vue')['default']
+    CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
+    CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
+    ColorSwatches: typeof import('./src/components/Controls/ColorSwatches.vue')['default']
+    CourseCard: typeof import('./src/components/CourseCard.vue')['default']
+    CourseCardOverlay: typeof import('./src/components/CourseCardOverlay.vue')['default']
+    CourseInstructors: typeof import('./src/components/CourseInstructors.vue')['default']
+    CourseOutline: typeof import('./src/components/CourseOutline.vue')['default']
+    CourseProgressSummary: typeof import('./src/components/Modals/CourseProgressSummary.vue')['default']
+    CourseReviews: typeof import('./src/components/CourseReviews.vue')['default']
+    CreateOutline: typeof import('./src/components/CreateOutline.vue')['default']
+    DateRange: typeof import('./src/components/Common/DateRange.vue')['default']
+    DesktopLayout: typeof import('./src/components/DesktopLayout.vue')['default']
+    DiscussionModal: typeof import('./src/components/Modals/DiscussionModal.vue')['default']
+    DiscussionReplies: typeof import('./src/components/DiscussionReplies.vue')['default']
+    Discussions: typeof import('./src/components/Discussions.vue')['default']
+    EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
+    EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
+    EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
+    EmailTemplates: typeof import('./src/components/Settings/EmailTemplates.vue')['default']
+    EmptyState: typeof import('./src/components/EmptyState.vue')['default']
+    EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
+    Evaluators: typeof import('./src/components/Settings/Evaluators.vue')['default']
+    Event: typeof import('./src/components/Modals/Event.vue')['default']
+    ExplanationVideos: typeof import('./src/components/Modals/ExplanationVideos.vue')['default']
+    FeedbackModal: typeof import('./src/components/Modals/FeedbackModal.vue')['default']
+    FrappeCloudIcon: typeof import('./src/components/Icons/FrappeCloudIcon.vue')['default']
+    IconPicker: typeof import('./src/components/Controls/IconPicker.vue')['default']
+    IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
+    InlineLessonMenu: typeof import('./src/components/Notes/InlineLessonMenu.vue')['default']
+    InstallPrompt: typeof import('./src/components/InstallPrompt.vue')['default']
+    InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
+    JobApplicationModal: typeof import('./src/components/Modals/JobApplicationModal.vue')['default']
+    JobCard: typeof import('./src/components/JobCard.vue')['default']
+    LayoutHeader: typeof import('./src/components/LayoutHeader.vue')['default']
+    LessonContent: typeof import('./src/components/LessonContent.vue')['default']
+    LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
+    Link: typeof import('./src/components/Controls/Link.vue')['default']
+    LiveClass: typeof import('./src/components/LiveClass.vue')['default']
+    LiveClassAttendance: typeof import('./src/components/Modals/LiveClassAttendance.vue')['default']
+    LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
+    LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
+    Members: typeof import('./src/components/Settings/Members.vue')['default']
+    MobileLayout: typeof import('./src/components/MobileLayout.vue')['default']
+    MultiSelect: typeof import('./src/components/Controls/MultiSelect.vue')['default']
+    NoPermission: typeof import('./src/components/NoPermission.vue')['default']
+    NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
+    Notes: typeof import('./src/components/Notes/Notes.vue')['default']
+    NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
+    PageModal: typeof import('./src/components/Modals/PageModal.vue')['default']
+    PaymentGatewayDetails: typeof import('./src/components/Settings/PaymentGatewayDetails.vue')['default']
+    PaymentGateways: typeof import('./src/components/Settings/PaymentGateways.vue')['default']
+    Play: typeof import('./src/components/Icons/Play.vue')['default']
+    ProgressBar: typeof import('./src/components/ProgressBar.vue')['default']
+    Question: typeof import('./src/components/Modals/Question.vue')['default']
+    Quiz: typeof import('./src/components/Quiz.vue')['default']
+    QuizBlock: typeof import('./src/components/QuizBlock.vue')['default']
+    QuizInVideo: typeof import('./src/components/Modals/QuizInVideo.vue')['default']
+    Rating: typeof import('./src/components/Controls/Rating.vue')['default']
+    RelatedCourses: typeof import('./src/components/RelatedCourses.vue')['default']
+    ReviewModal: typeof import('./src/components/Modals/ReviewModal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SettingDetails: typeof import('./src/components/Settings/SettingDetails.vue')['default']
+    SettingFields: typeof import('./src/components/Settings/SettingFields.vue')['default']
+    Settings: typeof import('./src/components/Settings/Settings.vue')['default']
+    SidebarLink: typeof import('./src/components/SidebarLink.vue')['default']
+    StudentHeatmap: typeof import('./src/components/StudentHeatmap.vue')['default']
+    StudentModal: typeof import('./src/components/Modals/StudentModal.vue')['default']
+    Tags: typeof import('./src/components/Tags.vue')['default']
+    TransactionDetails: typeof import('./src/components/Settings/TransactionDetails.vue')['default']
+    Transactions: typeof import('./src/components/Settings/Transactions.vue')['default']
+    UnsplashImageBrowser: typeof import('./src/components/UnsplashImageBrowser.vue')['default']
+    UpcomingEvaluations: typeof import('./src/components/UpcomingEvaluations.vue')['default']
+    Uploader: typeof import('./src/components/Controls/Uploader.vue')['default']
+    UploadPlugin: typeof import('./src/components/UploadPlugin.vue')['default']
+    UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
+    UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
+    VideoBlock: typeof import('./src/components/VideoBlock.vue')['default']
+    VideoStatistics: typeof import('./src/components/Modals/VideoStatistics.vue')['default']
+    ZoomAccountModal: typeof import('./src/components/Modals/ZoomAccountModal.vue')['default']
+    ZoomSettings: typeof import('./src/components/Settings/ZoomSettings.vue')['default']
+  }
+}

frontend/index.html

@@ -2,9 +2,206 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="/favicon.png" />
+		<link rel="icon" href="{{ favicon }}" />
+		<link rel="manifest" href="/api/method/lms.lms.api.get_pwa_manifest" />
+		<link rel="apple-touch-icon" href="public/manifest/apple-icon-180.png" />
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
+		<meta name="theme-color" content="#0F0F0F" media="(prefers-color-scheme: dark)" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="default" />
+		<meta name="msapplication-navbutton-color" content="#ffffff" />
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2048-2732.jpg"
+			media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2732-2048.jpg"
+			media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1668-2388.jpg"
+			media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2388-1668.jpg"
+			media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1536-2048.jpg"
+			media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2048-1536.jpg"
+			media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1640-2360.jpg"
+			media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2360-1640.jpg"
+			media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1668-2224.jpg"
+			media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2224-1668.jpg"
+			media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1620-2160.jpg"
+			media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2160-1620.jpg"
+			media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1488-2266.jpg"
+			media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2266-1488.jpg"
+			media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1320-2868.jpg"
+			media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2868-1320.jpg"
+			media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1206-2622.jpg"
+			media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2622-1206.jpg"
+			media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1290-2796.jpg"
+			media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2796-1290.jpg"
+			media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1179-2556.jpg"
+			media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2556-1179.jpg"
+			media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1170-2532.jpg"
+			media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2532-1170.jpg"
+			media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1284-2778.jpg"
+			media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2778-1284.jpg"
+			media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1125-2436.jpg"
+			media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2436-1125.jpg"
+			media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1242-2688.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2688-1242.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-828-1792.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1792-828.jpg"
+			media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1242-2208.jpg"
+			media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-2208-1242.jpg"
+			media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-750-1334.jpg"
+			media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1334-750.jpg"
+			media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-640-1136.jpg"
+			media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			href="public/manifest/apple-splash-1136-640.jpg"
+			media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Frappe Learning</title>
+		<title>{{ title }}</title>
 		<meta name="title" content="{{ meta.title }}" />
 		<meta name="image" content="{{ meta.image }}" />
 		<meta name="description" content="{{ meta.description }}" />
@@ -16,32 +213,17 @@
 		<meta name="twitter:image" content="{{ meta.image }}" />
 		<meta name="twitter:description" content="{{ meta.description }}" />
 	</head>
-	<body>
+	<body class="sm:overscroll-y-none no-scrollbar">
 		<div id="app">
 			<div id="seo-content">
 				<h1>{{ meta.title }}</h1>
 				<p>
 					{{ meta.description }}
 				</p>
-				<p>
-					The content here is just for seo purposes. The actual content will be loaded in a few seconds.
-				</p>
-				<p>
-					Seo checks if a page has more than 300 words. So, here are some more words to make it more than 300 words.
-					Page descriptions are the HTML meta tags that provide a brief summary of a web page.
-					Search engines use meta descriptions to help identify the page's topic - they don't use them to rank the page, but they do use them to determine whether or not to display the page in search results.
-					Meta descriptions are important because they're often the first thing people see when they're deciding which search result to click on.
-					They're also important because they can help improve your click-through rate (CTR) from search results.
-					A good meta description can entice people to click on your page instead of someone else's.
-				</p>
 				<a href="{{ meta.link }}">Know More</a>
 			</div>
 		</div>
-		<div id="modals"></div>
-		<div id="popovers"></div>
-
 		<script>
-			window.csrf_token = '{{ csrf_token }}'
 			document.getElementById('seo-content').style.display = 'none';
 		</script>
 		<script type="module" src="/src/main.js"></script>

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frappe-ui-frontend",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -9,6 +10,10 @@
     "copy-html-entry": "cp ../lms/public/frontend/index.html ../lms/www/lms.html"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.2.1",
     "@editorjs/checklist": "^1.6.0",
     "@editorjs/code": "^2.9.0",
     "@editorjs/editorjs": "^2.29.0",
@@ -18,26 +23,38 @@
     "@editorjs/nested-list": "^1.4.2",
     "@editorjs/paragraph": "^2.11.3",
     "@editorjs/simple-image": "^1.6.0",
+    "@editorjs/table": "^2.4.2",
+    "@vueuse/router": "^12.7.0",
+    "ace-builds": "^1.36.2",
+    "apexcharts": "^4.3.0",
     "chart.js": "^4.4.1",
-    "codemirror-editor-vue3": "^2.8.0",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.11.6",
+    "dompurify": "^3.2.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.69",
+    "frappe-ui": "^0.1.200",
+    "highlight.js": "^11.11.1",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",
+    "plyr": "^3.7.8",
     "socket.io-client": "^4.7.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "3.4.15",
+    "thememirror": "^2.0.1",
+    "typescript": "^5.7.2",
     "vue": "^3.4.23",
     "vue-chartjs": "^5.3.0",
+    "vue-codemirror": "^6.1.1",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "^4.0.12",
+    "vue3-apexcharts": "^1.8.0",
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.3",
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.5",
-    "vite": "^5.0.11"
+    "vite": "^5.0.11",
+    "vite-plugin-pwa": "^1.0.2"
   }
 }

frontend/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {},

frontend/public/learning.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.1285 0.580383H22.8514C10.2309 0.580383 0 10.5649 0 22.8815V56.3332C0 68.6497 10.2309 78.6343 22.8514 78.6343H57.1285C69.749 78.6343 79.9799 68.6497 79.9799 56.3332V22.8815C79.9799 10.5649 69.749 0.580383 57.1285 0.580383Z" fill="#0E7159"/>
+<path d="M62.8434 23.6906L60.7869 23.1052C53.6744 21.0702 45.9048 22.4641 39.992 26.8128C35.8502 23.7742 30.7943 22.1854 25.7099 22.2133H17.1406V27.8163H25.7099C29.6232 27.8163 33.508 29.015 36.6787 31.3845L39.992 33.8377L43.3056 31.3845C47.2475 28.4575 52.3032 27.2588 57.1306 28.0393V50.647C51.1035 49.9223 44.9051 51.4834 39.992 55.0795C35.8502 52.0688 30.8515 50.4798 25.7671 50.4798C24.7959 50.4798 23.8247 50.5355 22.8535 50.647V35.0642H17.1406V57.0588H62.8434V23.7185V23.6906Z" fill="white"/>
+</svg>

frontend/src/App.vue

@@ -1,38 +1,56 @@
 <template>
-	<Layout>
+	<FrappeUIProvider>
+		<Layout class="isolate text-base">
 			<router-view />
 		</Layout>
+		<InstallPrompt v-if="isMobile" />
 		<Dialogs />
-	<Toasts />
+	</FrappeUIProvider>
 </template>
 <script setup>
-import { Toasts } from 'frappe-ui'
+import { FrappeUIProvider } from 'frappe-ui'
 import { Dialogs } from '@/utils/dialogs'
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useScreenSize } from './utils/composables'
+import { usersStore } from '@/stores/user'
+import { useRouter } from 'vue-router'
+import { posthogSettings } from '@/telemetry'
 import DesktopLayout from './components/DesktopLayout.vue'
 import MobileLayout from './components/MobileLayout.vue'
-import { stopSession } from '@/telemetry'
+import NoSidebarLayout from './components/NoSidebarLayout.vue'
-import { init as initTelemetry } from '@/telemetry'
+import InstallPrompt from './components/InstallPrompt.vue'
-import { usersStore } from '@/stores/user'
 
-const screenSize = useScreenSize()
+const { isMobile } = useScreenSize()
-let { userResource } = usersStore()
+const router = useRouter()
+const noSidebar = ref(false)
+const { userResource } = usersStore()
 
-const Layout = computed(() => {
+router.beforeEach((to, from, next) => {
-	if (screenSize.width < 640) {
+	if (to.query.fromLesson || to.path === '/persona') {
-		return MobileLayout
+		noSidebar.value = true
 	} else {
-		return DesktopLayout
+		noSidebar.value = false
 	}
+	next()
 })
 
-onMounted(async () => {
+const Layout = computed(() => {
-	if (!userResource.data) return
+	if (noSidebar.value) {
-	await initTelemetry()
+		return NoSidebarLayout
+	}
+	if (isMobile.value) {
+		return MobileLayout
+	}
+	return DesktopLayout
 })
 
 onUnmounted(() => {
-	stopSession()
+	noSidebar.value = false
+})
+
+watch(userResource, () => {
+	if (userResource.data) {
+		posthogSettings.reload()
+	}
 })
 </script>