demos_community.rst.template

 .. role:: html(raw)
   :format: html

Community
=========

.. meta::
   :property="og:description": PennyLane demonstrations created by the community showcasing quantum machine learning and other topics of interest.
   :property="og:image": https://pennylane.ai/qml/_static/demos_card.png

.. raw:: html

    <style>
    #right-column {
        max-width: 1200px;
    }
    .up-button {
        left: calc(50% - 650px);
    }
    .jumbotron {
        box-shadow: none!important;
    }
    </style>


    <div class="jumbotron p-0 other">
        <div class="view">
            <img src="_static/demo-quilt-wide.png" class="img-fluid" alt="Sample image">
            <a href="#">
            <div class="mask rgba-stylish-slight"></div>
            </a>
        </div>

        <div class="card-body text-center mb-3">
            <p class="card-text py-2 lead">
                Have an existing GitHub repository or Jupyter notebook showing
                off quantum machine learning with PennyLane? Read the guidelines
                and submission instructions <a href="demos_submission.html">here</a>,
                and have your demonstration and research featured on our community page.
            </p>
        </div>
    </div>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">

    <hr>
    <br>

{% for card1, card2 in card_pairs %}

.. raw:: html

    <div class="row">
        <div class="col-lg-6 mb-4">

.. community-card::
    :title: {{ card1["title"] }}
    :author: {{ card1["author"] }}
    :date: {{ card1["date"] }}
    {%- if "code" in card1 %}
    :code: {{ card1["code"] }}
    {%- endif %}
    {%- if "blog" in card1 %}
    :blog: {{ card1["blog"] }}
    {%- endif %}
    {%- if "paper" in card1 %}
    :paper: {{ card1["paper"] }}
    {%- endif %}

    {{ card1["description"] | replace("\n", " ") }}

.. raw:: html

    </div>
    <div class="col-lg-6 mb-4">

{% if "title" in card2 %}

.. community-card::
    :title: {{ card2["title"] }}
    :author: {{ card2["author"] }}
    :date: {{ card2["date"] }}
    {%- if "code" in card2 %}
    :code: {{ card2["code"] }}
    {%- endif %}
    {%- if "blog" in card2 %}
    :blog: {{ card2["blog"] }}
    {%- endif %}
    {%- if "paper" in card2 %}
    :paper: {{ card2["paper"] }}
    {%- endif %}

    {{ card2["description"] | replace("\n", " ") }}

{% else %}
.. raw:: html

    <div class="card hidden-card"></div></div>
{% endif %}

.. raw:: html

        </div>
    </div>

{% endfor %}

.. toctree::
    :maxdepth: 4
    :hidden:

.. raw:: html

    <script type="text/javascript">
        // This is added to stop the page from jumping when a card hash is present in the URL
        if ( window.location.hash ) { scroll(0, 70); }

        $(window).on('load', function() {
            var headerHeight = 70;
            var scrollSpeed = 500;

            // On page load, if there is a card hash and the card exists, we will scroll to the top of the card
            var cardID = window.location.hash;
            if (cardID && $(cardID).length) {
                $(cardID).addClass('active');
                $('html, body').animate({ scrollTop: $(cardID).offset().top - headerHeight }, scrollSpeed);
            }

            // When a URL is changed with a new hash, we want to scroll to the new card and add the active class to it
            $(window).on('hashchange', function(e) {
                var newCardID = e.originalEvent.newURL.indexOf('#') >= 0 ? e.originalEvent.newURL.substring(e.originalEvent.newURL.indexOf('#')) : null;
                var oldCardID = e.originalEvent.oldURL.indexOf('#') >= 0 ? e.originalEvent.oldURL.substring(e.originalEvent.oldURL.indexOf('#')) : null;
                var newCard = $(newCardID);
                var oldCard = $(oldCardID);

                if (oldCardID && oldCard.length) { oldCard.removeClass('active'); }

                if (newCardID && newCard.length) {
                    newCard.addClass('active');
                    $('html, body').animate({ scrollTop: newCard.offset().top - headerHeight }, scrollSpeed);
                }

                return false;
            });

            var handleCardDescriptionOverflow = function(isWindowResizing) {
                $('.community-card.plugin-card').each(function(index, card) {
                    var $card = $(card);
                    var description = $card.find('p.plugin-card__description')[0];
                    var readMoreLink = $card.find('.plugin-card__read-more')[0];
                    var descriptionIsOverflowing = description.clientHeight < description.scrollHeight;

                    if (descriptionIsOverflowing) {
                        $(readMoreLink).removeClass('d-none');
                        if (isWindowResizing && $(description).hasClass('plugin-card__description--no-overflow')) { $(description).removeClass('plugin-card__description--no-overflow'); }
                    } else {
                        $(description).addClass('plugin-card__description--no-overflow');
                        if (isWindowResizing) $(readMoreLink).addClass('d-none');
                    }
                });
            }

            handleCardDescriptionOverflow();

            $(window).on('resize', function() {
                if (window.innerWidth > 991) { handleCardDescriptionOverflow(true); }
            });
        });
    </script>