maglevcms 1.1.7 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d6ebce98e16aca2b48cc0029e9c9168602b29f8bcd320261904c634b4d97132d
-  data.tar.gz: 463986303bb445fdc237f1089186055284ff29cb62773a878a7f4ae1d90ab7a6
+  metadata.gz: b23017be4bbbf4d06d99cf0f94ede1136e0e0ea343e0fbbef94edb6dc4d112d4
+  data.tar.gz: b6e5d107a2ea7a18091ffdd084a3fed631d0726fe845e0ac0f7100f1fc3e2b60
 SHA512:
-  metadata.gz: c6d853c3d35076069a0ba22053b8828a8e837eabaf3c715e4ac9955ac2f38663cd6cad9d86b55f759b310633e564b19c8373d2fd06df8c3b6a05b2bb8eeaf026
-  data.tar.gz: f3e2b09342501025517ef5a11ce16f8e2f213fd1b99fb760312edf99b321220cf2e65ea73c3feabf12c6706f27b5dede2482adb0686d160537558334daa76cd7
+  metadata.gz: 1b579c11945ca3c28bb48f59d7efc0ea70a6d1608b7275cd507c3044cf30446bf3a342163ad9c468f0f3cf690386be137401e34f6426bbc016b4306af2d701ff
+  data.tar.gz: d4257dfeb8ef1a210fc9147325e4cae5517c4a5f676b7c27637353573ee9c4ba315283edc4b0c97253d06b6327ba48b4fbf25199b4247f21913482b17f53777a

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

@@ -3,6 +3,8 @@
 module Maglev
   module Content
     class Image < Base
+      def_delegators :url, :present?
+
       def url
         return image[:url] if asset_host.nil? || !hosted_on_platform?
 

data/app/controllers/maglev/sitemap_controller.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Maglev
+  class SitemapController < ApplicationController
+    include Maglev::FetchersConcern
+    include Maglev::ServicesConcern
+    include Maglev::ContentLocaleConcern
+
+    before_action :verify_request_format!
+    before_action :fetch_maglev_site
+
+    def index
+      @host = request.protocol + fetch_host
+      @pages = fetch_pages
+    end
+
+    protected
+
+    def fetch_host
+      request.headers['HTTP_X_MAGLEV_HOST'] || request.host
+    end
+
+    def fetch_pages
+      Maglev::Page.all.visible
+    end
+
+    def verify_request_format!
+      raise ActionController::UnknownFormat, 'Sitemap is only rendered as XML' if request.format != 'xml'
+    end
+  end
+end

data/app/frontend/editor/assets/remixicons/ri-palette-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z"></path></svg>

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

@@ -62,7 +62,7 @@
       v-model="inputValue"
       v-if="setting.type == 'link'"
     />
-    <color-picker
+    <color-input
       :label="setting.label"
       :name="setting.id"
       v-model="inputValue"

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

@@ -28,7 +28,7 @@
           spin
           v-if="isInProgress"
         />
-        <icon name="check-line" v-if="isSuccess" />
+        <icon name="ri-check-line" v-if="isSuccess" />
         <icon name="ri-alert-line" v-if="isFail" />
         <span>{{ label }}</span>
       </span>

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

@@ -56,7 +56,7 @@ export default {
   computed: {
     selectedCollectionItem: {
       get() {
-        return camelizeKeys(this.value)
+        return this.value === 'any' ? null : camelizeKeys(this.value)
       },
       set(collectionItem) {
         this.$emit('input', collectionItem ? { ...collectionItem } : null)

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="relative">
+    <div 
+      class="absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200" 
+      :class="{ 'bg-checkerboard': isTransparent }"
+      :style="{ 'background-color': styleRgbaColor }"></div>
+
+    <span class="absolute left-11 top-1.5 font-bold text-gray-900 text-lg">#</span>
+
+    <input
+      type="text"
+      :value="inputColor"
+      @input="updateInput"
+      class="py-2 pl-14 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500 font-normal"
+      :class="{
+        'pr-8': hasPresets,
+        'pr-2': !hasPresets
+      }"
+      autocomplete="off"
+      minlength="4" 
+      maxlength="8"
+      size="7"
+    />
+
+    <preset-dropdown 
+      v-model="updatableValue" 
+      :presets="presets" 
+      v-if="hasPresets"
+    />
+  </div>
+</template>
+
+<script>
+import PresetDropdown from './preset-dropdown.vue'
+
+import { colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
+
+export default {
+  name: 'CoreInput',
+  components: { PresetDropdown },
+  props: {
+    value: { type: String },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    inputColor() {
+      return this.hexColor?.replaceAll('#', '')
+    },
+    hexColor() {
+      return colorVariableToHex(this.value)
+    },
+    rgbColor() {
+      return colorVariableToRgb(this.value)
+    },
+    styleRgbaColor() {
+      const color = this.isTransparent ? { r: 255, g: 255, b: 255 } : (this.rgbColor || { r: 0, g: 0, b: 0 })
+      return `rgba(${color.r}, ${color.g}, ${color.b}, 1)`
+    },
+    isTransparent() {
+      return this.value === ''
+    },
+    hasPresets() {
+      return this.presets && this.presets.length > 0
+    },
+    updatableValue: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+  },
+  methods: {
+    updateInput(event) {
+      var value = event.target.value
+      if (value.length > 0) value = `#${value}`
+      this.$emit('input', value)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div 
+    class="self-center cursor-pointer p-0.5 rounded-sm"
+    @click="selectPreset"
+  > 
+    <div
+      class="flex items-center justify-center w-6 h-6 rounded-sm transition transform duration-200 ease-in-out hover:scale-110 select-none text-white"
+      :class="{ 
+        'border border-gray-300 text-gray-800': isWhite,
+        'bg-checkerboard': isTransparent,
+      }"
+      :style="{ 'background-color': hexColor }"
+    >
+      <icon name="ri-check-line" size="1rem" v-if="selected" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { hexToRgb, colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
+
+export default {
+  name: 'PresetButton',
+  props: {
+    preset: { type: String },
+    value: { type: String },
+  },
+  computed: {
+    selected() {
+      return !!this.value && this.value.trim().toLowerCase() === this.hexColor
+    },
+    hexColor() {
+      return colorVariableToHex(this.preset)
+    },    
+    rgbColor() {
+      return colorVariableToRgb(this.preset)
+    },
+    isWhite() {
+      if (!this.rgbColor) return true
+      return this.rgbColor.r === 255 && this.rgbColor.g === 255 && this.rgbColor.b === 255
+    },
+    isTransparent() {
+      return this.hexColor === ''
+    },
+    borderColor() {
+      if (!this.selected) return 'transparent'
+      let color = this.isWhite ? { r: 0, g: 0, b: 0 } : this.rgbColor
+      return `rgba(${color.r}, ${color.g}, ${color.b}, 0.40)`
+    }
+  },
+  methods: {
+    selectPreset() {
+      this.$emit('input', this.hexColor)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <dropdown v-on="$listeners" class="absolute top-1.5 right-1">
+    <template v-slot:button>
+      <button
+        class="px-1 py-1 hover:text-gray-900 focus:outline-none transition-colors duration-200"
+      >
+        <icon name="ri-palette-line" size="1.25rem" />
+      </button>
+    </template>
+    <template v-slot:content>
+      <div class="flex flex-wrap gap-1">
+        <preset-button 
+          v-for="preset in presets" 
+          v-model="updatableValue"
+          :preset="preset"
+          :key="preset" />
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import PresetButton from './preset-button.vue'
+
+export default {
+  name: 'PresetDropdown',
+  components: { PresetButton },
+  props: {
+    value: { type: String },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    updatableValue: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+  }
+}
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <div class="pt-1">
+    <label
+      class="flex items-center justify-between font-semibold text-gray-800"
+      :for="name"
+      v-if="showLabel"
+    >
+      <span>{{ label }}</span>
+      <core-input :presets="presets" v-model="updatableValue" />
+    </label>
+  </div>
+</template>
+
+<script>
+import { hexToRgb } from '@/misc/utils'
+
+import CoreInput from '@/components/kit/color-input/core-input.vue'
+
+export default {
+  name: 'ColorInput',
+  components: { CoreInput },
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'color' },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+    value: { type: String },
+    showLabel: { type: Boolean, default: true }
+  },
+  computed: {
+    updatableValue: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+  },
+}
+</script>

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

@@ -5,6 +5,7 @@
     :open="open"
     :placement="placement"
     class="flex"
+    v-on:auto-hide="close"
   >
     <div
       class="z-10 relative flex items-center focus:outline-none select-none cursor-pointer w-full"

data/app/frontend/editor/components/kit/index.js

@@ -19,7 +19,7 @@ import CheckboxInput from './checkbox-input.vue'
 import SearchInput from './search-input.vue'
 import Pagination from './pagination/index.vue'
 import PageIcon from './page-icon.vue'
-import ColorPicker from './color-picker.vue'
+import ColorInput from './color-input.vue'
 import SimpleSelect from './simple-select.vue'
 import CollectionItemInput from './collection-item-input.vue'
 import ListItemButton from './list-item-button.vue'
@@ -44,7 +44,7 @@ Vue.component('checkbox-input', CheckboxInput)
 Vue.component('search-input', SearchInput)
 Vue.component('pagination', Pagination)
 Vue.component('page-icon', PageIcon)
-Vue.component('color-picker', ColorPicker)
+Vue.component('color-input', ColorInput)
 Vue.component('simple-select', SimpleSelect)
 Vue.component('collection-item-input', CollectionItemInput)
 Vue.component('list-item-button', ListItemButton)

data/app/frontend/editor/components/kit/submit-button.vue

@@ -8,17 +8,17 @@
     <span v-if="isDefaultState" data-button-label>{{ defaultLabel }}</span>
 
     <span v-if="isInProgressState" class="flex items-center justify-center">
-      <icon icon="circle-notch" name="ri-loader-4-line" spin color="#fff" />
+      <icon name="ri-loader-4-line" spin color="#fff" key="progress" />
       <span class="ml-2" data-button-label>{{ inProgressLabel }}</span>
     </span>
 
     <span v-if="isSuccessState" class="flex items-center justify-center">
-      <icon icon="circle-notch" name="check-line" color="#fff" />
+      <icon name="ri-check-line" color="#fff" key="success" />
       <span class="ml-2" data-button-label>{{ successLabel }}</span>
     </span>
 
     <span v-if="isFailState" class="flex items-center justify-center">
-      <icon icon="circle-notch" name="ri-alert-line" color="#fff" />
+      <icon name="ri-alert-line" color="#fff" key="fail" />
       <span class="ml-2" data-button-label>{{ failLabel }}</span>
     </span>
   </button>

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

@@ -8,8 +8,9 @@
         v-for="(tab, index) in tabs"
         :key="`tab-${index}`"
         type="button"
-        class="text-gray-500 py-1 pb-0 px-4 block hover:text-editor-primary focus:outline-none border-b-2 border-transparent z-10"
+        class=" py-1 pb-0 px-4 block hover:text-editor-primary focus:outline-none border-b-2 z-10"
         :class="{
+          'text-gray-500 border-transparent': index !== currentIndex,
           'text-editor-primary font-medium border-editor-primary':
             index === currentIndex,
         }"

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="space-y-1">
     <label
       class="block font-semibold text-gray-800"
       :for="name"
@@ -20,7 +20,7 @@
       :placeholder="placeholder"
       @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 placeholder-gray-500"
+      class="block w-full 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/misc/utils.js

@@ -111,16 +111,29 @@ export const omitEmpty = (obj) =>
   Object.keys(obj).forEach((key) => obj[key] === undefined && delete obj[key])
 
 export const hexToRgb = (hex) => {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim())
+  if (!hex) return null
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex.trim())
   return result
     ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
+        b: result[3] ? parseInt(result[3], 16) : 0,
       }
     : null
 }
 
+export const colorVariableToHex = (variable) => {
+  if (!variable) return null
+  const color = (variable.startsWith('--')
+    ? getComputedStyle(document.body).getPropertyValue(variable)
+    : variable).trim().toLowerCase()
+  return color === 'transparent' ? '' : color
+}
+
+export const colorVariableToRgb = (variable) => {
+  return hexToRgb(colorVariableToHex(variable))
+}
+
 // Static pages have absolute path ("/something") but regular pages have no leading slash
 export const formatPath = (path) => {
   return path[0] === '/' ? path : `/${path}`

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

@@ -18,10 +18,10 @@ const api = axios.create({
     Accept: 'application/json',
   },
   transformResponse(data) {
-    // camelcase in JS
+    // for "security" (even if the Rails API already camelcases the JSON), 
+    // we also camelcase the response in the Editor.
     // console.log('[DEBUG] API response', data)
     return data ? camelcaseObjectDeep(JSON.parse(data)) : {}
-    // return data ? JSON.parse(data) : {} // LEGACY
   },
 })
 

data/app/frontend/editor/spec/__mocks__/page.js

@@ -9,7 +9,7 @@ export const pageSections = [
         settings: [
           {
             id: 'link',
-            value: { href: '#', text: 'Home', link_type: 'url' },
+            value: { href: '#', text: 'Home', linkType: 'url' },
           },
         ],
       },
@@ -19,7 +19,7 @@ export const pageSections = [
         settings: [
           {
             id: 'link',
-            value: { href: '#', text: 'About us', link_type: 'url' },
+            value: { href: '#', text: 'About us', linkType: 'url' },
           },
         ],
       },
@@ -33,11 +33,11 @@ export const pageSections = [
               href: '//contact',
               text: 'Contact',
               email: null,
-              link_id: 9,
-              link_type: 'page',
-              link_label: 'Contact us',
-              section_id: null,
-              open_new_window: false,
+              linkId: 9,
+              linkType: 'page',
+              linkLabel: 'Contact us',
+              sectionId: null,
+              openNewWindow: false,
             },
           },
         ],
@@ -52,11 +52,11 @@ export const pageSections = [
               href: '/products',
               text: 'Products #1',
               email: null,
-              link_id: 'd870133f9a075477a96a58e7639d40c5',
-              link_type: 'page',
-              link_label: 'Products',
-              section_id: null,
-              open_new_window: true,
+              linkId: 'd870133f9a075477a96a58e7639d40c5',
+              linkType: 'page',
+              linkLabel: 'Products',
+              sectionId: null,
+              openNewWindow: true,
             },
           },
         ],
@@ -71,7 +71,7 @@ export const pageSections = [
           width: 572,
           height: 290,
           filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png',
-          byte_size: 35070,
+          byteSize: 35070,
         },
       },
     ],
@@ -96,7 +96,7 @@ export const pageSections = [
           width: 516,
           height: 320,
           filename: 'img-91-3.jpg',
-          byte_size: 41683,
+          byteSize: 41683,
         },
       },
       { id: 'button', value: { url: '#', text: 'Click here' } },
@@ -119,7 +119,7 @@ export const pageSections = [
               width: 1920,
               height: 1200,
               filename: 'img-97.jpg',
-              byte_size: 458107,
+              byteSize: 458107,
             },
           },
         ],
@@ -137,7 +137,7 @@ export const pageSections = [
               width: 516,
               height: 400,
               filename: 'inner-74-2.jpg',
-              byte_size: 63881,
+              byteSize: 63881,
             },
           },
         ],
@@ -155,7 +155,7 @@ export const pageSections = [
               width: 516,
               height: 320,
               filename: 'img-91-4.jpg',
-              byte_size: 21808,
+              byteSize: 21808,
             },
           },
         ],
@@ -173,7 +173,7 @@ export const pageSections = [
               width: 1920,
               height: 1200,
               filename: 'img-91.jpg',
-              byte_size: 180178,
+              byteSize: 180178,
             },
           },
         ],
@@ -220,7 +220,7 @@ export const normalizedPage = {
         id: 'RiEo8C3f',
         type: 'navbar_item',
         settings: [
-          { id: 'link', value: { href: '#', text: 'Home', link_type: 'url' } },
+          { id: 'link', value: { href: '#', text: 'Home', linkType: 'url' } },
         ],
       },
       P1fGieWs: {
@@ -229,7 +229,7 @@ export const normalizedPage = {
         settings: [
           {
             id: 'link',
-            value: { href: '#', text: 'About us', link_type: 'url' },
+            value: { href: '#', text: 'About us', linkType: 'url' },
           },
         ],
       },
@@ -243,11 +243,11 @@ export const normalizedPage = {
               href: '//contact',
               text: 'Contact',
               email: null,
-              link_id: 9,
-              link_type: 'page',
-              link_label: 'Contact us',
-              section_id: null,
-              open_new_window: false,
+              linkId: 9,
+              linkType: 'page',
+              linkLabel: 'Contact us',
+              sectionId: null,
+              openNewWindow: false,
             },
           },
         ],
@@ -262,11 +262,11 @@ export const normalizedPage = {
               href: '/products',
               text: 'Products #1',
               email: null,
-              link_id: 'd870133f9a075477a96a58e7639d40c5',
-              link_type: 'page',
-              link_label: 'Products',
-              section_id: null,
-              open_new_window: true,
+              linkId: 'd870133f9a075477a96a58e7639d40c5',
+              linkType: 'page',
+              linkLabel: 'Products',
+              sectionId: null,
+              openNewWindow: true,
             },
           },
         ],
@@ -284,7 +284,7 @@ export const normalizedPage = {
               width: 1920,
               height: 1200,
               filename: 'img-97.jpg',
-              byte_size: 458107,
+              byteSize: 458107,
             },
           },
         ],
@@ -302,7 +302,7 @@ export const normalizedPage = {
               width: 516,
               height: 400,
               filename: 'inner-74-2.jpg',
-              byte_size: 63881,
+              byteSize: 63881,
             },
           },
         ],
@@ -320,7 +320,7 @@ export const normalizedPage = {
               width: 516,
               height: 320,
               filename: 'img-91-4.jpg',
-              byte_size: 21808,
+              byteSize: 21808,
             },
           },
         ],
@@ -338,7 +338,7 @@ export const normalizedPage = {
               width: 1920,
               height: 1200,
               filename: 'img-91.jpg',
-              byte_size: 180178,
+              byteSize: 180178,
             },
           },
         ],
@@ -358,7 +358,7 @@ export const normalizedPage = {
               width: 572,
               height: 290,
               filename: 'Screen Shot 2021-06-30 at 3.44.04 PM.png',
-              byte_size: 35070,
+              byteSize: 35070,
             },
           },
         ],
@@ -383,7 +383,7 @@ export const normalizedPage = {
               width: 516,
               height: 320,
               filename: 'img-91-3.jpg',
-              byte_size: 41683,
+              byteSize: 41683,
             },
           },
           { id: 'button', value: { url: '#', text: 'Click here' } },