+ {/* Board controls */}
+
+ );
+}
diff --git a/site/src/components/DiscussionsList.tsx b/site/src/components/DiscussionsList.tsx
new file mode 100644
index 0000000..a4d8ef9
--- /dev/null
+++ b/site/src/components/DiscussionsList.tsx
@@ -0,0 +1,127 @@
+import { useState } from 'react';
+
+interface Discussion {
+ title: string;
+ author: string;
+ url: string;
+ createdAt: string;
+ category: string;
+ commentCount: number;
+}
+
+interface Props {
+ discussions: Discussion[];
+}
+
+export function DiscussionsList({ discussions }: Props) {
+ const [search, setSearch] = useState('');
+ const [categoryFilter, setCategoryFilter] = useState('all');
+
+ const categories = Array.from(
+ new Set(discussions.map((d) => d.category))
+ );
+
+ const filteredDiscussions = discussions.filter((discussion) => {
+ const matchesSearch =
+ search === '' ||
+ discussion.title.toLowerCase().includes(search.toLowerCase()) ||
+ discussion.author.toLowerCase().includes(search.toLowerCase());
+ const matchesCategory =
+ categoryFilter === 'all' || discussion.category === categoryFilter;
+ return matchesSearch && matchesCategory;
+ });
+
+ return (
+
+
+
+ This is a read-only view of the project board. Visit GitHub to interact
+ with issues.
+
+
+
+ {/* Kanban board */}
+
+ {statuses.map((status) => (
+
+
+
+ ))}
+
+
+
+ {status}
+{itemsByStatus[status].length}
+
+ {itemsByStatus[status].length === 0 ? (
+
+
+ No items
+
+ ) : (
+ itemsByStatus[status].map((item) => (
+
+
+ ))
+ )}
+
+
+ + + {item.title} + +
+ {item.labels.length > 0 && ( +
+ {item.labels
+ .filter((label) => !label.startsWith('status:'))
+ .slice(0, 3)
+ .map((label) => (
+
+ {label}
+
+ ))}
+
+ )}
+
+ {new Date(item.createdAt).toLocaleDateString()}
+
+
+ {/* Filters */}
+
+ );
+}
diff --git a/site/src/components/MermaidViewer.tsx b/site/src/components/MermaidViewer.tsx
new file mode 100644
index 0000000..039f5d8
--- /dev/null
+++ b/site/src/components/MermaidViewer.tsx
@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+
+interface Props {
+ diagrams: Array<{
+ name: string;
+ content: string;
+ }>;
+}
+
+export function MermaidViewer({ diagrams }: Props) {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [mounted, setMounted] = useState(false);
+ const containerRef = useRef
+ setSearch(e.target.value)}
+ />
+
+
+
+ {/* Results count */}
+
+ Showing {filteredDiscussions.length} of {discussions.length} discussions
+
+
+ {/* Discussions list */}
+
+ {filteredDiscussions.length === 0 ? (
+
+
+
+ No discussions found matching your criteria.
+
+ ) : (
+ filteredDiscussions.map((discussion) => (
+
+
+ ))
+ )}
+
+
+ + + {discussion.title} + +
+
+
+
+ {discussion.category}
+ by {discussion.author}
+ •
+
+ {new Date(discussion.createdAt).toLocaleDateString()}
+
+ •
+ {discussion.commentCount} comments
+
+
+ Error rendering diagram: ${diagram.name}
+
+ `;
+ }
+ };
+
+ renderDiagram();
+ }, [mounted, currentIndex, diagrams]);
+
+ if (!mounted) {
+ return (
+
+
+
+ );
+ }
+
+ if (diagrams.length === 0) {
+ return (
+
+
+ No diagrams found.
+
+ );
+ }
+
+ const currentDiagram = diagrams[currentIndex];
+
+ return (
+
+ {/* Diagram selector */}
+
+ );
+}
diff --git a/site/src/components/StatisticsCharts.tsx b/site/src/components/StatisticsCharts.tsx
new file mode 100644
index 0000000..506aebf
--- /dev/null
+++ b/site/src/components/StatisticsCharts.tsx
@@ -0,0 +1,288 @@
+import { useEffect, useRef, useState } from 'react';
+import { Chart, registerables } from 'chart.js';
+
+Chart.register(...registerables);
+
+interface Props {
+ stats: {
+ stars: number;
+ forks: number;
+ watchers: number;
+ openIssues: number;
+ languages: Record
+
+
+ {/* Diagram display */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* View on GitHub */}
+
+
+
+ {currentDiagram.name}
+ +
+
+
+ );
+ }
+
+ return (
+
+ {/* Key Metrics */}
+
+ );
+}
diff --git a/site/src/components/ThemeSwitcher.tsx b/site/src/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..a8d81ef
--- /dev/null
+++ b/site/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+
+const THEMES = [
+ 'nightfall',
+ 'dracula',
+ 'cyberpunk',
+ 'dark-neon',
+ 'hackerman',
+ 'gamecore',
+ 'neon-accent',
+] as const;
+
+type Theme = typeof THEMES[number];
+
+const DEFAULT_THEME: Theme = 'nightfall';
+
+export function ThemeSwitcher() {
+ const [theme, setTheme] = useState
+
+
+ {/* Charts */}
+
+
+
+
+
+
+ Stars
+ {stats.stars}
+
+
+
+
+
+
+ Forks
+ {stats.forks}
+
+
+
+
+
+
+ Watchers
+ {stats.watchers}
+
+
+
+
+
+ Open Issues
+ {stats.openIssues}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/site/src/layouts/Layout.astro b/site/src/layouts/Layout.astro
new file mode 100644
index 0000000..478f17a
--- /dev/null
+++ b/site/src/layouts/Layout.astro
@@ -0,0 +1,176 @@
+---
+import { ThemeSwitcher } from '@/components/ThemeSwitcher';
+import '@/styles/global.css';
+
+export interface Props {
+ title: string;
+ description?: string;
+}
+
+const { title, description = 'FortiPath - Comprehensive Security Planning' } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+const navLinks = [
+ { href: '/FortiPath/', label: 'Project Info' },
+ { href: '/FortiPath/statistics', label: 'Statistics' },
+ { href: '/FortiPath/discussions', label: 'Discussions' },
+ { href: '/FortiPath/development-board', label: 'Development Board' },
+ { href: '/FortiPath/create-issue', label: 'Create Issue' },
+ { href: '/FortiPath/docs', label: 'Docs' },
+ { href: '/FortiPath/visualizer', label: 'Visualizer' },
+];
+
+// Get commit SHA and build time from environment
+const commitSha = import.meta.env.PUBLIC_COMMIT_SHA || 'dev';
+const buildTime = import.meta.env.PUBLIC_BUILD_TIME || new Date().toISOString();
+---
+
+
+
+
+
+
+
+
+
+ -
+ {THEMES.map((themeName) => (
+
- + + + ))} +
+
+
+
+
+
+
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
new file mode 100644
index 0000000..4eb65c4
--- /dev/null
+++ b/site/src/pages/404.astro
@@ -0,0 +1,53 @@
+---
+import Layout from '@/layouts/Layout.astro';
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 404
+Page Not Found
++ Oops! The page you're looking for doesn't exist or has been moved. +
+ + + +
+
+ Quick Links
+ +
+
+
+
+
+ Create an Issue
++ Choose the type of issue you want to create. You'll be redirected to + GitHub to complete the process. +
+
+ {
+ issueTypes.map((issueType) => (
+
+
+
+
+
+ ))
+ }
+ OR
+
+
+
+
+
+
+ Browse All Templates
++ View all available issue templates on GitHub and choose the one that + fits your needs. +
+ +
+
+
+
+
+ Note
+
+ You'll need to be signed in to GitHub to create an issue. Please read
+ our{' '}
+
+ Contributing Guidelines
+ {' '}
+ before submitting.
+
+
+
+
+
+
+ Development Board
++ Track the progress of features and tasks in the FortiPath project. +
+
+
+
+
+
+ Discussions
++ Join the conversation! Browse and participate in community discussions. +
+
+
+
+
+
+ Documentation
++ Browse the FortiPath documentation. Click any document to view it on GitHub. +
+
+ {
+ docFiles.map((file) => {
+ const name = file.replace('.md', '');
+ const displayName = name
+ .replace(/_/g, ' ')
+ .replace(/([A-Z])/g, ' $1')
+ .trim();
+
+ return (
+
+
+
+ {
+ docFiles.length === 0 && (
+
+
+
+ );
+ })
+ }
+ + 📄 {displayName} +
+
+ View on GitHub →
+
+
+
+ No documentation files found.
+
+ )
+ }
+
+
+
+
+
+ Browse All Documentation
++ Visit the GitHub repository to browse all documentation, including + READMEs, guides, and specifications. +
+ +
+
+
+
+
+
+
+
+
+
+
+ FortiPath
+Comprehensive Security Planning
+
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🎯 Mission
++ To provide executive protection professionals with a modern, + integrated toolkit that combines threat intelligence, operational + planning, and real-time communication capabilities—all while + maintaining the highest standards of security and privacy. +
+
+
+
+
+ 🚧 Status
++ FortiPath is currently undergoing a comprehensive modernization + effort. Following the Spec-Kit specification-driven development + framework. +
+ +
+
+
+
+
+
+ 📚 Key Resources
+ +
+
+ About FortiPath
++ FortiPath is a comprehensive executive protection toolkit designed to + enhance the safety, efficiency, and effectiveness of protection details. + By leveraging state-of-the-art technologies and methodologies—including + AI-powered threat analysis, OSINT web crawling, and advanced route + planning—FortiPath aims to revolutionize the executive protection + industry. +
+Technologies
+-
+
- Python 3.8+ - Main application logic and scripts +
- Rust 2021 - High-performance OSINT web crawler +
- Go 1.19+ - Custom Terraform provider +
+
+Repository Statistics
+ +
+
+
+
+
+ Project Visualizer
++ Explore FortiPath's architecture and workflows through interactive + Mermaid diagrams. +
+
-
- Error rendering diagram: ${diagram.name}
-
+ const errorDiv = document.createElement('div');
+ errorDiv.className = 'alert alert-error';
+ errorDiv.innerHTML = `
+
+ Error rendering diagram: ${diagram.name.replace(/[<>&'"]/g, (c) => ({
+ '<': '<',
+ '>': '>',
+ '&': '&',
+ "'": ''',
+ '"': '"'
+ }[c] || c))}
`;
+ container.innerHTML = '';
+ container.appendChild(errorDiv);
}
};
diff --git a/site/src/components/StatisticsCharts.tsx b/site/src/components/StatisticsCharts.tsx
index 506aebf..d1a68bf 100644
--- a/site/src/components/StatisticsCharts.tsx
+++ b/site/src/components/StatisticsCharts.tsx
@@ -108,7 +108,7 @@ export function StatisticsCharts({ stats }: Props) {
const commitsCtx = commitsChartRef.current.getContext('2d');
if (commitsCtx) {
- new Chart(commitsCtx, {
+ const commitsChart = new Chart(commitsCtx, {
type: 'line',
data: {
labels: sortedWeeks.map(([week]) => week),
@@ -166,6 +166,9 @@ export function StatisticsCharts({ stats }: Props) {
return () => {
languagesChart.destroy();
+ if (commitsChart) {
+ commitsChart.destroy();
+ }
};
}
}, [mounted, stats]);
diff --git a/site/src/components/ThemeSwitcher.tsx b/site/src/components/ThemeSwitcher.tsx
index a8d81ef..3b3ac1f 100644
--- a/site/src/components/ThemeSwitcher.tsx
+++ b/site/src/components/ThemeSwitcher.tsx
@@ -13,6 +13,7 @@ const THEMES = [
type Theme = typeof THEMES[number];
const DEFAULT_THEME: Theme = 'nightfall';
+const FALLBACK_THEME: Theme = 'neon-accent';
export function ThemeSwitcher() {
const [theme, setTheme] = useState