docs-seed

Содержание

Table of Content

What is the CTA panel?
How to Enable CTA panel?
How to Change CTA panel Avatar and Text?
How to Change CTA panel position?

Introduction CTA
Overview CTA
Rest CTA

How to Disable CTA panels?
Troubleshooting

The CTA panel in the Introduction is positioned incorrectly or missing
The Overview CTA is positioned incorrectly, missing or the name of the control is incorrect
The Overview or Introduction CTA is positioned before the first heading of the page.
Overview CTA or Introduction CTA appears instead of Rest of Pages CTA
Overview CTA panel appears in pages inside subfolders of the control/component folder
Overview CTA panel does not appear for any of the control/component pages
The CTA panels are rendered, but there is no icon, the links are incorrect and the text is incorrect
The Offline PDF generation build fails due to the CTA panels

Table of Content

What is the CTA panel?
How to Enable CTA panel?
How to Change CTA panel Avatar and Text?
How to Change CTA panel position?
How to Disable CTA panels?
Troubleshooting

What is the CTA panel?

The Call to Action panels are small portions of HTML on the page with the purpose of engaging new clients to go and start a Trial.

The CTA panel for introduction and overview articles is positioned automatically before the first non-paragraph element after the first heading (# Heading). Or, if a paragraph is not found after the heading - it will be position directly after the heading.

Note: Make sure that in introduction articles you need to remove the Download button.

How to Enable CTA panel?

To enable the automatic rendering of CTA panels, you need to:

Go to the _config.yml file of your product's documentation repository
Set has_cta_panels: true

Then, you just need to:

Trigger the Jenkins build for your documentation and eventually
Promote the result production, if the result in the test environment is correct

Voila, you have automatic CTA panels now :)

How to Change CTA panel Avatar and Text?

The text and avatar are controlled by the data in this repository, the _data/cta_panels_data.yml file.

Important: If you do not have permissions to submit a Pull Request with the updated content and avatar, share new content in the DevTools Team>Docs-seed channel in MicrosoftTeams

The data relies on the product name set in the _config.yml file

The options for avatar are Kendoka, DevCraft, and Ninja.

cta_panels_data:
  "ProducName":
    message: "Message after <Product is a>"  
    trial_url: "https://www.telerik.com/download-trial-file/v2-b/ui-for-asp.net-ajax" 
    product_url: "https://www.telerik.com/products/aspnet-ajax.aspx"
    avatar: "Ninja"

How to Change CTA panel position?

In case the position of the default panel is wrong or could be placed better, you can add the following code inside the .md file in question at the position the CTA panel should be rendered:

Introduction CTA

{% if site.has_cta_panels == true %}
{% include cta-panel-introduction.html %}
{% endif %}

Note: For TestStudio you need to use cta-panel-teststudio-introduction.html instead

{% if site.has_cta_panels == true %}
{% include cta-panel-teststudio-introduction.html %}
{% endif %}

Overview CTA

!Note: Make sure to add CTAControlName field in the page config set 
!      to the exact name of the control that will show up in the Overview CTA panel

---
title: Overview
page_title: Overview | AutoComplete JSP Tag
description: "Get started with the AutoComplete JSP tag in Kendo UI."
slug: overview_autocomplete_uiforjsp
position: 1
CTAControlName: AutoComplete
---


{% if site.has_cta_panels == true %}
{% include cta-panel-overview.html %}
{% endif %}

Note: For TestStudio you need to use cta-panel-teststudio-overview.html without setting CTAControlName

{% if site.has_cta_panels == true %}
{% include cta-panel-teststudio-overview.html %}
{% endif %}

Rest CTA

{% if site.has_cta_panels == true %}
{% include cta-panel-small.html %}
{% endif %}

Note: For TestStudio you need to use cta-panel-teststudio-small.html instead

{% if site.has_cta_panels == true %}
{% include cta-panel-teststudio-small.html %}
{% endif %}

Note: the if-else liquid statement is needed only for cases where you want to hide all CTA panels, automatic and manual when the has_cta_panels is not set to true.

How to Disable CTA panels?

The only thing you need to do is either remove has_cta_panels from your _config.yml file or set it to false

Note: If you did not wrap the manually added {% include <cta-panel-path.html> %} inside if conditions, you need to go and remove all such instances manually

Troubleshooting

The CTA panel in the Introduction is positioned incorrectly or missing

Add the Introduction CTA panel manually: Introduction CTA

The Overview CTA is positioned incorrectly, missing or the name of the control is incorrect

Add the Introduction CTA panel manually: Introduction CTA

The Overview or Introduction CTA is positioned before the first heading of the page.

Make sure that the first heading is <h1> by checking the MD of the page and fixing the heading - ## Heading to # Heading.

Overview CTA or Introduction CTA appears instead of Rest of Pages CTA

Add the Rest of Pages CTA panel manually: Rest CTA

Overview CTA panel appears in pages inside subfolders of the control/component folder

Note: Better ping an owner of the docs-seed repo.

By default all overview.md inside controls folder are considered as overview articles. An exception for the particular suite can be made in the _data/cta_panels_data.yml file by adding a specific overview regex pattern.

For example:

https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L12

Overview CTA panel does not appear for any of the control/component pages

Note: Better ping an owner of the docs-seed repo.

By default all overview.md inside controls folder are considered as overview articles. An exception for the particular suite can be made in the _data/cta_panels_data.yml file by adding a specific overview regex pattern.

For example:

https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L70

https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L18

The CTA panels are rendered, but there is no icon, the links are incorrect and the text is incorrect

Note: Better ping an owner of the docs-seed repo.

Check the _config.yml file and search for product field. e.g., https://github.com/telerik/xamarin-forms-docs/blob/master/_config.yml#L626
Check for other occurrences of product field with a different value. e.g., https://github.com/telerik/xamarin-forms-docs/blob/master/_config.yml#L639
Create a map in the _data/cta_panels_data.yml file with the values of the product field to match the suite name. Like so: https://github.com/telerik/docs-seed/blob/master/_data/cta_panels_data.yml#L108

The Offline PDF generation build fails due to the CTA panels

You should disable the CTA panels for the Offline PDF documentation:

If there is already a _pdf.yml file in the documentation just do step 2.

Include a _pdf.yml file in the same level as _config.yml
Disable the CTA panels by adding the following config:
```
#Disable CTA panels for PDF
has_cta_panels: false
```
Change the build so that the new config file is added for the PDF documentation:
```
bundle exec jekyll build --config=_config.yml,_pdf.yml`
```