Site Updates: Navigation

Time has granted a small reprieve to work on the greatest pain point of my personal website — the navigation bar. Due to sheer laziness, the navigation bar was initially implemented as three separate bars for each of the main views (tablet, phone, and desktop devices). This created unnecessary friction when adding new items. In the long term, the goal of integrating more programs into the website will require a certain consistency and so the navigation bar must be unified across all views.

Improvements

My website is glued together with PHP Make of that what you will. PHP is probably the most hated programming language. on the back–end. You’ll often hear that PHP has native templating Eventually the navigation components may be moved into a Go HTML template, and generated statically by Hugo. abilities and that is true. To solve my problem of multiple navigation bars, a templating system is used to create scoped components using null coalescing operators to set the defaults. This bespoke component navigator.link describes a navigation link. Three parts receive or pass data: the attributes, the content, and optionally, a faux return clause.

<a href="<?php echo $route ?? null; ?>" class="navbar-item navbar__icon has-text-centered
  <?php
    $hiddenLabels = [ 'Profile' ];
    if (in_array($label, $hiddenLabels)) { echo ' navbar__icon__hidden'; }
    echo $check = ($label === 'Home')
      ? ($navigation->isActiveHome() ? ' navbar__active' : '')
      : ($navigation->isActive($route ?? null) ? ' navbar__active' : '');
  ?>
">
  <div class="has-text-centered">
    <?php echo icon($icon ?? null); ?>
    <p title="<?php echo $label ?? null; ?>" class="navbar__icon__label"><?php echo $label ?? null; ?></p>
  </div>
</a>

<?php $route = $label = $icon = null; ?>

Since this component is described in a file, it is cascaded anywhere using require.

<div class="navbar__middle column is-7">
  <?php
    $route = '/';          $label = 'Home';     $icon = 'home';      require views('components', 'navigator.link');
    $route = '/posts/';    $label = 'Posts';    $icon = 'feather';   require views('components', 'navigator.link');
    $route = '/projects/'; $label = 'Projects'; $icon = 'package';   require views('components', 'navigator.link');
    $route = '/about/';    $label = 'Profile';  $icon = 'file-text'; require views('components', 'navigator.link');
    $route = '/contact/';  $label = 'Contact';  $icon = 'mail';      require views('components', 'navigator.link');
  ?>
</div>

In frameworks like Laravel, this templating method can take on a more abstracted You know the saying: As clean as a whistle. Corporate types would rather the code below than the code above. form where components may contain scoped CSS or JavaScript that can be “extracted” into one final payload. Laravel uses Blade syntax for templating.

@component ('components.navigator', ['class' => 'text-gray-100 bg-blue-700'])

  @slot ('left')
    @include ('navigator.partials.menu')
    @include ('navigator.partials.logo')
    @include ('navigator.partials.header')
  @endslot

  @slot ('middle')
    @include ('navigator.partials.title')
  @endslot

  @slot ('right')
    @include ('navigator.partials.search')
    @include ('navigator.partials.list')
    @include ('navigator.partials.user')
    @include ('navigator.partials.options')
  @endslot

@endcomponent

@component ('components.context-menu', ['extract' => 'style']) @endcomponent
@component ('components.context-overlay', ['extract' => 'style']) @endcomponent

Templates can also be nested indefinitely. Here’s the unified context menu component that contains nested HTML elements inside the label that is stacked or cascaded in different places around the website.

<?php
  $links = true;
  $id = 'mobile-compact';
  $type = 'is-menu is-right';
  $icon = icon('arrow-down-circle');
  $label = <<<insert
    <span class="is-block has-text-centered">
      $icon
      <span class="is-block navbar__icon__label">More</span>
    </span>
  insert;
  require views('components', 'context.menu');
?>

You’ll notice that namespacing could become an issue, particularly for code below the fold, and ideally data would be passed as arguments In PHP version 8 one could simplify and structure view code further with named arguments and other niceties. to the views function, but this somewhat CSS like behavior is preferred for duplicating components of a similar type quickly.

Goals

More interesting tasks are on my to–do list and may be completed if the time allows.

Comprehensive Dark and Light Mode

The dark mode on the site isn’t implemented all that well. One of my goals is to implement comprehensive dark mode features. In reality CSS is the only necessity, but adding some of the minor features may prove useful. One such feature involves situations where light and dark mode changes apply to all open tabs of the site. The most comprehensive guide on implementing dark mode that I’ve come across is written in this blog post.

Search Engine

The idea of a vertical search engine where the search scope is limited to a specific set of curated sites looks promising. Here’s to hoping somebody makes a nice and simple Go would be a good language for writing a search engine. vertical search engine that is easy to integrate into a blog, or maybe I’ll make my own. Lately, I’ve been playing around with building a search engine from scratch for something else that I’m interested in personally.

Deployment

The deployment situation for the website is looking up. The CI/CD (Continuous Integration and Deployment) situation, previously Drone, was replaced with NixOS and now the website deploys instantly. The deployment logic lives on the server itself. The development, staging, and production environments are setup and activated with a simple NixOS module.

{
  services.thedroneely.enable = true;
  services.thedroneely.development.enable = true;
  services.thedroneely.staging.enable = true;
  services.thedroneely.production.enable = true;
}