🐙 Templated web page generator for your git repositories
git clone https://github.com/m-col/gitja
Files | Refs | Readme | License
Commit 3dfb0991b63f62ce6d5bb1f064a5c03612f67e75
Parent: 92ee1fc79db658b8431f2e352e2dd1e3d8800466
Author: mcol <mcol@posteo.net>
Date: 2021-11-28 12:06:10 +0000
Committer: mcol <mcol@posteo.net>
Committed: 2021-11-28 12:15:33 +0000

Redesign docs template

templates/docs/template.html.include Modified

@@ -4,12 +4,33 @@
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{% block title %}{% endblock %}</title>
+    <title>🐙 {{ name }} - {% block title %}{% endblock %}</title>
     <link rel="stylesheet" type="text/css" href="{{ host }}/style.css"/>
     <link rel="icon" type="image/png" href="/favicon.png"/>
   </head>
+
   <body>
-  {% block body %}
-  {% endblock %}
+    <a id="heada" href="{{ host }}">
+      <header>
+        <h1 id="title">{{ name }}</h1>
+        <h2 id="desc">{{ description }}</h2>
+      </header>
+    </a>
+
+    <div id="nav">
+      {% set url = concat("https://github.com/m-col/", name) -%}
+      <p id="url">git clone <a href="{{ url }}">{{ url }}</a></p>
+
+      <a href="{{ host }}">Home</a> |
+      <a href="{{ host }}/{{ name }}/tree.html">Files</a> |
+      <a href="{{ host }}/{{ name }}/refs.html">Refs</a> |
+      <a href="{{ host }}/{{ name }}/file/{{ readme.href }}">Readme</a> |
+      <a href="{{ host }}/{{ name }}/file/{{ license.href }}">License</a>
+    </div>
+
+    <div id="content">
+      {% block body %}
+      {% endblock %}
+    </div>
   </body>
 </html>

templates/docs/style.css Modified

@@ -0,0 +1,92 @@
+@viewport {
+    width: device-width;
+    zoom: 1.0;
+}
+
+html {
+    color: #000;
+    font-family: monospace;
+    font-size: 1em;
+    background: #5d479d;
+}
+
+body {
+    margin: 0 auto;
+    max-width: 900px;
+    background: #fff;
+}
+
+header {
+    padding: 20px;
+    background-color: #fcfaff;
+}
+
+
+#heada:link,
+#heada:visited,
+#heada:hover,
+#heada:active {
+    text-decoration: none;
+    color: black;
+}
+
+#content {
+    padding: 20px;
+}
+
+p {
+    margin: 15px 0;
+}
+
+::selection {
+    background: #5D479D;
+    color: #fff;
+}
+
+#nav {
+    padding: 0 20px;
+}
+
+#docs h2 {
+    text-decoration: underline #333;
+    padding-top: 1.5em;
+}
+
+#docs h1 {
+    text-decoration: underline #333;
+}
+
+#docs h3 {
+    text-decoration: underline #aaa;
+    padding: 0.5em 0;
+}
+
+#docs p {
+    font-family: sans;
+}
+
+p code {
+    font-weight: bolder;
+}
+
+p code,
+#docs pre {
+    background: #eee;
+}
+
+pre {
+    padding: 0.6em;
+}
+
+td, th {
+    padding: 0.1em 1em;
+    text-align: left;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+tr:nth-child(even) {
+    background-color: #fcfaff;
+}

templates/docs/repo/tree.html Modified

@@ -1,27 +1,23 @@
 {% extends "../template.html.include" %}
 
-{%- block title -%}
-{{ name }} - target
-{%- endblock -%}
+{%- block title %}tree{% endblock -%}
 
 {% block body %}
-<div id="content">
-  <table id="files">
-    <thead>
-      <tr>
-        <td><b>Mode</b></td>
-        <td><b>Name</b></td>
-      </tr>
-    </thead>
+<table id="files">
+  <thead>
+    <tr>
+      <td><b>Mode</b></td>
+      <td><b>Name</b></td>
+    </tr>
+  </thead>
 
-    <tbody>
-      {% for file in tree %}
-      <tr>
-        <td>{{ file.mode_symbolic }}</td>
-        <td><a href="{{ host }}/{{ name }}/file/{{ file.href }}">{{ file.path }}</a></td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+  <tbody>
+    {% for file in tree %}
+    <tr>
+      <td>{{ file.mode_symbolic }}</td>
+      <td><a href="{{ host }}/{{ name }}/file/{{ file.href }}">{{ file.path }}</a></td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
 {% endblock %}

templates/docs/repo/refs.html Modified

@@ -1,35 +1,31 @@
 {% extends "../template.html.include" %}
 
-{%- block title -%}
-{{ name }} - Refs
-{%- endblock -%}
+{%- block title %}Refs{% endblock -%}
 
 {% block body %}
-<div id="content">
-  <h2>Branches</h2>
-  <table id="branches">
-    <thead>
-      <tr><td><b>Name</b></td><td colspan="2"><b>Last commit</b></td><td><b>Author</b></td></tr>
-    </thead>
-    <tbody>
-      {% for branch in branches %}
-      <tr><td>{{ branch.name }}</td><td>{{ branch.authored[:16] }}</td><td>{{ branch.title }}</td><td>{{ branch.author }}</td></tr>
-      {% endfor %}
-    </tbody>
-  </table>
+<h2>Branches</h2>
+<table id="branches">
+  <thead>
+    <tr><td><b>Name</b></td><td colspan="2"><b>Last commit</b></td><td><b>Author</b></td></tr>
+  </thead>
+  <tbody>
+    {% for branch in branches %}
+    <tr><td>{{ branch.name }}</td><td>{{ branch.authored[:16] }}</td><td>{{ branch.title }}</td><td>{{ branch.author }}</td></tr>
+    {% endfor %}
+  </tbody>
+</table>
 
-  <br>
+<br>
 
-  <h2>Tags</h2>
-  <table id="tags">
-    <thead>
-      <tr><td><b>Name</b></td><td colspan="2"><b>Last commit</b></td><td><b>Author</b></td></tr>
-    </thead>
-    <tbody>
-      {% for tag in tags %}
-      <tr><td>{{ tag.name }}</td><td>{{ tag.authored[:16] }}</td><td>{{ tag.title }}</td><td>{{ tag.author }}</td></tr>
-      {% endfor %}
-    </tbody>
-  </table>
-</div>
+<h2>Tags</h2>
+<table id="tags">
+  <thead>
+    <tr><td><b>Name</b></td><td colspan="2"><b>Last commit</b></td><td><b>Author</b></td></tr>
+  </thead>
+  <tbody>
+    {% for tag in tags %}
+    <tr><td>{{ tag.name }}</td><td>{{ tag.authored[:16] }}</td><td>{{ tag.title }}</td><td>{{ tag.author }}</td></tr>
+    {% endfor %}
+  </tbody>
+</table>
 {% endblock %}

templates/docs/repo/log.html Modified

@@ -1,27 +1,25 @@
 {% extends "../template.html.include" %}
 
-{%- block title -%}
-gitserve - log
-{%- endblock -%}
+{%- block title %}log{% endblock -%}
 
 {% block body %}
 <table id="log">
-	<thead>
-		<tr>
-			<td><b>Date</b></td>
-			<td><b>Commit message</b></td>
-			<td><b>Author</b></td>
-		</tr>
-	</thead>
+  <thead>
+    <tr>
+      <td><b>Date</b></td>
+      <td><b>Commit message</b></td>
+      <td><b>Author</b></td>
+    </tr>
+  </thead>
 
-	<tbody>
-		{% for commit in commits[:50] %}
-		<tr>
-			<td>{{ commit.authored[:16] }}</td>
-			<td><a href="{{ host }}/{{ name }}/commit/{{ commit.id }}.html">{{ commit.title }}</a></td>
-			<td>{{ commit.author }}</td>
-		</tr>
-		{% endfor %}
-	</tbody>
+  <tbody>
+    {% for commit in commits[:50] %}
+    <tr>
+      <td>{{ commit.authored[:16] }}</td>
+      <td><a href="{{ host }}/{{ name }}/commit/{{ commit.id }}.html">{{ commit.title }}</a></td>
+      <td>{{ commit.author }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
 </table>
 {% endblock %}

templates/docs/repo/index.html Modified

@@ -1,14 +1,8 @@
 {% extends "../template.html.include" %}
 
-{%- block title -%}
-gitserve
-{%- endblock -%}
+{%- block title %}docs{% endblock -%}
 
 {% block body %}
-<h1>gitserve</h1>
-<h2>{{ description }}</h2>
-
-
 <div id="docs"></div>
 <div id="src" hidden>
 {% set docs = filter(tree, (f) -> f.path == "DOCUMENTATION.md")[0] %}
@@ -17,12 +11,17 @@
 
 <script type="text/javascript" src="{{ host }}/showdown.min.js"></script>
 <script>
-	showdown.setFlavor('github');
-	var converter = new showdown.Converter(
-			{tables: true, tablesHeaderId: true, ghMentions: true, emoji: true, ellipsis: false}
-	);
-	document.getElementById('docs').innerHTML =
-		converter.makeHtml(document.getElementById('src').innerHTML);
+  showdown.setFlavor('github');
+  var converter = new showdown.Converter({
+      tables: true,
+      tablesHeaderId: true,
+      ghCompatibleHeaderId: true,
+      ghMentions: true,
+      emoji: true,
+      ellipsis: false,
+      simpleLineBreaks: false,
+  });
+  document.getElementById('docs').innerHTML =
+    converter.makeHtml(document.getElementById('src').innerHTML);
 </script>
-
 {% endblock %}

templates/docs/repo/file.html Modified

@@ -1,37 +1,33 @@
 {% extends "../template.html.include" %}
 
-{%- block title -%}
-{{ name }} - {{ file }}
-{%- endblock -%}
+{%- block title %}{{ file }}{% endblock -%}
 
 {% block body %}
-<div id="content">
-  <p>{{ file.mode_symbolic }} {{ file }}</p><hr>
+<p>{{ file.mode_symbolic }} {{ file }}</p><hr>
 
 {% if file.is_directory %}
-  <table id="files">
-    <thead>
-      <tr>
-        <td><b>Mode</b></td>
-        <td><b>Name</b></td>
-      </tr>
-    </thead>
+<table id="files">
+  <thead>
+    <tr>
+      <td><b>Mode</b></td>
+      <td><b>Name</b></td>
+    </tr>
+  </thead>
 
-    <tbody>
-      {% for child in file.contents %}
-      <tr>
-        <td>{{ child.mode_symbolic }}</td>
-        <td><a href="{{ host }}/{{ name }}/file/{{ child.href }}">{{ child.path }}</a></td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
+  <tbody>
+    {% for child in file.contents %}
+    <tr>
+      <td>{{ child.mode_symbolic }}</td>
+      <td><a href="{{ host }}/{{ name }}/file/{{ child.href }}">{{ child.path }}</a></td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
 {% else %}
   <pre id="blob">
 {% for line in split(file.contents, '\n') %}
 <a href="#l{{ loop.index }}" class="line" id="l{{ loop.index }}">{{ printf("%7v", loop.index) }}</a> {{ line }}
 {% endfor %}
 {% endif %}
-  </pre>
-</div>
+</pre>
 {% endblock %}

templates/docs/repo/commit.html Modified

@@ -1,12 +1,9 @@
 {% extends "../template.html.include" %}
 
-{%- block title -%}
-{{ name }} - {{ commit.title }}
-{%- endblock -%}
+{%- block title %}{{ commit.title }}{% endblock -%}
 
 {% block body %}
-<div id="content">
-  <pre><b>Commit</b> <a href="{{ host }}/{{ name }}/commit/{{ commit.id }}.html">{{ commit.id }}</a>
+<pre><b>Commit</b> <a href="{{ host }}/{{ name }}/commit/{{ commit.id }}.html">{{ commit.id }}</a>
 <b>Parent:</b> <a href="{{ host }}/{{ name }}/commit/{{ commit.parent }}.html">{{ commit.parent }}</a>
 <b>Author:</b> {{ commit.author }} &lt;<a href="mailto:{{ commit.author_email }}">{{ commit.author_email }}</a>&gt;
 <b>Date:</b> {{ commit.authored }}
@@ -15,5 +12,4 @@
 
 {{ commit.message }}
 </pre>
-</div>
 {% endblock %}