breeze_cms 1.0.2 → 1.1.0

data/app/views/breeze/view/_section_half_slider.haml

@@ -0,0 +1,69 @@
+%section.overflow-hidden.grid.grid-cols-1.m-5.md:m-12.lg:m-20.md:grid-cols-2{id: section.type_id}
+  %div{ order_option(section)}
+    .swiper{ class: "swiper-#{section.id}"}
+      .swiper-wrapper
+        - template = "breeze/view/cards/" + section.card_template
+        - section.cards.each do |card|
+          .swiper-slide{ column_option(section)}
+            = render( template , card: card)
+
+      .swiper-pagination
+      .swiper-button-prev
+      .swiper-button-next
+
+  .content-center.px-8.md:px-12.lg:px-16.lg:py-8{ background_option(section)}
+    .max-w-xl{options(section , :text_align , :text_color)}
+      %h2.section_header.text-2xl.font-bold.md:text-4xl
+        = section.header_text(current_lang)
+      .section_text.mt-8{ prose_classes }
+        = markdown(section,current_lang)
+      =view_button(section , "my-4")
+
+%script{:src => "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"}
+
+:javascript
+  var breaks = #{slider_columns_option(section).to_json};
+  document.addEventListener("DOMContentLoaded", function(event) {
+
+    function initSwiper(){
+      const swiper = new Swiper(".swiper-#{section.id}", {
+        loop: true,
+        speed: 1500,
+        breakpoints: breaks ,
+        autoplay: {
+          delay: #{1200 + rand(600)} ,
+        },
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      });
+    }
+
+    // Intersection Observer to detect when the element is in view
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                initSwiper(); // Initialize Swiper when the element is in view
+                observer.unobserve(entry.target); // Stop observing after initialization
+            }
+        });
+    });
+
+    // Start observing the Swiper container
+    const swiperContainer = document.querySelector(".swiper-#{section.id}");
+    observer.observe(swiperContainer);
+
+  });
+
+  var head = document.getElementsByTagName("head")[0];
+  cssLink = document.createElement("link");
+  cssLink.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
+  cssLink.rel="stylesheet";
+  cssLink.id="dynamic-css";
+  cssLink.media="screen";
+  cssLink.type="text/css";
+  head.appendChild(cssLink);

data/app/views/breeze/view/_section_large_image.haml

@@ -7,4 +7,4 @@
         %h2.section_header.text-4xl.font-bold.text-center.mb-4.lg:mb-8= section.header_text(current_lang)
         .section_text.mt-3{ prose_classes }
           = markdown(section,current_lang)
-        =view_button(section , "my-2")
+        =view_button(section , "my-4")

data/app/views/breeze/view/_section_slider.haml

@@ -4,10 +4,11 @@
       .px-4.py-4.md:py-10.lg:py-16.mx-5.md:mx-12.lg:mx-20{options(section , :text_align , :text_color)}
         %h1.section_header.text-2xl.font-bold.tracking-tight.sm:text-4xl
           = section.header_text(current_lang)
-        .section_text.mt-4.text-lg.pt-10{ prose_classes }
-          = markdown(section,current_lang)
-        =view_button(section , "my-2")
-  .swiper
+        -unless( section.text_text(current_lang).blank?)
+          .section_text.mt-4.text-lg.pt-10{ prose_classes }
+            = markdown(section,current_lang)
+        =view_button(section , "my-4")
+  .swiper{ class: "swiper-#{section.id}"}
     .swiper-wrapper
       - template = "breeze/view/cards/" + section.card_template
       - section.cards.each do |card|
@@ -23,19 +24,40 @@
 :javascript
   var breaks = #{slider_columns_option(section).to_json};
   document.addEventListener("DOMContentLoaded", function(event) {
-    const swiper = new Swiper('.swiper', {
-      loop: true,
-      speed: 1500,
-      breakpoints: breaks ,
-      autoplay: true,
-      pagination: {
-        el: '.swiper-pagination',
-      },
-      navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
-      },
+
+    function initSwiper(){
+      const swiper = new Swiper(".swiper-#{section.id}", {
+        loop: true,
+        speed: 1500,
+        breakpoints: breaks ,
+        autoplay: {
+          delay: #{slider_speed(section)} ,
+        },
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      });
+    }
+
+
+    // Intersection Observer to detect when the element is in view
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                initSwiper(); // Initialize Swiper when the element is in view
+                observer.unobserve(entry.target); // Stop observing after initialization
+            }
+        });
     });
+
+    // Start observing the Swiper container
+    const swiperContainer = document.querySelector(".swiper-#{section.id}");
+    observer.observe(swiperContainer);
+
   });
 
   var head = document.getElementsByTagName("head")[0];

data/app/views/breeze/view/_section_small_image.haml

@@ -5,4 +5,4 @@
     %h2.section_header.text-4xl.font-bold.text-left.mb-4.lg:mb-8{text_align_option(section)}= section.header_text(current_lang)
     .section_text.mt-3{ prose_classes }
       = markdown(section,current_lang)
-    =view_button(section , "my-2")
+    =view_button(section , "my-4")

data/app/views/breeze/view/cards/_big_card.haml

@@ -0,0 +1,10 @@
+.flex.justify-center.flex-col.lg:flex-row{options(card , :margin , :background ), id: card.type_id}
+  .flex.justify-center.h-60.w-full.overflow-hidden{order_option(card, "lg:w-1/3")}
+    = image_for(card ,"object-cover")
+  .columns-1.md:columns-2.max-w-full.items-center.w-full.max-w.px-6.mx-auto.mt-6.lg:mt-0{text_color_option(card, "lg:w-2/3")}
+    -unless( card.header_text(current_lang).blank?)
+      %h2.section_header.text-4xl.font-bold.text-left.mb-4.lg:mb-8{text_align_option(card)}= card.header_text(current_lang)
+    -unless( card.text_text(current_lang).blank?)
+      .section_text.mt-3{ prose_classes }
+        = markdown(card,current_lang)
+    =view_button(card , "my-4")

data/app/views/breeze/view/cards/_card_image_wide.haml

@@ -0,0 +1,10 @@
+%section.overflow-hidden.bg-cover.bg-no-repeat{bg(card , "h-full") , id: card.type_id}
+  .px-4.py-24.sm:px-6.lg:px-8
+    .flex{ item_align_option( card )}
+      .p-8.md:p-12.lg:px-16.lg:py-24{options(card , :shade )}
+        .mx-auto.max-w-xl{ options(card , :text_color, :text_align)}
+          %h2.section_header.text-2xl.font-bold.md:text-5xl
+            = card.header_text(current_lang)
+          .section_text.sm:mt-4.text-2xl{ prose_classes }
+            = markdown(card,current_lang)
+          =view_button(card , "my-4")

data/app/views/breeze/view/cards/_faq_item.haml

@@ -0,0 +1,9 @@
+.transition-all.duration-200.bg-white.border.border-gray-200.shadow-lg.cursor-pointer.hover:bg-gray-50{options(card, :text_color)}
+  %button.flex.items-center.justify-between.w-full.px-4.py-5.sm:p-6{"data-state" => "closed",
+      :type => "button" , id: "question#{card.section.id}_#{card.id}" }
+    %span.flex.text-lg.font-semibold.text-black= card.header_text(current_lang)
+    %svg.w-6.h-6.text-gray-400{fill: :none, stroke: :currentColor, id: "arrow#{card.section.id}_#{card.id}",
+          :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+      %path{:d => "M19 9l-7 7-7-7", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}
+  .px-4.pb-5.sm:px-6.sm:pb-6{style: "display:none" , id: "answer#{card.section.id}_#{card.id}"}
+    %p= markdown(card,current_lang)

data/app/views/breeze/view/cards/_form_field.haml

@@ -1,8 +1,8 @@
 -if card.option("form_type") == "message"
   .relative.z-0.col-span-2.mt-3
-    %textarea.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header_text(current_lang) , :placeholder => " ", :rows => "5"}=params[card.header_text(current_lang)]
-    %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card.header_text(current_lang)
+    %textarea.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header_text(current_lang) , :placeholder => " ", :rows => "5"}=params[card.header_text(current_lang)]
+    %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card.header_text(current_lang)
 -else
   .relative.z-0.mt-3
-    %input.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-sm.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header_text(current_lang), :placeholder => " " , "value" => params[card.header_text(current_lang)], :type => "text"}
-    %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-sm.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card_field_name(card)
+    %input.peer.block.w-full.appearance-none.border-0.border-b.border-gray-500.bg-transparent.px-0.text-gray-900.focus:border-blue-600.focus:outline-none.focus:ring-0{:class => "py-2.5", :name => card.header_text(current_lang), :placeholder => " " , "value" => params[card.header_text(current_lang)], :type => "text"}
+    %label.absolute.top-3.-z-10.-translate-y-6.scale-75.transform.text-gray-500.duration-300.peer-placeholder-shown:translate-y-0.peer-placeholder-shown:scale-100.peer-focus:left-0.peer-focus:-translate-y-6.peer-focus:scale-75.peer-focus:text-blue-600.peer-focus:dark:text-blue-500{:class => "origin-[0]"}= card_field_name(card)

data/app/views/layouts/breeze/_header.haml

@@ -3,7 +3,7 @@
     %a{:href => "/"}
       %span.sr-only Home
       =image_tag("breeze/home" , class: "h-10")
-    %a{:href => "/breeze/pages"}
+    %a{:href => breeze.pages_path}
       %span.sr-only Breeze Home
       =image_tag("breeze/breeze_logo" , class: "h-10")
 

data/config/breeze/card_styles.yml

@@ -1,4 +1,35 @@
 ---
+- :template: card_normal_round
+  :header: Standard card with rounded look
+  :text: Otherwise quite similar to standard. But there is gap under the image.
+        Images can be wide or square, for 2 column 800 wide,
+        3 column 600 , 4 column 400
+
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+    - text_align
+    - button_link
+    - button_text
+- :template: card_normal_square
+  :header: Standard card with square image
+  :text: Image, header, text, normal stuff. No margin between image and text.
+        Text alignment option. Also option to turn upside down with order.
+        Images can be wide or square, for 2 column 800 wide,
+        3 column 600 , 4 column 400
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+    - text_align
+    - order
+    - button_link
+    - button_text
 - :template: card_full_image
   :header: Full background
   :text: Text in box on top of the imag. Adjustable background
@@ -12,6 +43,27 @@
     - background
     - text_color
     - text_align
+- :template: card_image_wide
+  :header: Full image header with adjustable text
+  :text: Really a section for use in slider, large picture background with
+    Header and text on top.
+    Adjustable text text alignment (left, center, right).
+    Text may be slightly shaded for readability,
+    text color can be changed too.
+    Image should be 1600 wide and can be between 400 and 900 for
+    different looks
+  :fields:
+    - header
+    - text
+  :options:
+    - fixed
+    - text_color
+    - text_align
+    - item_align
+    - image_align
+    - shade_color
+    - button_link
+    - button_text
 - :template: card_large_image
   :header: Image as is
   :text: Image as is, ie no sizing
@@ -36,22 +88,6 @@
     - text_color
     - order
     - text_align
-- :template: card_normal_square
-  :header: Standard card with square image
-  :text: Image, header, text, normal stuff. No margin between image and text.
-        Text alignment option. Also option to turn upside down with order.
-        Images can be wide or square, for 2 column 800 wide,
-        3 column 600 , 4 column 400
-  :fields:
-    - header
-    - text
-  :options:
-    - background
-    - text_color
-    - text_align
-    - order
-    - button_link
-    - button_text
 - :template: card_wide_square
   :header: Sideway card with square image
   :text: Much like standard square card, just turned sideways.
@@ -98,21 +134,6 @@
     - text_align
     - button_link
     - button_text
-- :template: card_normal_round
-  :header: Standard card with rounded look
-  :text: Otherwise quite similar to standard. But there is gap under the image.
-        Images can be wide or square, for 2 column 800 wide,
-        3 column 600 , 4 column 400
-
-  :fields:
-    - header
-    - text
-  :options:
-    - background
-    - text_color
-    - text_align
-    - button_link
-    - button_text
 - :template: form_field
   :header: A single field in a form
   :text: The header is the Name of the field, the description
@@ -123,3 +144,35 @@
   :options:
     - compulsory
     - form_type
+- :template: faq_item
+  :header: A question answer in an faq section
+  :text: The header is the qustion, the description
+        is the answer. (No image)
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+- :template: big_card
+  :header: Section card with one third image header and larger text area.
+  :text: Card to add text heacy content to slider. Not really in column
+    Smaller picture with Header and text offset that use more space.
+    Adjustable text alignment (left, center, right).
+    Text section may have background color.
+    Text color can be changed too
+  :fields:
+    - header
+    - text
+  :options:
+  :fields:
+    - header
+    - text
+  :options:
+    - margin
+    - order
+    - text_color
+    - text_align
+    - background
+    - button_link
+    - button_text

data/config/breeze/option_definitions.yml

@@ -41,8 +41,8 @@
   :id: 7
 - :name: margin
   :description: Most sections have standard margin of 20. This option makes it possible
-    to remove that
-  :values: none small medium large
+    to remove that. Also auto is possible with varying results (depends on content)
+  :values: none small medium large auto
   :default: large
   :id: 8
 - :name: button_text
@@ -132,3 +132,10 @@
   :values:
   :default:
   :id: 25
+- :name: main_image
+  :description: Image that should be shown in posts (fb)
+      Should be the number of a breeze picture,
+      ie what is in the url eg 381 for /breeze/images/381
+  :values:
+  :default:
+  :id: 26

data/config/breeze/page_styles.yml

@@ -6,6 +6,7 @@
   :options:
     - title
     - description
+    - main_image
 - :type: blog
   :description: An news or similar article.
   :section_template: blog_header

data/config/breeze/section_styles.yml

@@ -30,6 +30,26 @@
     - item_align
     - button_link
     - button_text
+- :template: section_half_slider
+  :header: Half text, half slider with optional header with text
+  :text: Header. text button on the right (constant) slider left.
+      Slider slides any (number) of cards.
+      Columns means how many slides are visible on desktop.
+      Optional header text on top of the slider (like the section with header/text)
+  :cards: true
+  :fields:
+    - header
+    - text
+  :options:
+    - slider_columns
+    - order
+    - background
+    - text_color
+    - margin
+    - text_align
+    - item_align
+    - button_link
+    - button_text
 - :template: section_feature
   :header: Feature section with 2 column,
   :text: A split header with two column layout on the right.
@@ -179,6 +199,9 @@
     - handler
     - background
     - text_color
+    - margin
+    - text_align
+    - item_align
 - :template: blog_header
   :header: Start of blog, with image left or right
   :text: Image on one side, header and text on the other.
@@ -193,3 +216,34 @@
     - text_columns
     - background
     - text_color
+- :template: section_faq
+  :header: Faq section with Cards as questions
+  :text: A header with text and collapsable faq layout.
+        Only works proper with faq_item card style
+  :cards: true
+  :fields:
+    - header
+    - text
+  :options:
+    - background
+    - text_color
+    - text_align
+    - margin
+- :template: section_slider
+  :header: Slider with optional header with text
+  :text: Slider slides any (number) of cards. Columns means how many
+    slides are visible on desktop.
+    Optional header text on top of the slider (like the section with header/text)
+  :cards: true
+  :fields:
+    - header
+    - text
+  :options:
+    - slider_columns
+    - background
+    - text_color
+    - margin
+    - text_align
+    - item_align
+    - button_link
+    - button_text

data/config/initializers/deepl.rb

@@ -0,0 +1,5 @@
+require "deepl"
+DeepL.configure do |config|
+  config.auth_key = "#{Rails.application.credentials.deepl}"
+  config.host = 'https://api-free.deepl.com' # Default value is 'https://api.deepl.com'
+end if Rails.application.credentials.deepl

data/config/routes.rb

@@ -9,6 +9,7 @@ Breeze::Engine.routes.draw do
 
 
   resources :pages , except: [:edit , :new] , shallow: true  do
+    post :translate
     resources :sections , except: [:new] do
       post :new #new is post because it already create the section
       get :set_image
@@ -36,6 +37,8 @@ Breeze::Engine.routes.draw do
     post :scale
   end
 
-  resources :translations
-  
+  resources :translations do
+    post :auto
+  end
+
 end

data/lib/breeze/engine.rb

@@ -83,7 +83,7 @@ module ActionDispatch::Routing
 
           post "/form" , to: "breeze/form#post" , as: :post_form
           get "/news/:id" , to: "breeze/view#page" , id: :id , as: :view_blog
-          get ":id" , to: "breeze/view#page" , id: :id , as: :view_page
+          get ":id" , to: "breeze/view#page" , id: :id , as: :view_page, constraints: { format: 'html' }
 
           engine_path = options[:path] || "/breeze"
           if ! Rails.env.production? or options[:production].present?

data/lib/breeze/version.rb

@@ -1,3 +1,3 @@
 module Breeze
-  VERSION = "1.0.2"
+  VERSION = "1.1.0"
 end

data/lib/breeze.rb

@@ -44,7 +44,9 @@ module Breeze
   @@margin =  { "none" =>  "m-0",
               "small" => " m-2 md:m-4  lg:6  xl:m-8",
               "medium" => "m-5 md:m-8  lg:10 xl:m-14",
-              "large" => " m-8 md:m-12 lg:16 xl:m-20",}
+              "large" => " m-8 md:m-12 lg:16 xl:m-20",
+              "auto" => "mx-auto" ,
+              }
 
   # background colors
   mattr_accessor :background