Embedded Feature

Add a tab to embed custom feature

1. In the "_layouts" folder, add this file: indicator.html
2. In the "_includes" folder, add this file: autotrack.html
3. In the "_includes/components" folder add these files:

• data-notice.html
• edit-buttons.html
• indicator-content.html

Embed custom feature as main content

Head to Prose.io via the “edit metadata” button under the edit tab, click on the pencil button and add feature like so:

To do the same through Github, go to the indicator metadata file in your data repo and add anywhere under the Front Matter --- the embedded code:

Embed R-Chart/ Map

1. After creating your map or chart on R, convert to HTML and copy the code
2. Create an HTML file in the site repo under "_layouts" & paste the code

To modify the height of the chart/ map, find the div containing id="htmlwidget_container" (at the bottom of the page) and change height to desired pixels.

3. Before you commit add the following right before the closing </body> tag (this is important or else the height of the page will not adjust to the embedded map/ chart):
   <script src="https://pym.nprapps.org/pym.v1.min.js"></script> <script>new pym.Child();</script>
4. Create a new markdown file in the site repo under "_pages", with the following code:
   ---
layout: name-of-html-file
title: Title
permalink: /name-of-html-file/
---
5. Get the link of the page you just created, should be something like: https://username.github.io/open-sdg-site-starter/name-of-html-file/
6. This is the link you can use in the meta data for the embedded_feature_url. Read more on how to do this here, the code in the meta folder of the indicator should look something like this: