Issue #2447765: [D8] - Port Bluecheese to D8

.gitignore

 /.sass-cache
-/css
 /.bundle
 /vendor
 ._*

bluecheese.info

-name = "Bluecheese"
-description = "Bluecheese theme for Drupal.org with Sass, Compass, and Susy"
-screenshot = images/screenshot.png
-engine = phptemplate
-core = 7.x
-
-; -------- regions ---------------
-regions[page_heading] = Page heading
-regions[page_tools] = Page Tools
-regions[sidebar_first] = Sidebar first
-regions[sidebar_second] = Sidebar second
-regions[highlighted] = Highlighted
-regions[navigation] = Navigation
-regions[header] = Header
-regions[banner] = Banner
-regions[content_top] = Content: Top
-regions[content] = Content
-regions[content_bottom] = Content: Bottom
-regions[footer] = Footer
-regions[content] = Content
-regions[help] = Help
-regions[page_top] = Page top
-regions[page_bottom] = Page bottom
-
-; -------- Styles ---------------
-stylesheets[all][] = css/styles.css
-
-; -------- Javascript ---------------
-scripts[] = js/bluecheese.js
-
-; -------- Panels Layouts ---------------
-plugins[panels][layouts] = 'layouts/panels'
-
-
-; -------- Theme based custom Vote Up Down Widgets ---------------
-plugins[vud][widgets] = widgets

bluecheese.info.yml

+name: Bluecheese
+type: theme
+base theme: stable9
+description: Bluecheese theme for Drupal.org with Sass, Compass, and Susy
+package: Drupal.org
+core_version_requirement: ^9
+logo: images/icon-w-drupal.svg
+screenshot: images/screenshot.png
+regions:
+  heading: 'Heading'
+  tools: 'Tools'
+  sidebar_first: 'Sidebar first'
+  sidebar_second: 'Sidebar second'
+  highlighted: 'Highlighted'
+  navigation: 'Navigation'
+  header: 'Header'
+  banner: 'Banner'
+  content_top: 'Content: top'
+  content: 'Content'
+  content_bottom: 'Content: bottom'
+  footer: 'Footer'
+  help: 'Help'
+  page_top: 'Page: top'
+  page: 'Page'
+  page_bottom: 'Page: bottom'
+libraries:
+  - bluecheese/global

bluecheese.libraries.yml

+global:
+  version: 1.x
+  js:
+    js/bluecheese.js: {}
+  css:
+    base:
+      css/styles.css: {}
+  dependencies:
+    - core/jquery
+

bluecheese.theme

+<?php
+
+/**
+ * @file
+ * Functions to support theming in the Bluecheese theme.
+ */
+
+use Drupal\Component\Utility\Xss;
+use Drupal\image\Entity\ImageStyle;
+use Drupal\user\Entity\User;
+
+/**
+ * Implements hook_preprocess_HOOK() for html.html.twig.
+ */
+function bluecheese_preprocess_html(&$variables) {
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for page.html.twig.
+ */
+function bluecheese_preprocess_page(&$variables) {
+  // Add HTML tag name for title tag.
+  $variables['site_name_element'] = $variables['is_front'] ? 'h1' : 'div';
+
+  // Add variable for site status message (for development sites).
+  $variables['drupalorg_site_status'] = Xss::filterAdmin(\Drupal::config('drupalorg')->get('site_status'));
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for node.html.twig.
+ */
+function bluecheese_preprocess_node(&$variables) {
+  $created_time = $variables['node']->getCreatedTime();
+  // Modify 'Submitted by' text on nodes
+  $variables['date'] =  \Drupal::service('date.formatter')->format($created_time, 'custom', 'F j, Y \a\t g:ia');
+  $variables['pubdate'] = '<time pubdate datetime="' . $created_time . '">' . $variables['date'] . '</time>';
+}
+
+/**
+ * Implements hook_preprocess_HOOK() for menu.html.twig.
+ */
+function bluecheese_preprocess_block(&$variables) {
+  if ($variables['plugin_id'] === 'system_menu_block:account') {
+    $user = User::load(\Drupal::currentUser()->id());
+    if (user_picture_enabled() && !$user->get('user_picture')->isEmpty()) {
+      $uri = $user->user_picture->first()->entity->getFileUri();
+      $variables['picture'] = ImageStyle::load(theme_get_setting('account_menu_image_style'))->buildUrl($uri);
+      $variables['class'] = 'person';
+    }
+    else {
+      $variables['picture'] = base_path() . \Drupal::service('extension.list.theme')->getPath('bluecheese') . '/images/icon-w-user.svg';
+      $variables['class'] = 'default';
+    }
+    // Force block cache rebuild for every user entity change.
+    $variables['#cache']['contexts'][] = 'user';
+  }
+}

ckeditor.config.js

-/*
-Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
-For licensing, see LICENSE.html or http://ckeditor.com/license
-*/
-
-/*
- WARNING: clear browser's cache after you modify this file.
- If you don't do this, you may notice that browser is ignoring all your changes.
- */
-CKEDITOR.editorConfig = function(config) {
-  config.indentClasses = [ 'rteindent1', 'rteindent2', 'rteindent3', 'rteindent4' ];
-
-  // [ Left, Center, Right, Justified ]
-  config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
-
-  // The minimum editor width, in pixels, when resizing it with the resize handle.
-  config.resize_minWidth = 450;
-
-  // Protect PHP code tags (<?...?>) so CKEditor will not break them when
-  // switching from Source to WYSIWYG.
-  // Uncommenting this line doesn't mean the user will not be able to type PHP
-  // code in the source. This kind of prevention must be done in the server
-  // side
-  // (as does Drupal), so just leave this line as is.
-  config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
-
-  // [#1762328] Uncomment the line below to protect <code> tags in CKEditor (hide them in wysiwyg mode).
-  // config.protectedSource.push(/<code>[\s\S]*?<\/code>/gi);
-  //config.extraPlugins = '';
-
-  /*
-    * Append here extra CSS rules that should be applied into the editing area.
-    * Example:
-    * config.extraCss = 'body {color:#FF0000;}';
-    */
-  config.extraCss = '';
-
-  config.templates_files = [Drupal.settings.basePath + 'sites/all/themes/bluecheese/js/ckeditor.custom.templates-v6.js'];
-  config.templates_replaceContent = false;
-
-  /**
-    * CKEditor's editing area body ID & class.
-    * See http://drupal.ckeditor.com/tricks
-    * This setting can be used if CKEditor does not work well with your theme by default.
-    */
-  config.bodyClass = '';
-  config.bodyId = '';
-  /**
-    * Sample bodyClass and BodyId for the "marinelli" theme.
-    */
-  if (Drupal.settings.ckeditor.theme == "marinelli") {
-    config.bodyClass = 'singlepage';
-    config.bodyId = 'primary';
-  }
-
-  // Make CKEditor's edit area as high as the textarea would be.
-  if (this.element.$.rows > 0) {
-    config.height = this.element.$.rows * 20 + 'px';
-  }
-
-  config.codeSnippet_languages = {'php': 'PHP', 'javascript': 'JavaScript', 'html': 'HTML', 'css': 'CSS', 'yaml': 'YAML'};
-  config.FormatSource = false;
-  config.format_code = { element: 'code', attributes: { 'class': 'editorCode' } };
-
-  // Allow img data tags to be passed through ACF.
-  config.extraAllowedContent = 'img[data-orig-src](aside-half);small';
-
-  // Use the browser’s spell check.
-  config.disableNativeSpellChecker = false;
-
-  // Use CSS for image alignment instead of inline styles.
-  config.image2_alignClasses = [
-    'left',
-    'center',
-    'right'
-  ];
-
-  // No &nbsp; in empty <p>.
-  config.fillEmptyBlocks = false;
-}
-
-// Set defaults for tables
-CKEDITOR.on( 'dialogDefinition', function( ev )
-{
-   // Take the dialog name and its definition from the event
-   // data.
-   var dialogName = ev.data.name;
-   var dialogDefinition = ev.data.definition;
-
-   // Check if the definition is from the dialog we're
-   // interested on (the "Table" dialog).
-   if ( dialogName == 'table' )
-   {
-       // Get a reference to the "Table Info" tab.
-       var infoTab = dialogDefinition.getContents( 'info' );
-       txtBorder = infoTab.get( 'txtBorder' );
-       txtBorder['default'] = '0';
-   }
-
-   // Corrects the Image label to notify about local images.
-   if ( dialogName == 'image2') {
-     var imgData = dialogDefinition.getContents('info');
-     urlField = imgData.get('src');
-     urlField['label'] = 'URL (must be hosted on Drupal.org, upload with “Add a new file”)';
-   }
-});

composer.json

+{
+    "name": "drupal/bluecheese",
+    "description": "Bluecheese theme for Drupal.org with Sass, Compass, and Susy",
+    "type": "drupal-theme",
+    "license": "GPL-2.0-or-later",
+    "require": {}
+}

config/install/bluecheese.settings.yml

+# Default settings of Bluecheese theme.
+drupalorg_site_status: ''
+drupalorg_logo_link: ''
+account_menu_image_style: 'thumbnail'

config/schema/bluecheese.schema.yml

+# Schema for the configuration files of the Bluecheese theme.
+bluecheese.settings:
+  type: theme_settings
+  label: 'Bluecheese settings'
+  mapping:
+    drupalorg_site_status:
+      type: string
+      label: Drupal.org site status
+    drupalorg_logo_link:
+      type: string
+      label: Drupal.org logo link
+    account_menu_image_style:
+      type: string
+      label: Account menu image style

images/logo-localize.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="616.97882mm"
+   height="72.693115mm"
+   viewBox="0 0 616.97882 72.693115"
+   version="1.1"
+   id="svg3507"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   sodipodi:docname="logo-localize.svg"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview3509"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.27302827"
+     inkscape:cx="1043.848"
+     inkscape:cy="401.05738"
+     inkscape:window-width="1280"
+     inkscape:window-height="659"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs3504"><clipPath
+       id="clipPath3444"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path3446"
+         d="M 0,0 H 701 V 180 H 0 Z" /></clipPath><clipPath
+       id="clipPath3460"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path3462"
+         d="M 0,179.559 H 700.987 V 0.06 H 0 Z" /></clipPath><clipPath
+       id="clipPath3466"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path3468"
+         d="M 0,0 H 701 V 180 H 0 Z" /></clipPath><clipPath
+       id="clipPath3478"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path3480"
+         d="M 0,0 H 701 V 180 H 0 Z" /></clipPath><symbol
+       id="Drupal-word-logo"
+       data-name="Drupal-word-logo"
+       viewBox="0 0 470 120.4"><path
+         d="m 220.1,22.6 h -19.7 v 36.9 c 0,10.8 -4.6,19.6 -15.4,19.6 -10.8,0 -15.5,-8.8 -15.5,-19.6 V 22.6 h -19.7 v 36.9 c 0,21.4 13.7,38.7 35.1,38.7 21.4,0 35.2,-17.3 35.2,-38.7 z M 417.9,0 V 96.3 H 398.2 V 0 Z m 14.5,3.6 V 0.1 h 15.3 v 3.5 h -5.6 V 18.8 H 438 V 3.6 Z M 455.7,0.1 460,13 h 0.1 l 4.1,-12.9 h 5.8 v 18.7 h -3.8 V 5.6 h -0.1 l -4.6,13.2 h -3.2 L 453.8,5.7 h -0.1 v 13.1 h -3.8 V 0.1 Z M 141.9,24.9 v 22.4 c 0,0 -3.6,-3.7 -12.2,-5.7 C 112.8,37.6 104,53.2 104,56.4 V 96.2 H 84.3 V 22.7 h 17.6 l 2.1,12.9 a 0.9,0.9 0 0 0 0.7,0.7 c 0.7,0 0.7,-0.3 1,-0.7 0.3,-0.4 11.1,-17.8 28,-13.8 a 26.8,26.8 0 0 1 8.2,3.1 z m 105,95.5 V 94 94 84.1 c 0,0 0.1,-0.8 0.8,-0.8 0.7,0 0.7,0.4 0.9,0.8 1.5,3.7 9.7,17.9 28,13.4 A 38.9,38.9 0 1 0 227.1,60.1 v 60.3 z M 266,40.4 A 19.7,19.7 0 1 1 246.4,60.1 19.7,19.7 0 0 1 266,40.4 Z m 104.5,55.8 h 19.8 V 60.1 a 39,39 0 1 0 -49.5,37.4 c 18.3,4.5 26.5,-9.7 28,-13.4 0.1,-0.4 0.3,-0.9 0.9,-0.8 0.6,0.1 0.8,0.8 0.8,0.8 m 0.5,-24 A 19.7,19.7 0 1 1 351.3,40.4 19.7,19.7 0 0 1 371,60.1 Z M 22.5,96.1 H 0 V 0 h 24.1 c 29.2,0 51.3,5.4 51.3,48 0,42.6 -23.5,48.1 -52.9,48.1 z M 27.8,16.7 H 19.9 V 79.4 L 28,79.6 C 44.7,79.6 55.5,78.1 55.5,48 55.5,17.9 46,16.7 27.8,16.7 Z"
+         fill="#ffffff"
+         id="path5856" /></symbol></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-46.927487,-157.66546)"><g
+       id="g3434"
+       transform="matrix(5.6342669,0,0,5.6342669,-233.37146,-647.49924)"><g
+         transform="matrix(0.07187764,0,0,-0.07187764,49.748965,155.81124)"
+         id="g3436"><g
+           id="g3438" /><g
+           id="g3440"><g
+             clip-path="url(#clipPath3444)"
+             id="g3442"><path
+               id="path3448"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 328.313,145.912 h -29.459 l 0.048,-55.122 c 0,-16.109 -6.906,-29.14 -23.015,-29.14 -16.116,0 -23.085,13.031 -23.085,29.14 v 55.068 H 223.418 L 223.409,90.79 c 0,-31.832 20.462,-57.63 52.299,-57.63 31.828,0 52.596,25.798 52.596,57.63 l 0.009,55.122" /><path
+               id="path3450"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 593.958,179.498 h 29.315 V 36.003 h -29.315 z" /><path
+               id="path3452"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 644.916,174.207 v 5.155 h 22.846 v -5.155 h -8.356 v -22.721 h -6.13 v 22.721 h -8.36" /><path
+               id="path3454"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 679.589,179.362 6.521,-19.167 h 0.078 l 6.166,19.167 h 8.633 v -27.876 h -5.739 v 19.756 h -0.08 l -6.831,-19.756 h -4.727 l -6.83,19.561 h -0.078 v -19.561 h -5.739 v 27.876 h 8.626" /></g></g><g
+           id="g3456"><g
+             clip-path="url(#clipPath3460)"
+             id="g3458"><g
+               clip-path="url(#clipPath3466)"
+               id="g3464"><path
+                 id="path3470"
+                 style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                 d="m 199.455,147.11 c -25.269,5.832 -41.21,-19.272 -41.872,-20.618 -0.325,-0.661 -0.338,-1.046 -1.457,-1.016 -0.925,0.019 -1.03,1.016 -1.03,1.016 l -3.136,19.203 H 125.699 V 36.098 h 29.437 v 59.323 c 0,4.848 13.054,28.091 38.346,22.108 12.792,-3.026 18.217,-8.453 18.217,-8.453 0,0 0,21.155 0,33.386 -4.733,2.468 -7.98,3.664 -12.244,4.648" /><path
+                 id="path3472"
+                 style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+                 d="m 396.794,119.339 c 16.225,0 29.374,-13.152 29.374,-29.365 0,-16.227 -13.149,-29.379 -29.374,-29.379 -16.222,0 -29.367,13.152 -29.367,29.379 0,16.213 13.145,29.365 29.367,29.365 z M 368.26,0 v 39.435 c 0.003,0 0.008,-0.004 0.01,-0.007 l 0.004,14.768 c 0,0 0.047,1.181 1.112,1.196 0.95,0.01 1.162,-0.619 1.393,-1.196 2.232,-5.554 14.507,-26.712 41.747,-20.075 24.385,6.869 42.271,29.261 42.271,55.853 0,32.04 -25.981,58.023 -58.027,58.023 -32.047,0 -58.026,-25.983 -58.026,-58.023 0,0 0,-79.32 0,-89.974 h 29.516" /></g></g></g><g
+           id="g3474"><g
+             clip-path="url(#clipPath3478)"
+             id="g3476"><path
+               id="path3482"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="m 553.378,89.974 c 0,-16.227 -13.15,-29.379 -29.369,-29.379 -16.223,0 -29.375,13.152 -29.375,29.379 0,16.213 13.152,29.365 29.375,29.365 16.219,0 29.369,-13.152 29.369,-29.365 z m -0.836,-53.925 h 29.516 v 53.925 c 0,32.04 -25.976,58.023 -58.025,58.023 -32.05,0 -58.028,-25.983 -58.028,-58.023 0,-26.592 17.886,-48.984 42.271,-55.853 27.243,-6.637 39.513,14.521 41.747,20.075 0.232,0.577 0.441,1.206 1.394,1.196 1.064,-0.015 1.108,-1.196 1.108,-1.196" /><path
+               id="path3484"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+               d="M 41.479,154.723 H 29.642 V 61.138 l 12.156,-0.311 c 24.93,0 40.986,2.268 40.986,47.092 0,42.984 -14.176,46.804 -41.305,46.804 z M 33.485,36.279 H 0 v 143.28 h 35.929 c 43.506,0 76.503,-7.983 76.503,-71.64 0,-63.044 -34.952,-71.64 -78.947,-71.64" /></g></g></g><text
+         xml:space="preserve"
+         style="font-size:8.61818px;line-height:1.25;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;stroke-width:0.280063"
+         x="108.91489"
+         y="152.94913"
+         id="text563"><tspan
+           sodipodi:role="line"
+           id="tspan561"
+           x="108.91489"
+           y="152.94913"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.61818px;font-family:Ubuntu;-inkscape-font-specification:'Ubuntu Bold';fill:#ffffff;stroke-width:0.280063">Translations</tspan></text></g></g></svg>

js/bluecheese.js

 (function ($) {
   $(document).ready(function() {
-    var windowsize = $(window).width(),
-      contentWidth = $('#content').width();
-    var machineName = $("#banner").find('.cta a').attr('class');
-    var storage = localStorage.getItem(machineName);
+    let windowsize = $(window).width();
+    let contentWidth = $('#content').width();
+    let machineName = $('#banner').find('.cta a').attr('class');
+    let storage = localStorage.getItem(machineName);
 
-    if (storage != 'closed') {
+    if (storage !== 'closed') {
       $("#banner").css('display', 'block').prepend( "<a class='close'>Close</a>" );
       $(".close").click(function() {
         $('#banner').hide();
@@ -14,8 +14,8 @@
     }
 
     if ($('body.drupalorg-site-api').length) {
-      var $apiFunctionSignature = $('#api-function-signature'),
-        apiFunctionSignatureWidth = $apiFunctionSignature.width();
+      let $apiFunctionSignature = $('#api-function-signature');
+      let apiFunctionSignatureWidth = $apiFunctionSignature.width();
 
       if (apiFunctionSignatureWidth > contentWidth || (apiFunctionSignatureWidth < 500 && apiFunctionSignatureWidth === contentWidth)) {
         $apiFunctionSignature.addClass('mobile-table');
@@ -23,7 +23,7 @@
 
       // Use mobile tables for narrow views tables.
       $('table.views-table').each(function() {
-        var $this = $(this);
+        let $this = $(this);
         if ($this.width() < 500 && $this.width() === contentWidth) {
           $this.addClass('mobile-table');
         }
@@ -31,10 +31,10 @@
     }
     else {
       $('table').not('#forum table').not('.page-user-track table').not('#project-usage-project-releases').each(function() {
-        var $this = $(this);
+        let $this = $(this);
 
         if ($this.parents('#drupalorg-issue-credit-form').length) {
-          // Do not use mobile tables for Credit & Comitting.
+          // Do not use mobile tables for Credit & Committing.
           return;
         }
 
@@ -74,10 +74,10 @@
       e.target.parentElement.classList.toggle('menu-expanded');
       e.target.setAttribute('aria-expanded', e.target.parentElement.classList.contains('menu-expanded') ? 'true' : 'false');
       e.preventDefault();
-    }).parent().find('a').andSelf().blur(function () {
+    }).parent().find('a').addBack().blur(function () {
       // Wait for next element to gain focus.
       setTimeout(function () {
-        var trigger = document.querySelector('#navigation-inner .menu-expanded');
+        let trigger = document.querySelector('#navigation-inner .menu-expanded');
         // Check if focused element is still in the expanded menu.
         if (trigger !== null && !trigger.contains(document.activeElement)) {
           trigger.classList.remove('menu-expanded');
@@ -102,7 +102,7 @@
       searchForm.addEventListener('blur', function () {
         // Wait for next element to gain focus.
         setTimeout(function () {
-          var trigger = document.querySelector('#nav-header.search-expanded');
+          let trigger = document.querySelector('#nav-header.search-expanded');
           // Check if focused element is still in the expanded menu.
           if (trigger !== null && !trigger.querySelector('#search-block-form').contains(document.activeElement)) {
             trigger.classList.remove('search-expanded');
@@ -118,9 +118,9 @@
 
     // Accordion.
     document.querySelectorAll('.accordion > h3').forEach(function (header) {
-      var content = header.nextElementSibling,
-        id = header.getAttribute('id'),
-        contentId = id + '-content';
+      let content = header.nextElementSibling;
+      let id = header.getAttribute('id');
+      let contentId = id + '-content';
 
       header.parentNode.classList.add('accordion-processed');
       content.setAttribute('id', contentId);

js/vertical-tabs.js

@@ -20,22 +20,22 @@ Drupal.behaviors.verticalTabs = {
     }
 
     $('.vertical-tabs-panes', context).once('vertical-tabs', function () {
-      var focusID = $(':hidden.vertical-tabs-active-tab', this).val();
-      var tab_focus;
+      let focusID = $(':hidden.vertical-tabs-active-tab', this).val();
+      let tab_focus;
 
       // Check if there are some fieldsets that can be converted to vertical-tabs
-      var $fieldsets = $('> fieldset', this);
-      if ($fieldsets.length == 0) {
+      let $fieldsets = $('> fieldset', this);
+      if ($fieldsets.length === 0) {
         return;
       }
 
       // Create the tab column.
-      var tab_list = $('<ul class="vertical-tabs-list"></ul>');
+      let tab_list = $('<ul class="vertical-tabs-list"></ul>');
       $(this).wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
 
       // Transform each fieldset into a tab.
       $fieldsets.each(function () {
-        var vertical_tab = new Drupal.verticalTab({
+        let vertical_tab = new Drupal.verticalTab({
           title: $('> legend', this).text(),
           fieldset: $(this)
         });
@@ -44,7 +44,7 @@ Drupal.behaviors.verticalTabs = {
           .removeClass('collapsible collapsed')
           .addClass('vertical-tabs-pane')
           .data('verticalTab', vertical_tab);
-        if (this.id == focusID) {
+        if (this.id === focusID) {
           tab_focus = $(this);
         }
       });
@@ -78,7 +78,7 @@ Drupal.behaviors.verticalTabs = {
  *   - fieldset: The jQuery object of the fieldset that is the tab pane.
  */
 Drupal.verticalTab = function (settings) {
-  var self = this;
+  let self = this;
   $.extend(this, settings, Drupal.theme('verticalTab', settings));
 
   this.link.click(function () {
@@ -89,7 +89,7 @@ Drupal.verticalTab = function (settings) {
   // Keyboard events added:
   // Pressing the Enter key will open the tab pane.
   this.link.keydown(function(event) {
-    if (event.keyCode == 13) {
+    if (event.keyCode === 13) {
       self.focus();
       // Set focus on the first input field of the visible fieldset/tab pane.
       $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus();
@@ -112,7 +112,7 @@ Drupal.verticalTab.prototype = {
     this.fieldset
       .siblings('fieldset.vertical-tabs-pane')
         .each(function () {
-          var tab = $(this).data('verticalTab');
+          let tab = $(this).data('verticalTab');
           tab.fieldset.hide();
           tab.item.removeClass('selected');
         })
@@ -165,7 +165,7 @@ Drupal.verticalTab.prototype = {
     // Hide the fieldset.
     this.fieldset.addClass('vertical-tab-hidden').hide();
     // Focus the first visible tab (if there is one).
-    var $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
+    let $firstTab = this.fieldset.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');
     if ($firstTab.length) {
       $firstTab.data('verticalTab').focus();
     }
@@ -187,13 +187,12 @@ Drupal.verticalTab.prototype = {
  *   - summary: The jQuery element that contains the tab summary
  */
 Drupal.theme.prototype.verticalTab = function (settings) {
-  var tab = {};
+  let tab = {};
   tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')
     .append(tab.link = $('<a href="#"></a>')
       .append(tab.title = $('<strong></strong>').text(settings.title))
-      .append(tab.summary = $('<span class="summary"></span>')
-    )
-  );
+      .append(tab.summary = $('<span class="summary"></span>'))
+    );
   return tab;
 };
 

layouts/panels/capricorn/capricorn.inc

-<?php
-// Plugin definition
-$plugin = array(
-  'title' => t('Capricorn'),
-  'icon' => 'capricorn.png',
-  'category' => t('Drupal.org'),
-  'theme' => 'capricorn',
-  'regions' => array(
-    'header' => t('Header'),
-    'primary' => t('Primary'),
-    'secondary' => t('Secondary'),
-    'tertiary_first' => t('Tertiary First'),
-    'tertiary_second' => t('Tertiary Second'),
-    'tertiary_third' => t('Tertiary Third'),
-    'tertiary_footer' => t('Tertiary Footer'),
-    'quaternary' => t('Quaternary'),
-    'quinary' => t('Quinary'),
-    'senary' => t('Senary'),
-    'septenary' => t('Septenary'),
-    'octonary' => t('Octonary'),
-    'nonary_header' => t('Nonary Header'),
-    'nonary_first' => t('Nonary First'),
-    'nonary_second' => t('Nonary Second'),
-    'nonary_third' => t('Nonary Third'),
-    'nonary_footer' => t('Nonary Footer'),
-    'denary' => t('Denary'),
-    'footer' => t('Footer'),
-    'translations' => t('Translations'),
-  ),
-);

layouts/panels/capricorn/capricorn.tpl.php

-<?php
-/**
- * @file
- * Template for Department Landing Pages.
- *
- * Variables:
- * - $css_id: An optional CSS id to use for the layout.
- * - $content: An array of content, each item in the array is keyed to one
- * panel of the layout. This layout supports the following sections:
- */
-?>
-
-<div class="capricorn panel-layout clearfix <?php if (!empty($class)) { print $class; } ?>" <?php if (!empty($css_id)) { print "id=\"$css_id\""; } ?>>
-
-  <?php if ($content['header']): ?>
-    <div class="container header clearfix">
-      <div class="container-inner header-inner">
-        <?php print $content['header']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['primary']): ?>
-  <div class="container primary clearfix">
-    <div class="container-inner primary-inner">
-      <?php print $content['primary']; ?>
-    </div>
-  </div>
-  <?php endif; ?>
-
-  <?php if ($content['secondary']): ?>
-    <div class="container secondary clearfix">
-      <div class="container-inner secondary-inner">
-        <?php print $content['secondary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['tertiary_first'] || $content['tertiary_second'] || $content['tertiary_third'] ): ?>
-    <div class="container tertiary clearfix">
-      <div class="container-inner tertiary-inner">
-        <div class="tertiary-wrapper">
-          <div class="column-content-region tertiary-first">
-            <div class="column-content-region-inner tertiary-first-inner">
-              <?php print $content['tertiary_first']; ?>
-            </div>
-          </div>
-          <div class="column-content-region tertiary-second">
-            <div class="column-content-region-inner tertiary-second-inner">
-              <?php print $content['tertiary_second']; ?>
-            </div>
-          </div>
-          <div class="column-content-region tertiary-third">
-            <div class="column-content-region-inner tertiary-third-inner">
-              <?php print $content['tertiary_third']; ?>
-            </div>
-          </div>
-        </div>
-        <div class="tertiary-footer">
-          <div class="tertiary-footer-inner">
-            <?php print $content['tertiary_footer']; ?>
-          </div>
-        </div>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['quaternary']): ?>
-    <div class="container quaternary clearfix">
-      <div class="container-inner quaternary-inner">
-        <?php print $content['quaternary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['quinary']): ?>
-    <div class="container quinary clearfix">
-      <div class="container-inner quinary-inner">
-        <?php print $content['quinary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['senary']): ?>
-    <div class="container senary clearfix">
-      <div class="container-inner senary-inner">
-        <?php print $content['senary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['septenary']): ?>
-    <div class="container septenary clearfix">
-      <div class="container-inner septenary-inner">
-        <?php print $content['septenary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['octonary']): ?>
-    <div class="container octonary clearfix">
-      <div class="container-inner octonary-inner">
-        <?php print $content['octonary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['nonary_header'] || $content['nonary_first'] || $content['nonary_second'] || $content['nonary_third'] || $content['nonary_footer'] ): ?>
-    <div class="container nonary clearfix">
-      <div class="container-inner nonary-inner">
-        <div class="nonary-header clearfix">
-          <div class="nonary-header-inner">
-            <?php print $content['nonary_header']; ?>
-          </div>
-        </div>
-        <?php if ($content['nonary_first'] || $content['nonary_second'] || $content['nonary_third']): ?>
-          <div class="nonary-wrapper">
-            <div class="column-content-region nonary-first">
-              <div class="column-content-region-inner nonary-first-inner">
-                <?php print $content['nonary_first']; ?>
-              </div>
-            </div>
-            <div class="column-content-region nonary-second">
-              <div class="column-content-region-inner nonary-second-inner">
-                <?php print $content['nonary_second']; ?>
-              </div>
-            </div>
-            <div class="column-content-region nonary-third">
-              <div class="column-content-region-inner nonary-third-inner">
-                <?php print $content['nonary_third']; ?>
-              </div>
-            </div>
-          </div>
-        <?php endif; ?>
-        <div class="nonary-footer clearfix">
-          <div class="nonary-footer-inner">
-            <?php print $content['nonary_footer']; ?>
-          </div>
-        </div>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['denary']): ?>
-    <div class="container denary clearfix">
-      <div class="container-inner denary-inner">
-        <?php print $content['denary']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['footer']): ?>
-    <div class="container footer clearfix">
-      <div class="container-inner footer-inner">
-        <?php print $content['footer']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-  <?php if ($content['translations']): ?>
-    <div class="container translations clearfix">
-      <div class="container-inner translations-inner">
-        <?php print $content['translations']; ?>
-      </div>
-    </div>
-  <?php endif; ?>
-
-
-</div><!-- /.sutro -->

layouts/panels/cygnus/cygnus.inc

-<?php
-// Plugin definition
-$plugin = array(
-  'title' => t('Cygnus'),
-  'icon' => 'cygnus.png',
-  'category' => t('Drupal.org'),
-  'theme' => 'cygnus',
-  'regions' => array(
-    'preface' => t('Preface'),
-    'content' => t('Content'),
-    'footer' => t('Footer'),
-  ),
-);