chore(website): updated website to latest beta

This invovled also upgrading to the latest version of Sycamore.

.github/workflows/website.yml

@@ -19,7 +19,7 @@ jobs:
               with:
                   fetch-depth: 0
             - run: cargo install bonnie wasm-pack
-            - run: cargo install perseus-cli --version 0.3.0-beta.21
+            - run: cargo install perseus-cli --version 0.3.0-beta.22
             - run: npm install
               working-directory: website
             - name: Build website

website/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "perseus-website"
-version = "0.3.0-beta.21"
+version = "0.3.0-beta.22"
 edition = "2018"
 description = "The official website for the Perseus framework."
 authors = ["arctic_hen7 <arctic_hen7@pm.me>"]
@@ -13,9 +13,9 @@ readme = "./README.md"
 
 [dependencies]
 # We use the current version of Perseus, not the local one
-perseus = {  version = "0.3.0-beta.21", features = [ "translator-fluent" ] }
-sycamore = "0.6"
-sycamore-router = "0.6"
+perseus = {  version = "0.3.0-beta.22", features = [ "translator-fluent" ] }
+sycamore = "0.7"
+sycamore-router = "0.7"
 serde = "1"
 serde_json = "1"
 fluent-bundle = "0.15"
@@ -24,4 +24,4 @@ pulldown-cmark = "0.8"
 lazy_static = "1"
 web-sys = { version = "0.3", features = [ "Event", "EventTarget" ] }
 wasm-bindgen = "0.2"
-perseus-size-opt = "0.1"
+perseus-size-opt = ">=0.1.5"

website/src/components/comparisons.rs

@@ -1,7 +1,7 @@
-use perseus::GenericNode;
+use perseus::Html;
 use serde::{Deserialize, Serialize};
-use sycamore::prelude::template;
-use sycamore::prelude::Template as SycamoreTemplate;
+use sycamore::prelude::view;
+use sycamore::prelude::View;
 
 /// 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.
@@ -46,25 +46,25 @@ impl FeatureSupport {
 }
 
 /// 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> {
+pub fn render_lighthouse_score<G: Html>(score: u8) -> View<G> {
     if score == 100 {
-        template! {
+        view! {
             "💯"
         }
     } else if score >= 90 {
-        template! {
+        view! {
             span(class = "text-green-500") {
                 (score)
             }
         }
     } else if score >= 50 {
-        template! {
+        view! {
             span(class = "text-amber-500") {
                 (score)
             }
         }
     } else {
-        template! {
+        view! {
             span(class = "text-red-500") {
                 (score)
             }

website/src/components/container.rs

@@ -1,13 +1,12 @@
 use perseus::{link, t};
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 
 // This is imported by all alternative containers as well
 pub static COPYRIGHT_YEARS: &str = "2021";
 
 #[component(NavLinks<G>)]
-pub fn nav_links() -> SycamoreTemplate<G> {
-    template! {
+pub fn nav_links() -> View<G> {
+    view! {
         li(class = "m-3 p-1") {
             a(href = link!("/docs"), class = "px-2") { (t!("navlinks.docs")) }
         }
@@ -20,20 +19,20 @@ pub fn nav_links() -> SycamoreTemplate<G> {
     }
 }
 
-pub struct ContainerProps<G: GenericNode> {
+pub struct ContainerProps<G: Html> {
     pub title: String,
-    pub children: SycamoreTemplate<G>,
+    pub children: View<G>,
 }
 
 #[component(Container<G>)]
-pub fn container(props: ContainerProps<G>) -> SycamoreTemplate<G> {
+pub fn container(props: ContainerProps<G>) -> View<G> {
     let title = props.title.clone();
     let menu_open = Signal::new(false);
     // We need to verbatim copy the value because of how it's used in Sycamore's reactivity system
     let menu_open_2 = create_memo(cloned!((menu_open) => move || *menu_open.get()));
     let toggle_menu = cloned!((menu_open) => move |_| menu_open.set(!*menu_open.get()));
 
-    template! {
+    view! {
         // TODO click-away events
         header(class = "shadow-md sm:p-2 w-full bg-white dark:text-white dark:bg-navy mb-20") {
             div(class = "flex justify-between") {

website/src/components/features_list.rs

@@ -2,18 +2,17 @@ use perseus::link;
 use perseus::templates::RenderCtx;
 use sycamore::context::use_context;
 use sycamore::prelude::*;
-use sycamore::template::Template as SycamoreTemplate;
 use sycamore_router::navigate;
 
 /// Turns the features of Perseus into an actual list.
-pub fn get_features_list<G: GenericNode>() -> SycamoreTemplate<G> {
+pub fn get_features_list<G: GenericNode>() -> View<G> {
     let features = get_features();
-    SycamoreTemplate::new_fragment(
+    View::new_fragment(
         features.iter().map(move |feat| {
             let Feature { id_base, link } = feat.clone();
             let name_id = format!("feature-{}.name", &id_base);
             let desc_id = format!("feature-{}.desc", &id_base);
-            template! {
+            view! {
                 li(class = "inline-block align-top") {
                     div(
                         class = "text-left cursor-pointer rounded-xl shadow-md hover:shadow-2xl transition-shadow duration-100 p-8 max-w-sm",

website/src/error_pages.rs

@@ -1,15 +1,15 @@
-use perseus::{ErrorPages, GenericNode};
-use sycamore::template;
+use perseus::{ErrorPages, Html};
+use sycamore::view;
 
 // This site will be exported statically, so we only have control over 404 pages for broken links in the site itself
-pub fn get_error_pages<G: GenericNode>() -> ErrorPages<G> {
+pub fn get_error_pages<G: Html>() -> ErrorPages<G> {
     let mut error_pages = ErrorPages::new(|url, status, err, _| {
-        template! {
+        view! {
             p { (format!("An error with HTTP code {} occurred at '{}': '{}'.", status, url, err)) }
         }
     });
     error_pages.add_page(404, |_, _, _, _| {
-        template! {
+        view! {
             p { "Page not found." }
         }
     });

website/src/templates/comparisons.rs

@@ -1,25 +1,22 @@
 use crate::components::comparisons::{render_lighthouse_score, Comparison};
 use crate::components::container::{Container, ContainerProps};
 use crate::components::info_svg::INFO_SVG;
-use perseus::{
-    t, ErrorCause, GenericErrorWithCause, GenericNode, RenderFnResultWithCause, Template,
-};
+use perseus::{t, ErrorCause, GenericErrorWithCause, Html, RenderFnResultWithCause, Template};
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use std::fs;
 use std::path::PathBuf;
-use sycamore::prelude::Template as SycamoreTemplate;
 use sycamore::prelude::*;
 use walkdir::WalkDir;
 use wasm_bindgen::JsCast;
 
 struct ComparisonRowProps {
     perseus_val: String,
-    comparison_val: StateHandle<String>,
+    comparison_val: ReadSignal<String>,
     name: String,
 }
 #[component(ComparisonRow<G>)]
-fn comparison_row(props: ComparisonRowProps) -> SycamoreTemplate<G> {
+fn comparison_row(props: ComparisonRowProps) -> View<G> {
     let ComparisonRowProps {
         perseus_val,
         comparison_val,
@@ -28,7 +25,7 @@ fn comparison_row(props: ComparisonRowProps) -> SycamoreTemplate<G> {
     let name_2 = name.clone();
     let show_details = Signal::new(false);
 
-    template! {
+    view! {
         tr {
             th(class = "text-left p-1 py-2 text-xs xs:text-base") {
                 div(class = "flex items-center") {
@@ -67,11 +64,11 @@ fn comparison_row(props: ComparisonRowProps) -> SycamoreTemplate<G> {
 }
 
 struct ComparisonTableProps {
-    comparison: StateHandle<Comparison>,
+    comparison: ReadSignal<Comparison>,
     perseus_comparison: Comparison,
 }
 #[component(ComparisonTable<G>)]
-fn comparison_table(props: ComparisonTableProps) -> SycamoreTemplate<G> {
+fn comparison_table(props: ComparisonTableProps) -> View<G> {
     let comparison = props.comparison.clone();
     let Comparison {
         name: _perseus_name, // We'll use the translation ID
@@ -135,7 +132,7 @@ fn comparison_table(props: ComparisonTableProps) -> SycamoreTemplate<G> {
     let show_details_homepage_lighthouse_desktop = Signal::new(false);
     let show_details_homepage_lighthouse_mobile = Signal::new(false);
 
-    template! {
+    view! {
         table(class = "w-full overflow-x-scroll table-fixed border-collapse") {
             thead(class = "mt-4 text-white bg-indigo-500 rounded-xl") {
                 th(class = "p-1 py-2 text-xs xs:text-base") {
@@ -154,62 +151,62 @@ fn comparison_table(props: ComparisonTableProps) -> SycamoreTemplate<G> {
                 // Then two cells, one Perseus, and the for the comparison
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_language,
-                    comparison_val: comparison_language.clone(),
+                    comparison_val: comparison_language,
                     name: "language".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_ssg.render(),
-                    comparison_val: comparison_supports_ssg.clone(),
+                    comparison_val: comparison_supports_ssg,
                     name: "supports_ssg".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_ssr.render(),
-                    comparison_val: comparison_supports_ssr.clone(),
+                    comparison_val: comparison_supports_ssr,
                     name: "supports_ssr".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_ssr_ssg_same_page.render(),
-                    comparison_val: comparison_supports_ssr_ssg_same_page.clone(),
+                    comparison_val: comparison_supports_ssr_ssg_same_page,
                     name: "supports_ssr_ssg_same_page".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_i18n.render(),
-                    comparison_val: comparison_supports_i18n.clone(),
+                    comparison_val: comparison_supports_i18n,
                     name: "supports_i18n".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_incremental.render(),
-                    comparison_val: comparison_supports_incremental.clone(),
+                    comparison_val: comparison_supports_incremental,
                     name: "supports_incremental".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_revalidation.render(),
-                    comparison_val: comparison_supports_revalidation.clone(),
+                    comparison_val: comparison_supports_revalidation,
                     name: "supports_revalidation".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_inbuilt_cli.render(),
-                    comparison_val: comparison_inbuilt_cli.clone(),
+                    comparison_val: comparison_inbuilt_cli,
                     name: "inbuilt_cli".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_inbuilt_routing.render(),
-                    comparison_val: comparison_inbuilt_routing.clone(),
+                    comparison_val: comparison_inbuilt_routing,
                     name: "inbuilt_routing".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_shell.render(),
-                    comparison_val: comparison_supports_shell.clone(),
+                    comparison_val: comparison_supports_shell,
                     name: "supports_shell".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_deployment.render(),
-                    comparison_val: comparison_supports_deployment.clone(),
+                    comparison_val: comparison_supports_deployment,
                     name: "supports_deployment".to_string()
                 })
                 ComparisonRow(ComparisonRowProps {
                     perseus_val: perseus_supports_exporting.render(),
-                    comparison_val: comparison_supports_exporting.clone(),
+                    comparison_val: comparison_supports_exporting,
                     name: "supports_exporting".to_string()
                 })
                 // These last two get special rendering for text colors and possible emoji
@@ -291,21 +288,21 @@ pub struct ComparisonsPageProps {
 
 #[perseus::template(ComparisonsPage)]
 #[component(ComparisonsPage<G>)]
-pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
+pub fn comparisons_page(props: ComparisonsPageProps) -> View<G> {
     let comparisons = props.comparisons.clone();
     let perseus_comparison = props.perseus_comparison;
     let mut comparison_names: Vec<String> = comparisons.keys().cloned().collect();
     comparison_names.sort();
     // The current comparison should be the first element in the list alphabetically
     let curr_comparison_name = Signal::new(comparison_names[0].clone());
 
-    let select_options = SycamoreTemplate::new_fragment(
+    let select_options = View::new_fragment(
         comparison_names
             .iter()
             .map(|name| {
                 let name = name.clone();
                 let name_2 = name.clone();
-                template! {
+                view! {
                     option(value = name) {
                         (name_2)
                     }
@@ -318,10 +315,10 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
         comparisons.get(&*curr_comparison_name.get()).unwrap().clone()
     }));
 
-    template! {
+    view! {
         Container(ContainerProps {
             title: t!("perseus"),
-            children: template! {
+            children: view! {
                 div(class = "flex flex-col justify-center text-center dark:text-white mt-14 xs:mt-16 sm:mt-20 lg:mt-25") {
                     div {
                         h1(class = "text-5xl xs:text-7xl sm:text-8xl font-extrabold") {
@@ -340,7 +337,7 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
                     div(class = "p-1") {
                         select(
                             class = "p-1 rounded-sm dark:bg-navy mb-4",
-                            on:input = cloned!((curr_comparison_name) => move |event| {
+                            on:input = cloned!((curr_comparison_name) => move |event: web_sys::Event| {
                                 let target: web_sys::HtmlInputElement = event.target().unwrap().unchecked_into();
                                 let new_comparison_name = target.value();
                                 curr_comparison_name.set(new_comparison_name);
@@ -352,7 +349,7 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
                         div(class = "px-3 w-full sm:mr-auto sm:ml-auto sm:max-w-prose lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl") {
                             div(class = "flex justify-center") {
                                 ComparisonTable(ComparisonTableProps {
-                                    comparison: curr_comparison.clone(),
+                                    comparison: curr_comparison,
                                     perseus_comparison
                                 })
                             }
@@ -365,13 +362,13 @@ pub fn comparisons_page(props: ComparisonsPageProps) -> SycamoreTemplate<G> {
 }
 
 #[perseus::head]
-pub fn head() -> SycamoreTemplate<SsrNode> {
-    template! {
+pub fn head() -> View<SsrNode> {
+    view! {
         title { (format!("{} | {}", t!("comparisons-title"), t!("perseus"))) }
     }
 }
 
-pub fn get_template<G: GenericNode>() -> Template<G> {
+pub fn get_template<G: Html>() -> Template<G> {
     Template::new("comparisons")
         .template(comparisons_page)
         .head(head)