Skip to content

Add auto rendering of md files into react pages along with updated UI.#59

Merged
amandewatnitrr merged 3 commits intoamandewatnitrr:mainfrom
HarzhMehta:main
Oct 13, 2025
Merged

Add auto rendering of md files into react pages along with updated UI.#59
amandewatnitrr merged 3 commits intoamandewatnitrr:mainfrom
HarzhMehta:main

Conversation

@HarzhMehta
Copy link
Copy Markdown
Contributor

@HarzhMehta HarzhMehta commented Oct 13, 2025 •
edited by amandewatnitrr
Loading

1. Automated Markdown to React Page Rendering

What Changed:

  • Converted static website to a dynamic React application
  • All .md files in UI/frontend/src/content/MD_Content_ethical-hacking/ now automatically render as React pages
  • Each lesson becomes a route (e.g., lesson-01.md → /lessons/lesson-01)

2. New File Structure

hacking-tutorial_fork/
├── UI/
│   └── frontend/
│       ├── src/
│       │   ├── components/
│       │   │   ├── Navbar.jsx          
│       │   │   ├── Navbar.css          
│       │   │   ├── LessonTemplate.jsx  
│       │   │   └── LessonTemplate.css  
│       │   ├── pages/
│       │   │   ├── LessonPage.jsx      
│       │   │   └── LessonPage.css     
│       │   ├── utils/
│       │   │   └── markdownloader.js   
│       │   ├── content/
│       │   │   └── MD_Content_ethical-hacking/  
│       │   │       ├── lesson-01.md (with frontmatter)
│       │   │       ├── lesson-02.md (with frontmatter)
│       │   │       └── ...
│       │   ├── App.jsx                 
│       │   ├── App.css                 
│       │   ├── index.css               
│       │   └── main.jsx                
│       ├── vite.config.js              
│       └── package.json                
├── README-FRONTEND.md                  
├── SYNC-UPSTREAM.md                   
└── CHANGELOG.md

UI/UX Improvements
image

image

8. How to Add New Lessons (For Contributors)

Step 1: Create Your Markdown File

Create a new file in UI/frontend/src/content/MD_Content_ethical-hacking/:

---
title: "Your Lesson Title"
slug: "your-lesson-slug"
order: 16
category: "ethical-hacking"
prev: "ids-probe-lesson"
next: null
---

# Your Lesson Content Here

Write your tutorial content...

Future Enhancements

We need to work on how we'll implement this logic for python scripts

  • Search functionality across all lessons
  • Code block copy button
  • Table of contents auto-generation

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 13, 2025

@HarzhMehta is attempting to deploy a commit to the amandewatnitrr's projects Team on Vercel.

A member of the Team first needs to authorize it.

@amandewatnitrr amandewatnitrr linked an issue Oct 13, 2025 that may be closed by this pull request
Auto rendering readme files #49
Open
6 tasks
@amandewatnitrr amandewatnitrr self-requested a review October 13, 2025 14:23
@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 13, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
hacking-tutorial Ready Ready Preview Comment Oct 13, 2025 2:24pm

@amandewatnitrr amandewatnitrr merged commit 75cb0b3 into amandewatnitrr:main Oct 13, 2025
1 check passed
amandewatnitrr added a commit that referenced this pull request Oct 13, 2025
@imgbot @HarzhMehta
@gssi962 @MULTidll @amandewatnitrr @ImgBotApp
[ImgBot] Optimize images (#73)
5822e54 
* Add auto rendering of md files into react pages along with updated UI. (#59)

* add automapping of md files & a better UI

* add auto rendering pages based on md files along with updated UI

* Enhanced index.html with proper title, favicon, and SEO meta tags (#61)

* Resolves Image/gif render issue and added .gitignore #64 (#68)

* Resolves Image/gif render issue and added gitignore

* Fix command path in Binary-Exploitation.md

Updated command to execute the binary with './poc' instead of '/poc' for correct path usage.

* Restoring File structure for the course

* [ImgBot] Optimize images

*Total -- 21,317.74kb -> 14,383.20kb (32.53%)

/cli-editors-tutorials/assets/images/emacs-editing-a-file.png -- 42.52kb -> 13.97kb (67.15%)
/UI/frontend/public/imgs/https_data_fetcher_bettercap2.png -- 220.50kb -> 74.32kb (66.3%)
/cli-editors-tutorials/assets/images/emacs-in-terminal.png -- 125.75kb -> 46.66kb (62.89%)
/cli-editors-tutorials/assets/images/check-emacs-version.png -- 36.86kb -> 13.76kb (62.66%)
/UI/frontend/public/imgs/ids_probe2.png -- 14.85kb -> 5.75kb (61.26%)
/UI/frontend/public/imgs/ids_probe.png -- 16.69kb -> 6.76kb (59.5%)
/UI/frontend/public/imgs/https_data_fetcher_bettercap.png -- 79.42kb -> 32.98kb (58.47%)
/UI/frontend/public/imgs/ids_probe1.png -- 8.57kb -> 3.97kb (53.65%)
/python-scripts/images/wpa_wpa2op.png -- 2,017.34kb -> 1,117.04kb (44.63%)
/UI/frontend/src/content/python-scripts/images/wpa_wpa2op.png -- 2,017.34kb -> 1,117.04kb (44.63%)
/UI/frontend/public/imgs/wep_wifi_hacking.png -- 742.56kb -> 424.83kb (42.79%)
/UI/frontend/src/content/python-scripts/images/mitm_automation_op.png -- 1,232.24kb -> 718.96kb (41.65%)
/python-scripts/images/mitm_automation_op.png -- 1,232.24kb -> 718.96kb (41.65%)
/UI/frontend/public/imgs/mitm_attack_automator.png -- 1,232.24kb -> 718.96kb (41.65%)
/UI/frontend/public/imgs/https_data_fetcher_bettercap3.png -- 168.81kb -> 101.29kb (40%)
/UI/frontend/public/imgs/portscanner_test.png -- 61.09kb -> 37.80kb (38.13%)
/python-scripts/images/async.png -- 61.09kb -> 37.80kb (38.13%)
/UI/frontend/src/content/python-scripts/images/async.png -- 61.09kb -> 37.80kb (38.13%)
/UI/frontend/src/content/python-scripts/images/async2.png -- 57.51kb -> 36.31kb (36.86%)
/python-scripts/images/async2.png -- 57.51kb -> 36.31kb (36.86%)
/UI/frontend/public/imgs/portscanner_test2.png -- 57.51kb -> 36.31kb (36.86%)
/cli-editors-tutorials/assets/images/emacs-interface.png -- 42.92kb -> 28.28kb (34.11%)
/UI/frontend/src/content/python-scripts/images/wpa_wpa2_2op.png -- 1,476.68kb -> 1,060.73kb (28.17%)
/python-scripts/images/wpa_wpa2_2op.png -- 1,476.68kb -> 1,060.73kb (28.17%)
/UI/frontend/public/imgs/wpa2_dictionary_attack.png -- 1,476.68kb -> 1,060.73kb (28.17%)
/UI/frontend/public/imgs/bettercap_arp_spoofing_script.png -- 1,275.57kb -> 934.71kb (26.72%)
/python-scripts/images/bettercap_arp_op.png -- 1,275.57kb -> 934.71kb (26.72%)
/UI/frontend/src/content/python-scripts/images/bettercap_arp_op.png -- 1,275.57kb -> 934.71kb (26.72%)
/cli-editors-tutorials/assets/images/emacs-with-window.png -- 110.35kb -> 81.27kb (26.35%)
/UI/frontend/public/imgs/port-scanning2.png -- 112.69kb -> 84.70kb (24.84%)
/UI/frontend/public/imgs/port-scanning3.png -- 86.94kb -> 66.15kb (23.91%)
/UI/frontend/public/imgs/port-scanning4.png -- 57.79kb -> 44.21kb (23.49%)
/UI/frontend/public/imgs/port-scanning1.png -- 167.63kb -> 128.80kb (23.16%)
/cli-editors-tutorials/assets/images/emacs-logo-png.png -- 421.07kb -> 329.46kb (21.76%)
/python-scripts/images/bettercap_controller_flow_professional.png -- 60.63kb -> 49.25kb (18.77%)
/UI/frontend/src/content/python-scripts/images/bettercap_controller_flow_professional.png -- 60.63kb -> 49.25kb (18.77%)
/UI/frontend/src/content/python-scripts/images/async_port_scanner_flow_edges.png -- 64.94kb -> 55.21kb (14.98%)
/python-scripts/images/async_port_scanner_flow_edges.png -- 64.94kb -> 55.21kb (14.98%)
/UI/frontend/src/content/python-scripts/images/wpa_dictionary_attack_flow.png -- 53.02kb -> 45.14kb (14.87%)
/python-scripts/images/wpa_dictionary_attack_flow.png -- 53.02kb -> 45.14kb (14.87%)
/python-scripts/images/mitm_attack_flow.png -- 105.63kb -> 92.19kb (12.73%)
/UI/frontend/src/content/python-scripts/images/mitm_attack_flow.png -- 105.63kb -> 92.19kb (12.73%)
/UI/frontend/src/content/python-scripts/images/deauth_controller.png -- 75.44kb -> 65.95kb (12.58%)
/python-scripts/images/deauth_controller.png -- 75.44kb -> 65.95kb (12.58%)
/ethical-hacking/image.png -- 176.34kb -> 155.56kb (11.78%)
/UI/frontend/src/content/MD_Content_ethical-hacking/image.png -- 176.34kb -> 155.56kb (11.78%)
/UI/frontend/public/imgs/https_data_fetcher_bettercap1.png -- 514.03kb -> 476.05kb (7.39%)
/UI/frontend/public/imgs/remote_collect_via_ssh.jpg -- 233.61kb -> 221.08kb (5.36%)
/UI/frontend/public/imgs/wordlist_generator2.jpg -- 199.57kb -> 190.43kb (4.58%)
/UI/frontend/public/imgs/mac_address_change.jpg -- 129.08kb -> 123.52kb (4.31%)
/UI/frontend/public/imgs/remote_collect_via_ssh2.jpg -- 108.62kb -> 104.49kb (3.8%)
/UI/frontend/public/imgs/remote_collect_via_ssh3.jpg -- 103.45kb -> 99.88kb (3.45%)
/UI/frontend/public/imgs/async_port_scanner.jpg -- 89.05kb -> 86.54kb (2.81%)
/UI/frontend/public/imgs/wordlist_generator.jpg -- 68.44kb -> 67.83kb (0.89%)

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>

---------

Signed-off-by: ImgBotApp <ImgBotHelp@gmail.com>
Co-authored-by: Harsh Mehta <147304413+HarzhMehta@users.noreply.github.com>
Co-authored-by: Gauri Singh <gs28122004@rediffmail.com>
Co-authored-by: MULTi <78434796+MULTidll@users.noreply.github.com>
Co-authored-by: Aman Dewangan <amandewatnitrr@gmail.com>
Co-authored-by: ImgBotApp <ImgBotHelp@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@amandewatnitrr amandewatnitrr amandewatnitrr approved these changes

Assignees

@HarzhMehta HarzhMehta

Labels

enhancement New feature or request good first issue Good for newcomers hacktoberfest hacktoberfest-accepted help wanted Extra attention is needed priority

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Auto rendering readme files

2 participants

@HarzhMehta @amandewatnitrr