Merge pull request #13 from pressbooks/catalog

Catalog (fix #2)

app/controllers/About.php

@@ -1,10 +0,0 @@
-<?php
-
-namespace Aldine;
-
-use Sober\Controller\Controller;
-
-class About extends Controller
-{
-
-}

app/controllers/App.php

@@ -75,4 +75,15 @@ class App extends Controller
 
         return __('Contact Us', 'aldine');
     }
+
+    public static function books($page = 1, $per_page = 10)
+    {
+        $request = new \WP_REST_Request('GET', '/pressbooks/v2/books');
+        $request->set_query_params([
+            'page' => $page,
+            'per_page' => $per_page,
+        ]);
+        $response = rest_do_request($request);
+        return rest_get_server()->response_to_data($response, true);
+    }
 }

app/controllers/FrontPage.php

@@ -49,11 +49,4 @@ class FrontPage extends Controller
 
         return __('Our Latest Titles', 'aldine');
     }
-
-    public static function latestBooks($page = 1, $per_page = 3)
-    {
-        $books = wp_remote_get(network_home_url("/wp-json/pressbooks/v2/books?per_page=$per_page&page=$page"));
-        $books = json_decode($books['body'], true);
-        return $books;
-    }
 }

app/controllers/PageCatalog.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace Aldine;
+
+use Sober\Controller\Controller;
+
+class PageCatalog extends Controller
+{
+    public function licenses()
+    {
+        $licenses = (new \Pressbooks\Licensing())->getSupportedTypes();
+        foreach ($licenses as $key => $value) {
+            $licenses[$key] = preg_replace("/\([^)]+\)/", '', $value['desc']);
+        }
+        return $licenses;
+    }
+
+    public function subjectGroups()
+    {
+        return [
+            'business-finance' => [
+              'title' => __('Business and Finance', 'aldine'),
+              'subjects' => [
+                'accounting' => 'Accounting',
+                'finance' => 'Finance',
+                'information-systems' => 'Information Systems',
+                'management' => 'Management',
+                'marketing' => 'Marketing',
+                'economics' => 'Economics',
+              ],
+            ],
+            'engineering-technology' => [
+              'title' => __('Engineering &amp; Technology', 'aldine'),
+              'subjects' => [
+                'architecture' => 'Architecture',
+                'bioengineering' => 'Bioengineering',
+                'chemical' => 'Chemical',
+                'civil' => 'Civil',
+                'electrical' => 'Electrical',
+                'mechanical' => 'Mechanical',
+                'mining-and-materials' => 'Mining and Materials',
+                'urban-planning' => 'Urban Planning',
+                'computer-science' => 'Computer Science',
+              ],
+            ],
+            'health-sciences' => [
+              'title' => __('Health Sciences', 'aldine'),
+              'subjects' => [
+                'nursing' => 'Nursing',
+                'dentistry' => 'Dentistry',
+                'medicine' => 'Medicine',
+              ],
+            ],
+            'humanities-arts' => [
+              'title' => __('Humanities &amp; Arts', 'aldine'),
+              'subjects' => [
+                'archaeology' => 'Archaeology',
+                'art' => 'Art',
+                'classics' => 'Classics',
+                'literature' => 'Literature',
+                'history' => 'History',
+                'media' => 'Media',
+                'music' => 'Music',
+                'philosophy' => 'Philosophy',
+                'religion' => 'Religion',
+                'language' => 'Language',
+              ],
+            ],
+            'reference' => [
+              'title' => __('Reference', 'aldine'),
+              'subjects' => [
+                'student-guides' => 'Student Guides',
+                'teaching-guides' => 'Teaching Guides',
+              ],
+            ],
+            'science' => [
+              'title' => __('Sciences', 'aldine'),
+              'subjects' => [
+                'biology' => 'Biology',
+                'chemistry' => 'Chemistry',
+                'environent-and-earth-sciences' => 'Environment and Earth Sciences',
+                'geography' => 'Geography',
+                'mathematics' => 'Mathematics',
+                'physics' => 'Physics',
+              ],
+            ],
+            'social-sciences' => [
+              'title' => __('Social Sciences', 'aldine'),
+              'subjects' => [
+                'anthropology' => 'Anthropology',
+                'gender-studies' => 'Gender Studies',
+                'linguistics' => 'Linguistics',
+                'museums-libraries-and-information-sciences' => 'Museums, Libraries, and Information Sciences',
+                'political-science' => 'Political Science',
+                'psychology' => 'Psychology',
+                'social-work' => 'Social Work',
+                'sociology' => 'Sociology',
+              ],
+            ],
+        ];
+    }
+}

package.json

@@ -127,7 +127,9 @@
     "yargs": "~8.0"
   },
   "dependencies": {
+    "isotope-layout": "^3.0.4",
     "jquery": "1.12.4 - 3",
+    "jquery-bridget": "^2.0.1",
     "tachyons-sass": "~4.7",
     "wpapi": "^1.1.2"
   }

resources/assets/build/webpack.config.js

@@ -120,6 +120,10 @@ let webpackConfig = {
       'node_modules',
       'bower_components',
     ],
+    alias: {
+      'masonry': 'masonry-layout',
+      'isotope': 'isotope-layout',
+    },
     enforceExtension: false,
   },
   resolveLoader: {

resources/assets/scripts/routes/catalog.js

@@ -1,6 +1,92 @@
+const jQueryBridget = require('jquery-bridget');
+const Isotope = require('isotope-layout');
+
 export default {
   init() {
     // JavaScript to be fired on the catalog page
+    jQueryBridget('isotope', Isotope, $);
+    let $grid = $('.books');
+    $grid.isotope({
+      itemSelector: '.book',
+      getSortData: {
+        title: '.title a',
+        subject: '[data-subject]',
+        latest: '[data-date-published]',
+      },
+      sortBy: 'title',
+    });
+    $('.filters > a').click((e) => {
+      e.preventDefault();
+      $('.filters').toggleClass('is-active');
+      $('.filter-groups > div').removeClass('is-active');
+    })
+    $('.filter-groups .subjects > a').click((e) => {
+      e.preventDefault();
+      let id = $(e.currentTarget).attr('href');
+      $(`.filter-groups .subjects:not(${id})`).removeClass('is-active');
+      $(`.filter-groups ${id}`).toggleClass('is-active');
+    })
+    $('.filter-groups .licenses > a').click((e) => {
+      e.preventDefault();
+      let id = $(e.currentTarget).attr('href');
+      $(`.filter-groups ${id}`).toggleClass('is-active');
+    })
+    $('.subjects .filter-list a').click((e) => {
+      if ($(e.currentTarget).hasClass('is-active')) {
+        $('.subjects .filter-list a').removeClass('is-active');
+        $('.subjects').removeClass('has-active-child');
+      } else {
+        $('.subjects .filter-list a').removeClass('is-active');
+        $(e.currentTarget).addClass('is-active');
+        $(e.currentTarget).parent().parent().parent('.subjects').addClass('has-active-child');
+      }
+      let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter');
+      let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter');
+      if(typeof licenseValue === "undefined") {
+        licenseValue = '';
+      } else {
+        licenseValue = `[data-license="${licenseValue}"]`;
+      }
+      if(typeof subjectValue === "undefined") {
+        subjectValue = '';
+      } else {
+        subjectValue = `[data-subject="${subjectValue}"]`;
+      }
+      $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
+    });
+    $('.licenses .filter-list a').click((e) => {
+      if ($(e.currentTarget).hasClass('is-active')) {
+        $('.licenses .filter-list a').removeClass('is-active');
+        $('.licenses').removeClass('has-active-child');
+      } else {
+        $('.licenses .filter-list a').removeClass('is-active');
+        $(e.currentTarget).addClass('is-active');
+        $('.licenses').addClass('has-active-child');
+      }
+      let subjectValue = $('.subjects .filter-list a.is-active').attr('data-filter');
+      let licenseValue = $('.licenses .filter-list a.is-active').attr('data-filter');
+      if(typeof licenseValue === "undefined") {
+        licenseValue = '';
+      } else {
+        licenseValue = `[data-license="${licenseValue}"]`;
+      }
+      if(typeof subjectValue === "undefined") {
+        subjectValue = '';
+      } else {
+        subjectValue = `[data-subject="${subjectValue}"]`;
+      }
+      $grid.isotope({ filter: `${subjectValue}${licenseValue}` });
+    });
+    $('.sort > a').click((e) => {
+      e.preventDefault();
+      $('.sort').toggleClass('is-active');
+    })
+    $('.sorts a').click((e) => {
+      let sortBy = $(e.currentTarget).attr('href').substr(1);
+      $('.sorts a').removeClass('is-active');
+      $(e.currentTarget).addClass('is-active');
+      $grid.isotope({sortBy: sortBy});
+    });
   },
   finalize() {
   },

resources/assets/styles/common/_functions.scss

@@ -1,3 +1,7 @@
 @function rem($pixels, $context: $base-font-size) {
   @return #{$pixels / $context}rem;
 }
+
+@function percent($target, $context) {
+  @return ($target / $context) * 100%;
+}

resources/assets/styles/common/_global.scss

@@ -51,9 +51,10 @@ h2 {
   --bg: $brand-accent;
   --block-border: $brand-primary;
   --btn-text: $white;
+  --btn-active-text: $brand-primary;
   --btn-bg: $brand-primary;
-  --btn-text-alt: $white;
+  --btn-inverse-text: $brand-primary;
-  --btn-bg-alt: $brand-accent;
+  --btn-inverse-active-text: $white;
 }
 
 a {

resources/assets/styles/common/_variables.scss

@@ -1,6 +1,7 @@
 /** Colors */
-$brand-primary:         #b01109;
+$brand-primary:      #b01109;
 $brand-accent:       #015d75;
+$light-gray:         #ececec;
 $dark-grey:             #444;
 $black:                 #000;
 $white:                 #fff;

resources/assets/styles/components/_buttons.scss

@@ -2,7 +2,7 @@
   display: inline-block;
   width: rem(250);
   height: rem(65);
-  padding: rem(20);
+  padding: rem(21);
   border: 2px solid var(--btn-bg, $brand-primary);
   border-radius: 3px;
   background: var(--btn-bg, $brand-primary);

resources/assets/styles/layouts/_pages.scss

@@ -1,354 +1,2 @@
-.home {
+@import 'pages/front-page';
-  .block {
+@import 'pages/catalog';
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 0 0.78125rem;
-    display: flex;
-    height: rem(445);
-    background-color: $white;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-
-    p {
-      font-size: rem(18);
-      line-height: (32/16);
-    }
-  }
-
-  .blocks.blocks-2,
-  .blocks.blocks-3 {
-    .widget_text:nth-child(2) {
-      margin-right: 0.5rem;
-      margin-left: 0.5rem;
-      border: solid 2px var(--primary, $brand-primary);
-      box-shadow: unset;
-    }
-  }
-
-  .blocks.blocks-4 {
-    .widget_text:nth-child(2) {
-      color: var(--fg, $white);
-      background: var(--bg, $brand-accent);
-
-      h3 {
-        color: var(--fg, $white);
-
-        &::before {
-          background: var(--fg, $white);
-        }
-      }
-
-      .button {
-        color: var(--fg, $white);
-        border-color: var(--fg, $white);
-        background: transparent;
-
-        &:hover,
-        &:focus {
-          color: var(--bg, $brand-accent);
-          background: var(--fg, $white);
-        }
-      }
-    }
-
-    .widget_text:nth-child(3) {
-      margin-top: 2rem;
-      margin-right: 0.5rem;
-      margin-left: 0.5rem;
-      border: solid 2px var(--block-border, $brand-primary);
-      box-shadow: unset;
-    }
-  }
-
-  .blocks.blocks-2 .widget_text:nth-child(2),
-  .blocks.blocks-3 .widget_text:nth-child(2),
-  .blocks.blocks-4 .widget_text:nth-child(3) {
-    background: transparent;
-    margin-bottom: rem(400);
-
-    &::after {
-      z-index: -1;
-      content: "";
-      display: block;
-      width: 100vw;
-      height: rem(444);
-      background-image: url('../images/banner.jpg');
-      background-position: center;
-      background-size: cover;
-      position: absolute;
-      top: rem(1410);
-      left: 0;
-    }
-  }
-
-  .blocks.blocks-4 .widget_text:nth-child(3) {
-    &::after {
-      top: rem(1880);
-    }
-  }
-
-  .block,
-  .latest-books {
-    h3 {
-      font-size: rem(30);
-      font-weight: 600;
-      color: var(--primary, $brand-primary);
-      letter-spacing: 2px;
-      line-height: (36/30);
-      margin: 0;
-
-      &::before {
-        content: "";
-        display: block;
-        margin: 0 auto 1em;
-        width: 46px;
-        height: 5px;
-        background: var(--accent, $brand-accent);
-      }
-    }
-  }
-
-  .latest-books {
-    height: auto;
-    padding: 0 0 50px;
-
-    h3 {
-      margin-top: 4.375rem;
-      margin-bottom: 2.8125rem;
-    }
-
-    .track {
-      max-width: 22.9375rem;
-      margin-left: auto;
-      margin-right: auto;
-      margin-bottom: 2rem;
-      padding: 0 0.46875rem;
-      position: relative;
-    }
-
-    .books {
-      padding: 0;
-      width: 100%;
-    }
-
-    .book {
-      width: 100%;
-      max-width: 22.9375rem;
-      height: 24.125rem;
-      margin: 0 0 2rem;
-      padding: 1.5rem 1.85rem 2.1875rem;
-      border: solid 2px var(--bg, $brand-accent);
-      background: var(--bg, $brand-accent);
-
-      a {
-        font-family: $font-family-sans-serif;
-        color: $white;
-        text-decoration: none;
-      }
-
-      .subject {
-        height: 4.625rem;
-        font-size: rem(24);
-      }
-
-      .title {
-        height: 13rem;
-        font-size: rem(30);
-        font-weight: 500;
-        line-height: (40/30);
-      }
-
-      .read-more {
-        font-size: rem(18);
-      }
-    }
-
-    .previous,
-    .next {
-      width: auto;
-      height: auto;
-
-      svg {
-        path {
-          fill: var(--primary, $brand-primary);
-        }
-      }
-    }
-  }
-}
-
-@media (min-width: $medium) {
-  .home {
-    .wrap {
-      margin-top: rem(-366);
-    }
-
-    .block {
-      width: rem(775);
-      height: rem(494);
-      margin-bottom: rem(119);
-      padding: 0 90px;
-      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
-
-      &:last-child {
-        margin-bottom: 4.0625rem;
-      }
-
-      h3 {
-        font-size: rem(48);
-        line-height: (56/48);
-
-        &::before {
-          width: 74px;
-        }
-      }
-
-      p {
-        font-size: rem(18);
-        line-height: (32/18);
-      }
-    }
-
-    .blocks.blocks-2 .widget_text:nth-child(2),
-    .blocks.blocks-3 .widget_text:nth-child(2),
-    .blocks.blocks-4 .widget_text:nth-child(3) {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .blocks.blocks-2 .widget_text:nth-child(2),
-    .blocks.blocks-3 .widget_text:nth-child(2),
-    .blocks.blocks-4 .widget_text:nth-child(3) {
-      margin-bottom: rem(119);
-
-      &::after {
-        height: rem(600);
-        top: rem(1547);
-      }
-    }
-
-    .blocks.blocks-4 .widget_text:nth-child(3) {
-      &::after {
-        top: rem(2177);
-      }
-    }
-
-    .latest-books {
-      width: 100%;
-      margin-left: auto;
-      margin-right: auto;
-
-      h3 {
-        margin-bottom: 4.375rem;
-      }
-
-      .track {
-        flex-wrap: nowrap;
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-
-      .next,
-      .previous {
-        position: absolute;
-        top: rem(165.5);
-
-        svg {
-          width: 2.4375rem;
-          height: 1.875rem;
-        }
-      }
-
-      .next {
-        margin-right: 0.9375rem;
-        right: 0;
-      }
-
-      .previous {
-        margin-left: 0.9375rem;
-        left: 0;
-      }
-
-      .books {
-        width: auto;
-        min-width: 50rem;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      .book {
-        width: 30%;
-        max-width: 19.54rem;
-      }
-    }
-  }
-}
-
-@media (min-width: $large) {
-  .home {
-    .block {
-      width: rem(1115);
-    }
-
-    .latest-books {
-      width: 100%;
-      margin-bottom: 0;
-
-      .track {
-        width: 100%;
-        margin: 0 auto;
-        max-width: 87rem;
-      }
-
-      .books {
-        width: 100%;
-        max-width: 75rem;
-      }
-
-      .book {
-        min-width: 19.54rem;
-        max-width: 22.9375rem;
-      }
-    }
-  }
-}
-
-@media (min-width: $extra-large) {
-  .home {
-    .block {
-      width: 1115px;
-      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
-    }
-
-    .blocks.blocks-4 {
-      display: flex;
-      flex-flow: row wrap;
-      width: 1615px;
-
-      .widget_text {
-        width: 1115px;
-        margin-right: auto;
-        margin-left: auto;
-      }
-
-      .widget_text:nth-child(1),
-      .widget_text:nth-child(2) {
-        width: 775px;
-      }
-
-      .widget_text:nth-child(1) {
-        margin-right: 65px;
-      }
-    }
-
-    .blocks.blocks-4 .widget_text:nth-child(3) {
-      &::after {
-        top: rem(1596);
-      }
-    }
-  }
-}

resources/assets/styles/layouts/pages/_catalog.scss

@@ -0,0 +1,364 @@
+.catalog {
+  .page-header {
+    margin-top: rem(-68);
+    padding-bottom: 2rem;
+  }
+
+  .network-catalog {
+    width: 100%;
+  }
+
+  .controls {
+    width: 100%;
+  }
+
+  .filters,
+  .search,
+  .sort {
+    width: 100%;
+    border-top: solid 2px var(--accent, $brand-accent);
+    background: $white;
+
+    a {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      padding: rem(16) rem(19);
+      font-size: rem(16);
+      font-weight: 600;
+      font-family: $font-family-sans-serif;
+      letter-spacing: rem(0.67);
+      color: $black;
+
+      &:hover,
+      &:focus {
+        background: #fafdff;
+        color: var(--link, $brand-primary);
+      }
+    }
+
+    .has-active-child > a {
+      background: var(--link, $brand-primary);
+      color: $white;
+
+      .arrow {
+        path {
+          fill: $white;
+        }
+      }
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        font-size: rem(16);
+        font-family: $font-family-sans-serif;
+        letter-spacing: rem(0.67);
+
+        a {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: normal;
+          cursor: pointer;
+
+          .close {
+            display: inline-block;
+            float: right;
+            margin-top: rem(-2);
+            font-size: rem(20);
+            opacity: 0;
+            transition: opacity 0.5s;
+          }
+        }
+
+        a.is-active {
+          font-weight: 600;
+          color: var(--link, $brand-primary);
+
+          .close {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  .arrow {
+    path {
+      fill: var(--link, $brand-primary);
+    }
+  }
+
+  .is-active > a .arrow {
+    transform: rotate(180deg);
+  }
+
+  .filters {
+    .filter-groups {
+      display: none;
+      border-top: solid 2px var(--accent, $brand-accent);
+
+      h3 {
+        margin: 0;
+        border-top: solid 1px $light-gray;
+      }
+
+      h3:first-of-type {
+        border-top: none;
+      }
+    }
+
+    .filter-list {
+      display: none;
+    }
+
+    &.is-active {
+      .filter-groups {
+        display: block;
+      }
+    }
+
+    .is-active ul {
+      display: block;
+    }
+  }
+
+  .search {
+    display: none;
+  }
+
+  .sort {
+    border-bottom: solid 2px var(--accent, $brand-accent);
+
+    .sorts {
+      display: none;
+      border-top: solid 2px var(--accent, $brand-accent);
+    }
+
+    &.is-active {
+      .sorts {
+        display: block;
+      }
+    }
+  }
+
+  .books {
+    align-self: flex-start;
+    width: percent(358, 360);
+    margin: rem(32) 0 0 percent(10.5, 360);
+    padding: 0;
+  }
+
+  .book {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: percent(165, 358);
+    margin: 0 percent(9, 358) rem(8) 0;
+    height: rem(230);
+    float: left;
+    padding: 1.5rem rem(8) rem(26);
+    border: solid 2px var(--bg, $brand-accent);
+    background: var(--bg, $brand-accent);
+
+    p {
+      margin: 0;
+    }
+
+    a {
+      font-family: $font-family-sans-serif;
+      color: $white;
+      text-decoration: none;
+    }
+
+    .subject {
+      height: rem(44);
+      font-size: rem(14);
+    }
+
+    .title {
+      height: rem(118);
+      font-size: rem(16);
+      font-weight: 600;
+      line-height: (20/16);
+    }
+
+    .read-more {
+      font-size: rem(14);
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .catalog {
+    .controls {
+      width: percent(706, 768);
+      height: rem(52);
+      margin: rem(60) percent(29, 768) rem(20) percent(33, 768);
+
+      .filters,
+      .search,
+      .sort {
+        position: relative;
+        border-top: 0;
+        border-bottom: solid 2px var(--accent, $brand-accent);
+        z-index: 99;
+      }
+
+      .filters {
+        float: left;
+        width: rem(360);
+
+        .filter-groups {
+          border-right: solid 1px #ececec;
+          border-left: solid 1px #ececec;
+        }
+      }
+
+      .sort {
+        float: right;
+        width: rem(160);
+
+        .sorts {
+          border-right: solid 1px #ececec;
+          border-bottom: solid 1px #ececec;
+          border-left: solid 1px #ececec;
+        }
+      }
+    }
+
+    .books {
+      align-self: flex-start;
+      width: percent(735, 768);
+      margin-bottom: rem(15);
+      margin-left: percent(24, 768);
+    }
+
+    .book {
+      width: percent(230, 735);
+      height: rem(260);
+      margin: 0 percent(15, 735) 2rem 0;
+      padding: 0 rem(14) rem(21.35);
+
+      .subject {
+        height: rem(45.85);
+        font-size: rem(18);
+      }
+
+      .title {
+        height: rem(147.65);
+        font-size: rem(22);
+        font-weight: 600;
+        line-height: (40/30);
+      }
+
+      .read-more {
+        font-size: rem(16);
+      }
+    }
+  }
+}
+
+@media (min-width: $medium) {
+  // TODO
+}
+
+@media (min-width: $large) {
+  // TODO
+}
+
+@media (min-width: $extra-large) {
+  .catalog {
+    .main {
+      width: rem(1535);
+      margin: 0 auto;
+    }
+
+    .network-catalog {
+      margin-top: rem(205);
+    }
+
+    .controls {
+      width: 100%;
+      margin: 0 0 rem(64);
+
+      .filters {
+        width: rem(286);
+
+        .filter-groups {
+          border-right: 0;
+          border-top: 0;
+          border-left: 0;
+
+          .subjects,
+          .licenses {
+            border-bottom: solid 1px #ececec;
+          }
+        }
+
+        &.is-active {
+          border-bottom: 0;
+
+          .filter-groups {
+            border-top: solid 2px var(--accent, $brand-accent);
+          }
+        }
+
+        ul li {
+          a {
+            padding-top: 0;
+            padding-bottom: 0;
+            line-height: 2;
+          }
+
+          &:last-child a {
+            padding-bottom: 1rem;
+          }
+        }
+      }
+
+      .sort {
+        .sorts {
+          border-top: solid 2px var(--accent, $brand-accent);
+          border-right: 0;
+          border-left: 0;
+        }
+      }
+    }
+
+    .books {
+      width: percent(1221.5, 1535);
+      margin: 0 0 0 percent(316, 1535);
+    }
+
+    .book {
+      width: percent(367, 1221.5);
+      height: rem(386);
+      margin: 0 0 2rem percent(39.5, 1221.5);
+      padding: 1.5rem 1.85rem 2.1875rem;
+
+      .subject {
+        height: 4.625rem;
+        font-size: rem(24);
+      }
+
+      .title {
+        height: 13rem;
+        font-size: rem(30);
+        font-weight: 500;
+        line-height: (40/30);
+      }
+
+      .read-more {
+        font-size: rem(18);
+      }
+    }
+  }
+}

resources/assets/styles/layouts/pages/_front-page.scss

@@ -0,0 +1,354 @@
+.home {
+  .block {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0.78125rem;
+    display: flex;
+    height: rem(445);
+    background-color: $white;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+
+    p {
+      font-size: rem(18);
+      line-height: (32/16);
+    }
+  }
+
+  .blocks.blocks-2,
+  .blocks.blocks-3 {
+    .widget_text:nth-child(2) {
+      margin-right: 0.5rem;
+      margin-left: 0.5rem;
+      border: solid 2px var(--primary, $brand-primary);
+      box-shadow: unset;
+    }
+  }
+
+  .blocks.blocks-4 {
+    .widget_text:nth-child(2) {
+      color: var(--fg, $white);
+      background: var(--bg, $brand-accent);
+
+      h3 {
+        color: var(--fg, $white);
+
+        &::before {
+          background: var(--fg, $white);
+        }
+      }
+
+      .button {
+        color: var(--fg, $white);
+        border-color: var(--fg, $white);
+        background: transparent;
+
+        &:hover,
+        &:focus {
+          color: var(--bg, $brand-accent);
+          background: var(--fg, $white);
+        }
+      }
+    }
+
+    .widget_text:nth-child(3) {
+      margin-top: 2rem;
+      margin-right: 0.5rem;
+      margin-left: 0.5rem;
+      border: solid 2px var(--block-border, $brand-primary);
+      box-shadow: unset;
+    }
+  }
+
+  .blocks.blocks-2 .widget_text:nth-child(2),
+  .blocks.blocks-3 .widget_text:nth-child(2),
+  .blocks.blocks-4 .widget_text:nth-child(3) {
+    background: transparent;
+    margin-bottom: rem(400);
+
+    &::after {
+      z-index: -1;
+      content: "";
+      display: block;
+      width: 100vw;
+      height: rem(444);
+      background-image: url('../images/banner.jpg');
+      background-position: center;
+      background-size: cover;
+      position: absolute;
+      top: rem(1410);
+      left: 0;
+    }
+  }
+
+  .blocks.blocks-4 .widget_text:nth-child(3) {
+    &::after {
+      top: rem(1880);
+    }
+  }
+
+  .block,
+  .latest-books {
+    h3 {
+      font-size: rem(30);
+      font-weight: 600;
+      color: var(--primary, $brand-primary);
+      letter-spacing: 2px;
+      line-height: (36/30);
+      margin: 0;
+
+      &::before {
+        content: "";
+        display: block;
+        margin: 0 auto 1em;
+        width: 46px;
+        height: 5px;
+        background: var(--accent, $brand-accent);
+      }
+    }
+  }
+
+  .latest-books {
+    height: auto;
+    padding: 0 0 50px;
+
+    h3 {
+      margin-top: 4.375rem;
+      margin-bottom: 2.8125rem;
+    }
+
+    .track {
+      max-width: 22.9375rem;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 2rem;
+      padding: 0 0.46875rem;
+      position: relative;
+    }
+
+    .books {
+      padding: 0;
+      width: 100%;
+    }
+
+    .book {
+      width: 100%;
+      max-width: 22.9375rem;
+      height: 24.125rem;
+      margin: 0 0 2rem;
+      padding: 1.5rem 1.85rem 2.1875rem;
+      border: solid 2px var(--bg, $brand-accent);
+      background: var(--bg, $brand-accent);
+
+      a {
+        font-family: $font-family-sans-serif;
+        color: $white;
+        text-decoration: none;
+      }
+
+      .subject {
+        height: 4.625rem;
+        font-size: rem(24);
+      }
+
+      .title {
+        height: 13rem;
+        font-size: rem(30);
+        font-weight: 500;
+        line-height: (40/30);
+      }
+
+      .read-more {
+        font-size: rem(18);
+      }
+    }
+
+    .previous,
+    .next {
+      width: auto;
+      height: auto;
+
+      svg {
+        path {
+          fill: var(--primary, $brand-primary);
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: $medium) {
+  .home {
+    .wrap {
+      margin-top: rem(-366);
+    }
+
+    .block {
+      width: rem(775);
+      height: rem(494);
+      margin-bottom: rem(119);
+      padding: 0 90px;
+      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
+
+      &:last-child {
+        margin-bottom: 4.0625rem;
+      }
+
+      h3 {
+        font-size: rem(48);
+        line-height: (56/48);
+
+        &::before {
+          width: 74px;
+        }
+      }
+
+      p {
+        font-size: rem(18);
+        line-height: (32/18);
+      }
+    }
+
+    .blocks.blocks-2 .widget_text:nth-child(2),
+    .blocks.blocks-3 .widget_text:nth-child(2),
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .blocks.blocks-2 .widget_text:nth-child(2),
+    .blocks.blocks-3 .widget_text:nth-child(2),
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      margin-bottom: rem(119);
+
+      &::after {
+        height: rem(600);
+        top: rem(1547);
+      }
+    }
+
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      &::after {
+        top: rem(2177);
+      }
+    }
+
+    .latest-books {
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+
+      h3 {
+        margin-bottom: 4.375rem;
+      }
+
+      .track {
+        flex-wrap: nowrap;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      .next,
+      .previous {
+        position: absolute;
+        top: rem(165.5);
+
+        svg {
+          width: 2.4375rem;
+          height: 1.875rem;
+        }
+      }
+
+      .next {
+        margin-right: 0.9375rem;
+        right: 0;
+      }
+
+      .previous {
+        margin-left: 0.9375rem;
+        left: 0;
+      }
+
+      .books {
+        width: auto;
+        min-width: 50rem;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .book {
+        width: 30%;
+        max-width: 19.54rem;
+      }
+    }
+  }
+}
+
+@media (min-width: $large) {
+  .home {
+    .block {
+      width: rem(1115);
+    }
+
+    .latest-books {
+      width: 100%;
+      margin-bottom: 0;
+
+      .track {
+        width: 100%;
+        margin: 0 auto;
+        max-width: 87rem;
+      }
+
+      .books {
+        width: 100%;
+        max-width: 75rem;
+      }
+
+      .book {
+        min-width: 19.54rem;
+        max-width: 22.9375rem;
+      }
+    }
+  }
+}
+
+@media (min-width: $extra-large) {
+  .home {
+    .block {
+      width: 1115px;
+      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
+    }
+
+    .blocks.blocks-4 {
+      display: flex;
+      flex-flow: row wrap;
+      width: 1615px;
+
+      .widget_text {
+        width: 1115px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      .widget_text:nth-child(1),
+      .widget_text:nth-child(2) {
+        width: 775px;
+      }
+
+      .widget_text:nth-child(1) {
+        margin-right: 65px;
+      }
+    }
+
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      &::after {
+        top: rem(1596);
+      }
+    }
+  }
+}

resources/views/page-catalog.blade.php

@@ -0,0 +1,50 @@
+@extends('layouts.app')
+
+@section('content')
+  @include('partials.page-header')
+  <section class="network-catalog">
+    <div class="controls">
+      <div class="search">
+        <h2><a href="#search">{{ __('Search by titles or keyword', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a></h2>
+      </div>
+      <div class="filters">
+        <a href="#filter">{{ __('Filter by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
+        <div id="filter" class="filter-groups">
+          @foreach($subject_groups as $key => $val)
+          <div class="{{ $key }} subjects" id="{{ $key }}">
+            <a href="#{{ $key }}">{{ $val['title'] }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
+            <ul class="filter-list">
+              @foreach($val['subjects'] as $k => $v)
+              <li><a data-filter="{{ $k }}">{{ $v }}<span class="close">&times;</span></a></li>
+              @endforeach
+            </ul>
+          </div>
+          @endforeach
+          <div class="licenses" id="licenses">
+            <a href="#licenses">{{ __('Licenses', 'aldine' ) }}<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
+            <ul class="filter-list">
+              @foreach($licenses as $key => $value)
+          		  <li><a data-filter="{{ $key }}">{{ $value }}<span class="close">&times;</span></a></li>
+              @endforeach
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="sort">
+        <a href="#sort">{{ __('Sort by', 'aldine') }} <svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="#b01109" fill-rule="evenodd"/></svg></a>
+        <ul id="sort" class="sorts">
+          <li><a class="is-active" href="#title">{{ __('Title', 'aldine') }}</a></li>
+          <li><a href="#subject">{{ __('Subject', 'aldine') }}</a></li>
+          <li><a href="#latest">{{ __('Latest', 'aldine') }}</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="books">
+      @foreach(App::books(1, 9) as $book)
+        @include('partials.book', ['book' => $book])
+      @endforeach
+    </div>
+    <nav class="catalog-navigation">
+    </nav>
+  </section>
+@endsection

resources/views/partials/book.blade.php

@@ -0,0 +1,17 @@
+<div class="book"
+  data-date-published="{{ @$book['metadata']['datePublished'] }}"
+  data-license="{{ (new \Pressbooks\Licensing())->getLicenseFromUrl($book['metadata']['license']) }}"
+  data-subject="{{ sanitize_title(@$book['metadata']['keywords']) }}"
+>
+  @if(isset($book['metadata']['keywords']))
+  <p class="subject">
+    <a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
+  </p>
+  @endif
+  <p class="title">
+    <a href="{{ $book['link'] }}">{{ $book['metadata']['name'] }}</a>
+  </p>
+  <p class="read-more">
+    <a href="{{ $book['link'] }}">{{ __('About this book &rarr;', 'aldine') }}</a>
+  </p>
+</div>

resources/views/partials/front-page-catalog.blade.php

@@ -2,11 +2,11 @@
   <h3 class="tc ttu">{{ $latest_books_title }}</h3>
   <div class="track flex flex-row flex-wrap justify-center items-center">
     <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2">
-      @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
+      @foreach(App::books($current_page, 3) as $book)
         <div class="book flex flex-column justify-end w-100">
           @if(isset($book['metadata']['keywords']))
           <p class="subject tc ma0">
-            <a href="#">{{ $book['metadata']['keywords'] }}</a>
+            <a href="{{ network_home_url('/catalog/#') . $book['metadata']['keywords'] }}">{{ $book['metadata']['keywords'] }}</a>
           </p>
           @endif
           <p class="title tl ma0">

yarn.lock

@@ -1507,6 +1507,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
+desandro-matches-selector@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
@@ -1990,6 +1994,10 @@ etag@^1.7.0, etag@~1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
 
+ev-emitter@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
+
 event-emitter@~0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -2239,6 +2247,12 @@ first-chunk-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
 
+fizzy-ui-utils@^2.0.0, fizzy-ui-utils@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.5.tgz#d72debc74d2c9d272dbcbb7b001707897f6c3210"
+  dependencies:
+    desandro-matches-selector "^2.0.0"
+
 flat-cache@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
@@ -2389,6 +2403,10 @@ get-proxy@^1.0.1:
   dependencies:
     rc "^1.1.2"
 
+get-size@^2.0.0, get-size@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.2.tgz#555ea98ab8732e0c021e9e23e2219adcbe398e98"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -3209,6 +3227,16 @@ isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
 
+isotope-layout@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/isotope-layout/-/isotope-layout-3.0.4.tgz#f3ed8d15f8cfb3850b11777f1ca76e0a8bb5b73a"
+  dependencies:
+    desandro-matches-selector "^2.0.0"
+    fizzy-ui-utils "^2.0.4"
+    get-size "^2.0.0"
+    masonry-layout "^4.1.0"
+    outlayer "^2.1.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3221,7 +3249,13 @@ jpegtran-bin@^3.0.0:
     bin-wrapper "^3.0.0"
     logalot "^2.0.0"
 
-"jquery@1.12.4 - 3":
+jquery-bridget@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/jquery-bridget/-/jquery-bridget-2.0.1.tgz#784d17a85e641780c5d89ac3f8a7eb47b0bce1fc"
+  dependencies:
+    jquery ">=1.4.2 <4"
+
+"jquery@1.12.4 - 3", "jquery@>=1.4.2 <4":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
 
@@ -3734,6 +3768,13 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+masonry-layout@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/masonry-layout/-/masonry-layout-4.2.0.tgz#43835c6b6e0d72eff2c31a118c8000cccc4ab965"
+  dependencies:
+    get-size "^2.0.2"
+    outlayer "^2.1.0"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -4237,6 +4278,14 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+outlayer@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
+  dependencies:
+    ev-emitter "^1.0.0"
+    fizzy-ui-utils "^2.0.0"
+    get-size "^2.0.2"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"