Merge pull request #16 from CourseKrimson/enhancement

Create new course diversion (#15)

Author: KrimsonSquad

coursemaker.py

@@ -0,0 +1,22 @@
+import os
+
+def delete_course_files(start, end, directory):
+    # Iterate through the range of course numbers
+    for i in range(start, end + 1):
+        # Construct the filename
+        filename = f'course{i}.md'
+        # Create the full path to the file
+        file_path = os.path.join(directory, filename)
+        
+        # Check if the file exists and delete it
+        if os.path.isfile(file_path):
+            os.remove(file_path)
+            print(f'Deleted: {file_path}')
+        else:
+            print(f'File not found: {file_path}')
+
+# Directory where the course files are located
+directory = 'public/courses/'
+
+# Specify the range of course numbers to delete
+delete_course_files(3, 33, directory)

public/courses/course1.md

@@ -0,0 +1,53 @@
+# This course covers:
+   - Installing and configuring OH MY ZSH
+   - Customizing ZSH themes and plugins
+   - Productivity tips for terminal users
+
+## Requirements
+   - Familiar with Bash, Terminal & Commands
+
+### What is Zsh?
+   <q>Zsh or Zshell is an enhanced, improved, and extended version of BASH (Bourne Again Shell).</q>
+
+### Why Oh My Zsh?
+   <code>Oh My Zsh</code> is an open-source framework used to customize zsh as well as manage its configs.
+
+## Steps Performed:
+--- 
+
+### ZSH Installation
+Installation may differ according to your OS. [See here](https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH)
+
+**For Ubuntu**: <code>$ sudo apt install zsh</code>
+
+### Oh-My-Zsh Installation
+Install **Oh-My-Zsh** according to your OS or distro. [See here](https://ohmyz.sh/#install)
+
+**For Ubuntu**: <code>$ sh -c $(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)</code>
+
+### Zsh Configuration
+![Screenshot of Oh-My-Zsh](https://uploads.sitepoint.com/wp-content/uploads/2019/11/1573134240zsh-02.png)
+
+Boom! Now, your .zshrc <i>(source file for zshell launch)</i> has been replaced by a new .zshrc file <i>(in your home dir or where you've installed it)</i>. The original .zshrc is kept as a backup file.
+
+#### Themes
+The first thing I'd ever do is to change my terminal theme as I like. So, let's explore what will suit us?
+**Editing <q>.zshrc</q> file**
+Go to <code>~</code> <i>(home dir or where you've installed it)</i>
+I performed: <code>$ cd ~</code>
+Choose your favorite editor and edit the **.zshrc** file.
+I performed: <code>$ nano .zshrc</code>
+To change the theme you need to change the value of <q>ZSH_THEME</q>.
+For exploring themes, I placed <q>random</q>. So that, it will launch with any random theme at every instance.
+If you've chosen one, just edit ~/.zshrc file and change the value of <q>ZSH_THEME</q> with the theme you want. 
+I changed <code>ZSH_THEME="devcontainers"</code> to <code>ZSH_THEME="fino"</code>.
+
+#### Auto-Suggestions
+This plugin suggests commands based on your past history, saving you both effort and time.
+**Installing <q>Auto-Suggestions</q> plugin**
+Clone GitHub repository to install it: <code>git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions</code>.
+After installing, again edit your **.zshrc** file and look for <q>plugins</q> config, and change <code># plugins=(git)</code> to <code>plugins=(git zsh-autosuggestions)</code>.
+
+IMPORTANT: <i>See changes done by using zsh to launch again with new config(s).</i>
+
+**Thank You! Jay Nepal!**

public/courses/course2.md

@@ -0,0 +1,5 @@
+  A <code>command line interface (CLI)</code> is a text-based user interface used to interact with a computer system. 
+    It uses commands to perform tasks, such as creating files or installing programs. 
+    CLIs are useful for automation and troubleshooting, and they can be more efficient than graphical user interfaces (GUIs) for certain tasks. 
+    They were commonly used in the past with systems like Unix, MS-DOS, and Apple DOS, and are still used today by software developers and system administrators.
+    

src/components/CourseDetail.jsx

@@ -1,32 +1,33 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import courses from './courseData'; 
-import YouTubeEmbed from './YouTubeEmbed';
 import { marked } from 'marked';  
+import YouTubeEmbed from './YouTubeEmbed'
 
 function CourseDetail() {
   const { courseName } = useParams();
   const courseKey = courseName.toLowerCase(); 
   const course = courses[courseKey]; 
 
+  const [content, setContent] = useState(''); 
+
   if (!course) {
     return <h2 className="text-center">Course not found</h2>;
   }
 
-  const renderMarkdown = (markdownText) => {
-    return { __html: marked(markdownText) };
-  };
+  useEffect(() => {
+    fetch(course.contentFile)
+      .then(response => response.text())
+      .then(text => setContent(marked(text))) 
+      .catch(error => console.error('Error fetching the markdown file:', error));
+  }, [course.contentFile]);
 
   return (
-    <div className="container mt-5">
-      <h2 className='text-center'>{course.title}</h2>
-      {/* <img src={course.image} alt={course.title} className="img-fluid" /> */}
-      <p className='text-center'>{course.description}</p>
-      <h4 className='text-center'>Course Content:</h4>
-      <YouTubeEmbed videoId={course.ytb_vid} />
-      <div dangerouslySetInnerHTML={renderMarkdown(course.content)} />
-
-      <h6><span className="badge bg-primary"><i className="fa-solid fa-pen-nib"></i> {course.author}</span></h6>
+    <div className='container mt-5'>
+      <h1>{course.title}</h1>
+      <YouTubeEmbed videoId={course.ytb_vid} ></YouTubeEmbed>
+      <p>{course.description}</p>
+      <div dangerouslySetInnerHTML={{ __html: content }} />
     </div>
   );
 }