Sitewide Handlebars Details

by Will Moody

Creating a details.yml file which looks like the one below helps greatly, this gives me a bunch of details which only have to be changed once to update all pages and partials :-

details.yml

company: 'Boilerplate-Test'
address: '11 Boiler Road'
village: 'Boiler'
city: 'Norwich'
county: 'Norfolk'
postcode: 'NR13 4BB'
displaytelephone: '01603 718555'
telephone: '01603718555'
displaymobile: '07948 964555'
mobile: '07948964555'
author: 'John'
sitename : 'Boilerplate-Test'
domain: 'https://www.boilerplatetest.co.uk'
emailfirst: 'info'
emaillast: 'boilerplatetest.uk'
twitterusername: '@boilerplate'
twittercreator: '@boilerjohn

This then allows me to use code like this in the footer, which on build calls in any data from the details.yml file, really simple but a great time saver.

footer

<footer><!-- footer -->
  <div class="address">
    <ul>
      <li class="bold">{{details.sitename}}</li>
      <li>{{details.address}}</li>
      <li>{{details.village}}</li>
      <li>{{details.city}}</li>
      <li>{{details.county}}</li>
      <li>{{details.postcode}}</li>
      <li class="vcard" itemscope="" itemtype="http://schema.org/Organization">
        <a class="tel" itemprop="telephone" href="tel:{{details.mobile}}" aria-label="{{details.sitename}} Mobile Phone Number">
          <svg class="icon">
            <use xlink:href="../assets/svg/regular.svg#mobile"></use>
          </svg>{{details.displaymobile}}</a>
      </li>
      <li class="vcard" itemscope="" itemtype="http://schema.org/Organization">
        <a class="tel" itemprop="telephone" href="tel:{{details.telephone}}" aria-label="{{details.sitename}} Phone Number">
          <svg class="icon">
            <use xlink:href="../assets/svg/regular.svg#phone"></use>
          </svg>{{details.displaytelephone}}</a>
      </li>
      <li><svg class="icon"><use xlink:href="../assets/svg/regular.svg#envelope-o"></use></svg>
        <script type="text/javascript">
        document.write('<a href="mailto:' + first + '@' + last + '">' + first + '@' + last + '<\/a>');
        </script>
     </li>
    </ul>
  </div>
</footer><!-- /footer -->

Another area in which I use data from the details.yml file is the the head section, this is combined with front matter from the individual pages.

head

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{metatitle}}</title>
  <meta name="description" content="{{description}}">
  <meta name="keywords" content="{{keywords}}">
  <meta name="author" content="{{details.author}}">
  <meta name="robots" content="index,follow,noodp">
  <meta name="googlebot" content="index,follow">
  <meta name="google" content="nositelinkssearchbox">
  <meta name="google" content="notranslate">
  <meta name="language" content="English">
  <meta name="rating" content="General">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{metatitle}}">
  <meta property="og:url" content="{{details.domain}}/{{pagename}}.{{pagetype}}">
  <meta property="og:site_name" content="{{details.sitename}}">
  <meta property="og:description" content="{{description}}">
  <meta property="og:image" content="{{details.domain}}/assets/images/og.jpg">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="{{details.twitterusername}}">
  <meta name="twitter:creator" content="{{details.twittercreator}}">
  <meta name="twitter:title" content="{{metatitle}}">
  <meta name="twitter:description" content="{{description}}">
  <meta name="twitter:image" content="{{details.domain}}/assets/images/twitter.jpg">
  <link rel="canonical" href="{{details.domain}}/{{pagename}}.{{pagetype}}">
  <link rel="alternate" href="{{details.domain}}/{{pagename}}.{{pagetype}}" hreflang="en-gb">
  <!-- css -->
  <style></style>
  <link rel="stylesheet" href="{{baseurl}}/assets/styles/main.css?v={{release}}" media="screen">
  <link rel="stylesheet" href="{{baseurl}}/assets/styles/print.css?v={{release}}" media="print">
  <!-- Favicon -->
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <script>
    var first = "{{details.emailfirst}}";
    var last = "{{details.emaillast}}";
  </script>

frontmatter for index.html

---
metatitle: Home | Boilerplate | Blofield Heath
description: Boilerplate offer great deals on all sorts of stuff.
keywords: Boilerplate, Home, 
pagename: index
pagetype: html
pagetitle: Index
active: { index: true }
background: background-image
slogan: Monday Monday
---

One neat trick I have found is using the script code at the very bottom of the head which splits the email address and then along with the script at the end of the footer displays the email address but is good at reducing spam.

From the head code you can see the css calls ?v={{release}}, this is explained in this post.