# SecureWeb

A modern, responsive web application for displaying secure web content with dynamic Markdown rendering.

## Features

- **Dynamic Markdown Rendering**: Renders Markdown content from files with support for images and formatting
- **Responsive Design**: Works on desktop and mobile devices
- **Navigation System**: Sidebar navigation with expandable sections
- **Fixed Footer**: Simple, light-colored footer fixed at the bottom of the page
- **Tailwind CSS**: Styled with Tailwind CSS for modern, clean UI

## Project Structure

```
secureweb/
├── sweb/                   # Main application directory
│   ├── public/             # Static assets
│   │   └── images/         # Images used in Markdown content
│   ├── src/                # Source code
│   │   ├── components/     # Svelte components
│   │   │   ├── Footer.svelte
│   │   │   ├── Home.svelte
│   │   │   ├── Layout.svelte
│   │   │   ├── MarkdownContent.svelte
│   │   │   ├── Navbar.svelte
│   │   │   ├── NavDataProvider.svelte
│   │   │   └── Sidebar.svelte
│   │   ├── data/           # Data files
│   │   │   └── navData.json # Navigation structure
│   │   ├── docs/           # Markdown content
│   │   │   ├── introduction/
│   │   │   ├── why-ourworld/
│   │   │   ├── our-story/
│   │   │   ├── our-solutions/
│   │   │   ├── our-projects/
│   │   │   └── more-info/
│   │   ├── types/          # TypeScript type definitions
│   │   │   └── nav.ts
│   │   ├── App.svelte      # Main application component
│   │   ├── app.css         # Global styles
│   │   └── main.ts         # Application entry point
│   ├── index.html          # HTML entry point
│   ├── package.json        # Dependencies and scripts
│   ├── postcss.config.js   # PostCSS configuration
│   ├── tailwind.config.js  # Tailwind CSS configuration
│   ├── tsconfig.app.json   # TypeScript configuration
│   └── vite.config.ts      # Vite configuration
└── README.md               # This file
```

## Getting Started

### Prerequisites

- Node.js (v18 or later)
- pnpm (v8 or later)

### Installation

1. Clone the repository:
   ```bash
   git clone https://github.com/codescalers/secureweb.git
   cd secureweb
   ```

2. Install dependencies:
   ```bash
   cd sweb
   pnpm install
   ```

3. Start the development server:
   ```bash
   pnpm run dev
   ```

4. Open your browser and navigate to `http://localhost:5173`

## Adding Content

### Navigation Structure

The navigation structure is defined in `src/data/navData.json`. Each entry can have:
- `label`: The display name in the sidebar
- `link`: The URL path
- `children`: An array of sub-items (optional)

### Adding Markdown Content

1. Create a new Markdown file in the appropriate directory under `src/docs/`
2. Update `navData.json` to include a link to your new content
3. Images can be included using standard Markdown syntax:
   ```markdown
   ![Alt text](image.jpg)          # Relative path
   ![Alt text](/images/image.jpg)  # Absolute path
   ```

4. Place images in the `public/images/` directory, preferably in a subdirectory matching your content section

## Technologies Used

- [Svelte](https://svelte.dev/) - Frontend framework
- [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Marked](https://marked.js.org/) - Markdown parser
- [Vite](https://vitejs.dev/) - Build tool and development server

## License

This project is licensed under the MIT License - see the LICENSE file for details.