Card as separate component

theme-source/partials/list.tsx

@@ -43,8 +43,82 @@ export function List({ subtags, tag, content, metadata, file, config }) {
           }}
         >
           {content.map(page => (
-            <div
+            <Card
               key={page.file}
+              file={page.file}
+              image={page.metadata.image}
+              title={page.metadata.title}
+              text={
+                page.metadata.perex
+                  ? page.metadata.perex
+                  : page.metadata.perex_e
+                  ? truncate(page.metadata.perex_e)
+                  : page.content
+                  ? truncate(striptags(page.content))
+                  : null
+              }
+              caption={
+                <>
+                  {dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
+                  {page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
+                  {page.metadata.author.name}
+                </>
+              }
+            />
+          ))}
+        </div>
+        <Paginator metadata={metadata} file={file} config={config} />
+      </div>
+
+      <div className="hide-on-small-only">
+        {metadata.prevurl && (
+          <div style={{ left: 0 }} className="sidelink sidelink-l">
+            <a href={`/${metadata.prevurl}`}>
+              <div>
+                <SymbolBackward />
+              </div>
+            </a>
+          </div>
+        )}
+        {metadata.nexturl && (
+          <div style={{ right: 0 }} className="sidelink sidelink-r">
+            <a href={`/${metadata.nexturl}`}>
+              <div>
+                <SymbolForward />
+              </div>
+            </a>
+          </div>
+        )}
+      </div>
+
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+    (function($) {
+      $(document).keyup(function(e) {
+        if($("#search-overlay").hasClass("shown")) return;
+        ${
+          metadata.nexturl
+            ? `if(e.key == "ArrowRight") window.location = "/${metadata.nexturl}";`
+            : ''
+        }
+        ${
+          metadata.prevurl
+            ? `if(e.key == "ArrowLeft") window.location = "/${metadata.prevurl}"`
+            : ''
+        }
+      });
+    })(jQuery);
+    `,
+        }}
+      />
+    </div>
+  )
+}
+
+function Card({ file, image, title, text, caption }) {
+  return (
+    <div
       css={{
         '@media (min-width: 37.56rem)': {
           width: 'calc(50% - 0.75rem)',
@@ -62,13 +136,13 @@ export function List({ subtags, tag, content, metadata, file, config }) {
         flexDirection: 'column',
       }}
     >
-              <a href={`/${page.file}`}>
+      <a href={`/${file}`}>
         <div
           css={{
             height: 120,
             backgroundColor: '#0288d1',
-                    backgroundImage: page.metadata.image
-                      ? `url('${relURL(page.metadata.image, page.file)}')`
+            backgroundImage: image
+              ? `url('${relURL(image, file)}')`
               : undefined,
             backgroundSize: 'cover',
             backgroundRepeat: 'no-repeat',
@@ -82,7 +156,7 @@ export function List({ subtags, tag, content, metadata, file, config }) {
           height: 50px;
         `}
       >
-                <a href={`/${page.file}`}>
+        <a href={`/${file}`}>
           <h5
             css={{
               textAlign: 'center',
@@ -90,19 +164,11 @@ export function List({ subtags, tag, content, metadata, file, config }) {
               margin: '0 10px',
             }}
           >
-                    {page.metadata.title}
+            {title}
           </h5>
         </a>
       </div>
-              <div css={{ padding: '0px 10px' }}>
-                {page.metadata.perex
-                  ? page.metadata.perex
-                  : page.metadata.perex_e
-                  ? truncate(page.metadata.perex_e)
-                  : page.content
-                  ? truncate(striptags(page.content))
-                  : null}
-              </div>
+      <div css={{ padding: '0px 10px' }}>{text}</div>
       <div css={{ flexGrow: 1 }}></div>
       <div
         css={{
@@ -119,67 +185,17 @@ export function List({ subtags, tag, content, metadata, file, config }) {
             display: 'inline-block',
           }}
         >
-                  {dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
-                  {page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
-                  {page.metadata.author.name}
+          {caption}
         </span>
         <a
           style={{
             textAlign: 'right',
           }}
-                  href={`/${page.file}`}
+          href={`/${file}`}
         >
           Číst&nbsp;dál
         </a>
       </div>
     </div>
-          ))}
-        </div>
-        <Paginator metadata={metadata} file={file} config={config} />
-      </div>
-
-      <div className="hide-on-small-only">
-        {metadata.prevurl && (
-          <div style={{ left: 0 }} className="sidelink sidelink-l">
-            <a href={`/${metadata.prevurl}`}>
-              <div>
-                <SymbolBackward />
-              </div>
-            </a>
-          </div>
-        )}
-        {metadata.nexturl && (
-          <div style={{ right: 0 }} className="sidelink sidelink-r">
-            <a href={`/${metadata.nexturl}`}>
-              <div>
-                <SymbolForward />
-              </div>
-            </a>
-          </div>
-        )}
-      </div>
-
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-    (function($) {
-      $(document).keyup(function(e) {
-        if($("#search-overlay").hasClass("shown")) return;
-        ${
-          metadata.nexturl
-            ? `if(e.key == "ArrowRight") window.location = "/${metadata.nexturl}";`
-            : ''
-        }
-        ${
-          metadata.prevurl
-            ? `if(e.key == "ArrowLeft") window.location = "/${metadata.prevurl}"`
-            : ''
-        }
-      });
-    })(jQuery);
-    `,
-        }}
-      />
-    </div>
   )
 }