diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx index 3692642b7..e9089dcdf 100644 --- a/src/components/Community/index.tsx +++ b/src/components/Community/index.tsx @@ -109,6 +109,36 @@ export default function Community(): JSX.Element { + + + + + + + + } + name="Organization and Roles" + > + <> + Learn how the LF community is organized and how work gets done.{" "} + + View Organization and Roles. + + + {/* Tweak X white logo so that its background is always black and it's smaller and centred. */} {/* TODO: Reddit is not active. ( + + + +); + +const InfrastructureIcon = () => ( + + + + + + + + + + + + +); + +const OutreachIcon = () => ( + + + + + + +); + +export default function OrganizationAndRoles(): JSX.Element { + return ( + + {/* Hero Section */} +
+
+ + Organization and Roles + +

+ How the Lingua Franca community and its open-source ecosystem (OSE) are organized and + how work gets done. +

+
+
+ +
+ {/* Project Structure */} +
+ + Project Structure + +

+ The LF OSE has two core teams that collaborate closely with project + leads: +

+
+
+
+ +
+ Infrastructure & Platform Team +
+

+ Technical foundation, security, and platform expansion +

+
+
+
+
+ +
+ Outreach and Onboarding Team +
+

+ Ecosystem growth, documentation, and community support +

+
+
+
+
+ + {/* Infrastructure & Platform Team */} +
+
+ + Infrastructure & Platform Team + + +
+
+ + What This Team Does + +

This team maintains the technical foundation of Lingua Franca:

+
    +
  • CI/CD systems
  • +
  • Compilation and testing infrastructure
  • +
  • Repository security
  • +
  • Code quality standards
  • +
  • Platform support and expansion
  • +
  • Virtual and simulated hardware environments
  • +
+

+ In short, this team keeps LF stable, secure, and evolving + responsibly. +

+
+
+ +
+
+ + Code Review Philosophy + +

We value thoughtful and careful reviews. Reviews should:

+
    +
  • Check for correctness
  • +
  • Identify potential security issues
  • +
  • Ensure architectural consistency
  • +
  • Protect long-term maintainability
  • +
  • Confirm documentation and testing
  • +
+
+ Reviews should be thorough enough that merging a pull request + does not make anyone nervous. +
+

+ Trusted members have merge access and exercise careful + technical judgment. +

+
+
+ +
+
+ + Platforms and Hardware + +

+ The team supports and expands LF across heterogeneous + platforms: +

+
    +
  • Automotive · Robotics · IoT
  • +
  • Industrial CPS · Power and energy · Social infrastructure
  • +
+

+ We balance expansion with maintainability. Virtual hardware + environments support reproducible testing, education, and + research. +

+
+
+
+
+ + {/* Outreach and Onboarding Team */} +
+
+ + Outreach and Onboarding Team + + +
+
+ + What This Team Does + +

This team helps grow and support the LF ecosystem:

+
    +
  • Onboarding new contributors
  • +
  • Maintaining documentation
  • +
  • Developing tutorials
  • +
  • Supporting educators
  • +
  • Engaging with industry and research users
  • +
+

+ They work closely with the Infrastructure & Platform Team + to keep docs and tutorials aligned with the project. +

+
+
+ +
+
+ + Community Support + +
    +
  • Organizes tutorials and Q&A sessions
  • +
  • Supports students and first-time contributors
  • +
  • Engages stakeholders across academia, industry, and public sectors
  • +
  • Helps organize bootcamps and educational activities
  • +
+
+
+
+
+ + {/* Working Together */} +
+
+ + Working Together + +
+
    +
  • Technical decisions are discussed openly.
  • +
  • Significant changes are reviewed carefully.
  • +
  • Teams coordinate when changes affect both infrastructure and users.
  • +
  • Project leads help resolve disagreements when needed.
  • +
+

+ We aim for consensus and transparency rather than formal process. +

+
+
+
+ + {/* Code of Conduct & Licensing - Two columns */} +
+
+
+
+ + Code of Conduct + +
+

We maintain a respectful and inclusive community.

+

+ Guidelines apply to contributors, forums, Zulip, workshops, + and events — following best practices from established + open-source communities. +

+
+
+
+ + Licensing + +
+

BSD-2, BSD-3, MIT, GPL, ISC. + Most core components use BSD for broad adoption, including commercial use. + Contributions follow each repository's license.

+
+
+
+
+
+ + {/* Guiding Principles */} +
+
+ + Guiding Principles + +
+
+ + Keep the bar high for technical quality. +
+
+ + Keep the process lightweight. +
+
+ + Favor transparency over formality. +
+
+ + Support research-to-production translation. +
+
+ + Build a sustainable, welcoming ecosystem. +
+
+
+
+ +

+ This document will evolve as the project grows. +

+
+
+ ); +} diff --git a/src/pages/community/organization.module.css b/src/pages/community/organization.module.css new file mode 100644 index 000000000..303955672 --- /dev/null +++ b/src/pages/community/organization.module.css @@ -0,0 +1,175 @@ +/** + * Organization and Roles page styles + */ + +.heroSection { + background: linear-gradient(135deg, var(--ifm-color-primary-darker) 0%, var(--ifm-color-primary) 100%); + color: white; + padding: 60px 0; + text-align: center; +} + +[data-theme="dark"] .heroSection { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); +} + +.heroTitle { + color: white; + margin-bottom: 16px; +} + +.heroSubtitle { + opacity: 0.95; + max-width: 680px; + margin: 0 auto 8px; + font-size: 1.15rem; + line-height: 1.6; +} + +.heroTagline { + opacity: 0.9; + font-size: 1rem; +} + +.teamCard { + border-left: 4px solid var(--ifm-color-primary); + transition: transform 0.2s ease, box-shadow 0.2s ease; + margin-bottom: 24px; +} + +.teamCard:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} + +[data-theme="dark"] .teamCard:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.sectionCard { + background: var(--ifm-background-surface-color); + border-radius: 8px; + padding: 24px; + margin-bottom: 24px; + border: 1px solid var(--ifm-color-emphasis-200); +} + +.reviewQuote { + border-left: 4px solid var(--ifm-color-primary); + background: var(--ifm-color-emphasis-100); + padding: 16px 20px; + border-radius: 0 8px 8px 0; + font-style: italic; + margin: 20px 0; +} + +.guidingPrinciples { + display: grid; + gap: 12px; + margin-top: 16px; +} + +.principleItem { + display: flex; + align-items: flex-start; + gap: 12px; + padding: 12px 16px; + background: var(--ifm-color-emphasis-100); + border-radius: 8px; + border-left: 3px solid var(--ifm-color-primary); +} + +.principleIcon { + flex-shrink: 0; + width: 24px; + height: 24px; + color: var(--ifm-color-primary); +} + +.footerNote { + text-align: center; + padding: 24px; + font-size: 0.95rem; + color: var(--ifm-color-emphasis-600); +} + +/* Project Structure section - bigger fonts and highlights */ +.projectStructureTitle { + font-size: 2rem; +} + +@media (min-width: 768px) { + .projectStructureTitle { + font-size: 2.25rem; + } +} + +.projectStructureIntro { + font-size: 1.15rem; + line-height: 1.6; +} + +@media (min-width: 768px) { + .projectStructureIntro { + font-size: 1.25rem; + } +} + +.teamHighlightCard { + border: 2px solid var(--ifm-color-primary); + background: linear-gradient(135deg, var(--ifm-color-emphasis-100) 0%, var(--ifm-background-surface-color) 100%); + text-align: center; + height: 100%; + padding: 28px 24px; + border-radius: 12px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.teamHighlightCard:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); +} + +[data-theme="dark"] .teamHighlightCard { + background: linear-gradient(135deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-background-surface-color) 100%); +} + +[data-theme="dark"] .teamHighlightCard:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); +} + +.teamIcon { + width: 48px; + height: 48px; + color: var(--ifm-color-primary); + margin-bottom: 16px; + display: block; + margin-left: auto; + margin-right: auto; +} + +.teamHighlightName { + font-size: 1.35rem; + font-weight: 700; + color: var(--ifm-color-primary); + margin-bottom: 12px; + line-height: 1.3; +} + +@media (min-width: 768px) { + .teamHighlightName { + font-size: 1.5rem; + } +} + +.teamHighlightDesc { + font-size: 1.05rem; + line-height: 1.5; + margin-bottom: 0; +} + +@media (min-width: 768px) { + .teamHighlightDesc { + font-size: 1.1rem; + } +}