const COMPONENT_NAME = 'data-feedback'

const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`

const HELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[helpful]"]`

const UNHELPFUL_BUTTON_SELECTOR = `[data-ref="feedback[unhelpful]"]`

const DEFAULTS = {

message: {

success: 'Thanks for your feedback!'

}

export default function () {

const components = document.querySelectorAll(COMPONENT_SELECTOR)

for (let i = 0; i < components.length; i++) {

const options = JSON.parse(components[i].getAttribute(COMPONENT_NAME) || '{}')

const settings = Object.assign({}, DEFAULTS, options)

const helpfulButton = components[i].querySelector(HELPFUL_BUTTON_SELECTOR)

const unhelpfulButton = components[i].querySelector(UNHELPFUL_BUTTON_SELECTOR)

helpfulButton.addEventListener('click', (event) => {

event.preventDefault()

components[i].innerText = settings.message.success

window.analytics.track('Docs Rated', {

title: '{{title}}',

helpful: true,

url: document.URL

})

})

unhelpfulButton.addEventListener('click', (event) => {

event.preventDefault()

components[i].innerText = settings.message.success

window.analytics.track('Docs Rated', {

title: '{{title}}',

helpful: false,

url: document.URL

})

})

}

const COMPONENT_SELECTOR = '[data-headings-anchors]'

const HEADINGS_SELECTOR = 'h1, h2, h3, h4, h5, h6'

export default function () {

const components = document.querySelectorAll(COMPONENT_SELECTOR)

for (let i = 0; i < components.length; i++) {

const headings = components[i].querySelectorAll(HEADINGS_SELECTOR)

for (let i = 0; i < headings.length; i++) {

headings[i].addEventListener('click', (event) => {

location.hash = headings[i].getAttribute('id')

})

}

}

import feedback from './feedback'

import headingsAnchors from './headings-anchors'

<div class="widget" data-feedback>

<p class="widget__heading">Was this page helpful?</p>

<div class="flex">

<div class="flex__column flex__column--6">

<button class="button button--small button-fill button-fill--white" data-ref="feedback[helpful]">

<span class="button__icon">

{% include icons/symbols/thumb-up.svg %}

</span>

<span>Yes</span>

</button>

</div>

<div class="flex__column flex__column--6">

<button class="button button--small button-fill button-fill--white" data-ref="feedback[unhelpful]">

<span class="button__icon">

{% include icons/symbols/thumb-down.svg %}

</span>

<span>No</span>

</button>

</div>

</div>

{% capture tocWorkspace %}

{% comment %}

Version 1.0.8

https://github.com/allejo/jekyll-toc

"...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe

Usage:

{% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}

Parameters:

* html (string) - the HTML of compiled markdown generated by kramdown in Jekyll

Optional Parameters:

* sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC

* class (string) : '' - a CSS class assigned to the TOC

* id (string) : '' - an ID to assigned to the TOC

* h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored

* h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored

* ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list

* item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level

* baseurl (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content

* anchor_class (string) : '' - add custom class(es) for each anchor element

Output:

An ordered or unordered list representing the table of contents of a markdown block. This snippet will only

generate the table of contents and will NOT output the markdown given to it

{% endcomment %}

{% capture my_toc %}{% endcapture %}

{% assign orderedList = include.ordered | default: false %}

{% assign minHeader = include.h_min | default: 1 %}

{% assign maxHeader = include.h_max | default: 6 %}

{% assign nodes = include.html | split: '<h' %}

{% assign firstHeader = true %}

{% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}

{% for node in nodes %}

{% if node == "" %}

{% continue %}

{% endif %}

{% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}

{% if headerLevel < minHeader or headerLevel > maxHeader %}

{% continue %}

{% endif %}

{% if firstHeader %}

{% assign firstHeader = false %}

{% assign minHeader = headerLevel %}

{% endif %}

{% assign indentAmount = headerLevel | minus: minHeader | add: 1 %}

{% assign _workspace = node | split: '</h' %}

{% assign _idWorkspace = _workspace[0] | split: 'id="' %}

{% assign _idWorkspace = _idWorkspace[1] | split: '"' %}

{% assign html_id = _idWorkspace[0] %}

{% assign _classWorkspace = _workspace[0] | split: 'class="' %}

{% assign _classWorkspace = _classWorkspace[1] | split: '"' %}

{% assign html_class = _classWorkspace[0] %}

{% if html_class contains "no_toc" %}

{% continue %}

{% endif %}

{% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}

{% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}

{% assign space = '' %}

{% for i in (1..indentAmount) %}

{% assign space = space | prepend: ' ' %}

{% endfor %}

{% unless include.item_class == blank %}

{% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}

{% endunless %}

{% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}

{% capture my_toc %}{{ my_toc }}

{{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}

{% endfor %}

{% if include.class %}

{% capture my_toc %}{:.{{ include.class }}}

{{ my_toc | lstrip }}{% endcapture %}

{% endif %}

{% if include.id %}

{% capture my_toc %}{: #{{ include.id }}}

{{ my_toc | lstrip }}{% endcapture %}

{% endif %}

{% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}

<div class="sidebar">

{%- unless page.hide_toc -%}

<div data-menu-side>

{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}

</div>

{%- endunless -%}

{% if page.feedback != false %}

{% include sidebar/feedback.html %}

{% endif %}

</div>