...
This commit is contained in:
parent
91efc3c41f
commit
541ec8e5a5
@ -25,6 +25,7 @@ function App() {
|
||||
<Route path="/blog" element={<Blog />} />
|
||||
<Route path="/blog/:category/:slug" element={<BlogPost />} />
|
||||
<Route path="/component/:slug" element={<BlogPost />} />
|
||||
<Route path="/technology/:slug" element={<BlogPost />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,8 @@ readTime: "7 min read"
|
||||
image: "heartblue.jpg"
|
||||
description: "Cryptographically verified identity system built on blockchain technology. You control your reputation and trust relationships."
|
||||
tags: ["technology", "blockchain", "identity", "security"]
|
||||
|
||||
iconname: "Key"
|
||||
order: 4
|
||||
slug: blockchain-identity
|
||||
---
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@ readTime: "6 min read"
|
||||
image: "sphere.jpg"
|
||||
description: "Direct communication between HEROs without central servers. Built on distributed protocols that ensure privacy and resilience."
|
||||
tags: ["technology", "p2p", "network", "communication"]
|
||||
|
||||
iconname: "Network"
|
||||
order: 3
|
||||
slug: peer-to-peer-network
|
||||
---
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@ readTime: "8 min read"
|
||||
image: "swarm.jpg"
|
||||
description: "Post-quantum cryptography protects your data against future quantum computing threats. Memory is dispersed across multiple nodes with no single point of failure."
|
||||
tags: ["technology", "quantum-safe", "storage", "security"]
|
||||
|
||||
iconname: "Database"
|
||||
order: 2
|
||||
slug: quantum-safe-storage
|
||||
---
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@ readTime: "7 min read"
|
||||
image: "person.jpg"
|
||||
description: "Advanced cryptographic techniques ensure that even HERO cannot access your data. Your information is encrypted before it leaves your device."
|
||||
tags: ["technology", "zero-knowledge", "security"]
|
||||
|
||||
iconname: "Shield"
|
||||
order: 1
|
||||
slug: zero-knowledge-architecture
|
||||
---
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ import matter from 'gray-matter'; // Import matter
|
||||
|
||||
// Import images
|
||||
import techBackground from '../assets/herotech.jpg'; // HERO Technology background
|
||||
import blockchainImage from '../assets/heartblue.jpg'; // Blockchain visualization
|
||||
import networkImage from '../assets/sphere.jpg'; // sphere
|
||||
import securityImage from '../assets/person.jpg'; // Digital privacy
|
||||
import swarmImage from '../assets/swarm.jpg'; // AI Agent Creation
|
||||
|
||||
// Use Vite's import.meta.glob to import all tech markdown files
|
||||
const techModules = import.meta.glob('../content/tech/*.md', { query: '?raw', import: 'default', eager: true });
|
||||
// Use Vite's import.meta.glob to import all tech markdown files and images
|
||||
const techModules = import.meta.glob('../content/tech/*.md', { as: 'raw', eager: true });
|
||||
const imageModules = import.meta.glob('../assets/*.jpg', { eager: true, import: 'default' });
|
||||
const iconComponents = { Shield, Database, Network, Key, Cpu, Globe, Lock, Zap };
|
||||
|
||||
console.log('Tech Modules:', techModules);
|
||||
|
||||
const Technology = () => {
|
||||
const [technologies, setTechnologies] = useState([]);
|
||||
@ -30,27 +30,19 @@ const Technology = () => {
|
||||
const content = techModules[path];
|
||||
const { data: frontmatter } = matter(content);
|
||||
|
||||
// Map icon strings to actual components
|
||||
const iconMap = {
|
||||
'Shield': <Shield size={32} />,
|
||||
'Database': <Database size={32} />,
|
||||
'Network': <Network size={32} />,
|
||||
'Key': <Key size={32} />
|
||||
};
|
||||
const IconComponent = iconComponents[frontmatter.iconname];
|
||||
const imagePath = `../assets/${frontmatter.image}`; // Construct full path
|
||||
const importedImage = imageModules[imagePath];
|
||||
|
||||
// Map image paths to actual imports
|
||||
const imageMap = {
|
||||
'/src/assets/person.jpg': securityImage,
|
||||
'/src/assets/swarm.jpg': swarmImage,
|
||||
'/src/assets/sphere.jpg': networkImage,
|
||||
'/src/assets/heartblue.jpg': blockchainImage
|
||||
};
|
||||
console.log('Loading technology:', frontmatter.title);
|
||||
console.log('IconComponent:', frontmatter.iconname, IconComponent);
|
||||
console.log('ImagePath:', imagePath, 'ImportedImage:', importedImage);
|
||||
|
||||
loadedTechnologies.push({
|
||||
icon: iconMap[frontmatter.icon] || <Shield size={32} />,
|
||||
icon: IconComponent ? <IconComponent size={32} /> : <Shield size={32} />,
|
||||
title: frontmatter.title,
|
||||
description: frontmatter.description,
|
||||
image: imageMap[frontmatter.image] || securityImage,
|
||||
image: importedImage,
|
||||
order: frontmatter.order || 999,
|
||||
slug: frontmatter.slug || frontmatter.title.toLowerCase().replace(/\s+/g, '-')
|
||||
});
|
||||
@ -61,37 +53,9 @@ const Technology = () => {
|
||||
setTechnologies(loadedTechnologies);
|
||||
} catch (error) {
|
||||
console.error('Error loading technologies:', error);
|
||||
// Fallback to static data if loading fails (optional, but good for robustness)
|
||||
setTechnologies([
|
||||
{
|
||||
icon: <Shield size={32} />,
|
||||
title: "Zero-Knowledge Architecture",
|
||||
description: "Advanced cryptographic techniques ensure that even HERO cannot access your data. Your information is encrypted before it leaves your device.",
|
||||
image: securityImage,
|
||||
slug: "zero-knowledge-architecture"
|
||||
},
|
||||
{
|
||||
icon: <Database size={32} />,
|
||||
title: "Quantum-Safe Storage",
|
||||
description: "Post-quantum cryptography protects your data against future quantum computing threats. Memory is dispersed across multiple nodes with no single point of failure.",
|
||||
image: swarmImage,
|
||||
slug: "quantum-safe-storage"
|
||||
},
|
||||
{
|
||||
icon: <Network size={32} />,
|
||||
title: "Peer-to-Peer Network",
|
||||
description: "Direct communication between HEROs without central servers. Built on distributed protocols that ensure privacy and resilience.",
|
||||
image: networkImage,
|
||||
slug: "peer-to-peer-network"
|
||||
},
|
||||
{
|
||||
icon: <Key size={32} />,
|
||||
title: "Blockchain Identity",
|
||||
description: "Cryptographically verified identity system built on blockchain technology. You control your reputation and trust relationships.",
|
||||
image: blockchainImage,
|
||||
slug: "blockchain-identity"
|
||||
}
|
||||
]);
|
||||
setTechnologies([]); // Ensure technologies is empty on error
|
||||
// Optionally, set an error state to display a message to the user
|
||||
// setError('Failed to load technologies. Please try again later.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@ -223,9 +187,9 @@ const Technology = () => {
|
||||
<div className="h-32 bg-gray-600 rounded-lg"></div>
|
||||
</motion.div>
|
||||
))
|
||||
) : (
|
||||
) : technologies.length > 0 ? (
|
||||
technologies.map((spec, index) => (
|
||||
<Link key={index} to={`/blog/tech/${spec.slug}`} className="block">
|
||||
<Link key={index} to={`/technology/${spec.slug}`} className="block">
|
||||
<FeatureCard
|
||||
icon={spec.icon}
|
||||
title={spec.title}
|
||||
@ -235,6 +199,10 @@ const Technology = () => {
|
||||
/>
|
||||
</Link>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full text-center text-gray-400 text-xl">
|
||||
Failed to load technologies. Please check the console for errors.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
@ -400,7 +368,7 @@ const Technology = () => {
|
||||
className="relative"
|
||||
>
|
||||
<img
|
||||
src={securityImage}
|
||||
src={imageModules['../assets/person.jpg']}
|
||||
alt="Security Architecture"
|
||||
className="w-full rounded-2xl shadow-2xl hover-lift"
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user