Here are some instructions how you can customize pages of the Istio website.
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" >}}
Concept blocks reuse the {{< content_panel >}} shortcode with a small type="transparent" parameter difference.
Solutions is a dynamic carousel of the Solution pages listed in content/en/solutions rendered using the {{< solutions_carousel >}} shortcode.
Case studies is a dynamic carousel of the Case study pages listed in content/en/case-studies rendered using the {{< case_studies_carousel >}} shortcode.
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.
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.
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.
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.
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.
Works in the same fashion as Pro services but is displayed using the {{< interactive_panels >}} with items="integrations" parameter.
To amend the deployment process page, change the contents of the content/en/deployment/index.md file.
Works in the same fashion as Pro services but is displayed using the {{< interactive_panels >}} with items="training" or items="certification" parameter.
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.
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.
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.
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.
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.
{{< 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
{{ 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 fromdata/companies.ymlfile{{ 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
blog/list.htmlfor displaying list of blog posts which are filtered by publishdateblog/single.htmlfor displaying single blog postcase-studies/list.htmlfor displaying list of case studiesget-involvedfor creating “Get Involved” pagenews/list.htmlfor displaying list of news which are filtered by section namenews/single.htmlfor displaying single news pagesolutions/list.htmlfor displaying list of solutionssolutions/single.htmlfor displaying single solution
handleFaqBlocks()for expanding and collapsing FAQ blocks dynamicallygetByTag()returns an element whose tagname matches the specified stringgetByClass()returns an element whose class name matches the specified stringtoggleActiveHeader()for adding a shadow to the header once user scrolls past a specific point on the page
categories-filterwindow class with methods which enable filtering lists of objects