Merge pull request #123 from johnholdun/update-theme

Update theme
ckolderup · Sep 24, 2023 · d1e24bd · d1e24bd
2 parents 29d4b80 + f277022
commit d1e24bd
Show file tree

Hide file tree

Showing 19 changed files with 424 additions and 268 deletions.
diff --git a/public/style.css b/public/style.css
diff --git a/server.js b/server.js
@@ -94,6 +94,9 @@ const hbs = create({
     ifThisTag(tag, path, options) {
       return path === `/tagged/${tag}` ? options.fn(this) : options.inverse(this);
     },
+    eq(a, b, options) {
+      return a === b ? options.fn(this) : options.inverse(this);
+    },
   },
   partialsDir: './src/pages/partials',
   extname: '.hbs',

diff --git a/src/pages/about.hbs b/src/pages/about.hbs
@@ -50,4 +50,4 @@
   and
   <a href="https://public-sans.digital.gov/">
     Public Sans</a>.
-  </p>
+</p>
diff --git a/src/pages/admin/bookmarks.hbs b/src/pages/admin/bookmarks.hbs
@@ -11,6 +11,13 @@
   individually.
 </p>
 <form action="/bookmark/multiadd" method="post">
-  <textarea name="urls"></textarea>
-  <button type="submit">Import</button>
+  <div class="form-group">
+    <label for="multiadd_urls">
+      URLs (one per line)
+    </label>
+    <textarea id="multiadd_urls" name="urls"></textarea>
+  </div>
+  <div class="form-group">
+    <button type="submit">Import</button>
+  </div>
 </form>
diff --git a/src/pages/admin/data.hbs b/src/pages/admin/data.hbs
@@ -1,19 +1,18 @@
 <h3>
   Download bookmarks
 </h3>
-<p style="margin: 0;">
+<p>
   You can download your bookmarks as:
 </p>
-  <ul>
-    <li><a href="/admin/bookmarks.db">sqlite database</a></li>
-    <li><a href="/admin/bookmarks.csv">csv</a></li>
-  </ul>
+<ul>
+  <li><a href="/admin/bookmarks.db">sqlite database</a></li>
+  <li><a href="/admin/bookmarks.csv">csv</a></li>
+</ul>
 <p>
-  It's less likely you'll need this, but you can also download your
+  It’s less likely you’ll need this, but you can also download your
   activitypub.db
   <a href="/admin/activitypub.db">here</a>.
 </p>
-
 <form action="/admin/reset" method="post"
   onsubmit="return confirm('Last chance! This will DELETE ALL YOUR BOOKMARKS. Are you sure you want to do this?')">
   <h3>

diff --git a/src/pages/admin/following.hbs b/src/pages/admin/following.hbs
@@ -1,9 +1,5 @@
-<h3>
-  Manage your federated follows
-</h3>
-
-<div>
-  <form action="/admin/following/follow" method="POST">
+<form action="/admin/following/follow" method="POST">
+  <div class="form-group">
     <label for="actor">
       Enter username to follow
     </label>
@@ -13,26 +9,26 @@
       name="actor"
       placeholder="@updates@postmarks.glitch.me"
     />
+  </div>
+  <div class="form-group">
     <button type="submit">
       Follow
     </button>
-  </form>
-</div>
+  </div>
+</form>
 
-<div>
-  {{#each following}}
-    <div class="following">
-      <div class="info">
-        <a href="{{this}}">
-          {{this}}
-        </a>
-      </div>
-      <div class="actions">
-        <form action="/admin/following/unfollow" method="POST">
-          <input type="hidden" name="actor" value="{{this}}" />
-          <button type="submit">Unfollow</button>
-        </form>
-      </div>
+{{#each following}}
+  <div class="following">
+    <div class="info">
+      <a href="{{this}}">
+        {{this}}
+      </a>
+    </div>
+    <div class="actions">
+      <form action="/admin/following/unfollow" method="POST">
+        <input type="hidden" name="actor" value="{{this}}" />
+        <button type="submit">Unfollow</button>
+      </form>
     </div>
-  {{/each}}
-</div>
+  </div>
+{{/each}}
diff --git a/src/pages/bookmark.hbs b/src/pages/bookmark.hbs
@@ -1,8 +1,18 @@
-{{> show_bookmark bookmark=bookmark }}
+<h1 class="bookmark-permalink-title">
+  <a href="{{bookmark.url}}">
+    {{bookmark.title}} <span class="external-link">↗</span>
+  </a>
+</h1>
 
-<h2>Comments</h2>
-{{#each comments }}
-  {{> show_comment comment=this }}
-{{else }}
-  No comments yet!
-{{/each}}
+{{> show_bookmark bookmark=bookmark permalink=true}}
+
+{{#if comments}}
+  <h2>
+    {{bookmark.comment_count}}
+    {{pluralize bookmark.comment_count "comment" "comments"}}
+  </h2>
+
+  {{#each comments }}
+    {{> show_comment comment=this }}
+  {{/each}}
+{{/if}}
diff --git a/src/pages/layouts/main.hbs b/src/pages/layouts/main.hbs
@@ -15,10 +15,10 @@
   <body>
     <div class="header">
       <div class="logo">
-        <img src="/postmarks-logo-small.png" />
-      </div>
-      <div class="title">
-        <h1><a href="/">{{siteName}}</a></h1>
+        <a href="/">
+          <img src="/postmarks-logo-small.png" />
+          {{siteName}}
+        </a>
       </div>
       <div class="menu">
         <a href="/about">About</a>
@@ -34,11 +34,17 @@
       </div>
     </div>
     <div class="wrapper">
-      {{> tag_list tags=tags}}
       <div class="content" role="main">
-        <h2>{{title}}</h2>
+        {{^if hideTitle}}
+          <h1>{{title}}</h1>
+        {{/if}}
         {{{body}}}
       </div>
+      {{#if adminLinks}}
+        {{> admin_subnav links=adminLinks currentPath=currentPath}}
+      {{else}}
+        {{> tag_list tags=tags}}
+      {{/if}}
     </div>
     <footer class="footer">
       <a href="/">Home</a>
@@ -53,8 +59,7 @@
         <a href="/login">Login</a>
       {{/if}}
       <a class="btn--remix" target="_top" href="https://glitch.new/github.com/ckolderup/postmarks">
-        <img src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140"
-          alt="" />
+        <img src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140" alt="" />
         Remix on Glitch
       </a>
     </footer>

diff --git a/src/pages/network.hbs b/src/pages/network.hbs
@@ -1,23 +1,18 @@
-<h3>
-  Your network
-</h3>
-<div>
-  {{#each posts}}
-    <div class="network-post">
-      <div class="network-post-content">
-        {{{this.content}}}
-      </div>
-      <div class="network-post-credit">
-        by {{this.name}}
-      </div>
-      <div class="network-post-links">
-        <a href="/bookmark/new?url={{this.href}}&via={{this.url}}">
-          (Quickadd)
-        </a>
-        <a href="{{this.url}}">
-          (Permalink)
-        </a>
-      </div>
+{{#each posts}}
+  <div class="network-post">
+    <div class="network-post-content">
+      {{{this.content}}}
     </div>
-  {{/each}}
-</div>
+    <div class="network-post-credit">
+      by {{this.name}}
+    </div>
+    <div class="network-post-links">
+      <a href="/bookmark/new?url={{this.href}}&via={{this.url}}">
+        (Quickadd)
+      </a>
+      <a href="{{this.url}}">
+        (Permalink)
+      </a>
+    </div>
+  </div>
+{{/each}}
diff --git a/src/pages/partials/admin_subnav.hbs b/src/pages/partials/admin_subnav.hbs
@@ -1,7 +1,15 @@
-<ul>
-  <li><a href="/admin/">Admin home/Bookmarklet</a></li>
-  <li><a href="/admin/bookmarks">Import bookmarks</a></li>
-  <li><a href="/admin/followers">Permissions &amp; followers</a></li>
-  <li><a href="/admin/following">Manage your federated follows</a></li>
-  <li><a href="/admin/data">Data export</a></li>
-</ul>
+{{#if links}}
+  <ul class="admin-links">
+    {{#each links}}
+      <li>
+        {{#eq href ../currentPath}}
+          {{label}}
+        {{else}}
+          <a href="{{href}}">
+            {{label}}
+          </a>
+        {{/eq}}
+      </li>
+    {{/each}}
+  </ul>
+{{/if}}
diff --git a/src/pages/partials/edit_bookmark.hbs b/src/pages/partials/edit_bookmark.hbs
@@ -25,6 +25,7 @@
         value="{{bookmark.title}}"
       />
     </div>
+    <div class="form-group">
       <label for="bookmark_description">
         Description
       </label>

diff --git a/src/pages/partials/pagination.hbs b/src/pages/partials/pagination.hbs
@@ -9,7 +9,7 @@
         Previous
       </span>
     {{/if}}
-    <span>
+    <span class="status">
       Page {{currentPage}} of {{totalPages}}
     </span>
     {{#if hasNextPage}}

diff --git a/src/pages/partials/show_bookmark.hbs b/src/pages/partials/show_bookmark.hbs
@@ -1,13 +1,21 @@
 <div class="bookmark">
-  <div class="headline">
-    <a href="{{bookmark.url}}">
-      {{bookmark.title}}
-    </a>
-  </div>
+  {{^if permalink}}
+    <div class="headline">
+      <a href="{{bookmark.url}}">
+        {{bookmark.title}}
+      </a>
+    </div>
+  {{/if}}
   <div class="subhead">
-    <span class="bookmark-date" title="{{bookmark.created_at}}">
-      {{bookmark.timestamp}}
-    </span>
+    {{#if permalink}}
+      <span class="bookmark-date" title="{{bookmark.created_at}}">
+        {{bookmark.timestamp}}
+      </span>
+    {{else}}
+      <a href="/bookmark/{{bookmark.id}}" class="bookmark-date" title="{{bookmark.created_at}}">
+        {{bookmark.timestamp}}
+      </a>
+    {{/if}}
     <span class="bookmark-domain">
       {{bookmark.domain}}
     </span>
@@ -47,12 +55,16 @@
     {{/if}}
   </div>
   <div class="bottom">
-    <span>
-      <a href="/bookmark/{{bookmark.id}}">
-        {{bookmark.comment_count}}
-        {{pluralize bookmark.comment_count "comment" "comments"}}
-      </a>
-    </span>
+    {{^if permalink}}
+      {{#if bookmark.comment_count}}
+        <span>
+          <a href="/bookmark/{{bookmark.id}}">
+            {{bookmark.comment_count}}
+            {{pluralize bookmark.comment_count "comment" "comments"}}
+          </a>
+        </span>
+      {{/if}}
+    {{/if}}
     {{#if @root.loggedIn}}
       <span>
         <a href="/bookmark/{{bookmark.id}}/edit">

diff --git a/src/pages/partials/tag_list.hbs b/src/pages/partials/tag_list.hbs
@@ -1,7 +1,9 @@
-<div class="tag-list">
-  <ul>
-    {{#each tags}}
-      <li><a href="/tagged/{{this}}">#{{this}}</a></li>
-    {{/each}}
-  </ul>
-</div>
+<ul class="tag-list">
+  {{#each tags}}
+    <li>
+      <a href="/tagged/{{this}}">
+        #{{this}}
+      </a>
+    </li>
+  {{/each}}
+</ul>
diff --git a/src/pages/search.hbs b/src/pages/search.hbs
@@ -1,7 +1,14 @@
 <div class="search">
   <form action="/search">
-    <input name="query" value="{{keywords}}">
-    <button>Search</button>
+    <div class="form-group">
+      <label for="query" class="visually-hidden">
+        Query
+      </label>
+      <input id="query" name="query" value="{{keywords}}">
+    </div>
+    <div class="form-group">
+      <button>Search</button>
+    </div>
   </form>
 </div>
 {{#if error}}