feat: ✨ renamed __perseus_content to __perseus_content_initial an…

…d made `__perseus_content` a class

Now both container elements can be styled with that class alone.

docs/0.2.x/src/advanced/initial-loads.md

@@ -1,6 +1,6 @@
 # Initial Loads
 
-Perseus handles *initial loads* very differently from *subsequent loads*. The former refers to what's done when a user visits a page on a Perseus app from an external source (e.g. visiting from a search engine, redirected from another site), and this requires a full HTMl page to be sent that can be interpreted by the browser. By contrast, subsequent loads are loads between pages within the same Perseus app, which can be performed by the app shell (described in the next section).
+Perseus handles _initial loads_ very differently from _subsequent loads_. The former refers to what's done when a user visits a page on a Perseus app from an external source (e.g. visiting from a search engine, redirected from another site), and this requires a full HTMl page to be sent that can be interpreted by the browser. By contrast, subsequent loads are loads between pages within the same Perseus app, which can be performed by the app shell (described in the next section).
 
 The process of initial loads is slightly complex, and occurs like so (this example is for a page called `/posts/test`, rendered with incremental generation):
 
@@ -14,7 +14,7 @@ The process of initial loads is slightly complex, and occurs like so (this examp
 8. Browser renders HTML package, user sees content immediately.
 9. Browser invokes Wasm, hands control to the app shell.
 10. App shell checks if initial state declaration global variable is present, finds that it is and unsets it (so that it doesn't interfere with subsequent loads).
-11. App shell moves server-rendered content out of `__perseus_content` and into `__perseus_content_rx`, which Sycamore's router had control over (allowing it to catch links and use the subsequent loads system).
+11. App shell moves server-rendered content out of `__perseus_content_initial` and into `__perseus_content_rx`, which Sycamore's router had control over (allowing it to catch links and use the subsequent loads system).
 12. App shell gets a translator if the app uses i18n.
 13. App shell hydrates content at `__perseus_content_rx` with Sycamore and returns, the page is now interactive and has a translator context.
 

docs/next/src/advanced/initial-loads.md

@@ -1,6 +1,6 @@
 # Initial Loads
 
-Perseus handles *initial loads* very differently from *subsequent loads*. The former refers to what's done when a user visits a page on a Perseus app from an external source (e.g. visiting from a search engine, redirected from another site), and this requires a full HTMl page to be sent that can be interpreted by the browser. By contrast, subsequent loads are loads between pages within the same Perseus app, which can be performed by the app shell (described in the next section).
+Perseus handles _initial loads_ very differently from _subsequent loads_. The former refers to what's done when a user visits a page on a Perseus app from an external source (e.g. visiting from a search engine, redirected from another site), and this requires a full HTMl page to be sent that can be interpreted by the browser. By contrast, subsequent loads are loads between pages within the same Perseus app, which can be performed by the app shell (described in the next section).
 
 The process of initial loads is slightly complex, and occurs like so (this example is for a page called `/posts/test`, rendered with incremental generation):
 
@@ -14,7 +14,7 @@ The process of initial loads is slightly complex, and occurs like so (this examp
 8. Browser renders HTML package, user sees content immediately.
 9. Browser invokes Wasm, hands control to the app shell.
 10. App shell checks if initial state declaration global variable is present, finds that it is and unsets it (so that it doesn't interfere with subsequent loads).
-11. App shell moves server-rendered content out of `__perseus_content` and into `__perseus_content_rx`, which Sycamore's router had control over (allowing it to catch links and use the subsequent loads system).
+11. App shell moves server-rendered content out of `__perseus_content_initial` and into `__perseus_content_rx`, which Sycamore's router had control over (allowing it to catch links and use the subsequent loads system).
 12. App shell gets a translator if the app uses i18n.
 13. App shell hydrates content at `__perseus_content_rx` with Sycamore and returns, the page is now interactive and has a translator context.
 

examples/basic/.perseus/src/lib.rs

@@ -31,7 +31,7 @@ pub fn run() -> Result<(), JsValue> {
         .unwrap()
         .document()
         .unwrap()
-        .query_selector("#__perseus_content")
+        .query_selector("#__perseus_content_initial")
         .unwrap();
     // And create a node reference that we can use as a handle to the reactive verison
     let container_rx = NodeRef::new();
@@ -106,9 +106,8 @@ pub fn run() -> Result<(), JsValue> {
                     // This template is reactive, and will be updated as necessary
                     // However, the server has already rendered initial load content elsewhere, so we move that into here as well in the app shell
                     // The main reason for this is that the router only intercepts click events from its children
-                    // TODO remove class in v0.3.0 (deprecated)
                     template! {
-                        div(id="__perseus_content_rx", class="__perseus_content_rx", ref=container_rx) {}
+                        div(id="__perseus_content_rx", class="__perseus_content", ref=container_rx) {}
                     }
                 }))
             }

packages/perseus-actix-web/src/initial_load.rs

@@ -41,7 +41,7 @@ fn return_error_page(
     let html_to_replace_single = format!("<div id='{}'>", root_id);
     let html_replacement = format!(
         // We give the content a specific ID so that it can be hydrated properly
-        "{}<div id=\"__perseus_content\">{}</div>",
+        "{}<div id=\"__perseus_content_initial\" class=\"__perseus_content\">{}</div>",
         &html_to_replace_double,
         &error_html
     );

packages/perseus/src/html_shell.rs

@@ -68,7 +68,7 @@ pub fn interpolate_page_data(html_shell: &str, page_data: &PageData, root_id: &s
     let html_to_replace_single = format!("<div id='{}'>", root_id);
     let html_replacement = format!(
         // We give the content a specific ID so that it can be deleted if an error page needs to be rendered on the client-side
-        "{}<div id=\"__perseus_content\">{}</div>",
+        "{}<div id=\"__perseus_content_initial\" class=\"__perseus_content\">{}</div>",
         &html_to_replace_double,
         &page_data.content
     );