feat: course-app v0.0.11 (#523)

* chore: remove bin * fix: restore bin * change dist to bin * publish only dist folder * publish with src folder. * fix ci * merge steps in CI * update workflow * deploy with src * update to v9 * delete unused code * complete landing page * complete landing page * feat: webflow template (#518) * created a new branch for webflow from debug/course-app * added webflow and reverted neccessary changes * fixed commit issues * clean up posthog * clean up classic * clean up minimal * clean up posthog * clean up webflow * v0.0.10 * markdown lint * feat: add prep template (#522) * working on the ielts template * working on the ielts template * finished the ielts template --------- Co-authored-by: emmanuel <chifez1@gmail.com> * clean up examprep * v0.0.11 --------- Co-authored-by: Em_Dev <Chifez1@gmail.com>
2024-12-17 04:06:03 +01:00
parent 5c83034a01
commit 3ee7cf10e3
208 changed files with 7211 additions and 7003 deletions
@@ -1,27 +1,177 @@
-# @classroomio/course-app
+<a href="https://courseapp.oncws.com/">
+  <img alt="Create beautiful course websites to educate your customers" src="https://cdn.courseapp.oncws.com/courseapp-og.png" />
+  <h1 align="center">CourseApp by ClassroomIO</h1>
+  <p align="center">
+    Create beautiful course websites to educate your customers.
+    <br />
+    <a href="https://courseapp.oncws.com">Website</a>  |  <a href="https://dub.sh/ciodiscord">Join Discord community</a>
+  </p>
+</a>

-Create a university site for your SAAS in seconds, ready to go. Just add your content.
+# CourseApp

-## Usage
+Create a beautiful course website in seconds with our SvelteKit-powered CLI tool. Choose from multiple templates and customize your content through a simple file structure.

-To create a template run:
+## Quick Start

 ```bash
-npx @cio/course-app@latest name-of-your-project -t name-of-template --course
+pnpx @classroomio/course-app@latest
 ```

-### Commands
-
-The CLI accepts the following arguments
-
- argument 1 : `name-of-project` this argument is the name of your project
- argument 2 : `--template name-of-template` this argument is the name of the template you wish to use
- argument 3 : `--courses` an option to use our demo courses
+You'll be prompted to:
+1. Enter a project name (or use `.` for current directory)
+2. Select a template
+3. Choose whether to include demo courses

 ## Available Templates

- cal
- classic
- minimalistic
- posthog
- webflow
+- `cal` - Cal.com inspired design
+- `classic` - Traditional course layout
+- `minimal` - Clean, minimalist design
+- `posthog` - PostHog-style interface
+- `webflow` - Webflow-inspired template
+
+## Project Structure
+
+```
+your-project/
+├── src/
+│   ├── courses/                 # Your course content
+│   │   ├── course-slug/
+│   │   │   ├── metadata.json    # Course details
+│   │   │   ├── section-1/
+│   │   │   │   ├── metadata.json    # Section details
+│   │   │   │   ├── lesson-1.md      # Lesson content
+│   │   │   │   └── lesson-2.md
+│   │   │   └── section-2/
+│   │   └── another-course/
+│   └── lib/
+│       └── components/          # Template-specific components
+```
+
+## Course Configuration
+
+### Course Metadata
+Each course needs a `metadata.json` file:
+
+```json
+{
+  "title": "Your Course Title",
+  "description": "Course description",
+  "banner": "https://path-to-banner-image.jpg",
+  "created_at": "24-11-2024",
+  "cost": 0,
+  "currency": "USD",
+  "type": "paced"
+}
+```
+
+### Section Metadata
+Each section folder requires a `metadata.json`:
+
+```json
+{
+  "title": "Section Title",
+  "unlocked": true
+}
+```
+
+### Lesson Content
+Lessons are written in Markdown (`.md`) files:
+
+```markdown
+---
+title: 'Lesson Title'
+---
+
+Your lesson content here...
+
+## Supports Markdown Features
+
+- Lists
+- Code blocks
+- Images
+- And more!
+```
+
+## Customization
+
+### Templates
+Each template has its own component set in `src/lib/components/[template-name]/`. The active template is determined by the `VITE_TEMPLATE` environment variable.
+
+### Navigation & Site Settings
+
+Update `src/lib/data/pages.json` to customize your site settings. The file contains an array of three main page configurations:
+
+```json
+[
+  {
+    "id": "shared-page",
+    "title": "Shared",
+    "slug": "#",
+    "sections": [
+      // Global components like SEO, navigation, and footer
+    ]
+  },
+  {
+    "id": "home-page",
+    "title": "Home Page",
+    "slug": "/",
+    "sections": [
+      // Home page specific sections like hero, features, testimonials
+    ]
+  },
+  {
+    "id": "courses-page",
+    "title": "Courses Page",
+    "slug": "/courses",
+    "sections": [
+      // Course page specific sections
+    ]
+  }
+]
+```
+
+Each page configuration includes:
+
+1. **Shared Page** (`shared-page`):
+   - Contains global components used across all pages
+   - Configures SEO settings, main navigation, and footer
+   - Always present regardless of the current route
+
+2. **Home Page** (`home-page`):
+   - Landing page configuration (`/` route)
+   - Includes sections like header, about, featured courses, instructors, FAQ, testimonials, and CTAs
+   - Configurable marketing sections to showcase your platform
+
+3. **Courses Page** (`courses-page`):
+   - Course listing page configuration (`/courses` route)
+   - Contains course-specific header and layout settings
+   - Manages how courses are displayed and filtered
+
+Each section can be toggled with the `show` property and customized through its `settings` object.
+
+## API Routes
+
+The project includes built-in API routes:
+
+- `/api/courses` - Returns all courses with their metadata
+- Individual course data is dynamically loaded based on the URL structure
+
+## Development
+
+After creating your project:
+
+```bash
+cd your-project
+pnpm install
+pnpm run dev
+```
+
+## Next up
+
+- More templates ;)
+- Create quizzes
+- Authentication
+- Learning paths
+- And more!