change views to use objects instead of yaml

app/controllers/merged/view_controller.rb

@@ -2,10 +2,7 @@ module Merged
   class ViewController < ::ApplicationController
 
     def view
-      page = params[:id]
+      @page = Page.find(params[:id])
-      # assert file exists
-      @data = YAML.load_file(Rails.root.join('cms' , "#{page}.yaml"))
-      #assert data is an array (of hashes?)
     end
 
   end

app/helpers/merged/view_helper.rb

@@ -2,19 +2,19 @@ module Merged
   module ViewHelper
     # section should be hash with at least 'template' key
     def find_template(section)
-      "merged/view/" + section["template"]
+      "merged/view/" + section.template
     end
 
     def bg(section)
-      puts "--#{Image.root}/#{section['image']}--"
+      puts "--#{Image.image_root}/#{section.image}--"
-      img = asset_url( "#{Image.root}/#{section['image']}" )
+      img = asset_url( "#{Image.image_root}/#{section.image}" )
       "background-image: url('#{img}');"
     end
     def image_for(section , classes)
-      image_tag("#{Image.root}/#{section['image']}" , class: classes)
+      image_tag("#{Image.image_root}/#{section.image}" , class: classes)
     end
     def has_button(section)
-      section['button']
+      section.content['button']
     end
   end
 end

app/models/merged/section.rb

@@ -31,6 +31,25 @@ module Merged
       end
     end
 
+    [:button_link , :button_text ].each do |meth|
+      define_method(meth) do
+        @content["options"][meth.to_s]
+      end
+    end
+
+    def has_option?(option)
+      options.has_key?(option)
+    end
+
+    def options
+      @content["options"] || {}
+    end
+
+    def set_option( option , value)
+      @content["options"] = {} if @content["options"].nil?
+      options[option] = value
+    end
+
     def cards?
       ! cards.empty?
     end

app/views/merged/elements/_button.haml

@@ -1,2 +0,0 @@
-%a.inline-block.rounded.bg-emerald-600.px-12.py-3.text-sm.font-medium.text-white.transition.hover:bg-emerald-700.focus:outline-none.focus:ring.focus:ring-yellow-400{:href => button["link"]}
-  =button['text']

app/views/merged/view/_section_2_col.haml

@@ -2,10 +2,10 @@
   .flex.items-center.justify-center.flex-1
     .max-w-prose.px-4.py-8.mx-auto.text-center
       %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
-        = section["header"]
+        = section.header
       %p.mt-4.text-gray-500
-        = section["text"]
+        = section.text
-  - template = "merged/view/cards/" + section["card_template"]
+  - template = "merged/view/cards/" + section.card_template
   .grid.grid-cols-1.md:grid-cols-2
-    - section["cards"].each do |element|
+    - section.cards.each do |element|
       = render( template , element: element)

app/views/merged/view/_section_full_left1.haml

@@ -2,12 +2,12 @@
   .p-8.md:p-12.lg:px-16.lg:py-24
     .max-w-lg.text-center.sm:text-left{:class => "bg-black/25"}
       %h2.text-2xl.font-bold.text-white.sm:text-3xl.md:text-5xl
-        = section["header"]
+        = section.header
       %p.hidden.max-w-md.md:mt-6.md:block.md:text-lg.md:leading-relaxed{:class => "text-white/90"}
-        = section["text"]
+        = section.text
-      -if section["button_text"]
+      -if section.has_option?("button_text")
         .mt-4.sm:mt-8
           %a.inline-flex.items-center.rounded-full.bg-indigo-700.px-8.py-3.text-white.shadow-lg.transition.hover:bg-indigo-600.focus:outline-none.focus:ring{:href => section["button_link"]}
-            %span.text-sm.font-medium section["button_text"]
+            %span.text-sm.font-medium section.option("button_text")
             %svg.ml-3.h-5.w-5{:fill => "none", :stroke => "currentColor", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
               %path{:d => "M17 8l4 4m0 0l-4 4m4-4H3", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => "2"}

app/views/merged/view/_section_full_left2.haml

@@ -4,11 +4,10 @@
       .p-8.md:p-12.lg:px-16.lg:py-24{class: 'bg-black/25'}
         .mx-auto.max-w-xl.text-center
           %h2.text-2xl.font-bold.text-white.md:text-5xl
-            = section["header"]
+            = section.header
           %p.hidden.sm:mt-4.sm:block.text-2xl.text-white
-            = section["text"]
+            = section.text
           .mt-4.md:mt-8
-            -if section["button_text"]
+            -if section.has_option?("button_text")
-              %a.inline-block.rounded.border.border-white.bg-white.px-12.py-3.text-sm.font-medium.text-blue-500.transition.hover:bg-transparent.hover:text-white.focus:outline-none.focus:ring.focus:ring-yellow-400{:href => section["button_link"]}
+              = render 'merged/view/elements/button' , section: section
-                =section["button_text"]
       .grid.grid-cols-2.gap-4.md:grid-cols-1.lg:grid-cols-2

app/views/merged/view/_section_full_up.haml

@@ -2,6 +2,6 @@
   .flex.items-center.justify-center.flex-1
     .max-w-xl.px-4.py-8.mx-auto.text-center
       %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
-        = section["header"]
+        = section.header
       %p.mt-4.text-gray-500
-        = section["text"]
+        = section.text

app/views/merged/view/_section_half_header.haml

@@ -2,13 +2,13 @@
   .mx-auto.max-w-screen-xl.px-4.py-16.sm:px-6.sm:py-24.lg:px-8
     .max-w-3xl
       %h2.text-3xl.font-bold.sm:text-4xl
-        = section["header"]
+        = section.header
     .mt-8.grid.grid-cols-1.gap-8.lg:grid-cols-2.lg:gap-16
       .relative.h-64.overflow-hidden.sm:h-80.lg:h-full
         %img.absolute.inset-0.h-full.w-full.object-cover{:alt => "Party", :src => "https://images.unsplash.com/photo-1496843916299-590492c751f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1771&q=80"}/
       .lg:py-16
         %article.space-y-4.text-gray-600
           %p
-            = section["text"]
+            = section.text
           %p
-            = section["text"]
+            = section.text

app/views/merged/view/_section_half_left.haml

@@ -3,9 +3,9 @@
   .p-8.m-5.bg-cyan-100.md:p-12.lg:px-16.lg:py-24
     .mx-auto.max-w-xl.text-center.sm:text-left
       %h2.text-2xl.font-bold.text-gray-900.md:text-3xl
-        = section["header"]
+        = section.header
       %p.hidden.text-gray-500.md:mt-4.md:block
-        = section["text"]
+        = section.text
       .mt-4.md:mt-8
-        -if section["button"]
+        -if section.has_option?("button_text")
-          = render 'merged/view/elements/button' , button: section["button"]
+          = render 'merged/view/elements/button' , section: section

app/views/merged/view/_section_half_right.haml

@@ -2,10 +2,10 @@
   .p-8.m-5.bg-cyan-100.md:p-12.lg:px-16.lg:py-24
     .mx-auto.max-w-xl.text-center.sm:text-left
       %h2.text-2xl.font-bold.text-gray-900.md:text-3xl
-        = section["header"]
+        = section.header
       %p.hidden.text-gray-500.md:mt-4.md:block
-        = section["text"]
+        = section.text
       .mt-4.md:mt-8
-        -if section["button"]
+        -if section.has_option?("button_text")
-          = render 'merged/view/elements/button' , button: section["button"]
+          = render 'merged/view/elements/button' , section: section
   = image_for( section , "p-5 h-56 w-full object-cover sm:h-full")

app/views/merged/view/cards/_card_full_image.haml

@@ -2,6 +2,6 @@
   = image_for( element , "absolute inset-0 h-full w-full object-cover hover:scale-110 ease-in duration-700")
   .relative.w-full.bg-cyan-600.m-2.p-4.text-center.tracking-widest.text-white.transition-colors.group-hover:bg-cyan-700{:class => "sm:w-1/2"}
     %h3.text-lg.uppercase
-      = element["header"]
+      = element.header
     %p.mt-1.text-xs.font-medium
-      = element["text"]
+      = element.text

app/views/merged/view/elements/_button.haml

@@ -1,2 +1,2 @@
-%a.inline-block.rounded.bg-emerald-600.px-12.py-3.text-sm.font-medium.text-white.transition.hover:bg-emerald-700.focus:outline-none.focus:ring.focus:ring-yellow-400{:href => button["link"]}
+%a.inline-block.rounded.bg-emerald-600.px-12.py-3.text-sm.font-medium.text-white.transition.hover:bg-emerald-700.focus:outline-none.focus:ring.focus:ring-yellow-400{:href => section.button_link}
-  =button['text']
+  =section.button_text

app/views/merged/view/view.haml

@@ -1,3 +1,3 @@
-- @data.each do |section|
+- @page.sections.each do |section|
   - template = find_template(section)
   = render( template , section: section)