From ad578d9c3d2997e46e201567da94b33e1f119203 Mon Sep 17 00:00:00 2001 From: Torsten Date: Sun, 29 Jan 2023 13:48:37 +0200 Subject: [PATCH] hoist option values out of helper to merged module as config --- app/assets/stylesheets/merged/merged.css | 475 +++++++++++++++++- app/helpers/merged/options_helper.rb | 99 +--- app/models/merged/option_definition.rb | 15 + config/merged/option_definitions.yml | 5 + config/merged/section_styles.yml | 2 +- config/tailwind.config.js | 3 +- .../merged/install/templates/initializer.rb | 55 ++ lib/merged.rb | 63 +++ 8 files changed, 605 insertions(+), 112 deletions(-) diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index be2d667..2fa0b3b 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/app/assets/stylesheets/merged/merged.css @@ -1744,6 +1744,10 @@ select { min-width: 100%; } +.max-w-none { + max-width: none; +} + .max-w-\[1920px\] { max-width: 1920px; } @@ -1849,6 +1853,10 @@ select { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.resize { + resize: both; +} + .appearance-none { -webkit-appearance: none; -moz-appearance: none; @@ -2262,21 +2270,6 @@ select { background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.bg-slate-50 { - --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity)); -} - -.bg-zinc-50 { - --tw-bg-opacity: 1; - background-color: rgb(250 250 250 / var(--tw-bg-opacity)); -} - -.bg-yellow-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 252 232 / var(--tw-bg-opacity)); -} - .bg-cover { background-size: cover; } @@ -2668,14 +2661,6 @@ select { text-decoration-line: underline; } -.opacity-10 { - opacity: 0.1; -} - -.opacity-90 { - opacity: 0.9; -} - .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); @@ -2854,6 +2839,10 @@ select { color: rgb(37 99 235 / var(--tw-text-opacity)); } +.prose-headings\:text-inherit :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *))) { + color: inherit; +} + @media (prefers-color-scheme: dark) { .peer:focus ~ .peer-focus\:dark\:text-blue-500 { --tw-text-opacity: 1; @@ -2912,6 +2901,10 @@ select { margin: 2rem; } + .md\:m-4 { + margin: 1rem; + } + .md\:my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; @@ -2959,6 +2952,220 @@ select { gap: 2rem; } + .md\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .md\:prose-lg :where(p):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .md\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .md\:prose-lg :where(h1):not(:where([class~="not-prose"] *)) { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .md\:prose-lg :where(h2):not(:where([class~="not-prose"] *)) { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .md\:prose-lg :where(h3):not(:where([class~="not-prose"] *)) { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .md\:prose-lg :where(h4):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .md\:prose-lg :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg :where(video):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg :where(figure):not(:where([class~="not-prose"] *)) { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .md\:prose-lg :where(code):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + } + + .md\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) { + font-size: 0.8666667em; + } + + .md\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) { + font-size: 0.875em; + } + + .md\:prose-lg :where(pre):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .md\:prose-lg :where(ol):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.5555556em; + } + + .md\:prose-lg :where(ul):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.5555556em; + } + + .md\:prose-lg :where(li):not(:where([class~="not-prose"] *)) { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .md\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.4444444em; + } + + .md\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.4444444em; + } + + .md\:prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + } + + .md\:prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; + } + + .md\:prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.3333333em; + } + + .md\:prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.3333333em; + } + + .md\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-lg :where(hr):not(:where([class~="not-prose"] *)) { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .md\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .md\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .md\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .md\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .md\:prose-lg :where(table):not(:where([class~="not-prose"] *)) { + font-size: 0.8888889em; + line-height: 1.5; + } + + .md\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)) { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .md\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; + } + + .md\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; + } + + .md\:prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .md\:prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; + } + + .md\:prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; + } + + .md\:prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .md\:prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; + } + .md\:p-12 { padding: 3rem; } @@ -3075,6 +3282,197 @@ select { gap: 3rem; } + .lg\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .lg\:prose-xl :where(p):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl :where([class~="lead"]):not(:where([class~="not-prose"] *)) { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .lg\:prose-xl :where(blockquote):not(:where([class~="not-prose"] *)) { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .lg\:prose-xl :where(h1):not(:where([class~="not-prose"] *)) { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .lg\:prose-xl :where(h2):not(:where([class~="not-prose"] *)) { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .lg\:prose-xl :where(h3):not(:where([class~="not-prose"] *)) { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .lg\:prose-xl :where(h4):not(:where([class~="not-prose"] *)) { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .lg\:prose-xl :where(img):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl :where(video):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl :where(figure):not(:where([class~="not-prose"] *)) { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl :where(figure > *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-xl :where(figcaption):not(:where([class~="not-prose"] *)) { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .lg\:prose-xl :where(code):not(:where([class~="not-prose"] *)) { + font-size: 0.9em; + } + + .lg\:prose-xl :where(h2 code):not(:where([class~="not-prose"] *)) { + font-size: 0.8611111em; + } + + .lg\:prose-xl :where(h3 code):not(:where([class~="not-prose"] *)) { + font-size: 0.9em; + } + + .lg\:prose-xl :where(pre):not(:where([class~="not-prose"] *)) { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .lg\:prose-xl :where(ol):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; + margin-bottom: 1.2em; + padding-left: 1.6em; + } + + .lg\:prose-xl :where(ul):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; + margin-bottom: 1.2em; + padding-left: 1.6em; + } + + .lg\:prose-xl :where(li):not(:where([class~="not-prose"] *)) { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .lg\:prose-xl :where(ol > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.4em; + } + + .lg\:prose-xl :where(ul > li):not(:where([class~="not-prose"] *)) { + padding-left: 0.4em; + } + + .lg\:prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .lg\:prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; + } + + .lg\:prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.2em; + } + + .lg\:prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) { + margin-top: 1.2em; + } + + .lg\:prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 1.2em; + } + + .lg\:prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .lg\:prose-xl :where(hr):not(:where([class~="not-prose"] *)) { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .lg\:prose-xl :where(hr + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-xl :where(h2 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-xl :where(h3 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-xl :where(h4 + *):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-xl :where(table):not(:where([class~="not-prose"] *)) { + font-size: 0.9em; + line-height: 1.5555556; + } + + .lg\:prose-xl :where(thead th):not(:where([class~="not-prose"] *)) { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .lg\:prose-xl :where(thead th:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; + } + + .lg\:prose-xl :where(thead th:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; + } + .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; @@ -3094,13 +3492,32 @@ select { padding-top: 4rem; padding-bottom: 4rem; } + + .lg\:prose-xl :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .lg\:prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) { + padding-left: 0; + } + + .lg\:prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) { + padding-right: 0; + } + + .lg\:prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) { + margin-top: 0; + } + + .lg\:prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) { + margin-bottom: 0; + } } @media (min-width: 1280px) { - .xl\:m-20 { - margin: 5rem; - } - .xl\:m-8 { margin: 2rem; } @@ -3109,6 +3526,10 @@ select { margin: 3.5rem; } + .xl\:m-20 { + margin: 5rem; + } + .xl\:mx-auto { margin-left: auto; margin-right: auto; diff --git a/app/helpers/merged/options_helper.rb b/app/helpers/merged/options_helper.rb index 8a34fa1..0f9d6e2 100644 --- a/app/helpers/merged/options_helper.rb +++ b/app/helpers/merged/options_helper.rb @@ -38,7 +38,7 @@ module Merged def order_option(section , clazz = "") if section.has_option?("order") - clazz += " order-last" if section.option('order') == "right" + clazz += " " + " order-last" if section.option('order') == "right" end {class: clazz} end @@ -46,7 +46,7 @@ module Merged def text_align_option(section , clazz = "") if section.has_option?("text_align") # text-center , text-left , text-right , leave comment for tailwind - clazz += " text-#{section.option('text_align')}" + clazz += " " + " text-#{section.option('text_align')}" end {class: clazz} end @@ -55,11 +55,11 @@ module Merged if section.has_option?("item_align") case section.option("item_align") when "left" - clazz += " justify-start" + clazz += " " + " justify-start" when "right" - clazz += " justify-end" + clazz += " " + " justify-end" else - clazz += " justify-center" + clazz += " " + " justify-center" end end {class: clazz } @@ -68,112 +68,45 @@ module Merged def background_option(section , clazz = "") if section.has_option?("background") option = section.option('background') - clazz += bg_for(section) - clazz += " text-white" if option.include?("solid") + clazz += " " + Merged.background[section.option('background')] || "" end {class: clazz} end def margin_option(section , clazz = "") return {class: clazz} unless section.has_option?("margin") - margin = { "none" => " m-0" , - "small" => " 2 md:4 lg:6 xl:m-8" , - "medium" => " 5 md:8 lg:10 xl:m-14" , - "large" => " 8 md:12 lg:16 xl:m-20" , - }[section.option("margin")] || "" + margin = Merged.margin[section.option("margin")] || "" {class: clazz + margin} end def text_color_option(section , clazz = "") if section.has_option?("text_color") - clazz += color_for(section) + clazz += " " + Merged.text_color[section.option("text_color")] || "" end {class: clazz } end def shade_option(section , clazz = "") if section.has_option?("shade_color") - clazz += shade_for(section) + clazz += " " + Merged.shade_color[section.option("shade_color")] || "" end {class: clazz } end - def text_column_option( section) - option = section.option('columns') - option = 2 if option.blank? - case option - when "3" - columns = "columns-1 md:columns-2 lg:columns-3" - when "4" - columns = "columns-1 md:columns-2 lg:columns-3 xl:columns-4" - else # two - columns = "columns-1 md:columns-2" + def text_column_option( section ) + if section.has_option?("text_columns") + clazz += " " + Merged.text_columns[section.option("text_columns")] || "" end - {class: columns } + {class: clazz } end def column_option(section) - option = section.option('columns') - case option - when "1" - columns = "grid-cols-1" - when "3" - columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" - when "4" - columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4" - when "5" - columns = "grid-cols-1 md:grid-cols-3 lg:grid-cols-5" - when "6" - columns = "grid-cols-2 md:grid-cols-4 lg:grid-cols-6" - else # two - columns = "grid-cols-1 md:grid-cols-2" + if section.has_option?("columns") + clazz += " " + Merged.text_columns[section.option("columns")] || "" end - columns += " gap-8 md:gap-12 lg:gap-16" - {class: columns } + {class: clazz } end - private - # need full color names for tailwind to pick it up - def bg_for( section ) - { "white" => " bg-white" , - "none" => "" , - "light_blue" => " bg-cyan-100" , - "light_gray" => " bg-gray-100" , - "light_orange" => " bg-orange-50" , - "solid_blue" => " bg-cyan-700" , - "solid_red" => " bg-amber-600" , - "solid_green" => " bg-green-700" , - "solid_petrol" => " bg-teal-700" , - "solid_indigo" => " bg-cyan-900" , - "solid_black" => " bg-slate-900" , - }[section.option('background')] || "" - end - # need full color names for tailwind to pick it up - def color_for( section ) - { "white" => " text-white", - "none" => "", - "light_blue" => " text-cyan-100" , - "light_gray" => " text-gray-100" , - "solid_blue" => " text-cyan-700" , - "solid_red" => " text-orange-800" , - "solid_green" => " text-green-700" , - "solid_petrol" => " text-teal-700" , - "solid_indigo" => " text-indigo-800" , - "solid_black" => " text-slate-800" , - }[section.option("text_color")] || "" - end - # need full color names for tailwind to pick it up - - def shade_for( section ) - { "white_25" => " bg-white/25", - "none" => "", - "black_25" => " bg-black/25" , - "light_blue_25" => " bg-cyan-100/25" , - "light_red_25" => " bg-orange-300/25" , - "solid_blue_25" => " bg-cyan-700/25" , - "solid_red_25" => " bg-orange-800/25" , - }[section.option("shade_color")] || "" - end end end diff --git a/app/models/merged/option_definition.rb b/app/models/merged/option_definition.rb index a4239bd..9a1a2eb 100644 --- a/app/models/merged/option_definition.rb +++ b/app/models/merged/option_definition.rb @@ -1,4 +1,17 @@ module Merged + + # Quite simple mapping from name to usually a selection of values. + # Options have type that can be set but usually is inferred from + # wether there is one values (select) other wise text. + # date is also supported. + # + # a corresponding ./app/views/merged/sections/_option_form_TYPE.haml + # nust exist to render the type. + # + # Also values may be provided by a module function/attribute on Merged. + # eg option text_color (also shade_color) have a Merged.text_color that return a + # hash. In this case so it is easy to customize the colors of the app. + # class OptionDefinition < SharedBase fields :name , :default , :description , :values , :type @@ -13,11 +26,13 @@ module Merged end def has_values? + return true if Merged.respond_to?( name.to_sym ) return false if attributes[:values].nil? ! attributes[:values].empty? end def values + return Merged.send(name.to_sym).keys if Merged.respond_to?( name.to_sym ) return [] unless has_values? attributes[:values].split(" ") end diff --git a/config/merged/option_definitions.yml b/config/merged/option_definitions.yml index 147d424..8f64011 100644 --- a/config/merged/option_definitions.yml +++ b/config/merged/option_definitions.yml @@ -117,3 +117,8 @@ :values: left-top left left-bottom top center bottom right-top right right-bottom :default: center :id: 21 +- :name: text_columns + :description: Number of text columns in a newspaper style layout + :values: 2 3 4 5 + :default: 3 + :id: 22 diff --git a/config/merged/section_styles.yml b/config/merged/section_styles.yml index 97828dc..e5950a6 100644 --- a/config/merged/section_styles.yml +++ b/config/merged/section_styles.yml @@ -175,6 +175,6 @@ - text options: - order - - columns + - text_columns - background - text_color diff --git a/config/tailwind.config.js b/config/tailwind.config.js index 6aeaec4..a959c69 100644 --- a/config/tailwind.config.js +++ b/config/tailwind.config.js @@ -3,7 +3,8 @@ const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { content: [ './public/*.html', - './app/helpers/**/*.rb', + './app/**/*.rb', + './lib/**/*.rb', './app/javascript/**/*.js', './app/views/**/*.{erb,haml,html,slim}' ], diff --git a/lib/generators/merged/install/templates/initializer.rb b/lib/generators/merged/install/templates/initializer.rb index 88fe621..07982fb 100644 --- a/lib/generators/merged/install/templates/initializer.rb +++ b/lib/generators/merged/install/templates/initializer.rb @@ -9,3 +9,58 @@ Merged.images_dir = "merged" # Notice that the data is ALWAYS inside a merged directory, # so in the default case Rails.root/merged/*.yml Merged.data_dir = "." + + +# text colors, keys are options shown to user, values what gets replaced +Merged.text_color = { "white" => "text-white", + "none" => "", + "light_blue" => "text-cyan-100", + "light_gray" => "text-gray-100", + "solid_blue" => "text-cyan-700", + "solid_red" => "text-orange-800", + "solid_green" => "text-green-700", + "solid_petrol" => "text-teal-700", + "solid_indigo" => "text-indigo-800", + "solid_black" => "text-slate-800", + } + +# margin option, keys are options shown to user, values what gets replaced +Merged.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",} + +# background colors +Merged.background = {"white" => "bg-white", + "none" => "", + "light_blue" => "bg-cyan-100", + "light_gray" => "bg-gray-100", + "light_orange" => "bg-orange-50", + "solid_blue" => "bg-cyan-700 text-white", + "solid_red" => "bg-amber-600 text-white", + "solid_green" => "bg-green-700 text-white", + "solid_petrol" => "bg-teal-700 text-white", + "solid_indigo" => "bg-cyan-900 text-white", + "solid_black" => "bg-slate-900 text-white", } + +# shade options +Merged.shade_color = {"white_25" => "bg-white/25", + "none" => "", + "black_25" => "bg-black/25", + "light_blue_25" => "bg-cyan-100/25", + "light_red_25" => "bg-orange-300/25", + "solid_blue_25" => "bg-cyan-700/25", + "solid_red_25" => "bg-orange-800/25", } + +# amount of text columns +Merged.text_columns = { + "3" => "columns-1 md:columns-2 lg:columns-3", + "4" => "columns-1 md:columns-2 lg:columns-3 xl:columns-4", + "2" => "columns-1 md:columns-2" } + +Merged.columns = { "1" => "grid-cols-1", + "2" => "grid-cols-1 md:grid-cols-2" + "3" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", + "4" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4", + "5" => "grid-cols-1 md:grid-cols-3 lg:grid-cols-5", + "6" => "grid-cols-2 md:grid-cols-4 lg:grid-cols-6", } diff --git a/lib/merged.rb b/lib/merged.rb index 207d4d3..0da9e72 100644 --- a/lib/merged.rb +++ b/lib/merged.rb @@ -8,7 +8,70 @@ module Merged # Directory inside the app/assets/images mattr_accessor :images_dir @@images_dir = "merged" + # directory in root to store data mattr_accessor :data_dir @@data_dir = "." + + # text colors, keys are options shown to user, values what gets replaced + mattr_accessor :text_color + @@text_color = { "white" => "text-white", + "none" => "", + "light_blue" => "text-cyan-100", + "light_gray" => "text-gray-100", + "solid_blue" => "text-cyan-700", + "solid_red" => "text-orange-800", + "solid_green" => "text-green-700", + "solid_petrol" => "text-teal-700", + "solid_indigo" => "text-indigo-800", + "solid_black" => "text-slate-800", + } + + # margin option, keys are options shown to user, values what gets replaced + mattr_accessor :margin + @@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",} + + # background colors + mattr_accessor :background + @@background = {"white" => "bg-white", + "none" => "", + "light_blue" => "bg-cyan-100", + "light_gray" => "bg-gray-100", + "light_orange" => "bg-orange-50", + "solid_blue" => "bg-cyan-700 text-white", + "solid_red" => "bg-amber-600 text-white", + "solid_green" => "bg-green-700 text-white", + "solid_petrol" => "bg-teal-700 text-white", + "solid_indigo" => "bg-cyan-900 text-white", + "solid_black" => "bg-slate-900 text-white", } + + # shade options + mattr_accessor :shade_color + @@shade_color = {"white_25" => "bg-white/25", + "none" => "", + "black_25" => "bg-black/25", + "light_blue_25" => "bg-cyan-100/25", + "light_red_25" => "bg-orange-300/25", + "solid_blue_25" => "bg-cyan-700/25", + "solid_red_25" => "bg-orange-800/25", } + + # amount of text columns + mattr_accessor :text_columns + @@text_columns = { + "3" => "columns-1 md:columns-2 lg:columns-3", + "4" => "columns-1 md:columns-2 lg:columns-3 xl:columns-4", + "2" => "columns-1 md:columns-2" } + + # amount of text columns + mattr_accessor :columns + @@columns = { "1" => "grid-cols-1", + "2" => "grid-cols-1 md:grid-cols-2" + "3" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", + "4" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4", + "5" => "grid-cols-1 md:grid-cols-3 lg:grid-cols-5", + "6" => "grid-cols-2 md:grid-cols-4 lg:grid-cols-6", } + end