IoT STEM Education Website

An interactive tutorial platform designed to help high school students and teachers learn IoT concepts through hands-on projects, code exploration, and engaging media.

🚀 Project Goal

• Provide step-by-step IoT tutorials that combine text, code, images, and videos.
• Display tutorials in a two-pane layout:
  • Left pane: Instructional content
  • Right pane: Associated media or code editor
• Enable JavaScript code execution in-browser using a sandboxed iframe.
• Allow users to author new tutorials through a front-end editor and export them as Markdown files.
• Ensure full accessibility, responsive design, and optional light/dark theming.
• Keep the platform lightweight, fast, and open-source.

🛠 Tech Stack

📦 Folder Structure

/public
  ├─ fonts/ 
  ├─ tutorials/
  │    └─ example.md
  └─ Images
/src
  ├─ components/
  │   ├─ Subcomponents/
  |   |   └─ Themeswitch.svelte
  |   ├─ TutorialContainer.svelte
  │   └─ Header.svelte
  ├─ lib/
  |   ├─ store.svelte.js
  │   └─ markdownParser.ts
  ├─ App.svelte
  ├─ App.css
  └─ main.js

🧰 Getting Started

Prerequisites

• Node.js (v18 or newer recommended)
• npm (comes with Node.js)

Installation

npm install

Running the Dev Server

npm run dev

Visit http://localhost:5173 in your browser.

📄 Tutorial Format

Each tutorial is written as a Markdown file inside /public/tutorials/. It supports:

✅ Basic Structure:

---
title: "Blink an LED with ESP32"
level: Beginner
estimated_time: 20 minutes
---

# Step 1: Connect the LED

:::left
Connect the LED to pin D2 of the ESP32 board. Use a 220-ohm resistor in series.
:::

:::right
::media
image: /images/led_connection.jpg
::
:::

---

# Step 2: Upload the Code

:::left
Use this Arduino code:
```cpp
void setup() {
  pinMode(2, OUTPUT);
}
void loop() {
  digitalWrite(2, HIGH);
  delay(500);
  digitalWrite(2, LOW);
  delay(500);
}

:::

:::right ::media code :: :::

---

### 💡 Tags Reference

- `:::left` – Places content in the left pane
- `:::right` – Places content in the right pane (e.g., image, video, code runner)
- `::media` blocks inside `:::right` control how media is rendered

#### Example `::media` blocks:
```md
::media
image: /images/sensor_setup.jpg
::

::media
video: https://www.youtube.com/embed/abc123
::

::media
code
::

⚙️ Deployment Instructions

We use a tag-based deploy system to publish the latest version to GitHub Pages.

🔧 Prerequisites

• Make sure dist/ is already built and committed in your main branch
• Push a tag to trigger deployment

🛠 Build Locally

npm install
npm run build
git add dist
git commit -m "Build: update dist for deploy"

🚀 Deploy via Tag

git tag v1.0.0       # Use semantic versioning
git push origin v1.0.0

This triggers a GitHub Action that copies /dist to the gh-pages branch and adds .nojekyll

✨ Features

• Two-pane layout: See instructions and media/code side by side.
• Live Code Editor: Embedded CodeMirror 6 for code blocks.
• JS Code Runner: JavaScript snippets can be run safely using a sandboxed iframe.
• Theme Toggle: Built-in light and dark themes with prefers-color-scheme support.
• Accessibility: Semantic HTML, keyboard navigation, screen reader support.
• Author Mode (Planned): GUI-based tutorial authoring tool for teachers to create and export .md files.

🧪 Recent Updates

• Svelte + Vite base setup
• Markdown-it parser with ::media block handling
• CodeMirror integration for editable code
• JavaScript code execution sandbox
• Initial layout + tutorial rendering
• Dark/light mode with CSS variables
• Focus on full accessibility and screen reader compatibility
• Switched to tag-triggered deployment to gh-pages
• Added :::left and :::right support for two-pane tutorial rendering
• Improved tutorial parser to support embedded media and code
• Responsive theme with toggle and prefers-color-scheme detection

🙌 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/my-feature)
3. Commit your changes
4. Open a pull request for review

📜 License

In Consideration to make it openSource!

Let’s make IoT education hands-on, accessible, and fun!