Table of Contents

• Before you start
  • About HUGO versioning
• The process for making updates
• Updating metadata
• Social media connections
• Updating the site
  • General components
  • Home page
    • Service section
    • In Action section
    • About section
    • Contact section
  • Getting Started Section
    • Overall formatting
    • Introduction
    • The steps listing
    • Step 1
    • Step 2
    • Step 3
    • Step 4
    • Step 5

IMPORTANT!! ALL CHANGES to the website should be made in branches that are merged via a pull request into the Master Branch.

The site is deployed from the Live branch.

Changes should NEVER be committed directly to the Live branch - this will not work. They must be put onto the master branch and then submitted by pull request to the Live branch. The reason that this process is required is twofold:

1. there are critical site checks that are performed to ensure that the site builds correctly, and
2. this process also provides an opportunity to preview the changes before they go live - an important best practice.

If this process is not followed, the site will not build.

Occasionally a Hugo update will provide functionality that you'll want to leverage on the site. This situation happened in early 2020 when we wanted to include code syntax highlighting on the site which is only available in version 0.60 and later. The sit was originally published with version 0.51 of Hugo.

When updating, you will first need to update the Hugo version on your own computer. In addition, you'll need to update the Hugo version used for the build by making changes in the file at the Netlify site: https://app.netlify.com/sites/seamlessaccess-web/settings/deploys

In the "Environment" section of the deploy settings, set the HUGO_VERSION to the version you are using. Be sure to use the version number as shown on the gohugoio/hugo repository release page (without the preceding 'v'), for example, '0.69.0'

1. Make and check the changes that you are going to make. ** Before making and saving changes, it is a good idea to create and use a branch for your changes

2. Run the pages locally to make sure that they look okay

   • Type hugo server -D on the command line to run the website on your computer. You will need to type this command from the folder where your website files are stored.
   • Navigate to http://localhost:1313/ in your browser to see the site locally. What you see here is NOT what is currently on the website
   • You can make changes in the files and (for most changes) when you save them in your files, the changes will be reflected on your local branch and in your browser (if hugo is still running.)
   • to stop your local website from running, type control-C from your keyboard.

3. When you are satisfied with your additions and changes, make sure that all of your changes have been committed to the master branch on Github. (It's a great idea to do this from a separate branch, and make a pull commit to contribute these changes to the site.)

4. Create a pull request from the Master branch to the Live branch. This action will build the static site in Hugo, and run some diagnostics to ensure that the build worked well. You will need to wait until all of the checks have completed before doing the next step:

5. Once the checks are complete, preview the site by clicking the "details" link on deploy-preview. Review all of the pages that you changed, and check all of the links. If anything needs to be corrected, make the corrections in the master branch. You should be able to see the changes in the deploy preview once the build is complete.

6. Once you're happy with the changes, merge the pull request to push the changes to production.

The information displayed in the site sub-footer is contained in the data > contact.yaml file. If any item is left blank (empty inside of the quotes), it will not display in the footer.

To add things to this subfooter, the Layouts > Partials > sub-footer.html file must be edited to include these items.

NOTE: the Business Name is displayed in the copyright in the main footer and in the address if one exists.

The site has been encoded with social media for the following types:

• Twitter
• YouTube
• Instagram
• LinkedIn
• Medium
• Facebook
• ORCID

To add social media links, update the social data file

data > social.yaml

Only items with a value will be displayed. If you do not want to include one of these social types, just leave the value blank.

Social media is configured to be displayed for any item with a value in the data file.

Displaying in the footer

It will display in the footer as the social media icon which is also a link to the social media asset. The link will follow that put into the data file. To edit the display, you will need to edit the partial found at

themes > hugo-hero-theme > layouts > partials > social.html

Displaying elsewhere on the site

If you want to dipslay the soical media links on a page somewhere, you can do so by including the following text in your markdown file:

{{< socialinfo >}}

This addition will display a list of the available social media assets with the social logo and a short phrase liek "Follow us on twitter". To edit the display, you will need to edit the shortcode found at

layouts > shortcodes > socialinfo.html

These are stored in the static/images folder

• The site logo must be called logo.svg
• There must be a mobile version of the logo which must be called logo-mobile.svg
• If either logo needs to be changed, its file can just be replaced in this folder.

• This image is stored in the static folder and must be called favicon.png

The home page hero is specified in the content/_index.md file which contains the following parameters:

• date: The date & time that this section was last updated. This date is not displayed anywhere, but updating it can be handy for others who may be editing this part of the page
• heroHeading: This is the header text displayed in the hero
• heroSubHeading: This is the sub header text displayed in the hero
• heroBackground: This is the background image displayed. This image is automatically colored by the general site color settings (see above). The image must be added to the folder static/images and the file name in this markdown file should reflect the name of the file that you want displayed (note: the file name is in quotes, and is in the format 'images/<file-name>')

The rest of the home page is configured in the content/homepage folder. Each markdown file describes a section of the home page. The index.md file will not need to be edited.

For each section of the site, you will create a new markdown page (with the exception of one section which is described below.) Each markdown file has a header and a body.

In the header:

• title: The header text in the section
• weight: A number representing the order that this section should appear on the home page
• background (optional): The background image that should be displayed, if any. As will the hero background, the file should be stored in the static/images folder, and the file name is listed here. (note: the file name is in quotes, and is in the format 'images/<file-name>'). If there should be no background image, use the value ''.
• button (optional): The text that should be displayed on a button.
• buttonLink (included if there is a button value): Where the reader should be directed when they click the button.

In the body of the markdown file, you should include the text that you want to display under the header.

This content is stored in the content > services folder

The content included in the services folder are used in multiple places:

• As single pages
• As summaries, such as on the home page
• As a list of services, for example, on the services landing page

From a content perspective, each page should have the following header elements:

This content is stored in the content > work folder. There is no menu pick for this content - it is displayed on the home page and at the bottom of the services page.

Use cases are displayed from the "In Action" section on the home page. There is no top-level link to this content. The In Action section provides links to demos, videos, etc; lists of implementations; and use cases that one can use to get a sense of how SeamlessAccess works, and who is using it.

The content for this section is stored in the content > work folder. The _index.md page provides the front matter for the In Action section, and each additional page listed serves as a use case. For each use case, you will need the following header elements:

This content is stored in the content > about folder.

This is written in markdown in the index.md file. There is a header that affects the background image:

Each subsection is a separate page in the about folder. They are displayed in order by their weight. The intro paragraph is "highlighted" with emphasized text. The headers for these pages should be as follows:

The information displayed in the box comes from the following file:

content > homepage > contact.md

• Title = blue “Get Involved” text. Note that it displays in title case regardless of how you type it in at the metadata
• Background = the background image in this section. NOTE: the background is an overlay of the light grey color on the site. If no image is included, the background will be light grey by default
• Button = the text displayed in the button. Note that it will be in all caps regardless of how it is expressed in the metadata buttonLink = the page that the reader will go when clicking the button - this is currently configured to go to the “contact” section of the site, or the content at content > contact > _index.md
• Body = whatever you put into the body of this file will display in this box on the home page. You can use normal markdown formatting.
• Weight = Please leave this number as-is. It is currently used as a shortcut for the rendering engine to know which content from the homepage content folder goes in this box.

To format this section, you need to edit the following file:

layouts > index.html

At the time of this writing, the rendering of this box can be found in lines 103-115 of this file.

103      <!-- Contact -->
104      {{ range first 1 $reusablePages }}
105      <div class="col-12 col-md-4">
106        <div class="row bg-ltgrey bg-cover bg-position-top bg-overlay pt-4 pb-4" style='background-image: url("{{ .Params.background | relURL }}");'>
107          <div class="col-2"></div>
108          <div class="col-8">
109          <h2 class="text-primary text-capitalize">{{ .Title }}</h2>
110          <p>{{ .Content }}</p>
111          <a class="button" href="{{ .Params.buttonLink | relURL }}">{{ .Params.button }}</a>
112          </div>
113          <div class="col-2"></div>
114        </div>
115      </div>
116      {{ end }}

• Lines 104 & 116 functionality select the contact.md file from the homepage content folder.
• The div in line 105 places the block in 4 columns (of the 12 column block to place it next to the recent news section (which is 8 columns). This arrangement is if the responsive size is medium or larger. If smaller, this block takes up the full width of the screen (12 columns)
• Lines 107, 108 and 113 makes a 2:8:2 size ratio across the width - blankspace to content block to blankspace.
• Line 109 uses the “title” parameter in the home page content (above) and renders it capitalized in H2 size in the primary color (blue)
• Line 120 renders the content (body) in the home page content (above). It uses the style sheet used over the rest of the home page.
• Line 111 renders the button which links to the page listed in the buttonLink parameter and displays the text in the button parameter as displayed in the home page content (above)

When the user clicks the button on the home page, they will be brought to the “contact” page. The content for this page can be found here:

content > contact > _index.md

The layout for this page uses can be found here:

layouts > contact > contact.html

Site wide data that are used in the contact page can be found in the following file:

data > contact.yaml

• email
• phone
• businessName
• address - note that the address is only displayed if there is one configured
• url

The landing page for this section is a little different from the others - it is organized more like the Home Page is. Since each part of the landing page for Getting Started is slightly different from the others, it is less configurable than the other pages on the site, and will require some HTML in some cases to make adjustments. This is where you find each of the pieces of content for the page:

The Getting Stated page is formatted in the file layouts > work > list.html. Page-specific styling for this page can be found in assets > pages > work > _page-work-list.scss_ (Though, at the time of this writing, this file is empty.) It is best for someone who is familiar with HTML and/or CSS to edit these files. However, some of the content can be updated by non-coders

CONTENT LOCATION: content > work > _index.md

The lead-in content and hero image are specified in the index file in the work section.

CONTENT LOCATION: data > startedsteps.json

The steps listed here are configured in a data file to make them easier to adjust if necessary. Each mini-block (image with a description) is a separate object listed in the data file. The header of this section is configured in the HTML for this section - see below.

CONTENT LOCATION (Landing page section): layouts > partials > work-step-1.html

The content displayed on the Getting Started landing page and that on the Step 1 content page are in different locations.

CONTENT LOCATION (Interior page section): content > work > step1.md

The interior pages of this section have a few attributes that can be used to control content. Otherwise the content is managed as it is with other pages on the site. The page attributes for the interior pages in the Getting Started section (content > work folder)

CONTENT LOCATION (Landing page section): data > implementflavors.json

The implementation flavors listed here are configured in a data file to make them easier to adjust if necessary. Each mini-block (image with a title and description) is a separate object listed in the data file. The header for this section and lead in for the implementation flavors are configured in the landing page HTML file as describe in the "Overall formatting" section above.

CONTENT LOCATION (Interior page section): content > work > step2.md

This page is configures as for Step 1 described above.

CONTENT LOCATION (Landing page section): layouts > partials > work-step-3.html

The content displayed on the Getting Started landing page and that on the Step 3 content page are in different locations.

CONTENT LOCATION (Interior page section): content > work > step3.md

This page is configures as for Step 1 described above.

CONTENT LOCATION (Landing page section): layouts > partials > work-step-4.html

The content displayed on the Getting Started landing page and that on the Step 4 content page are in different locations.

CONTENT LOCATION (Interior page section): content > work > step4.md

This page is configures as for Step 1 described above.

CONTENT LOCATION (Landing page section): layouts > partials > work-step-5.html

The content displayed on the Getting Started landing page and that on the Step 5 content page are in different locations.

CONTENT LOCATION (Interior page section): content > work > step5.md

This page is configures as for Step 1 described above.