More complete UI prototype laid out and ready to get working.

api/handlers.go

@@ -80,6 +80,8 @@ func Setup(app *fiber.App) {
   app.Get("/feed/", Page("feed"))
   app.Get("/post/view/:id/", Page("post/view"))
   app.Get("/post/new/", Page("post/new"))
+  app.Get("/settings/", Page("settings"))
+  app.Get("/u/:user_id", Page("profile"))
 }
 
 func Shutdown() {

pages/login/index.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col items-center p-6">
+<div class="flex flex-col items-center pt-6">
   <form action="/api/login" method="POST">
     <card>
       <top><h2 style="color: white">Login</h2></top>

pages/register/index.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col items-center p-6 min-w-md">
+<div class="flex flex-col pt-6 items-center">
   <form action="/api/register" method="POST">
     <card>
       <top><h2 style="color: white">Register</h2></top>

ssgod.toml

@@ -1,5 +1,5 @@
 views = "pages"
-layout = "pages/layouts/main.html"
+layout = "views/layouts/main.html"
 target = "public"
 watch_delay = "500ms"
 sync_dir = "static"

static/icons/arrow-big-up.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M9 21V10H5l7-7 7 7h-4v11z" />
 </svg>

static/icons/bookmark.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
 </svg>

static/icons/heart.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z" />
 </svg>

static/icons/log-in.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
   <polyline points="10 17 15 12 10 7" />

static/icons/log-out.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
   <polyline points="16 17 21 12 16 7" />

static/icons/message-square.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
 </svg>

static/icons/refresh-cw.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M21 2v6h-6" />
   <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />

static/icons/reply.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <polyline points="9 17 4 12 9 7" />
   <path d="M20 18v-2a4 4 0 0 0-4-4H4" />

static/icons/rss.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M4 11a9 9 0 0 1 9 9" />
   <path d="M4 4a16 16 0 0 1 16 16" />

static/icons/user-plus.svg

@@ -8,6 +8,7 @@
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
+  id="img"
 >
   <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
   <circle cx="9" cy="7" r="4" />

static/input_style.css

@@ -13,8 +13,20 @@ header {
   @apply flex flex-col justify-stretch;
 }
 
+footer {
+  @apply bg-gray-950 text-gray-50 text-lg flex p-1;
+}
+
+@utility sticky-bottom {
+  @apply w-full sticky bottom-0 left-0;
+}
+
 nav {
-  @apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
+  @apply flex justify-center items-center bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
+}
+
+nav > a {
+  @apply flex justify-center items-center pt-1;
 }
 
 code {
@@ -23,16 +35,13 @@ code {
 }
 
 pre {
-  @apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
+  @apply bg-gray-950 border-1 border-gray-600 mb-4 p-1;
 }
 
 pre > code {
   @apply !bg-gray-950 p-1;
 }
 
-footer {
-  @apply bg-gray-950 text-gray-50 text-lg flex p-6;
-}
 
 h1 {
   @apply text-6xl mb-2 mt-4;

static/style.css

@@ -217,6 +217,12 @@
   .visible {
     visibility: visible;
   }
+  .sticky-bottom {
+    position: sticky;
+    bottom: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
+    width: 100%;
+  }
   .static {
     position: static;
   }
@@ -235,12 +241,12 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .\!mb-0 {
     margin-bottom: calc(var(--spacing) * 0) !important;
   }
-  .\!mb-2 {
-    margin-bottom: calc(var(--spacing) * 2) !important;
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -287,9 +293,6 @@
   .h-15 {
     height: calc(var(--spacing) * 15);
   }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
   .max-h-10 {
     max-height: calc(var(--spacing) * 10);
   }
@@ -317,9 +320,6 @@
   .max-w-20 {
     max-width: calc(var(--spacing) * 20);
   }
-  .min-w-md {
-    min-width: var(--container-md);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -386,9 +386,6 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
-  .\!rounded-full {
-    border-radius: calc(infinity * 1px) !important;
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -488,15 +485,15 @@
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
-  .bg-gray-500 {
-    background-color: var(--color-gray-500);
-  }
   .bg-gray-600 {
     background-color: var(--color-gray-600);
   }
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
   .bg-green-400\! {
     background-color: var(--color-green-400) !important;
   }
@@ -509,9 +506,6 @@
   .\!p-4 {
     padding: calc(var(--spacing) * 4) !important;
   }
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
-  }
   .p-0\! {
     padding: calc(var(--spacing) * 0) !important;
   }
@@ -524,12 +518,18 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
-  .p-6 {
-    padding: calc(var(--spacing) * 6);
+  .\!pt-0 {
+    padding-top: calc(var(--spacing) * 0) !important;
+  }
+  .\!pt-1 {
+    padding-top: calc(var(--spacing) * 1) !important;
   }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -691,10 +691,21 @@ header {
   flex-direction: column;
   justify-content: stretch;
 }
+footer {
+  display: flex;
+  background-color: var(--color-gray-950);
+  padding: calc(var(--spacing) * 1);
+  font-size: var(--text-lg);
+  line-height: var(--tw-leading, var(--text-lg--line-height));
+  color: var(--color-gray-50);
+}
 nav {
   display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  justify-content: space-evenly;
   background-color: var(--color-gray-950);
-  padding: calc(var(--spacing) * 6);
   :is(& > *) {
     flex: 1;
   }
@@ -706,6 +717,12 @@ nav {
     color: var(--color-gray-50);
   }
 }
+nav > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: calc(var(--spacing) * 1);
+}
 code {
   speak-as: literal-punctuation;
   display: inline-block;
@@ -714,10 +731,9 @@ code {
 }
 pre {
   margin-bottom: calc(var(--spacing) * 4);
-  border-radius: var(--radius-lg);
   border-style: var(--tw-border-style);
   border-width: 1px;
-  border-color: var(--color-gray-300);
+  border-color: var(--color-gray-600);
   background-color: var(--color-gray-950);
   padding: calc(var(--spacing) * 1);
 }
@@ -725,14 +741,6 @@ pre > code {
   background-color: var(--color-gray-950) !important;
   padding: calc(var(--spacing) * 1);
 }
-footer {
-  display: flex;
-  background-color: var(--color-gray-950);
-  padding: calc(var(--spacing) * 6);
-  font-size: var(--text-lg);
-  line-height: var(--tw-leading, var(--text-lg--line-height));
-  color: var(--color-gray-50);
-}
 h1 {
   margin-top: calc(var(--spacing) * 4);
   margin-bottom: calc(var(--spacing) * 2);

views/feed.html

@@ -1,3 +1,33 @@
+{{define "post-action-bar"}}
+<bar class="!p-0 !pt-1 mt-4 bg-gray-800 justify-evenly rounded-full">
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width="2rem"
+    height="2rem"
+    viewBox="0 0 2rem 2rem">
+    <use href="/icons/reply.svg#img" />
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width="2rem"
+    height="2rem"
+    viewBox="0 0 2rem 2rem">
+    <use href="/icons/refresh-cw.svg#img" />
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width="2rem"
+    height="2rem"
+    viewBox="0 0 2rem 2rem">
+    <use href="/icons/heart.svg#img" />
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width="2rem"
+    height="2rem"
+    viewBox="0 0 2rem 2rem">
+    <use href="/icons/bookmark.svg#img" />
+  </svg>
+</bar>
+{{end}}
+
+
 <div class="p-1">
   <bar class="justify-evenly">
     <shape class="tiny rounded-full">Avatar</shape>
@@ -20,12 +50,7 @@
       <p><a href="/post/view/1/">Chillwave bruh cred, succulents skateboard activated charcoal shaman freegan. Hell of four loko succulents, tote bag affogato asymmetrical disrupt selvage. 3 wolf moon post-ironic bodega boys fanny pack big mood godard offal cold-pressed sriracha before they sold out pabst mukbang readymade.</a></p>
     </block>
 
-    <bar class="!p-1 mt-2 bg-gray-400 justify-evenly rounded-full">
-      <img src="/icons/reply.svg" />
-      <img src="/icons/refresh-cw.svg" />
-      <img src="/icons/heart.svg" />
-      <img src="/icons/bookmark.svg" />
-    </bar>
+    {{template "post-action-bar"}}
   </block>
 
   <block class="!gap-0 border-t-1 border-gray-600">
@@ -36,13 +61,13 @@
 
     <block class="!p-0 gap-2">
       <p>Update the docs to document almost everything.</p>
-      <details class="!p-1">
-        <summary>Summary of changes.</summary>
-<pre><code>for(i = u in whatever) {
-print("whatever")
+
+<pre class="!mb-0"><code>for(i = u in whatever) {
+  print("whatever")
 }</code></pre>
-      </details>
     </block>
+
+    {{template "post-action-bar"}}
   </block>
 
   <block class="!gap-0 border-t-1 border-gray-600">
@@ -60,5 +85,7 @@ print("whatever")
     <block class="!p-0 gap-2">
       <p><a href="/post/view/1/">Chillwave bruh cred, succulents skateboard activated charcoal shaman freegan. Hell of four loko succulents, tote bag affogato asymmetrical disrupt selvage. 3 wolf moon post-ironic bodega boys fanny pack big mood godard offal cold-pressed sriracha before they sold out pabst mukbang readymade.</a></p>
     </block>
+
+    {{template "post-action-bar"}}
   </block>
 </div>

views/layouts/main.html

@@ -12,7 +12,7 @@
     <script src="/js/code.js"></script>
     <title>ZedShaw.games</title>
   </head>
-  <body data-testid="{{.PageId}}">
+  <body id="top" data-testid="{{.PageId}}">
   <header>
     <nav>
       <a id="home" href="/">
@@ -23,9 +23,22 @@
           <use href="/icons/home.svg#home" />
         </svg>
       </a>
-      <a id="register" href="/feed/">Feed</a>
-      <a id="register" href="/register/">Register</a>
-      <a id="login" href="/login/">Login</a>
+      <a id="register" href="/register/">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/user-plus.svg#img" />
+        </svg>
+      </a>
+      <a id="login" href="/login/">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/log-in.svg#img" />
+        </svg>
+      </a>
     </nav>
   </header>
 
@@ -33,17 +46,49 @@
     {{embed}}
   </main>
 
-  <footer>
-    <div class="flex-1">
-      <img class="size-12 shrink-0" src="/logo.png" />
-      <div>
-        <p>Blah blah about me.</p>
-      </div>
-    </div>
-    <div class="flex-1">
-      <h3 class="text-3xl">Other Projects</h3>
-      <p>Some other links to stuff.</p>
-    </div>
+  <footer class="sticky-bottom">
+    <nav>
+      <a href="/feed/">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/home.svg#home" />
+        </svg>
+      </a>
+      <a href="/feed/">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/rss.svg#img" />
+        </svg>
+      </a>
+      <a href="#top">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/arrow-big-up.svg#img" />
+        </svg>
+      </a>
+      <a href="/post/new/">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/message-square.svg#img" />
+        </svg>
+      </a>
+      <a href="/settings/">
+        <svg xmlns="http://www.w3.org/2000/svg"
+          width="2rem"
+          height="2rem"
+          viewBox="0 0 2rem 2rem">
+          <use href="/icons/settings.svg#settings" />
+        </svg>
+      </a>
+    </nav>
   </footer>
   </body>
 </html>

views/profile.html

@@ -0,0 +1,3 @@
+<h1>Profile Page</h1>
+
+<p>This is where they are visible to the world.</p>

views/settings.html

@@ -0,0 +1,3 @@
+<h1>Settings</h1>
+
+<p>This is where your profile page is configured.</p>