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.
This commit is contained in:
Mahmoud Emad 2025-05-11 16:13:21 +03:00
parent 4c6ce31b20
commit 8727c27146

111
README.md
View File

@ -1,2 +1,111 @@
# secureweb
# 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.