Updated docs

apps/docs/src/components/HeadCommon.astro

@@ -45,3 +45,12 @@ import "../styles/index.css";
   gtag('js', new Date());
   gtag('config', 'G-TEL60V1WM9');
 </script> -->
+
+<!-- Microsoft Clarity -->
+<script type="text/javascript" is:inline>
+    (function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "iujuesys8w");
+</script>

apps/docs/src/components/HeadSEO.astro

@@ -50,3 +50,12 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt;
   https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
   Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
 -->
+
+<!-- Microsoft Clarity -->
+<script type="text/javascript">
+    (function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "iujuesys8w");
+</script>

apps/docs/src/config.ts

@@ -45,11 +45,58 @@ export type Sidebar = Record<
 >;
 export const SIDEBAR: Sidebar = {
     en: {
-        "Start here": [
-            { text: "Getting started", link: "en/introduction" },
-            { text: "Self hosting", link: "en/self-hosting" },
+        "Getting started": [
+            { text: "What is CourseLit", link: "en/introduction" },
+            { text: "Features", link: "en/features" },
             // { text: 'Page 3', link: 'en/page-3' },
         ],
-        Courses: [{ text: "Add quiz", link: "en/lessons/add-quiz" }],
+        "Online courses": [
+            { text: "Introduction", link: "en/courses/introduction" },
+            { text: "Create a course", link: "en/courses/create" },
+            { text: "Publish", link: "en/courses/publish" },
+            { text: "Set a price", link: "en/courses/set-a-price-for-product" },
+            { text: "Control visibility", link: "en/courses/visibility" },
+            { text: "Add content", link: "en/courses/add-content" },
+            { text: "Manage sections", link: "en/products/section" },
+        ],
+        "Digital downloads": [
+            { text: "Introduction", link: "en/downloads/introduction" },
+            { text: "Create a download", link: "en/downloads/create" },
+            { text: "Set a price", link: "en/downloads/set-a-price" },
+            { text: "Lead magnet", link: "en/downloads/lead-magnet" },
+        ],
+        Pages: [
+            { text: "Introduction", link: "en/pages/introduction" },
+            { text: "Page Blocks", link: "en/pages/blocks" },
+            { text: "Edit page", link: "en/pages/edit" },
+            { text: "Header", link: "en/pages/header" },
+            { text: "Rich text", link: "en/pages/rich-text" },
+            { text: "Featured", link: "en/pages/featured" },
+            { text: "Banner", link: "en/pages/banner" },
+            { text: "Hero", link: "en/pages/hero" },
+            { text: "Grid", link: "en/pages/grid" },
+            { text: "Content", link: "en/pages/content" },
+            { text: "Newsletter signup", link: "en/pages/newsletter-signup" },
+            { text: "Footer", link: "en/pages/footer" },
+        ],
+        Blog: [
+            { text: "Introduction", link: "en/blog/introduction" },
+            { text: "Publish a blog", link: "en/blog/publish" },
+        ],
+        School: [
+            { text: "Introduction", link: "en/schools/introduction" },
+            { text: "Create a school", link: "en/schools/create" },
+            { text: "Use custom domain", link: "en/schools/add-custom-domain" },
+            { text: "Delete a school", link: "en/schools/delete" },
+        ],
+        Users: [
+            { text: "Introduction", link: "en/users/introduction" },
+            { text: "Manage users", link: "en/users/manage" },
+            { text: "User permissions", link: "en/users/permissions" },
+        ],
+        "Self hosting": [
+            { text: "Why self host?", link: "en/self-hosting/introduction" },
+            { text: "Self hosting guide", link: "en/self-hosting/self-host" },
+        ],
     },
 };

apps/docs/src/pages/en/blog/introduction.md

@@ -0,0 +1,21 @@
+---
+title: Blog
+description: Blog
+layout: ../../../layouts/MainLayout.astro
+---
+
+CourseLit comes with an integrated blog where you can post articles and updates about your school.
+
+Your school's blog is available at `/blog`.
+
+Following is what it looks like.
+
+![Blog preview](/assets/blog/blog.png)
+
+## Next step
+
+[Publish your first blog in 2 minutes](/en/blog/publish)
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/blog/publish.md

@@ -0,0 +1,40 @@
+---
+title: Publish a blog
+description: Publish a blog
+layout: ../../../layouts/MainLayout.astro
+---
+
+Before you can start publishing your blogs, you need to set up a school. [Follow this guide](/en/schools/create) to get yourself a free account and create a school, if you haven't already.
+
+Once you are signed in using an admin account, go to the dashboard by clicking on the `Dashboard` option from the drop down menu located on the top right corner of your school.
+
+The dashboard looks like the following.
+
+![Products dashboard](/assets/courses/product-dashboard.png)
+
+Now you are ready to write your first blog. Let's see how.
+
+## Steps to write a blog
+
+1. In the `Dashboard`, click on `Blogs` from the left side menu.
+2. Click on the `New blog` button as shown below.
+
+![New blog](/assets/blog/new-blog.png)
+
+3. In the `New blog` screen, enter the title of your blog and click `continue`.
+4. In the editor screen, add the body of your blog post and click `Save` as shown below.
+
+![Edit blog](/assets/blog/edit-blog.png)
+
+5. Now that you have written the content of your blog, it's time to publish.
+6. Click on the `Publish` tab and then hit `Publish` as shown below. This will make your blog visible on the `/blog` route.
+
+![Publish blog](/assets/blog/publish-blog.png)
+
+7. If you want to keep the blog published but do not want it to appear on the `/blog` route, set the `Visibility` to `Unlisted` as shown below.
+
+![Blog visibility](/assets/blog/blog-visibility-unlisted.png)
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/courses/add-content.md

@@ -0,0 +1,65 @@
+---
+title: Add content to your course
+description: Add content to your course
+layout: ../../../layouts/MainLayout.astro
+---
+
+CourseLit uses a concept called `Lesson`. It is very similar to what we generally see in books i.e. A large piece of information divides into smaller chunks called lessons.
+
+Similarly, you can break down you course into `Lessons` and group the lessons into [Sections](/en/products/section).
+
+## Lessons
+
+CourseLit supports eight types of lessons, which are as follows.
+
+1. Text
+
+    For sharing textual content.
+
+2. Video
+
+    For sharing video lectures.
+
+3. Audio
+
+    For sharing quick audio recordings.
+
+4. PDF
+
+    For sharing premade resources.
+
+5. Embed
+
+    For sharing external links like YouTube videos etc.
+
+6. File
+
+    For sharing binary files like a zip file containing an assingment with the students.
+
+7. Quiz
+
+    For quizzing your students. You can create graded and non-graded quizzes. 
+
+    See the [guide to add a quiz](/en/lessons/add-quiz).
+
+### Steps to add a new lesson
+
+1. From the `Products` section in the dashboard, select your product to open it in the editing mode.
+2. Go to the `Content` tab.
+
+![Add content](/assets/courses/add-content.png)
+
+3. Click on the `New Lesson` button as shown above.
+4. On the `New Lesson` screen, add relevant details as shown below.
+
+![Lesson settings](/assets/courses/lesson-settings.png)
+
+> For text lesson, you will be presented with a text box and for video/audio/file lesson you will be presented with a file selector option. 5. If you want to allow free access to the the lesson despite the pricing of the product, flip the `Preview` switch on (as specified as #4 in the above screenshot).
+
+This can be used as a great way to provide a sneak peak into your course.
+
+6. Click `Save`.
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/courses/create.md

@@ -0,0 +1,63 @@
+---
+title: Create a course
+description: Create a course
+layout: ../../../layouts/MainLayout.astro
+---
+
+Before you can start building your course, you need to set up a school. [Follow this guide](/en/schools/create) to get yourself a free account and create a school, if you haven't already.
+
+Once you are signed in using an admin account, go to the dashboard by clicking on the `Dashboard` option from the drop down menu located on the top right corner of your school.
+
+The dashboard looks like the following.
+
+![Products dashboard](/assets/courses/product-dashboard.png)
+
+> Both courses and digital downloads are categorized as products and will be shown under the `Products` screen.
+
+## Steps to create an online course
+
+We will create a free course for your audience. You can always make it a paid one once you understand the process.
+
+1. Click on the `New product` button.
+2. Set a title and select `Course` from the dropdown. Click continue.
+
+![New product](/assets/courses/new-product.png)
+
+3. Once your course is created, you will get to see the following screen.
+
+![Add content](/assets/courses/course-content.png)
+
+4. Let's add some content in your course. Click on the `New lesson` button to create a lesson.
+5. On the `New Lesson` screen, select `Text` from the `Type` dropdown since we want to create a text based lesson.
+
+![Add lesson](/assets/courses/add-lesson.png)
+
+6. Add the title and the main content of the text lesson. Click `Save`.
+
+![Add lesson details](/assets/courses/add-lesson-details.png)
+
+Now that we have added some content to the course, it's time to publish. By default, any new product is in the `Draft` state.
+
+7. Click on the `Publish` tab.
+
+![Publish tab](/assets/courses/publish-tab.png)
+
+8. Click on the `Publish` button to make your course available to the users.
+
+![Publish course](/assets/courses/publish.png)
+
+9. Voila! Your course is now live! You can checkout its sales page by clicking the three dots menu on the right and then selecting the `View page` option.
+
+![View sales page](/assets/courses/view-page.png)
+
+10. This is how your sales will look initially. It is barebones as of now. Visit our page builder guide to make it enticing.
+
+![Course sales page](/assets/courses/course-sales-page.png)
+
+11. To share your course with your audience, simply copy the URL and share it. When your users click on the `Buy now` button, they will be redirected to the login screen so that they can add the course into their accounts.
+
+[Check out the guide on how to track students](/en/courses/reports)
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/courses/introduction.md

@@ -0,0 +1,37 @@
+---
+title: Online courses
+description: Online courses
+layout: ../../../layouts/MainLayout.astro
+---
+
+An online course is a great way to share your knowledge with the world and earn a living while doing that.
+
+[Create your first course under 5 minutes](/en/courses/create)
+
+### Why CourseLit?
+
+CourseLit has got all the necessary tools to build and sell your online course.
+
+#### Structure your course the way you like
+
+Use `lessons` and `sections` to structure the course in a way which makes the most sense to your users.
+
+#### Unlimited file hosting
+
+Host videos and other files directly on CourseLit, hence saving yourself from the troubles of hosting resources yourself.
+
+#### Sales page
+
+Get a beautiful and responsive sales page for your course which you can customize using our powerful no-code page builder.
+
+#### Track course's performance
+
+We have got you covered. Track how many copies you have sold, how your students are performing and much more.
+
+### Start building yours!
+
+[Create your course under 5 minutes](/en/courses/create)
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/courses/publish.md

@@ -0,0 +1,20 @@
+---
+title: Publishing a product
+description: Publishing a product
+layout: ../../../layouts/MainLayout.astro
+---
+
+When you first create your product, it is in `Draft` state. In order to make it available to your users, you need to publish it.
+
+## Steps to publish your product
+
+1. From the `Products` section in the dashboard, select your product to open it in the editing mode.
+2. Go to the `Publish` tab.
+
+![Publishing a product](/assets/courses/publishing.png)
+
+3. Click the publish button to toggle the publish status of your product as shown above.
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/courses/set-a-price-for-product.md

@@ -0,0 +1,37 @@
+---
+title: Set a price of your product
+description: Set a price of your product
+layout: ../../../layouts/MainLayout.astro
+---
+
+CourseLit makes it easy for you to earn a living by sharing your knowledge. CourseLit offers two types of pricing strategies.
+
+1. Free
+2. Paid
+
+## Set up a free course
+
+Free is the default pricing strategy. When you first create the course, the pricing is set to free.
+
+You don't have to do anything.
+
+## Set up a paid course
+
+**In order to get paid for your offerings, you first need to [setup payments](). Currently, CourseLit offers [Stripe](https://stripe.com) integration.**
+
+### Steps
+
+1. From the `Products` section in the dashboard, select your product to open it in the editing mode.
+2. Go to the `Pricing` tab.
+
+![Pricing dropdown](/assets/courses/paid-dropdown.png)
+
+3. Set the price and click `Save`.
+
+![Set the price](/assets/courses/set-price.png)
+
+4. That's it! Your course is a paid one now. You can visit its sales page to see how it looks to your audience.
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.