index.html

---
layout: default
show_nav: false
---

<section class="hero is-danger is-bold slogan-hero">
    <div class="hero-head">
        {% include nav.html %}
    </div>
    <div class="hero-body">
        <div class="container">
            
            <h1 class="title slogan is-size-2">
                {{ site.data.index.slogan.title | markdownify }}
            </h1>
            <h2 class="subtitle has-text-white-ter slogan-description is-size-5">
                {{ site.data.index.slogan.description |
                markdownify }}
            </h2>
            <button class="mt-5 install-btn" onclick="copyPipInstall()">
                <script>
                    function copyPipInstall() {
                        var copyText = document.getElementById("pip-install")
                        var textArea = document.createElement("textarea")
                        const content = copyText.textContent
                        textArea.value = copyText.textContent
                        document.body.appendChild(textArea)
                        textArea.select()
                        document.execCommand("Copy")
                        textArea.remove()
                        $("#pip-install").text("Copied!")
                        setTimeout(function () {
                            $("#pip-install").text(content)
                        }, 2000)
                    }
                </script>

                <span class="is-small mr-2">
                    <i class="fas fa-copy"></i>
                </span>
                <span id="pip-install">{{site.data.index.slogan.install}}</span>
            </button>

        </div>
    </div>
</section>

{% include index/centered-title.html title=site.data.index.what.title description=site.data.index.what.description sep=true %}


<script>
    window.onload = () => {
        document.querySelectorAll(".menu").forEach(menu => {
            menu.querySelectorAll('a').forEach(atag => {
                console.log(atag.target)
                atag.onclick = () => {
                    menu.querySelector('a.is-active').classList.remove('is-active');
                    atag.classList.add('is-active');
                    menu.parentElement.nextElementSibling.querySelector(".what-hero-detail.is-active").classList.remove("is-active");
                    menu.parentElement.nextElementSibling.querySelector("#" + atag.text.replaceAll(" ", "-")).classList.add("is-active");
                }
            })
        })
    }
</script>

<section class="hero">
    <div class="hero-body pt-4">
        <div class="container">
            <div class="columns">
                <div class="column is-3">
                    <aside class="menu">
                        {% assign count = 0 %}
                        {% for function in site.data.index.what.functions %}
                            <p class="menu-label">
                                {{ function.section | capitalize }}
                            </p>
                            <ul class="menu-list">
                                {% for subsection in function.subsections %}
                                    <li>
                                        <a {% if count==0 %} class="is-active" {% endif %}>{{ subsection.name }}</a>
                                    </li>
                                    {% assign count = count | plus : 1 %}
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </aside>
                </div>
                <div class="column is-8 is-offset-1">
                    {% assign count = 0 %}
                    {% for function in site.data.index.what.functions %}
                        {% for subsection in function.subsections %}
                            <div class="{% if count==0 %}is-active {% endif %}what-hero-detail"
                            id="{{ subsection.name | replace: " ", "-" }}">
                                {% include index/function.html data=subsection %}
                            </div>  
                            {% assign count = count | plus : 1 %}
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

{% include index/centered-title.html title=site.data.index.learn.title description=site.data.index.learn.description %}

<section class="hero">
    <div class="hero-body pt-4">
        <div class="container">
            {% assign count = 0 %}
            {% assign is_new_row = count | modulo: 3 %}

            {% for tutorial in site.tutorials %}
                {% if forloop.first == true or is_new_row==0 %}
                <div class="columns">
                {% endif %}

                {% if tutorial.featured == true %}
                <div class="column is-4">
                    <div class="box" style="height: 100%">
                        <h2 class="subtitle is-size-4">
                            {% if tutorial.external_link != nil %}
                                {% assign url = tutorial.external_link %}
                            {% else %}
                                {% assign url = tutorial.url %}
                            {% endif %}
                            {% if tutorial.short_title != nil %}
                                {% assign title = tutorial.short_title %}
                            {% else %}
                                {% assign title = tutorial.title %}
                            {% endif %}
                            <a class="theme-color" href="{{ url }}">{{ title }}</a>
                        </h2>
                        {{ tutorial.description | markdownify }}
                    </div>
                </div>
                {% assign count = count | plus: 1 %}
                {% endif %}

                {% assign is_new_row = count | modulo: 3 %}
                {% if forloop.last == true or is_new_row==0 %}
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</section>

<section class="hero slack-hero mt-6">
    <div class="hero-body">
        <div class="container">
            <div class="columns">
                <div class="column">
                    <p class='title is-size-2 slack-title'>{{site.data.index.slack.title}}</p>
                    <p class='subtitle is-size-5 mt-2'>
                        {{ site.data.index.slack.description }}
                    </p>
                    <button class="mt-2 p-4 slack-btn">
                        <a class="slack-btn-txt"
                            href="{{ site.data.settings.links.slack }}"
                            target="_blank">Join our #Slack</a>
                    </button>
                </div>
                <div class="column is-two-fifths">
                    <figure class="image is-2by1">
                        <img src="{{ site.data.index.slack.figure }}">
                    </figure>
                </div>
            </div>
        </div>
    </div>
</section>