Add expressions in select

src/components/Course/CourseView.tsx

@@ -9,6 +9,7 @@ import {
 import { isLoggedIn } from '../../lib/jwt';
 import { IdCardIcon, Loader2Icon } from 'lucide-react';
 import { showLoginPopup } from '../../lib/popup';
+import { cn } from '../../lib/classname';
 
 const SqlCodeEditor = lazy(() =>
   import('../SqlCodeEditor/SqlCodeEditor').then((module) => ({
@@ -90,11 +91,19 @@ export function CourseView(props: CourseViewProps) {
           >
             <div className="relative h-full">
               <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
-                <div className="mx-auto max-w-3xl p-4">
+                <div
+                  className={cn('mx-auto max-w-3xl p-4', {
+                    'max-w-xl': [
+                      'lesson-challenge',
+                      'challenge',
+                      'lesson-quiz',
+                    ].includes(lessonType),
+                  })}
+                >
                   <h3 className="mt-10 text-4xl font-bold">
                     {lesson.frontmatter.title}
                   </h3>
-                  <div className="course-content prose prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800">
+                  <div className="course-content prose-blockquote:font-normal prose prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800">
                     {children}
                   </div>
                 </div>

src/data/courses/sql/chapters/introduction/lessons/next-steps.md

@@ -0,0 +1,17 @@
+---
+title: Next Steps
+description: Learn the basics of SQL, the language for querying databases.
+order: 170
+type: lesson
+---
+
+Now that we have got the theoretical part out of the way, let's dive into the practical part of SQL. In our next chapter, we will learn about the basics of SQL; we will cover the basics of selecting data from a database. This will give you a taste of what SQL is and how it works preparing you for the next chapters covering more complex topics.
+
+## Coding Environment
+
+We don't expect you to have a database setup on your local machine. All our lessons will have the coding environment setup with the database ready for you to use and practice. We will be using a hypothetical pre-populated databases throughout this course to help you learn SQL. Additional things to note about the coding environment:
+
+- Our database environment is not persistent. This means that if you close the browser or refresh the page, the database will be reset to its original state.
+- We are using SQLite for our coding environment. You don't need to know anything about SQLite to follow this course as the concepts we will be covering are the same for any other database.
+
+See you in the next chapter!

src/data/courses/sql/chapters/sql-basics/lessons/aliases-and-constants.md

@@ -0,0 +1,84 @@
+---
+title: Aliases and Constants
+description: Learn the basics of SQL, the language for querying databases.
+order: 110
+type: lesson-challenge
+---
+
+In our previous lesson, we looked at the basic `SELECT` statement and how to select columns from a table. However, there is much more to what we can `SELECT` from a table.
+
+## Column Aliases
+
+You may sometimes want to rename a column in the output of a query. This can be done using the `AS` keyword.
+
+Taking the same `books` table from our previous lesson:
+
+| id | title | author | price |
+|----|-------|--------|-------|
+| 1  | The Great Gatsby | F. Scott Fitzgerald | 10.99 |
+| 2  | 1984 | George Orwell | 12.99 |
+| 3  | To Kill a Mockingbird | Harper Lee | 8.99 |
+
+Let's say we want to rename the `price` column to `cost`. We can do this by using the `AS` keyword:
+
+```sql
+SELECT title, price AS cost
+FROM books;
+```
+
+The output will contain the `title` and `cost` columns i.e.
+
+| title | cost |
+|-------|------|
+| The Great Gatsby | 10.99 |
+| 1984 | 12.99 |
+| To Kill a Mockingbird | 8.99 |
+
+## Constants
+
+In our previous lesson I mentioned that the `SELECT` statement has the following syntax:
+
+```sql
+SELECT column1, column2, ...
+FROM table_name;
+```
+
+It is not entirely true. The reality is that the `SELECT` alone can be used without a `FROM` clause as well and you can have functions, expressions, and constants in the `SELECT` statement. For example the query below will return a single row containing `100`:
+
+```sql
+SELECT 100;
+```
+
+The output will be:
+
+| 100 |
+|-----|
+| 100 |
+
+As you can see the output is a single row containing the value `100` and a single column named `100`. You can also add aliases to the constants. For example the query below will return a single row containing the value `100` and a column named `cost`:
+
+```sql
+SELECT 100 AS cost;
+```
+
+The output will be:
+
+| cost |
+|------|
+| 100  |
+
+
+You can also add constants to the `SELECT` statement with a `FROM` clause. Let's say we want to return a hardcoded price of `100` for all books regardless of the actual price in the database, we can do this using the following query:
+
+```sql
+SELECT title, 100 AS price
+FROM books;
+```
+
+The output will be:
+
+| title | price |
+|-------|------|
+| The Great Gatsby | 100 |
+| 1984 | 100 |
+| To Kill a Mockingbird | 100 |

src/data/courses/sql/chapters/sql-basics/lessons/expressions-in-select.md

@@ -0,0 +1,85 @@
+---
+title: Expressions in SELECT
+description: Learn the basics of SQL, the language for querying databases.
+order: 110
+type: lesson-challenge
+---
+
+Apart from columns and constants we discussed in the previous lessons, you can also use expressions in the `SELECT` statement. 
+
+> Expressions are any valid combination of columns, constants, and operators.
+
+Taking the same `books` table from our previous lesson:
+
+| id | title | author | price |
+|----|-------|--------|-------|
+| 1  | The Great Gatsby | F. Scott Fitzgerald | 10.99 |
+| 2  | 1984 | George Orwell | 12.99 |
+| 3  | To Kill a Mockingbird | Harper Lee | 8.99 |
+
+Let's say we are running a sale and want to add a `1` dollar discount to all books before displaying them. We can do this by using the following query:
+
+```sql
+SELECT title, author, price - 1 AS price
+FROM books;
+```
+
+The output will be:
+
+| id | title | author | price |
+|----|-------|--------|-------|
+| 1  | The Great Gatsby | F. Scott Fitzgerald | 9.99 |
+| 2  | 1984 | George Orwell | 11.99 |
+| 3  | To Kill a Mockingbird | Harper Lee | 7.99 |
+
+You can have any valid expression in the `SELECT` statement e.g. `price - 1`, `price + 1`, `price * 2`, `price / 2`, etc.
+
+## Combining Columns and Expressions
+
+You can also use multiple columns in expressions. Let's say that instead of having the hardcoded discount of `1` dollar to all the books, we want to make it configurable based on the book.
+
+Let's say we have added a new column `discount` to the `books` table. Our table now looks like this:
+
+| id | title | author | price | discount |
+|----|-------|--------|-------|------------|
+| 1  | The Great Gatsby | F. Scott Fitzgerald | 10.99 | 1 |
+| 2  | 1984 | George Orwell | 12.99 | 2 |
+| 3  | To Kill a Mockingbird | Harper Lee | 8.99 | 3 |
+
+We want to display the `title`, `author`, `price`, and `price - discount` as `final_price` columns.
+
+```sql
+SELECT 
+    title,
+    price, 
+    discount,
+    price - discount AS final_price,
+FROM 
+    books;
+```
+
+The output will be:
+
+| title | price | discount | final_price |
+|-------|-------|----------|-------------|
+| The Great Gatsby | 10.99 | 1 | 9.99 |
+| 1984 | 12.99 | 2 | 10.99 |
+| To Kill a Mockingbird | 8.99 | 3 | 5.99 |
+
+## Challenge
+
+Given the same `books` table, i.e.
+
+| id | title | author | price |
+|----|-------|--------|-------|
+| 1  | The Great Gatsby | F. Scott Fitzgerald | 10.99 |
+| 2  | 1984 | George Orwell | 12.99 |
+| 3  | To Kill a Mockingbird | Harper Lee | 8.99 |
+
+Write an SQL query to display the `title`, `author`, `price`, and `price * 100` as `cent_price` columns. Your output should be:
+
+| title | author | price | cent_price |
+|-------|--------|-------|------------|
+| The Great Gatsby | F. Scott Fitzgerald | 10.99 | 1099 |
+| 1984 | George Orwell | 12.99 | 1299 |
+| To Kill a Mockingbird | Harper Lee | 8.99 | 899 |

src/data/courses/sql/chapters/sql-basics/lessons/select-fundamentals.md

@@ -0,0 +1,58 @@
+---
+title: SELECT Fundamentals
+description: Learn the basics of SQL, the language for querying databases.
+order: 100
+type: lesson-challenge
+---
+
+`SELECT` statement is used to retrieve data from a database. The syntax for `SELECT` statement is as follows:
+
+```sql
+SELECT column1, column2, ...
+FROM table_name;
+```
+
+Here, `column1, column2, ...` are the columns we want to retrieve from the table and `table_name` is the name of the table we want to retrieve the data from.
+
+## Book Store
+
+Let's take a hypothetical example of an online store that sells books. Imagine we have a table called `books` containing all the books available for sale with following data:
+
+| id | title | author | price |
+|----|-------|--------|-------|
+| 1  | The Great Gatsby | F. Scott Fitzgerald | 10.99 |
+| 2  | 1984 | George Orwell | 12.99 |
+| 3  | To Kill a Mockingbird | Harper Lee | 8.99 |
+
+
+## Selecting All Columns
+
+To get all the books from the `books` table, we would write the following SQL query:
+
+```sql
+SELECT * FROM books;
+```
+
+The `*` symbol is a wildcard character that represents all columns. This query will return all the columns from the `books` table.
+
+## Selecting Specific Columns
+
+To get only the `title` and `author` columns from the `books` table, we would write the following SQL query:
+
+```sql
+SELECT title, author FROM books;
+```
+
+This query will return only the `title` and `author` columns from the `books` table. You can select as many columns as you want separated by commas.
+
+---
+
+## Challenge
+
+Taking the same `books` table, write an SQL query to get the `title` and `price` columns from the `books` table. Your output should look like this:
+
+| title | price |
+|-------|-------|
+| The Great Gatsby | 10.99 |
+| 1984 | 12.99 |
+| To Kill a Mockingbird | 8.99 |

src/data/courses/sql/chapters/sql-basics/sql-basics.md

@@ -0,0 +1,5 @@
+---
+title: SQL Basics
+description: Learn the basics of SQL, the language for querying databases.
+order: 2
+---

src/styles/global.css

@@ -87,6 +87,17 @@ a > code:before {
   content: '' !important;
 }
 
+.course-content table {
+  border-collapse: collapse;
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
+.course-content table td,
+.course-content table th {
+  padding: 5px 10px;
+}
+
 .note-content-editor[contenteditable] ~ grammarly-extension,
 .note-content-editor input ~ grammarly-extension,
 .note-content-editor textarea ~ grammarly-extension {