postmortem 0.1.2 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e05359d9e039f6e44c0e89decaac3c5c72fe3447f7a96fdb8ac1667fe93d537
-  data.tar.gz: 651d2b986f6b9b07e8fe311cd163865490005da3376c95c4ce05a4110a313e62
+  metadata.gz: ba1b63c74d80acb294e4bf377084882db2dd7f3c5d6422079923830b43405de2
+  data.tar.gz: 7b359315a60e5c44d1ea0efbf1f049c04d7cf3258b7db5bcb53636ceacbfbe13
 SHA512:
-  metadata.gz: 66a929b9cfa7043ebce54eda09c4168e4adfd485d24e32720dc68238c6ea578030c89ad90181d770b22b33d358c2945bae12cc5df9a8f3d3019989b6a72cc8ca
-  data.tar.gz: 82478c5ef6a04531776023947b39b3c1c04a003185a602199a4460e2ba4b6759a87493475666f4056d0bcc759b7de3a5765db8b3356d28e863e71ed445ca7e2a
+  metadata.gz: 57b6d1d1c02fe3f4445dfc038ef3d0762d700fca755d63a20827000d5805484a2f293f4b164bac0e22d341f24648129aa55e80f318db56243cdd32dd79dc2286
+  data.tar.gz: '02768d56a8cf860d2328af1922354edaf7a7caff7d481a080b27cfd3102f215084692d376f260c725a15cbdbbe0e5ec4bce2c20c0517091ad5c59495645bab75'

data/.gitignore

@@ -10,4 +10,6 @@
 .rspec_status
 *.gem
 
+preview/
+
 Gemfile.lock

data/.rubocop.yml

@@ -3,49 +3,7 @@ Metrics/BlockLength:
     - 'spec/**/*_spec.rb'
     - 'postmortem.gemspec'
 
-Layout/EmptyLinesAroundAttributeAccessor:
-  Enabled: true
-Layout/SpaceAroundMethodCallOperator:
-  Enabled: true
-Lint/DeprecatedOpenSSLConstant:
-  Enabled: true
-Lint/DuplicateElsifCondition:
-  Enabled: true
-Lint/MixedRegexpCaptureTypes:
-  Enabled: true
-Lint/RaiseException:
-  Enabled: true
-Lint/StructNewOverride:
-  Enabled: true
-Style/AccessorGrouping:
-  Enabled: true
-Style/ArrayCoercion:
-  Enabled: true
-Style/BisectedAttrAccessor:
-  Enabled: true
-Style/CaseLikeIf:
-  Enabled: true
-Style/ExponentialNotation:
-  Enabled: true
-Style/HashAsLastArrayItem:
-  Enabled: true
-Style/HashEachMethods:
-  Enabled: true
-Style/HashLikeCase:
-  Enabled: true
-Style/HashTransformKeys:
-  Enabled: true
-Style/HashTransformValues:
-  Enabled: true
-Style/RedundantAssignment:
-  Enabled: true
-Style/RedundantFetchBlock:
-  Enabled: true
-Style/RedundantFileExtensionInRequire:
-  Enabled: true
-Style/RedundantRegexpCharacterClass:
-  Enabled: true
-Style/RedundantRegexpEscape:
-  Enabled: true
-Style/SlicingWithRange:
-  Enabled: true
+AllCops:
+  NewCops: enable
+  Exclude:
+    - 'preview/**/*'

data/.ruby-version

@@ -0,0 +1 @@
+2.5.8

data/Gemfile

@@ -3,5 +3,3 @@
 source 'https://rubygems.org'
 
 gemspec
-
-gem 'devpack', '~> 0.2.0'

data/README.md

@@ -1,21 +1,24 @@
-# Postmortem
+# PostMortem
 
-_Postmortem_ provides a simple and clean preview of all outgoing mails sent by your _Ruby_ application to make email development a little less painful.
+_PostMortem_ provides a simple and clean preview of all outgoing mails sent by your _Ruby_ application to make email development a little less painful.
 
 Every time your application sends an email a clearly-visible log entry will be written which provides a path to a temporary file containing your preview.
 
-Take a look at a [live example](https://postmortem.surge.sh/) to see _Postmortem_ in action.
+Take a look at a [live example](https://postmortem.surge.sh/) to see _PostMortem_ in action.
 
-_Postmortem_ should only be enabled in test or development environments.
+_PostMortem_ should only be enabled in test or development environments.
 
 ## Features
 
 * Seamless integration with [_ActionMailer_](https://guides.rubyonrails.org/action_mailer_basics.html), [_Pony_](https://github.com/benprew/pony), [_Mail_](https://github.com/mikel/mail), etc.
 * Email deliveries are always intercepted (can be configured to pass through).
+* Live inbox monitors incoming emails so you can view them as soon as they are delivered.
 * Preview email content as well as typical email headers (recipients, subject, etc.).
 * View rendered _HTML_, plaintext, or _HTML_ source with syntax highlighting (courtesy of [highlight.js](https://highlightjs.org/)).
-* Dual or single column view to suit your requirements.
 * Content is loaded inside an `<iframe>` to ensure document isolation and validity.
+* Local images are located and embedded in HTML so you can see the full version of outgoing emails.
+* Runs without a server - single page app runs on file system with no need to run a local web server to access UI.
+* Any captured email can be downloaded into a standalone HTML file which can be shared with others.
 
 ## Installation
 
@@ -23,7 +26,7 @@ Add the gem to your application's Gemfile:
 
 ```ruby
 group :development, :test do
-  gem 'postmortem', '~> 0.1.2'
+  gem 'postmortem', '~> 0.2.4'
 end
 ```
 
@@ -37,9 +40,7 @@ Or install it yourself as:
 
 ## Usage
 
-_Postmortem_ automatically integrates with _Rails ActionMailer_ and  _Pony_. When an email is sent an entry will be visible in your application's log output.
-
-The path to the preview file is based on the current time and the subject of the email. If you would prefer to use the same path for each email you can disable timestamps (see [configuration](#configuration)) and simply reload your browser every time an email is sent.
+_PostMortem_ automatically integrates with _Rails ActionMailer_ and  _Pony_. When an email is sent an entry will be visible in your application's log output.
 
 If you are using assets (images etc.) with _ActionMailer_ make sure to configure the asset host, e.g.:
 
@@ -50,15 +51,22 @@ Rails.application.configure do
 end
 ```
 
-Load the provided file in your browser to preview your email.
+A log entry will be generated every time an email is sent. Load the path provided in the log entry in your browser to launch _PostMortem_:
 
 ![Screenshot](doc/screenshot.png)
 
+### Clearing the inbox
+
+The inbox can be cleared at any time (e.g. at the start of a test run):
+
+```ruby
+Postmortem.clear_inbox
+```
 
 ## Configuration
 <a name="configuration"></a>
 
-Configure _Postmortem_ by calling `Postmortem.configure`, e.g. in a _Rails_ initializer.
+Configure _PostMortem_ by calling `Postmortem.configure`, e.g. in a _Rails_ initializer.
 
 ```ruby
 # config/initializers/postmortem.rb
@@ -66,11 +74,7 @@ Postmortem.configure do |config|
   # Colorize output in logs (path to preview HTML file) to improve visibility (default: true).
   config.colorize = true
 
-  # Prefix all preview filenames with a timestamp (default: true).
-  # Setting to false allows refreshing the same path in your browser to view the latest version.
-  config.timestmap = true
-
-  # Path to the Postmortem log file, where preview paths are written (default: STDOUT).
+  # Path to the PostMortem log file, where preview paths are written (default: STDOUT).
   config.log_path = '/path/to/postmortem.log'
 
   # Path to save preview .html files (default: OS-provided temp directory).

data/layout/default.html.erb

@@ -1,290 +1,104 @@
+<!DOCTYPE html>
 <html>
+  <title>PostMortem Email</title>
   <head>
-    <link rel="stylesheet"
-          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-          crossorigin="anonymous" />
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-          rel="stylesheet" />
-    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/a11y-light.min.css"
-          integrity="sha512-zqEpZCxg7IVhGXy6EwdTb26cHl8IZzN/29Mj2/oSzkCKiLxHTi491mcC/K1NhShMWXu+WvfU5Z261XPc60lw7g=="
-          crossorigin="anonymous" />
     <style>
-      .headers {
-        height: 100%;
-        max-width: 35rem;
-        display: none;
-      }
-
-      .content {
-        background-color: #efefef;
-        padding: 1rem 2rem;
-        height: 100%;
-      }
-
-      .headers table {
-        background-color: #fff;
-      }
-
-      .preview {
-        display: none;
-        background-color: #fff;
-        padding: 2rem;
-        height: 100%;
-      }
-
-      .preview.source-view {
-        padding: 1.5rem;
-      }
-
-      .preview iframe {
-        border-style: none;
-        width: 100%;
-        height: 100%;
-      }
-
-      .main-row {
-        height: 100%;
-      }
-
-      .container {
-         height: 90vh;
-         margin-top: 2.8rem;
-      }
-
-      .container.full-width {
-         max-width: 100%;
-      }
-
-      .visible {
-        display: block;
-      }
-
-      .toolbar {
-         background-color: #fff;
-         text-align: right;
-         padding: 0.5rem 1rem;
-         position: fixed;
-         width: 100%;
-      }
-
-      .toolbar i {
-        font-size: 1.2rem;
-        cursor: pointer;
-        margin: 0 0.2rem;
-      }
-
-      .toolbar i.disabled {
-        cursor: default;
-        color: #ddd !important;
-      }
-
-      .toolbar .separator {
-        border-right: 1px solid #ccc;
-        margin-right: 0.5rem;
-        margin-left: 0.2rem;
-      }
+      <%= css_dependencies %>
+      <%= styles %>
     </style>
+
+   <link href="data:image/x-icon;base64,<%= favicon_b64 %>" rel="icon" type="image/x-icon" />
   </head>
+
   <body>
     <div class="toolbar">
 
+      <a target="_blank" href="https://github.com/bobf/postmortem"><h1 class="text-secondary" id="title">Post<i class="fa fa-envelope" aria-hidden="true"></i>Mortem</h1></a>
+
+      <a href="javascript:void(0)" class="text-secondary" id="download-link" download="Email.html">
+        <i data-toggle="tooltip"
+           title="Download for sharing"
+           class="fa fa-cloud-download download-button"></i>
+      </a>
+
       <i data-toggle="tooltip"
-         title="<%= mail.html_body.nil? ? 'View HTML Part (Unavailable)' : 'View HTML Part' %>"
-         class="fa fa-code html-view-switch"></i>
+         title="View HTML Source"
+         class="fa fa-code source-view-switch"></i>
 
       <i data-toggle="tooltip"
-         title="<%= mail.html_body.nil? ? 'View HTML Source (Unavailable)' : 'View HTML Source' %>"
-         class="fa fa-file-code-o source-view-switch"></i>
+         title="View HTML Part"
+         class="fa fa-file-code-o html-view-switch"></i>
 
       <i data-toggle="tooltip"
-         title="<%= mail.text_body.nil? ? 'View Plaintext Part (Unavailable)' : 'View Plaintext Part' %>"
+         title="View Plaintext Part"
          class="fa fa-file-text-o text-view-switch"></i>
 
       <span class="separator"></span>
 
       <i data-toggle="tooltip"
-         title="Toggle Email Headers"
+         title="Toggle Inbox"
          class="fa fa-columns column-switch"></i>
 
+      <i data-toggle="tooltip"
+         title="Toggle Headers"
+         class="fa fa-envelope-open-o headers-view-switch"></i>
+
     </div>
+
     <div class="content">
       <div class="container full-width">
         <div class="row main-row">
-          <div class="col headers visible">
-            <table class="table table-hover table table-bordered">
-              <tbody>
-                <tr>
-                  <th>Subject:</th>
-                  <td><%= mail.subject %></td>
-                </tr>
-
-                <tr>
-                  <th style="width: 7rem;">From:</th>
-                  <td><%= format_email_array(mail.from) %></td>
-                </tr>
+          <div id="inbox-container" class="col inbox-container">
+            <div class="row">
+              <div class="col inbox-header">
+                <h5><i class="fa fa-inbox"></i> Inbox <span class="text-secondary" id="inbox-info"></span></h5>
+                <button data-toggle="tooltip" title="Hide read messages" class="btn btn-light show-hide-read-button"><i class="fa fa-envelope-open-o"></i> <i data-state="show" class="fa fa-eye show-hide-read-icon"></i></button>
+                <button data-toggle="tooltip" title="Mark all as read" class="btn btn-light read-all-button"><i class="fa fa-envelope-open-o"></i> All</button>
+              </div>
+            </div>
+
+            <div class="row">
+              <!--INBOX-START-->
+              <div id="inbox" class="col inbox">
+                <div class="inbox-loading">Loading &mdash; <i class="fa fa-clock-o"></i></div>
+              </div>
+              <!--INBOX-END-->
+            </div>
+          </div>
 
-                <tr>
-                  <th>Reply-To:</th>
-                  <td><%= format_email_array(mail.reply_to) %></td>
-                </tr>
+          <div class="col right-column">
+            <div id="headers" class="row headers visible"></div>
 
-                <tr>
-                  <th>To:</th>
-                  <td><%= format_email_array(mail.to) %></td>
-                </tr>
+            <div class="preview row html-view">
+              <iframe id="html-iframe"></iframe>
+            </div>
 
-                <tr>
-                  <th>Cc:</th>
-                  <td><%= format_email_array(mail.cc) %></td>
-                </tr>
+            <div class="preview row text-view">
+              <iframe id="text-iframe"></iframe>
+            </div>
 
-                <tr>
-                  <th>Bcc:</th>
-                  <td><%= format_email_array(mail.bcc) %></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="preview col html-view">
-            <iframe id="html-iframe"></iframe>
-          </div>
-          <div class="preview col text-view">
-            <iframe id="text-iframe"></iframe>
-          </div>
-          <div class="preview col source-view">
-            <iframe id="source-iframe"></iframe>
+            <div class="preview row source-view">
+              <iframe id="source-iframe"></iframe>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
-            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
-            crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
-            integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
-            crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
-            integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
-            crossorigin="anonymous"></script>
+    <iframe id="index-iframe" src="postmortem_index.html"></iframe>
+    <iframe id="identity-iframe" src="postmortem_identity.html"></iframe>
+    <script type="text/javascript">
+      <%= javascript_dependencies %>
+    </script>
+    <%= headers_template %>
+    <script id="initialize-script" type="text/javascript">
+      const POSTMORTEM = {};
+      POSTMORTEM.downloadedPreview = false;
+      POSTMORTEM.initialData = <%= mail.serializable.to_json %>;
+      POSTMORTEM.hasHtml = <%= (!mail.html_body.nil?).to_json %>;
+      POSTMORTEM.hasText = <%= (!mail.text_body.nil?).to_json %>;
+    </script>
     <script>
-      (function () {
-        var htmlIframeDocument = document.querySelector("#html-iframe").contentDocument;
-        htmlIframeDocument.write(<%= mail.html_body.to_json %>);
-        htmlIframeDocument.close();
-
-        var textIframeDocument = document.querySelector("#text-iframe").contentDocument;
-        textIframeDocument.write('<pre>' + <%= ERB::Util.html_escape(mail.text_body).to_json %> + '</pre>');
-        textIframeDocument.close();
-
-        var sourceHighlightBundle = [
-           '<link rel="stylesheet"',
-           '     href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/agate.min.css"',
-           '     integrity="sha512-mMMMPADD4HAIogAWZbv+WjZTC0itafUZNI0jQm48PMBTApXt11omF5jhS7U1kp3R2Pr6oGJ+JwQKiUkUwCQaUQ=="',
-           '     crossorigin="anonymous" />',
-           '<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/highlight.min.js"',
-           '        integrity="sha512-tHQeqtcNWlZtEh8As/4MmZ5qpy0wj04svWFK7MIzLmUVIzaHXS8eod9OmHxyBL1UET5Rchvw7Ih4ZDv5JojZww=="',
-           '        crossorigin="anonymous"></' + 'script>',
-           '<script>hljs.initHighlightingOnLoad();</' + 'script>',
-        ].join('\n');
-
-        var sourceIframeDocument = document.querySelector("#source-iframe").contentDocument;
-        sourceIframeDocument.write('<pre><code style="padding: 1rem;" class="language-html">' + <%= ERB::Util.html_escape(mail.html_body).to_json %> + '</code></pre>');
-        sourceIframeDocument.write(sourceHighlightBundle);
-        sourceIframeDocument.close();
-
-        var twoColumnView;
-        var hasHtml = <%= (!mail.html_body.nil?).to_json %>;
-        var hasText = <%= (!mail.text_body.nil?).to_json %>;
-        var headers = document.querySelector('.headers');
-        var columnSwitch = document.querySelector('.column-switch');
-
-        var setColumnView = function (enableTwoColumnView) {
-          var container = document.querySelector('.container');
-          twoColumnView = enableTwoColumnView;
-          if (twoColumnView) {
-            setVisible(headers, true);
-            setOn(columnSwitch);
-            container.classList.add('full-width');
-          } else {
-            setVisible(headers, false);
-            setOff(columnSwitch);
-            container.classList.remove('full-width');
-          }
-        };
-
-        var contexts = ['source', 'text', 'html'];
-
-        var views = {
-          source: document.querySelector('.source-view'),
-          html: document.querySelector('.html-view'),
-          text: document.querySelector('.text-view'),
-        };
-
-        var toolbar = {
-          source: document.querySelector('.source-view-switch'),
-          html: document.querySelector('.html-view-switch'),
-          text: document.querySelector('.text-view-switch'),
-        };
-
-        var setOn = function(element) {
-          element.classList.add('text-primary');
-          element.classList.remove('text-secondary');
-        };
-
-        var setOff = function(element) {
-          element.classList.add('text-secondary');
-          element.classList.remove('text-primary');
-        };
-
-        var setDisabled = function(element) {
-          element.classList.add('disabled');
-          element.classList.remove('text-secondary');
-          element.onclick = function () {};
-        };
-
-        var setVisible = function(element, visible) {
-          if (visible) {
-            element.classList.add('visible');
-          } else {
-            element.classList.remove('visible');
-          }
-        };
-
-        var setView = function(context) {
-          var key;
-          for (i = 0; i < contexts.length; i++) {
-            key = contexts[i];
-            if (key === context) {
-              setOn(toolbar[key]);
-              setVisible(views[key], true);
-            } else {
-              setOff(toolbar[key]);
-              setVisible(views[key], false);
-            }
-          }
-        };
-
-        toolbar.html.onclick   = function () { setView('html'); };
-        toolbar.text.onclick   = function () { setView('text'); };
-        toolbar.source.onclick = function () { setView('source'); };
-        columnSwitch.onclick   = function () { setColumnView(!twoColumnView); };
-
-        if (!hasText) setDisabled(toolbar.text);
-
-        if (hasHtml) {
-          setView('html');
-        } else {
-          setDisabled(toolbar.html);
-          setDisabled(toolbar.source);
-          setView('text');
-        }
-
-        setColumnView(true);
-
-        $('[data-toggle="tooltip"]').tooltip();
-      })();
+      <%= javascript %>
     </script>
   </body>
 </html>