maglevcms 1.5.1 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f2ab19ced5aac5add6f9567d35c4ff2afd691a9df28d6427848add5b4e485c8
-  data.tar.gz: 275f52591a49d27d99af9cd7d1d9e31204318c818cbc82bc02c7aba266336f23
+  metadata.gz: 45b336e791f110d5c7c1982631955c14664c2a66184b44b83a31f5689800d1d0
+  data.tar.gz: 65ea43f9f7006d128a21adad2c832f896d314715d83bc47283070ae60fb41dff
 SHA512:
-  metadata.gz: d12fbd67952a61a321f253d6ec8ac8c97f981b880572bf3d8f1d65a95a825d29adba0041c53929c26a631a7f8e1f99e9bfbd907d82a53a263777ed9a751334f0
-  data.tar.gz: 0a149c32927a7f9f478f489b281957a1f7ec32b5c2ee2ac3f08cfd6fad1d51ac59a6bca6f660af64f35bdc7833bec98443f23d9807ef5e515a22d112dee01f4a
+  metadata.gz: 17be0c14ba106d648cf9fa13953adff4e63f342a6d7d6acaa215cc6200f41c8d710e2d0b3c14d803f92ee4521c977f03b8c8389cd5351eb60bd87c23fbe50d73
+  data.tar.gz: 0adbc6d304a7b46cf1f4b1b6640fde924bad6d456931f0527adba2b01bcf3f06211f2cbe14f80c0fa93950f05d64eb01c7fb67cd136988d756103b2346b7c177

data/app/components/maglev/page_component.rb

@@ -2,18 +2,19 @@
 
 module Maglev
   class PageComponent < BaseComponent
-    attr_reader :site, :theme, :page, :page_sections, :templates_root_path, :config
+    attr_reader :site, :theme, :page, :page_sections, :templates_root_path, :config, :rendering_mode
 
-    # rubocop:disable Lint/MissingSuper, Metrics/ParameterLists
-    def initialize(site:, theme:, page:, page_sections:, templates_root_path:, config:)
+    # rubocop:disable Lint/MissingSuper
+    def initialize(site:, theme:, page:, page_sections:, context:)
       @site = site
       @theme = theme
       @page = page
       @page_sections = page_sections
-      @templates_root_path = templates_root_path
-      @config = config
+      @templates_root_path = context[:templates_root_path]
+      @config = context[:config]
+      @rendering_mode = context[:rendering_mode]
     end
-    # rubocop:enable Lint/MissingSuper, Metrics/ParameterLists
+    # rubocop:enable Lint/MissingSuper
 
     # Sections within a dropzone
     def sections
@@ -37,7 +38,8 @@ module Maglev
         parent: self,
         definition: definition,
         attributes: attributes.deep_transform_keys! { |k| k.to_s.underscore.to_sym },
-        templates_root_path: templates_root_path
+        templates_root_path: templates_root_path,
+        rendering_mode: rendering_mode
       )
     end
   end

data/app/components/maglev/section_component.rb

@@ -7,16 +7,17 @@ module Maglev
     extend Forwardable
     def_delegators :parent, :site, :config
 
-    attr_reader :parent, :id, :type, :settings, :attributes, :definition, :templates_root_path
+    attr_reader :parent, :id, :type, :settings, :attributes, :definition, :templates_root_path, :rendering_mode
 
     # rubocop:disable Lint/MissingSuper
-    def initialize(parent:, attributes:, definition:, templates_root_path:)
+    def initialize(parent:, attributes:, definition:, templates_root_path:, rendering_mode:)
       @parent = parent # aka a PageComponent
       @id = attributes[:id]
       @type = attributes[:type]
       @definition = definition
       @attributes = attributes
       @templates_root_path = templates_root_path
+      @rendering_mode = rendering_mode
 
       @settings = settings_proxy(
         build_settings_map(attributes[:settings])
@@ -30,12 +31,12 @@ module Maglev
 
     # rubocop:disable Rails/OutputSafety
     def dom_data
-      "data-maglev-section-id=\"#{id}\"".html_safe
+      "data-maglev-section-id=\"#{id}\" data-maglev-section-type=\"#{type}\"".html_safe
     end
     # rubocop:enable Rails/OutputSafety
 
     def tag_data
-      { maglev_section_id: id }
+      { maglev_section_id: id, maglev_section_type: type }
     end
 
     def blocks
@@ -53,6 +54,8 @@ module Maglev
         template: "#{templates_root_path}/sections/#{definition.category}/#{type}",
         locals: { section: self, maglev_section: self }
       )
+    rescue StandardError => e
+      handle_error(e)
     end
 
     private
@@ -92,5 +95,32 @@ module Maglev
         attributes: block_attributes
       )
     end
+
+    def handle_error(exception)
+      throw exception if %i[live section].include?(rendering_mode) || Rails.env.test?
+
+      Rails.logger.error [
+        "⚠️  [Maglev] Error when rendering a \"#{type}\" type section ⚠️",
+        exception.message,
+        *exception.backtrace
+      ].join($INPUT_RECORD_SEPARATOR)
+
+      render_error
+    end
+
+    def render_error
+      <<~HTML
+        <div #{dom_data} style="padding: 5rem 0;">
+          <div style="max-width: 40rem; margin: 0 auto; background-color: rgb(254 242 242); color: rgb(153 27 27); padding: 1rem; border-radius: 0.375rem;">
+            <h3 style="font-weight: 500; color: rgb(153 27 27); font-size: 0.875rem; line-height: 1.25rem;">
+              We've encountered an error while rendering the <strong>"#{type}"</strong> section.
+            </h3>
+            <p style="margin-top: 0.5rem; font-size: 0.775rem; line-height: 1.25rem; color: rgb(185 28 28);">
+              Check out your application logs for more details.
+            </p>
+          </div>
+        </div>
+      HTML
+    end
   end
 end

data/app/controllers/concerns/maglev/content_locale_concern.rb

@@ -5,7 +5,9 @@ module Maglev
     extend ActiveSupport::Concern
 
     included do
-      helper_method :content_locale
+      alias_method :maglev_content_locale, :content_locale
+
+      helper_method :maglev_content_locale, :content_locale
     end
 
     private

data/app/controllers/concerns/maglev/services_concern.rb

@@ -24,7 +24,8 @@ module Maglev
     def build_maglev_service_context
       ::Maglev::ServiceContext.new(
         rendering_mode: maglev_rendering_mode,
-        controller: self
+        controller: self,
+        site: nil
       )
     end
 

data/app/controllers/maglev/page_preview_controller.rb

@@ -23,6 +23,8 @@ module Maglev
       super.tap do |site|
         raise ActiveRecord::RecordNotFound if site.nil?
 
+        maglev_services.context.site = site
+
         site.style = JSON.parse(params[:style]) if params[:style]
       end
     end

data/app/frontend/admin/controllers/iframe_controller.js

@@ -5,7 +5,7 @@ export default class extends Controller {
     this.element.addEventListener('load', () => {
       setTimeout(() => {
         let height =
-          this.element.contentDocument.querySelector('body').clientHeight
+          this.element.contentDocument.querySelector('[data-maglev-section-id]').clientHeight
 
         if (height < 200) height = 200
 

data/app/frontend/admin/index.js

@@ -4,7 +4,7 @@ import { Application } from 'stimulus'
 import { registerControllers } from 'stimulus-vite-helpers'
 
 const application = Application.start()
-const controllers = import.meta.globEager('./**/*_controller.js')
+const controllers = import.meta.glob('./**/*_controller.js', { eager: true })
 registerControllers(application, controllers)
 
 window.stimulusApplication = application

data/app/frontend/editor/components/kit/color-input/core-input.vue

@@ -11,6 +11,7 @@
     >
 
     <input
+      :id="name"
       type="text"
       :value="inputColor"
       @input="updateInput"
@@ -42,6 +43,7 @@ export default {
   name: 'CoreInput',
   components: { PresetDropdown },
   props: {
+    name: { type: String, default: 'color' },
     value: { type: String },
     presets: {
       type: Array,

data/app/frontend/editor/components/kit/color-input.vue

@@ -6,7 +6,7 @@
       v-if="showLabel"
     >
       <span class="pr-2">{{ label }}</span>
-      <core-input :presets="presets" v-model="updatableValue" />
+      <core-input :name="name" :presets="presets" v-model="updatableValue" />
     </label>
   </div>
 </template>

data/app/frontend/editor/components/kit/icon-input.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <label class="block font-semibold text-gray-800" :for="name">
+    <div class="block font-semibold text-gray-800" @click="focus()">
       {{ label }}
-    </label>
+    </div>
     <div class="mt-1">
       <div
         class="flex items-center justify-center bg-gray-100 h-24 rounded"

data/app/frontend/editor/components/kit/image-input.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <label class="block font-semibold text-gray-800" :for="name">
+    <div class="block font-semibold text-gray-800" @click="focus()">
       {{ label }}
-    </label>
+    </div>
     <div class="mt-1">
       <div
         class="flex items-center justify-center bg-gray-100 h-48 rounded"

data/app/frontend/editor/components/kit/link-input.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
-    <label class="block font-semibold text-gray-800" :for="name">
+    <div class="block font-semibold text-gray-800" @click="focus()">
       {{ label }}
-    </label>
+    </div>
 
     <uikit-text-input
+      :name="name"
       v-model="textInput"
       :showLabel="false"
       :placeholder="$t('linkInput.nestedTextPlaceholder')"
@@ -82,6 +83,9 @@ export default {
     },
   },
   methods: {
+    focus() {
+      this.openLinkPickerModal()
+    },
     setLink(link) {
       this.$emit('input', {
         ...pick(

data/app/frontend/editor/components/kit/rich-text-input.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <label
+    <div
       class="block font-semibold text-gray-800"
       :for="name"
       @click="focus()"
     >
       {{ label }}
-    </label>
+    </div>
     <div class="mt-1">
       <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
         <div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1">

data/app/frontend/editor/components/kit/search-input.vue

@@ -8,6 +8,7 @@
     </button>
 
     <input
+      name="search-input"
       type="text"
       v-model="query"
       class="block w-full border-0 bg-transparent focus:outline-none placeholder-gray-500"

data/app/frontend/editor/components/kit/select-input.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <label
+    <div
       class="block font-semibold text-gray-800"
-      :for="name"
+      @click="focus()"
       v-if="withLabel"
     >
       {{ label }}
-    </label>
+    </div>
     <div class="relative">
       <button
         class="text-left block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
@@ -51,6 +51,7 @@
       >
         <div class="px-3 pt-1 pb-3" v-if="searchEnabled">
           <input
+            :id="name"
             class="block mt-1 px-3 py-1 w-full border rounded border-gray-300 bg-gray-100 placeholder-gray-500 focus:ring focus:ring"
             type="text"
             v-model="q"
@@ -70,16 +71,16 @@
             class="py-1 px-4 cursor-pointer"
             :class="{
               'rounded-b': index === list.length - 1,
-              'bg-editor-primary text-white': index === focus,
+              'bg-editor-primary text-white': index === focusIndex,
             }"
-            @mouseover="focus = index"
-            @mouseleave="focus = undefined"
+            @mouseover="focusIndex = index"
+            @mouseleave="focusIndex = undefined"
             @click="select(item)"
           >
             <slot
               name="item"
               v-bind:item="item"
-              v-bind:hovered="index === focus"
+              v-bind:hovered="index === focusIndex"
             />
           </div>
         </div>
@@ -111,7 +112,7 @@ export default {
       isOpen: false,
       q: undefined,
       list: undefined,
-      focus: undefined,
+      focusIndex: undefined,
     }
   },
   created() {
@@ -126,13 +127,16 @@ export default {
     },
   },
   methods: {
+    focus() {
+      this.toggle();
+    },
     toggle() {
       this.isOpen = !this.isOpen
     },
     fetch() {
       this.fetchList(this.q).then((list) => {
         this.list = list
-        this.focus = list && list.length > 0 ? 0 : null
+        this.focusIndex = list && list.length > 0 ? 0 : null
       })
     },
     select(value) {
@@ -147,24 +151,24 @@ export default {
       if (!this) return
       switch (event.keyCode) {
         case 13:
-          if (this.focus !== undefined) {
-            this.select(this.list[this.focus])
+          if (this.focusIndex !== undefined) {
+            this.select(this.list[this.focusIndex])
           }
           event.stopPropagation() & event.preventDefault()
           break
         case 38:
-          if (!this.focus) {
-            this.focus = 0
-          } else if (this.focus > 0) {
-            this.focus--
+          if (!this.focusIndex) {
+            this.focusIndex = 0
+          } else if (this.focusIndex > 0) {
+            this.focusIndex--
           }
           event.stopPropagation() & event.preventDefault()
           break
         case 40:
-          if (!this.focus) {
-            this.focus = 0
-          } else if (this.focus < this.list.length - 1) {
-            this.focus++
+          if (!this.focusIndex) {
+            this.focusIndex = 0
+          } else if (this.focusIndex < this.list.length - 1) {
+            this.focusIndex++
           }
           event.stopPropagation() & event.preventDefault()
           break
@@ -174,7 +178,7 @@ export default {
       this.isOpen = false
       this.q = null
       this.list = undefined
-      this.focus = undefined
+      this.focusIndex = undefined
     },
   },
   watch: {

data/app/frontend/editor/components/kit/tabs.vue

@@ -3,7 +3,10 @@
     class="flex flex-col flex-1"
     :class="{ 'overflow-y-hidden': enableOverflow }"
   >
-    <nav class="flex flex-col sm:flex-row" :class="sharedClass">
+    <nav class="flex flex-col sm:flex-row" :class="{
+      [sharedClass]: !isBlank(sharedClass),
+      [navClass]: !isBlank(navClass)
+    }">
       <button
         v-for="(tab, index) in tabs"
         :key="`tab-${index}`"
@@ -19,13 +22,17 @@
         {{ tab.name }}
       </button>
     </nav>
-    <div class="relative -mt-1/2" :class="sharedClass">
+    <div class="relative -mt-1/2" :class="{
+      [sharedClass]: !isBlank(sharedClass),
+      [navClass]: !isBlank(navClass)
+    }">
       <div class="w-full border-gray-200 border-t-2 h-0"></div>
     </div>
     <div
       class="flex-1 mt-4 pb-4"
       :class="{
         [sharedClass]: !isBlank(sharedClass),
+        [panelClass]: !isBlank(panelClass),
         'overflow-y-auto': enableOverflow,
       }"
     >
@@ -35,6 +42,7 @@
           :key="currentTabKey"
           v-on="$listeners"
           v-bind="{ ...otherProps, ...currentTabProps }"
+          class="px-1"
         />
       </transition>
     </div>
@@ -48,6 +56,8 @@ export default {
     tabs: { type: Array, default: () => [] },
     firstIndex: { type: Number, default: 0 },
     otherProps: { type: Object, default: () => ({}) },
+    navClass: { type: String, default: null },
+    panelClass: { type: String, default: null },
     sharedClass: { type: String, default: null },
     enableOverflow: { type: Boolean, default: true },
   },

data/app/frontend/editor/components/kit/text-input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-1">
+  <div class="space-y-1 flex flex-col">
     <label
       class="block font-semibold text-gray-800"
       :for="name"
@@ -15,12 +15,13 @@
       </transition>
     </label>
     <input
+      :id="name"
       type="text"
       :value="value"
       :placeholder="placeholder"
       @blur="blur()"
       @input="updateInput"
-      class="block w-full py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
+      class="block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
       autocomplete="off"
       ref="input"
     />

data/app/frontend/editor/components/kit/textarea-input.vue

@@ -1,6 +1,7 @@
 <template>
-  <div>
+  <div class="space-y-1 flex flex-col">
     <label
+      :for="name"
       class="block font-semibold text-gray-800 flex justify-between items-center"
     >
       <span>{{ label }}</span>
@@ -15,10 +16,11 @@
       >
     </label>
     <textarea
+      :id="name"
       :value="value"
       @blur="blur()"
       @input="updateInput"
-      class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
+      class="block mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
       autocomplete="off"
       ref="input"
       :rows="rows"

data/app/frontend/editor/components/link-picker/index.vue

@@ -4,7 +4,7 @@
       :tabs="tabs"
       :firstIndex="firstTabIndex"
       :otherProps="{ currentLink: link }"
-      sharedClass="px-1/2"
+      navClass="px-1"
       :enableOverflow="false"
       @select-tab="onTabSelected"
       @change="onChange"

data/app/frontend/editor/components/page/edit.vue

@@ -3,7 +3,8 @@
     <uikit-tabs
       :tabs="tabs"
       :otherProps="{ page: editedPage, errors }"
-      sharedClass="px-1/2"
+      navClass="mx-4"
+      panelClass="mx-3"
       class="overflow-y-hidden pb-4"
       @on-change="onChange"
     />

data/app/frontend/editor/components/page/new.vue

@@ -3,7 +3,8 @@
     <uikit-tabs
       :tabs="tabs"
       :otherProps="{ page, errors }"
-      sharedClass="px-1/2"
+      navClass="mx-1"
+      panelClass=""
       class="overflow-y-hidden pb-4"
       @on-change="onChange"
     />

data/app/frontend/editor/components/section-pane/index.vue

@@ -4,7 +4,8 @@
     :firstIndex="tabIndexFromRoute"
     :otherProps="{ sectionId: currentSection.id, settingId }"
     class="overflow-y-hidden"
-    sharedClass="px-4"
+    navClass="px-4"
+    panelClass="px-3"
     ref="tabs"
   />
 </template>

data/app/frontend/editor/services/section.js

@@ -85,7 +85,7 @@ const buildSetting = (setting, sampleContent) => {
   let value = sampleContent ?? setting.default
   switch (setting.type) {
     case 'image':
-      value = typeof value === 'string' ? { url: value } : {}
+      value = typeof value === 'string' ? { url: value } : value || {}
       break
     case 'link':
       value =

data/app/frontend/editor/views/pages/edit.vue

@@ -1,6 +1,6 @@
 <template>
   <layout :title="$t('page.edit.currentPage.title')" :overflowY="false">
-    <div class="flex flex-col flex-1 mx-4 pb-4 overflow-y-hidden">
+    <div class="flex flex-col flex-1 pb-4 overflow-y-hidden">
       <edit-page
         :page="currentPage"
         v-if="currentPage"

data/app/frontend/live-preview-client/index.js

@@ -2,7 +2,6 @@ import { listenMessages } from './message'
 
 const start = () => {
   if (window.location === window.parent.location) {
-    console.log('🚨 not in the Maglev editor')
     return false
   }
   listenMessages()

data/app/helpers/maglev/application_helper.rb

@@ -17,7 +17,8 @@ module Maglev
 
       entries = maglev_asset_manifest.resolve_entries(*%w[live-preview-rails-client], type: :javascript)
 
-      javascript_include_tag(*entries.fetch(:scripts).flatten.uniq, crossorigin: 'anonymous', type: 'module')
+      javascript_include_tag(*entries.fetch(:scripts).flatten.uniq, crossorigin: 'anonymous', type: 'module',
+                                                                    defer: true)
     end
 
     def maglev_asset_manifest

data/app/helpers/maglev/page_preview_helper.rb

@@ -9,8 +9,7 @@ module Maglev
         theme: theme || maglev_theme,
         page: page || maglev_page,
         page_sections: page_sections || maglev_page_sections,
-        templates_root_path: maglev_sections_path,
-        config: maglev_config
+        context: maglev_rendering_context
       ).tap { |component| component.view_context = self }.render.html_safe
     end
     # rubocop:enable Rails/OutputSafety
@@ -44,7 +43,7 @@ module Maglev
 
     def maglev_alt_link(locale, links: nil)
       links ||= maglev_page_fullpaths
-      link = links[locale]
+      link = links[locale.to_sym]
       return nil if link.nil?
 
       "#{request.base_url}#{link}"
@@ -54,6 +53,18 @@ module Maglev
       maglev_site_root_fullpath
     end
 
+    def maglev_current_locale?(locale)
+      locale.to_sym == maglev_content_locale
+    end
+
+    def maglev_rendering_context
+      {
+        templates_root_path: maglev_sections_path,
+        rendering_mode: maglev_rendering_mode,
+        config: maglev_config
+      }
+    end
+
     def rendering_maglev_page?
       controller.class.module_parent.to_s == 'Maglev'
     end

data/app/models/maglev/setting_types/collection_item.rb

@@ -4,7 +4,7 @@
 class Maglev::SettingTypes::CollectionItem < Maglev::SettingTypes::Base
   def cast_value(value)
     if value.is_a?(String)
-      { id: default }
+      { id: value }
     else
       value
     end

data/app/models/maglev/site/locales_concern.rb

@@ -6,7 +6,7 @@ module Maglev::Site::LocalesConcern
 
   included do
     ## serializers ##
-    if Rails::VERSION::MAJOR > 6
+    if Rails::VERSION::MAJOR >= 7 && Rails::VERSION::MINOR.positive?
       serialize :locales, coder: LocalesSerializer
     else
       serialize :locales, LocalesSerializer

data/app/services/maglev/fetch_site.rb

@@ -6,7 +6,7 @@ module Maglev
     include Injectable
 
     def call
-      Maglev::Site.first.tap do |site|
+      @site ||= Maglev::Site.first.tap do |site|
         change_default_locales(site)
       end
     end

data/app/services/maglev/setup_pages.rb

@@ -74,6 +74,9 @@ module Maglev
     def select_site_scoped_sections(sections)
       (sections || []).find_all do |section|
         definition = theme.sections.find(section['type'])
+
+        raise "[Maglev] Unknown section type: #{section['type']}" unless definition
+
         definition.site_scoped?
       end
     end