@bigbinary/neeto-seo-frontend v3.0.3

neeto-seo-nano

The neeto-seo-nano manages SEO settings across Neeto applications.

Contents

1. Development with Host Application
2. Instructions for Publishing

Development with Host Application

Installation

1. Add this line to your application's Gemfile:

    source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem "neeto-seo-engine"
    end

2. And then execute:

   bundle install

3. Run migrations

   bundle exec rails neeto_seo_engine:install:migrations
   bundle exec rails db:migrate

Usage

1. Add association

   class BlogPost > ApplicationRecord
     has_one :seo_setting, as: :entity, class_name: "NeetoSeoEngine::SeoSetting", dependent: :destroy
   end

2. Add controller

   All common controller logic is extracted to the engine. However, we still need to load some records from the host app controller.

   class Api::V1::Admin::BlogPosts::SeoSettingsController < NeetoSeoEngine::Api::V1::SeoSettingsController
     private
   
       def load_entity!
         @entity = @organization.blog_posts.find(params[:blog_post_id])
       end
   end

3. Include the following module to your application's config/routes.rb file:

   include NeetoSeoEngine::Routes::Draw

4. Define required routes.

# routes/admin.rb
seo_setting_routes

5. Create a file in the host app under app/lib/neeto_seo_engine/callbacks.rb & provide the permission (If you don't have permissions, then simply return true)

   module NeetoSeoEngine
     class Callbacks
       def self.can_manage_seo_settings?(user)
         user.has_permission?("neeto_seo_engine.manage_seo_settings")
       end
     end
   end

   Note: If this implementation is missing in the host application, the policy will default to checking user.has_permission?("neeto_seo_engine.manage_seo_settings").

6. Add the frontend component to your desired path. There are two components in the package:

   1. SeoSettingsPane
   2. SeoSettingsPage

   The SeoSettingsPage includes the SeoSettingsPane within it. The SeoSettingsPage is used for entities that require a full-page component, while the SeoSettingsPane is intended for cases where only a pane is required.

   Here is an example of the usage of SeoSettingsPane:

   const SeoSettings = ({ isOpen, onClose }) => {
     const { blogPostId } = useParams();
   
     const SEO_FORM_FIELDS = [
       {
         name: "title",
         helpDocUrl: "https://help.neetopublish.com/#1-page-title",
         maxLength: 80,
       },
       {
         name: "description",
         altLabel: "Meta Description",
         altPlaceholder: "Enter meta Description",
         helpDocUrl: "https://help.neetopublish.com/#2-meta-description",
         maxLength: 150,
       },
       {
         name: "keywords",
         helpDocUrl: "https://help.neetopublish.com/#3-keywords",
         maxLength: 150,
         popOverDescription: "Some description about Meta keywords",
       },
       { name: "allowSearchEngineCrawl" },
       { name: "googleAnalyticsTrackingId" },
       { name: "coverImage" },
     ];
   
     return (
       <SeoSettingsPane
         {...{ isOpen, onClose }}
         apiEndpointUrl={`${BASE_API_V1_URL}/admin/blog_posts/${blogPostId}/seo_setting`}
         defaultHelpDocUrl="https://help.neetopublish.com/search-engine-optimization"
         entity="Page"
         seoFormFields={SEO_FORM_FIELDS}
       />
     );
   };

   You need to build SEO form fields with the desired fields required in your engine. The allowed fields are title, titleSuffix, keywords, and description, allowSearchEngineToCrawl, googleAnalyticsTrackingId, and coverImage. These components will be generated accordingly. You can pass the corresponding helpDocUrl, popOverDescription, and maxLength. The name is mandatory to generate the component.

   You can also pass an additionalComponent prop to append an additional component of your choice in the SeoSettingsPane.

   You must pass the entity prop, which can be Page, Article, Site, or any other entity of your choice.

   The SeoSettingsPage has similar props. Additionally, you can pass the breadcrumbs and helpPopoverDescription of the page.

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.