potassium 6.5.0 → 6.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bf3d3969e70d29a2f2c15992c48f609ad389a486560fd6a16ea3a74871328a19
-  data.tar.gz: c1617bc3cba761408d2cba7419fbe4c68cb265a7438ea07b8c9b637944e3271d
+  metadata.gz: 81ec8c6408ed21f78421ecb48565bcd42e6478fc0a08a7ca0881035eb8d0c444
+  data.tar.gz: 0b925fa5a1344c3f284d91f8fdb092d984d47f8434b4beed51678e4a909e2ada
 SHA512:
-  metadata.gz: 61cbdbbced51469867a32a83a97628f8ea4ccfb3290cc2b2e6e8a34f86e53a6e0478609326264b59324266b8db184cd449d921a9f17cc3f5a58be01eddb00e3b
-  data.tar.gz: '00900211ab3d5dcb75e4f45889778c752cda9f61a7e8d8cd0e264bb1ba678c50f8b9593f8bb98c3afd8b2fa554458cb639bfba202428a978976872cf45d291a5'
+  metadata.gz: 8a07cf43e021c0350e84eb0213f5ac513fa2446c16cfd492a0b7947acdd45776b817004d5f4cf42962947137dc988ccaa1e61020f23b89a63040b85d04e61a2e
+  data.tar.gz: af4598c990bede9a8be8cbf47dd324f9f13b584b5b0982ab277806f71318b4d97da289e9cad725d45398e66cc7454578bd89fc086b550ebc586286d46d217f98

data/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 6.7.0
+
+Features
+  - Add type checking to reviewdog [#411](https://github.com/platanus/potassium/pull/411)
+  - Add initial api files [#412](https://github.com/platanus/potassium/pull/412)
+  - Add eslint-plugin-platanus [#415](https://github.com/platanus/potassium/pull/415)
+
+Fixes
+  - Prepend vips installation [#407](https://github.com/platanus/potassium/pull/407)
+  - Fix jest install [#408](https://github.com/platanus/potassium/pull/408)
+  - Fix circle ci config. Provide global context to test job [#409](https://github.com/platanus/potassium/pull/409)
+  - Fix admin css (arctic_skin) [#413](https://github.com/platanus/potassium/pull/413)
+  - Fix tsc check [#414](https://github.com/platanus/potassium/pull/414)
+  - Fix monkeyci commenting because of uncovered lines when tests do exist [#416](https://github.com/platanus/potassium/pull/416)
+  - Typescript fixes [#417](https://github.com/platanus/potassium/pull/417)
+
+## 6.6.0
+Features
+  - Update power api gem to use v2.0.0. Install "internal" API mode [#394](https://github.com/platanus/potassium/pull/394)
+  - Updates Webpacker to Shakapacker, upgrading Vue and TailwindCSS to their latest versions [#395](https://github.com/platanus/potassium/pull/395)
+  - Add some image handling and processing in shrine file storage option [#398](https://github.com/platanus/potassium/pull/398)
+  - Include `--platanus-config` option to skip most of the instalation options [#399](https://github.com/platanus/potassium/pull/399).
+  - Add [`rubocop-platanus`](https://github.com/platanus/rubocop-platanus) gem for linting platanus' best practices [#402](https://github.com/platanus/potassium/pull/402).
+  - Remove graphql option [#404](https://github.com/platanus/potassium/pull/404)
+  - Add frontend testing coverage for Jest [#401](https://github.com/platanus/potassium/pull/401) and associated reviewdog comments [#406](https://github.com/platanus/potassium/pull/406)
+  - Add MJML to handle mail templates, with example [#405](https://github.com/platanus/potassium/pull/405)
+
+Fixes
+  - Add missing vips CI config when selecting shrine [#403](https://github.com/platanus/potassium/pull/403).
+  - Fix shakapacker to version 6.2.x to avoid [this bug](https://github.com/shakacode/shakapacker/issues/123) [#404](https://github.com/platanus/potassium/pull/404)
+
 ## 6.5.0
 
 Features
@@ -9,9 +40,12 @@ Features
   - Add SimpleCov recipe [#387](https://github.com/platanus/potassium/pull/387)
   - Update Rails to 6.1 [#389](https://github.com/platanus/potassium/pull/389) & [#392](https://github.com/platanus/potassium/pull/392)
   - Include `run_test` as a valid example group [#379](https://github.com/platanus/potassium/pull/379). This was added incorrectly in this [PR](https://github.com/platanus/potassium/pull/379).
+  - Add system tests configuration [#388](https://github.com/platanus/potassium/pull/388)
+  - Allow CircleCI cache clearing [#383](https://github.com/platanus/potassium/pull/383)
 
 Fixes
   - Remove rails_stdout_logging gem because it is no longer needed after Rails 5 and it was generating a deprecation warning [#325](https://github.com/platanus/potassium/pull/325)
+  - Fix default action dissapearance when using `binding.pry` in generated projects [#385](https://github.com/platanus/potassium/pull/385)
 
 ## 6.4.0
 

data/README.md

@@ -21,6 +21,34 @@ Use the `potassium create` command to create a new project:
 > 2. If you feel that it's too slow, you may need to update rubygems: `gem update --system`.
 > 3. Potassium uses node under the hood, so a check will also be performed to ensure you are running the supported version.
 
+#### Platanus Configutarion
+
+In case you want to use the Platanus Configuration you should use the following command:
+
+    $ potassium create <project-name> --platanus-config
+
+This will create a project with the following configuration:
+  1. `database`: `'postgresql'`
+  2. `local`: `'es-CL'`
+  3. `email_service`: `'sendgrid'`
+  4. `devise`: `true`
+  5. `devise-user-model`: `true`
+  6. `admin`: `true`
+  7. `vue_admin`: `true`
+  8. `pundit`: `true`
+  9. `api`: `true`
+  10. `storage`: `'shrine'`
+  11. `heroku`: `true`
+  12. `background_processor`: `true`
+  13. `draper`: `true`
+  14. `schedule`: `true`
+  15. `sentry`: `true`
+  16. `front_end`: `'vue'`
+  17. `google_tag_manager`: `true`
+  18. `test`: `true`
+  19. `spring`: `true`
+
+The remaining question will be asked as usual.
 ### Adding recipes to an existing project
 
 Use the `potassium install` command to add a recipe to a project:
@@ -53,6 +81,7 @@ Potassium Rails apps includes the following gems and technologies:
 - [Tzinfo-Data](https://github.com/tzinfo/tzinfo-data) for updating timezone information
 - [Faker](https://github.com/stympy/faker) for creating development data
 - [Scout](https://github.com/scoutapp/scout_apm_ruby) for monitoring performance
+- [Mjml](https://github.com/sighmon/mjml-rails) for mails style
 
 The following optional integrations are also added:
 
@@ -177,4 +206,4 @@ potassium is maintained by [platanus](http://platan.us).
 
 ## License
 
-Potassium is © 2014 Platanus, SPA. It is free software and may be redistributed under the terms specified in the LICENSE file.
+Potassium is © 2014 Platanus, SPA. It is free software and may be redistributed under the terms specified in the [LICENSE](/LICENSE.txt) file.

data/docs/CONTRIBUTING.md

@@ -54,7 +54,7 @@ This method is used if you need to ask something to the user before doing someth
     ```ruby
     def ask
       use_banana_split = answer(:banana_split) do
-        Ask.confirm("Do you wan to use Banana Split?")
+        Ask.confirm("Do you want to use Banana Split?")
       end
       set(:use_banana_split, true) if use_banana_split
     end
@@ -103,7 +103,7 @@ For example if you run `portassium install devise` this will use
 [the recipe template](/lib/potassium/templates/recipe.rb) to load an execute the
 `install` method for the **devise** recipe.
 
-You can defined the main functionallity of a recipe in a private method and call
+You can define the main functionallity of a recipe in a private method and call
 it from the `create` and `install` methods.
 
 ```ruby

data/lib/potassium/assets/.circleci/config.yml.erb

@@ -78,6 +78,13 @@ commands:
           key: yarn-dependencies-{{ .Environment.YARN_CACHE_VERSION }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
+      <%- if selected?(:storage, :shrine) -%>
+      - run:
+          name: Install apt and vips buildpack dependencies
+          command: |
+            xargs -a Aptfile sudo apt-get install
+            sudo apt-get install libvips
+      <%- end -%>
 
 jobs:
   test:
@@ -109,6 +116,12 @@ jobs:
             RSPEC_FORMAT_ARGS="-f progress --no-color -p 10"
             bundle exec rspec spec $RSPEC_FORMAT_ARGS $RSPEC_JUNIT_ARGS
 
+      - run:
+          name: Run simplecov
+          shell: /bin/bash
+          command: |
+            cat coverage/coverage.txt | ./bin/reviewdog -reporter=github-pr-review -efm="%f:%l:%c: %m"
+
       - run:
           name: Run RSpec system tests
           command: |
@@ -116,16 +129,13 @@ jobs:
             RSPEC_FORMAT_ARGS="--tag type:system -f progress --no-color -p 10"
             bundle exec rspec spec $RSPEC_FORMAT_ARGS $RSPEC_JUNIT_ARGS
 
-      - run:
-          name: Run simplecov
-          shell: /bin/bash
-          command: |
-            cat coverage/coverage.txt | ./bin/reviewdog -reporter=github-pr-review -efm="%f:%l:%c: %m"
-
       <%- if selected?(:front_end, :vue) -%>
       - run:
           name: Run jest
-          command: yarn run test
+          command: |
+            yarn run test > coverage/input_jest.txt
+            ./node_modules/.bin/format-coverage coverage/input_jest.txt coverage/output_jest.txt /home/circleci/project/app/javascript
+            cat coverage/output_jest.txt | ./bin/reviewdog -reporter=github-pr-review -efm="%f:%l:%c: %m"
       <%- end -%>
 
       - store_test_results:
@@ -154,6 +164,18 @@ jobs:
             cat tmp/files_to_lint | grep -E '.+\.(js|jsx|vue)$' | xargs yarn run eslint \
             | ./bin/reviewdog -reporter=github-pr-review -f=eslint
 
+      - run:
+          name: Run tsc
+          shell: /bin/bash
+          command: |
+            yarn run tsc --noEmit | ./bin/reviewdog -reporter=github-pr-review -f=tsc
+
+      - run:
+          name: Run vue-tsc
+          shell: /bin/bash
+          command: |
+            yarn run vue-tsc --noEmit | ./bin/reviewdog -reporter=github-pr-review -f=tsc
+
       - run:
           name: Run stylelint
           shell: /bin/bash
@@ -164,6 +186,7 @@ jobs:
 workflows:
   test_and_lint:
     jobs:
-      - test
+      - test:
+          context: org-global
       - lint:
           context: org-global

data/lib/potassium/assets/.eslintrc.json

@@ -1,12 +1,16 @@
 {
   "env": {
-    "es6": true
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest/globals": true,
+    "vue/setup-compiler-macros": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["import"],
+  "plugins": ["import", "jest", "tailwindcss"],
   "settings": {
     "import/resolver": {
       "node": {
@@ -15,7 +19,11 @@
     }
   },
   "extends": [
-    "plugin:vue/strongly-recommended"
+    "plugin:vue/vue3-recommended",
+    "@vue/typescript/recommended",
+    "@vue/eslint-config-typescript",
+    "plugin:tailwindcss/recommended",
+    "plugin:platanus/recommended"
   ],
   "rules": {
     "accessor-pairs": 0,
@@ -338,14 +346,13 @@
     "vue/max-len": ["error", {
       "code": 120,
       "ignoreHTMLAttributeValues": true
-  }]
+    }]
   },
   "overrides": [
     {
-      "files": ["**/*.js"],
-      "excludedFiles": "app/**/*.js",
-      "env": {
-        "node": true
+      "files": ["*.ts", "*.vue"],
+      "rules": {
+        "no-undef": "off"
       }
     }
   ]

data/lib/potassium/assets/.rubocop.yml

@@ -2,6 +2,7 @@ require:
   - rubocop-rspec
   - rubocop-rails
   - rubocop-performance
+  - rubocop-platanus
 AllCops:
   Exclude:
   - "vendor/**/*"

data/lib/potassium/assets/Aptfile

@@ -0,0 +1,5 @@
+libglib2.0-0
+libglib2.0-dev
+libpoppler-glib8
+libwebp-dev
+webp

data/lib/potassium/assets/README.yml

@@ -27,7 +27,7 @@ readme:
       body: |
         For hot-reloading and fast webpacker compilation you need to run webpack's dev server along with the rails server:
 
-            $ ./bin/webpack-dev-server
+            $ ./bin/webpacker-dev-server
 
         Running the dev server will also solve problems with the cache not refreshing between changes and provide better error messages if something fails to compile.
 
@@ -105,7 +105,34 @@ readme:
           body: "For managing uploads, this project uses [Active Storage](https://github.com/rails/rails/tree/master/activestorage)."
         shrine:
           title: "File Storage"
-          body: "For managing uploads, this project uses [Shrine](https://github.com/shrinerb/shrine)."
+          body: |
+            For managing uploads, this project uses [Shrine](https://github.com/shrinerb/shrine). When generated, this project includes the following files and configurations:
+
+            - `ImageUploader` that includes file type validation
+            - `CoverImageUploader`, inheriting from `ImageUploader`. It does a couple of things:
+              - Generates derivatives in `jpg` and `webp` format, for three different sizes. For an attachment of name `image`, to get the url for a derivative, let's say `sm`, you would do `record.image_url(:sm)`
+              - Saves a [blurhash](https://blurha.sh/) code to the attachment metadata
+            - `ImageHandlingUtilities`, a shrine plugin in the initializers folder that is used in the `CoverImageUploader`. Given a model with an attachment of name `image`, it adds the following methods to the model:
+              - `image_blurhash`: returns blurhash from metadata
+              - `generate_image_derivatives`: It generates all derivatives defined in Uploader. If file already had derivatives, it replaces them with newly generated ones. Associated class method: `generate_all_image_derivatives`
+              - `generate_image_metadata`: refreshes all metadata for attachment. Associated class method: `generate_all_image_metadata`
+              - `generate_image_derivatives_and_metadata`: does both previous things. Useful because it does so opening the file only once. Associated class method: `generate_all_image_derivatives_and_metadata`
+
+              Class methods are the same as their instance counterparts, but for collections. They also allow error handling on an individual record by passing a block to handle each error. If no block is given, attachments that throw errors are ignored and the iteration continues
+            - `ImageHandlingAttributes` serializer concern. It adds a method `add_image_handling_attributes` to all serializers that inherit from `BaseSerializer`. Considering an attachment of name `image`, this method adds two attributes to the serialized record:
+              - `image_blurhash`
+              - `image`. This is a hash that includes urls for all derivatives passed to the method. For example:
+              ```
+                add_image_handling_attributes(attachment_name: :image, derivatives: [:sm, :md], include_original_image: true)
+
+                # results in the following hash for the image attribute:
+                # {
+                #   sm: { url: 'someurl.com/bla' },
+                #   md: { url: 'someurl.com/ble' },
+                #   original: { url: 'someurl.com/ble' }
+                # }
+              ```
+            - `SHRINE_SECRET_KEY` environment variable. It comes witha value set in `.env.development`, but you'll need to set one for it in staging and production. It can be any random value, generating it with `SecureRandom.hex` for instance
         pundit:
           title: "Authorization"
           body: "For defining which parts of the system each user has access to, we have chosen to include the [Pundit](https://github.com/elabs/pundit) gem, by [Elabs](http://elabs.se/)."
@@ -127,16 +154,13 @@ readme:
         power_api:
           title: "API Support"
           body: "This projects uses [Power API](https://github.com/platanus/power_api). It's a Rails engine that gathers a set of gems and configurations designed to build incredible REST APIs."
-        graphql:
-          title: "API Support"
-          body: "This projects uses [graphql-ruby](https://graphql-ruby.org/) to generate a GraphQL API."
         active_admin:
           title: "Administration"
           body: |
             This project uses [Active Admin](https://github.com/activeadmin/activeadmin) which is a Ruby on Rails framework for creating elegant backends for website administration.
             <% if get(:vue_admin) %>
             This project supports Vue inside ActiveAdmin
-            - The main package is located in `app/javascript/packs/admin_application.js`, here you will declare the components you want to include in your ActiveAdmin views as you would in a normal Vue App.
+            - The main package is located in `app/javascript/active_admin.js`, here you will declare the components you want to include in your ActiveAdmin views as you would in a normal Vue App.
             - Additionally, to be able to use Vue components as [Arbre](https://github.com/activeadmin/arbre) Nodes the component names are also declared in `config/initializers/active_admin.rb`
             - The generator includes an example component called `admin_component`, you can use this component inside any ActiveAdmin view by just writing `admin_component` as you would with any `html` tag.
               - For example:

data/lib/potassium/assets/active_admin/admin-component.vue

@@ -1,35 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  test?: string
+  testNumber?: number
+  testObject?: {[key: string]: string},
+  testList?: number[],
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    test: undefined,
+    testNumber: 0,
+    testObject: undefined,
+    testList: undefined,
+  },
+);
+
+const message = 'Hello World';
+</script>
+
 <template>
   <div>
-    I am a Vue Component {{ test }} {{ message }}
+    I am a Vue Component {{ props.test }} {{ message }}
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    test: {
-      type: String,
-      default: '',
-    },
-    testNumber: {
-      type: Number,
-      default: 0,
-    },
-    testObject: {
-      type: Object,
-      default: null,
-    },
-    testList: {
-      type: Array,
-      default: null,
-    },
-  },
-
-  data() {
-    return {
-      message: 'Hello World',
-    };
-  },
-};
-</script>

data/lib/potassium/assets/app/javascript/api/index.ts

@@ -0,0 +1,55 @@
+import axios, { type AxiosRequestTransformer, type AxiosResponseTransformer } from 'axios';
+import convertKeys from '../utils/case-converter';
+
+const api = axios.create({
+  transformRequest: [
+    (data: any) => convertKeys(data, 'decamelize'),
+    ...(axios.defaults.transformRequest as AxiosRequestTransformer[]),
+  ],
+  transformResponse: [
+    ...(axios.defaults.transformResponse as AxiosResponseTransformer[]),
+    (data: any) => convertKeys(data, 'camelize'),
+  ],
+});
+
+export default api;
+
+/*
+// Example to use the api object in the path ´app/javascript/api/users.ts´
+
+import api from './index';
+
+export default {
+  index() {
+    const path = '/api/internal/users';
+
+    return api({
+      method: 'get',
+      url: path,
+    });
+  },
+  create(data: Partial<User>) {
+    const path = '/api/internal/users';
+
+    return api({
+      method: 'post',
+      url: path,
+      data: {
+        user: data,
+      },
+    });
+  },
+  update(data: Partial<User>) {
+    const path = `/api/internal/users/${data.id}`;
+
+    return api({
+      method: 'put',
+      url: path,
+      data: {
+        user: data,
+      },
+    });
+  },
+};
+
+*/

data/lib/potassium/assets/app/javascript/{app.spec.js → components/app.spec.ts}

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import App from 'app';
+import App from './app.vue';
 
 describe('App', () => {
   test('is a Vue instance', () => {

data/lib/potassium/assets/app/javascript/components/app.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const message = 'Hello Vue!';
+</script>
+
+<template>
+  <div id="app">
+    <p class="text-center text-lg">{{ message }}</p>
+  </div>
+</template>

data/lib/potassium/assets/app/javascript/types/vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

data/lib/potassium/assets/app/javascript/utils/case-converter.ts

@@ -0,0 +1,39 @@
+// From https://github.com/domchristie/humps/issues/51#issuecomment-425113505
+/* eslint-disable complexity */
+/* eslint-disable max-statements */
+import { camelize, decamelize } from 'humps';
+
+type objectToConvert = File | FormData | Blob | Record<string, unknown> | Array<objectToConvert>;
+
+function convertKeys(
+  object: objectToConvert,
+  conversion: 'camelize' | 'decamelize',
+): objectToConvert {
+  const converter = {
+    camelize,
+    decamelize,
+  };
+  if (object && !(object instanceof File) && !(object instanceof Blob)) {
+    if (object instanceof Array) {
+      return object.map((item: objectToConvert) => convertKeys(item, conversion));
+    }
+    if (object instanceof FormData) {
+      const formData = new FormData();
+      for (const [key, value] of object.entries()) {
+        formData.append(converter[conversion](key), value);
+      }
+
+      return formData;
+    }
+    if (typeof object === 'object') {
+      return Object.keys(object).reduce((acc, next) => ({
+        ...acc,
+        [converter[conversion](next)]: convertKeys(object[next] as objectToConvert, conversion),
+      }), {});
+    }
+  }
+
+  return object;
+}
+
+export default convertKeys;

data/lib/potassium/assets/app/jobs/shrine_promote_job.rb

@@ -0,0 +1,14 @@
+class ShrinePromoteJob < ApplicationJob
+  queue_as :default
+
+  def perform(attacher_class, record_class, record_id, name, file_data)
+    attacher_class = Object.const_get(attacher_class)
+    record         = Object.const_get(record_class).find(record_id)
+
+    attacher = attacher_class.retrieve(model: record, name: name, file: file_data)
+    attacher.create_derivatives
+    attacher.atomic_promote
+  rescue Shrine::AttachmentChanged, ActiveRecord::RecordNotFound
+    # attachment has changed or the record has been deleted, nothing to do
+  end
+end

data/lib/potassium/assets/app/mailers/application_mailer.rb

@@ -1,3 +1,3 @@
 class ApplicationMailer < ActionMailer::Base
-  layout 'mailer'
+  layout 'default_mail'
 end

data/lib/potassium/assets/app/mailers/example_mailer.rb

@@ -0,0 +1,6 @@
+class ExampleMailer < ApplicationMailer
+  def example_mail
+    @email = params[:email]
+    mail(from: 'admin@example.com', to: @email, subject: 'Welcome to Potassium')
+  end
+end

data/lib/potassium/assets/app/serializers/base_serializer.rb

@@ -0,0 +1,3 @@
+class BaseSerializer < ActiveModel::Serializer
+  include ImageHandlingAttributes
+end

data/lib/potassium/assets/app/serializers/concerns/image_handling_attributes.rb

@@ -0,0 +1,20 @@
+module ImageHandlingAttributes
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def add_image_handling_attributes(attachment_name:, derivatives:, include_original_image: false)
+      attributes attachment_name, "#{attachment_name}_blurhash".to_sym
+
+      define_method(attachment_name) do
+        attachment_hash = derivatives.reduce({}) do |hash, derivative|
+          hash[derivative] = { url: object.send("#{attachment_name}_url", derivative) }
+          hash
+        end
+        if include_original_image
+          attachment_hash[:original] = { url: object.send("#{attachment_name}_url") }
+        end
+        attachment_hash
+      end
+    end
+  end
+end

data/lib/potassium/assets/app/uploaders/cover_image_uploader.rb

@@ -0,0 +1,52 @@
+require "image_processing/vips"
+
+class CoverImageUploader < ImageUploader
+  plugin :derivation_endpoint, prefix: "derivations/cover_image"
+  plugin :add_metadata
+  plugin :image_handling_utilities
+
+  DERIVATIVES = {
+    sm: { size: [426, 240], type: 'jpg' },
+    md: { size: [960, 540], type: 'jpg' },
+    lg: { size: [1280, 720], type: 'jpg' },
+    webp_sm: { size: [426, 240], type: 'webp' },
+    webp_md: { size: [960, 540], type: 'webp' },
+    webp_lg: { size: [1280, 720], type: 'webp' }
+  }
+
+  Attacher.derivatives do |original|
+    vips = ImageProcessing::Vips.source(original)
+
+    DERIVATIVES.reduce({}) do |derivatives_hash, (name, derivative_info)|
+      derivatives_hash[name] = vips.convert(derivative_info[:type]).resize_to_limit!(
+        *derivative_info[:size]
+      )
+      derivatives_hash
+    end
+  end
+
+  derivation :thumbnail do |file, width, height|
+    ImageProcessing::Vips
+      .source(file)
+      .resize_to_limit!(width.to_i, height.to_i)
+  end
+
+  Attacher.default_url do |derivative: nil, **|
+    file&.derivation_url(:thumbnail, *DERIVATIVES.dig(derivative, :size)) if derivative.present?
+  end
+
+  add_metadata :blurhash do |io, derivative: nil, **|
+    if derivative.nil?
+      Shrine.with_file(io) do |file|
+        image = Vips::Image.new_from_file(file.path, access: :sequential)
+        image = image.resize(100.0 / image.width)
+        flat_rgb_pixels = []
+        image.to_a.each do |row|
+          row.each { |pixel| flat_rgb_pixels.concat(pixel[0..2])  }
+        end
+
+        Blurhash.encode(image.width, image.height, flat_rgb_pixels)
+      end
+    end
+  end
+end

data/lib/potassium/assets/app/views/example_mailer/example_mail.html.mjml

@@ -0,0 +1,7 @@
+<mj-section>
+  <mj-column>
+    <mj-text>
+      Hello <%= @email %>, welcome to Potassium
+    </mj-text>
+  </mj-column>
+</mj-section>