rivet_cms 0.1.0.pre

data/app/assets/stylesheets/rivet_cms/application.tailwind.css

@@ -0,0 +1,25 @@
+@layer base {
+  :root {
+    /* Brand color variables will be set dynamically */
+    --color-brand-50: '';
+    --color-brand-100: '';
+    --color-brand-200: '';
+    --color-brand-300: '';
+    --color-brand-400: '';
+    --color-brand-500: '';
+    --color-brand-600: '';
+    --color-brand-700: '';
+    --color-brand-800: '';
+    --color-brand-900: '';
+    --color-brand-950: '';
+  }
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap');
+
+@import "tailwindcss";
+@import "./brand_colors";
+
+@theme {
+  --font-passion-one: "Passion One", sans-serif; 
+}

data/app/assets/stylesheets/rivet_cms/brand_colors.css

@@ -0,0 +1,168 @@
+/* 
+  This file contains overrides for brand colors.
+  It should be loaded after the main Tailwind CSS.
+*/
+
+/* Brand color backgrounds */
+.bg-brand-50 { background-color: var(--color-brand-50) !important; }
+.bg-brand-100 { background-color: var(--color-brand-100) !important; }
+.bg-brand-200 { background-color: var(--color-brand-200) !important; }
+.bg-brand-300 { background-color: var(--color-brand-300) !important; }
+.bg-brand-400 { background-color: var(--color-brand-400) !important; }
+.bg-brand-500 { background-color: var(--color-brand-500) !important; }
+.bg-brand-600 { background-color: var(--color-brand-600) !important; }
+.bg-brand-700 { background-color: var(--color-brand-700) !important; }
+.bg-brand-800 { background-color: var(--color-brand-800) !important; }
+.bg-brand-900 { background-color: var(--color-brand-900) !important; }
+.bg-brand-950 { background-color: var(--color-brand-950) !important; }
+
+/* Brand color text */
+.text-brand-50 { color: var(--color-brand-50) !important; }
+.text-brand-100 { color: var(--color-brand-100) !important; }
+.text-brand-200 { color: var(--color-brand-200) !important; }
+.text-brand-300 { color: var(--color-brand-300) !important; }
+.text-brand-400 { color: var(--color-brand-400) !important; }
+.text-brand-500 { color: var(--color-brand-500) !important; }
+.text-brand-600 { color: var(--color-brand-600) !important; }
+.text-brand-700 { color: var(--color-brand-700) !important; }
+.text-brand-800 { color: var(--color-brand-800) !important; }
+.text-brand-900 { color: var(--color-brand-900) !important; }
+.text-brand-950 { color: var(--color-brand-950) !important; }
+
+/* Brand color borders */
+.border-brand-50 { border-color: var(--color-brand-50) !important; }
+.border-brand-100 { border-color: var(--color-brand-100) !important; }
+.border-brand-200 { border-color: var(--color-brand-200) !important; }
+.border-brand-300 { border-color: var(--color-brand-300) !important; }
+.border-brand-400 { border-color: var(--color-brand-400) !important; }
+.border-brand-500 { border-color: var(--color-brand-500) !important; }
+.border-brand-600 { border-color: var(--color-brand-600) !important; }
+.border-brand-700 { border-color: var(--color-brand-700) !important; }
+.border-brand-800 { border-color: var(--color-brand-800) !important; }
+.border-brand-900 { border-color: var(--color-brand-900) !important; }
+.border-brand-950 { border-color: var(--color-brand-950) !important; }
+
+/* Hover states */
+.hover\:bg-brand-50:hover { background-color: var(--color-brand-50) !important; }
+.hover\:bg-brand-100:hover { background-color: var(--color-brand-100) !important; }
+.hover\:bg-brand-200:hover { background-color: var(--color-brand-200) !important; }
+.hover\:bg-brand-300:hover { background-color: var(--color-brand-300) !important; }
+.hover\:bg-brand-400:hover { background-color: var(--color-brand-400) !important; }
+.hover\:bg-brand-500:hover { background-color: var(--color-brand-500) !important; }
+.hover\:bg-brand-600:hover { background-color: var(--color-brand-600) !important; }
+.hover\:bg-brand-700:hover { background-color: var(--color-brand-700) !important; }
+.hover\:bg-brand-800:hover { background-color: var(--color-brand-800) !important; }
+.hover\:bg-brand-900:hover { background-color: var(--color-brand-900) !important; }
+.hover\:bg-brand-950:hover { background-color: var(--color-brand-950) !important; }
+
+.hover\:text-brand-50:hover { color: var(--color-brand-50) !important; }
+.hover\:text-brand-100:hover { color: var(--color-brand-100) !important; }
+.hover\:text-brand-200:hover { color: var(--color-brand-200) !important; }
+.hover\:text-brand-300:hover { color: var(--color-brand-300) !important; }
+.hover\:text-brand-400:hover { color: var(--color-brand-400) !important; }
+.hover\:text-brand-500:hover { color: var(--color-brand-500) !important; }
+.hover\:text-brand-600:hover { color: var(--color-brand-600) !important; }
+.hover\:text-brand-700:hover { color: var(--color-brand-700) !important; }
+.hover\:text-brand-800:hover { color: var(--color-brand-800) !important; }
+.hover\:text-brand-900:hover { color: var(--color-brand-900) !important; }
+.hover\:text-brand-950:hover { color: var(--color-brand-950) !important; }
+
+.hover\:border-brand-50:hover { border-color: var(--color-brand-50) !important; }
+.hover\:border-brand-100:hover { border-color: var(--color-brand-100) !important; }
+.hover\:border-brand-200:hover { border-color: var(--color-brand-200) !important; }
+.hover\:border-brand-300:hover { border-color: var(--color-brand-300) !important; }
+.hover\:border-brand-400:hover { border-color: var(--color-brand-400) !important; }
+.hover\:border-brand-500:hover { border-color: var(--color-brand-500) !important; }
+.hover\:border-brand-600:hover { border-color: var(--color-brand-600) !important; }
+.hover\:border-brand-700:hover { border-color: var(--color-brand-700) !important; }
+.hover\:border-brand-800:hover { border-color: var(--color-brand-800) !important; }
+.hover\:border-brand-900:hover { border-color: var(--color-brand-900) !important; }
+.hover\:border-brand-950:hover { border-color: var(--color-brand-950) !important; }
+
+/* Focus states */
+.focus\:ring-brand-50:focus { --tw-ring-color: var(--color-brand-50) !important; }
+.focus\:ring-brand-100:focus { --tw-ring-color: var(--color-brand-100) !important; }
+.focus\:ring-brand-200:focus { --tw-ring-color: var(--color-brand-200) !important; }
+.focus\:ring-brand-300:focus { --tw-ring-color: var(--color-brand-300) !important; }
+.focus\:ring-brand-400:focus { --tw-ring-color: var(--color-brand-400) !important; }
+.focus\:ring-brand-500:focus { --tw-ring-color: var(--color-brand-500) !important; }
+.focus\:ring-brand-600:focus { --tw-ring-color: var(--color-brand-600) !important; }
+.focus\:ring-brand-700:focus { --tw-ring-color: var(--color-brand-700) !important; }
+.focus\:ring-brand-800:focus { --tw-ring-color: var(--color-brand-800) !important; }
+.focus\:ring-brand-900:focus { --tw-ring-color: var(--color-brand-900) !important; }
+.focus\:ring-brand-950:focus { --tw-ring-color: var(--color-brand-950) !important; }
+
+.focus\:border-brand-50:focus { border-color: var(--color-brand-50) !important; }
+.focus\:border-brand-100:focus { border-color: var(--color-brand-100) !important; }
+.focus\:border-brand-200:focus { border-color: var(--color-brand-200) !important; }
+.focus\:border-brand-300:focus { border-color: var(--color-brand-300) !important; }
+.focus\:border-brand-400:focus { border-color: var(--color-brand-400) !important; }
+.focus\:border-brand-500:focus { border-color: var(--color-brand-500) !important; }
+.focus\:border-brand-600:focus { border-color: var(--color-brand-600) !important; }
+.focus\:border-brand-700:focus { border-color: var(--color-brand-700) !important; }
+.focus\:border-brand-800:focus { border-color: var(--color-brand-800) !important; }
+.focus\:border-brand-900:focus { border-color: var(--color-brand-900) !important; }
+.focus\:border-brand-950:focus { border-color: var(--color-brand-950) !important; } 
+
+
+[type='text']:focus,
+[type='email']:focus,
+[type='url']:focus,
+[type='password']:focus,
+[type='number']:focus,
+[type='date']:focus,
+[type='datetime-local']:focus,
+[type='month']:focus,
+[type='search']:focus,
+[type='tel']:focus,
+[type='time']:focus,
+[type='week']:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+  --tw-ring-color: var(--color-brand-500) !important;
+  --tw-ring-opacity: 0.5 !important;
+  border-color: var(--color-brand-500) !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/* Override focus styles for checkboxes and radio buttons */
+[type='checkbox']:focus,
+[type='radio']:focus {
+  --tw-ring-color: var(--color-brand-500) !important;
+  --tw-ring-opacity: 0.5 !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+/* Override checked styles for checkboxes and radio buttons */
+[type='checkbox']:checked,
+[type='radio']:checked {
+  background-color: var(--color-brand-600) !important;
+  border-color: var(--color-brand-600) !important;
+}
+
+/* Override focus-visible styles for all form elements */
+[type='text']:focus-visible,
+[type='email']:focus-visible,
+[type='url']:focus-visible,
+[type='password']:focus-visible,
+[type='number']:focus-visible,
+[type='date']:focus-visible,
+[type='datetime-local']:focus-visible,
+[type='month']:focus-visible,
+[type='search']:focus-visible,
+[type='tel']:focus-visible,
+[type='time']:focus-visible,
+[type='week']:focus-visible,
+[multiple]:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+[type='checkbox']:focus-visible,
+[type='radio']:focus-visible {
+  --tw-ring-color: var(--color-brand-500) !important;
+  --tw-ring-opacity: 0.5 !important;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+} 

data/app/controllers/rivet_cms/api/docs_controller.rb

@@ -0,0 +1,38 @@
+module RivetCms
+  module Api
+    class DocsController < RivetCms::ApplicationController
+      layout false
+      
+      def show
+        @schema = RivetCms::OpenApiGenerator.generate
+        
+        respond_to do |format|
+          format.html
+          format.json { render json: @schema }
+          format.yaml { render plain: @schema.to_yaml, content_type: 'application/x-yaml' }
+        rescue StandardError => e
+          Rails.logger.error "Error generating API documentation: #{e.message}"
+          render_error_response(format)
+        end
+      end
+
+      private
+
+      def render_error_response(format)
+        error_schema = {
+          openapi: "3.0.1",
+          info: {
+            title: "API Documentation Temporarily Unavailable",
+            version: "1.0.0",
+            description: "There was an error generating the API documentation. Please try again later."
+          },
+          paths: {}
+        }
+
+        format.html { render :error, status: :internal_server_error }
+        format.json { render json: error_schema, status: :internal_server_error }
+        format.yaml { render plain: error_schema.to_yaml, status: :internal_server_error }
+      end
+    end
+  end
+end 

data/app/controllers/rivet_cms/application_controller.rb

@@ -0,0 +1,5 @@
+module RivetCms
+  class ApplicationController < ActionController::Base
+    #include RivetCmsAuth::Authentication
+  end
+end

data/app/controllers/rivet_cms/components_controller.rb

@@ -0,0 +1,7 @@
+module RivetCms
+  class ComponentsController < ApplicationController
+    def index
+      @components = RivetCms::Component.all
+    end
+  end
+end

data/app/controllers/rivet_cms/content_types_controller.rb

@@ -0,0 +1,61 @@
+module RivetCms
+  class ContentTypesController < ApplicationController
+    before_action :set_content_type, only: [:show, :edit, :update, :destroy]
+
+    def index
+      @content_types = ContentType.order(:name)
+    end
+
+    def show
+      @contents = @content_type.contents.order(created_at: :desc).limit(10)
+    end
+
+    def new
+      @content_type = ContentType.new
+    end
+
+    def edit
+    end
+
+    def create
+      @content_type = ContentType.new(content_type_params)
+
+      if @content_type.save
+        redirect_to @content_type, notice: 'Content type was successfully created.'
+      else
+        respond_to do |format|
+          format.html { render :new, status: :unprocessable_entity }
+          format.turbo_stream { 
+            render turbo_stream: turbo_stream.update("content_type_form",
+              partial: "form",
+              locals: { content_type: @content_type }
+            )
+          }
+        end
+      end
+    end
+
+    def update
+      if @content_type.update(content_type_params)
+        redirect_to @content_type, notice: 'Content type was successfully updated.'
+      else
+        render :edit
+      end
+    end
+
+    def destroy
+      @content_type.destroy
+      redirect_to content_types_url, notice: 'Content type was successfully destroyed.'
+    end
+
+    private
+
+    def set_content_type
+      @content_type = ContentType.find(params[:id])
+    end
+
+    def content_type_params
+      params.require(:content_type).permit(:name, :slug, :description, :is_single)
+    end
+  end
+end 

data/app/controllers/rivet_cms/dashboard_controller.rb

@@ -0,0 +1,10 @@
+module RivetCms
+  class DashboardController < ApplicationController
+    def index
+      @content_types = ContentType.order(:name)
+      @recent_contents = Content.order(updated_at: :desc).limit(5)
+      @components = Component.all
+      @content_type = ContentType.new
+    end
+  end
+end

data/app/controllers/rivet_cms/fields_controller.rb

@@ -0,0 +1,109 @@
+module RivetCms
+  class FieldsController < ApplicationController
+    before_action :set_content_type
+    before_action :set_field, only: [:edit, :update, :destroy, :update_width]
+
+    # GET /content_types/:content_type_id/fields
+    def index
+      @fields = @content_type.fields.includes(:component).order(:position)
+      @field = @content_type.fields.new
+    end
+
+    # GET /content_types/:content_type_id/fields/new
+    def new
+      @field = @content_type.fields.new
+    end
+
+    # POST /content_types/:content_type_id/fields
+    def create
+      @field = @content_type.fields.new(field_params)
+
+      if @field.save
+        redirect_to content_type_fields_path(@content_type), notice: "Field was successfully created."
+      else
+        respond_to do |format|
+          format.html { render :new, status: :unprocessable_entity }
+          format.turbo_stream { 
+            render turbo_stream: turbo_stream.update("field_form",
+              partial: "form",
+              locals: { content_type: @content_type, field: @field }
+            )
+          }
+        end
+      end
+    end
+
+    # GET /content_types/:content_type_id/fields/:id/edit
+    def edit
+    end
+
+    # PATCH/PUT /content_types/:content_type_id/fields/:id
+    def update
+      if @field.update(field_params)
+        redirect_to content_type_fields_path(@content_type), notice: "Field was successfully updated."
+      else
+        respond_to do |format|
+          format.html { render :edit, status: :unprocessable_entity }
+          format.turbo_stream { 
+            render turbo_stream: turbo_stream.update("field_form",
+              partial: "form",
+              locals: { content_type: @content_type, field: @field }
+            )
+          }
+        end
+      end
+    end
+
+    # DELETE /content_types/:content_type_id/fields/:id
+    def destroy
+      @field.destroy
+      redirect_to content_type_fields_path(@content_type), notice: "Field was successfully deleted."
+    end
+
+    # POST /content_types/:content_type_id/fields/update_positions
+    def update_positions
+      if params[:positions].present?
+        ActiveRecord::Base.transaction do
+          params[:positions].each do |position_data|
+            field = @content_type.fields.find_by_prefix_id(position_data[:id])
+            if field
+              field.update!(
+                position: position_data[:position],
+                row_group: position_data[:row_group]
+              )
+            end
+          end
+        end
+        
+        render json: { success: true }
+      else
+        render json: { error: "No positions data provided" }, status: :bad_request
+      end
+    end
+
+    # PATCH /content_types/:content_type_id/fields/:id/update_width
+    def update_width
+      width_value = params[:width]
+      if width_value.present? && RivetCms::Field::WIDTHS.include?(width_value)
+        result = @field.update_columns(width: width_value, row_group: nil)
+        render json: { success: true, field: { id: @field.to_param, width: @field.width } }
+      else
+        render json: { error: "Invalid width value" }, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def set_content_type
+      @content_type = ContentType.find(params[:content_type_id])
+    end
+
+    def set_field
+      @field = @content_type.fields.find_by_prefix_id(params[:id])
+    end
+
+    def field_params
+      params.require(:field).permit(:name, :field_type, :required, :component_id, :description, :width, options: {})
+    end
+  end
+end

data/app/helpers/rivet_cms/application_helper.rb

@@ -0,0 +1,7 @@
+module RivetCms
+  module ApplicationHelper
+    include RivetCms::BrandColorHelper
+    include RivetCms::SignOutHelper
+    include RivetCms::FlashHelper
+  end
+end

data/app/helpers/rivet_cms/brand_color_helper.rb

@@ -0,0 +1,71 @@
+module RivetCms
+  module BrandColorHelper
+    # Generate CSS for brand colors based on the primary color
+    def brand_color_css
+      base_color = "#ff7043"
+      
+      # Generate CSS variables for all the shades
+      <<~CSS
+        <style id="brand-colors">
+          :root {
+            --color-brand-50: #{lighten_color(base_color, 0.85)};
+            --color-brand-100: #{lighten_color(base_color, 0.7)};
+            --color-brand-200: #{lighten_color(base_color, 0.55)};
+            --color-brand-300: #{lighten_color(base_color, 0.4)};
+            --color-brand-400: #{lighten_color(base_color, 0.2)};
+            --color-brand-500: #{lighten_color(base_color, 0.1)};
+            --color-brand-600: #{base_color};
+            --color-brand-700: #{darken_color(base_color, 0.1)};
+            --color-brand-800: #{darken_color(base_color, 0.2)};
+            --color-brand-900: #{darken_color(base_color, 0.3)};
+            --color-brand-950: #{darken_color(base_color, 0.4)};
+          }
+        </style>
+      CSS
+    end
+    
+    private
+    
+    # Simple color manipulation helpers
+    def lighten_color(hex_color, amount)
+      manipulate_color(hex_color) do |r, g, b|
+        [
+          [(r + (255 - r) * amount).round, 255].min,
+          [(g + (255 - g) * amount).round, 255].min,
+          [(b + (255 - b) * amount).round, 255].min
+        ]
+      end
+    end
+    
+    def darken_color(hex_color, amount)
+      manipulate_color(hex_color) do |r, g, b|
+        [
+          [(r * (1 - amount)).round, 0].max,
+          [(g * (1 - amount)).round, 0].max,
+          [(b * (1 - amount)).round, 0].max
+        ]
+      end
+    end
+    
+    def manipulate_color(hex_color)
+      hex_color = hex_color.gsub('#', '')
+      
+      # Convert to RGB
+      if hex_color.length == 3
+        r = hex_color[0].to_i(16) * 17
+        g = hex_color[1].to_i(16) * 17
+        b = hex_color[2].to_i(16) * 17
+      else
+        r = hex_color[0..1].to_i(16)
+        g = hex_color[2..3].to_i(16)
+        b = hex_color[4..5].to_i(16)
+      end
+      
+      # Apply transformation
+      new_r, new_g, new_b = yield(r, g, b)
+      
+      # Convert back to hex
+      "#%02x%02x%02x" % [new_r, new_g, new_b]
+    end
+  end
+end 

data/app/helpers/rivet_cms/flash_helper.rb

@@ -0,0 +1,37 @@
+module RivetCms
+  module FlashHelper
+    def flash_class_for(type)
+      case type.to_sym
+      when :notice, :success
+        "bg-green-50"
+      when :error, :alert
+        "bg-red-50"
+      when :warning
+        "bg-yellow-50"
+      else
+        "bg-gray-50"
+      end
+    end
+
+    def flash_icon_for(type)
+      case type.to_sym
+      when :notice, :success
+        content_tag(:svg, class: "h-5 w-5 text-green-400", viewBox: "0 0 20 20", fill: "currentColor") do
+          content_tag(:path, nil, fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clip_rule: "evenodd")
+        end
+      when :error, :alert
+        content_tag(:svg, class: "h-5 w-5 text-red-400", viewBox: "0 0 20 20", fill: "currentColor") do
+          content_tag(:path, nil, fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clip_rule: "evenodd")
+        end
+      when :warning
+        content_tag(:svg, class: "h-5 w-5 text-yellow-400", viewBox: "0 0 20 20", fill: "currentColor") do
+          content_tag(:path, nil, fill_rule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clip_rule: "evenodd")
+        end
+      else
+        content_tag(:svg, class: "h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor") do
+          content_tag(:path, nil, fill_rule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clip_rule: "evenodd")
+        end
+      end
+    end
+  end
+end

data/app/helpers/rivet_cms/sign_out_helper.rb

@@ -0,0 +1,11 @@
+module RivetCms
+  module SignOutHelper
+    # Returns the sign-out path for the application.
+    # Uses RivetCmsAuth’s auth_sign_out_path if available, otherwise falls back to the configured path or root.
+    def rivet_sign_out_path
+      config = RivetCms.configuration
+      return config.sign_out_path.call if config.sign_out_path.respond_to?(:call)
+      config.sign_out_path || "/"
+    end
+  end
+end

data/app/javascript/controllers/content_type_form_controller.js

@@ -0,0 +1,53 @@
+import { Controller } from "@hotwired/stimulus"
+import pluralize from "pluralize"
+
+export default class extends Controller {
+  static targets = ["name", "slug", "isSingle"]
+
+  connect() {
+    this.nameTarget.addEventListener("input", this.updateSlug.bind(this))
+    this.isSingleTarget.addEventListener("change", this.updateSlug.bind(this))
+    this.lastGeneratedSlug = this.slugTarget.value
+  }
+
+  updateSlug() {
+    const name = this.nameTarget.value.trim()
+    if (!name) {
+      this.slugTarget.value = ""
+      return
+    }
+
+    let slug = this.generateSlug(name)
+    if (!slug) {
+      this.slugTarget.value = ""
+      return
+    }
+
+    const isSingle = this.isSingleTarget.checked
+    if (isSingle && pluralize.isPlural(slug)) {
+      slug = pluralize.singular(slug)
+    } else if (!isSingle && !pluralize.isPlural(slug)) {
+      slug = pluralize(slug)
+    }
+
+    if (slug !== this.lastGeneratedSlug) {
+      this.slugTarget.value = slug
+      this.lastGeneratedSlug = slug
+    }
+  }
+
+  generateSlug(text) {
+    return text
+      .toLowerCase()
+      .replace(/[\s_]+/g, "-")      // Spaces or underscores to hyphen
+      .replace(/[^a-z0-9-]/g, "")   // Keep letters, numbers, hyphens
+      .replace(/-+/g, "-")          // Collapse hyphens
+      .replace(/^-|-$/g, "")        // Trim leading/trailing hyphens
+      .trim()
+  }
+
+  disconnect() {
+    this.nameTarget.removeEventListener("input", this.updateSlug.bind(this))
+    this.isSingleTarget.removeEventListener("change", this.updateSlug.bind(this))
+  }
+}