Refactor template layout

3 files changed, 58 insertions, 77 deletions

diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index d3c6a56..566f5b0 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,37 +1,3 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path %></title>
-  <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-  <header>
-    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div>branch: <%= it.branch %></div>
-    <div>
-      path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
-      const pathParts = it.path.split('/').filter(p => p);
-      let currentPath = '';
-      for (let i = 0; i < pathParts.length; i++) {
-        const part = pathParts[i];
-        currentPath += (currentPath ? '/' : '') + part;
-        const isLast = i === pathParts.length - 1;
-        if (isLast) {
-          %>/<%= part %><%
-        } else {
-          %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
-        }
-      } %>
-    </div>
-    <% if (it.language) { %>
-      <div>language: <%= it.language %></div>
-    <% } %>
-    <div>size: <%= it.size %> bytes</div>
-  </header>
+<% layout("./layout") %>
 
-  <pre class="blob"><code><%= it.rawContent %></code></pre>
-
-  <footer>Generated by cgithub</footer>
-</body>
-</html>
+<pre class="blob"><code><%= it.rawContent %></code></pre>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
new file mode 100644
index 0000000..8e5d9d9
--- /dev/null
+++ b/cgithub/views/layout.eta
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || 'root' %></title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+  <header>
+    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
+    <div>branch: <%= it.branch %></div>
+    <% if (it.path) { %>
+      <div>
+        path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
+        const pathParts = it.path.split('/').filter(p => p);
+        let currentPath = '';
+        for (let i = 0; i < pathParts.length; i++) {
+          const part = pathParts[i];
+          currentPath += (currentPath ? '/' : '') + part;
+          const isLast = i === pathParts.length - 1;
+          if (isLast) {
+            %>/<%= part %><%
+          } else {
+            %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+          }
+        } %>
+      </div>
+    <% } %>
+    <% if (it.language) { %>
+      <div>language: <%= it.language %></div>
+    <% } %>
+    <% if (it.size !== undefined) { %>
+      <div>size: <%= it.size %> bytes</div>
+    <% } %>
+  </header>
+
+  <%~ it.body %>
+
+  <footer>Generated by cgithub</footer>
+</body>
+</html>
diff --git a/cgithub/views/tree.eta b/cgithub/views/tree.eta
index b49668d..911b7ee 100644
--- a/cgithub/views/tree.eta
+++ b/cgithub/views/tree.eta
@@ -1,42 +1,16 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || 'root' %></title>
-  <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-  <header>
-    <h1><%= it.repo.owner %>/<%= it.repo.name %></h1>
-    <div>branch: <%= it.branch %></div>
-    <% if (it.path) { %>
-      <div>
-        path: <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">root</a><%
-        const pathParts = it.path.split('/').filter(p => p);
-        let currentPath = '';
-        for (const part of pathParts) {
-          currentPath += (currentPath ? '/' : '') + part;
-        %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
-        } %>
-      </div>
-    <% } %>
-  </header>
+<% layout("./layout") %>
 
-  <table>
-    <% for (const item of it.items) { %>
-      <tr>
-        <td>
-          <span class="icon"><%= item.contentType === 'directory' ? '📁' : '📄' %></span>
-          <% if (item.contentType === 'directory') { %>
-            <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
-          <% } else { %>
-            <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
-          <% } %>
-        </td>
-      </tr>
-    <% } %>
-  </table>
-
-  <footer>Generated by cgithub</footer>
-</body>
-</html>
+<table>
+  <% for (const item of it.items) { %>
+    <tr>
+      <td>
+        <span class="icon"><%= item.contentType === 'directory' ? '📁' : '📄' %></span>
+        <% if (item.contentType === 'directory') { %>
+          <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
+        <% } else { %>
+          <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= it.branch %>/<%= item.path %>"><%= item.name %></a>
+        <% } %>
+      </td>
+    </tr>
+  <% } %>
+</table>