Skip to content

Latest commit

 

History

History
137 lines (103 loc) · 8.87 KB

CUSTOM_PAGES.md

File metadata and controls

137 lines (103 loc) · 8.87 KB

Custom Pages

Here are some instructions how you can customize pages of the Istio website.

Pages

  1. Homepage
  2. About
  3. FAQ
  4. Blog
  5. Get involved
  6. Documentation
  7. Info banner

Homepage

Homepage landing panels are created using the {{< content_panel >}} shortcode providing the type of the panel, title, text, button and url (example below).

{{< content_panel type="dark" title="service_mesh" text="You can find what you need to make Istio do exactly what you need it to do." button="learn_more" url="/about/service-mesh" >}}

Concepts

Concept blocks reuse the {{< content_panel >}} shortcode with a small type="transparent" parameter difference.

Solutions

Solutions is a dynamic carousel of the Solution pages listed in content/en/solutions rendered using the {{< solutions_carousel >}} shortcode.

Case studies

Case studies is a dynamic carousel of the Case study pages listed in content/en/case-studies rendered using the {{< case_studies_carousel >}} shortcode.

About

Service mesh

Contains list of concepts rendered using the {{< feature_block >}} shortcode providing the header of the block, image path to an image located in the assets/inline_images directory and the inner content (example below).

{{< feature_block header="Traffic management" image="management.svg" >}}
Istio’s traffic routing rules let you easily control the flow of traffic and API calls between services.
{{< /feature_block >}}

The page also contains the Solutions carousel rendered using {{< solutions_carousel >}} shortcode.

Solutions

To add a new Solution page, create a new directory in content/en/about/solutions, then create an .md file inside the new directory e.g. content/en/about/solutions/new-solution-name/index.md. Make sure the markdown file contains a title, opening_paragraph, image, type: solutions, doc_type: article and sidebar_force: sidebar_solution.

Solutions are generated using a range of feature_block partials inside the layouts/solutions/list.html directory. Solutions lists are all the individual Solution pages.

Each solution contains {{ partial "case_study_suggestions" . }} which lists 3 case study panels at the bottom of the page.

Case studies

To add a new Case study page, create a new directory in content/en/about/case-studies, then create an .md file inside the new directory e.g. content/en/about/case-studies/case-study-name/index.md.

Make sure the markdown file contains a title, quote, author object (with name and image if you wish to display the author in the Case study sidebar), companyName, companyURL, type: case-studies, doc_type: article and sidebar_force: sidebar_case_study.

Case studies are generated using a range of case_study_panel partials inside the layouts/case-studies/list.html directory. Case studies lists all the individual Case study pages.

Case studies contain the "Also used by" section rendered using the {{< companies >}} partial.

Ecosystem

Providers

Providers uses the {{< companies >}} shortcode with ability to limit the number of visible items using first parameter e.g. {{< companies first=8 >}} will show the first 8 providers.

To create a new provider, amend the data/companies.yml and add a new entry in the providers list providing a name of the provider, url to their site and logo path to an image which needs to be pasted into the static/logos directory.

Pro services

To create a new Pro service, amend the data/companies.yml and add a new entry in the pro_services list providing a name of the pro service, url, logo path to an image which are also pulled from the static/logos directory, description to be displayed on the {{< interactive_panel >}} and details which is a list of paragraphs to be displayed in the modal window.

Pro services uses the {{< interactive_panels >}} shortcode with same ability to limit the number of visible items using first parameter e.g. {{< interactive_panels first=8 >}} will show first 8 interactive panels. An interactive panel reacts to a click event which opens up a modal window using the interactive_panel partial.

interactive_panel accepts the items parameter which can be either the integrations or defaults to pro_services.

Integrations

Works in the same fashion as Pro services but is displayed using the {{< interactive_panels >}} with items="integrations" parameter.

Deployment

To amend the deployment process page, change the contents of the content/en/deployment/index.md file.

Training and Certification

Works in the same fashion as Pro services but is displayed using the {{< interactive_panels >}} with items="training" or items="certification" parameter.

FAQ

To add new content to FAQ, create a new markdown file in content/en/about/faq/ in one of the existing categories. To add new category, create a new directory with an index.md markdown file with a category name as the linktitle attribute. faq_block partial uses the question and answer parameters. title attribute of individual markdown files is used as a question and the content is used as an answer.

Blog

To add a new blog post, go to the appropriate year folder in content/en/blog and create a new folder with index.md file similar to the existing ones in neighbouring folders (it should have publish date and title). New post will be displayed immediately after.

Get Involved

To add new content, go to content/en/get-involved/index.md file. To add a new section, use {{% involve_block %}} with following parameters title, subtitle and icon. Icons in svg format are stored in src/icons directory. For description, use inner content (example below).

{{% involve_block title="This is title" subtitle="This is subtitle" icon="icon" %}}
Content
{{% /involve_block %}}

It is also possible to edit existing content and add more content to each section by typing next number, i.e. 4. New Content.

Documentation

To add a new documentation page, go to content/en/docs. Select appropriate section or create a new one if needed with index.md file, next add a new folder with index.md file where content of the page should exist. New page or/and new section will be displayed immediately after, also in the sidebar menu in documentation pages.

Info banner

To create an event for an info banner, go to content/en/events/banners and create new .md file. In addition to the content, you can set parameters such as start date, end date, max impressions or timeout.

List of new elements

Components

Shortcodes

  • {{< content_panel >}} for displaying triple panels at the top of the homepage and Concepts section of the homepage
  • {{< centered_block >}} for wrapping components in a centered component with a specific width
  • {{< involve_block >}} for creating sections in “Get Involved” page
  • {{< multi_block >}} for creating a component with a title, icon and description useful for describing groups of people. Used on a single Solution page but may be integrated into any markdown
  • {{< solutions_carousel >}} for displaying the Solutions carousel

Partials

  • {{ case_studies_carousel }} for displaying the Case studies carousel
  • {{ case_studies_carousel_panel }} for displaying a Case studies carousel panel
  • {{ companies }} for displaying a grid of companies from data/companies.yml file
  • {{ faq_block }} for creating FAQ block (answer and question)
  • {{ feature_block }} for creating feature components on Service mesh and Solutions
  • {{ sidebar_case_study }} for displaying a Case study sidebar
  • {{ sidebar_solutions }} for displaying a Solution sidebar
  • {{ solutions_carousel_panel }} for displaying the Solutions carousel panel

Layouts

  • blog/list.html for displaying list of blog posts which are filtered by publishdate
  • blog/single.html for displaying single blog post
  • case-studies/list.html for displaying list of case studies
  • get-involved for creating “Get Involved” page
  • news/list.html for displaying list of news which are filtered by section name
  • news/single.html for displaying single news page
  • solutions/list.htmlfor displaying list of solutions
  • solutions/single.html for displaying single solution

Functions in .ts directory

  • handleFaqBlocks() for expanding and collapsing FAQ blocks dynamically
  • getByTag() returns an element whose tagname matches the specified string
  • getByClass() returns an element whose class name matches the specified string
  • toggleActiveHeader() for adding a shadow to the header once user scrolls past a specific point on the page

Functions in static directory

  • categories-filter window class with methods which enable filtering lists of objects