src/pages/projects/this_website.rs

use leptos::*;
use leptos_meta::{Meta, Title};

use super::data::ALL_PROJECTS;

#[component]
pub fn ThisWebsite() -> impl IntoView {
    let project = ALL_PROJECTS
        .iter()
        .find(|p| p.slug == "this-website")
        .unwrap();
    let skills_view = project
        .skills
        .iter()
        .map(|&s| view! { <li>{s}</li> })
        .collect::<Vec<_>>();

    view! {
        <Title text="This Website – Peter Pinto"/>
        <Meta name="description" content="How this website is built: full-stack Rust with Leptos, Axum SSR, WASM hydration, and a view-source mode baked in."/>
        <div class="page">
            <span class="eyebrow">"Projects"</span>
            <h1>"This " <em style="font-style:italic; color: var(--accent)">"Website"</em></h1>
            <p class="lead">
                "A full-stack Rust application with server-side rendering, WASM hydration,
                and a view-source mode built in from the start."
            </p>

            <ul class="skills-list" style="margin-top: 1.5rem;">
                {skills_view}
            </ul>

            <hr class="divider"/>

            // ── Architecture ─────────────────────────────────────
            <section class="project-section">
                <span class="eyebrow">"Architecture"</span>
                <h2>"Full-stack Rust"</h2>
                <p>
                    "The site is built with "
                    <a href="https://leptos.dev" target="_blank" rel="noopener noreferrer" class="prose-link">"Leptos 0.6"</a>
                    ", a fine-grained reactive framework for Rust. Axum handles HTTP on the server via "
                    <code class="inline-code">"leptos_axum"</code>
                    ", which renders each route to HTML on request. The same component tree is then
                    shipped as a WASM bundle that hydrates the page on the client, enabling SPA-style
                    navigation without a full reload."
                </p>
                <p style="margin-top: 1rem;">
                    "Server functions (like the contact-form email sender) are declared with "
                    <code class="inline-code">"#[server]"</code>
                    " and compiled only into the server binary — the client sees a typed async
                    function that makes an HTTP POST behind the scenes."
                </p>
            </section>

            <hr class="divider"/>

            // ── View Source ───────────────────────────────────────
            <section class="project-section">
                <span class="eyebrow">"Feature"</span>
                <h2>"View Source Mode"</h2>
                <p>
                    "Every page exposes a "
                    <code class="inline-code">"?source=1"</code>
                    " query parameter. When active, the router renders the raw Rust source of the
                    current page instead of the page itself — embedded at compile time via "
                    <code class="inline-code">"include_str!()"</code>
                    ". No round-trips, no GitHub links, just the code that generated what you were
                    just looking at."
                </p>
            </section>

            <hr class="divider"/>

            // ── Build ─────────────────────────────────────────────
            <section class="project-section">
                <span class="eyebrow">"Build"</span>
                <h2>"cargo-leptos"</h2>
                <p>
                    <a href="https://github.com/leptos-rs/cargo-leptos" target="_blank" rel="noopener noreferrer" class="prose-link">"cargo-leptos"</a>
                    " orchestrates the dual compilation: an SSR server binary (native target) and a
                    WASM client bundle, built in parallel. The release profile uses "
                    <code class="inline-code">"opt-level = \"z\""</code>
                    " and LTO to minimise binary size."
                </p>
                <div class="code-block" style="margin-top: 1.25rem;">
                    <pre><code>"cargo leptos build --release"</code></pre>
                </div>
            </section>

            <hr class="divider"/>

            // ── CI ────────────────────────────────────────────────
            <section class="project-section">
                <span class="eyebrow">"CI / CD"</span>
                <h2>"Pipeline"</h2>
                <p>
                    "The project is hosted on a local Gitea instance. The project is simple,
                    so the infrastructure is too — on push to "
                    <code class="inline-code">"master"</code>
                    ", the pipeline:"
                </p>
                <ol class="project-steps">
                    <li>"systemd timer monitors the gitea repository for new commits on the production branch"</li>
                    <li>"Builds the new commits with " <code class="inline-code">"cargo leptos build --release"</code></li>
                    <li>"Triggers a redeploy on the server"</li>
                </ol>
            </section>

            <hr class="divider"/>

            // ── Styling ───────────────────────────────────────────
            <section class="project-section">
                <span class="eyebrow">"Styling"</span>
                <h2>"Pure CSS"</h2>
                <p>
                    "No CSS framework. A single "
                    <code class="inline-code">"style.css"</code>
                    " file using custom properties for the colour palette (dark background, warm-gold
                    accent), IBM Plex Sans & Mono for body and code, and Playfair Display for headings.
                    Animations are CSS keyframes only."
                </p>
            </section>
        </div>
    }
}