Merge pull request #472 from srid/tpl-layout-consolidate

Refactor templates to unify `book` and `note` layout as much as possible
srid · Dec 7, 2023 · c6db64b · c6db64b
2 parents 5c474de + 1fcfe2a
commit c6db64b
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 90 deletions.
diff --git a/emanote/default/index.yaml b/emanote/default/index.yaml
@@ -20,6 +20,8 @@ template:
       bodyClass: bg-gray-400 overflow-y-scroll
     note:
       containerClass: container mx-auto max-w-prose
+    book:
+      containerClass: container mx-auto
   error:
     containerClass: container mx-auto max-w-prose
   uptree:

diff --git a/emanote/default/templates/components/body.tpl b/emanote/default/templates/components/body.tpl
@@ -0,0 +1,12 @@
+<div class="flex-1 w-full overflow-x-auto bg-white">
+  <main class="px-4 py-4">
+    <apply template="note-title" />
+    <apply template="note-body" />
+    <div class="flex flex-col lg:flex-row lg:space-x-2">
+      <apply template="timeline" />
+      <apply template="backlinks" />
+    </div>
+    <apply template="metadata" />
+    <apply template="/templates/hooks/note-end" />
+  </main>
+</div>
diff --git a/emanote/default/templates/components/sidebar.tpl b/emanote/default/templates/components/sidebar.tpl
@@ -0,0 +1,53 @@
+<nav id="sidebar"
+  class="flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:h-full md:w-48 xl:w-64">
+  <div class="px-2 py-2 text-gray-800">
+    <div id="indexing-links" class="flex flex-row float-right p-2 space-x-2 text-gray-500">
+      <a href="${ema:tagIndexUrl}" title="View tags">
+        <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none" stroke="currentColor"
+          viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
+          </path>
+        </svg>
+      </a>
+      <a href="${ema:indexUrl}" title="Expand full tree">
+        <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none" stroke="currentColor"
+          viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
+          </path>
+        </svg>
+      </a>
+      <a title="Search (Ctrl+K)" class="cursor-pointer"
+        onclick="window.emanote.stork.toggleSearch()">
+        <apply template="stork/stork-icon" />
+      </a>
+    </div>
+
+    <div id="site-logo" class="pl-2">
+      <div class="flex items-center my-2 space-x-2 justify-left">
+        <a href="${ema:homeUrl}" title="Go to Home">
+          <ema:metadata>
+            <with var="template">
+              <!-- The style width attribute here is to prevent huge
+                      icon from displaying at those rare occasions when Tailwind
+                      hasn't kicked in immediately on page load 
+                      -->
+              <img style="width: 1rem;"
+                class="transition transform hover:scale-110 hover:opacity-80"
+                src="${value:iconUrl}" />
+            </with>
+          </ema:metadata>
+        </a>
+        <a class="font-bold truncate" title="Go to Home" href="${ema:homeUrl}">
+          Home
+        </a>
+      </div>
+    </div>
+
+    <ema:route-tree>
+      <apply template="sidebar-tree" />
+    </ema:route-tree>
+
+  </div>
+</nav>
diff --git a/emanote/default/templates/layouts/book.tpl b/emanote/default/templates/layouts/book.tpl
@@ -1,81 +1,24 @@
+<!-- DoNotFormat -->
+<bind tag="containerClass"><ema:metadata><value var="template.layout.book.containerClass" /></ema:metadata></bind>
+<!-- DoNotFormat -->
+
 <apply template="base">
-  <bind tag="head-main"></bind>
+  <bind tag="head-main">
+  </bind>
   <bind tag="body-main">
-    <div class="container mx-auto">
-
-      <apply template="components/breadcrumbs" />
-
-      <div id="container"
-        class="flex flex-nowrap flex-col md:flex-row bg-gray-50 md:mt-8 md:shadow-2xl md:mb-8">
-        <!-- Sidebar column -->
-        <nav id="sidebar"
-          class="flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:h-full md:w-48 xl:w-64">
-          <div class="px-2 py-2 text-gray-800">
-            <div id="indexing-links" class="flex flex-row float-right p-2 space-x-2 text-gray-500">
-              <a href="${ema:tagIndexUrl}" title="View tags">
-                <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none"
-                  stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
-                  </path>
-                </svg>
-              </a>
-              <a href="${ema:indexUrl}" title="Expand full tree">
-                <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none"
-                  stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
-                  </path>
-                </svg>
-              </a>
-              <a title="Search (Ctrl+K)" class="cursor-pointer"
-                onclick="window.emanote.stork.toggleSearch()">
-                <apply template="components/stork/stork-icon" />
-              </a>
-            </div>
+    <div class="${containerClass}">
+      <div class="md:mt-8">
+        <apply template="components/breadcrumbs" />
 
-            <div id="site-logo" class="pl-2">
-              <div class="flex items-center my-2 space-x-2 justify-left">
-                <a href="${ema:homeUrl}" title="Go to Home">
-                  <ema:metadata>
-                    <with var="template">
-                      <!-- The style width attribute here is to prevent huge
-                      icon from displaying at those rare occasions when Tailwind
-                      hasn't kicked in immediately on page load 
-                      -->
-                      <img style="width: 1rem;"
-                        class="transition transform hover:scale-110 hover:opacity-80"
-                        src="${value:iconUrl}" />
-                    </with>
-                  </ema:metadata>
-                </a>
-                <a class="font-bold truncate" title="Go to Home" href="${ema:homeUrl}">
-                  Home
-                </a>
-              </div>
-            </div>
-
-            <ema:route-tree>
-              <apply template="components/sidebar-tree" />
-            </ema:route-tree>
-
-          </div>
-        </nav>
-
-        <!-- Main body column -->
-        <div class="flex-1 w-full overflow-x-auto bg-white">
-          <main class="px-4 py-4">
-            <apply template="components/note-title" />
-            <apply template="components/note-body" />
-            <div class="flex flex-col lg:flex-row lg:space-x-2">
-              <apply template="components/timeline" />
-              <apply template="components/backlinks" />
-            </div>
-            <apply template="components/metadata" />
-            <apply template="/templates/hooks/note-end" />
-          </main>
+        <div id="container"
+          class="flex flex-nowrap flex-col md:flex-row bg-gray-50 md:shadow-2xl md:mb-8">
+          <!-- Sidebar column -->
+          <apply template="components/sidebar" />
+          <!-- Main body column -->
+          <apply template="components/body" />
         </div>
       </div>
+
       <apply template="components/footer" />
     </div>
   </bind>

diff --git a/emanote/default/templates/layouts/note.tpl b/emanote/default/templates/layouts/note.tpl
@@ -1,5 +1,3 @@
-<!-- TODO: Main navigation links (Home, index, tags, ...) -->
-
 <!-- DoNotFormat -->
 <bind tag="containerClass"><ema:metadata><value var="template.layout.note.containerClass" /></ema:metadata></bind>
 <!-- DoNotFormat -->
@@ -13,27 +11,16 @@
       <div class="mt-2 md:mt-4">
         <apply template="components/note-uptree" />
 
-        <div class="relative md:shadow-2xl md:mb-8">
-
+        <div id="container" class="relative md:shadow-2xl md:mb-8">
           <div class="absolute -top-6 right-1 md:right-0 flex flex-row items-center justify-center">
             <a title="Search (Ctrl+K)" class="cursor-pointer"
               onclick="window.emanote.stork.toggleSearch()">
               <apply template="components/stork/stork-icon" />
             </a>
           </div>
-          <div class="flex-1 w-full overflow-x-auto bg-white">
-            <main class="px-4 py-4">
-              <apply template="components/note-title" />
-              <apply template="components/note-body" />
-              <div class="flex flex-col lg:flex-row lg:space-x-2">
-                <apply template="components/timeline" />
-                <apply template="components/backlinks" />
-              </div>
-              <apply template="components/metadata" />
-              <apply template="/templates/hooks/note-end" />
-            </main>
-          </div>
+          <apply template="components/body" />
         </div>
+
         <apply template="components/footer" />
       </div>
     </div>

diff --git a/emanote/emanote.cabal b/emanote/emanote.cabal
@@ -1,6 +1,6 @@
 cabal-version:      2.4
 name:               emanote
-version:            1.2.1.1
+version:            1.2.1.2
 license:            AGPL-3.0-only
 copyright:          2022 Sridhar Ratnakumar
 maintainer:         [email protected]