maglevcms 1.4.0 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03a2b641a732256c52996191d8b8b5acd6fade31e3da46c7400b4ddd19d572b8
-  data.tar.gz: 7707349dac583ee782baf2b5eb6e2b6c4007d0935529c301376a8876a6a985f4
+  metadata.gz: 45b336e791f110d5c7c1982631955c14664c2a66184b44b83a31f5689800d1d0
+  data.tar.gz: 65ea43f9f7006d128a21adad2c832f896d314715d83bc47283070ae60fb41dff
 SHA512:
-  metadata.gz: 48519ed7bfc8b5281297b2996d92a11fa0f9114266e577d05953f507006be5a64d0619ee2cce6c56471c0c4776f3d0706822860f1161163a6ab52ec1e17add3a
-  data.tar.gz: ef616f5afbf2f8a25ffdf59cbb75cc72b0276f723ed68eca78bcc8c6bc9781fa54833dd7617a322a1f704807a4b06cf6d4c2e90bcc2058dcf1bd6c3f2a522fec
+  metadata.gz: 17be0c14ba106d648cf9fa13953adff4e63f342a6d7d6acaa215cc6200f41c8d710e2d0b3c14d803f92ee4521c977f03b8c8389cd5351eb60bd87c23fbe50d73
+  data.tar.gz: 0adbc6d304a7b46cf1f4b1b6640fde924bad6d456931f0527adba2b01bcf3f06211f2cbe14f80c0fa93950f05d64eb01c7fb67cd136988d756103b2346b7c177

data/app/components/maglev/content/image.rb

@@ -24,7 +24,7 @@ module Maglev
       end
 
       def to_s
-        url
+        url || ''
       end
 
       def tag(view_context, options = {})

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/api/assets_controller.rb

@@ -12,7 +12,7 @@ module Maglev
       end
 
       def show
-        @asset = resources.find(params[:id])
+        @asset = resources.find(resource_id)
       end
 
       def create
@@ -21,12 +21,12 @@ module Maglev
       end
 
       def update
-        resources.find(params[:id]).update!(asset_params)
+        resources.find(resource_id).update!(asset_params)
         head :ok
       end
 
       def destroy
-        resources.find(params[:id]).destroy!
+        resources.find(resource_id).destroy!
         head :no_content
       end
 

data/app/controllers/maglev/application_controller.rb

@@ -13,5 +13,10 @@ module Maglev
     def use_engine_vite?
       true
     end
+
+    def resource_id
+      # A standard UUID code contains 32 hex digits along with 4 "-"" symbols
+      Maglev.uuid_as_primary_key? && params[:id] ? params[:id][0..35] : params[:id]
+    end
   end
 end

data/app/controllers/maglev/assets_controller.rb

@@ -3,7 +3,7 @@
 module Maglev
   class AssetsController < ApplicationController
     def show
-      @asset = Maglev::Asset.find(params[:id])
+      @asset = Maglev::Asset.find(resource_id)
       send_data @asset.download, filename: @asset.filename, type: @asset.content_type
     end
   end

data/app/controllers/maglev/editor_controller.rb

@@ -9,7 +9,7 @@ module Maglev
     include Maglev::ContentLocaleConcern
 
     before_action :fetch_maglev_site, only: :show
-    before_action :ensure_content_locale_in_path, only: :show
+    before_action :ensure_path_and_content_locale, only: :show
     before_action :set_content_locale, only: :show
 
     helper_method :maglev_home_page_id
@@ -25,8 +25,10 @@ module Maglev
 
     private
 
-    def ensure_content_locale_in_path
-      redirect_to editor_path('index', locale: default_content_locale) if params[:locale].blank?
+    def ensure_path_and_content_locale
+      return unless params[:path].blank? || params[:locale].blank?
+
+      redirect_to default_maglev_editor_path
     end
 
     def maglev_home_page_id
@@ -46,5 +48,12 @@ module Maglev
     def maglev_rendering_mode
       :editor
     end
+
+    def default_maglev_editor_path
+      editor_path(
+        params[:path] || 'index',
+        locale: params[:locale] || default_content_locale
+      )
+    end
   end
 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/controllers/screenshot_controller.js

@@ -21,7 +21,11 @@ export default class extends Controller {
       '[data-maglev-dropzone]',
     )
     this.sourceTarget.contentWindow
-      .html2canvas(realSource, { allowTaint: true, logging: true, useCORS: true })
+      .html2canvas(realSource, {
+        allowTaint: true,
+        logging: true,
+        useCORS: true,
+      })
       .then((canvas) => {
         this.outputTarget.src = canvas.toDataURL() // for debugging purpose
         axios

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/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <router-view />
-    <modal-root />
+    <uikit-modal-root />
   </div>
 </template>
 

data/app/frontend/editor/components/dynamic-form/dynamic-input.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <text-input
+    <uikit-text-input
       :label="label"
       :name="setting.id"
       :isFocused="isFocused"
@@ -12,7 +12,7 @@
         parseInt(options.nbRows || 1) < 2
       "
     />
-    <textarea-input
+    <uikit-textarea-input
       :label="label"
       :name="setting.id"
       :isFocused="isFocused"
@@ -23,7 +23,7 @@
         setting.type == 'text' && !options.html && parseInt(options.nbRows) > 1
       "
     />
-    <rich-text-input
+    <uikit-rich-text-input
       :label="label"
       :name="setting.id"
       :isFocused="isFocused"
@@ -34,27 +34,27 @@
       v-model="inputValue"
       v-if="setting.type == 'text' && options.html"
     />
-    <image-input
+    <uikit-image-input
       :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       v-model="inputValue"
       v-if="setting.type == 'image'"
     />
-    <icon-input
+    <uikit-icon-input
       :label="label"
       :name="setting.id"
       :isFocused="isFocused"
       v-model="inputValue"
       v-if="setting.type == 'icon'"
     />
-    <checkbox-input
+    <uikit-checkbox-input
       :label="label"
       :name="setting.id"
       v-model="inputValue"
       v-if="setting.type == 'checkbox'"
     />
-    <link-input
+    <uikit-link-input
       :label="label"
       :name="setting.id"
       :isFocused="isFocused"
@@ -62,21 +62,21 @@
       v-model="inputValue"
       v-if="setting.type == 'link'"
     />
-    <color-input
+    <uikit-color-input
       :label="label"
       :name="setting.id"
       v-model="inputValue"
       :presets="options.presets"
       v-if="setting.type == 'color'"
     />
-    <simple-select
+    <uikit-simple-select
       :label="label"
       :name="setting.id"
       v-model="inputValue"
       :selectOptions="options.selectOptions"
       v-if="setting.type == 'select'"
     />
-    <collection-item-input
+    <uikit-collection-item-input
       :label="label"
       :name="setting.id"
       v-model="inputValue"
@@ -84,16 +84,13 @@
       v-if="setting.type == 'collection_item'"
     />
 
-    <divider 
+    <uikit-divider
       :text="label"
       :withHint="options.withHint"
       v-if="setting.type == 'divider'"
     />
 
-    <hint 
-      :text="label"
-      v-if="setting.type == 'hint'"
-    />
+    <uikit-hint :text="label" v-if="setting.type == 'hint'" />
   </div>
 </template>
 
@@ -104,15 +101,17 @@ export default {
     setting: { type: Object, default: () => ({ type: 'text' }) },
     content: { type: Array, required: true },
     isFocused: { type: Boolean, default: false },
-    i18nScope: { type: String, required: false }
+    i18nScope: { type: String, required: false },
   },
   computed: {
     label() {
-      // i18n key examples: 
+      // i18n key examples:
       // - themes.simple.style.settings.main_color
       // - themes.simple.sections.navbar_01.settings.title
       const i18nKey = `${this.i18nScope}.${this.setting.id}`
-      const translation = !this.isBlank(this.i18nScope) ? this.$st(i18nKey) : null
+      const translation = !this.isBlank(this.i18nScope)
+        ? this.$st(i18nKey)
+        : null
       return translation || this.setting.label
     },
     options() {

data/app/frontend/editor/components/dynamic-form/index.vue

@@ -25,7 +25,7 @@ export default {
     settings: { type: Array, default: () => [] },
     content: { type: Array, default: () => [] },
     focusedSetting: { type: String, default: undefined },
-    i18nScope: { type: String, required: false }
+    i18nScope: { type: String, required: false },
   },
   methods: {
     onChange(change) {

data/app/frontend/editor/components/header-nav/device-toggler.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center">
-    <icon
+    <uikit-icon
       v-for="(icon, index) in icons"
       :key="icon.device"
       :name="icon.name"

data/app/frontend/editor/components/header-nav/index.vue

@@ -18,9 +18,9 @@
           }"
         >
           <span>{{ $t('headerNav.pages') }}</span>
-          <page-icon class="ml-4" :page="currentPage" />
+          <uikit-page-icon class="ml-4" :page="currentPage" />
           <span class="ml-2">{{ currentPage.title }}</span>
-          <icon name="arrow-down-s-line" class="ml-3" />
+          <uikit-icon name="arrow-down-s-line" class="ml-3" />
         </router-link>
 
         <separator />
@@ -33,7 +33,7 @@
             'bg-editor-primary bg-opacity-5': isEditPageActive,
           }"
         >
-          <icon name="settings-4-line" size="1.25rem" />
+          <uikit-icon name="settings-4-line" size="1.25rem" />
           <span class="ml-2">{{ $t('headerNav.pageSettings') }}</span>
         </router-link>
 

data/app/frontend/editor/components/header-nav/locale-toggler/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <dropdown placement="bottom" ref="dropdown" class="h-full flex">
+    <uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex">
       <template v-slot:button>
         <button
           class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"
         >
-          <icon name="ri-global-line" class="mr-2" />
+          <uikit-icon name="ri-global-line" class="mr-2" />
           <span class="mr-1">{{ currentLabel }}</span>
-          <icon name="arrow-down-s-line" />
+          <uikit-icon name="arrow-down-s-line" />
         </button>
       </template>
       <template v-slot:content>
@@ -20,7 +20,7 @@
           />
         </div>
       </template>
-    </dropdown>
+    </uikit-dropdown>
   </div>
 </template>
 

data/app/frontend/editor/components/header-nav/preview-toggler.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <dropdown placement="bottom" ref="dropdown" class="h-full flex">
+    <uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex">
       <template v-slot:button>
         <button
           class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"
         >
           <span>{{ $t('headerNav.previewToggler.button') }}</span>
-          <icon name="arrow-down-s-line" />
+          <uikit-icon name="arrow-down-s-line" />
         </button>
       </template>
       <template v-slot:content>
@@ -22,7 +22,7 @@
           }}</a>
         </div>
       </template>
-    </dropdown>
+    </uikit-dropdown>
   </div>
 </template>
 

data/app/frontend/editor/components/header-nav/publish-button.vue

@@ -22,14 +22,14 @@
       :disabled="isInProgress || hasModifiedSections"
     >
       <span class="flex items-center justify-center space-x-2">
-        <icon
+        <uikit-icon
           icon="circle-notch"
           name="ri-loader-4-line"
           spin
           v-if="isInProgress"
         />
-        <icon name="ri-check-line" v-if="isSuccess" />
-        <icon name="ri-alert-line" v-if="isFail" />
+        <uikit-icon name="ri-check-line" v-if="isSuccess" />
+        <uikit-icon name="ri-alert-line" v-if="isFail" />
         <span>{{ label }}</span>
       </span>
     </button>

data/app/frontend/editor/components/header-nav/save-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <submit-button
+  <uikit-submit-button
     type="button"
     class="block text-white bg-opacity-95 hover:bg-opacity-100 transition-colors duration-200"
     :class="{

data/app/frontend/editor/components/icon-library/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-2">
     <div>
-      <search-input @search="(q) => (query = q)" />
+      <uikit-search-input @search="(q) => (query = q)" />
     </div>
     <div class="overflow-y-auto h-64">
       <div class="grid grid-cols-6 gap-2 pt-2 pb-8">

data/app/frontend/editor/components/image-library/index.vue

@@ -6,7 +6,7 @@
         @uploaded="refresh"
         class="flex-shrink-0"
       />
-      <search-input
+      <uikit-search-input
         class="w-72 ml-auto"
         :placeholder="$t('imageLibrary.searchPlaceholder')"
         @search="search"
@@ -31,7 +31,7 @@
           />
         </transition>
       </div>
-      <pagination
+      <uikit-pagination
         labelI18nKey="imageLibrary.pagination.label"
         noItemsI18nKey="imageLibrary.pagination.noItems"
         :activePage="activePage"

data/app/frontend/editor/components/image-library/list-item.vue

@@ -24,7 +24,7 @@
               class="px-1 py-1 bg-white rounded-full flex items-center justify-center text-gray-900 ml-auto"
               @click="() => (this.askingForRemoval = true)"
             >
-              <icon name="delete-bin-line" size="1rem" />
+              <uikit-icon name="delete-bin-line" size="1rem" />
             </button>
           </div>
         </transition>

data/app/frontend/editor/components/image-library/uploader.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <submit-button
+    <uikit-submit-button
       type="button"
       class="rounded-sm text-white py-2 px-4"
       defaultColorClass="bg-editor-primary"

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

@@ -7,13 +7,18 @@
     >
       <slot name="header">HINT</slot>
       <button class="ml-auto">
-        <icon
+        <uikit-icon
           name="arrow-up-s-line"
           size="1.5rem"
           class="ml-auto"
           v-if="show"
         />
-        <icon name="arrow-down-s-line" size="1.5rem" class="ml-auto" v-else />
+        <uikit-icon
+          name="arrow-down-s-line"
+          size="1.5rem"
+          class="ml-auto"
+          v-else
+        />
       </button>
     </div>
     <transition
@@ -35,7 +40,7 @@
 
 <script>
 export default {
-  name: 'Accordion',
+  name: 'UIKitAccordion',
   props: {
     headerClass: { type: String, default: '' },
   },

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

@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  name: 'CheckboxInput',
+  name: 'UIKitCheckboxInput',
   props: {
     label: { type: String, default: 'Label' },
     name: { type: String, default: 'text' },

data/app/frontend/editor/components/kit/collection-item-input.vue

@@ -4,7 +4,7 @@
       {{ label }}
     </label>
 
-    <select-input
+    <uikit-select-input
       :withLabel="false"
       :placeholder="$t(`collectionItemInput.select.placeholder`)"
       :searchEnabled="true"
@@ -16,7 +16,10 @@
       v-model="selectedCollectionItem"
     >
       <template v-slot:value>
-        <div class="flex items-center flex-grow-0 overflow-x-hidden" :title="selectedCollectionItem.label">
+        <div
+          class="flex items-center flex-grow-0 overflow-x-hidden"
+          :title="selectedCollectionItem.label"
+        >
           <div
             class="h-10 w-10 bg-gray-400 mr-3"
             v-if="selectedCollectionItem.imageUrl"
@@ -37,7 +40,7 @@
           <span class="truncate font-bold">{{ item.label }}</span>
         </div>
       </template>
-    </select-input>
+    </uikit-select-input>
   </div>
 </template>
 
@@ -45,7 +48,7 @@
 import { camelizeKeys } from '@/misc/utils'
 
 export default {
-  name: 'CollectionItemInput',
+  name: 'UIKitCollectionItemInput',
   props: {
     label: { type: String, default: 'Label' },
     name: { type: String, default: 'image' },