Merge pull request #497 from rebeccacremona/featured-tags

Show "featured tags" navigation on any paginated blog page.
harvard-lil · Feb 23, 2024 · c4b9aaf · c4b9aaf
2 parents 8b2c4af + cbefbad
commit c4b9aaf
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 6 deletions.
diff --git a/app/_config.yml b/app/_config.yml
@@ -86,6 +86,9 @@ defaults:
       custom-footer: false
       sharing-card-type: summary
 
+# Feature Flags
+show_blog_featured_tags: true
+
 ############################################################
 # Site configuration for the Jekyll 3 Pagination Gem
 # The values here represent the defaults if nothing is set

diff --git a/app/_data/featured_tags.yaml b/app/_data/featured_tags.yaml
@@ -0,0 +1,3 @@
+- link rot
+- caselaw
+- podcast
diff --git a/app/_includes/tag-filter.html b/app/_includes/tag-filter.html
@@ -0,0 +1,24 @@
+{% assign current = page.autopages.display_name|strip | default: 'all' %}
+
+{% if site.show_blog_featured_tags %}
+
+<div class="sleeve">
+  <nav class="posts-filter" aria-label="Featured Tags">
+    <ul>
+      <li>
+        <a class="tag" href="{{ site.baseurl }}/blog/"{% if current == "all" %} aria-current="true"{% endif %}>
+          all
+        </a>
+      </li>
+      {% for tag in site.data.featured_tags %}
+        <li>
+          <a class="tag" href="{{ site.baseurl }}/blog/tag/{{ tag | slugify}}/"{% if current == tag %} aria-current="true"{% endif %}>
+          {{ tag }}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+</div>
+
+{% endif %}
diff --git a/app/_layouts/tag_or_category.html b/app/_layouts/tag_or_category.html
@@ -8,8 +8,11 @@
 ---
 
 <section class="posts-index">
+
+  {% include tag-filter.html %}
+
   <div class="sleeve">
-    <h1>{{ page.autopages.display_name }}</h1>
+    <h1>Posts tagged: "{{ page.autopages.display_name }}"</h1>
     {% for post in paginator.posts %}
       <div class="slice">
         <h2><time class="post-date" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time></h2>

diff --git a/app/assets/css/blog.scss b/app/assets/css/blog.scss
@@ -9,6 +9,28 @@
 ////////////////////////////////////////////////
 //  blog
 
+.posts-filter {
+  text-align: left;
+  margin-top: 0;
+  margin-bottom: $double !important;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  .tag {
+    border-bottom: none;
+    color: white;
+  }
+
+
+}
 
 .posts-index {
   article {
@@ -21,7 +43,7 @@
     border-bottom: none;
   }
 
-  .sleeve:first-of-type article {
+  .sleeve:nth-of-type(2) article {
     border-top: none;
     margin-top: 0;
   }
@@ -234,7 +256,7 @@
 }
 
 @include respond(4) {
-  article, .pagination {
+  article, .pagination, .posts-filter {
     max-width: 596px;
     margin: auto;
     margin-top: 16px;
@@ -270,6 +292,20 @@ footer {
   }
 }
 
+.tag[aria-current='true'] {
+    color: $color-white;
+    background-color: $color-electricblue;
+    a {
+      border-bottom: none;
+    }
+
+    &:hover, &:focus,
+    a:hover, a:focus {
+      color: $color-white;
+      background-color: $color-highlight;
+    }
+}
+
 figure.highlight pre {
   overflow: scroll;
 }
@@ -370,4 +406,4 @@ figure figcaption {
   text-align: center;
   display: block;
   padding-top: 0.75rem;
-}
+}
diff --git a/app/assets/css/main.scss b/app/assets/css/main.scss
@@ -225,7 +225,7 @@ h2 {
 ////////////////////////////////////////////////
 //  header
 
-nav {
+nav[aria-label="main"] {
   text-align: center;
 
   ul {
@@ -1315,7 +1315,7 @@ a.link-project {
     }
   }
 
-  nav {
+  nav[aria-label="main"] {
     position: absolute;
     bottom: 0;
     left: 0;

diff --git a/app/blog/index.html b/app/blog/index.html
@@ -8,6 +8,9 @@
 ---
 
 <section class="posts-index">
+
+{% include tag-filter.html %}
+
 {% for post in paginator.posts %}
   <div class="sleeve">
     <article itemscope itemtype="http://schema.org/BlogPosting">