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:

   git clone https://github.com/codescalers/secureweb.git
   cd secureweb
   

2. Install dependencies:

   cd sweb
   pnpm install
   

3. Start the development server:

   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:

   ![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 - Frontend framework
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Marked - Markdown parser
• Vite - Build tool and development server

License

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