- Downgraded Tailwind CSS to version 3.4.17 for compatibility. - Updated various dependencies to resolve version conflicts and ensure smooth operation. - Added missing types for Node.js to enhance type safety. - Improved the theming system using CSS custom properties (variables) for better customization and dark mode support. - Refactored styles in `app.css` to improve maintainability and readability. Updated the color palette to enhance the user experience. - Updated the PostCSS configuration to use the new Tailwind CSS version. - Updated component styles to utilize the new theming system. |
||
---|---|---|
specs | ||
sweb | ||
.gitignore | ||
Dockerfile | ||
install.sh | ||
README.md | ||
run.sh | ||
start-docker.sh |
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
Navigation Structure
The navigation structure is defined in src/data/navData.json
. Each entry can have:
label
: The display name in the sidebarlink
: The URL pathchildren
: 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:
 # Relative path  # 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.