Updating readme

akoutmos · Apr 15, 2022 · c2395e7 · c2395e7
1 parent 1c11b5a
commit c2395e7
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@
 
 - [Installation](#installation)
 - [Supporting MJML EEx](#supporting-mjml_eex)
-- [Setting Up MJML EEx](#setting-up-mjml_eex)
+- [Using MJML EEx](#setting-up-mjml_eex)
 - [Attribution](#attribution)
 
 ## Installation
@@ -74,7 +74,9 @@ Checkout my [GitHub Sponsorship page](https://github.com/sponsors/akoutmos) if y
   <img align="center" height="125" src="guides/images/your_logo_here.png" alt="Support the project">
 </a>
 
-## Setting Up MJML EEx
+## Using MJML EEx
+
+### Basic Usage
 
 Add `{:mjml_eex, "~> 0.1.0"}` to your `mix.exs` file and run `mix deps.get`. After you have that in place, you
 can go ahead and create a template module like so:
@@ -94,14 +96,49 @@ module path):
     <mj-section>
       <mj-column>
         <mj-divider border-color="#F45E43"></mj-divider>
-        <mj-text font-size="20px" color="#F45E43">Hello MJML EEx!</mj-text>
+        <mj-text font-size="20px" color="#F45E43">Hello <%= @first_name %> <%= @last_name %>!</mj-text>
       </mj-column>
     </mj-section>
   </mj-body>
 </mjml>
 ```
 
-With those in place, you should be all set to go!
+With those two in place, you can now run `BasicTemplate.render(first_name: "Alex", last_name: "Koutmos")` and you
+will get back an HTML document that can be emailed to users.
+
+### Using Functions from Template Module
+
+You can also call functions from your template module if they exist in your MJML EEx template using
+the following module declaration:
+
+```elixir
+defmodule FunctionTemplate do
+  use MjmlEEx, mjml_template: "function_template.mjml.eex"
+
+  defp generate_full_name(first_name, last_name) do
+    "#{first_name} #{last_name}"
+  end
+end
+```
+
+In conjunction with the following template:
+
+```html
+<mjml>
+  <mj-body>
+    <mj-section>
+      <mj-column>
+        <mj-divider border-color="#F45E43"></mj-divider>
+        <mj-text font-size="20px" color="#F45E43">Hello <%= generate_full_name(@first_name, @last_name) %>!</mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
+```
+
+In order to render the email you would then call: `FunctionTemplate.render(first_name: "Alex", last_name: "Koutmos")`
+
+### Using Components
 
 ## Attribution
 

diff --git a/lib/mjml_eex.ex b/lib/mjml_eex.ex
@@ -1,6 +1,15 @@
 defmodule MjmlEEx do
   @moduledoc """
-  Documentation for `MjmlEEx`.
+  Documentation for `MjmlEEx` template module. This moule contains the macro
+  that is used to create an MJML EEx template.
+
+  You can use this module like so:
+
+  ```elixir
+  defmodule BasicTemplate do
+    use MjmlEEx, mjml_template: "basic_template.mjml.eex"
+  end
+  ```
   """
 
   alias MjmlEEx.Utils

diff --git a/test/mjml_eex_test.exs b/test/mjml_eex_test.exs
@@ -13,6 +13,14 @@ defmodule MjmlEExTest do
     use MjmlEEx, mjml_template: "test_templates/component_template.mjml.eex"
   end
 
+  defmodule FunctionTemplate do
+    use MjmlEEx, mjml_template: "test_templates/function_template.mjml.eex"
+
+    defp generate_full_name(first_name, last_name) do
+      "#{first_name} #{last_name}"
+    end
+  end
+
   describe "BasicTemplate.render/1" do
     test "should raise an error if no assigns are provided" do
       assert_raise ArgumentError, ~r/assign @call_to_action_text not available in template/, fn ->
@@ -32,6 +40,12 @@ defmodule MjmlEExTest do
     end
   end
 
+  describe "FunctionTemplate.render/1" do
+    test "should output the correct output when a module function is used" do
+      assert FunctionTemplate.render(first_name: "Alex", last_name: "Koutmos") =~ "Alex Koutmos"
+    end
+  end
+
   describe "ErrorTemplate" do
     test "should raise an error if the MJML template fails to compile" do
       assert_raise RuntimeError, ~r/Failed to compile MJML template: \"unexpected element at position 448\"/, fn ->

diff --git a/test/test_templates/function_template.mjml.eex b/test/test_templates/function_template.mjml.eex
@@ -0,0 +1,60 @@
+<mjml>
+  <mj-head>
+    <mj-title>Say hello to card</mj-title>
+    <mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500"></mj-font>
+    <mj-attributes>
+      <mj-all font-family="Montserrat, Helvetica, Arial, sans-serif"></mj-all>
+      <mj-text font-weight="400" font-size="16px" color="#000000" line-height="24px"></mj-text>
+      <mj-section padding="0px"></mj-section>
+    </mj-attributes>
+  </mj-head>
+  <mj-body background-color="#F2F2F2">
+    <mj-section padding="10px 0 20px 0">
+      <mj-column>
+        <mj-text align="center" color="#9B9B9B" font-size="11px">Writing A Good Headline For Your Advertisement</mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section padding="20px 20px 0 20px" background-color="#FFFFFF">
+      <mj-column width="35%">
+        <mj-text align="left" font-size="20px" font-weight="500">// BR&amp;AND</mj-text>
+      </mj-column>
+      <mj-column width="65%">
+        <mj-text align="right" font-size="11px"><a href="#" style="color: #000000; text-decoration: none;">HOME</a>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">SERVICE</a>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;<a href="#" style="color: #000000; text-decoration: none;">THIRD</a></mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section padding="20px 20px 0 20px" background-color="#FFFFFF">
+      <mj-column>
+        <mj-text align="center" font-weight="300" padding="30px 40px 10px 40px" font-size="32px" line-height="40px" color="#5FA91D">Free Advertising For Your Online Business.</mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section padding="10px 20px" background-color="#FFFFFF">
+      <mj-column>
+        <mj-divider width="30px" border-width="3px" border-color="#9B9B9B"></mj-divider>
+      </mj-column>
+    </mj-section>
+    <mj-section padding="0 20px 20px 20px" background-color="#FFFFFF">
+      <mj-column width="80%">
+        <mj-text align="center" padding-top="10px" font-weight="500" padding="0px">A Right Media Mix Can Make The Difference.</mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section background-url="http://nimus.de/share/tpl-card/bg.jpg" vertical-align="middle" background-size="cover" background-repeat="no-repeat">
+      <mj-column width="100%">
+        <mj-image src="http://nimus.de/share/tpl-card/lineshadow.png" alt="" align="center" border="none" padding="0px"></mj-image>
+        <mj-text align="center" padding="50px 40px 0 40px" font-weight="300">Marketers/advertisers usually focus their efforts on the people responsible for making the purchase. In many cases, this is an effective approach but in other cases it can make for a totally useless marketing campaign.</mj-text>
+        <mj-button align="center" background-color="#5FA91D" color="#FFFFFF" border-radius="2px" href="#" inner-padding="15px 30px" padding-bottom="100px" padding-top="20px">
+          <%= generate_full_name(@first_name, @last_name) %>
+        </mj-button>
+      </mj-column>
+    </mj-section>
+    <mj-section padding="50px 0 0 0" background-color="#FFFFFF">
+      <mj-column>
+        <mj-image src="http://nimus.de/share/tpl-card/bottom.png" alt="bottom border" align="center" border="none" padding="0px"></mj-image>
+      </mj-column>
+    </mj-section>
+    <mj-section padding="10px 0 20px 0">
+      <mj-column>
+        <mj-text align="center" color="#9B9B9B" font-size="11px"><a href="#" style="color: #9B9B9B;">Unsubscribe</a> from this newsletter<br />52 Edison Court Suite 259 / East Aidabury / Cambodi<br /> <a href="#" style="color: #9B9B9B; text-decoration:none;">Made by svenhaustein.de</a></mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>