<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="18140" data-post-id="18140">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Morganjackson" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Morganjackson/120/2147_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Morganjackson
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thank you! that worked perfectly.</p>
<p>Looks like I need to read up on lists as I wasn’t aware of <strong>hd()</strong></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="18140" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-mongodb-in-phoenix-framework/1503/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-18140" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="18140"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="18141" data-post-id="18141">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Morganjackson" data-post="12" data-topic="1503">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/morganjackson/48/2147_2.png" class="avatar"> Morganjackson:</div>
<blockquote>
<p>Looks like I need to read up on lists as I wasn’t aware of hd()</p>
</blockquote>
</aside>
<p><a href="http://elixir-lang.org/docs/stable/elixir/Kernel.html#hd/1" rel="nofollow"><code>hd/1</code></a> and <a href="http://elixir-lang.org/docs/stable/elixir/Kernel.html#tl/1" rel="nofollow"><code>tl/1</code></a> are from erlang, and thus in the Elixir Kernel module.  <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="18141" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-mongodb-in-phoenix-framework/1503/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-18141" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="18141"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="18536" data-post-id="18536">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Morganjackson" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Morganjackson/120/2147_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Morganjackson
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry so keep bringing this up, but I’m still not sure I’m using this correctly.</p>
<p>I have an application with 20+ templates called blocks which can all potentially have different styles. They all share a “Block” schema but need a flexible way to add different styles which is why I thought jsonb would be the way to go.</p>
<pre><code>[%Ap.Block{__meta__: #Ecto.Schema.Metadata&lt;:loaded, "blocks"&gt;, 
  id: 1, 
  name: "foo",
  style: [%Ap.CustomField{
    data: [
      %{"color" =&gt; "red"},
      %{"h2" =&gt; "#303030"},
      %{"background-image" =&gt; "image.jpg"}
    ],
    id: "4222329c-cac4-4e1d-bfa6-6c440dcb7b59"}
  ], 
  template: "baz",
  inserted_at: #Ecto.DateTime&lt;2016-11-18 00:58:41&gt;,
  updated_at: #Ecto.DateTime&lt;2016-11-18 00:58:41&gt;}]
</code></pre>
<p>Basically, I want my final template to look something like the pseudo code below but I’m still not sure the best way to save the data and then how to easily access it later?</p>
<pre><code>&lt;style scoped&gt;
  p {
    color: &lt;%= style.data.color %&gt;
  }
  h2 {
    color: &lt;%= style.data.h2 %&gt;
  }
&lt;/style&gt;

&lt;section style="background-image: &lt;%= style.data.background-image %&gt;"&gt;
  &lt;h2&gt;My Heading&lt;/h2&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.&lt;/p&gt;
&lt;/section&gt;
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="18536" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/using-mongodb-in-phoenix-framework/1503/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-18536" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="18536"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>