postgresml · chillenberger · Jan 22, 2024 · Jan 20, 2024 · Jan 22, 2024 · Jan 22, 2024
diff --git a/pgml-dashboard/src/api/cms.rs b/pgml-dashboard/src/api/cms.rs
@@ -12,13 +12,14 @@ use rocket::{fs::NamedFile, http::uri::Origin, route::Route, State};
 use yaml_rust::YamlLoader;
 
 use crate::{
-    components::cms::index_link::IndexLink,
+    components::{cms::index_link::IndexLink, layouts::marketing::base::Theme, layouts::marketing::Base},
     guards::Cluster,
     responses::{ResponseOk, Template},
     templates::docs::*,
     utils::config,
 };
 use serde::{Deserialize, Serialize};
+use std::fmt;
 
 lazy_static! {
     static ref BLOG: Collection = Collection::new(
@@ -62,21 +63,31 @@ lazy_static! {
     );
 }
 
-#[derive(PartialEq, Debug, Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize, Clone)]
 pub enum DocType {
     Blog,
     Docs,
     Careers,
 }
 
+impl fmt::Display for DocType {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            DocType::Blog => write!(f, "blog"),
+            DocType::Docs => write!(f, "docs"),
+            DocType::Careers => write!(f, "careers"),
+        }
+    }
+}
+
 impl FromStr for DocType {
     type Err = ();
 
     fn from_str(s: &str) -> Result<DocType, Self::Err> {
         match s {
             "blog" => Ok(DocType::Blog),
-            "Doc" => Ok(DocType::Docs),
-            "Careers" => Ok(DocType::Careers),
+            "docs" => Ok(DocType::Docs),
+            "careers" => Ok(DocType::Careers),
             _ => Err(()),
         }
     }
@@ -97,12 +108,14 @@ pub struct Document {
     pub toc_links: Vec<TocLink>,
     pub contents: String,
     pub doc_type: Option<DocType>,
+    // url to thumbnail for social share
+    pub thumbnail: Option<String>,
 }
 
 // Gets document markdown
 impl Document {
     pub async fn from_path(path: &PathBuf) -> anyhow::Result<Document, std::io::Error> {
-        warn!("path: {:?}", path);
+        debug!("path: {:?}", path);
 
         let regex = regex::Regex::new(r#".*/pgml-cms/([^"]*)/(.*)\.md"#).unwrap();
 
@@ -130,6 +143,8 @@ impl Document {
             (None, contents)
         };
 
+        let default_image = ".gitbook/assets/blog_image_placeholder.png";
+
         // parse meta section
         let (description, image, featured, tags) = match meta {
             Some(meta) => {
@@ -140,9 +155,13 @@ impl Document {
                 };
 
                 let image = if meta["image"].is_badvalue() {
-                    Some(".gitbook/assets/blog_image_placeholder.png".to_string())
+                    Some(format!("/{}/{}", doc_type.clone().unwrap().to_string(), default_image))
                 } else {
-                    Some(meta["image"].as_str().unwrap().to_string())
+                    Some(format!(
+                        "/{}/{}",
+                        doc_type.clone().unwrap().to_string().to_string(),
+                        meta["image"].as_str().unwrap()
+                    ))
                 };
 
                 let featured = if meta["featured"].is_badvalue() {
@@ -165,12 +184,23 @@ impl Document {
             }
             None => (
                 None,
-                Some(".gitbook/assets/blog_image_placeholder.png".to_string()),
+                Some(format!("/{}/{}", doc_type.clone().unwrap().to_string(), default_image)),
                 false,
                 Vec::new(),
             ),
         };
 
+        let thumbnail = match &image {
+            Some(image) => {
+                if image.contains(default_image) {
+                    None
+                } else {
+                    Some(format!("{}{}", config::site_domain(), image))
+                }
+            }
+            None => None,
+        };
+
         // Parse Markdown
         let arena = Arena::new();
         let root = parse_document(&arena, &contents, &crate::utils::markdown::options());
@@ -191,6 +221,7 @@ impl Document {
             toc_links,
             contents,
             doc_type,
+            thumbnail,
         };
         Ok(document)
     }
@@ -419,8 +450,8 @@ impl Collection {
                 let index = self.open_index(&doc.path);
 
                 let mut layout = crate::templates::Layout::new(&doc.title, Some(cluster));
-                if let Some(image) = &doc.image {
-                    layout.image(&config::asset_url(image.into()));
+                if let Some(image) = &doc.thumbnail {
+                    layout.image(&image);
                 }
                 if let Some(description) = &doc.description {
                     layout.description(description);
@@ -526,8 +557,12 @@ async fn get_docs(
 
 #[get("/blog")]
 async fn blog_landing_page(cluster: &Cluster) -> Result<ResponseOk, crate::responses::NotFound> {
-    let layout = crate::components::layouts::marketing::Base::new("Blog landing page", Some(cluster))
-        .footer(cluster.context.marketing_footer.to_string());
+    let layout = Base::new(
+        "PostgresML blog landing page, home of technical tutorials, general updates and all things AI/ML.",
+        Some(cluster),
+    )
+    .theme(Theme::Docs)
+    .footer(cluster.context.marketing_footer.to_string());
 
     Ok(ResponseOk(
         layout.render(

diff --git a/pgml-dashboard/src/components/cards/blog/article_preview/template.html b/pgml-dashboard/src/components/cards/blog/article_preview/template.html
@@ -9,7 +9,7 @@
 "#,
 if meta.author_image.is_some() {
   format!(r#"
-    <img src="blog/{}"class="rounded-circle me-1 author-image" style="height: 3rem;">
+    <img src="blog/{}"class="rounded-circle me-1 author-image" style="height: 3rem;" alt="Author">
   "#, meta.author_image.clone().unwrap())} else {String::new() },
 
 if meta.author.is_some() {
@@ -29,7 +29,7 @@
   <a class="doc-card small-card d-flex" href="{}">
     <div class="meta-layout type-default">
       {}
-      <h6 style="color: inherit">{}</h6>
+      <h4 style="color: inherit">{}</h4>
       {}
     </div>
   </a>
@@ -45,7 +45,7 @@ <h6 style="color: inherit">{}</h6>
   <% if card_type == String::from("featured") {%>
   <a class="doc-card feature-card d-flex flex-column flex-xxl-row" href="<%- meta.path %>">
     <div class="cover-image-container">
-      <img class="cover-image w-100 h-100" src="<%- meta.image.clone().unwrap_or_else(|| String::new())%>" >
+      <img class="cover-image w-100 h-100" src="<%- meta.image.clone().unwrap_or_else(|| String::new())%>" alt="Article cover image">
     </div>
     <div class="type-default d-flex align-items-center" style="flex: 2">
       <div class="meta-layout">
@@ -65,7 +65,7 @@ <h2 style="color: inherit"><%- meta.title %></h2>
   <a class="doc-card small-card d-xxl-flex d-none" style="background-image: url('<%- meta.image.clone().unwrap_or_else(|| String::new())%>')" href="<%- meta.path %>">
     <div class="meta-layout type-show-image">
       <% if meta.tags.len() > 0 {%><div class="eyebrow-text"><%- meta.tags[0].clone().to_uppercase() %></div><% }%>
-      <h6 style="color: inherit"><%- meta.title %></h6>
+      <h4 style="color: inherit"><%- meta.title %></h4>
       <%- foot %>
     </div>
   </a>
@@ -75,7 +75,7 @@ <h6 style="color: inherit"><%- meta.title %></h6>
 
   <% } else if card_type == String::from("big") { %>
   <a class="doc-card big-card d-xxl-flex d-none" style="background-image: url('<%- meta.image.clone().unwrap_or_else(|| String::new())%>')" href="<%- meta.path %>">
-    <div class="type-show-image h-100 align-items-center">
+    <div class="type-show-image h-100 w-100 align-items-center">
       <div class="meta-layout" style="height: fit-content">
         <% if meta.tags.len() > 0 {%><div class="eyebrow-text"><%- meta.tags[0].clone().to_uppercase() %></div><% } %>
         <h2 style="color: inherit"><%- meta.title %></h2>
@@ -94,10 +94,10 @@ <h2 style="color: inherit"><%- meta.title %></h2>
 
   <% } else if card_type == String::from("long") { %>
   <a class="doc-card long-card d-xxl-flex d-none" href="<%- meta.path %>">
-    <img class="cover-image" src="<%- meta.image.clone().unwrap_or_else(|| String::new())%>">
+    <img class="cover-image" src="<%- meta.image.clone().unwrap_or_else(|| String::new())%>" alt="Article cover image">
     <div class="meta-layout meta-container">
       <% if meta.tags.len() > 0 {%><div class="eyebrow-text"><%- meta.tags[0].clone().to_uppercase() %></div><% }%>
-      <h6 style="color: inherit"><%- meta.title.clone() %></h6>
+      <h4 style="color: inherit"><%- meta.title.clone() %></h4>
       <%- foot %>
     </div>
   </a>

diff --git a/pgml-dashboard/src/components/carousel/carousel_controller.js b/pgml-dashboard/src/components/carousel/carousel_controller.js
@@ -56,7 +56,7 @@ export default class extends Controller {
   }
 
   cycle() {
-    setInterval(() => {
+    this.interval = setInterval(() => {
       // maintain paused state through entire loop
       let paused = this.paused
 
@@ -87,4 +87,8 @@ export default class extends Controller {
       }
     }, 1000)
   }
+
+  disconnect() {
+    clearInterval(this.interval);
+  }
 }
diff --git a/pgml-dashboard/src/components/layouts/head/template.html b/pgml-dashboard/src/components/layouts/head/template.html
@@ -1,4 +1,12 @@
-<% use crate::utils::config; %>
+<% 
+  use crate::utils::config;
+
+  let thumbnail = image
+    .unwrap_or_else(|| format!(r#"{}/static/images/homepage-social-share.webp"#, config::site_domain()));
+
+  let description = description
+    .unwrap_or_else(|| String::from("Train and deploy models to make online predictions using only SQL, with an open source Postgres extension."));
+%>
 
 <head>
   <meta charset="utf-8">
@@ -7,23 +15,12 @@
   <meta name="author" content="PostgresML">
   <title><%= title %> – PostgresML</title>
 
-  <% 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.">
-  <% } %>
+  <meta name="description" content="<%- description %>">
+  <meta property="og:description" content="<%- description %>">
+  <meta name="twitter:description" content="<%- description %>">
 
-  <% 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:image" content="<%- thumbnail %>">
+  <meta name="twitter:image" content="<%- thumbnail %>">
 
   <meta property="og:site_name" content="PostgresML">
   <meta property="og:type" content="website">

diff --git a/pgml-dashboard/src/components/layouts/marketing/base/mod.rs b/pgml-dashboard/src/components/layouts/marketing/base/mod.rs
@@ -5,6 +5,25 @@ use crate::models::User;
 use crate::Notification;
 use pgml_components::component;
 use sailfish::TemplateOnce;
+use std::fmt;
+
+#[derive(Default, Clone)]
+pub enum Theme {
+    #[default]
+    Marketing,
+    Docs,
+    Product,
+}
+
+impl fmt::Display for Theme {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            Theme::Marketing => write!(f, "marketing"),
+            Theme::Docs => write!(f, "docs"),
+            Theme::Product => write!(f, "product"),
+        }
+    }
+}
 
 #[derive(TemplateOnce, Default, Clone)]
 #[template(path = "layouts/marketing/base/template.html")]
@@ -14,6 +33,7 @@ pub struct Base {
     pub footer: Option<String>,
     pub alert_banner: AlertBanner,
     pub user: Option<User>,
+    pub theme: Theme,
 }
 
 impl Base {
@@ -65,6 +85,11 @@ impl Base {
         self
     }
 
+    pub fn theme(mut self, theme: Theme) -> Self {
+        self.theme = theme;
+        self
+    }
+
     pub fn render<T>(mut self, template: T) -> String
     where
         T: sailfish::TemplateOnce,

diff --git a/pgml-dashboard/src/components/layouts/marketing/base/template.html b/pgml-dashboard/src/components/layouts/marketing/base/template.html
@@ -4,7 +4,7 @@
 
     <%+ head %>
 
-    <body data-bs-theme="dark" data-theme="marketing">
+    <body data-bs-theme="dark" data-theme="<%- theme.to_string() %>">
         <!-- No smooth scroll on initial page visit -->
         <script>
             window.scroll({

diff --git a/pgml-dashboard/src/components/pages/blog/landing_page/mod.rs b/pgml-dashboard/src/components/pages/blog/landing_page/mod.rs
@@ -37,14 +37,12 @@ impl LandingPage {
                 .await
                 .unwrap();
 
-            let image = Some(format!("blog/{}", doc.image.unwrap()));
-
             let meta = DocMeta {
                 description: doc.description,
                 author: doc.author,
                 author_image: doc.author_image,
                 date: doc.date,
-                image,
+                image: doc.image,
                 featured: doc.featured,
                 tags: doc.tags,
                 title: doc.title,

diff --git a/pgml-dashboard/src/components/pages/blog/landing_page/template.html b/pgml-dashboard/src/components/pages/blog/landing_page/template.html
@@ -26,8 +26,8 @@
         <%+ feature_banner %>
       </div>
       <div class="text-center d-flex flex-column gap-xxl-3 gap-1">
-        <h1 class="h1-big">Keep up with <span class="text-gradient-blue">our blog</span></h1>
-        <p class="m-auto body-large-text" style="max-width: 55rem;">Keep up with all our articles and news, here we upload news about PostgresML, features improvements, general content about machine learning and much more. Join our newsletter and stay up to date!</p>
+        <h1>PostgresML <span class="text-gradient-blue">Blog</span></h1>
+        <p class="m-auto body-large-text" style="max-width: 55rem;">Technical tutorials, general updates and all things AI/ML.</p>
       </div>
 
       <div class="d-flex justify-content-center my-5">

diff --git a/pgml-dashboard/src/utils/config.rs b/pgml-dashboard/src/utils/config.rs
@@ -145,6 +145,10 @@ pub fn asset_url(path: Cow<str>) -> String {
     }
 }
 
+pub fn site_domain() -> String {
+    String::from("https://postgresml.org")
+}
+
 fn env_is_set(name: &str) -> bool {
     var(name).is_ok()
 }

diff --git a/pgml-dashboard/static/css/scss/themes/docs.scss b/pgml-dashboard/static/css/scss/themes/docs.scss
@@ -1,11 +1,11 @@
 [data-theme="docs"] {
   --h1-big-font-size: 80px;
   --h1-font-size: 64px;
-  --h2-font-size: 48px;
-  --h3-font-size: 40px;
-  --h4-font-size: 32px;
-  --h5-font-size: 24px;
-  --h6-font-size: 20px;
+  --h2-font-size: 40px;
+  --h3-font-size: 28px;
+  --h4-font-size: 22px;
+  --h5-font-size: 18px;
+  --h6-font-size: 16px;
   --eyebrow-font-size: 18px;
   --legal-font-size: 12px;
   --body-large-font-size: 20px;
@@ -14,11 +14,11 @@
 
   --h1-big-line-height: 84px;
   --h1-line-height: 72px;
-  --h2-line-height: 54px;
-  --h3-line-height: 46px;
-  --h4-line-height: 36px;
-  --h5-line-height: 30px;
-  --h6-line-height: 24px;
+  --h2-line-height: 46px;
+  --h3-line-height: 32px;
+  --h4-line-height: 28px;
+  --h5-line-height: 24px;
+  --h6-line-height: 22px;
   --eyebrow-line-height: 24px;
   --legal-line-height: 16px;
   --body-large-line-height: 26px;