Mahmoud Emad 8727c27146 feat: Add comprehensive README with project details

- Add a detailed README file explaining the project's features,
  structure, and how to get started.  This improves onboarding for
  new contributors and users.
- Include instructions for adding new content, including Markdown
  files and navigation structure updates.  This makes content
  addition simpler and more straightforward.
- Document all technologies used in the project, enhancing
  understanding of the project's architecture.

2025-05-11 16:13:21 +03:00

3.8 KiB

Raw Permalink Blame History

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

Clone the repository:

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

Install dependencies:
```
cd sweb
pnpm install
```
Start the development server:
```
pnpm run dev
```
Open your browser and navigate to http://localhost:5173

Adding Content

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

Create a new Markdown file in the appropriate directory under src/docs/
Update navData.json to include a link to your new content

Images can be included using standard Markdown syntax:

![Alt text](image.jpg)          # Relative path
![Alt text](/images/image.jpg)  # Absolute path

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.

3.8 KiB Raw Permalink Blame History