feat: add language switcher and brand; update filter list (#142)

* feat: check that Polylang functions exist before using
* feat: add language switcher markup
* fix: improve aria-current markup for language and sort
* fix: add function_exists check for language switcher
* chore(deps): update @platform-coop-toolkit/pinecone to 1.0.0-alpha.5
* chore(deps): bump @platform-coop-toolkit/pinecone to 1.0.0-alpha.6
* feat: implement brand

.github/workflows/main.yml

@@ -7,6 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+        registry-url: https://npm.pkg.github.com/
+        scope: '@platform-coop-toolkit'
     - name: Cache node modules
       uses: actions/cache@v1
       with:
@@ -18,6 +23,7 @@ jobs:
         npm run build
         npm test
       env:
+        NODE_AUTH_TOKEN: ${{ secrets.PKG_READ_TOKEN }}
         CI: true
     - name: Cache Composer packages
       uses: actions/cache@v1
@@ -34,6 +40,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 12
+        registry-url: https://npm.pkg.github.com/
+        scope: '@platform-coop-toolkit'
     - name: Cache node modules
       uses: actions/cache@v1
       with:
@@ -44,6 +55,7 @@ jobs:
         npm install
         npm run build:production
       env:
+        NODE_AUTH_TOKEN: ${{ secrets.PKG_READ_TOKEN }}
         CI: true
     - name: Cache Composer packages
       uses: actions/cache@v1

.npmrc

@@ -0,0 +1 @@
+registry=https://npm.pkg.github.com/platform-coop-toolkit

app/Controllers/App.php

@@ -43,17 +43,26 @@ public function languages()
 
     public function currentLanguageName()
     {
-        return pll_current_language('name');
+        if (function_exists('pll_current_language')) {
+            return pll_current_language('name');
+        }
+        return 'English';
     }
 
     public function currentLanguageLocale()
     {
-        return pll_current_language('locale');
+        if (function_exists('pll_current_language')) {
+            return pll_current_language('locale');
+        }
+        return 'en_US';
     }
 
     public function currentLanguage()
     {
-        return pll_current_language();
+        if (function_exists('pll_current_language')) {
+            return pll_current_language();
+        }
+        return 'en';
     }
 
     public function foundPosts()

app/Controllers/Page.php

@@ -10,12 +10,14 @@ public function taxonomy()
     {
         global $post;
 
-        if (pll_get_post_language($post->ID) === 'en') {
-            return 'lc_' . rtrim(str_replace('-', '_', $post->post_name), 's');
-        } else {
-            $translations = pll_get_post_translations($post->ID);
-            $slug = get_post_field('post_name', $translations['en']);
-            return 'lc_' . rtrim(str_replace('-', '_', $slug), 's');
+        if (function_exists('pll_get_post_language') && function_exists('pll_get_post_translations')) {
+            if (pll_get_post_language($post->ID) !== 'en') {
+                $translations = pll_get_post_translations($post->ID);
+                $slug = get_post_field('post_name', $translations['en']);
+                return 'lc_' . rtrim(str_replace('-', '_', $slug), 's');
+            }
         }
+
+        return 'lc_' . rtrim(str_replace('-', '_', $post->post_name), 's');
     }
 }

app/Controllers/Partials/Resource.php

@@ -107,7 +107,11 @@ public static function getLanguage($format = 'slug')
     {
         global $post;
 
-        return pll_get_post_language($post->ID, $format);
+        if (function_exists('pll_get_post_language')) {
+            return pll_get_post_language($post->ID, $format);
+        }
+
+        return 'en';
     }
 
     public static function getFormat()

app/filters.php

@@ -134,3 +134,10 @@
         'class' => 'icon'
     ];
 });
+
+add_filter('wp_nav_menu_items', function ($items, $args) {
+    if ($args->theme_location === 'primary_navigation') {
+        $items .= template('partials.language-switcher');
+    }
+    return $items;
+}, 10, 2);

app/helpers.php

@@ -139,14 +139,16 @@ function display_sidebar()
 
 function maybe_swap_term($term, $lang = false)
 {
-    if (!$lang) {
-        $lang = pll_current_language();
-    }
-    if (pll_get_term_language($term->term_id) !== $lang) {
-        $localized_term_id = pll_get_term($term->term_id, $lang);
-        if ($localized_term_id) {
-            $localized_term = get_term($localized_term_id, $term->taxonomy);
-            return $localized_term;
+    if (function_exists('pll_current_language') && function_exists('pll_get_term_language')) {
+        if (!$lang) {
+            $lang = pll_current_language();
+        }
+        if (pll_get_term_language($term->term_id) !== $lang) {
+            $localized_term_id = pll_get_term($term->term_id, $lang);
+            if ($localized_term_id) {
+                $localized_term = get_term($localized_term_id, $term->taxonomy);
+                return $localized_term;
+            }
         }
     }
     return $term;

package.json

@@ -30,7 +30,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.7",
     "@commitlint/cli": "^8.3.4",
     "@commitlint/config-conventional": "^8.3.4",
-    "@platform-coop-toolkit/pinecone": "^1.0.0-alpha.4",
+    "@platform-coop-toolkit/pinecone": "^1.0.0-alpha.6",
     "@wordpress/babel-preset-default": "^4.8.0",
     "@wordpress/browserslist-config": "^2.6.0",
     "@wordpress/dependency-extraction-webpack-plugin": "^2.1.0",

resources/assets/scripts/routes/archive.js

@@ -48,6 +48,14 @@ export default {
       );
     } );
 
+    const filterDisclosureLabels = document.querySelectorAll( '.filter-disclosure-label' );
+
+    if ( filterDisclosureLabels ) {
+      Array.prototype.forEach.call( filterDisclosureLabels, label => {
+        new Pinecone.DisclosureButton( label, { buttonVariant: 'button--disc', visuallyHiddenLabel: true } );
+      } );
+    }
+
     const sortMenuButtonContainer = document.querySelector( '.sort .menu-button' );
     if ( sortMenuButtonContainer ) {
       new Pinecone.MenuButton( sortMenuButtonContainer, { placement: 'bottom' } );

resources/views/partials/filters.blade.php

@@ -30,8 +30,8 @@
                   ) }} />
                   <label for="{{ $tax }}-{{ $term->slug }}">{!! $term->name !!}</label>
                   @if(get_term_children($term->term_id, $tax))
-                    <span id="{{ $term->slug }}-disclosure-label" hidden>{{ sprintf(__('show %d subtopics for "%s"', 'coop-library'), count(get_term_children($term->term_id, $tax)), $term->name) }}</span>
-                    <span hidden> ({{ sprintf(__('and %d subtopics', 'coop-library'), count(get_term_children($term->term_id, $tax))) }})</span>
+                    <span class="supplementary-label" hidden> ({{ sprintf(__('and %d subtopics', 'coop-library'), count(get_term_children($term->term_id, $tax))) }})</span>
+                    <span class="filter-disclosure-label" hidden>{{ sprintf(__('show %d subtopics for "%s"', 'coop-library'), count(get_term_children($term->term_id, $tax)), $term->name) }}</span>
                     <ul class="input-group input-group__descendant">
                       @foreach(get_terms(['taxonomy' => $tax, 'parent' => $term->term_id]) as $child_term)
                       <li>

resources/views/partials/header.blade.php

@@ -1,15 +1,11 @@
 <header role="banner">
   <div class="container">
-    <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
+    <a class="brand"@if(is_front_page()) aria-current="page"@endif href="{{ home_url('/') }}">@svg('pcc', 'icon--pcc', ['focusable' => 'false', 'aria-hidden' => 'true'])<span class="brand__title screen-reader-text">{{ get_bloginfo('name', 'display') }}</span></a>
     <nav aria-labelledby="menu-primary-label">
       @if (has_nav_menu('primary_navigation'))
         <button class="menu-toggle" aria-expanded="false">
-          <svg class="icon icon--open" aria-hidden="true">
-            <use xlink:href="@asset('images/hamburger.svg')"/>
-          </svg>
-          <svg class="icon icon--close" aria-hidden="true">
-            <use xlink:href="@asset('images/close.svg')"/>
-          </svg>
+          @svg('menu', 'icon--open', ['focusable' => 'false', 'aria-hidden' => 'true'])
+          @svg('close', 'icon--close', ['focusable' => 'false', 'aria-hidden' => 'true'])
           <span id="menu-primary-label" class="menu-toggle__label">Menu</span>
         </button>
         {!! wp_nav_menu([

resources/views/partials/language-switcher.blade.php

@@ -0,0 +1,15 @@
+@if(function_exists('pll_the_languages'))
+<li class="menu-item menu-item--languages menu__submenu-wrapper">
+  <a class="menu__item" href="{{ get_permalink(get_page_by_path('settings/language')) }}">
+    <span class="menu__label">{{ __('Language', 'coop-library') }}</span>
+    @svg('language', 'icon--language icon--lg', ['focusable' => 'false', 'aria-hidden' => 'true'])
+  </a>
+  <ul class="menu__submenu">
+    @if(function_exists('pll_the_languages'))
+      @foreach(pll_the_languages(['raw' => 1]) as $translation)
+    <li class="menu-item"><a {!! $translation['current_lang'] ? 'aria-current="true"' : '' !!}href="{{ $translation['url'] }}" class="menu__item">{{ $translation['name'] }}</a></li>
+      @endforeach
+    @endif
+  </ul>
+</li>
+@endif

resources/views/partials/sort.blade.php

@@ -3,9 +3,9 @@
       <div class="menu-button">
           <h2 class="h3 menu-button__label">@svg('sort', 'icon--sort', ['focusable' => 'false', 'aria-hidden' => 'true']) {{ __('Sort by', 'coop-library') }}</h2>
           <ul class="link-list">
-              <li class="link-list__item"><a href="{{ App::sortUrl('added') }}"{{ ($_GET['order_by']==='added') ? ' aria-current="true"' : '' }}>{{ __('Date added', 'coop-library') }}</a></li>
-              <li class="link-list__item"><a href="{{ App::sortUrl('published') }}"{{ ($_GET['order_by']==='published') ? ' aria-current="true"' : '' }}>{{ __('Date published', 'coop-library') }}</a></li>
-              <li class="link-list__item"><a href="{{ App::sortUrl('favorited') }}"{{ ($_GET['order_by']==='favorited') ? ' aria-current="true"' : '' }}>{{ __('Most favorited', 'coop-library') }}</a></li>
+              <li class="link-list__item"><a href="{{ App::sortUrl('added') }}"{!! (!isset($_GET['order_by']) || $_GET['order_by']==='added') ? ' aria-current="true"' : '' !!}>{{ __('Date added', 'coop-library') }}</a></li>
+              <li class="link-list__item"><a href="{{ App::sortUrl('published') }}"{!! ($_GET['order_by']==='published') ? ' aria-current="true"' : '' !!}>{{ __('Date published', 'coop-library') }}</a></li>
+              <li class="link-list__item"><a href="{{ App::sortUrl('favorited') }}"{!! ($_GET['order_by']==='favorited') ? ' aria-current="true"' : '' !!}>{{ __('Most favorited', 'coop-library') }}</a></li>
           </ul>
       </div>
   </div>