helios-press 0.1.0

data/app/controllers/helios/press/api/posts_controller.rb

@@ -0,0 +1,54 @@
+module Helios
+  module Press
+    module Api
+      class PostsController < Helios::Press::Api::BaseController
+        # POST /api/v1/posts
+        # Upsert a post by external_id. Payload shape:
+        # {
+        #   "external_id":       "helios-blog-post-draft-4821",
+        #   "title":             "...",
+        #   "slug":              "...",
+        #   "keywords":          "...",
+        #   "description":       "...",
+        #   "body_html":         "...",
+        #   "published":         true
+        # }
+        def create
+          external_id = params[:external_id].to_s
+          return render json: { error: "external_id is required" }, status: :bad_request if external_id.blank?
+
+          post = Post.find_or_initialize_by(external_id: external_id)
+
+          post.assign_attributes(
+            name: params[:title],
+            slug: params[:slug].presence,
+            keywords: params[:keywords],
+            description: params[:description],
+            published: ActiveModel::Type::Boolean.new.cast(params[:published])
+          )
+
+          # If body_html is provided, create/update a single text block with the content
+          if params[:body_html].present?
+            if post.persisted?
+              # Update or create the first text block
+              text_block = post.blocks.find_by(block_type: "text") || post.blocks.build(block_type: "text", position: 0)
+              text_block.content = params[:body_html]
+            else
+              post.blocks.build(block_type: "text", position: 0, content: params[:body_html])
+            end
+          end
+
+          post.save!
+
+          render json: {
+            ok: true,
+            id: post.id,
+            slug: post.slug
+          }, status: :ok
+        rescue ActiveRecord::RecordInvalid => e
+          render json: { errors: e.record.errors.full_messages }, status: :unprocessable_entity
+        end
+      end
+    end
+  end
+end

data/app/controllers/helios/press/application_controller.rb

@@ -0,0 +1,6 @@
+module Helios
+  module Press
+    class ApplicationController < ActionController::Base
+    end
+  end
+end

data/app/controllers/helios/press/posts_controller.rb

@@ -0,0 +1,9 @@
+module Helios
+  module Press
+    class PostsController < ::ApplicationController
+      def show
+        @post = Post.published.find_by!(slug: params[:slug])
+      end
+    end
+  end
+end

data/app/helpers/helios/press/application_helper.rb

@@ -0,0 +1,39 @@
+module Helios
+  module Press
+    module ApplicationHelper
+      # Processes ActionText content to add target="_blank" to external links
+      def helios_press_process_rich_text_links(rich_text_content)
+        return "" if rich_text_content.blank?
+
+        html = rich_text_content.to_s
+        doc = Nokogiri::HTML.fragment(html)
+
+        doc.css("a").each do |link|
+          href = link["href"]
+          next if href.blank?
+
+          if helios_press_external_link?(href)
+            link["target"] = "_blank"
+            link["rel"] = "noopener noreferrer"
+          end
+        end
+
+        doc.to_html.html_safe
+      end
+
+      private
+
+      def helios_press_external_link?(href)
+        return false if href.start_with?("/", "#")
+
+        begin
+          uri = URI.parse(href)
+          return false if uri.host.nil?
+          uri.host != request.host
+        rescue URI::InvalidURIError
+          false
+        end
+      end
+    end
+  end
+end

data/app/javascript/helios/press/controllers/blocks_controller.js

@@ -0,0 +1,276 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+import { DirectUpload } from "@rails/activestorage"
+
+export default class extends Controller {
+  static targets = ["blocksContainer", "block", "placeholder"]
+  static values = {
+    postId: Number,
+    baseUrl: String
+  }
+
+  connect() {
+    this.initializeSortable()
+  }
+
+  disconnect() {
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+  }
+
+  blocksContainerTargetConnected() {
+    this.initializeSortable()
+  }
+
+  initializeSortable() {
+    if (this.sortable) {
+      this.sortable.destroy()
+    }
+
+    if (this.hasBlocksContainerTarget) {
+      this.sortable = Sortable.create(this.blocksContainerTarget, {
+        handle: '.drag-handle',
+        animation: 150,
+        ghostClass: 'block-ghost',
+        dragClass: 'block-dragging',
+        onEnd: this.handleReorder.bind(this)
+      })
+    }
+  }
+
+  handleReorder(event) {
+    const blockIds = this.blockTargets.map(block => block.dataset.blockId)
+
+    fetch(`${this.baseUrlValue}/reorder`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ block_ids: blockIds })
+    })
+  }
+
+  addBlock(event) {
+    const placeholder = event.currentTarget
+    const position = parseInt(placeholder.dataset.position)
+    this.createBlock('text', position)
+  }
+
+  handlePlaceholderDragOver(event) {
+    event.preventDefault()
+    event.currentTarget.classList.add('drag-over')
+  }
+
+  handlePlaceholderDragLeave(event) {
+    event.currentTarget.classList.remove('drag-over')
+  }
+
+  handlePlaceholderDrop(event) {
+    event.preventDefault()
+    event.currentTarget.classList.remove('drag-over')
+
+    const files = Array.from(event.dataTransfer.files)
+    const placeholder = event.currentTarget
+    const position = parseInt(placeholder.dataset.position)
+
+    if (files.length > 0) {
+      const firstFile = files[0]
+
+      if (firstFile.type.startsWith('video/')) {
+        this.createVideoBlock(position, firstFile)
+      } else if (firstFile.type.startsWith('image/')) {
+        this.createImageBlock(position, files.filter(f => f.type.startsWith('image/')))
+      }
+    }
+  }
+
+  createBlock(blockType, position) {
+    fetch(this.baseUrlValue, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content,
+        'Accept': 'text/vnd.turbo-stream.html'
+      },
+      body: JSON.stringify({
+        block: {
+          block_type: blockType,
+          position: position
+        }
+      })
+    })
+    .then(response => response.text())
+    .then(html => {
+      Turbo.renderStreamMessage(html)
+    })
+    .catch(error => {
+      console.error('Error adding block:', error)
+    })
+  }
+
+  createImageBlock(position, files) {
+    const formData = new FormData()
+    formData.append('block[block_type]', 'image_container')
+    formData.append('block[position]', position)
+
+    files.forEach((file, index) => {
+      formData.append(`images[${index}][file]`, file)
+    })
+
+    fetch(this.baseUrlValue, {
+      method: 'POST',
+      headers: {
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content,
+        'Accept': 'text/vnd.turbo-stream.html'
+      },
+      body: formData
+    })
+    .then(response => response.text())
+    .then(html => {
+      Turbo.renderStreamMessage(html)
+    })
+    .catch(error => {
+      console.error('Error creating image block:', error)
+    })
+  }
+
+  deleteBlock(event) {
+    event.preventDefault()
+    const blockElement = event.target.closest('[data-helios-press-blocks-target="block"]')
+    const blockId = blockElement.dataset.blockId
+
+    if (confirm('Are you sure you want to delete this block?')) {
+      fetch(`${this.baseUrlValue}/${blockId}`, {
+        method: 'DELETE',
+        headers: {
+          'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+        }
+      })
+      .then(() => {
+        blockElement.remove()
+      })
+    }
+  }
+
+  createVideoBlock(position, file) {
+    const placeholderId = `video-upload-${Date.now()}`
+    const placeholderHTML = `
+      <div id="${placeholderId}" class="content-block card mb-3" data-helios-press-blocks-target="block" data-block-id="uploading">
+        <div class="card-body">
+          <div class="d-flex align-items-center">
+            <div class="spinner-border spinner-border-sm me-2" role="status">
+              <span class="visually-hidden">Uploading...</span>
+            </div>
+            <div class="flex-grow-1">
+              <div class="mb-1"><strong>Uploading video...</strong></div>
+              <div class="progress" style="height: 4px;">
+                <div class="progress-bar" role="progressbar" style="width: 0%" id="${placeholderId}-progress"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+
+    const placeholderElement = this.placeholderTargets.find(p => parseInt(p.dataset.position) === position + 1)
+    if (placeholderElement) {
+      placeholderElement.insertAdjacentHTML('beforebegin', placeholderHTML)
+    } else {
+      this.blocksContainerTarget.insertAdjacentHTML('beforeend', placeholderHTML)
+    }
+
+    const progressBar = document.getElementById(`${placeholderId}-progress`)
+    const uploadUrl = document.querySelector('meta[name="direct-upload-url"]')?.content || '/rails/active_storage/direct_uploads'
+
+    const upload = new DirectUpload(file, uploadUrl, {
+      directUploadWillStoreFileWithXHR: (xhr) => {
+        xhr.upload.addEventListener("progress", (event) => {
+          const progress = (event.loaded / event.total) * 100
+          progressBar.style.width = `${progress}%`
+        })
+      }
+    })
+
+    upload.create((error, blob) => {
+      const uploadElement = document.getElementById(placeholderId)
+      if (error) {
+        console.error('Upload error:', error)
+        uploadElement.innerHTML = `
+          <div class="card-body">
+            <div class="alert alert-danger mb-0">Upload failed: ${error}</div>
+          </div>
+        `
+      } else {
+        uploadElement.innerHTML = `
+          <div class="card-body">
+            <div class="mb-3">
+              <video controls style="max-width: 100%; max-height: 300px;">
+                <source src="${URL.createObjectURL(file)}" type="${file.type}">
+              </video>
+            </div>
+            <div class="mb-3">
+              <label class="form-label small mb-1">Video Name</label>
+              <input type="text" class="form-control form-control-sm" placeholder="Enter video name..." id="${placeholderId}-name">
+            </div>
+            <div class="d-flex justify-content-between align-items-center">
+              <small class="text-muted">Video uploaded - click Save to add to post</small>
+              <div class="btn-group">
+                <button class="btn btn-sm btn-primary" data-action="click->helios-press-blocks#saveVideoBlock" data-signed-id="${blob.signed_id}" data-position="${position}" data-placeholder-id="${placeholderId}">
+                  Save
+                </button>
+                <button class="btn btn-sm btn-secondary" data-action="click->helios-press-blocks#cancelVideoUpload" data-placeholder-id="${placeholderId}">
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        `
+      }
+    })
+  }
+
+  saveVideoBlock(event) {
+    const button = event.currentTarget
+    const signedId = button.dataset.signedId
+    const position = parseInt(button.dataset.position)
+    const placeholderId = button.dataset.placeholderId
+
+    const nameInput = document.getElementById(`${placeholderId}-name`)
+    const videoName = nameInput?.value || ''
+
+    button.disabled = true
+    button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Saving...'
+
+    const formData = new FormData()
+    formData.append('block[block_type]', 'video_container')
+    formData.append('block[position]', position)
+    formData.append('video_signed_id', signedId)
+    formData.append('video_name', videoName)
+
+    fetch(this.baseUrlValue, {
+      method: 'POST',
+      headers: {
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content,
+        'Accept': 'text/vnd.turbo-stream.html'
+      },
+      body: formData
+    })
+    .then(response => response.text())
+    .then(html => {
+      document.getElementById(placeholderId)?.remove()
+      Turbo.renderStreamMessage(html)
+    })
+    .catch(error => {
+      console.error('Error creating video block:', error)
+      button.disabled = false
+      button.innerHTML = 'Save'
+    })
+  }
+
+  cancelVideoUpload(event) {
+    const placeholderId = event.currentTarget.dataset.placeholderId
+    document.getElementById(placeholderId)?.remove()
+  }
+}

data/app/javascript/helios/press/controllers/image_block_controller.js

@@ -0,0 +1,178 @@
+import { Controller } from "@hotwired/stimulus"
+import Sortable from "sortablejs"
+import { DirectUpload } from "@rails/activestorage"
+
+export default class extends Controller {
+  static targets = ["dropzone", "imagesContainer", "image", "grid", "columnsSelect"]
+  static values = {
+    id: Number,
+    postId: Number,
+    baseUrl: String,
+    blockUrl: String,
+    uploadUrl: String
+  }
+
+  connect() {
+    this.initializeSortable()
+  }
+
+  initializeSortable() {
+    if (this.hasGridTarget) {
+      this.sortable = Sortable.create(this.gridTarget, {
+        animation: 150,
+        ghostClass: 'image-ghost',
+        filter: '.image-dropzone',
+        onEnd: this.handleImageReorder.bind(this)
+      })
+    }
+  }
+
+  handleDragOver(event) {
+    event.preventDefault()
+    this.dropzoneTarget.classList.add('drag-over')
+  }
+
+  handleDragLeave(event) {
+    this.dropzoneTarget.classList.remove('drag-over')
+  }
+
+  handleDrop(event) {
+    event.preventDefault()
+    this.dropzoneTarget.classList.remove('drag-over')
+
+    const files = Array.from(event.dataTransfer.files).filter(file =>
+      file.type.startsWith('image/')
+    )
+
+    if (files.length > 0) {
+      this.uploadImages(files)
+    }
+  }
+
+  uploadImages(files) {
+    files.forEach(file => {
+      const upload = new DirectUpload(
+        file,
+        this.uploadUrlValue || '/rails/active_storage/direct_uploads'
+      )
+
+      upload.create((error, blob) => {
+        if (error) {
+          console.error('Upload error:', error)
+        } else {
+          this.createBlockImage(blob.signed_id)
+        }
+      })
+    })
+  }
+
+  createBlockImage(signedId) {
+    const formData = new FormData()
+    formData.append('block_image[file]', signedId)
+
+    fetch(this.baseUrlValue, {
+      method: 'POST',
+      headers: {
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content,
+        'Accept': 'text/vnd.turbo-stream.html'
+      },
+      body: formData
+    })
+    .then(response => response.text())
+    .then(html => {
+      Turbo.renderStreamMessage(html)
+    })
+    .catch(error => {
+      console.error('Error creating image:', error)
+    })
+  }
+
+  handleImageReorder(event) {
+    const imageIds = this.imageTargets.map(img => img.dataset.imageId)
+
+    fetch(`${this.baseUrlValue}/reorder`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ image_ids: imageIds })
+    })
+  }
+
+  editCaption(event) {
+    const viewCaption = event.currentTarget
+    const editCaption = viewCaption.nextElementSibling
+
+    viewCaption.classList.add('d-none')
+    editCaption.classList.remove('d-none')
+    editCaption.querySelector('input').focus()
+  }
+
+  saveCaption(event) {
+    const input = event.currentTarget
+    const imageId = input.dataset.imageId
+    const caption = input.value
+
+    fetch(`${this.baseUrlValue}/${imageId}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ block_image: { caption: caption } })
+    })
+    .then(() => {
+      const editCaption = input.closest('.caption-edit')
+      const viewCaption = editCaption.previousElementSibling
+
+      viewCaption.textContent = caption || 'Click to add caption...'
+      viewCaption.classList.remove('d-none')
+      editCaption.classList.add('d-none')
+    })
+  }
+
+  cancelCaption(event) {
+    const editCaption = event.currentTarget.closest('.caption-edit')
+    const viewCaption = editCaption.previousElementSibling
+
+    viewCaption.classList.remove('d-none')
+    editCaption.classList.add('d-none')
+  }
+
+  deleteImage(event) {
+    event.preventDefault()
+    const imageElement = event.currentTarget.closest('[data-helios-press-image-block-target="image"]')
+    const imageId = imageElement.dataset.imageId
+
+    if (confirm('Delete this image?')) {
+      fetch(`${this.baseUrlValue}/${imageId}`, {
+        method: 'DELETE',
+        headers: {
+          'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+        }
+      })
+      .then(() => {
+        imageElement.remove()
+      })
+    }
+  }
+
+  updateColumns(event) {
+    const columns = parseInt(event.target.value)
+
+    if (this.hasGridTarget) {
+      this.gridTarget.style.setProperty('--grid-columns', columns)
+      this.gridTarget.dataset.columns = columns
+    }
+
+    fetch(this.blockUrlValue, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
+      },
+      body: JSON.stringify({ block: { columns: columns } })
+    })
+  }
+}

data/app/javascript/helios/press/controllers/text_block_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["viewMode", "editMode", "form"]
+  static values = {
+    id: Number,
+    postId: Number,
+    baseUrl: String,
+    mode: String
+  }
+
+  connect() {
+    this.showCurrentMode()
+  }
+
+  enterEditMode(event) {
+    event.preventDefault()
+    this.modeValue = "edit"
+    this.showCurrentMode()
+  }
+
+  cancelEdit(event) {
+    event.preventDefault()
+    this.modeValue = "view"
+    this.showCurrentMode()
+  }
+
+  save(event) {
+    event.preventDefault()
+    const formData = new FormData(this.formTarget)
+
+    fetch(this.baseUrlValue, {
+      method: 'PATCH',
+      headers: {
+        'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content,
+        'Accept': 'text/vnd.turbo-stream.html'
+      },
+      body: formData
+    })
+    .then(response => response.text())
+    .then(html => {
+      Turbo.renderStreamMessage(html)
+      this.modeValue = "view"
+    })
+    .catch(error => {
+      console.error('Error saving block:', error)
+    })
+  }
+
+  showCurrentMode() {
+    if (this.modeValue === "edit") {
+      this.viewModeTarget.classList.add('d-none')
+      this.editModeTarget.classList.remove('d-none')
+    } else {
+      this.viewModeTarget.classList.remove('d-none')
+      this.editModeTarget.classList.add('d-none')
+    }
+  }
+
+  modeValueChanged() {
+    this.showCurrentMode()
+  }
+}

data/app/javascript/helios/press/index.js

@@ -0,0 +1,6 @@
+// Helios Press - Stimulus Controllers
+// Import these in your host app's application.js or controllers/index.js
+
+export { default as HeliosPressBlocksController } from "./controllers/blocks_controller"
+export { default as HeliosPressTextBlockController } from "./controllers/text_block_controller"
+export { default as HeliosPressImageBlockController } from "./controllers/image_block_controller"

data/app/jobs/helios/press/application_job.rb

@@ -0,0 +1,6 @@
+module Helios
+  module Press
+    class ApplicationJob < ActiveJob::Base
+    end
+  end
+end

data/app/mailers/helios/press/application_mailer.rb

@@ -0,0 +1,8 @@
+module Helios
+  module Press
+    class ApplicationMailer < ActionMailer::Base
+      default from: "from@example.com"
+      layout "mailer"
+    end
+  end
+end

data/app/models/helios/press/application_record.rb

@@ -0,0 +1,7 @@
+module Helios
+  module Press
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

data/app/models/helios/press/block.rb

@@ -0,0 +1,34 @@
+module Helios
+  module Press
+    class Block < ActiveRecord::Base
+      self.table_name = "helios_press_blocks"
+
+      belongs_to :post, class_name: "Helios::Press::Post", touch: true
+
+      has_rich_text :content
+      has_many :block_images, -> { order(position: :asc) },
+               class_name: "Helios::Press::BlockImage",
+               foreign_key: :block_id,
+               dependent: :destroy
+
+      BLOCK_TYPES = %w[text image_container video_container].freeze
+
+      validates :block_type, presence: true, inclusion: { in: BLOCK_TYPES }
+      validates :position, presence: true, numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+
+      acts_as_list scope: :post
+
+      def text?
+        block_type == "text"
+      end
+
+      def image_container?
+        block_type == "image_container"
+      end
+
+      def video_container?
+        block_type == "video_container"
+      end
+    end
+  end
+end