D728 Task-23 Pre-process output provided by other modules

lotus.libraries.yml

lotus-js:
  version: 1.x
  js:
    js/lotus.js: {}
  dependencies:
    - core/jquery

lotus.module

/**
* Implements hook_preprocess_page()
* $variables contains all variables used for the template.
* $hook should be ‘page’ in this case. 
**/
Function lotus_preprocess_page(&$variables, $hook) {
  // Rendering a table inside the template
  // Using a render array is the best practice here - Twigg will render it correctly.
  $variables['table'] = array(
    '#theme' => 'table',
    '#header' => $header,
    '#rows' => $rows,
  );

  //Add a JS library
  $variables['#attached']['library'][] = 'lotus/lotus-js';
}

* Implements hook_theme_suggestions_page_alter()
* $variables contains all variables used for the template.
* $suggestions will contain the current suggestions for the hook 
* ‘page’ in this case. 
**/

Function lotus_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  // Add a new suggestion for a page template
  // This allows us to use a template name page--lotus.tpl.php
  $suggestions[] =  'page__lotus';
}

page--lotus.htm.twig

// Add classes in templates is a preferred way in Drupal 8
{%
  set classes = [
    'new-class',
  ]
%}
<div{{ attributes.addClass(classes) }}>
  // Print the table variable
  <div class=’table’>
    {{ table }}
  </div>
  //Print the text and link to create new content
  <p>{{ 'To create some content <a href="@create-content">click here</a>.'|t({'@create-content': url('admin/structure/types/add')}) }}</p>
</div>