adds shorttitle to the books collection, prints it in the template, s…

…waps it out with media query
Lullabot · Nov 22, 2024 · 113f669 · 113f669
1 parent da5ecf8
commit 113f669
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -4,11 +4,11 @@ const path = require("path");
 module.exports = function (eleventyConfig) {
   // Generate a collection of all books with their pages
   eleventyConfig.addCollection("booksWithPages", function (collectionApi) {
-    const books = collectionApi.getFilteredByGlob("src/ebooks/*/cover.md");
+    const books = collectionApi.getFilteredByGlob("src/ebooks/*/index.html");
     const pages = collectionApi.getFilteredByGlob("src/ebooks/*/pages/*.md");
 
     return books.map(book => {
-      const bookSlug = book.filePathStem.split("/")[2];
+      const bookSlug = book.filePathStem.split('/')[2];
       const bookPages = pages
         .filter(page => page.inputPath.includes(bookSlug))
         .sort((a, b) => {
@@ -19,8 +19,10 @@ module.exports = function (eleventyConfig) {
 
       return {
         book: {
-          ...book.data,
+          title: book.data.title,
+          shortTitle: book.data.shortTitle,
           slug: bookSlug,
+          url: book.url
         },
         pages: bookPages.map((page, index) => ({
           ...page.data,  // Include all frontmatter data

diff --git a/src/_includes/sidebar.liquid b/src/_includes/sidebar.liquid
@@ -10,9 +10,11 @@
   {% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}
   {% for bookWithPages in collections.booksWithPages %}
     {% if bookWithPages.book.slug == currentBookSlug %}
-
       <div class="page-title">
-        <div>{{ bookWithPages.book.title }}</div>
+        <div>
+          <span class="full-title">{{ bookWithPages.book.title }}</span>
+          <span class="short-title">{{ bookWithPages.book.shortTitle | default: bookWithPages.book.title }}</span>
+        </div>
       </div>
       <div class="page-number">
         <div aria-label="Current page number">

diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -87,6 +87,23 @@ main {
       font-size: 1.25em;
       padding: 1em;
     }
+
+    .short-title {
+      display: none;
+    }
+  }
+}
+
+@media (height <= 800px) {
+  .sidebar .page-title {
+    div {
+      .full-title {
+        display: none;
+      }
+      .short-title {
+        display: inline;
+      }
+    }
   }
 }
 
@@ -520,11 +537,19 @@ p {
     flex-direction: row;
 
     .page-title {
-      transform: rotate(90deg);
+      transform: none;
+      width: auto;
 
       div {
-        overflow: hidden;
-        text-overflow: ellipsis;
+        transform: none;
+        padding: 1em;
+
+        .full-title {
+          display: none;
+        }
+        .short-title {
+          display: inline;
+        }
       }
     }
   }