Bulma v9 website (#3249)

* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute

docs/_includes/global/deprecated.html

@@ -1,7 +1,7 @@
 {% if site.deprecated %}
   <div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
     <p>
-      You are viewing the deprecated <strong>{{ site.version }}</strong> version of the website.
+      You are viewing the deprecated <strong>{{ site.data.meta.version }}</strong> version of the website.
       <a href="{{ site.url }}/">Click here to view the latest version</a>
     </p>
   </div>

docs/_includes/global/footer.html

@@ -2,12 +2,6 @@
 
 {% include global/native.html %}
 
-{% include book/book-banner.html %}
-
 {% include global/newsletter.html %}
 
 {% include footer/main.html %}
-
-{% include book/book-modal.html %}
-
-{% include global/scripts.html %}

docs/_includes/global/head.html

@@ -4,7 +4,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
 
-  <title>{% if page.fulltitle %}{{ page.fulltitle | strip_html }}{% else %}{% if page.title %}{{ page.title | strip_html }} | {% endif %}{{ site.data.meta.title | strip_html }}{% endif %}</title>
+  <title>{% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %}</title>
+
+  <link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
 
   {% if page.fontawesome4 %}
     <link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
@@ -15,6 +17,8 @@
   {% if page.mdi %}
     <link rel="stylesheet" href="{{ site.data.icons.mdi }}">
   {% endif %}
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
   <link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
@@ -30,7 +34,6 @@
   <meta name="twitter:site" content="@jgthms">
   <meta name="twitter:creator" content="@jgthms">
 
-
   <!-- Shared social media -->
   {% if page.share_title %}
     <meta property="og:title" content="{{ page.share_title }}">
@@ -82,6 +85,4 @@
   <link rel="shortcut icon" href="{{ site.url }}/favicons/favicon.ico?v=201701041855">
   <meta name="msapplication-config" content="{{ site.url }}/favicons/browserconfig.xml?v=201701041855">
   <meta name="theme-color" content="#00d1b2">
-
-  <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
 </head>

docs/_includes/global/navbar-item.html

@@ -0,0 +1,20 @@
+{% assign link = site.data.links.by_id[include.link_id] %}
+{% assign cleanpath = link.path | remove_first: "/" %}
+
+<a class="
+  navbar-item
+  bd-navbar-item
+  bd-navbar-item-{{ link_id }}
+  {{ include.class }}
+  {% if page.route == cleanpath %}is-active{% endif %}
+  {% if page.path contains '_posts' and link_id == 'blog' %}
+    is-active
+  {% endif %}
+"
+href="{{ site.url }}{{ link.path }}/">
+<span class="icon has-text-{{ link.color }}">
+  <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
+</span>
+
+<span>{{ link.title }}</span>
+</a>

docs/_includes/global/navbar-start.html

@@ -0,0 +1,73 @@
+<div id="{{ include.id }}" class="navbar-start bd-navbar-start bd-is-{{ include.version }}">
+  <a class="
+      navbar-item bd-navbar-item bd-navbar-item-base bd-navbar-item-documentation
+      {% if page.route == 'documentation' %}is-active{% endif %}
+      {% if page.layout == 'documentation' %}is-active{% endif %}
+    "
+    href="{{ site.url }}{{ site.data.meta.documentation }}">
+    <span class="icon has-text-primary">
+      <i class="fas fa-book"></i>
+    </span>
+    <span class="is-hidden-tablet-only is-hidden-desktop-only">
+      Documentation
+    </span>
+    <span class="is-hidden-mobile is-hidden-widescreen">
+      Docs
+    </span>
+  </a>
+
+  {% for link_id in site.data.links.navbar %}
+    {%
+      include global/navbar-item.html
+      link_id=link_id
+      class="bd-navbar-item-base"
+    %}
+  {% endfor %}
+
+  {% for link_id in site.data.links.navbarMore %}
+    {%
+      include global/navbar-item.html
+      link_id=link_id
+      class="bd-navbar-item-more"
+    %}
+  {% endfor %}
+
+  <div class="navbar-item bd-navbar-item bd-navbar-item-base has-dropdown is-hoverable">
+    {% assign link = site.data.links.by_id['more'] %}
+
+    <a class="navbar-link bd-navbar-ellipsis" href="{{ site.url }}{{ link.path }}">
+      <span class="icon">
+        <i class="fas fa-ellipsis-h"></i>
+      </span>
+    </a>
+
+    <div class="navbar-dropdown bd-navbar-dropdown is-boxed">
+      {% for link_id in site.data.links.more %}
+        {% assign link = site.data.links.by_id[link_id] %}
+        {% assign cleanpath = link.path | remove_first: "/" %}
+        <a class="
+            navbar-item
+            {% if page.route == cleanpath %}is-active{% endif %}
+          "
+          data-route="{{ page.route }}"
+          href="{{ site.url }}{{ link.path }}">
+            <div>
+              <div class="icon-text">
+                <span class="icon has-text-{{ link.color }}">
+                  <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
+                </span>
+                <span>
+                  <strong>{{ link.name }}</strong>
+                </span>
+              </div>
+              {{ link.subtitle }}
+            </div>
+          </span>
+        </a>
+        {% unless forloop.last %}
+          <hr class="navbar-divider {% if forloop.first %}{% endif %}">
+        {% endunless %}
+      {% endfor %}
+    </div>
+  </div>
+</div>

docs/_includes/global/navbar.html

@@ -1,123 +1,96 @@
-<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
-  <div class="container">
+<nav id="navbar" class="bd-navbar navbar">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
-    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
-      <span class="icon" style="color: #333;">
+    <a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.github }}" target="_blank">
+      <span class="icon" style="color: var(--github);">
         <i class="fab fa-lg fa-github-alt"></i>
       </span>
     </a>
 
-    <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
-      <span class="icon" style="color: #55acee;">
+    <a class="navbar-item bd-navbar-mobile-icon" href="{{ site.data.meta.twitter }}" target="_blank">
+      <span class="icon" style="color: var(--twitter);">
         <i class="fab fa-lg fa-twitter"></i>
       </span>
     </a>
 
-    <div id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
-      <span></span>
-      <span></span>
-      <span></span>
+    <div class="navbar-item bd-navbar-mobile-sponsor-icon">
+      <a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-outlined is-small">
+        <span class="icon">
+          <i class="fas fa-thumbs-up"></i>
+        </span>
+        <span>Sponsor</span>
+      </a>
     </div>
+
+    <button id="searchIcon" class="navbar-item bd-navbar-search-icon bd-navbar-mobile-icon">
+      <span class="icon">
+        <i class="fas fa-lg fa-search"></i>
+      </span>
+    </button>
+
+    <button id="navbarBurger" class="navbar-burger" data-target="navMenu{{ include.id }}">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
   </div>
 
   <div id="navMenu{{ include.id }}" class="navbar-menu">
-    <div class="navbar-start">
-      <a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.url }}{{ site.data.meta.documentation }}">
-        <span class="icon has-text-primary">
-          <i class="fas fa-book"></i>
-        </span>
-        <span class="is-hidden-touch is-hidden-widescreen">
-          Docs
-        </span>
-        <span class="is-hidden-desktop-only">
-          Documentation
-        </span>
-      </a>
-
-      {% for link_id in site.data.links.navbar %}
-        {% assign link = site.data.links.by_id[link_id] %}
-        <a class="navbar-item bd-navbar-item-{{ link_id }} {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
-          <span class="icon has-text-{{ link.color }}">
-            <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
-          </span>
-
-          <span>{{ link.title }}</span>
-        </a>
-      {% endfor %}
-
-      <div class="navbar-item has-dropdown is-hoverable">
-        {% assign link = site.data.links.by_id['more'] %}
-        <a class="navbar-link" href="{{ site.url }}{{ link.path }}">
-          {{ link.name }}
-        </a>
-
-        <div id="moreDropdown" class="navbar-dropdown">
-          <a class="navbar-item is-hidden-widescreen" href="{{ site.data.meta.github }}" target="_blank">
-            <span>
-              <span class="icon" style="color: #333;">
-                <i class="fab fa-lg fa-github-alt"></i>
-              </span>
-              <strong>GitHub</strong>
-              <br>
-              The official repository
-            </span>
-          </a>
-
-          <hr class="navbar-divider is-hidden-widescreen">
-
-          {% for link_id in site.data.links.more %}
-            {% assign link = site.data.links.by_id[link_id] %}
-            <a class="navbar-item {% if page.route == link_id %}is-active{% endif %} {% if forloop.first %}is-hidden-widescreen{% endif %}" href="{{ site.url }}{{ link.path }}">
-              <span>
-                <span class="icon has-text-{{ link.color }}">
-                  <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
-                </span>
-                <strong>{{ link.name }}</strong>
-                <br>
-                {{ link.subtitle }}
-              </span>
-            </a>
-            {% unless forloop.last %}
-              <hr class="navbar-divider {% if forloop.first %}is-hidden-widescreen{% endif %}">
-            {% endunless %}
-          {% endfor %}
-        </div>
-      </div>
-    </div>
+    {% include global/navbar-start.html id="navbarStartOriginal" version="original" %}
 
     <div class="navbar-end">
       <a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.github }}" target="_blank">
-        <span class="icon" style="color: #333;">
+        <span class="icon" style="color: var(--github);">
           <i class="fab fa-lg fa-github-alt"></i>
         </span>
       </a>
 
       <a class="bd-navbar-icon navbar-item" href="{{ site.data.meta.twitter }}" target="_blank">
-        <span class="icon" style="color: #55acee;">
+        <span class="icon" style="color: var(--twitter);">
           <i class="fab fa-lg fa-twitter"></i>
         </span>
       </a>
 
-      <div class="navbar-item">
-        <div class="field is-grouped is-grouped-multiline">
-          <p class="control">
-            {% include elements/github.html %}
-          </p>
-          <p class="control">
-            {% include elements/patreon.html %}
-          </p>
-          <p class="control">
-            <a class="button is-primary" style="height: 2.25em; padding: calc(.375em - 1px) .75em;" href="{{ site.data.meta.download }}">
-              <strong>Download</strong>
-            </a>
-          </p>
-        </div>
+      <div class="navbar-item bd-navbar-sponsor-button is-hidden-desktop">
+        <a class="button is-sponsor is-light">
+          <span class="icon is-small">
+            <i class="fas fa-thumbs-up"></i>
+          </span>
+        </a>
       </div>
+
+      <div class="navbar-item bd-navbar-sponsor-button is-hidden-touch">
+        <a href="{{ site.url }}{{ site.data.links.by_id.become-sponsor.path }}" class="button is-sponsor is-light">
+          <span class="icon is-small">
+            <i class="fas fa-thumbs-up"></i>
+          </span>
+          <span>
+            Sponsor
+          </span>
+        </a>
+      </div>
+
+      <button class="navbar-item bd-navbar-search-icon">
+        <span class="icon">
+          <i class="fas fa-lg fa-search"></i>
+        </span>
+      </button>
     </div>
   </div>
+
+  <div id="search" class="bd-search">
+    <p class="control has-icons-left">
+      <input id="algoliaSearch" class="input is-rounded" type="text" placeholder="Search the docs">
+      <span class="icon is-small is-left">
+        <i class="fas fa-search"></i>
+      </span>
+    </p>
   </div>
 </nav>
+
+<div class="bd-navbar bd-is-clone">
+  {% include global/navbar-start.html id="navbarStartClone" version="clone" %}
+</div>

docs/_includes/global/newsletter.html

@@ -1,34 +1,36 @@
-<section id="newsletter" class="section is-medium">
-  <div class="container">
-    <div class="columns is-vcentered">
-      <div class="column">
-        <p class="title">Newsletter</p>
-        <p class="subtitle is-4 has-text-grey-light">Features, releases, showcase… stay in the loop!</p>
-      </div>
+<div id="newsletter" class="bd-newsletter">
+  <section class="bd-index-section bd-newsletter-box">
+    <div class="bd-newsletter-heading">
+      <span class="icon has-text-primary is-size-2-widescreen">
+        <i class="fas fa-paper-plane"></i>
+      </span>
 
-      <div class="column">
-        <form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
-          <div class="field is-grouped">
-            <div class="control has-icons-left is-expanded">
-              <input type="email" value="" name="email" class="input is-medium is-flat" placeholder="email address" required>
-              <span class="icon is-small is-left">
-                <i class="fas fa-envelope"></i>
-              </span>
-              {% include elements/drawing.html id='spam-free' width=112 height=88 %}
-            </div>
+      <h2 class="title has-text-black mb-0 is-size-2-widescreen">
+        <strong>Newsletter</strong>
+        <small>Features, releases, showcase… stay in the loop!</small>
+      </h2>
 
-            <div class="control">
-              <div class="is-hidden">
-                <input type="text" name="hp" id="hp">
-              </div>
-              <input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
-              <button class="button is-medium is-link">
-                <strong>Subscribe</strong>
-              </button>
-            </div>
+      <form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
+        <div class="bd-newsletter-fields">
+          <div class="control has-icons-left is-expanded">
+            <input type="email" value="" name="email" class="input is-medium is-primary" placeholder="email address" required>
+            <span class="icon is-small is-left">
+              <i class="fas fa-envelope"></i>
+            </span>
+            {% include elements/drawing.html id='spam-free' width=112 height=88 %}
           </div>
-        </form>
-      </div>
+
+          <div class="control">
+            <div class="is-hidden">
+              <input type="text" name="hp" id="hp">
+            </div>
+            <input type="hidden" name="list" value="So5UY3O9gHJkq892bn763Tyf4A">
+            <button class="button is-medium is-primary">
+              <strong>Subscribe</strong>
+            </button>
+          </div>
+        </div>
+      </form>
     </div>
-  </div>
-</section>
+  </section>
+</div>

docs/_includes/global/scripts.html

@@ -1,5 +1,7 @@
 <script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
 <script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
+<script src="{{ site.url }}/vendor/cupcakes-3.1.0.min.js"></script>
+
 <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
 
 {% if page.route == 'index' %}
@@ -18,35 +20,32 @@
       s.parentNode.insertBefore(wf, s);
    })(document);
   </script>
-{% elsif page.doc-subtab == 'navbar' %}
-  {% include examples/navbar-bottom.html %}
-  <script type="text/javascript" src="{{ site.url }}/lib/navbar.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
 {% endif %}
 
-<div id="fb-root"></div>
+{% if page.layout == 'documentation' %}
+  <script src="{{ site.url }}/lib/docs.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
+{% endif %}
 
-<script async defer type="text/javascript">(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.async = true;
-  js.defer = true;
-  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
+{% if page.doc-subtab == 'start' %}
+  <script src="{{ site.url }}/lib/start.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
+{% endif %}
 
-<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
-
-<script async defer type="text/javascript">
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-82634666-2', 'auto');
-  ga('send', 'pageview');
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script type="text/javascript"> docsearch({
+  apiKey: 'cb93c14bebd90678e789c946d95ea94d',
+  indexName: 'bulma',
+  inputSelector: '#algoliaSearch',
+  debug: false // Set debug to true if you want to inspect the dropdown
+});
 </script>
 
-{% if page.route == 'index' %}
-  <script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/72160148.js"></script>
-{% endif %}
+<script>
+window.addEventListener("load", function(){
+window.cupcakeconsent.initialise({
+  "content": {
+    "message": "Just so you know, this website uses cookies.",
+    "dismiss": "<span>👍</span> Got it!",
+    "link": "What are cookies?"
+  }
+})});
+</script>