feat(website): ✨ added comparisons page (#56)

* feat(website): ✨ added comparisons page

* feat(website): ✨ comparisons now stored in json files

Contributing to this is also documented.

bonnie.toml

@@ -36,7 +36,7 @@ site.subcommands.export.cmd = [
     "bonnie copy-subcrates",
     "cd packages/perseus-cli",
     # Point this live version of the CLI at the given example
-    "find ../../website/website -not -path \"./.perseus/*\" -not -path \"./target/*\" | entr -s \"TEST_EXAMPLE=../../website/website cargo run -- export\""
+    "find ../../website/website -not -path \"../../website/website/.perseus/*\" -not -path \"../../website/website/target/*\" | entr -s \"TEST_EXAMPLE=../../website/website cargo run -- export\""
 ]
 site.subcommands.export.desc = "exports the site, watching for changes"
 site.subcommands.serve.cmd = [

packages/perseus/src/serve.rs

@@ -260,7 +260,6 @@ pub async fn get_page_for_template(
     // Handle build state (which might use revalidation or incremental)
     if template.uses_build_state() || template.is_basic() {
         // If the template uses incremental generation, that is its own contained process
-        // TODO separate out build paths pages, which are in the immutable store
         if template.uses_incremental() && was_incremental_match {
             // This template uses incremental generation, and this page was built and cached at runtime in the mutable store
             // Get the cached content if it exists (otherwise `None`)

website/website/README.md

@@ -1,11 +1,31 @@
 # Website
 
-> Note: the website is still under active development, and has not yet been deployed
-
 This directory contains the website for Perseus, which is hosted at <https://arctic-hen7.github.io/perseus>!
 
-TODO
-
 ## Why is this in `website/website`?
 
 So that using the local version of Perseus rather than the most recently published release works without any further changes. In development, this is designed to work for the `examples/` directory, using `../../` to access `packages`. We mimic the same file structure here.
+
+## Comparisons
+
+The website includes a [comparisons page](https://arctic-hen7.github.io/perseus/comparisons), which compares Perseus to a number of other frameworks. Of course, there are _a lot_ of frameworks out there, so we highly encourage contributions to this! It's designed to be quite easy to contribute to, just add a new file called `website/website/comparisons/framework.json` (substituting `framework` for the name of the framework) and fill in the following framework details:
+
+-   `name`: `String`,
+-   `supports_ssg`: `"full"`/`"partial"`/`"none"`,
+-   `supports_ssr`: `"full"`/`"partial"`/`"none"`,
+-   `supports_ssr_ssg_same_page`: `"full"`/`"partial"`/`"none"`,
+-   `supports_i18n`: `"full"`/`"partial"`/`"none"`,
+-   `supports_incremental`: `"full"`/`"partial"`/`"none"`,
+-   `supports_revalidation`: `"full"`/`"partial"`/`"none"`,
+-   `inbuilt_cli`: `"full"`/`"partial"`/`"none"`,
+-   `inbuilt_routing`: `"full"`/`"partial"`/`"none"`,
+-   `supports_shell`: `"full"`/`"partial"`/`"none"`,
+-   `supports_deployment`: `"full"`/`"partial"`/`"none"`,
+-   `supports_exporting`: `"full"`/`"partial"`/`"none"`,
+-   `language`: `String`,
+-   `homepage_lighthouse_desktop`: `u8`,
+-   `homepage_lighthouse_mobile`: `u8`
+
+### Lighthouse Scores
+
+For consistency, we generate all Lighthouse scores through [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights). As this metric can vary slightly between machines and runs, it's advised to run it more than once and take an average (rounding up). Maintainers will check these themselves, and if there's any major discrepancy (>5 points), you may be asked to provide a screenshot from your system. Maintainers reserve the right to determine the final verdict on which score to use in the event of a conflict.

website/website/comparisons/gatsby.json

@@ -0,0 +1,17 @@
+{
+    "name": "GatsbyJS",
+    "supports_ssg": "full",
+    "supports_ssr": "none",
+    "supports_ssr_ssg_same_page": "none",
+    "supports_i18n": "partial",
+    "supports_incremental": "none",
+    "supports_revalidation": "none",
+    "inbuilt_cli": "full",
+    "inbuilt_routing": "full",
+    "supports_shell": "full",
+    "supports_deployment": "full",
+    "supports_exporting": "full",
+    "language": "JavaScript/TypeScript",
+    "homepage_lighthouse_desktop": 75,
+    "homepage_lighthouse_mobile": 45
+}

website/website/comparisons/nextjs.json

@@ -0,0 +1,17 @@
+{
+    "name": "NextJS",
+    "supports_ssg": "full",
+    "supports_ssr": "full",
+    "supports_ssr_ssg_same_page": "none",
+    "supports_i18n": "partial",
+    "supports_incremental": "full",
+    "supports_revalidation": "full",
+    "inbuilt_cli": "full",
+    "inbuilt_routing": "full",
+    "supports_shell": "full",
+    "supports_deployment": "full",
+    "supports_exporting": "full",
+    "language": "JavaScript/TypeScript",
+    "homepage_lighthouse_desktop": 100,
+    "homepage_lighthouse_mobile": 72
+}

website/website/comparisons/perseus.json

@@ -0,0 +1,17 @@
+{
+    "name": "Perseus",
+    "supports_ssg": "full",
+    "supports_ssr": "full",
+    "supports_ssr_ssg_same_page": "full",
+    "supports_i18n": "full",
+    "supports_incremental": "full",
+    "supports_revalidation": "full",
+    "inbuilt_cli": "full",
+    "inbuilt_routing": "full",
+    "supports_shell": "full",
+    "supports_deployment": "full",
+    "supports_exporting": "full",
+    "language": "Rust",
+    "homepage_lighthouse_desktop": 100,
+    "homepage_lighthouse_mobile": 95
+}

website/website/src/components/comparisons.rs

@@ -1,6 +1,11 @@
+use perseus::GenericNode;
+use serde::{Deserialize, Serialize};
+use sycamore::prelude::template;
+use sycamore::prelude::Template as SycamoreTemplate;
+
 /// A comparison for the comparisons table. Perseus itself also has an entry here. Note that any changes to the properties measured here
 /// must also be reflected in the rendering code, which generates a title row independently.
-#[derive(Clone, Debug)]
+#[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct Comparison {
     // We deliberately preserve order so that Perseus always comes first
     // That allows us to scroll though the others and keep the first two columns constantly there
@@ -17,10 +22,14 @@ pub struct Comparison {
     pub supports_deployment: FeatureSupport,
     pub supports_exporting: FeatureSupport,
     pub language: String,
+    // Ours are 100 and 95, respectively
+    pub homepage_lighthouse_desktop: u8,
+    pub homepage_lighthouse_mobile: u8,
 }
 
 /// The different levels of support for a feature.
-#[derive(Clone, Debug)]
+#[derive(Clone, Debug, Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
 pub enum FeatureSupport {
     Full,
     Partial,
@@ -36,24 +45,29 @@ impl FeatureSupport {
     }
 }
 
-/// Returns all the current comparisons to Perseus for display in a table
-pub fn get_comparisons() -> Vec<Comparison> {
-    vec![
-        Comparison {
-            name: "NextJS".to_string(),
-            supports_ssg: FeatureSupport::Full,
-            supports_ssr: FeatureSupport::Full,
-            supports_ssr_ssg_same_page: FeatureSupport::None,
-            supports_i18n: FeatureSupport::Full,
-            supports_incremental: FeatureSupport::Full,
-            supports_revalidation: FeatureSupport::Full,
-            inbuilt_cli: FeatureSupport::Full,
-            inbuilt_routing: FeatureSupport::Full,
-            supports_shell: FeatureSupport::Full,
-            supports_deployment: FeatureSupport::Full,
-            supports_exporting: FeatureSupport::Full,
-            language: "JavaScript/TypeScript".to_string(),
-        },
-        // TODO
-    ]
+/// Renders a Lighthouse score to have a text color. If it's 100, then we use the appropriate emoji.
+pub fn render_lighthouse_score<G: GenericNode>(score: u8) -> SycamoreTemplate<G> {
+    if score == 100 {
+        template! {
+            "💯"
+        }
+    } else if score >= 90 {
+        template! {
+            span(class = "text-green-500") {
+                (score)
+            }
+        }
+    } else if score >= 50 {
+        template! {
+            span(class = "text-amber-500") {
+                (score)
+            }
+        }
+    } else {
+        template! {
+            span(class = "text-red-500") {
+                (score)
+            }
+        }
+    }
 }

website/website/src/components/container.rs

@@ -7,7 +7,6 @@ pub static COPYRIGHT_YEARS: &str = "2021";
 #[component(NavLinks<G>)]
 pub fn nav_links() -> SycamoreTemplate<G> {
     template! {
-        // TODO fix overly left alignment here on mobile
         li(class = "m-3 p-1") {
             a(href = link!("/docs"), class = "px-2") { (t!("navlinks-docs")) }
         }

website/website/src/components/github_svg.rs

@@ -1,2 +1 @@
 pub static GITHUB_SVG: &str = r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" fill="none" height="16" width="16"><g clip-path="url(githublogo)" class="jsx-120409797"><path fill="currentColor" fill-rule="evenodd" d="M8.18391.249268C3.82241.249268.253906 3.81777.253906 8.17927c0 3.46933 2.279874 6.44313 5.451874 7.53353.3965.0991.49563-.1983.49563-.3965v-1.3878c-2.18075.4956-2.67638-.9912-2.67638-.9912-.3965-.8922-.89212-1.1895-.89212-1.1895-.69388-.4957.09912-.4957.09912-.4957.793.0992 1.1895.793 1.1895.793.69388 1.2887 1.88338.8922 2.27988.6939.09912-.4956.29737-.8921.49562-1.0904-1.78425-.1982-3.5685-.8921-3.5685-3.96496 0-.89212.29738-1.586.793-2.08162-.09912-.19825-.3965-.99125.09913-2.08163 0 0 .69387-.19825 2.18075.793.59475-.19825 1.28862-.29737 1.9825-.29737.69387 0 1.38775.09912 1.98249.29737 1.4869-.99125 2.1808-.793 2.1808-.793.3965 1.09038.1982 1.88338.0991 2.08163.4956.59475.793 1.28862.793 2.08162 0 3.07286-1.8834 3.66766-3.66764 3.86586.29737.3965.59474.8921.59474 1.586v2.1808c0 .1982.0991.4956.5948.3965 3.172-1.0904 5.4518-4.0642 5.4518-7.53353-.0991-4.3615-3.6676-7.930002-8.02909-7.930002z" clip-rule="evenodd" class="jsx-120409797"></path></g><defs class="jsx-120409797"><clipPath id="githublogo" class="jsx-120409797"><path fill="transparent" d="M0 0h15.86v15.86H0z" transform="translate(.253906 .0493164)"></path></clipPath></defs></svg>"#;
-// pub static GITHUB_SVG: &str = r#"<p>Test!</p>"#;

website/website/src/components/info_svg.rs

@@ -0,0 +1 @@
+pub static INFO_SVG: &str = r#"<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" alt="Info Icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></svg>"#;

website/website/src/components/mod.rs

@@ -1,4 +1,5 @@
-// pub mod comparisons;
+pub mod comparisons;
 pub mod container;
 pub mod features_list;
 pub mod github_svg;
+pub mod info_svg;