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