Skip to content

Instantly share code, notes, and snippets.

@trauber
Last active May 23, 2020 17:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save trauber/331089aba6b69cc92c3036f18b62e54c to your computer and use it in GitHub Desktop.
Save trauber/331089aba6b69cc92c3036f18b62e54c to your computer and use it in GitHub Desktop.

Processing iContacts HMTL Email into WordPress

  • Download the message. This yields a .eml file.
  • Run munpack on the .eml file. This will break the file into several files named part1 part2, etc, one of which will be HTML with some non-ascii characters. Let's say part2 for example.

This might work with other HTML emails. I've only tried iContacts.

munpack -t file.eml
awk '{ gsub(/\377/,""); print; }' part2 > tmp.html
dos2unix tmp.html

For the moment I am just pasting the content between body tags as is. In this scenario tables don't collapse on mobile devices and text becomes unreadable on some devices in portrait mode.

Proposed

With tmp.html loaded in a browser as a visual guide, go through tmp.html with vim and save non-table sections to separate html files.

Edit the following haml template to include the separated html files in the File.read statements, adding more .wp-block-columns.alignwide.has-2-columns blocks as needed.

!!!
%html
  %head
    %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/
    %link{:href => "http://www.templesinainj.com/wp-includes/css/dist/block-library/style.min.css?ver=5.4.1", :media => "all", :rel => "stylesheet", :type => "text/css"}/
    %link{:href => "happenings.css", :media => "all", :rel => "stylesheet", :type => "text/css"}/
  %body
    = File.read "banner.html"
    %br{:clear => "all"}
    .contain
      .wp-block-columns.alignwide.has-2-columns
        .wp-block-column
          %div{:style =>"border: solid thick cyan; padding: 10px;"}
            = File.read "yerushalayim.html"
        .wp-block-column
          %div{:style =>"border: solid thick tomato; padding: 10px;"}
            = File.read "weekends.html"
      .wp-block-columns.alignwide.has-2-columns
        .wp-block-column
          %div{:style =>"border: solid thick orange; padding: 10px;"}
            = File.read "coffee.html"
        .wp-block-column
          %div{:style =>"border: solid thick tomato; padding: 10px;"}
            = File.read "planning.html"
      .wp-block-columns.alignwide.has-2-columns
        .wp-block-column
          %div{:style =>"border: solid thick orange; padding: 10px;"}
            = File.read "tikkun.html"
        .wp-block-column
          %div{:style =>"border: solid thick tomato; padding: 10px;"}
            = File.read "tikkun.html"

Try to get "Fridays & Saturdays", "Coffee Chat" to line up consecutively in collapsed view. Try to match Rose's iContact colors with the div borders.

This effectively replaces all tables with WordPress's own responsive multicolumn code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment