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:
parent
4c6ce31b20
commit
8727c27146
111
README.md
111
README.md
@ -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
|
||||
 # Relative path
|
||||
 # 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.
|
||||
|
Loading…
Reference in New Issue
Block a user