maglevcms 2.1.0 → 3.0.0.beta1

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

@@ -1,65 +0,0 @@
-<template>
-  <layout
-    :title="$t('page.list.title')"
-    :sub-title="$t('page.list.subTitle')"
-    :overflowY="false"
-  >
-    <div class="h-full flex flex-col px-4 pb-4">
-      <div class="py-2">
-        <uikit-search-input
-          @search="search"
-          class="py-4"
-          :placeholder="$t('page.list.searchPlaceholder')"
-        />
-      </div>
-      <div class="flex-1 overflow-y-auto">
-        <page-list :q="q" class="h-full pt-2" ref="list" />
-      </div>
-      <div class="pt-4" v-if="canAddPage">
-        <button
-          @click="openNewPageModal"
-          class="big-submit-button bg-editor-primary"
-        >
-          {{ $t('page.list.newButton') }}
-        </button>
-      </div>
-    </div>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-import PageList from '@/components/page/list/index.vue'
-import NewPageModal from '@/components/page/new.vue'
-
-export default {
-  name: 'PageListView',
-  components: { Layout, PageList },
-  data() {
-    return { q: null }
-  },
-  computed: {
-    canAddPage() {
-      return this.currentLocale === this.currentSite.locales[0].prefix
-    },
-  },
-  methods: {
-    search(q) {
-      this.q = q
-    },
-    openNewPageModal() {
-      this.openModal({
-        title: this.$t('page.new.title'),
-        component: NewPageModal,
-        closeOnClick: false,
-        props: {
-          modalClass: 'w-120 h-144',
-        },
-        listeners: {
-          'on-refresh': () => this.$refs.list.fetch(),
-        },
-      })
-    },
-  },
-}
-</script>

data/app/frontend/editor/views/sections/add-pane.vue

@@ -1,23 +0,0 @@
-<template>
-  <layout :title="$t('sections.addPane.title')">
-    <theme-section-list :insertAfter="sectionId" v-if="previewReady" />
-    <div class="h-full w-full animate-pulse" v-else>
-      <div class="w-full bg-gray-200 rounded h-12 mb-3"></div>
-      <div class="w-full bg-gray-200 rounded h-12 mb-3"></div>
-      <div class="w-full bg-gray-200 rounded h-12 mb-3"></div>
-    </div>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-import ThemeSectionList from '@/components/theme-section-list/index.vue'
-
-export default {
-  name: 'SectionListPane',
-  components: { Layout, ThemeSectionList },
-  props: {
-    sectionId: { type: String },
-  },
-}
-</script>

data/app/frontend/editor/views/sections/list-pane.vue

@@ -1,20 +0,0 @@
-<template>
-  <layout :title="$t('sections.listPane.title')">
-    <section-list v-if="previewReady" />
-    <div class="h-full w-full animate-pulse" v-else>
-      <div class="w-full bg-gray-200 rounded h-12 mb-3"></div>
-      <div class="w-full bg-gray-200 rounded h-12 mb-3"></div>
-      <div class="w-full bg-gray-200 rounded h-12 mb-3"></div>
-    </div>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-import SectionList from '@/components/section-list/index.vue'
-
-export default {
-  name: 'SectionListPane',
-  components: { Layout, SectionList },
-}
-</script>

data/app/frontend/editor/views/slide-pane.vue

@@ -1,14 +0,0 @@
-<template>
-  <layout title="Title Slide pane #1" sub-title="Sub title pane">
-    <p>Slide pane #1</p>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-
-export default {
-  name: 'SlidePane1',
-  components: { Layout },
-}
-</script>

data/app/frontend/editor/views/slide-pane2.vue

@@ -1,14 +0,0 @@
-<template>
-  <layout title="Title Slide pane #2" sub-title="Sub title pane">
-    <p>Slide pane #2</p>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-
-export default {
-  name: 'SlidePane2',
-  components: { Layout },
-}
-</script>

data/app/frontend/editor/views/style/edit-pane.vue

@@ -1,22 +0,0 @@
-<template>
-  <layout :title="$t('style.edit.title')" :overflowY="false">
-    <style-pane v-if="previewReady" class="pb-4" />
-    <div class="mx-4" v-else>
-      <div class="h-full w-full animate-pulse">
-        <div class="w-full bg-gray-200 rounded h-20 mb-3"></div>
-        <div class="w-full bg-gray-200 rounded h-20 mb-3"></div>
-        <div class="w-full bg-gray-200 rounded h-20 mb-3"></div>
-      </div>
-    </div>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-import StylePane from '@/components/style-pane/index.vue'
-
-export default {
-  name: 'SectionListPane',
-  components: { Layout, StylePane },
-}
-</script>

data/app/frontend/entrypoints/admin.js

@@ -1,3 +0,0 @@
-console.log('Maglev admin ⚡️')
-
-import {} from '~/admin'

data/app/frontend/entrypoints/admin.scss

@@ -1,5 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap");
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";

data/app/frontend/entrypoints/editor.js

@@ -1,8 +0,0 @@
-console.log('Maglev Editor ⚡️')
-
-import Editor from '~/editor/main'
-import '~/editor/design/application.scss'
-
-document.addEventListener('DOMContentLoaded', () => {
-  Editor.start()
-})

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

@@ -1,6 +0,0 @@
-import Client from '~/live-preview-client/index'
-
-document.addEventListener('DOMContentLoaded', () => {
-  console.log('Maglev Live Preview 🚀')
-  Client.start()
-})

data/app/frontend/entrypoints/live-preview-rails-client.js

@@ -1,9 +0,0 @@
-import Client from '~/live-preview-client/index'
-import RailsClient from '~/live-preview-client/rails'
-
-document.addEventListener('DOMContentLoaded', () => {
-  console.log('[Rails] Maglev Live Preview 🚀')
-  if (Client.start()) {
-    RailsClient.start()
-  }
-})

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

@@ -1,11 +0,0 @@
-import { listenMessages } from './message'
-
-const start = () => {
-  if (window.location === window.parent.location) {
-    return false
-  }
-  listenMessages()
-  return true
-}
-
-export default { start }

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

@@ -1,217 +0,0 @@
-import axios from 'axios'
-import { debounce } from './utils'
-import runScripts from './run-scripts'
-import { postMessage } from './message'
-
-const parentDocument = window.parent.document
-const previewDocument = window.document
-const csrfParam =
-  window.location !== window.parent.location
-    ? {
-        [parentDocument
-          .querySelector("meta[name='csrf-param']")
-          .getAttribute('content')]: parentDocument
-          .querySelector("meta[name='csrf-token']")
-          .getAttribute('content'),
-      }
-    : {}
-
-const start = () => {
-  // Within a Rails site, no need to remove the event listeners
-  window.addEventListener('maglev:section:add', addSection)
-  window.addEventListener('maglev:section:move', moveSections)
-  window.addEventListener('maglev:section:update', updateSection)
-  window.addEventListener('maglev:section:remove', removeSection)
-  window.addEventListener('maglev:section:ping', pingSection)
-  window.addEventListener('maglev:block:add', replaceSection)
-  window.addEventListener('maglev:block:move', replaceSection)
-  window.addEventListener('maglev:block:update', updateBlock)
-  window.addEventListener('maglev:block:remove', replaceSection)
-
-  window.addEventListener('maglev:style:update', updateStyle)
-}
-
-export default { start }
-
-// === Section related actions ===
-
-const addSection = (event) => {
-  const { content, section, insertAt } = event.detail
-  debouncedUpdatePreviewDocument(content, section, insertAt)
-}
-
-const moveSections = (event) => {
-  const { sectionId, targetSectionId, direction } = event.detail
-
-  const sectionElement = previewDocument.querySelector(
-    `[data-maglev-section-id='${sectionId}']`,
-  )
-  const targetSectionElement = previewDocument.querySelector(
-    `[data-maglev-section-id='${targetSectionId}']`,
-  )
-
-  if (direction === 'up')
-    targetSectionElement.parentNode.insertBefore(
-      sectionElement,
-      targetSectionElement,
-    )
-  else
-    targetSectionElement.parentNode.insertBefore(
-      sectionElement,
-      targetSectionElement.nextSibling,
-    )
-
-  // scroll to the new placement of the section
-  sectionElement.scrollIntoView(true)
-}
-
-const updateSection = (event) => {
-  const { content, section, change } = event.detail
-  updateSectionOrBlock(content, section, section, change)
-}
-
-const removeSection = (event) => {
-  const { sectionId } = event.detail
-  const selector = `[data-maglev-section-id='${sectionId}']`
-  const element = previewDocument.querySelector(selector)
-  element.remove()
-}
-
-const pingSection = (event) => {
-  const { sectionId } = event.detail
-  const selector = `[data-maglev-section-id='${sectionId}']`
-  const element = previewDocument.querySelector(selector)
-  // hack to force the highlighter bar to be updated with the correct dimensions
-  postMessage('scroll', { boundingRect: element.getBoundingClientRect() })
-}
-
-// === Block related actions ===
-
-const updateBlock = (event) => {
-  const { content, section, sectionBlock, change } = event.detail
-  updateSectionOrBlock(content, section, sectionBlock, change)
-}
-
-const replaceSection = (event) => {
-  const { content, section } = event.detail
-  debouncedUpdatePreviewDocument(content, section)
-}
-
-// === Other actions ===
-
-const updateStyle = async (event) => {
-  const { content, style } = event.detail
-
-  const doc = await getUpdatedDoc({
-    pageSections: JSON.stringify(content.pageSections),
-    style: JSON.stringify(style),
-  })
-
-  // update the CSS variables
-  const selector = '#maglev-style'
-  const sourceElement = doc.querySelector(selector)
-  let targetElement = previewDocument.querySelector(selector)
-
-  if (sourceElement) {
-    targetElement.replaceWith(sourceElement)
-  }
-}
-
-// === Helpers ===
-
-const updateSectionOrBlock = (content, section, source, change) => {
-  const foundSetting = updateSetting(source, change)
-  if (!foundSetting) debouncedUpdatePreviewDocument(content, section)
-}
-
-const updateSetting = (source, change) => {
-  switch (change.settingType) {
-    case 'text':
-      return updateTextSetting(source, change)
-    case 'link':
-      if (change.settingOptions.withText && change.value)
-        return updateTextSetting(source, {
-          ...change,
-          value: change.value.text,
-          settingId: `${change.settingId}.text`,
-        })
-      break
-    default:
-      // ok, we can't cherry-pick the modification so we have to refresh the whole section
-      break
-  }
-  return false
-}
-
-const updateTextSetting = (source, change) => {
-  const selector = `[data-maglev-id='${source.id}.${change.settingId}']`
-  const settings = previewDocument.querySelectorAll(selector)
-  settings.forEach(($el) => ($el.innerHTML = change.value))
-  return settings.length > 0
-}
-
-const updatePreviewDocument = async (content, section, insertAt) => {
-  const doc = await getUpdatedDoc({
-    pageSections: JSON.stringify([
-      content.pageSections.find((s) => s.id == section.id), // no need to render the other sections
-    ]),
-  })
-
-  // NOTE: Instructions to refresh the whole document
-  // removeEventListeners()
-  // previewDocument.querySelector('body').replaceWith(doc.querySelector('body'))
-  // setupEvents(previewDocument)
-
-  const selector = `[data-maglev-section-id='${section.id}']`
-  const sourceElement = doc.querySelector(selector)
-  let targetElement = previewDocument.querySelector(selector)
-
-  if (!sourceElement)
-    throw new Error(`Maglev section ${section.id} not generated by the server`)
-
-  if (targetElement) {
-    targetElement.replaceWith(sourceElement)
-  } else {
-    insertSectionInDOM(sourceElement, insertAt)
-    targetElement = previewDocument.querySelector(selector)
-  }
-
-  runScripts(sourceElement)
-
-  targetElement.scrollIntoView(true)
-}
-
-const debouncedUpdatePreviewDocument = debounce(updatePreviewDocument, 300)
-
-const insertSectionInDOM = (element, insertAt) => {
-  switch (insertAt) {
-    case 'top': {
-      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
-      parentNode.prepend(element)
-      break
-    }
-    case 'bottom':
-    case undefined:
-    case null:
-    case '': {
-      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
-      parentNode.appendChild(element)
-      break
-    }
-    default: {
-      const selector = `[data-maglev-section-id='${insertAt}']`
-      const pivotElement = previewDocument.querySelector(selector)
-      pivotElement.parentNode.insertBefore(element, pivotElement.nextSibling)
-    }
-  }
-}
-
-const getUpdatedDoc = async (attributes) => {
-  const { data } = await axios.post(previewDocument.location.href, {
-    ...attributes,
-    ...csrfParam,
-  })
-  const parser = new DOMParser()
-  const doc = parser.parseFromString(data, 'text/html')
-  return doc
-}

data/app/helpers/maglev/editor_helper.rb

@@ -1,95 +0,0 @@
-# frozen_string_literal: true
-
-module Maglev
-  module EditorHelper
-    # Path to the editor but without the locale
-    def site_base_editor_path
-      base_editor_path
-    end
-
-    def site_editor_path
-      editor_path(locale: maglev_site.default_locale)
-    end
-
-    def site_leave_editor_path
-      leave_editor_path
-    end
-
-    def api_base_path
-      api_root_path
-    end
-
-    def editor_window_title
-      case maglev_config.title
-      when nil
-        'Maglev - EDITOR'
-      when String
-        maglev_config.title
-      when Proc
-        instance_exec(maglev_site, &maglev_config.title)
-      end
-    end
-
-    def editor_primary_hex_color
-      color = maglev_config.primary_color
-      if color =~ /^\#(\d)(\d)(\d)$/
-        r_value = ''.rjust(2, Regexp.last_match(1))
-        g_value = ''.rjust(2, Regexp.last_match(2))
-        b_value = ''.rjust(2, Regexp.last_match(3))
-        "##{r_value}#{g_value}#{b_value}"
-      else
-        color
-      end
-    end
-
-    def editor_primary_rgb_color
-      editor_primary_hex_color
-        .gsub('#', '')
-        .scan(/.{2}/)
-        .map { |value| value.to_i(16) }
-    end
-
-    def editor_logo_url
-      case maglev_config.logo
-      when nil
-        editor_asset_path(nil, 'logo.svg')
-      when String
-        editor_asset_path(maglev_config.logo, 'logo.svg')
-      when Proc
-        instance_exec(maglev_site, &maglev_config.logo)
-      end
-    end
-
-    def editor_favicon_url
-      case maglev_config.favicon
-      when nil
-        editor_asset_path(nil, 'favicon.svg')
-      when String
-        editor_asset_path(maglev_config.favicon, 'favicon.svg')
-      when Proc
-        instance_exec(maglev_site, &maglev_config.favicon)
-      end
-    end
-
-    def editor_site_publishable
-      !!maglev_config.site_publishable
-    end
-
-    def editor_asset_path(source, default_source)
-      if source.blank?
-        vite_asset_path("images/#{default_source}")
-      elsif source =~ %r{^(https?://|/)}
-        source
-      else
-        # rely on Sprockets by default
-        ActionController::Base.helpers.asset_path(source)
-      end
-    end
-
-    def editor_custom_translations
-      I18n.available_locales.index_with do |locale|
-        ::I18n.t('maglev', locale: locale, default: nil)
-      end
-    end
-  end
-end

data/app/services/maglev/persist_page.rb

@@ -1,97 +0,0 @@
-# frozen_string_literal: true
-
-module Maglev
-  class PersistPage
-    include Injectable
-
-    dependency :fetch_theme
-
-    argument :page
-    argument :page_attributes
-    argument :site
-    argument :site_attributes, default: nil
-    argument :theme, default: nil
-
-    def call
-      ActiveRecord::Base.transaction do
-        persist_page!
-        persist_site!
-        persist_style!
-        page
-      end
-    end
-
-    private
-
-    def persist_page!
-      page.attributes = page_attributes
-
-      # the sections_translations attribute is put by the SetupPages service
-      # when we generate a brand new site
-      if page_attributes.key?(:sections_translations)
-        page.prepare_sections_translations(theme)
-      else
-        page.prepare_sections(theme)
-      end
-
-      page.save!
-    end
-
-    def persist_site!
-      return unless can_persist_site?
-
-      assign_sections_to_site
-
-      site.save!
-    end
-
-    def persist_style!
-      return if site_attributes&.dig(:style).blank?
-
-      site.style = site_attributes[:style]
-      site.save!
-    end
-
-    def theme
-      @theme ||= fetch_theme.call
-    end
-
-    # unlike the pages, we don't want to erase
-    # the other global sections of a site if they're missing
-    # from the site_attributes
-    def site_attributes_with_consistent_sections
-      attributes = site_attributes.dup
-
-      site.sections&.each do |section|
-        next if site_section_types.include?(section['type'])
-
-        attributes[:sections].push(section)
-      end
-
-      attributes
-    end
-
-    def site_section_types
-      @site_section_types ||= site_attributes[:sections].map { |section| section[:type] }
-    end
-
-    def can_persist_site?
-      site_attributes.present? && (
-        site_attributes[:sections].present? ||
-        site_attributes[:sections_translations].present?
-      )
-    end
-
-    def assign_sections_to_site
-      # the sections_translations attribute is put by the SetupPages service
-      # when we generate a brand new site
-      if site_attributes.key?(:sections_translations)
-        site.attributes = site_attributes
-        site.prepare_sections_translations(theme)
-      else
-        site.attributes = site_attributes_with_consistent_sections
-        site.prepare_sections(theme)
-      end
-    end
-  end
-end

data/app/views/layouts/maglev/admin/_header_actions.html.erb

@@ -1,5 +0,0 @@
-<div class="ml-auto">
-  <%= link_to base_editor_path, class: 'text-white px-3 py-2 bg-purple-400 rounded hover:bg-purple-500 transition-colors' do %>
-    <span>Open editor</span>
-  <% end %>
-</div>

data/app/views/layouts/maglev/admin/application.html.erb

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Maglev - Admin</title>
-  
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= vite_javascript_tag 'admin' %>
-  <%= vite_stylesheet_tag 'admin.scss' %>
-  
-  <%= favicon_link_tag vite_asset_path 'images/favicon.svg' %>
-</head>
-<body class="bg-gray-100">
-  <main role="main" class="container mx-auto">
-    <div class="flex items-center py-3 px-8 my-3 text-white text-opacity-50 bg-purple-600 rounded shadow-sm">    
-      <div class="lh-100">
-        <h6 class="mb-0 text-white lh-100"><%= link_to 'Maglev', admin_root_path %></h6>
-        <small>Administration interface</small>
-      </div>
-      <%= render 'layouts/maglev/admin/header_actions' %>
-    </div>
-    <%= yield %> 
-  </main>
-</body>
-</html>