display page title a bit more proudly

crates/treehouse/src/cli/generate.rs

@@ -198,6 +198,7 @@ impl Generator {
             pub struct Page {
                 pub title: String,
                 pub breadcrumbs: String,
+                pub tree_path: Option<String>,
                 pub tree: String,
             }
 
@@ -211,6 +212,9 @@ impl Generator {
                 page: Page {
                     title: roots.attributes.title.clone(),
                     breadcrumbs,
+                    tree_path: treehouse
+                        .tree_path(parsed_tree.file_id)
+                        .map(|s| s.to_owned()),
                     tree,
                 },
             };

static/css/main.css

@@ -313,13 +313,19 @@ th {
     display: none;
 }
 
-/* Give the logo on the top some nicer looks */
+/* Style the navigation bar. */
 
 nav {
     display: flex;
     align-items: center;
 }
 
+nav .nav-page {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Give the logo on the top some nicer looks */
 nav .logo {
     width: 48px;
     height: 48px;
@@ -329,6 +335,15 @@ nav .logo {
     color: var(--text-color);
 }
 
+/* Style page titles */
+h1.page-title {
+    --recursive-wght: 800;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 32px;
+    font-size: 1.25rem;
+}
+
 /* Style emojis to be readable */
 
 img[is="th-emoji"] {
@@ -406,4 +421,4 @@ img[is="th-emoji"] {
 #index\:treehouse>details:not([open])>summary .oops-you-seem-to-have-gotten-stuck {
     display: inline;
     animation: 4s hello-there forwards;
-}
+}

template/tree.hbs

@@ -41,11 +41,17 @@
             </svg>
         </a>
 
-        {{#if page.breadcrumbs}}
+        <div class="nav-page">
-        <ol class="breadcrumbs">
+            {{#if page.breadcrumbs}}
-            {{{ page.breadcrumbs }}}
+            <ol class="breadcrumbs">
-        </ol>
+                {{{ page.breadcrumbs }}}
-        {{/if}}
+            </ol>
+            {{/if}}
+
+            {{#if (and (ne page.title config.user.title) (ne page.title page.tree_path))}}
+            <h1 class="page-title">{{ page.title }}</h1>
+            {{/if}}
+        </div>
     </nav>
 
     <noscript>
@@ -82,4 +88,4 @@
     </main>
 </body>
 
-</html>
+</html>