Add GitHub sponsor button

Author: jgthms

docs/_data/expo.json

@@ -1,5 +1,10 @@
 {
   "by_id": {
+    "sinuous": {
+      "name": "Sinuous",
+      "url": "https://sinuous.netlify.com/",
+      "date": "21 Sep 2019"
+    },
     "divjoy": {
       "name": "Divjoy",
       "url": "https://divjoy.com/",
@@ -50,7 +55,6 @@
     },
     "mynameismirko2018": {
       "name": "mynameismirko",
-      "highlighted": true,
       "url": "http://2018.mynameismirko.it/",
       "date": "26 Jan 2019"
     },
@@ -347,6 +351,7 @@
       "bulmaplay",
       "filegator",
       "counternetwork",
+      "sinuous",
       "agilox",
       "pingstack",
       "mynameismirko2018",

docs/_data/links.json

@@ -482,26 +482,46 @@
     },
     "videos": {
       "name": "Videos",
+      "color": "success",
+      "icon": "play-circle",
+      "title": "Videos",
       "path": "/videos"
     },
     "blog": {
       "name": "Blog",
+      "title": "Blog",
+      "subtitle": "Stay updated with new features",
+      "color": "orange",
+      "icon": "rss",
       "path": "/blog"
     },
     "expo": {
       "name": "Expo",
+      "title": "Expo",
       "subtitle": "Official Bulma showcase",
       "icon": "star",
       "color": "star",
       "path": "/expo"
     },
     "love": {
       "name": "Love",
+      "title": "Love",
       "subtitle": "Fans of Bulma around the world",
       "color": "danger",
       "icon": "heart",
       "path": "/love"
     },
+    "backers": {
+      "id": "backers",
+      "name": "Patreon Backers",
+      "title": "Backers",
+      "color": "patreon",
+      "icon": "patreon",
+      "path": "/backers",
+      "icon_brand": true,
+      "subtitle": "Everyone who is supporting Bulma",
+      "description": "Everyone who is supporting Bulma"
+    },
     "more": {
       "name": "More",
       "path": "/more"
@@ -543,8 +563,15 @@
       "path": "/extensions"
     }
   },
+  "navbar": [
+    "videos",
+    "expo",
+    "love",
+    "backers"
+  ],
   "more": [
-    "patreon-backers",
+    "backers",
+    "blog",
     "made-with-bulma",
     "bootstrap",
     "extensions",

docs/_includes/components/categories.html

@@ -14,7 +14,7 @@
         <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
           <strong>{{ category_link.name }}</strong>
           {% if category_link.name == 'Customize' %}
-            <span class="tag is-success">
+            <span class="tag bd-mini-tag is-success">
               New!
             </span>
           {% endif %}

docs/_includes/elements/github.html

@@ -0,0 +1,7 @@
+<a class="button bd-github-button" href="https://github.com/users/jgthms/sponsorship" target="_blank">
+  <span class="icon">
+    <i class="fas fa-heart"></i>
+  </span>
+  <strong>Sponsor</strong>
+  <em class="tag bd-mini-tag is-small is-success">New!</em>
+</a>

docs/_includes/footer/support.html

@@ -38,6 +38,7 @@ <h4 class="bd-footer-title">
         <strong>Monthly</strong> donation
       </p>
       <div class="bd-footer-donation-action">
+        {% include elements/github.html %}
         {% include elements/patreon.html %}
       </div>
     </div>

docs/_includes/global/navbar.html

@@ -33,18 +33,19 @@
         <span class="is-hidden-touch is-hidden-widescreen">
           Docs
         </span>
-        <span class="is-hidden-desktop-only">
+        <span class="is-hidden-tablet-only is-hidden-desktop-only">
           Documentation
         </span>
       </a>
 
-      {% for item in site.data.global.navbar_items %}
-        <a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
-          <span class="icon {{ item.color }}">
-            <i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
+      {% 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>{{ item.title }}</span>
+          <span>{{ link.title }}</span>
         </a>
       {% endfor %}
 
@@ -57,7 +58,7 @@
         <div id="moreDropdown" class="navbar-dropdown">
           {% 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 %}" href="{{ site.url }}/{{ link.path }}">
+            <a class="navbar-item {% if page.route == link_id %}is-active{% 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>
@@ -90,6 +91,9 @@
 
       <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>

docs/_sass/footer.sass

@@ -60,7 +60,7 @@
 
 +tablet
   .bd-footer-donation
-    width: 240px
+    padding: 0.75rem 1.5rem
 
 .bd-footer-donation-title
   color: $grey-light
@@ -71,6 +71,11 @@
 .bd-footer-donation-action
   @extend %center
   height: 70px
+  .bd-github-button
+    margin-right: 0.5rem
+  .bd-github-button,
+  .bd-patreon-button
+    flex-shrink: 0
   .paypal-form
     height: 30px
     img

docs/_sass/global.sass

@@ -37,6 +37,30 @@ svg
     p:first-child
       margin-right: 1em
 
+.bd-github-button
+  background-color: #eff3f6
+  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%)
+  border-color: #1b1f2333
+  color: #24292e
+  font-size: 0.875rem
+  height: auto
+  padding: calc(0.5em - 1px) 1em
+  position: relative
+  strong
+    font-weight: $weight-semibold
+    margin-top: -2px
+  .icon
+    color: #ea4aaa
+  .tag
+    font-size: 0.5rem
+    font-style: normal
+    margin: -1px -8px 0 7px
+  &:hover
+    background-color: #e6ebf1
+    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%)
+    background-position: -.5em
+    border-color: #1b1f2359
+
 .bd-patreon-button
   display: inline-block
   position: relative
@@ -135,3 +159,13 @@ $carbon-poweredby-height: 20px
     right: 0
     &:hover
       text-decoration: underline
+
++until($widescreen)
+  #navMenuLove .bd-navbar-item-backers
+    display: none
+
++widescreen
+  #moreDropdown
+    .navbar-item:first-child,
+    .navbar-divider:nth-child(2)
+      display: none

docs/_sass/main.sass

@@ -165,19 +165,21 @@
     transition-duration: $speed
     transition-property: transform
 
+.tag.bd-mini-tag
+  border-radius: 2px !important
+  font-family: Verdana, sans-serif
+  font-size: 0.5rem
+  font-weight: bold
+  height: 2.25em
+  vertical-align: text-bottom
+
 .bd-category-name
   color: $text-strong
   position: relative
   &.is-active
     color: $link
-  .tag
-    border-radius: 2px
-    font-family: Verdana
-    font-size: 0.5rem
-    font-weight: bold
-    height: 2.25em
+  .bd-mini-tag
     margin-left: 0.5em
-    vertical-align: text-bottom
 
 .bd-category-list
   @extend %bd-list

docs/backers.html

@@ -4,7 +4,6 @@
 route: backers
 breadcrumb:
 - home
-- more
 - patreon-backers
 ---