postgresml · chillenberger · Dec 11, 2023 · Dec 8, 2023 · Dec 8, 2023 · Dec 9, 2023
diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock
diff --git a/pgml-dashboard/src/templates/head.rs → ...hboard/src/components/layouts/head/mod.rs b/pgml-dashboard/src/templates/head.rs → ...hboard/src/components/layouts/head/mod.rs
@@ -1,19 +1,22 @@
+use pgml_components::component;
 use sailfish::TemplateOnce;
 
-#[derive(Clone, Default)]
+#[derive(TemplateOnce, Default, Clone)]
+#[template(path = "layouts/head/template.html")]
 pub struct Head {
     pub title: String,
     pub description: Option<String>,
     pub image: Option<String>,
     pub preloads: Vec<String>,
+    pub context: Option<String>,
 }
 
 impl Head {
     pub fn new() -> Head {
         Head::default()
     }
 
-    pub fn add_preload(&mut self, preload: &str) -> &mut Self {
+    pub fn add_preload(mut self, preload: &str) -> Head {
         self.preloads.push(preload.to_owned());
         self
     }
@@ -36,30 +39,14 @@ impl Head {
     pub fn not_found() -> Head {
         Head::new().title("404 - Not Found")
     }
-}
-
-#[derive(TemplateOnce, Default, Clone)]
-#[template(path = "layout/head.html")]
-pub struct DefaultHeadTemplate {
-    pub head: Head,
-}
 
-impl DefaultHeadTemplate {
-    pub fn new(head: Option<Head>) -> DefaultHeadTemplate {
-        let head = match head {
-            Some(head) => head,
-            None => Head::new(),
-        };
-
-        DefaultHeadTemplate { head }
+    pub fn context(mut self, context: &Option<String>) -> Head {
+        self.context = context.to_owned();
+        self
     }
 }
 
-impl From<DefaultHeadTemplate> for String {
-    fn from(layout: DefaultHeadTemplate) -> String {
-        layout.render_once().unwrap()
-    }
-}
+component!(Head);
 
 #[cfg(test)]
 mod head_tests {

diff --git a/pgml-dashboard/templates/layout/head.html → ...src/components/layouts/head/template.html b/pgml-dashboard/templates/layout/head.html → ...src/components/layouts/head/template.html
@@ -5,37 +5,41 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="turbo-cache-control" content="no-cache">
   <meta name="author" content="PostgresML">
-  <title><%= head.title %> – PostgresML</title>
+  <title><%= title %> – PostgresML</title>
 
-  <% if head.description.is_some() { %>
-  <meta name="description" content="<%= head.description.clone().unwrap() %>">
-  <meta property="og:description" content="<%= head.description.clone().unwrap() %>">
-  <meta name="twitter:description" content="<%= head.description.clone().unwrap() %>">
+  <% if description.is_some() { %>
+  <meta name="description" content="<%= description.clone().unwrap() %>">
+  <meta property="og:description" content="<%= description.clone().unwrap() %>">
+  <meta name="twitter:description" content="<%= description.clone().unwrap() %>">
   <% } else { %>
   <meta name="description" content="Train and deploy models to make online predictions using only SQL, with an open source Postgres extension.">
   <meta property="og:description" content="Train and deploy models to make online predictions using only SQL, with an open source Postgres extension.">
   <meta name="twitter:description" content="Train and deploy models to make online predictions using only SQL, with an open source Postgres extension.">
   <% } %>
 
-  <% if head.image.is_some() { %>
-  <meta property="og:image" content="<%= head.image.clone().unwrap() %>">
-  <meta name="twitter:image" content="<%= head.image.clone().unwrap() %>">
+  <% if image.is_some() { %>
+  <meta property="og:image" content="<%= image.clone().unwrap() %>">
+  <meta name="twitter:image" content="<%= image.clone().unwrap() %>">
   <% } else { %>
   <meta property="og:image" content="https://postgresml.org/dashboard/static/images/owl_gradient.png">
   <meta name="twitter:image" content="https://postgresml.org/dashboard/static/images/owl_gradient.png">
   <% } %>
 
   <meta property="og:site_name" content="PostgresML">
   <meta property="og:type" content="website">
-  <meta property="og:title" content="<%= head.title %> – PostgresML">
+  <meta property="og:title" content="<%= title %> – PostgresML">
   <meta property="og:url" content="http://www.postgresML.org">
   <meta property="og:locale" content="en_US">
 
   <meta name="twitter:site" content="@postgresml">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:creator" content="@postgresml">
-  <meta name="twitter:title" content="<%= head.title %> – PostgresML">
+  <meta name="twitter:title" content="<%= title %> – PostgresML">
 
+  <% if context.is_some() { %>
+    <%- context.unwrap() %>
+  <% } else { %>
+
   <script type="importmap" data-turbo-track="reload">
     {
       "imports": {
@@ -45,20 +49,30 @@
       }
     }
   </script>
+
+  <link rel="stylesheet" data-turbo-track="reload" href="<%- config::css_url("style.css") %>">
+  <script async src="https://data.cloud.hyperparam.ai/script.js" data-website-id="499122fd-f307-4e8d-af4b-88b9f5e9903b"></script>
+  <script defer src="https://cdn.plot.ly/plotly-2.11.1.min.js"></script>
+  <script type="module" defer async src="/dashboard/static/js/libs/sortable-1.12.0.min.js"></script>
+  <script data-turbo-trace="reload" type="module" src="<%= config::js_url("bundle.js") %>" async defer></script>
+
+    <!-- version: <%= config::git_sha() %> -->
+  <% } %>
+
+  <% for link in preloads { %>
+    <link rel="preload" fetchpriority="high" as="image" href=<%= link %> type="image/webp">
+  <% };  %>
 
   <link rel="icon" href="/dashboard/static/images/owl.ico">
-  <link rel="stylesheet" data-turbo-track="reload" href="<%- config::css_url("style.css") %>">
+
   <script defer src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap">
-  <script defer src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 
-  <script async src="https://data.cloud.hyperparam.ai/script.js" data-website-id="499122fd-f307-4e8d-af4b-88b9f5e9903b"></script>
   <script async type="nomodule" src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
   <script defer type="module" src="/dashboard/static/js/libs/turbo-7.3.0.min.js"></script>
-  <script defer src="https://cdn.plot.ly/plotly-2.11.1.min.js"></script>
 
   <!-- Code Mirror -->
   <script defer type="module" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
@@ -69,10 +83,6 @@
   <link rel="stylesheet" href="/dashboard/static/css/codemirror.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/hint/show-hint.min.css" integrity="sha512-OmcLQEy8iGiD7PSm85s06dnR7G7C9C0VqahIPAj/KHk5RpOCmnC6R2ob1oK4/uwYhWa9BF1GC6tzxsC8TIx7Jg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-  <script type="module" defer async src="/dashboard/static/js/libs/sortable-1.12.0.min.js"></script>
-  <script data-turbo-trace="reload" type="module" src="<%= config::js_url("bundle.js") %>" async defer></script>
-
-
   <% if config::dev_mode() { %>
   <!-- dev only - save page position after reload -->
   <script>
@@ -86,6 +96,4 @@
     };
   </script>
   <% } %>
-
-  <!-- version: <%= config::git_sha() %> -->
 </head>
diff --git a/pgml-dashboard/src/components/layouts/mod.rs b/pgml-dashboard/src/components/layouts/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/layouts/head
+pub mod head;
+pub use head::Head;
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -31,6 +31,9 @@ pub use github_icon::GithubIcon;
 // src/components/inputs
 pub mod inputs;
 
+// src/components/layouts
+pub mod layouts;
+
 // src/components/left_nav_menu
 pub mod left_nav_menu;
 pub use left_nav_menu::LeftNavMenu;

diff --git a/pgml-dashboard/src/guards.rs b/pgml-dashboard/src/guards.rs
@@ -132,6 +132,7 @@ impl Cluster {
                 },
                 lower_left_nav: StaticNav::default(),
                 marketing_footer: MarketingFooter::new().render_once().unwrap(),
+                head_items: None,
             },
             notifications: None,
         }

diff --git a/pgml-dashboard/src/lib.rs b/pgml-dashboard/src/lib.rs
@@ -54,6 +54,7 @@ pub struct Context {
     pub upper_left_nav: StaticNav,
     pub lower_left_nav: StaticNav,
     pub marketing_footer: String,
+    pub head_items: Option<String>,
 }
 
 #[derive(Debug, Clone, Default)]

diff --git a/pgml-dashboard/src/templates/mod.rs b/pgml-dashboard/src/templates/mod.rs
@@ -14,9 +14,8 @@ use crate::models;
 use crate::utils::tabs;
 
 pub mod docs;
-pub mod head;
 
-pub use head::*;
+use crate::components::layouts::Head;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "content/not_found.html")]
@@ -44,8 +43,15 @@ pub struct Layout {
 
 impl Layout {
     pub fn new(title: &str, context: Option<&crate::guards::Cluster>) -> Self {
+        let head = match context.as_ref() {
+            Some(context) => Head::new()
+                .title(title)
+                .context(&context.context.head_items),
+            None => Head::new().title(title),
+        };
+
         Layout {
-            head: Head::new().title(title),
+            head,
             alert_banner: AlertBanner::from_notification(Notification::next_alert(context)),
             feature_banner: FeatureBanner::from_notification(Notification::next_feature(context)),
             ..Default::default()
@@ -112,7 +118,7 @@ impl From<Layout> for String {
 pub struct WebAppBase<'a> {
     pub content: Option<String>,
     pub breadcrumbs: Vec<NavLink<'a>>,
-    pub head: String,
+    pub head: Head,
     pub dropdown_nav: StaticNav,
     pub account_management_nav: StaticNav,
     pub upper_left_nav: StaticNav,
@@ -122,17 +128,10 @@ pub struct WebAppBase<'a> {
 
 impl<'a> WebAppBase<'a> {
     pub fn new(title: &str, context: &crate::Context) -> Self {
+        let head = Head::new().title(title).context(&context.head_items);
+
         WebAppBase {
-            head: crate::templates::head::DefaultHeadTemplate::new(Some(
-                crate::templates::head::Head {
-                    title: title.to_owned(),
-                    description: None,
-                    image: None,
-                    preloads: vec![],
-                },
-            ))
-            .render_once()
-            .unwrap(),
+            head,
             dropdown_nav: context.dropdown_nav.clone(),
             account_management_nav: context.account_management_nav.clone(),
             upper_left_nav: context.upper_left_nav.clone(),
@@ -141,11 +140,6 @@ impl<'a> WebAppBase<'a> {
         }
     }
 
-    pub fn head(&mut self, head: String) -> &mut Self {
-        self.head = head.to_owned();
-        self
-    }
-
     pub fn breadcrumbs(&mut self, breadcrumbs: Vec<NavLink<'a>>) -> &mut Self {
         self.breadcrumbs = breadcrumbs.to_owned();
         self

diff --git a/pgml-dashboard/static/fonts/Inter-Medium.woff2 b/pgml-dashboard/static/fonts/Inter-Medium.woff2
diff --git a/pgml-dashboard/templates/layout/base.html b/pgml-dashboard/templates/layout/base.html
@@ -4,7 +4,7 @@
 <!DOCTYPE html>
 <html lang="en-US">
 
-  <% include!("head.html"); %>
+  <%+ head %>
 
   <body data-bs-theme="dark" data-theme="docs">
     <main>

diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
@@ -16,7 +16,7 @@
 
 <!DOCTYPE html>
 <html lang="en-US">
-    <%- head %>
+    <%+ head %>
     <body data-bs-theme="dark" data-theme="product">
         <% for component in body_components { %>
         <%+ component %>