Tier 5 refactor: molecule extraction, browser tests, project sub-nav

.github/workflows/ci.yaml

@@ -114,6 +114,34 @@ jobs:
       - name: Run cargo test
         run: cargo test --all-targets --no-fail-fast
 
+  wasm-test:
+    name: wasm-pack test (headless Firefox)
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install nightly Rust
+        uses: dtolnay/rust-toolchain@nightly
+        with:
+          targets: wasm32-unknown-unknown
+
+      - name: Cache cargo registry and target
+        uses: Swatinem/rust-cache@v2
+        with:
+          key: wasm-test
+
+      - name: Install wasm-pack
+        # wasm-pack ships pre-built binaries; the official installer is the
+        # fastest path on Linux runners (cargo install would compile from
+        # source for several minutes).
+        run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+
+      - name: Run browser tests
+        # ubuntu-latest already ships Firefox; geckodriver is auto-fetched
+        # by wasm-pack in a version that matches the installed browser.
+        run: wasm-pack test --headless --firefox --test wasm
+
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 15

Cargo.toml

@@ -12,7 +12,13 @@ wasm-bindgen = "0.2.100"
 web-sys = { version = "0.3.77", features = ["Document", "Window", "console"] }
 
 [dev-dependencies]
+js-sys = "0.3"
 serde_json = "1"
+wasm-bindgen-futures = "0.4"
+wasm-bindgen-test = "0.3"
 
 [package.metadata.leptos]
-assets-dir="public"
+assets-dir="public"
+
+[profile.release]
+strip = true

index.html

@@ -15,7 +15,20 @@
     <script defer src="https://d3js.org/d3.v7.min.js"></script>
     <script defer src="/repo_graph.js"></script>
 
-    <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
+    <!--
+      `data-wasm-opt-params` forwards extra flags to wasm-opt. The bundled
+      wasm-opt v123 has bulk-memory disabled by default, but rustc 1.82+
+      emits `memory.copy` instructions, which fail validation. The two
+      `--enable-*` flags below match the features the rustc target enables.
+    -->
+    <link
+      data-trunk
+      rel="rust"
+      data-wasm-opt="z"
+      data-wasm-opt-params="--enable-bulk-memory --enable-nontrapping-float-to-int"
+      data-keep-debug="false"
+      data-weak-refs
+    />
     <link rel="icon" href="images/odpicon.ico" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;600&display=swap" rel="stylesheet">
   </head>

src/components/documentation_training.rs

@@ -1,7 +1,5 @@
-use crate::components::themed_icon::ThemedIcon;
-use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use crate::components::ui::{DocLinkItem, Heading, HeadingLevel, IconBlock, IconBlockSize, Text, TextSize};
 use leptos::prelude::*;
-use leptos_router::components::A;
 
 #[derive(Clone)]
 pub struct DocLink {
@@ -46,48 +44,22 @@ pub const DEFAULT_DOC_LINKS: &[DocLink] = &[
 pub fn DocumentationTraining(#[prop(default = DEFAULT_DOC_LINKS.to_vec())] links: Vec<DocLink>) -> impl IntoView {
     view! {
         <section class="flex flex-col md:flex-row items-start background_primary w-full overflow-x-hidden px-4 py-8 md:py-16 md:px-16 lg:px-32">
-            <div class="flex flex-col items-start w-full">
-                <ThemedIcon
-                    name="documentation"
-                    alt="Documentation Icon"
-                    class="w-[80px] h-[80px] md:w-[150px] md:h-[150px] object-contain mb-4 block"
-                />
+            <IconBlock name="documentation" alt="Documentation Icon" size=IconBlockSize::Hero>
                 <Heading level=HeadingLevel::H2 class="text-left break-words">
                     "Documentation"
                 </Heading>
                 <div class="h-2.5"></div>
                 <Text size=TextSize::Lead class="text-left break-words">
                     "Start developing with ODP"
                 </Text>
-            </div>
+            </IconBlock>
             <div class="hidden md:block w-[200px]"></div>
             <ul class="flex flex-col pt-4 w-full max-w-full break-words md:pt-4 md:w-[760px] md:max-w-[760px]">
                 {links
                     .into_iter()
                     .map(|link| {
                         view! {
-                            <li>
-                                <Show
-                                    when=move || link.external
-                                    fallback=move || {
-                                        view! {
-                                            <div class="link_mobile md:link_large internal-link no-underline">
-                                                <A href=link.href>
-                                                    <span class="no-underline">{"→ "}</span>
-                                                    <span class="underline">{link.title}</span>
-                                                </A>
-                                            </div>
-                                        }
-                                    }
-                                >
-                                    <div class="link_mobile md:link_large external-link no-underline">
-                                        <a href=link.href target="_blank" class="no-underline">
-                                            <span class="no-underline">{"→ "}</span>
-                                            <span class="underline">{link.title}</span>
-                                        </a>
-                                    </div>
-                                </Show>
-                            </li>
+                            <DocLinkItem href=link.href title=link.title external=link.external />
                         }
                     })
                     .collect_view()}

src/components/landing/closing_columns_section.rs

@@ -0,0 +1,32 @@
+//! Landing page section: closing two-column "Partner-Oriented Vision"
+//! / "Get Involved!" block.
+
+use crate::components::section::Section;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use leptos::prelude::*;
+
+#[component]
+pub fn ClosingColumnsSection() -> impl IntoView {
+    view! {
+        <Section class="py-20">
+            <div class="flex flex-col md:flex-row gap-16">
+                <div class="flex flex-col items-start flex-1">
+                    <Heading level=HeadingLevel::H3 class="text-left">
+                        {"Partner-Oriented Vision"}
+                    </Heading>
+                    <Text size=TextSize::Large class="text-left">
+                        {"ODP is an inclusive partnership open to OEMs, ODMs, silicon vendors, hardware developers, security researchers, and anyone committed to improving device software foundations."}
+                    </Text>
+                </div>
+                <div class="flex flex-col items-start flex-1">
+                    <Heading level=HeadingLevel::H3 class="text-left">
+                        {"Get Involved!"}
+                    </Heading>
+                    <Text size=TextSize::Large class="text-left">
+                        {"Explore our documentation, clone our public repositories, and contribute your expertise. Together, we can raise the standard for trusted devices."}
+                    </Text>
+                </div>
+            </div>
+        </Section>
+    }
+}

src/components/landing/hero_section.rs

@@ -0,0 +1,28 @@
+//! Landing page section: hero introduction.
+
+use crate::components::section::Section;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use leptos::prelude::*;
+
+#[component]
+pub fn HeroSection() -> impl IntoView {
+    view! {
+        <Section>
+            <div class="flex flex-col md:flex-row gap-20 items-start">
+                <div class="flex flex-col items-start min-w-0 w-full md:flex-1">
+                    <Heading level=HeadingLevel::H1 class="break-words w-full text-left">
+                        {"An Open Collaboration for Secure, Modern Devices"}
+                    </Heading>
+                </div>
+                <div class="flex flex-col items-start min-w-0 w-full md:flex-1">
+                    <Text size=TextSize::Lead class="break-words w-full text-left">
+                        {"The Open Device Partnership (ODP) is a global initiative to make it easier for developers and device makers to build secure, efficient, and reliable client devices for cross-platform needs and certified environments."}
+                        <br />
+                        <br />
+                        {"By combining open standards with collaborative development practices, ODP reduces complexity, improves security, and accelerates innovation across diverse silicon and hardware platforms."}
+                    </Text>
+                </div>
+            </div>
+        </Section>
+    }
+}

src/components/landing/mod.rs

@@ -0,0 +1,16 @@
+//! Per-section components for the landing page (`/`).
+//!
+//! [`crate::components::landing_page::LandingPage`] composes these
+//! sections in order. Each lives in its own file so the landing
+//! shell stays a flat, readable list of `<...Section />` calls
+//! instead of a 100-line view block.
+
+mod closing_columns_section;
+mod hero_section;
+mod projects_section;
+mod value_proposition_section;
+
+pub use closing_columns_section::ClosingColumnsSection;
+pub use hero_section::HeroSection;
+pub use projects_section::ProjectsSection;
+pub use value_proposition_section::ValuePropositionSection;

src/components/landing/projects_section.rs

@@ -0,0 +1,44 @@
+//! Landing page section: "ODP Projects" intro paragraph + the three
+//! project image-button tiles.
+
+use crate::components::image_button::ImageButton;
+use crate::components::section::Section;
+use crate::components::ui::{Heading, HeadingLevel, Text, TextSize};
+use leptos::prelude::*;
+
+#[component]
+pub fn ProjectsSection() -> impl IntoView {
+    view! {
+        <Section class="py-32">
+            <div style="max-width: 960px;">
+                <Heading level=HeadingLevel::H2 class="text-left">
+                    {"ODP Projects"}
+                </Heading>
+                <Text size=TextSize::Large class="text-left max-w-full">
+                    {"While ODP's first projects focus on boot firmware and embedded controller software, the partnership welcomes new ideas aligned with our core goals: security, efficiency, and broad reusability."}
+                    <br />
+                    <br />
+                </Text>
+            </div>
+        </Section>
+        <Section class="pb-32">
+            <div class="flex flex-col md:flex-row gap-16 justify-start">
+                <ImageButton
+                    href="/boot-firmware"
+                    img_src="/images/patina.png"
+                    alt="Boot Firmware"
+                />
+                <ImageButton
+                    href="/embedded-controller"
+                    img_src="/images/ec.png"
+                    alt="Embedded Controller"
+                />
+                <ImageButton
+                    href="/windows-ec-services"
+                    img_src="/images/ec_services.png"
+                    alt="EC Services"
+                />
+            </div>
+        </Section>
+    }
+}