segmentio · jedrzejchalubek · Oct 4, 2019 · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019
diff --git a/js/accordion/index.js b/js/accordion/index.js
@@ -0,0 +1,25 @@
+const COMPONENT_NAME = 'data-accordion'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
+const TRIGGER_SELECTOR = `[data-ref="accordion[trigger]"]`
+const BODY_SELECTOR = `[data-ref="accordion[body]"]`
+
+export default function () {
+  const components = document.querySelectorAll(COMPONENT_SELECTOR)
+
+  for (let i = 0; i < components.length; i++) {
+    let body = components[i].querySelector(BODY_SELECTOR)
+    let trigger = components[i].querySelector(TRIGGER_SELECTOR)
+
+    if (body) {
+      let activeClass = components[i].getAttribute('data-class-active') || 'active'
+
+      if (trigger) {
+        trigger.addEventListener('click', (event) => {
+          event.preventDefault()
+
+          components[i].classList.toggle(activeClass)
+        })
+      }
+    }
+  }
+}
diff --git a/js/feedback/index.js b/js/feedback/index.js
@@ -0,0 +1,46 @@
+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
+      })
+    })
+  }
+}
diff --git a/js/headings-anchors/index.js b/js/headings-anchors/index.js
@@ -0,0 +1,16 @@
+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')
+      })
+    }
+  }
+}
diff --git a/js/index.js b/js/index.js
@@ -1 +1,9 @@
-console.log('hello world');
+import feedback from './feedback'
+import accordion from './accordion'
+import searchNavbar from './search-navbar'
+import headingsAnchors from './headings-anchors'
+
+feedback()
+accordion()
+searchNavbar()
+headingsAnchors()
diff --git a/js/search-navbar/index.js b/js/search-navbar/index.js
@@ -0,0 +1,18 @@
+const COMPONENT_SELECTOR = '[data-search-navbar]'
+const TRIGGER_SELECTOR = '[data-ref*="search-navbar[trigger]"]'
+
+export default function () {
+  const component = document.querySelector(COMPONENT_SELECTOR)
+
+  if (component) {
+    const triggers = document.querySelectorAll(TRIGGER_SELECTOR);
+
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].addEventListener('click', e => {
+        e.preventDefault()
+
+        component.classList.toggle(component.dataset.activeClass)
+      })
+    }
+  }  
+}
diff --git a/src/_data/sidenav/legal.yml → src/_data/menu/legal.yml b/src/_data/sidenav/legal.yml → src/_data/menu/legal.yml
diff --git a/src/_data/sidenav/main.yml → src/_data/menu/primary.yml b/src/_data/sidenav/main.yml → src/_data/menu/primary.yml
@@ -1,5 +1,7 @@
 ---
 sections:
+- section_title: Home
+  path: "/"
 - section_title: Guides
   section:
   - path: "/guides"
@@ -202,7 +204,7 @@ sections:
     title: 'Protocols: Schema Controls'
   - path: "/protocols/tracking-plan"
     title: 'Protocols: Tracking Plan'
-- section_title: Segment-app
+- section_title: Segment Web App
   section:
   - path: "/segment-app"
     title: Overview
@@ -220,3 +222,27 @@ sections:
     title: Picking a secure password
   - path: "/segment-app/sso"
     title: Single Sign On
+- section_title: Partners
+  section:
+  - path: "/partners"
+    title: Overview
+  - path: "/partners/build-functions"
+    title: Building a Subscription Function
+  - path: "/partners/build-webhook"
+    title: Building a Subscription Webhook
+  - path: "/partners/checklist"
+    title: Public Beta Checklist
+  - path: "/partners/co-marketing"
+    title: Co-marketing
+  - path: "/partners/conceptual-model"
+    title: Conceptual Model
+  - path: "/partners/enable-with-segment"
+    title: Using OAuth to Build a Two-Click Enable Flow
+  - path: "/partners/plugins"
+    title: Building a Plugin
+  - path: "/partners/spec"
+    title: Segment Spec for Partners
+  - path: "/partners/streams"
+    title: Building a Stream
+  - path: "/partners/subscriptions"
+    title: Building a Subscription
diff --git a/src/_data/sidenav/api.yml → src/_data/menu/secondary.yml b/src/_data/sidenav/api.yml → src/_data/menu/secondary.yml
@@ -15,3 +15,5 @@ sections:
       title: Reference
     - path: "/api/config-api/tutorial-javascript-google-analytics"
       title: Creating a Javascript web source and Google Analytics destination
+- section_title: Help
+  path: "/help"
diff --git a/src/_data/nav.yml b/src/_data/nav.yml
@@ -0,0 +1,74 @@
+---
+sections:
+- section_title: Product
+  section:
+  - path: "https://segment.com/product/connections/"
+    title: Connections
+  - path: "https://segment.com/product/protocols/"
+    title: Protocols
+  - path: "https://segment.com/product/personas/"
+    title: Personas
+  - path: "https://segment.com/catalog/"
+    title: Integrations Catalog
+  - path: "https://segment.com/pricing/"
+    title: Pricing
+  - path: "https://segment.com/security/"
+    title: Security
+  - path: "https://segment.com/product/gdpr/"
+    title: GDPR
+- section_title: For Developers
+  section:
+  - path: "https://segment.com/docs/"
+    title: Documentation
+  - path: "https://segment.com/docs/sources/"
+    title: Segment API
+  - path: "https://segment.com/partners/developer-center/"
+    title: Build on Segment
+  - path: "https://open.segment.com/"
+    title: Open Source
+  - path: "https://segment.com/engineering/"
+    title: Engineering Team
+- section_title: For Businesses
+  section:
+  - path: "https://segment.com/docs/"
+    title: Customer Stories
+  - path: "https://segment.com/docs/sources/"
+    title: Enterprise
+  - path: "https://segment.com/partners/developer-center/"
+    title: Startups
+  - path: "https://open.segment.com/"
+    title: Retail
+  - path: "https://segment.com/engineering/"
+    title: Marketplace
+  - path: "https://segment.com/engineering/"
+    title: B2B Software
+  - path: "https://segment.com/engineering/"
+    title: Mobile
+- section_title: Company
+  section:
+  - path: "https://segment.com/docs/"
+    title: Careers
+  - path: "https://segment.com/docs/sources/"
+    title: Blog
+  - path: "https://segment.com/partners/developer-center/"
+    title: Press
+  - path: "https://open.segment.com/"
+    title: FTFY Podcast
+  - path: "https://segment.com/engineering/"
+    title: Events
+- section_title: Support
+  section:
+  - path: "https://segment.com/docs/"
+    title: Help Center
+  - path: "https://segment.com/docs/sources/"
+    title: Contact us
+  - path: "https://segment.com/partners/developer-center/"
+    title: Resources
+  - path: "https://open.segment.com/"
+    title: Recipes
+  - path: "https://segment.com/engineering/"
+    title: Security Bulletins
+  - path: "https://segment.com/engineering/"
+    title: Documentation
+  - path: "https://segment.com/engineering/"
+    title: Become a Partner
diff --git a/src/_data/sidenav/partners.yml b/src/_data/sidenav/partners.yml
diff --git a/src/_includes/components/alert.html b/src/_includes/components/alert.html
@@ -0,0 +1,9 @@
+<div class="alert alert--{{ include.type }} flex gutter gutter--large" role="alert">
+  <div class="flex__column flex__column--shrink">
+    {% include icons/alerts/{{ include.type }}.svg %}
+  </div>
+
+  <div class="flex__column">
+    <p>{{ include.content }}</p>
+  </div>
+</div>
diff --git a/src/_includes/components/breadcrumbs.html b/src/_includes/components/breadcrumbs.html
@@ -0,0 +1,25 @@
+<ul class="breadcrumbs flex gutter list list--unstyle">
+  {% assign breadcrumbs = page.url | remove:'/index.html' | split: '/' %}
+
+  <li>
+    <a class="breadcrumbs__link" href="{{ site.baseurl }}/">Home</a>
+  </li>
+
+  {% for crumb in breadcrumbs offset: 1 %}
+    <li>/</li>
+
+    {% if forloop.last %}
+      <li>
+        {{ page.title }}
+      </li>
+    {% else %}
+      <li>
+        {% assign crumb_limit = forloop.index | plus: 1 %}
+
+        <a class="breadcrumbs__link" href="{{ site.baseurl }}{% for crumb in breadcrumbs limit: crumb_limit %}{{ crumb | remove: '.html' | append: '/' }}{% endfor %}">
+          {{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}
+        </a>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
diff --git a/src/_includes/components/button-fill.html b/src/_includes/components/button-fill.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button-fill {% if include.size %}button--{{ include.size }}{% endif %} {% if include.variant %}button-fill--{{ include.variant }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button-hollow.html b/src/_includes/components/button-hollow.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button-hollow {% if include.size %}button--{{ include.size }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button-link.html b/src/_includes/components/button-link.html
@@ -0,0 +1,3 @@
+<a class="button-link" href="{{ include.href }}">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button.html b/src/_includes/components/button.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button {% if include.size %}button--{{ include.size }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/callout.html b/src/_includes/components/callout.html
@@ -0,0 +1,39 @@
+<div class="callout panel">
+    <div class="panel__inner">
+      <div class="flex">
+        <div class="flex__column flex__column--12 flex__column--9@xlarge">
+          <h4>{{ include.title }}</h4>
+
+          <div class="callout__content">
+              {{ include.content }}
+          </div>
+        </div>
+      </div>
+
+      <div class="callout__form-wrapper flex flex--wrap flex--middle gutter gutter--none gutter--xlarge@xlarge">
+        <div class="flex__column flex__column--12 flex__column--9@xlarge">
+          <form class="callout__form gutter gutter--none gutter--medium@medium flex flex--wrap">
+            <div class="flex__column">
+              <input class="callout__input input input--expand" type="email" placeholder="Your work e-mail">
+            </div>
+
+            <div class="flex__column flex__column--12 flex__column--shrink@medium">
+              <button class="button button--large button--expand button-fill">Request demo</button>
+            </div>
+          </form>
+        </div>
+
+        <div class="callout__separator flex__column flex__column--12">
+          <span>or</span>
+        </div>
+
+        <a href="#" class="callout__link-button flex__column flex__column--12 flex__column--shrink@xlarge">
+          Create free account
+        </a>
+      </div>
+
+      <div class="panel__pattern">
+        {% include icons/patterns/dots.svg %}
+      </div>
+    </div>
+  </div>