Better support categories

public/styles.css

@@ -422,7 +422,7 @@ main {
 }
 
 /* Home Header */
-.home-header {
+.page-header {
   font-size: 16px;
   line-height: 29px;
   margin-bottom: 3rem;
@@ -430,7 +430,7 @@ main {
 
 /* Home Header: Breakpoints */
 @media (min-width: 720px) {
-  .home-header {
+  .page-header {
     font-size: 18px;
     line-height: 32px;
     margin-bottom: 3.5rem;
@@ -438,12 +438,12 @@ main {
   }
 }
 @media (min-width: 960px) {
-  .home-header {
+  .page-header {
     margin-bottom: 4rem;
   }
 }
 @media (min-width: 1200px) {
-  .home-header {
+  .page-header {
     width: 57.5%;
   }
 }

src/js/pages/Category.js

@@ -33,23 +33,27 @@ export default (routerContext) => {
     path,
   } = routerContext;
 
-  const categorySlug = path.replace('/category/', '');
+  const categorySlug = path.replace('/category/', '').replace(/\/$/, '');
   const categoryName = findCategoryNameBySlug(categorySlug, apiData);
   mainContent.innerHTML = `
-    <div class="page-title">
-        <h2>${categoryName}</h2>
-        <img src="/images/arrow-down.svg" alt="" />
+    <div class="container">
+      <header class="page-header">
+        <h1>${categoryName}</h1>
+      </header>
     </div>
-    <div class="category"></div>
   `;
 
   const filteredApiData = apiData.filter(
     (videoData) => videoData.categories.includes(categoryName),
   );
+
   const localContext = {
-    content: mainContent.querySelector('.category'),
+    category: categoryName,
+    class: 'hide-header',
   };
 
+  document.body.classList.add('is-category');
+
   appendVideoToGallery({
     ...routerContext,
     apiData: filteredApiData,

src/js/pages/Home.js

@@ -8,7 +8,7 @@ export default (routerContext) => {
 
   mainContent.innerHTML = `
     <div class="container">
-      <header class="home-header">
+      <header class="page-header">
         <h1>Bye bye buffering, hello video!</h1>
         <p>All our content is available on the web, which means you can get access to it whenever you want it. What's more, if your browser supports the latest technologies, you can save videos to view whenever you're offline!</p>
       </header>
@@ -23,10 +23,9 @@ export default (routerContext) => {
     return acc;
   }, {});
 
-  Object.keys(videosByCategories).forEach((category, index) => {
+  Object.keys(videosByCategories).forEach((category) => {
     const localContext = {
       category,
-      index,
     };
 
     /**

src/js/utils/appendVideoToGallery.js

@@ -13,10 +13,9 @@ function appendVideoToGallery(routerContext, localContext) {
     connectionStatus,
   } = routerContext;
 
-  const category = localContext.category || '';
-
   const videoGrid = document.createElement('video-grid');
-  videoGrid.category = category || '';
+  videoGrid.category = localContext.category || '';
+  videoGrid.setAttribute('class', localContext.class || 'flex');
 
   const videoGallery = videoGrid.shadowRoot.querySelector('.video-cards ul');
 

src/js/web-components/video-grid/VideoGrid.css

@@ -29,6 +29,10 @@
   padding: 0 var(--gutter);
 }
 
+:host(.hide-header) .section-header {
+  display: none;
+}
+
 .section-header h2 {
   color: var(--accent-text);
   font-size: 32px;

src/js/web-components/video-grid/VideoGrid.js

@@ -20,7 +20,6 @@ export default class VideoGrid extends HTMLElement {
     super();
     this._root = this.attachShadow({ mode: 'open' });
     this.shadowRoot.appendChild(template.content.cloneNode(true));
-    this.$sectionHeader = this._root.querySelector('.section-header');
     this.$category = this._root.querySelector('.section-header h2');
     this.$categoryLink = this._root.querySelector('.section-header a');
     this.render();