Home
Relevant source files
The following files were used as context for generating this wiki page:CyberPath is an open-source project designed to provide a comprehensive, public database of cybersecurity certifications and training resources. Its mission is to empower individuals and organizations by making it easier to navigate the complex world of cybersecurity certifications. The platform is built as a static website but offers a rich, interactive experience for searching and filtering certifications.
The primary features include a detailed database of certifications searchable by various criteria and the ability for the community to contribute new information. While the project can be run locally, the official website is recommended for the best experience as it is automatically updated and provides pre-compiled metadata for fast access.
Sources: README.md:3-10, README.md:19-25
Project Architecture
The CyberPath application is built as a static site using the Astro framework. This architecture ensures fast performance and simplified deployment. The frontend leverages React for interactive components, Tailwind CSS for styling, and MDX for content.
Sources: astro.config.ts, package.json
Technology Stack
The project utilizes a modern web development stack. The following diagram illustrates the key technologies and their roles.
This diagram shows that Astro is the core framework, integrating with React for dynamic UI, Tailwind for styling, and MDX for content pages. Client-side interactivity is powered by Fuse.js for search functionality.
Sources: astro.config.ts:13-22, package.json:11-27
Data Model and Content
Certification data is managed through Astro's content collections feature. Each certification is a Markdown or MDX file with a defined schema, ensuring data consistency.
Sources: src/content.config.ts
Certification Schema
The certifications collection defines the structure for each certification entry.
| Field | Type | Description |
|---|---|---|
title | string | The full title of the certification. |
acronym | string | The common acronym for the certification. |
last_updated_at | date | The date the entry was last updated. |
image | image() | An associated image for the certification. |
reference | string | A URL to the official certification page. |
aliases | string[] (optional) | Alternative names or acronyms. |
draft | boolean | If true, the entry is not published. Defaults to false. |
career_paths | string[] | An array of associated career paths from a predefined list. |
price | string | The price of the certification. |
currency | string | The currency for the price (e.g., USD). |
Sources: src/content.config.ts:7-19
Career Paths
Certifications are categorized into specific career paths. These paths are defined in a central file to ensure consistency across the application.
The available career paths are:
- Blue Team Specialist
- Cloud Security Specialist
- Cybersecurity Manager
- Malware Developer
- OSINT Specialist
- Penetration Tester
- Red Team Specialist
- Risk Management Specialist
- Security Operations Specialist
- Threat Hunter
Sources: src/lib/career-paths.ts:17-28
Data Presentation and Search
The application provides a dynamic and searchable table of certifications through a combination of static data generation and client-side rendering.
Data API Endpoints
During the build process, Astro generates JSON files that act as APIs for the frontend components.
/database/data.json: Provides an array of all certification metadata./database/data-index.json: Provides a pre-computed search index for Fuse.js. This significantly speeds up client-side search initialization./career-paths/[path]/data.json: A dynamic route that serves certification data filtered by a specific career path.
Sources: src/pages/database/data.json.ts, src/pages/database/data-index.json.ts, src/pages/career-paths/[path]/data.json.ts
ReactiveDatatable Component
The core of the user interface is the ReactiveDatatable React component. It is responsible for fetching data, handling user input for searching, and displaying the paginated results.
The data loading and search process is illustrated below.
This sequence shows the component fetching both the full dataset and a pre-computed search index upon loading. This allows the Fuse.js library to be initialized quickly for fast, client-side searching without needing to build the index in the browser.
Sources: src/components/astro/database/reactive-datatable.tsx:135-177, src/components/astro/database/reactive-datatable.tsx:106-118
Build Process
The project uses pnpm as its package manager. The build process is defined in package.json and includes several steps beyond a typical static site generation.
Sources: package.json:5-9, README.md:40-43
Key Scripts
| Script | Description |
|---|---|
dev | Starts the Astro development server. |
build | Type-checks, builds the static site, and runs the screenshot script. |
start | An alias for the dev script. |
preview | Serves the built site locally for previewing. |
Sources: package.json:5-9
Automated Screenshot Generation
A unique part of the build process is the scripts/screenshot.js script, which automatically generates a preview screenshot of the database page.
The flow for this script is as follows:
This process uses Puppeteer to control a headless browser, navigates to the live database page on the temporary dev server, waits for the React component to render the data, and captures an image. The image is then cropped and optimized using Sharp before being saved.
Sources: scripts/screenshot.js, package.json:7
Contribution and Licensing
The project welcomes community contributions. The standard process is to fork the repository, create a feature branch, and open a pull request.
The CyberPath project is licensed under a custom license that permits private use only. Commercial use, redistribution, or rebranding of the work is strictly prohibited without written permission from the licensor.
Sources: CONTRIBUTING.md:6-21, LICENSE.md:16-18, LICENSE.md:24-28