Site Updates: Navigation

Updated navigation bar
Updated navigation bar

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 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 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.

html
<a href="<?php echo $route ?? null; ?>" class="
  <?php
    $hiddenLabels = [ 'Profile' ];
    if (in_array($label, $hiddenLabels)) { echo ' data-hidden'; }
    if ($navigation->isActive($route ?? null)) { echo ' data-active'; }
  ?>
">
  <?php echo icon($icon ?? null); ?>
  <span title="<?php echo $label ?? null; ?>">
    <?php echo $label ?? null; ?>
  </span>
</a>

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

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

html
<column-middle>
  <?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');
  ?>
</column-middle>

In frameworks like Laravel, this templating method can take on a more 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.

php
@component ('components.navigator')

  @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
<?php
  $links = true;
  $id = 'navigation';
  $icon = icon('arrow-down-circle');
  $label = <<<insert
      $icon
      <span>More</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 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.

Basic context menu component
Basic context menu component

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 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.

Searching through a small index in a personal work in progress application

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.

nix
{
  services.thedroneely.enable = true;
  services.thedroneely.development.enable = true;
  services.thedroneely.staging.enable = true;
  services.thedroneely.production.enable = true;
}
30 April 2021 — Written
30 April 2021 — Updated
Thedro Neely — Creator
site-updates-navigation.md — Article

More Content

Openring

Web Ring

Comments

References

  1. https://thedroneely.com/git/
  2. https://thedroneely.com/
  3. https://thedroneely.com/posts/
  4. https://thedroneely.com/projects/
  5. https://thedroneely.com/about/
  6. https://thedroneely.com/contact/
  7. https://thedroneely.com/abstracts/
  8. https://ko-fi.com/thedroneely
  9. https://thedroneely.com/tags/webdev/
  10. https://thedroneely.com/posts/site-updates-navigation/#isso-thread
  11. https://thedroneely.com/posts/rss.xml
  12. https://thedroneely.com/images/site-updates-navigation.png
  13. https://thedroneely.com/posts/site-updates-navigation/#improvements
  14. https://www.php.net/
  15. https://golang.org/
  16. https://gohugo.io/
  17. https://en.wikipedia.org/wiki/Null_coalescing_operator
  18. https://thedroneely.com/posts/site-updates-navigation/#code-block-4a3a5b2
  19. https://thedroneely.com/posts/site-updates-navigation/#code-block-ea8b826
  20. https://github.com/laravel/laravel
  21. https://laravel.com/docs/8.x/blade
  22. https://thedroneely.com/posts/site-updates-navigation/#code-block-fcb3e3c
  23. https://thedroneely.com/posts/site-updates-navigation/#code-block-64e1b53
  24. https://stitcher.io/blog/php-8-named-arguments
  25. https://stitcher.io/blog/php-in-2021#the-language
  26. https://thedroneely.com/images/site-updates-navigation-context-menu.png
  27. https://thedroneely.com/posts/site-updates-navigation/#goals
  28. https://thedroneely.com/posts/site-updates-navigation/#comprehensive-dark-and-light-mode
  29. https://www.kooslooijesteijn.net/blog/add-dark-mode-to-website
  30. https://thedroneely.com/posts/site-updates-navigation/#search-engine
  31. https://en.wikipedia.org/wiki/Vertical_search
  32. https://thedroneely.com/videos/product-search-engine.mp4
  33. https://thedroneely.com/posts/site-updates-navigation/#deployment
  34. https://github.com/drone/drone
  35. https://github.com/NixOS
  36. https://thedroneely.com/posts/site-updates-navigation/#code-block-ed3bd69
  37. https://www.thedroneely.com/posts/site-updates-navigation.md
  38. https://thedroneely.com/posts/typesetting-in-latex/
  39. https://thedroneely.com/posts/cooking-and-baking-linux-distributions-in-nix/
  40. https://thedroneely.com/posts/good-evil-and-the-law/
  41. https://git.sr.ht/~sircmpwn/openring
  42. https://drewdevault.com/2022/11/12/In-praise-of-Plan-9.html
  43. https://drewdevault.com/
  44. https://mxb.dev/blog/the-indieweb-for-everyone/
  45. https://mxb.dev/
  46. https://www.taniarascia.com/simplifying-drag-and-drop/
  47. https://www.taniarascia.com/
  48. https://thedroneely.com/posts/site-updates-navigation#isso-thread
  49. https://thedroneely.com/posts/site-updates-navigation#improvements
  50. https://thedroneely.com/posts/site-updates-navigation#code-block-4a3a5b2
  51. https://thedroneely.com/posts/site-updates-navigation#code-block-ea8b826
  52. https://thedroneely.com/posts/site-updates-navigation#code-block-fcb3e3c
  53. https://thedroneely.com/posts/site-updates-navigation#code-block-64e1b53
  54. https://thedroneely.com/posts/site-updates-navigation#goals
  55. https://thedroneely.com/posts/site-updates-navigation#comprehensive-dark-and-light-mode
  56. https://thedroneely.com/posts/site-updates-navigation#search-engine
  57. https://thedroneely.com/posts/site-updates-navigation#deployment
  58. https://thedroneely.com/posts/site-updates-navigation#code-block-ed3bd69
  59. https://thedroneely.com/posts/finding-that-one-percent/
  60. https://thedroneely.com/posts/writing-strategy/
  61. https://thedroneely.com/posts/running-nixos-linux-containers/
  62. https://thedroneely.com/posts/ssh-port-forwarding/
  63. https://thedroneely.com/posts/nixos-in-the-wild/
  64. https://thedroneely.com/posts/my-ts100-settings-and-configuration/
  65. https://drewdevault.com/2022/09/16/Open-source-matters.html
  66. https://mxb.dev/blog/make-free-stuff/
  67. https://thedroneely.com/sitemap.xml
  68. https://thedroneely.com/index.json
  69. https://thedroneely.com/resume/
  70. https://gitlab.com/tdro
  71. https://github.com/tdro
  72. https://codeberg.org/tdro
  73. https://thedroneely.com/analytics
  74. https://thedroneely.com/posts/site-updates-navigation#
  75. https://creativecommons.org/licenses/by-sa/2.0/
  76. https://thedroneely.com/git/thedroneely/thedroneely.com
  77. https://opensource.org/licenses/GPL-3.0
  78. https://www.thedroneely.com/
  79. https://thedroneely.com/posts/site-updates-navigation/#