templates: adding repo/details template

author: Katharina Fey <kookie@spacekookie.de> 2020-06-14 15:22:10 +0200
committer: Katharina Fey <kookie@spacekookie.de> 2020-06-14 15:22:10 +0200
commit: 67ad3b7a26ed0dc99f3324011fa8e5ed316a655a (patch)
tree: db9960b36cebbe97d4eadd4592b9312837df1d65
parent: 270cb703ebdc89177583281a008080bc04fae5ef (diff)
5 files changed, 344 insertions, 44 deletions
diff --git a/README b/README
index 03c661f..ed972cd 100644
--- a/README
+++ b/README
@@ -12,6 +12,40 @@
 A git web frontend that wants to hug your code.
 
 
+Why?
+----
+
+This is a very good first question, and one that I think is important
+to answer before getting more into the project.  Whenever I brought up
+this project during the creation of it, most people would react with
+"have you tried...", followed by some git web software, such as
+gitlab, gittea, and many many more.  But there is a reason why I stuck
+with octopus and the design ideas I had for it.
+
+Fundamentally it's about decentralisation.  The internet is a pretty
+big place (allegedly), but a lot of the services that people use are
+very centralised by a single company or even server.  If this company
+or server goes away, so does valuable knowledge.  There are many ways
+to create more decentralised systems, and one aspect of this for me,
+is code repos.
+
+Git is by it's nature decentralised, meaning that it doesn't require
+an "upstream" or canonical server to function.  Theoretically you
+could use git to exchange code patches with people without the
+internet.  Yet, a lot of people's perception of git is one that is
+dictated by the workflows on github and gitlab: centralised into a
+single service.  Many git web frontends mirror this workflow, because
+after all, it is what people want and love.
+
+However, it has some flaws (which would take too long to elaborate
+here), and for octopus I had something else in mind.  Instead of
+replicating the same mistakes, I took much more inspiration from cgit,
+which is used and loved by many today.  octopus is a re-imagining of
+cgit, trying to improve the UX and maintainability where possible,
+adding new features, but mostly staying true to it's core: a simple
+git web service, that doesn't lock you into a vendor, or server.
+
+
 Configuration
 -------------
 
diff --git a/static/main.css b/static/main.css
index 33240b8..b567240 100644
--- a/static/main.css
+++ b/static/main.css
@@ -4,6 +4,15 @@
 
 body {
     background: #fafafa; /* There's fa and there's antifa! */
+    font-family: monospace;
+}
+    
+.tagline-container h1 {
+    font-size: 2.5em;
+}
+
+.tagline-container p {
+    font-size: 1.25em;
 }
 
 a {
@@ -11,6 +20,11 @@ a {
     color: #444;
 }
 
+.subheader a, .repo-navigation a {
+    font-family: monospace;
+    font-size: 1.5em;
+}
+
 a:hover, a:active {
     text-decoration: underline;
 }
@@ -22,7 +36,7 @@ a:hover, a:active {
 
 .container {
     display: grid;
-    max-width: 120ch;
+    max-width: 200ch;
     margin: 2em;
 }
 
@@ -67,9 +81,46 @@ a:hover, a:active {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
-    background: #DDD;
+    /* background: #55EEFF; */
 }
 
 .repo-navigation > .nav-item {
     padding: 0.25em 2em;
 }
+
+.repo-navigation > .nav-active {
+    background: #EEE;
+    border: #333 1px solid;
+}
+
+.readme {
+    padding-top: 5ch;
+    padding-left: 25ch;
+    font-size: 1.25em;
+}
+
+.details-grid {
+    display: grid;
+    grid-template-columns: 2fr 4fr repeat(3, 1fr);
+    align-content: center; 
+    justify-content: center;
+    
+    padding: 5ch 15ch;
+    font-size: 1.2em;
+}
+
+.details-grid .divider {
+    padding: 5ch 0;
+    grid-column-start: 1;
+    grid-column-end: 6;
+}
+
+.details-grid > .details-span {
+    grid-column-start: 4;
+    grid-column-end: 6;
+}
+
+.details-grid p, .details-grid a {
+    padding: 0;
+    margin: 1px;
+}
diff --git a/templates/repo.html b/templates/repo.html
deleted file mode 100644
index 0eb17c1..0000000
--- a/templates/repo.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>octopus | /spacekookie/octopus</title>
-    <link href="../static/main.css" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <div class="container">
-      <div class="tagline-container">
-        <img class="repo-logo" src="../static/fakeavi.png" />
-        <h1><a href="">spacekookie</a> / <a href="">octopus</a></h1>
-        <p>A git web frontend that wants to hug your code</p>
-        <div class="starbox">
-          <a href="">Clone</a>
-          <a href="">Star</a>
-          <a href="">RSS</a>
-        </div>
-      </div> <!-- tagline container -->
-      <div class="subheader">
-        
-        <a href="">141 commits</a>
-        <a href="">1 branch</a>
-        <a href="">0 tags</a>
-        <a href="">1 contributor</a>
-        <a href="">size: 13.12M</a>
-        <input id="repo-search" type="search" placeholder="Search repository" />
-        <!-- <label for="repo-search">Search for files in the repository</label> -->
-      </div> <!-- subheader -->
-      <hr />
-      <div class="repo-navigation">
-        <a href="" class="nav-item">about</a>
-        <a href="" class="nav-item">details</a>
-        <a href="" class="nav-item">files</a>
-        <a href="" class="nav-item">log</a>
-        <a href="" class="nav-item"> patches</a>
-        <a href="" class="nav-item">contribute</a>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/templates/repo/about.html b/templates/repo/about.html
new file mode 100644
index 0000000..b98edbd
--- /dev/null
+++ b/templates/repo/about.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>octopus | /spacekookie/octopus</title>
+    <link href="/static/main.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div class="container">
+      <div class="tagline-container">
+        <img class="repo-logo" src="/static/fakeavi.png" />
+        <h1><a href="">spacekookie</a> / <a href="">octopus</a></h1>
+        <p>🐙 It's a water animal</p>
+        <div class="starbox">
+          <a href="">Clone</a>
+          <a href="">Star</a>
+          <a href="">RSS</a>
+        </div>
+      </div> <!-- tagline container -->
+      <div class="subheader">
+        
+        <a href="">141 commits</a>
+        <a href="">1 branch</a>
+        <a href="">0 tags</a>
+        <a href="">1 contributor</a>
+        <a href="">size: 13.12M</a>
+        <input id="repo-search" type="search" placeholder="Search repository" />
+        <!-- <label for="repo-search">Search for files in the repository</label> -->
+      </div> <!-- subheader -->
+      <hr />
+      <div class="repo-navigation">
+        <a href="about.html" class="nav-item nav-active">about</a>
+        <a href="details.html " class="nav-item">details</a>
+        <a href="" class="nav-item">files</a>
+        <a href="" class="nav-item">log</a>
+        <a href="" class="nav-item"> patches</a>
+        <a href="" class="nav-item">contribute</a>
+      </div>
+
+      <pre class="readme">
+       .'.'
+      .'-'.
+  .  (  o O)
+   \_ `  _,   _
+-.___'.) ( ,-'
+     '-.O.'-..-..       octopus git web frontend
+ ./\/\/ | \_.-._
+        ;
+     ._/
+
+
+A git web frontend that wants to hug your code.
+
+
+Why?
+----
+
+This is a very good first question, and one that I think is important
+to answer before getting more into the project.  Whenever I brought up
+this project during the creation of it, most people would react with
+"have you tried...", followed by some git web software, such as
+gitlab, gittea, and many many more.  But there is a reason why I stuck
+with octopus and the design ideas I had for it.
+
+Fundamentally it's about decentralisation.  The internet is a pretty
+big place (allegedly), but a lot of the services that people use are
+very centralised by a single company or even server.  If this company
+or server goes away, so does valuable knowledge.  There are many ways
+to create more decentralised systems, and one aspect of this for me,
+is code repos.
+
+Git is by it's nature decentralised, meaning that it doesn't require
+an "upstream" or canonical server to function.  Theoretically you
+could use git to exchange code patches with people without the
+internet.  Yet, a lot of people's perception of git is one that is
+dictated by the workflows on github and gitlab: centralised into a
+single service.  Many git web frontends mirror this workflow, because
+after all, it is what people want and love.
+
+However, it has some flaws (which would take too long to elaborate
+here), and for octopus I had something else in mind.  Instead of
+replicating the same mistakes, I took much more inspiration from cgit,
+which is used and loved by many today.
+
+Octopus is a re-imagining of cgit, trying to improve the UX and
+maintainability where possible, adding new features, but mostly
+staying true to it's core: a simple git web service, that doesn't lock
+you into a vendor, or server.
+
+Configuration
+-------------
+
+octopus is easy to configure and run, even on systems that don't give
+you priviledged system access.  The main server binary is configured
+primarily with a few environment variables, and an app config.
+
++ OCTOPUS_CONFIG should contain the path of the main configuration
+
++ OCTOPUS_SSL_KEY can optionally be set to the path of a certificate key
+
++ OCTOPUS_SSL_CERT can optionally be set to the path of a certificate
+
+
+The main configuration file is written in yaml, and outlines things
+like the application domain, repo paths, and added modules.  Because
+octopus is vory modular, you can only depend on certain features.
+
+
+---
+app_path: git.octopus.example
+port: 8080
+handle_ssl: false
+cache_path: /var/cache/octopus
+repo_path: /var/lib/octopus/repos
+repo_discovery: false  # Disables automatic config loading from repo_path
+                       # and instead let's you set a static set of repos
+                       # in the section below
+repos:
+  - octopus:
+      description: "🐙 It's a water animal"
+      category: "/"
+  - libkookie:
+      description: "My personal nix expressions"
+      category: "/nix"
+
+
+      </pre>
+    </div>
+  </body>
+</html>
diff --git a/templates/repo/details.html b/templates/repo/details.html
new file mode 100644
index 0000000..ddcc761
--- /dev/null
+++ b/templates/repo/details.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>octopus | /spacekookie/octopus</title>
+    <link href="/static/main.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div class="container">
+      <div class="tagline-container">
+        <img class="repo-logo" src="/static/fakeavi.png" />
+        <h1><a href="">spacekookie</a> / <a href="">octopus</a></h1>
+        <p>🐙 It's a water animal</p>
+        <div class="starbox">
+          <a href="">Clone</a>
+          <a href="">Star</a>
+          <a href="">RSS</a>
+        </div>
+      </div> <!-- tagline container -->
+      <div class="subheader">
+        
+        <a href="">141 commits</a>
+        <a href="">1 branch</a>
+        <a href="">0 tags</a>
+        <a href="">1 contributor</a>
+        <a href="">size: 13.12M</a>
+        <input id="repo-search" type="search" placeholder="Search repository" />
+        <!-- <label for="repo-search">Search for files in the repository</label> -->
+      </div> <!-- subheader -->
+      <hr />
+      <div class="repo-navigation">
+        <a href="about.html" class="nav-item">about</a>
+        <a href="details.html" class="nav-item nav-active">details</a>
+        <a href="" class="nav-item">files</a>
+        <a href="" class="nav-item">log</a>
+        <a href="" class="nav-item"> patches</a>
+        <a href="" class="nav-item">contribute</a>
+      </div>
+
+      <div class="details-grid">
+        <h3>Branch</h3>
+        <h3>Commit message</h3>
+        <h3>Author</h3>
+        <h3 class="details-span">Date</h3>
+
+        <a href="">fn-verify-9324832</a>
+        <a href="">Updating to actix 2.0.0 and adding 404 handler</a>
+        <p>Katharina Fey</p>
+        <p class="details-span">5 months ago</p>
+        
+        <a href="">master</a>
+        <a href="">Rebuilding the entire htlm and css styles</a>
+        <p>Katharina Fey</p>
+        <p class="details-span">18 hours ago</p>
+
+        <!-- Switch to last commits -->
+        <h3>Commit Hash</h3>
+        <h3>Commit message</h3>
+        <h3>Author</h3>
+        <h3>Date</h3>
+        <h3>Lines</h3>
+
+        <a href="">270cb70</a>
+        <a href="">Rebuilding the entire htlm and css stiles</a>
+        <p>Katharina Fey</p>
+        <p>19 hours ago</p>
+        <p>-214/+75</p>
+
+        <a href="">5db4c57</a>
+        <a href="">Updating to actix 2.0.0 and adding 404 handler</a>
+        <p>Katharina Fey</p>
+        <p>2020-01-23</p>
+        <p>-610/+455</p>
+
+        <a href="">5e16c64</a>
+        <a href="">Adding project documentation and roadmap planning</a>
+        <p>Katharina Fey</p>
+        <p>2020-01-23</p>
+        <p>-3/+61</p>
+
+        <a href="">8b38bdd</a>
+        <a href="">data: adding a small wrapper around libgit2</a>
+        <p>Katharina Fey</p>
+        <p>2019-12-29</p>
+        <p>-36/+32</p>
+
+        <a href="">c896fcd</a>
+        <a href="">material-ish design with gitea-style tabs</a>
+        <p>Milan Pässler</p>
+        <p>2019-12-29</p>
+        <p>-102/+169</p>
+        
+        <a href="">f2f49bb</a>
+        <a href="">material-ish design with gitea-style tabs</a>
+        <p>Milan Pässler</p>
+        <p>2019-12-29</p>
+        <p>-1/+2</p>
+
+        <a href="">4be56ee</a>
+        <a href="">Adding a small limgit2 example usage</a>
+        <p>Katharina Fey</p>
+        <p>2019-12-29</p>
+        <p>-2/+17</p>
+
+        <a href="">81ae20b</a>
+        <a href="">Refactoring basic project structure</a>
+        <p>Katharina Fey</p>
+        <p>2019-12-28</p>
+        <p>-76/+209</p>
+
+        <a href="">baf496a</a>
+        <a href="">initial styling</a>
+        <p>Milan Pässler</p>
+        <p>2019-12-13</p>
+        <p>-38/+149</p>
+
+        <a href="">d43a02e</a>
+        <a href="">Adding AGPL-3.0 license</a>
+        <p>Katharina Fey</p>
+        <p>2019-12-10</p>
+        <p>-0/+661</p>
+      </div>
+    </div>
+  </body>
+</html>
author	Katharina Fey <kookie@spacekookie.de>	2020-06-14 15:22:10 +0200
committer	Katharina Fey <kookie@spacekookie.de>	2020-06-14 15:22:10 +0200
commit	67ad3b7a26ed0dc99f3324011fa8e5ed316a655a (patch)
tree	db9960b36cebbe97d4eadd4592b9312837df1d65
parent	270cb703ebdc89177583281a008080bc04fae5ef (diff)