Merge pull request #23 from 19pdh/post-image

Post image

1 files changed, 238 insertions, 67 deletions

diff --git a/tests/unit/__snapshots__/storybook.test.js.snap b/tests/unit/__snapshots__/storybook.test.js.snap
index 33be1ab..54d6473 100644
--- a/tests/unit/__snapshots__/storybook.test.js.snap
+++ b/tests/unit/__snapshots__/storybook.test.js.snap
@@ -92,6 +92,8 @@ exports[`Storyshots GoogleDriveLink default 1`] = `
      
     <a
       href="https://drive.google.com/u/1"
+      rel="noopener"
+      target="_blank"
     >
       <button
         class="button"
@@ -160,41 +162,49 @@ exports[`Storyshots Posts/PostLink default 1`] = `
     <a
       href="/kronika/2019/20/11/test"
     >
-      <div
-        class="post-container"
-      >
-        <h4
-          class="post-title"
-        >
-          Test PostLink
-        </h4>
+      <div>
+        <div
+          class="image"
+          style="background-image: url(/assets/og/default.jpg);"
+        />
          
-        <p
-          class="post-description"
+        <div
+          class="post-container"
         >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
-        </p>
+          <h4
+            class="post-title"
+          >
+            Test PostLink
+          </h4>
+           
+          <p
+            class="post-description"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+          </p>
+        </div>
       </div>
     </a>
   </div>
 </div>
 `;
 
-exports[`Storyshots Posts/PurePostList default 1`] = `
+exports[`Storyshots Posts/PostLink with image 1`] = `
 <div
-  class="post-list"
+  style="height: 100vh; display: flex; align-items: center; justify-content: center;"
 >
-  <!---->
-   
   <div
-    class="post-list-container"
+    class="post-link"
   >
-    <div
-      class="post-link"
+    <a
+      href="/kronika/2019/20/11/test"
     >
-      <a
-        href="/kronika/2019/20/11/test"
-      >
+      <div>
+        <div
+          class="image"
+          style="background-image: url(https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"
+        />
+         
         <div
           class="post-container"
         >
@@ -210,6 +220,49 @@ exports[`Storyshots Posts/PurePostList default 1`] = `
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
           </p>
         </div>
+      </div>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Posts/PurePostList default 1`] = `
+<div
+  class="post-list"
+>
+  <!---->
+   
+  <div
+    class="post-list-container"
+  >
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div>
+          <div
+            class="image"
+            style="background-image: url(/assets/og/default.jpg);"
+          />
+           
+          <div
+            class="post-container"
+          >
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
+        </div>
       </a>
     </div>
     <div
@@ -218,20 +271,27 @@ exports[`Storyshots Posts/PurePostList default 1`] = `
       <a
         href="/kronika/2019/20/11/test"
       >
-        <div
-          class="post-container"
-        >
-          <h4
-            class="post-title"
-          >
-            Test PostLink
-          </h4>
+        <div>
+          <div
+            class="image"
+            style="background-image: url(/assets/og/default.jpg);"
+          />
            
-          <p
-            class="post-description"
+          <div
+            class="post-container"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
-          </p>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
         </div>
       </a>
     </div>
@@ -241,20 +301,57 @@ exports[`Storyshots Posts/PurePostList default 1`] = `
       <a
         href="/kronika/2019/20/11/test"
       >
-        <div
-          class="post-container"
-        >
-          <h4
-            class="post-title"
+        <div>
+          <div
+            class="image"
+            style="background-image: url(/assets/og/default.jpg);"
+          />
+           
+          <div
+            class="post-container"
           >
-            Test PostLink
-          </h4>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div>
+          <div
+            class="image"
+            style="background-image: url(https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"
+          />
            
-          <p
-            class="post-description"
+          <div
+            class="post-container"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
-          </p>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
         </div>
       </a>
     </div>
@@ -264,20 +361,57 @@ exports[`Storyshots Posts/PurePostList default 1`] = `
       <a
         href="/kronika/2019/20/11/test"
       >
-        <div
-          class="post-container"
-        >
-          <h4
-            class="post-title"
+        <div>
+          <div
+            class="image"
+            style="background-image: url(https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"
+          />
+           
+          <div
+            class="post-container"
           >
-            Test PostLink
-          </h4>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div>
+          <div
+            class="image"
+            style="background-image: url(https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"
+          />
            
-          <p
-            class="post-description"
+          <div
+            class="post-container"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
-          </p>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
         </div>
       </a>
     </div>
@@ -287,20 +421,57 @@ exports[`Storyshots Posts/PurePostList default 1`] = `
       <a
         href="/kronika/2019/20/11/test"
       >
-        <div
-          class="post-container"
-        >
-          <h4
-            class="post-title"
+        <div>
+          <div
+            class="image"
+            style="background-image: url(https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"
+          />
+           
+          <div
+            class="post-container"
           >
-            Test PostLink
-          </h4>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
+        </div>
+      </a>
+    </div>
+    <div
+      class="post-link"
+    >
+      <a
+        href="/kronika/2019/20/11/test"
+      >
+        <div>
+          <div
+            class="image"
+            style="background-image: url(https://images.unsplash.com/photo-1573145881456-0708c72340ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);"
+          />
            
-          <p
-            class="post-description"
+          <div
+            class="post-container"
           >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
-          </p>
+            <h4
+              class="post-title"
+            >
+              Test PostLink
+            </h4>
+             
+            <p
+              class="post-description"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec....
+            </p>
+          </div>
         </div>
       </a>
     </div>