Implemented phase 4 for the POC prototype in the Website service.

Services/Website/Sources/Library/Internal/Pages/GradingGuidePage.swift

@@ -0,0 +1,159 @@
+import Elementary
+import Foundation
+import Infrastructure
+
+/// The public grading guide: the scale raw books are graded on, reference grades, and the defect checklist every listing answers.
+struct GradingGuidePage {
+
+    // MARK: Properties
+
+    let analytics: Analytics?
+    let assetVersion: String?
+    let locale: Locale
+
+    /// The signed-in viewer, or `nil` when signed out.
+    let viewer: Viewer?
+
+    // MARK: Initializers
+
+    /// Creates the grading guide.
+    /// - Parameters:
+    ///   - viewer: the signed-in viewer, or `nil` (the default) when signed out.
+    ///   - assetVersion: the version token appended to the page's asset URLs, or `nil` (the default) to leave them unversioned.
+    ///   - analytics: the analytics tracker embedded in the document head, or `nil` (the default) to omit it.
+    init(
+        viewer: Viewer? = nil,
+        assetVersion: String? = nil,
+        analytics: Analytics? = nil
+    ) {
+        self.analytics = analytics
+        self.assetVersion = assetVersion
+        self.locale = .init(identifier: "en")
+        self.viewer = viewer
+    }
+
+}
+
+// MARK: - Page
+
+extension GradingGuidePage: Page {
+
+    // MARK: Constants
+
+    /// The path the page is served at.
+    static let path = String.Route.gradingGuide
+
+    // MARK: Computed
+
+    var content: some HTML {
+        SiteLayout(viewer: viewer) {
+            div(.class("page guide")) {
+                div(.class("guide__head")) {
+                    p(.class("type-eyebrow")) {
+                        "CCN grading guide · public"
+                    }
+                    h1(.class("type-h1")) {
+                        "How CCN sellers grade raw books"
+                    }
+                    p(.class("type-lead")) {
+                        "Slabbed books carry the grader's number and a cert you can verify. Raw books are graded by the seller against this scale, and every defect on the checklist below must be declared. A declared defect is never grounds for a dispute; an undeclared one always is."
+                    }
+                }
+                ol(
+                    .class("guide__scale"),
+                    .custom(name: "aria-label", value: "The grading scale, best first")
+                ) {
+                    ForEach(Grading.scale) { step in
+                        li(.class("guide__grade")) {
+                            strong {
+                                step.grade.gradeLabel
+                            }
+                            span {
+                                step.code
+                            }
+                        }
+                    }
+                }
+                section(.class("guide__section")) {
+                    h2(.class("type-h2")) {
+                        "Reference grades"
+                    }
+                    ul(.class("guide__references")) {
+                        ForEach(Grading.references) { reference in
+                            li(.class("card guide__reference")) {
+                                div(.class("guide__reference-grade")) {
+                                    span(.class("type-stat")) {
+                                        reference.grade.gradeLabel
+                                    }
+                                    span(.class("type-label")) {
+                                        reference.name
+                                    }
+                                }
+                                // The design leaves the example photos as placeholders; so does the prototype.
+                                div(
+                                    .class("guide__photo"),
+                                    .custom(name: "aria-hidden", value: "true")
+                                ) {
+                                    "Photo: \(reference.grade.gradeLabel) example"
+                                }
+                                div {
+                                    h3(.class("type-eyebrow guide__allowed")) {
+                                        "Allowed"
+                                    }
+                                    p(.class("type-body-sm")) {
+                                        reference.allowed
+                                    }
+                                }
+                                div {
+                                    h3(.class("type-eyebrow guide__excluded")) {
+                                        "Not at this grade"
+                                    }
+                                    p(.class("type-body-sm")) {
+                                        reference.excluded
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                section(.class("guide__section")) {
+                    h2(.class("type-h2")) {
+                        "The defect checklist, defined"
+                    }
+                    p(.class("type-body-sm guide__intro")) {
+                        "These are the eight boxes on every listing form. Tick everything that applies and say where it is; the photos should show it."
+                    }
+                    dl(.class("guide__defects")) {
+                        ForEach(Grading.Defect.allCases) { defect in
+                            div(.class("card guide__defect")) {
+                                dt(.class("type-label")) {
+                                    defect.label
+                                }
+                                dd(.class("type-caption")) {
+                                    defect.definition
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    var scripts: [any Asset] {
+        [StaticFile.shared]
+    }
+
+    var stylesheets: [any Asset] {
+        [StaticFile.shared, StaticFile.guide]
+    }
+
+    var summary: String? {
+        "The scale CCN sellers grade raw comics on, with reference grades and the defect checklist every listing declares."
+    }
+
+    var title: String {
+        "Grading guide — CCN"
+    }
+
+}