pFad - Phonifier reborn

@@ -88,7 +88,7 @@ <% } %>

diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/call/call.scss b/pgml-dashboard/src/components/pages/blog/blog_search/call/call.scss new file mode 100644 index 000000000..96ed0721d --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/call/call.scss @@ -0,0 +1,32 @@ +div[data-controller="pages-blog-blog-search-call"] { + .btn-primary { + @include media-breakpoint-down(md) { + padding: 12px 16px; + } + } + + .btn-tag { + border: 2px solid #{$gray-200}; + background-color: transparent; + color: #{$gray-200}; + + &.selected{ + background-color: #{$gray-100}; + border-color: #{$gray-100}; + color: #{$gray-900}; + } + + &:hover:not(.all-tags), &:hover:not(.selected):is(.all-tags) { + background-color: transparent; + color: #{$gray-100}; + border-color: #{$gray-100}; + @include bold_by_shadow(var(#{$gray-100})); + } + + &:active:not(.all-tags), &:active:not(.selected):is(.all-tags){ + background-color: #{$gray-200}; + border-color: #{$gray-200}; + color: #{$gray-900}; + } + } +} diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/call/call_controller.js b/pgml-dashboard/src/components/pages/blog/blog_search/call/call_controller.js new file mode 100644 index 000000000..0075fab59 --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/call/call_controller.js @@ -0,0 +1,57 @@ +import { Controller } from '@hotwired/stimulus' + +export default class extends Controller { + static targets = [ + 'searchFrame', + 'searchInput', + 'tagLink', + 'removeTags' + ] + + static classes = ["selected"] + + static outlets = [] + + connect() { + this.timer + this.tags = "" + } + + search() { + clearTimeout(this.timer) + this.timer = setTimeout(() => { + this.searchFrameTarget.src = `/search_blog?query=${this.searchInputTarget.value}&tag=${this.tags}` + }, 250) + } + + tag(e) { + if( e.target.classList.contains(this.selectedClass) ) { + e.target.classList.remove(this.selectedClass) + this.tags = "" + this.removeTagsTarget.classList.add(this.selectedClass) + } else { + e.target.classList.add(this.selectedClass) + this.tags = e.params.tag + this.removeTagsTarget.classList.remove(this.selectedClass) + } + + for( let tag of this.tagLinkTargets) { + if( tag != e.target) { + tag.classList.remove(this.selectedClass) + } + } + + this.search() + } + + removeTags() { + for( let tag of this.tagLinkTargets) { + tag.classList.remove(this.selectedClass) + } + + this.removeTagsTarget.classList.add(this.selectedClass) + + this.tags = "" + this.search() + } +} diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/call/mod.rs b/pgml-dashboard/src/components/pages/blog/blog_search/call/mod.rs new file mode 100644 index 000000000..abb15fd14 --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/call/mod.rs @@ -0,0 +1,14 @@ +use pgml_components::component; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default)] +#[template(path = "pages/blog/blog_search/call/template.html")] +pub struct Call {} + +impl Call { + pub fn new() -> Call { + Call {} + } +} + +component!(Call); diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/call/template.html b/pgml-dashboard/src/components/pages/blog/blog_search/call/template.html new file mode 100644 index 000000000..b81ac297c --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/call/template.html @@ -0,0 +1,39 @@ +<% + use crate::components::loading::Message as Loading; + + // leave out Company and Customer Stories for until tags are consistently used in blog posts + let tag_links = Vec::from([ + "Engineering", + "Product", + // "Company", + // "Customer Stories", + ]); + + let selected_class = "selected"; +%> + +

+ + <% for tag in tag_links {%> + + <% } %> +

+ + + +

+ <%+ Loading::new().message("Fetching all blogs") %> +

+ +

diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/mod.rs b/pgml-dashboard/src/components/pages/blog/blog_search/mod.rs new file mode 100644 index 000000000..a58656acc --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/mod.rs @@ -0,0 +1,10 @@ +// This file is automatically generated. +// You shouldn't modify it manually. + +// src/components/pages/blog/blog_search/call +pub mod call; +pub use call::Call; + +// src/components/pages/blog/blog_search/response +pub mod response; +pub use response::Response; diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/response/mod.rs b/pgml-dashboard/src/components/pages/blog/blog_search/response/mod.rs new file mode 100644 index 000000000..ac8a89af1 --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/response/mod.rs @@ -0,0 +1,131 @@ +use crate::components::cards::blog::article_preview::{ArticlePreview, DocMeta}; +use pgml_components::component; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default)] +#[template(path = "pages/blog/blog_search/response/template.html")] +pub struct Response { + html: Vec, +} + +impl Response { + pub fn new() -> Response { + Response { html: Vec::new() } + } + + pub fn pattern(mut self, mut articles: Vec, is_search: bool) -> Response { + let mut cycle = 0; + let mut html: Vec = Vec::new(); + + let (layout, repeat) = if is_search { + ( + Vec::from([ + Vec::from(["default", "default", "default"]), + Vec::from(["default", "default", "default"]), + Vec::from(["default", "default", "default"]), + Vec::from(["default", "default", "default"]), + ]), + 2, + ) + } else { + // Apply special layout if the user did not specify a query. + // Blogs are in cms Summary order, make the first post the big card and second long card. + let big_index = articles.remove(0); + let long_index = articles.remove(0); + let small_image_index = articles.remove(0); + articles.insert(1, long_index); + articles.insert(2, big_index); + articles.insert(6, small_image_index); + + ( + Vec::from([ + Vec::from(["default", "long"]), + Vec::from(["big", "default", "default"]), + Vec::from(["default", "show_image", "default"]), + Vec::from(["default", "default", "default"]), + Vec::from(["long", "default"]), + Vec::from(["default", "default", "default"]), + Vec::from(["default", "long"]), + Vec::from(["default", "default", "default"]), + ]), + 4, + ) + }; + + articles.reverse(); + while articles.len() > 0 { + // Get the row pattern or repeat the last two row patterns. + let pattern = match layout.get(cycle) { + Some(pattern) => pattern, + _ => { + let a = cycle - layout.len() + repeat; + &layout[layout.len() - repeat + (a % repeat)] + } + }; + + // if there is enough items to complete the row pattern make the row otherwise just add default cards. + if articles.len() > pattern.len() { + let mut row = Vec::new(); + for _ in 0..pattern.len() { + row.push(articles.pop()) + } + + if pattern[0] != "big" { + for (i, doc) in row.into_iter().enumerate() { + let template = pattern[i]; + html.push( + ArticlePreview::new(&doc.unwrap()) + .card_type(template) + .render_once() + .unwrap(), + ) + } + } else { + html.push(format!( + r#" +

+ {} +

+ {} + {} +

+ +

+ {} +

+ "#, + ArticlePreview::new(&row[0].clone().unwrap()) + .big() + .render_once() + .unwrap(), + ArticlePreview::new(&row[1].clone().unwrap()).render_once().unwrap(), + ArticlePreview::new(&row[2].clone().unwrap()).render_once().unwrap(), + ArticlePreview::new(&row[0].clone().unwrap()).render_once().unwrap(), + ArticlePreview::new(&row[1].clone().unwrap()).render_once().unwrap(), + ArticlePreview::new(&row[2].clone().unwrap()).render_once().unwrap() + )) + } + } else { + html.push( + ArticlePreview::new(&articles.pop().unwrap()) + .card_type("default") + .render_once() + .unwrap(), + ) + } + cycle += 1; + } + + self.html = html; + self + } +} + +component!(Response); diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/response/response.scss b/pgml-dashboard/src/components/pages/blog/blog_search/response/response.scss new file mode 100644 index 000000000..3290b6734 --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/response/response.scss @@ -0,0 +1,23 @@ +div[data-controller="pages-blog-blog-search-response"] { + +} + +turbo-frame.blog-frame { + .loading { + display: none; + } + + .content { + display: block; + } +} + +turbo-frame[aria-busy="true"].blog-frame { + .loading { + display: block; + } + .content { + display: none; + } +} + diff --git a/pgml-dashboard/src/components/pages/blog/blog_search/response/template.html b/pgml-dashboard/src/components/pages/blog/blog_search/response/template.html new file mode 100644 index 000000000..66c39402a --- /dev/null +++ b/pgml-dashboard/src/components/pages/blog/blog_search/response/template.html @@ -0,0 +1,24 @@ +<% + use crate::components::loading::Message as Loading; +%> + +

+ <% if html.len() > 0 {%> + <% for item in html { %> + <%- item %> + <% } %> + <% } else {%> +

No blogs satisfy that search

+ <% } %> +

+ +

+ <%+ Loading::new().message("Searching ...") %> +

+ diff --git a/pgml-dashboard/src/components/pages/blog/landing_page/mod.rs b/pgml-dashboard/src/components/pages/blog/landing_page/mod.rs index ec472607b..3b37769c0 100644 --- a/pgml-dashboard/src/components/pages/blog/landing_page/mod.rs +++ b/pgml-dashboard/src/components/pages/blog/landing_page/mod.rs @@ -1,6 +1,4 @@ -use crate::api::cms::Collection; use crate::components::cards::blog::article_preview::DocMeta; -use crate::components::cards::blog::ArticlePreview; use crate::components::notifications::marketing::FeatureBanner; use crate::guards::Cluster; use crate::Notification; @@ -11,155 +9,21 @@ use sailfish::TemplateOnce; #[template(path = "pages/blog/landing_page/template.html")] pub struct LandingPage { feature_banner: FeatureBanner, - index: Vec, - is_search: bool, + featured_cards: Vec, } impl LandingPage { pub fn new(context: &Cluster) -> LandingPage { LandingPage { feature_banner: FeatureBanner::from_notification(Notification::next_feature(Some(context))), - index: Vec::new(), - is_search: false, + featured_cards: Vec::new(), } } - pub async fn index(mut self, collection: &Collection) -> Self { - let urls = collection.get_all_urls(); - - for url in urls { - let file = collection.url_to_path(url.as_ref()); - - let doc = crate::api::cms::Document::from_path(&file).await.unwrap(); - - let meta = DocMeta { - description: doc.description, - author: doc.author, - author_image: doc.author_image, - date: doc.date, - image: doc.image, - featured: doc.featured, - tags: doc.tags, - title: doc.title, - path: doc.url, - }; - - self.index.push(meta) - } + pub fn featured_cards(mut self, docs: Vec) -> Self { + self.featured_cards = docs; self } - - pub fn pattern(mut index: Vec, is_search: bool) -> Vec { - let mut cycle = 0; - let mut html: Vec = Vec::new(); - - // blogs are in cms Summary order, make the first post the big card and second long card. - let big_index = index.remove(0); - let long_index = index.remove(0); - let small_image_index = index.remove(0); - index.insert(1, long_index); - index.insert(2, big_index); - index.insert(6, small_image_index); - - let (layout, repeat) = if is_search { - ( - Vec::from([ - Vec::from(["default", "show_image", "default"]), - Vec::from(["default", "default", "default"]), - Vec::from(["show_image", "default", "default"]), - Vec::from(["default", "default", "default"]), - ]), - 2, - ) - } else { - ( - Vec::from([ - Vec::from(["default", "long"]), - Vec::from(["big", "default", "default"]), - Vec::from(["default", "show_image", "default"]), - Vec::from(["default", "default", "default"]), - Vec::from(["long", "default"]), - Vec::from(["default", "default", "default"]), - Vec::from(["default", "long"]), - Vec::from(["default", "default", "default"]), - ]), - 4, - ) - }; - - index.reverse(); - while index.len() > 0 { - // Get the row pattern or repeat the last two row patterns. - let pattern = match layout.get(cycle) { - Some(pattern) => pattern, - _ => { - let a = cycle - layout.len() + repeat; - &layout[layout.len() - repeat + (a % repeat)] - } - }; - - // if there is enough items to complete the row pattern make the row otherwise just add default cards. - if index.len() > pattern.len() { - let mut row = Vec::new(); - for _ in 0..pattern.len() { - row.push(index.pop()) - } - - if pattern[0] != "big" { - for (i, doc) in row.into_iter().enumerate() { - let template = pattern[i]; - html.push( - ArticlePreview::new(&doc.unwrap()) - .card_type(template) - .render_once() - .unwrap(), - ) - } - } else { - html.push(format!( - r#" -

- {} -

- {} - {} -

- -

- {} -

- "#, - ArticlePreview::new(&row[0].clone().unwrap()) - .big() - .render_once() - .unwrap(), - ArticlePreview::new(&row[1].clone().unwrap()).render_once().unwrap(), - ArticlePreview::new(&row[2].clone().unwrap()).render_once().unwrap(), - ArticlePreview::new(&row[0].clone().unwrap()).render_once().unwrap(), - ArticlePreview::new(&row[1].clone().unwrap()).render_once().unwrap(), - ArticlePreview::new(&row[2].clone().unwrap()).render_once().unwrap() - )) - } - } else { - html.push( - ArticlePreview::new(&index.pop().unwrap()) - .card_type("default") - .render_once() - .unwrap(), - ) - } - cycle += 1; - } - - html - } } component!(LandingPage); diff --git a/pgml-dashboard/src/components/pages/blog/landing_page/template.html b/pgml-dashboard/src/components/pages/blog/landing_page/template.html index 2182ab0b8..cdabe3541 100644 --- a/pgml-dashboard/src/components/pages/blog/landing_page/template.html +++ b/pgml-dashboard/src/components/pages/blog/landing_page/template.html @@ -1,19 +1,14 @@ <% use crate::components::Carousel; use crate::components::cards::blog::ArticlePreview; - use crate::components::pages::blog::LandingPage; use crate::components::sections::common_resources::{Cards, CommonResources}; + use crate::components::pages::blog::blog_search::call::Call as BlogSearchCall; - let featured_cards = index - .clone() - .into_iter() - .filter(|x| x - .featured) - .map(|x| ArticlePreview::new(&x) - .featured() - .render_once() - .unwrap()) - .collect::>(); + + + let cards = featured_cards.iter().map(|card| { + ArticlePreview::new(card).featured().render_once().unwrap() + }).collect::>(); %>

diff --git a/pgml-dashboard/src/components/pages/blog/mod.rs b/pgml-dashboard/src/components/pages/blog/mod.rs index 4cfb933ea..26eb7f93a 100644 --- a/pgml-dashboard/src/components/pages/blog/mod.rs +++ b/pgml-dashboard/src/components/pages/blog/mod.rs @@ -1,6 +1,9 @@ // This file is automatically generated. // You shouldn't modify it manually. +// src/components/pages/blog/blog_search +pub mod blog_search; + // src/components/pages/blog/landing_page pub mod landing_page; pub use landing_page::LandingPage; diff --git a/pgml-dashboard/src/components/search/button/button.scss b/pgml-dashboard/src/components/search/button/button.scss index 51f36b250..7d61d95b7 100644 --- a/pgml-dashboard/src/components/search/button/button.scss +++ b/pgml-dashboard/src/components/search/button/button.scss @@ -1,9 +1,2 @@ div[data-controller="search-button"] { - .input { - background: linear-gradient(265deg, #212224 20.41%, #17181A 83.75%); - } - - .input-text { - color: #{$gray-300}; - } } diff --git a/pgml-dashboard/src/components/search/button/template.html b/pgml-dashboard/src/components/search/button/template.html index 0c1fc646f..2add2f5e9 100644 --- a/pgml-dashboard/src/components/search/button/template.html +++ b/pgml-dashboard/src/components/search/button/template.html @@ -1,5 +1,5 @@

<%- message %>

No blogs satisfy that search

PostgresML Blog

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.