microsoft/hve-core
Publicmirrored from https://github.com/microsoft/hve-coreAvailable
docs/docusaurus/src/pages/index.tsx
76lines · modecode
| 1 | import React from 'react'; |
| 2 | import Layout from '@theme/Layout'; |
| 3 | import Mermaid from '@theme/Mermaid'; |
| 4 | import HeroSection from '../components/HeroSection'; |
| 5 | import { IconCard, BoxCard, CardGrid } from '../components/Cards'; |
| 6 | import CollectionCard from '../components/CollectionCards'; |
| 7 | import { iconCards, boxCards } from '../data/hubCards'; |
| 8 | import { collectionCards, metaCollections, type CollectionCardData, type MetaCollections } from '../data/collectionCards'; |
| 9 | import styles from './styles.module.css'; |
| 10 | |
| 11 | export function buildCollectionDiagram( |
| 12 | cards: CollectionCardData[], |
| 13 | meta: MetaCollections, |
| 14 | ): string { |
| 15 | const lines = ['graph TD']; |
| 16 | lines.push(` HCA["hve-core-all<br/>(${meta['hve-core-all']} artifacts)"]`); |
| 17 | for (const card of cards) { |
| 18 | const id = card.name.replace(/-/g, '_'); |
| 19 | lines.push(` ${id}["${card.name}"]`); |
| 20 | } |
| 21 | for (const card of cards) { |
| 22 | const id = card.name.replace(/-/g, '_'); |
| 23 | lines.push(` HCA --> ${id}`); |
| 24 | } |
| 25 | return lines.join('\n'); |
| 26 | } |
| 27 | |
| 28 | const collectionDiagram = buildCollectionDiagram(collectionCards, metaCollections); |
| 29 | |
| 30 | export default function Home(): React.ReactElement { |
| 31 | return ( |
| 32 | <Layout title="HVE Core" description="AI-Driven Software Development Across the Full Lifecycle"> |
| 33 | <HeroSection |
| 34 | title="HVE Core" |
| 35 | subtitle="AI-Driven Software Development Across the Full Lifecycle" |
| 36 | /> |
| 37 | |
| 38 | <main> |
| 39 | <section className={styles.sectionCompact}> |
| 40 | <CardGrid> |
| 41 | {iconCards.map((card) => ( |
| 42 | <IconCard key={card.href} icon={card.icon} supertitle={card.supertitle} title={card.title} href={card.href} /> |
| 43 | ))} |
| 44 | </CardGrid> |
| 45 | </section> |
| 46 | |
| 47 | <section className={styles.section}> |
| 48 | <h2 className={styles.sectionTitle}>Deep dive</h2> |
| 49 | <p className={styles.sectionSubtitle}> |
| 50 | Explore best practices and patterns for AI-assisted development. |
| 51 | </p> |
| 52 | <CardGrid columns={4}> |
| 53 | {boxCards.map((card) => ( |
| 54 | <BoxCard key={card.title} {...card} /> |
| 55 | ))} |
| 56 | </CardGrid> |
| 57 | </section> |
| 58 | |
| 59 | <section className={styles.section}> |
| 60 | <h2 className={styles.sectionTitle}>Collections</h2> |
| 61 | <p className={styles.sectionSubtitle}> |
| 62 | Browse domain-specific artifact bundles. |
| 63 | </p> |
| 64 | <CardGrid> |
| 65 | {collectionCards.map((card) => ( |
| 66 | <CollectionCard key={card.name} {...card} /> |
| 67 | ))} |
| 68 | </CardGrid> |
| 69 | <div className={styles.diagramContainer}> |
| 70 | <Mermaid value={collectionDiagram} /> |
| 71 | </div> |
| 72 | </section> |
| 73 | </main> |
| 74 | </Layout> |
| 75 | ); |
| 76 | } |
| 77 | |