dato-rails 0.7.5 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d61ca3870d999b82aed6ff238182a3a6fd4b294f87c608b1b9c4ee9425d97ad
-  data.tar.gz: 3032c72e0226946239830f8c5aaeb1a5f0640328aa349a269c1f156d9b40f6b8
+  metadata.gz: 1973ec82f04620deeaf8b94c8b8fe4816c60f5c00cf0ccfba93ab38e938af5fb
+  data.tar.gz: 1f83767d11f764f199b4bf394da6d216a237d22a37fee001542413f5f183ab61
 SHA512:
-  metadata.gz: 7733a018553585d7f51a8d85920932dabe04944581772d84c6e9bea5d9c8ec6107e0269c6b0832da4028533128d95c0fa91e409b17a4a1d4acf429ae9c5e1591
-  data.tar.gz: c705f72bf8f0ed731ff656459b0ef0e5adc4c0a351a79b250f4db55eb0835f6e17df8adb5e9e9a01f6420704c78c92972f894fc06935169795462b142b3a2a70
+  metadata.gz: 69b37b143b7e6f422c28f3b74677991d876a5bd181e3ebf97e9bc93d31165404bc39c32991cdbf3cd635c640fde730cc564a00c002ff4cf725870ec2703282c4
+  data.tar.gz: b9f95b4994a61b6801a781ba3369e679a1dbfc012d356a213de48b30bbab8a54ca2282d33a7754368c3b12b594b8b22ec265dc89b4776c083c0086707cf97dea

data/README.md

@@ -6,6 +6,8 @@ This gem allows you to fetch data using Dato GraphQL APIs and render the content
 
 👉 See [this simple tutorial to get started on dev.to](https://dev.to/coorasse/datocms-with-ruby-on-rails-3ae5). 👈
 
+👉 See also [this second tutorial to build a Blog](https://dev.to/coorasse/rails-blog-with-datocms-2h1e). 👈
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -31,7 +33,9 @@ queries to the GraphQL endpoint.
 Look at GQLi documentation for more information about the syntax of queries.
 You can also find some examples in specs of this library.
 
-Set your api token as `DATO_API_TOKEN` environment variable.
+Set your api token as `DATO_API_TOKEN` environment variable or as
+`Rails.application.credentials.dig(:dato, :api_token)`.
+ENV variable will have precedence.
 
 ```ruby
 client = Dato::Client.new # you can also pass the api token here.
@@ -57,7 +61,7 @@ GQLi::DSL.query {
         __typename
         id
         image {
-          responsiveImage(imgixParams: {fm: __enum("png")}) {
+          responsiveImage(imgixParams: { fm: __enum("png") }) {
             ___ Dato::Fragments::ResponsiveImage
           }
         }
@@ -86,27 +90,13 @@ If you have a responsive image, you can render it with:
 render Dato::ResponsiveImage.new(node.image.responsiveImage)
 ```
 
-To define a custom node, you can create a new `Dato::CustomNode` view component in your application and it will be automatically used.
-
-You can also customize how each node type is rendered by specifying the mapping on the single render:
-
-```ruby
-render Dato::StructuredText.new(response.data.homepage.content, overrides: { link: Dato::NotRendered })
-```
-
-or globally:
-
-```
-# config/initializers/dato.rb
-
-Dato::Config.overrides = {
-  link: 'Dato::NotRendered'
-}.with_indifferent_access
-```
+Read more about [StructuredText - Custom Nodes](docs/custom_nodes.md).
 
 ## Preview and live
 
-The `Dato::Client` supports both [preview](https://www.datocms.com/docs/pro-tips/how-to-manage-a-live-and-a-preview-site) and [live updates](https://www.datocms.com/docs/real-time-updates-api) features from Dato CMS.
+The `Dato::Client` supports
+both [preview](https://www.datocms.com/docs/pro-tips/how-to-manage-a-live-and-a-preview-site)
+and [live updates](https://www.datocms.com/docs/real-time-updates-api) features from Dato CMS.
 
 ```ruby
 Dato::Client.new(preview: true) # to fetch draft versions
@@ -123,13 +113,13 @@ you probably have the following:
 
 ```ruby
 result = Dato::Client.new.execute!(my_query)
-render(MyComponent.new(result))
+render(MyComponent.new(result.data))
 ```
 
-you can now wrap everything in a `Dato::Live` component like this:
+you can now wrap everything in a `Dato::Wrapper` component like this:
 
 ```ruby
-render(Dato::Live.new(MyComponent, my_query, preview: true, live: true))
+render(Dato::Wrapper.new(MyComponent, my_query, preview: true, live: true))
 ```
 
 and your component will come to life with live updates 🎉 (requires turbo).
@@ -170,24 +160,26 @@ Dato::Client.new.items.destroy(item_id: '123')
 
 ## File upload
 
-Dato Rails also supports file uploads. 
-These can be created either from a local file or from a url. 
+Dato Rails also supports file uploads.
+These can be created either from a local file or from a url.
 Basically all file types are supported, as long as they are valid in the CMS.
-Be aware that dato jobs are not synchronous, so you may need to 
+Be aware that dato jobs are not synchronous, so you may need to
 implement some kind of polling to check if the upload is finished.
 The create method returns a job id, which can be used to retrieve the upload result.
 
-> In addition to the binary file, also attributes and metadata can be uploaded. 
-Both metadata and attributes are optional.
+> In addition to the binary file, also attributes and metadata can be uploaded.
+> Both metadata and attributes are optional.
 > Provide attributes according to the [docs](https://www.datocms.com/docs/content-management-api/resources/upload)
 
 ### Upload from Url
+
 ```ruby
 Dato::Client.new.uploads.create_from_url('https://picsum.photos/seed/picsum/200/300')
 Dato::Client.new.uploads.create_from_url('https://picsum.photos/seed/picsum/200/300', attributes:)
 ```
 
 ### Upload from Local File
+
 ```ruby
 file = File.open('image.png')
 
@@ -203,20 +195,23 @@ attributes = { author: 'Dato Rails', default_field_metadata: meta }
 ```
 
 ### Optional: Filename
+
 ```ruby
 Dato::Client.new.uploads.create_from_url('https://picsum.photos/seed/picsum/200/300', filename: 'test.png')
 Dato::Client.new.uploads.create_from_file(file.path, filename: 'test.png')
 ```
 
-
 ### Getting the upload id
-As the file upload is asynchronous, you may need to implement some kind of polling to check if the upload is finished. 
+
+As the file upload is asynchronous, you may need to implement some kind of polling to check if the upload is finished.
 With the retrieve_job_result method you can retrieve the upload id from the job result.
+
 ```ruby
 job_id = client.uploads.create_from_file(file.path) # get back a job id
 response = client.uploads.retrieve_job_result(job_id).parse # check the status
 upload_id = response.dig('data', 'attributes', 'payload', 'data', 'id') # if nil, it's not done yet
 ```
+
 ## Configuration
 
 The following options are available:
@@ -229,15 +224,18 @@ Dato::Config.configure do |config|
   config.blocks = {} # default: {}
   config.cache = false # default: false
   config.cache_namespace = 'dato-rails' # default: 'dato-rails'
-  config.publish_key = ENV['DATO_PUBLISH_KEY'] # default: ENV['DATO_PUBLISH_KEY']
-  config.build_trigger_id = ENV['DATO_BUILD_TRIGGER_ID'] # default: ENV['DATO_BUILD_TRIGGER_ID']
+  config.api_token = ENV['DATO_PUBLISH_KEY'] # default: ENV.fetch("DATO_API_TOKEN", Rails.application.credentials.dig(:dato, :api_token))
+  config.publish_key = ENV['DATO_PUBLISH_KEY'] # default: ENV.fetch("DATO_PUBLISH_KEY", Rails.application.credentials.dig(:dato, :publish_key))
+  config.build_trigger_id = ENV['DATO_BUILD_TRIGGER_ID'] # default: ENV.fetch("DATO_BUILD_TRIGGER_ID", Rails.application.credentials.dig(:dato, :build_trigger_id))
+  config.base_editing_url = ENV['DATO_BASE_EDITING_URL'] # default: ENV.fetch("DATO_BASE_EDITING_URL", Rails.application.credentials.dig(:dato, :base_editing_url))
+  config.mount_path = '/dato' # default: '/dato'
 end
 ```
 
 ## Caching
 
 The library supports caching of the rendered components.
-If you enable caching, the components rendered using `Dato::Live`, will be cached.
+If you enable caching, the components rendered using `Dato::Wrapper`, will be cached.
 
 To enable caching, you need to set the `cache` option in the configuration.
 
@@ -252,67 +250,93 @@ end
 Now a call to
 
 ```ruby
-render(Dato::Live.new(MyComponent, my_query))
+render(Dato::Wrapper.new(MyComponent, my_query))
 ```
 
-will be cached for 1 day. 
+will be cached for 1 day.
 
-This means that for the next 24 hours, the graphQL endpoint will not be invoked and the whole component rendering will also be skipped.
+This means that for the next 24 hours, the graphQL endpoint will not be invoked and the whole component rendering will
+also be skipped.
 
 **We will cache the entire HTML result of the component, not only the graphQL response.**
 
 If you want to expire the cache you have two options:
 
-### manually
+### manual
 
-executing `Rails.cache.clear(namespace: Dato::Config.cache_namespace)`
+executing `Dato::Cache.clear!` or running `bin/rails dato:cache:clear`.
 
 ### publish endpoint
 
 You can take advantage of the publish mechanism of Dato CMS to expire the cache.
-* Mount the `dato-rails` engine in your Rails routes file.
-* Set the `DATO_PUBLISH_KEY` environment variable
+
+* Generate a new secret key with `bin/rails secret` and set it as `DATO_PUBLISH_KEY` environment variable or in Rails Credentials as `dato.publish_key`.
 * Create a build trigger with a custom webhook on your Dato CMS project setting.
 * Define the Trigger URL as `https://yourapp.com/dato/publish`
 * Set the `DATO_PUBLISH_KEY` as the Authorization header
 * Copy the build trigger id and set it as `DATO_BUILD_TRIGGER_ID` environment variable.
 
+![docs/build_trigger_configuration.png](docs/build_trigger_configuration.png)
+
+### Caching of graphQL response / Controller helpers
+
+If you are not using ViewComponents or you need to cache a single GraphQL query, you can still do it using the
+`Dato::Cache` helper.
+
+In your controllers you already have a helper method `execute_dato_query!`.
+You can use it in your controller action and queries results will be automatically cached if:
+
+* You have `Dato` cache enabled
+* You have Rails cache enabled (check your environment configuration)
+* you are not displaying a preview
+
+```ruby
+response = execute_dato_query!(blog_post_query(params[:slug]), preview: params[:preview])
+@data = response.data
+```
+
+by using this helper, subsequent calls towards Dato will be cached.
 
+## Logs instrumentation
+
+In the logs you will see the time taken to fetch the data from Dato CMS.
+For example:
+
+```
+Completed 200 OK in 365ms (Views: 109.5ms | ActiveRecord: 0.7ms (4 queries, 0 cached) | Dato: 254.3ms | GC: 0.0ms)`
+```
+
+this is useful to identify if the bottleneck is in the fetching of the data from Dato CMS.
 
 ## Development
 
-After checking out the repo, run `bundle install` to install dependencies. 
+After checking out the repo, run `bundle install` to install dependencies.
 
 You can now clone the dato-rails project
 
 [![Clone DatoCMS project](https://dashboard.datocms.com/clone/button.svg)](https://dashboard.datocms.com/clone?projectId=57262&name=dato-rails
 )
 
-
 You then need to set a `DATO_API_TOKEN=abcd123x` in the `.env` file on the root of your project
 to consume data from your project. For testing purposes, set `TEST_MODEL_TYPE_ID=1234` in the `.env` file
 with the id of the author model type in your project.
 
-Then, run `bundle exec rspec` to run the tests. 
+Then, run `bundle exec rspec` to run the tests.
 
 You can also run `rails console` for an interactive prompt that will allow you to experiment.
 
-To install this gem onto your local machine, run `bundle exec rake install`. 
-To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, 
-which will create a git tag for the version, push git commits and the created tag, 
+To install this gem onto your local machine, run `bundle exec rake install`.
+To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`,
+which will create a git tag for the version, push git commits and the created tag,
 and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/renuo/dato-rails. 
-This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to 
-adhere to the [code of conduct](https://github.com/renuo/dato-rails/blob/master/CODE_OF_CONDUCT.md).
+Bug reports and pull requests are welcome on GitHub at https://github.com/renuo/dato-rails.
+This project is intended to be a safe, welcoming space for collaboration. 
+
+Try to be a decent human being while interacting with other people.
 
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
-
-## Code of Conduct
-
-Everyone interacting in the Dato::Rails project's codebases, issue trackers, chat rooms and mailing lists is 
-expected to follow the [code of conduct](https://github.com/renuo/dato-rails/blob/master/CODE_OF_CONDUCT.md).

data/app/components/dato/base_component.rb

@@ -0,0 +1,9 @@
+module Dato
+  class BaseComponent < ViewComponent::Base
+    attr_reader :data
+
+    def initialize(data)
+      @data = data
+    end
+  end
+end

data/app/components/dato/block.html.erb

@@ -1,13 +1,20 @@
-<% block = blocks.find { |b| b.id == @node.item } %>
-<% if block.__typename.nil? %>
-  In order to render a block, you need to return its <code>__typename</code>.<br>
-  In your GraphQL query, add <code>__typename</code> to the list of fields returned for the blocks.<br>
-  For example:<br><br>
-  <code>
-    blocks {
-      __typename
-    }
-  </code>
+<% block = blocks&.find { |b| b.id == @node.item } %>
+<% if block.nil? %>
+  <%= error_block do %>
+    There is a block with id <code><%= @node.item %></code> that has not been retrieved by the GraphQL Query.<br>
+    It's possible that your query is returning a structured text without blocks.
+  <% end %>
+<% elsif block.__typename.nil? %>
+  <%= error_block do %>
+    In order to render a block, you need to return its <code>__typename</code>.<br>
+    In your GraphQL query, add <code>__typename</code> to the list of fields returned for the blocks.<br>
+    For example:<br><br>
+    <code>
+      blocks {
+        __typename
+      }
+    </code>
+  <% end %>
 <% else %>
-  <%=render class_for_block(block).new(block, root) %>
+  <%= render class_for_block(block).new(block, root) %>
 <% end  %>

data/app/components/dato/dast_node.rb

@@ -13,5 +13,11 @@ module Dato
     def generated_tag
       @type
     end
+
+    private
+
+    def extract_meta(type)
+      @node.meta&.find { |m| m.id == type }&.value
+    end
   end
 end

data/app/components/dato/image_block_record.html.erb

@@ -0,0 +1 @@
+<%= render Dato::ResponsiveImage.new(@node.image.responsiveImage) %>

data/app/components/dato/image_block_record.rb

@@ -0,0 +1,2 @@
+class Dato::ImageBlockRecord < Dato::Node
+end

data/app/components/dato/inline_block.html.erb

@@ -0,0 +1,20 @@
+<% block = blocks&.find { |b| b.id == @node.item } %>
+<% if block.nil? %>
+  <%= error_block do %>
+    There is an inline block with id <code><%= @node.item %></code> that has not been retrieved by the GraphQL Query.<br>
+    It's possible that your query is returning a structured text without blocks.
+  <% end %>
+<% elsif block.__typename.nil? %>
+  <%= error_block do %>
+    In order to render an inline block, you need to return its <code>__typename</code>.<br>
+    In your GraphQL query, add <code>__typename</code> to the list of fields returned for the blocks.<br>
+    For example:<br><br>
+    <code>
+      blocks {
+        __typename
+      }
+    </code>
+  <% end %>
+<% else %>
+  <%= render class_for_block(block).new(block, root) %>
+<% end  %>

data/app/components/dato/inline_block.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Dato::InlineBlock < Dato::DastNode
+  def initialize(node, root)
+    super(node, "inlineBlock", root)
+  end
+end

data/app/components/dato/inline_item.html.erb

@@ -0,0 +1,39 @@
+<% inline_item = links.find { |b| b.id == @node.item } %>
+
+<% if inline_item.present? %>
+  <% if class_for_inline_item(inline_item).present? %>
+    <%= render class_for_inline_item(inline_item).new(inline_item, root) %>
+  <% elsif path_for_inline_item(inline_item).present? %>
+    <%= link_to inline_item.title, path_for_inline_item(inline_item), class: "dato-cms-#{@node.type}" %>
+  <% else %>
+    <%= error_block do %>
+      This is an unknown InlineItem. Here is the content:<br>
+      <pre><%= JSON.pretty_generate(inline_item) %></pre>
+      This is a link, so you have some options:
+      <ul>
+        <li>Define the function to generate path for this item. For example:<br>
+            <code>
+              config.links_mapping = {<br>
+              &nbsp;'<%= inline_item.__typename %>' => ->(inline_item) { blog_post_path(inline_item.slug) }<br>
+              }<br>
+            </code>
+            This will use the default link renderer, and set the href attribute according to your definition.
+        </li>
+        <li>
+          Define a class in your <code>app/components/dato</code> folder. For example:<br>
+          <code>
+            class <%= class_by_type(inline_item.__typename) %> < Dato::Node<br>
+            ...<br>
+            end<br>
+          </code><br>
+        </li>
+        <li>Not render it by excluding it from your GraphQL Query</li>
+        <li>Not render it by using the overrides: <code>{overrides: '<%= @node.__typename %>': Dato::NotRendered }</code></li>
+      </ul>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= error_block do %>
+    I don't know this inline item.
+  <% end %>
+<% end %>

data/app/components/dato/inline_item.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Dato::InlineItem < Dato::Node
+end

data/app/components/dato/item_link.html.erb

@@ -0,0 +1,18 @@
+<% if inline_item.__typename.nil? %>
+  <%= error_block do %>
+    In order to render an item link, you need to return its <code>__typename</code>.<br>
+    In your GraphQL query, add <code>__typename</code> to the list of fields returned for the blocks.<br>
+    For example:<br><br>
+    <code>
+      links {
+      __typename
+      }
+    </code>
+  <% end %>
+<% else %>
+  <%= tag.a(**link_attributes) do -%>
+    <% @node.children&.each do |node| -%>
+      <%= render_node(node) -%>
+    <% end -%>
+  <% end -%>
+<% end  %>

data/app/components/dato/item_link.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class Dato::ItemLink < Dato::DastNode
+  def initialize(node, root)
+    super(node, "itemLink", root)
+  end
+
+  def inline_item
+    links.find { |b| b.id == @node.item }
+  end
+
+  def link_attributes
+    attr = {
+      "href" => path_for_inline_item(inline_item),
+      "class" => "dato-cms-#{@node.type}"
+    }
+    %w[rel target].each { |type| attr[type] = extract_meta(type) }
+    attr
+  end
+end

data/app/components/dato/link.rb

@@ -12,15 +12,9 @@ class Dato::Link < Dato::DastNode
   def link_attributes
     attr = {
       "href" => @node.url,
-      "class" => "dato-cms-#{@node.type}",
+      "class" => "dato-cms-#{@node.type}"
     }
     %w[rel target].each { |type| attr[type] = extract_meta(type) }
     attr
   end
-
-  private
-
-  def extract_meta(type)
-    @node.meta&.find { |m| m.id == type }&.value
-  end
 end

data/app/components/dato/live_stream.html.erb

@@ -0,0 +1,26 @@
+<script type="text/javascript">
+  const eventSourceUrl = '<%= data.url %>';
+  const componentKlass = '<%= component_klass %>';
+  const frameId = '<%= frame_id %>';
+  const path = '<%= Dato::Engine.routes.url_helpers.live_path %>';
+  const eventSource = new EventSource(eventSourceUrl);
+  const csrfToken = document.querySelector('meta[name="csrf-token"]').content
+  eventSource.addEventListener("update", (event) => {
+    fetch(path, {
+      method: "POST",
+      headers: {
+        'X-CSRF-Token': csrfToken,
+        'Content-Type': 'application/json',
+        "Accept": "text/vnd.turbo-stream.html"
+      },
+      body: JSON.stringify({
+        component: componentKlass,
+        data: event.data,
+        frame_id: frameId
+      })
+    }).then(response => response.text())
+      .then(html => Turbo.renderStreamMessage(html));
+  });
+</script>
+
+<div id=<%= frame_id %>></div>

data/app/components/dato/live_stream.rb

@@ -0,0 +1,35 @@
+# This component can bring to life your dato components allowing previews and live updates.
+# Given that you have a ViewComponent "MyComponent" that renders your page, you can render your page with:
+# render(MyComponent.new(data_result_from_dato_query))
+# you can now use this wrapper component to do:
+# render(Dato::LiveStream.new(MyComponent, query, preview: true)
+module Dato
+  class LiveStream < ViewComponent::Base
+    delegate :turbo_frame_tag, to: :helpers
+
+    attr_reader :component_klass, :query, :preview
+
+    def initialize(component_klass, query, preview: false)
+      super()
+      @component_klass = component_klass
+      @query = query
+      @preview = preview
+    end
+
+    def data
+      @data ||= dato_fetch(query, preview: preview)
+    end
+
+    def frame_id
+      @frame_id ||= SecureRandom.hex(10)
+    end
+
+    private
+
+    def dato_fetch(query, preview: false)
+      client = Dato::Client.new(preview: preview, live: true)
+      response = client.live!(query)
+      response.data
+    end
+  end
+end

data/app/components/dato/node.rb

@@ -17,6 +17,10 @@ module Dato
       root.blocks
     end
 
+    def links
+      root.links
+    end
+
     def overrides
       root.overrides
     end
@@ -28,7 +32,7 @@ module Dato
     private
 
     def class_for_block(block)
-      class_name = (overrides[block.__typename] || Dato::Config.overrides[block.__typename])
+      class_name = overrides[block.__typename] || Dato::Config.overrides[block.__typename]
       if class_name.is_a?(String)
         class_name = class_name.constantize
       end
@@ -39,8 +43,27 @@ module Dato
       end
     end
 
+    def class_for_inline_item(inline_item)
+      class_name = overrides[inline_item.__typename] || Dato::Config.overrides[inline_item.__typename]
+      if class_name.is_a?(String)
+        class_name = class_name.constantize
+      end
+      begin
+        class_name || class_by_type(inline_item.__typename).constantize
+      rescue NameError
+        nil
+      end
+    end
+
+    def path_for_inline_item(inline_item)
+      lambda = Dato::Config.links_mapping[inline_item.__typename]
+      if lambda
+        instance_exec(inline_item, &lambda)
+      end
+    end
+
     def class_for_node(node)
-      class_name = (overrides[node.type] || Dato::Config.overrides[node.type])
+      class_name = overrides[node.type] || Dato::Config.overrides[node.type]
       if class_name.is_a?(String)
         class_name = class_name.constantize
       end
@@ -54,5 +77,10 @@ module Dato
     def class_by_type(type)
       "Dato::#{type.classify}"
     end
+
+    def error_block(&block)
+      content = capture(&block)
+      content_tag(:div, content, style: "border: 3px dotted limegreen; display: inline-block; padding: 5px;font-weight: bold")
+    end
   end
 end

data/app/components/dato/paragraph.rb

@@ -6,6 +6,6 @@ class Dato::Paragraph < Dato::DastNode
   end
 
   def generated_tag
-    "p"
+    "div"
   end
 end

data/app/components/dato/responsive_image.html.erb

@@ -4,7 +4,7 @@
     <picture style="position: absolute; left: 0; top: 0; width: 100%">
       <source srcset="<%= @node.webpSrcSet %>" type="image/webp">
       <source srcset="<%= @node.srcSet %>">
-      <img src="<%= @node.src %>" alt="<%= @node.alt %>" title="<%= @node.title %>" loading="lazy" width="100%">
+      <img src="<%= @node.src %>" alt="<%= @node.alt %>" title="<%= @node.title %>" loading="lazy" width="100%"  class="<%= @custom_img_css_classes %>">
     </picture>
   </div>
 </div>

data/app/components/dato/responsive_image.rb

@@ -1,8 +1,9 @@
 # frozen_string_literal: true
 
 class Dato::ResponsiveImage < Dato::Node
-  def initialize(node, root = nil, custom_css_classes: [])
+  def initialize(node, root = nil, custom_css_classes: [], custom_img_css_classes: [])
     super(node, root)
-    @custom_css_classes = custom_css_classes
+    @custom_css_classes = custom_css_classes.is_a?(Array) ? custom_css_classes.join(" ") : custom_css_classes
+    @custom_img_css_classes = custom_img_css_classes.is_a?(Array) ? custom_img_css_classes.join(" ") : custom_img_css_classes
   end
 end

data/app/components/dato/structured_text.rb

@@ -13,6 +13,7 @@ class Dato::StructuredText < Dato::Node
     @overrides = overrides.with_indifferent_access
     @structured_text_node = structured_text_node
     @blocks = structured_text_node.blocks
+    @links = structured_text_node.links
   end
 
   def root
@@ -20,6 +21,7 @@ class Dato::StructuredText < Dato::Node
   end
 
   attr_reader :blocks
+  attr_reader :links
 
   attr_reader :overrides
 end

data/app/components/dato/unknown_block.html.erb

@@ -1,17 +1,18 @@
-<div style="border: 3px dotted limegreen; display: inline-block; padding: 5px;">
-  <b>
-    This is an unknown block. Here is the content:<br>
-    <pre><%= JSON.pretty_generate(@node)  %></pre>
-    In order to render it, you need to define a ViewComponent named <code><%=class_by_type(@node.__typename) %></code>.<br>
-    You can define this class in your <code>app/components/dato</code> folder. For example:<br><br>
-    <code>
-      class <%=class_by_type(@node.__typename) %> < Dato::DastNode<br>
-      ...<br>
-      end<br>
-    </code><br>
-    If you don't want to render this block you can:
-    * not return it in your GraphQL query
-    * the component when rendering the root <code>Dato::StructuredText</code> node.<br>
-    <code>Dato::StructuredText.new(content, overrides: { '<%=@node.__typename %>': Dato::NotRendered })</code>
-  </b>
-</div>
+<%= error_block do %>
+  This is an unknown block. Here is the content:<br>
+  <pre><%= JSON.pretty_generate(@node) %></pre>
+  In order to render it, you need to define a ViewComponent named <code><%= class_by_type(@node.__typename) %></code>.
+  <br>
+  You can define this class in your <code>app/components/dato</code> folder. For example:<br><br>
+  <code>
+    class <%= class_by_type(@node.__typename) %> < Dato::Node<br>
+    ...<br>
+    end<br>
+  </code><br>
+  If you don't want to render this block you can:
+  <ul>
+    <li>not return it in your GraphQL query</li>
+    <li>override the component when rendering the root <code>Dato::StructuredText</code> node.<br>
+      <code>Dato::StructuredText.new(content, overrides: { '<%= @node.__typename %>': Dato::NotRendered })</code></li>
+  </ul>
+<% end %>

data/app/components/dato/unknown_node.html.erb

@@ -1,15 +1,15 @@
-<div style="border: 3px dotted limegreen; display: inline-block; padding: 5px;">
-  <b>
-    This is an unknown node of type <code><%=@type %></code>.<br>
-    In order to render it, you need to define a ViewComponent named <code><%=class_by_type(@node.type) %></code>.<br>
-    You can define this class in your <code>app/components/dato</code> folder. For example:<br><br>
-    <code>
-      class <%=class_by_type(@node.type) %> < Dato::DastNode<br>
-        ...<br>
-      end<br>
-    </code><br>
-    If you don't want to render this node, you can override the component when rendering the root <code>Dato::StructuredText</code> node.<br>
-    <code>Dato::StructuredText.new(content, overrides: { link: Dato::NotRendered })</code>
-  </b>
+<%= error_block do %>
+  This is an unknown node of type <code><%= @type %></code>. Here is the content:<br>
+  <pre><%= JSON.pretty_generate(@node) %></pre>
+  In order to render it, you need to define a ViewComponent named <code><%= class_by_type(@node.type) %></code>.<br>
+  You can define this class in your <code>app/components/dato</code> folder. For example:<br><br>
+  <code>
+    class <%= class_by_type(@node.type) %> < Dato::Node<br>
+    ...<br>
+    end<br>
+  </code><br>
+  If you don't want to render this node, you can override the component when rendering the root
+  <code>Dato::StructuredText</code> node.<br>
+  <code>Dato::StructuredText.new(content, overrides: { link: Dato::NotRendered })</code>
   <%= debug_node %>
-</div>
+<% end %>

data/app/components/dato/wrapper.html.erb

@@ -0,0 +1,32 @@
+<% if live? %>
+  <script type="text/javascript">
+      const eventSourceUrl = '<%= data.url %>';
+      const componentKlass = '<%= component_klass %>';
+      const frameId = '<%= frame_id %>';
+      const path = '<%= Dato::Engine.routes.url_helpers.live_path %>';
+      const eventSource = new EventSource(eventSourceUrl);
+      const csrfToken = document.querySelector('meta[name="csrf-token"]').content
+      eventSource.addEventListener("update", (event) => {
+          fetch(path, {
+              method: "POST",
+              headers: {
+                  'X-CSRF-Token': csrfToken,
+                  'Content-Type': 'application/json',
+                  "Accept": "text/vnd.turbo-stream.html"
+              },
+              body: JSON.stringify({
+                  component: componentKlass,
+                  data: event.data,
+                  frame_id: frameId
+              })
+          }).then(response => response.text())
+              .then(html => Turbo.renderStreamMessage(html));
+      });
+  </script>
+
+  <div id=<%= frame_id %>></div>
+<% else %>
+  <%= Dato::Cache.fetch(cache_key) do %>
+    <% render(component_klass.new(data)) %>
+  <% end %>
+<% end %>

data/app/components/dato/wrapper.rb

@@ -0,0 +1,38 @@
+module Dato
+  class Wrapper < ViewComponent::Base
+    attr_reader :component_klass, :query, :preview, :live
+
+    def initialize(component_klass, query, preview: false, live: false)
+      @component_klass = component_klass
+      @query = query
+      @preview = preview
+      @live = live
+    end
+
+    def live? = @live
+
+    def render_in(view_context)
+      if live?
+        LiveStream.new(component_klass, query, preview: preview).render_in(view_context)
+      else
+        super
+      end
+    end
+
+    def data
+      @data ||= dato_fetch(query, preview: preview)
+    end
+
+    def cache_key
+      @cache_key ||= Digest::MD5.hexdigest(query.to_gql)
+    end
+
+    private
+
+    def dato_fetch(query, preview: false)
+      client = Dato::Client.new(preview: preview)
+      response = client.execute!(query)
+      response.data
+    end
+  end
+end

data/app/controllers/dato/live_controller.rb

@@ -1,6 +1,6 @@
 module Dato
   class LiveController < ActionController::Base
-    def show
+    def create
       @data = Hashie::Mash.new(JSON.parse(params[:data], symbolize_names: true).dig(:response, :data))
     end
   end

data/app/controllers/dato/publish_controller.rb

@@ -7,7 +7,7 @@ module Dato
     before_action :check, only: :create
 
     def create
-      Rails.cache.clear(namespace: Dato::Config.cache_namespace)
+      Dato::Cache.clear!
 
       notify_success
 

data/app/views/dato/live/create.turbo_stream.erb

@@ -0,0 +1,7 @@
+<turbo-stream target="<%= params[:frame_id] %>" action="replace" method="morph">
+  <template>
+    <div id=<%= params[:frame_id] %>>
+      <%= render params[:component].constantize.new(@data) %>
+    </div>
+  </template>
+</turbo-stream>

data/config/routes.rb

@@ -1,4 +1,4 @@
 Dato::Engine.routes.draw do
-  get "live", to: "live#show"
+  post "live", to: "live#create"
   post "publish", to: "publish#create"
 end

data/lib/dato/cache.rb

@@ -21,5 +21,9 @@ module Dato
     def self.namespace
       Dato::Config.cache_namespace
     end
+
+    def self.clear!
+      Rails.cache.clear(namespace: namespace)
+    end
   end
 end

data/lib/dato/client.rb

@@ -1,6 +1,6 @@
 module Dato
   class Client
-    delegate :live!, :execute!, :execute, to: :@gql
+    delegate :live!, to: :@gql
     attr_reader :items, :uploads, :gql
 
     def initialize(api_token = Dato::Config.api_token, validate_query: false, preview: false, live: false)
@@ -9,5 +9,15 @@ module Dato
       @items = Dato::Items.new(api_token)
       @uploads = Dato::Uploads.new(api_token)
     end
+
+    def execute!(query)
+      ActiveSupport::Notifications.instrument("dato.query_execution") do
+        @gql.execute!(query)
+      end
+    end
+
+    def execute(query)
+      @gql.execute(query)
+    end
   end
 end

data/lib/dato/config.rb

@@ -3,11 +3,14 @@ module Dato
     include ActiveSupport::Configurable
 
     config_accessor(:overrides) { {} }
+    config_accessor(:links_mapping) { {} }
     config_accessor(:blocks) { {} }
     config_accessor(:cache) { false }
     config_accessor(:cache_namespace) { "dato-rails" }
-    config_accessor(:api_token) { ENV["DATO_API_TOKEN"] }
-    config_accessor(:publish_key) { ENV["DATO_PUBLISH_KEY"] }
-    config_accessor(:build_trigger_id) { ENV["DATO_BUILD_TRIGGER_ID"] }
+    config_accessor(:api_token) { ENV.fetch("DATO_API_TOKEN", Rails.application.credentials.dig(:dato, :api_token)) }
+    config_accessor(:publish_key) { ENV.fetch("DATO_PUBLISH_KEY", Rails.application.credentials.dig(:dato, :publish_key)) }
+    config_accessor(:build_trigger_id) { ENV.fetch("DATO_BUILD_TRIGGER_ID", Rails.application.credentials.dig(:dato, :build_trigger_id)) }
+    config_accessor(:base_editing_url) { ENV.fetch("DATO_BASE_EDITING_URL", Rails.application.credentials.dig(:dato, :base_editing_url)) }
+    config_accessor(:mount_path) { "/dato" }
   end
 end

data/lib/dato/current_request.rb

@@ -0,0 +1,5 @@
+module Dato
+  class CurrentRequest < ActiveSupport::CurrentAttributes
+    attribute :dato_runtime
+  end
+end

data/lib/dato/engine.rb

@@ -1,5 +1,26 @@
 module Dato
+  class InvalidGraphqlQuery < StandardError; end
+
   class Engine < ::Rails::Engine
     isolate_namespace Dato
+
+    initializer "dato_rails.action_controller" do
+      ActiveSupport.on_load(:action_controller) do
+        include Dato::Railties::ControllerRuntime
+      end
+
+      ActiveSupport::Notifications.subscribe("dato.query_execution") do |_, start, finish, _, _payload|
+        Dato::CurrentRequest.dato_runtime ||= 0
+        Dato::CurrentRequest.dato_runtime += (finish - start) * 1000
+      end
+    end
+
+    initializer "dato_rails.configuration" do |app|
+      if Dato::Config.mount_path
+        app.routes.append do
+          mount Dato::Engine => Dato::Config.mount_path
+        end
+      end
+    end
   end
 end

data/lib/dato/fragments/meta_tags.rb

@@ -0,0 +1,5 @@
+Dato::Fragments::MetaTags = GQLi::DSL.fragment("metaTagsFragment", "Tag") {
+  attributes
+  content
+  tag
+}

data/lib/dato/gql.rb

@@ -2,11 +2,12 @@ module Dato
   class Gql < GQLi::Client
     def initialize(api_token, validate_query, preview, live)
       @api_token = api_token
+      headers = {"Authorization" => @api_token}
+      headers["X-Base-Editing-Url"] = Dato::Config.base_editing_url if Dato::Config.base_editing_url.present?
+
       super(
         "https://graphql#{"-listen" if live}.datocms.com/#{"preview" if preview}",
-        headers: {
-          "Authorization" => @api_token
-        },
+        headers: headers,
         validate_query: validate_query && !live
       )
     end

data/lib/dato/railties/controller_runtime.rb

@@ -0,0 +1,33 @@
+module Dato
+  module Railties
+    module ControllerRuntime
+      extend ActiveSupport::Concern
+
+      def execute_dato_query(query, preview: false)
+        client = Dato::Client.new(preview: preview)
+        return client.execute!(query) if preview
+
+        key = "#{Digest::MD5.hexdigest(query.to_gql)}-query-#{preview}"
+        Dato::Cache.fetch(key) do
+          client.execute!(query)
+        end
+      end
+
+      def execute_dato_query!(query, preview: false)
+        response = execute_dato_query(query, preview: preview)
+        raise(InvalidGraphqlQuery, response.errors.first.message) if response.errors&.any?
+
+        response
+      end
+
+      module ClassMethods # :nodoc:
+        def log_process_action(payload)
+          messages = super
+          Dato::CurrentRequest.dato_runtime ||= 0
+          messages << ("Dato: %.1fms" % Dato::CurrentRequest.dato_runtime)
+          messages
+        end
+      end
+    end
+  end
+end

data/lib/dato/version.rb

@@ -1,3 +1,3 @@
 module Dato
-  VERSION = "0.7.5"
+  VERSION = "0.10.0"
 end

data/lib/tasks/dato/rails_tasks.rake

@@ -1,4 +1,7 @@
-# desc "Explaining what the task does"
-# task :dato_rails do
-#   # Task goes here
-# end
+namespace :dato do
+  namespace :cache do
+    task clear: :environment do
+      Dato::Cache.clear!
+    end
+  end
+end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: dato-rails
 version: !ruby/object:Gem::Version
-  version: 0.7.5
+  version: 0.10.0
 platform: ruby
 authors:
 - Alessandro Rodi
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-23 00:00:00.000000000 Z
+date: 2025-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rspec-rails
@@ -114,14 +113,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '4'
+        version: '6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '4'
+        version: '6'
 - !ruby/object:Gem::Dependency
   name: turbo-rails
   requirement: !ruby/object:Gem::Requirement
@@ -175,6 +174,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/dato_rails_manifest.js
+- app/components/dato/base_component.rb
 - app/components/dato/block.html.erb
 - app/components/dato/block.rb
 - app/components/dato/blockquote.html.erb
@@ -184,12 +184,20 @@ files:
 - app/components/dato/dast_node.html.erb
 - app/components/dato/dast_node.rb
 - app/components/dato/heading.rb
+- app/components/dato/image_block_record.html.erb
+- app/components/dato/image_block_record.rb
+- app/components/dato/inline_block.html.erb
+- app/components/dato/inline_block.rb
+- app/components/dato/inline_item.html.erb
+- app/components/dato/inline_item.rb
+- app/components/dato/item_link.html.erb
+- app/components/dato/item_link.rb
 - app/components/dato/link.html.erb
 - app/components/dato/link.rb
 - app/components/dato/list.rb
 - app/components/dato/list_item.rb
-- app/components/dato/live.html.erb
-- app/components/dato/live.rb
+- app/components/dato/live_stream.html.erb
+- app/components/dato/live_stream.rb
 - app/components/dato/node.rb
 - app/components/dato/not_rendered.rb
 - app/components/dato/paragraph.rb
@@ -204,18 +212,23 @@ files:
 - app/components/dato/unknown_block.rb
 - app/components/dato/unknown_node.html.erb
 - app/components/dato/unknown_node.rb
+- app/components/dato/wrapper.html.erb
+- app/components/dato/wrapper.rb
 - app/controllers/dato/live_controller.rb
 - app/controllers/dato/publish_controller.rb
-- app/views/dato/live/show.html.erb
+- app/views/dato/live/create.turbo_stream.erb
 - config/routes.rb
 - lib/dato.rb
 - lib/dato/cache.rb
 - lib/dato/client.rb
 - lib/dato/config.rb
+- lib/dato/current_request.rb
 - lib/dato/engine.rb
+- lib/dato/fragments/meta_tags.rb
 - lib/dato/fragments/responsive_image.rb
 - lib/dato/gql.rb
 - lib/dato/items.rb
+- lib/dato/railties/controller_runtime.rb
 - lib/dato/uploads.rb
 - lib/dato/version.rb
 - lib/tasks/dato/rails_tasks.rake
@@ -225,7 +238,6 @@ metadata:
   homepage_uri: https://github.com/renuo/dato-rails
   source_code_uri: https://github.com/renuo/dato-rails
   changelog_uri: https://github.com/renuo/dato-rails/blob/main/CHANGELOG.md
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -240,8 +252,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.26
-signing_key:
+rubygems_version: 3.6.2
 specification_version: 4
 summary: Use Dato CMS in your Rails application.
 test_files: []

data/app/components/dato/live.html.erb

@@ -1,22 +0,0 @@
-<% if live %>
-  <script type="text/javascript">
-    const eventSourceUrl = '<%=data.url %>';
-    const componentKlass = '<%=component_klass%>';
-    const frameId = '<%=frame_id%>';
-    const eventSource = new EventSource(eventSourceUrl);
-    eventSource.addEventListener("update", (event) => {
-      const params = new URLSearchParams({
-        component: componentKlass,
-        data: event.data,
-        frame_id: frameId
-      });
-      document.getElementById(frameId).src = `/dato/live?${params.toString()}`;
-    });
-  </script>
-
-  <%= turbo_frame_tag frame_id %>
-<% else %>
-  <%= Dato::Cache.fetch(cache_key) do %>
-    <% render(component_klass.new(data)) %>
-  <% end %>
-<% end %>

data/app/components/dato/live.rb

@@ -1,40 +0,0 @@
-# This component can bring to life your dato components allowing peviews and live updates.
-# Given that you have a component MyComponent that renders your page, you can would render your page with:
-# render(MyComponent.new(@data_result_from_dato_query))
-# you can now use this wrapper component to do:
-# render(Dato::Live.new(MyComponent, query, preview: true, live: true)
-module Dato
-  class Live < ViewComponent::Base
-    delegate :turbo_frame_tag, to: :helpers
-
-    attr_reader :component_klass, :query, :preview, :live
-
-    def initialize(component_klass, query, preview: false, live: false)
-      super()
-      @component_klass = component_klass
-      @query = query
-      @preview = preview
-      @live = live
-    end
-
-    def cache_key
-      @cache_key ||= Digest::MD5.hexdigest(query.to_gql)
-    end
-
-    def data
-      @data ||= dato_fetch(query, preview: preview, live: live)
-    end
-
-    def frame_id
-      @frame_id ||= SecureRandom.hex(10)
-    end
-
-    private
-
-    def dato_fetch(query, preview: false, live: false)
-      client = Dato::Client.new(preview: preview, live: live)
-      response = live ? client.live!(query) : client.execute!(query)
-      response.data
-    end
-  end
-end

data/app/views/dato/live/show.html.erb

@@ -1,3 +0,0 @@
-<%= turbo_frame_tag params[:frame_id] do %>
-  <%= render params[:component].constantize.new(@data) %>
-<% end %>