From 8e5ea4d31227208da9c8c8e945a9cf581bdaa153 Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Tue, 6 Feb 2024 14:12:55 -0700 Subject: [PATCH 01/26] start of docs layout, docs page, refactor side nave into a componnet, alt marketing top nav style, bookmark progress. --- pgml-dashboard/src/api/cms.rs | 12 ++++ .../src/components/layouts/docs/docs.scss | 27 +++++++++ .../layouts/docs/docs_controller.js | 12 ++++ .../src/components/layouts/docs/mod.rs | 57 +++++++++++++++++++ .../src/components/layouts/docs/template.html | 43 ++++++++++++++ pgml-dashboard/src/components/layouts/mod.rs | 4 ++ .../navigation/left_nav/blog/blog.scss | 17 ++++++ .../left_nav/blog/blog_controller.js | 14 +++++ .../navigation/left_nav/blog/mod.rs | 26 +++++++++ .../navigation/left_nav/blog/template.html} | 6 +- .../navigation/left_nav/docs/docs.scss | 52 +++++++++++++++++ .../left_nav/docs/docs_controller.js | 20 +++++++ .../navigation/left_nav/docs/mod.rs | 17 ++++++ .../navigation/left_nav/docs/template.html | 16 ++++++ .../src/components/navigation/left_nav/mod.rs | 8 +++ .../navbar/marketing/marketing.scss | 8 ++- .../navigation/navbar/marketing/mod.rs | 7 +++ .../navigation/navbar/marketing/template.html | 4 +- .../pages/docs/landing_page/landing_page.scss | 10 ++++ .../landing_page/landing_page_controller.js | 14 +++++ .../components/pages/docs/landing_page/mod.rs | 14 +++++ .../pages/docs/landing_page/template.html | 51 +++++++++++++++++ .../src/components/pages/docs/mod.rs | 6 ++ pgml-dashboard/src/components/pages/mod.rs | 3 + .../marketing_footer/marketing_footer.scss | 1 + pgml-dashboard/static/css/modules.scss | 4 ++ .../static/css/scss/abstracts/variables.scss | 4 +- pgml-dashboard/static/js/topnav-styling.js | 10 +++- pgml-dashboard/templates/layout/base.html | 3 +- 29 files changed, 460 insertions(+), 10 deletions(-) create mode 100644 pgml-dashboard/src/components/layouts/docs/docs.scss create mode 100644 pgml-dashboard/src/components/layouts/docs/docs_controller.js create mode 100644 pgml-dashboard/src/components/layouts/docs/mod.rs create mode 100644 pgml-dashboard/src/components/layouts/docs/template.html create mode 100644 pgml-dashboard/src/components/navigation/left_nav/blog/blog.scss create mode 100644 pgml-dashboard/src/components/navigation/left_nav/blog/blog_controller.js create mode 100644 pgml-dashboard/src/components/navigation/left_nav/blog/mod.rs rename pgml-dashboard/{templates/layout/nav/side.html => src/components/navigation/left_nav/blog/template.html} (71%) create mode 100644 pgml-dashboard/src/components/navigation/left_nav/docs/docs.scss create mode 100644 pgml-dashboard/src/components/navigation/left_nav/docs/docs_controller.js create mode 100644 pgml-dashboard/src/components/navigation/left_nav/docs/mod.rs create mode 100644 pgml-dashboard/src/components/navigation/left_nav/docs/template.html create mode 100644 pgml-dashboard/src/components/pages/docs/landing_page/landing_page.scss create mode 100644 pgml-dashboard/src/components/pages/docs/landing_page/landing_page_controller.js create mode 100644 pgml-dashboard/src/components/pages/docs/landing_page/mod.rs create mode 100644 pgml-dashboard/src/components/pages/docs/landing_page/template.html create mode 100644 pgml-dashboard/src/components/pages/docs/mod.rs diff --git a/pgml-dashboard/src/api/cms.rs b/pgml-dashboard/src/api/cms.rs index b50677b2b..b7a106ed5 100644 --- a/pgml-dashboard/src/api/cms.rs +++ b/pgml-dashboard/src/api/cms.rs @@ -18,6 +18,7 @@ use crate::{ templates::docs::*, utils::config, }; +use sailfish::TemplateOnce; use serde::{Deserialize, Serialize}; use std::fmt; @@ -633,6 +634,16 @@ async fn blog_landing_page(cluster: &Cluster) -> Result Result { + let doc_layout = crate::components::layouts::Docs::new("PostgresML documentation landing page.", Some(cluster)) + .index(&DOCS.index); + + let page = crate::components::pages::docs::LandingPage::new(); + + Ok(ResponseOk(doc_layout.render(page))) +} + #[get("/user_guides/", rank = 5)] async fn get_user_guides( path: PathBuf, @@ -645,6 +656,7 @@ async fn get_user_guides( pub fn routes() -> Vec { routes![ blog_landing_page, + docs_landing_page, get_blog, get_blog_asset, get_careers, diff --git a/pgml-dashboard/src/components/layouts/docs/docs.scss b/pgml-dashboard/src/components/layouts/docs/docs.scss new file mode 100644 index 000000000..5306624a1 --- /dev/null +++ b/pgml-dashboard/src/components/layouts/docs/docs.scss @@ -0,0 +1,27 @@ +div[data-controller="layouts-docs"] { + $collapsed-left-nav-height: 40px; + + .content-container { + position: relative; + min-height: calc(100vh - $navbar-height); + } + + .glow-container { + position: absolute; + overflow: visible; + z-index: -1; + overflow: hidden; + height: 100%; + width: calc(100vw - 8px); + + @include media-breakpoint-up(xl) { + width: calc(100vw - $docs-left-nav-w - 8px); + } + } + + .drawer-submenu { + @include media-breakpoint-down(lg) { + background-color: #{$gray-800}; + } + } +} \ No newline at end of file diff --git a/pgml-dashboard/src/components/layouts/docs/docs_controller.js b/pgml-dashboard/src/components/layouts/docs/docs_controller.js new file mode 100644 index 000000000..c1e1bc5f3 --- /dev/null +++ b/pgml-dashboard/src/components/layouts/docs/docs_controller.js @@ -0,0 +1,12 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = [] + static outlets = [] + + initialize() {} + + connect() {} + + disconnect() {} +} \ No newline at end of file diff --git a/pgml-dashboard/src/components/layouts/docs/mod.rs b/pgml-dashboard/src/components/layouts/docs/mod.rs new file mode 100644 index 000000000..f968b17ed --- /dev/null +++ b/pgml-dashboard/src/components/layouts/docs/mod.rs @@ -0,0 +1,57 @@ +use crate::components::cms::IndexLink; +use crate::components::layouts::Head; +use crate::guards::Cluster; +use crate::models::User; +use pgml_components::component; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default, Clone)] +#[template(path = "layouts/docs/template.html")] +pub struct Docs { + head: Head, + footer: Option, + user: Option, + content: Option, + index: Vec, +} + +impl Docs { + pub fn new(title: &str, context: Option<&Cluster>) -> Docs { + let (head, footer, user) = match context.as_ref() { + Some(context) => ( + Head::new().title(&title).context(&context.context.head_items), + Some(context.context.marketing_footer.clone()), + Some(context.context.user.clone()), + ), + None => (Head::new().title(&title), None, None), + }; + + Docs { + head, + footer, + user, + ..Default::default() + } + } + + pub fn index(mut self, index: &Vec) -> Self { + self.index = index.clone(); + self + } + + pub fn render(mut self, template: T) -> String + where + T: sailfish::TemplateOnce, + { + self.content = Some(template.render_once().unwrap()); + self.clone().into() + } +} + +impl From for String { + fn from(layout: Docs) -> String { + layout.render_once().unwrap() + } +} + +component!(Docs); diff --git a/pgml-dashboard/src/components/layouts/docs/template.html b/pgml-dashboard/src/components/layouts/docs/template.html new file mode 100644 index 000000000..6f1e90882 --- /dev/null +++ b/pgml-dashboard/src/components/layouts/docs/template.html @@ -0,0 +1,43 @@ +<% + use crate::components::navigation::navbar::marketing::Marketing as MarketingNavbar; + use crate::components::navigation::left_nav::Docs as IndexNav; + use crate::components::navigation::left_nav::Blog as MobileIndexNav; +%> + + + + <%+ head %> + +
+ +
+
+ <%+ MarketingNavbar::new(user).style_alt() %> +
+
+ +
+ <%+ IndexNav::new(&index) %> + +
+
+
+ <%+ MobileIndexNav::new(&index).title("Docs") %> +
+ +
+ Toc + test +
+ + <%- content.unwrap_or_else(|| String::new()) %> +
+
+
+
+ +
+ <%- footer.unwrap_or_default() %> +
+ + diff --git a/pgml-dashboard/src/components/layouts/mod.rs b/pgml-dashboard/src/components/layouts/mod.rs index c929358a0..4108da56c 100644 --- a/pgml-dashboard/src/components/layouts/mod.rs +++ b/pgml-dashboard/src/components/layouts/mod.rs @@ -1,6 +1,10 @@ // This file is automatically generated. // You shouldn't modify it manually. +// src/components/layouts/docs +pub mod docs; +pub use docs::Docs; + // src/components/layouts/head pub mod head; pub use head::Head; diff --git a/pgml-dashboard/src/components/navigation/left_nav/blog/blog.scss b/pgml-dashboard/src/components/navigation/left_nav/blog/blog.scss new file mode 100644 index 000000000..b3e51b543 --- /dev/null +++ b/pgml-dashboard/src/components/navigation/left_nav/blog/blog.scss @@ -0,0 +1,17 @@ +div[data-controller="navigation-left-nav-blog"] { + // Used to identify the component in the DOM. + // Delete these styles if you don't need them. + min-width: 100px; + width: 100%; + height: 100px; + + background: red; + + display: flex; + justify-content: center; + align-items: center; + + h3 { + color: white; + } +} \ No newline at end of file diff --git a/pgml-dashboard/src/components/navigation/left_nav/blog/blog_controller.js b/pgml-dashboard/src/components/navigation/left_nav/blog/blog_controller.js new file mode 100644 index 000000000..b29d328ab --- /dev/null +++ b/pgml-dashboard/src/components/navigation/left_nav/blog/blog_controller.js @@ -0,0 +1,14 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = [] + static outlets = [] + + initialize() { + console.log('Initialized navigation-left-nav-blog') + } + + connect() {} + + disconnect() {} +} \ No newline at end of file diff --git a/pgml-dashboard/src/components/navigation/left_nav/blog/mod.rs b/pgml-dashboard/src/components/navigation/left_nav/blog/mod.rs new file mode 100644 index 000000000..cff49f773 --- /dev/null +++ b/pgml-dashboard/src/components/navigation/left_nav/blog/mod.rs @@ -0,0 +1,26 @@ +use crate::components::cms::IndexLink; +use pgml_components::component; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default)] +#[template(path = "navigation/left_nav/blog/template.html")] +pub struct Blog { + nav_title: String, + nav_links: Vec, +} + +impl Blog { + pub fn new(links: &Vec) -> Blog { + Blog { + nav_links: links.clone(), + ..Default::default() + } + } + + pub fn title(mut self, title: &str) -> Self { + self.nav_title = title.to_owned(); + self + } +} + +component!(Blog); diff --git a/pgml-dashboard/templates/layout/nav/side.html b/pgml-dashboard/src/components/navigation/left_nav/blog/template.html similarity index 71% rename from pgml-dashboard/templates/layout/nav/side.html rename to pgml-dashboard/src/components/navigation/left_nav/blog/template.html index 30ab6b3e8..1d5a3a392 100644 --- a/pgml-dashboard/templates/layout/nav/side.html +++ b/pgml-dashboard/src/components/navigation/left_nav/blog/template.html @@ -1,10 +1,10 @@ <% if !nav_links.is_empty() {%> -