Landing pages


Adding a new landing page

When creating new landing page it is important to create a file in _expertise folder and folder in images with the same names:

1.) Create a new file.md in expertise folder

_expertise/"code.md"

If the name of the file is same as a landing page topic it will save some work with filling the blocks. But at the same time it is better to avoid dashes and too long names.

In order to have no content displayed in the header of the page it is important to add no-header:true in the pages front matter. Front matter are informations passed in the first lines of the .md document. They are placed within triple dashes at the beginning of the document.

The title of the page is not necessary to be listed at all. But if so it has to be the same as the file name.

In order to display avatars in the social media it is important to add avatar: /images/…address of the picture in the front matter.

---
title: code
no-header: true
---

2.) Creating a same called folder in images/expertise/”new-landing-page-name”/*

In this case it would look like this: images/expertise/code/*

Creating the content in .md file

in the markdown file after the front matter is closed the content can be filled. That is done by including a html blocks and passing in the data:

There are three types of blocks. The examples how includes should look are always written in the code font. Important thing is to wrap those snippets of code into brackets with percentage symbol. Example of landing page syntax can be found in the expertise/code.md

1.) Banner-block.html

This block is used to create most of the content. Each of the blocks can have following properties: Only title is required.

include expertise/banner-block.html
  color="orange"
  title="What is Continuous Delivery?"
  description="Continuous Delivery is an approach to software engineering that advocates short development cycles and frequent software releases that are uneventful, safe, and sustainable. We achieve Continuous Delivery by creating automated pipelines where code is always in a deployable state."

color="orange", "blue", "grey"

Default: the white background. It changes the background color of the whole block.

title="the only mandatory field"

description="description"

button="when adding a button it is important to also fill in the link"

link="the button link"

There is few optional data-tags that create more specific content in this banner:

customers=page.customers

This creates a styled list of customers icons. If this line is added it is pointing us to the pages front matter where the list of the customers has to be listed as well. In order to make it work the image with logo has to be placed in images/customers/* in the .png format. The name listed has to match the name of the picture. In the end of the front matter we write something like this:

customers:
    - agnitio
    - ajour
    - almbrand

icons=page.icons

This creates a styled list of icons. It works similarly to the customer section. In front matter for each icon we need to fill the title + description. On top of that - each icon image has to be called the same as the icons.title of the each icon. And has to be placed in images/expertise/code/"icon-title.png" in the .png format.

In case it for some reason needs to be done otherwise, it is also possible to list the “image” in the icons. The image needs to be placed in the same folder and then can be linked only by listing its name. It does not have to be in .png format.

In the end of the front matter we write something like this:

icons:
- title: standardization
  description: Containers package the environment needed for an application to run. By  using containers you ensure consistency between your dev/test/production environments.
- title: resources optimization
  description: Instead of running a dedicated VM for each application you can reduce costs by running multiple containers on the same VM. Containers also improve resource utilization by using less computing resources than VMs.
  image: resources.jpg

card-list=true

This creates two boxes with button and icon where some services or other things can be linked. This line needs to be followed by those data-tags:

left-title="First service" left-description="Let us make it easy for you" left-button="Read more" left-icon="" left-link="" right-title="Second service" right-description="Read more about our products" right-button="Read less" right-link="" right-icon=""

Description is not mandatory but other fields should be filled in order to make sense out of this section.

2.) Intro-banner.html

A first introduction banner where on the left is the name of the landing page, short description and on the right side there is an icon.

include expertise/intro-banner.html
  title="Continuous delivery"
  description="The promise of Continuous delivery almost seem too good to be true."
  button="Check our CoDe trainings"
  link="/training/testing/"

title="Continuous Delivery"

in case it is not filled it will be taken from the filename.md. In this case Code. Therefore in this case it is better to write “Continuous Delivery”.

For this section there are two more specific items that can be filled:

icon="pipes.png"

It is important that the icon is placed in the right folder and called exactly as icon.png. images > expertise > landing-page-name > "icon.png" - in that case nothing has to be filled. It is done automatically. In case of multiple intro-banners it can be called different name and image has to be added in the same folder. Using some icon is required.

bgimage="background.png"

If called exactly as “bg.png” in the right folder: “images > expertise > code > “bg.png”” does not have to be filled and mentioned.

3.) Full-image.html

include expertise/full-image.html
  bgimage="img_01.jpg"

bgimage="Name.format"

Required. The only thing that needs to be filled in here. Also has to be placed in the same folder as all the other images here.

button="Possible to add a button tat will be placed in the image."

link="linking the button"