mgm-jekyll-bulma 0.1.0 → 0.1.1

data/_includes/toc.html

@@ -0,0 +1,82 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.8
+          https://github.com/allejo/jekyll-toc
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | split: '<h' %}
+    {% assign firstHeader = true %}
+
+    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if headerLevel < minHeader or headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign firstHeader = false %}
+            {% assign minHeader = headerLevel %}
+        {% endif %}
+
+        {% assign indentAmount = headerLevel | minus: minHeader %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign html_id = _idWorkspace[0] %}
+
+        {% assign _classWorkspace = _workspace[0] | split: 'class="' %}
+        {% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
+        {% assign html_class = _classWorkspace[0] %}
+
+        {% if html_class contains "no_toc" %}
+            {% continue %}
+        {% endif %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '    ' %}
+        {% endfor %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}
+
+<div class="contents">
+    <div class="menu">
+        <p class="menu-label">{{ include.contents_title }}</p>
+        {{ my_toc | markdownify | strip }}
+    </div>
+</div>
+
+

data/_includes/vimeo.html

@@ -0,0 +1,3 @@
+<figure class="image is-16by9">
+    <iframe src="https://player.vimeo.com/video/{{ include.video }}?color=ff9933&title=0&byline=0&portrait=0" class="has-ratio" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"></script>
+</figure>

data/_includes/youtube.html

@@ -0,0 +1,8 @@
+<figure class="image is-16by9"> 
+    <iframe class="has-ratio" 
+        src="https://www.youtube.com/embed/{{ include.video }}?start={{ include.time | default: 0 }}&showinfo=0" 
+        frameborder="0" 
+        allowfullscreen
+        >
+    </iframe>
+</figure>

data/_layouts/blog.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+{{ content }}
+
+<div class="columns is-multiline">
+    <div class="column is-12">
+        {% include pagination.html %}
+    </div>
+    {% for post in paginator.posts %}
+    <div class="column is-12">
+        {% include post-card.html %}
+    </div>
+    {% endfor %}
+    <div class="column is-12">
+        {% include pagination.html %}
+    </div>
+    <div class="column is-12">
+        {% include subscribe.html %}
+    </div>
+</div>

data/_layouts/default.html

@@ -1 +1,59 @@
-{{ content }}
+<!DOCTYPE html>
+{% if page.menubar or page.menubar_toc %}
+{% assign has_left_sidebar = true %}
+{% endif %}
+
+{% if page.show_sidebar and has_left_sidebar  %}
+{% assign content_width = 'is-4' %}
+{% elsif page.show_sidebar or has_left_sidebar %}
+{% assign content_width = 'is-8' %}
+{% else %}
+{% assign content_width = 'is-12' %}
+{% endif %}
+
+<html
+ dir="{{ site.direction | default: 'ltr' }}"
+ lang="{{ site.lang | default: 'en' }}"
+ {% if site.fixed_navbar %}class="has-navbar-fixed-{{ site.fixed_navbar }}"{% endif %}>
+  {% include head.html %}
+  <body>
+    {% include header.html %}
+    {% unless page.hide_hero %}
+        {% include hero.html %}
+    {% endunless %}
+    {% include callouts.html %}
+    <section class="section">
+        <div class="container">
+            <div class="columns is-multiline">
+                {% if page.menubar_toc %}
+                <div class="column is-4-desktop is-4-tablet">
+                    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
+                    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
+                </div>
+                {% elsif page.menubar %}
+                <div class="column is-4-desktop is-4-tablet">
+                    {% include menubar.html %}
+                </div>
+                {% endif %}
+                <div class="column {{ content_width }}">
+                    {% include tabs.html %}
+                    {% include showcase.html %}
+                    {% include sponsors.html %}
+                    {% include gallery.html %}
+                    {{ content }}
+                </div>
+                {% if site.posts and page.show_sidebar %}
+                <div class="column is-4-desktop is-4-tablet">
+                    {% include latest-posts.html %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </section>
+    {% unless page.hide_footer %}
+        {% include footer.html %}
+    {% endunless %}
+    <script src="{{ site.baseurl }}/assets/js/app.js" type="text/javascript"></script>
+    {%- include footer-scripts.html -%}
+  </body>
+</html>

data/_layouts/page.html

@@ -2,4 +2,10 @@
 layout: default
 ---
 
-{{ content }}
+{% if page.toc %}
+    {% assign contentsTitle = page.toc_title | default: 'Contents' %}
+    {% include toc.html html=content class='menu-list' h_min=2 h_max=3 contents_title=contentsTitle %}
+{% endif %}
+<div class="content">
+    {{ content }}
+</div>

data/_layouts/post.html

@@ -2,4 +2,27 @@
 layout: default
 ---
 
-{{ content }}
+<div class="content">
+
+    <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
+
+    {% if page.series %}
+        {% include series.html %}
+    {% endif %}
+
+    {{ content }}
+</div>
+
+<div class="tags">
+    {% for tag in page.tags %}
+      {% include tag.html tag=tag %}
+    {% endfor %}
+</div>
+
+{% unless site.hide_share_buttons %}
+{% include share-buttons.html %}
+{% endunless %}
+
+{% if site.disqus.shortname %}
+  {% include disqus.html %}
+{% endif %}

data/_layouts/product-category.html

@@ -0,0 +1,42 @@
+---
+layout: default
+show_sidebar: false
+---
+
+<div class="columns is-multiline">
+
+  <div class="column is-12">
+    {{ page.content }}
+  </div>
+
+  {% assign sorted_products = site.products | sort:page.sort %}
+
+  {% for product in sorted_products %}
+  <div class="column is-4-desktop is-6-tablet">
+
+    <a href="{{ product.url | relative_url }}">
+
+      <div class="card">
+
+        {% if product.image %}
+        <div class="card-image">
+          <figure class="image is-4by3">
+            <img src="{{ product.image }}" alt="{{ product.title }}" />
+          </figure>
+        </div>
+        {% endif %}
+        <div class="card-content">
+
+          <p class="title is-4">{{ product.title }}</h2>
+          <p class="subtitle is-4">{{ product.subtitle }}</p>  
+          <p class="title is-5 has-text-right">{{ product.price }}</p>
+
+        </div>
+      </div>
+
+    </a>
+
+  </div>
+{% endfor %}
+</div>
+

data/_layouts/product.html

@@ -0,0 +1,61 @@
+---
+layout: default
+---
+
+<div class="columns is-multiline">
+
+    <div class="column is-6">
+        <figure class="image is-4by3">
+            <img src="{{ page.image }}" />
+        </figure>
+    </div>
+
+    <div class="column is-6">
+        <p class="title is-3">{{ page.title }}</p>
+        <p class="subtitle is-3">{{ page.subtitle }}</p>
+        <p class="title is-4 has-text-right">{{ page.price }}</p>
+        {% if page.product_code %}
+        <p class="subtitle is-5 has-text-right">{{ page.product_code }}</p>
+        {% endif %}
+        
+        {% if page.rating %}
+            {% include rating.html rating=page.rating %}
+        {% endif %}
+        
+        {% if page.features %}
+        <div class="content">
+            {% for feature in page.features %}
+            <p>
+                <span class="icon">
+                    {% if feature.icon %}
+                    <i class="fas {{ feature.icon }}"></i>
+                    {% else %}
+                    <i class="fas fa-circle fa-xs"></i>
+                    {% endif %}
+                </span> 
+                <span>{{ feature.label }}</span></p>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </div>
+
+    <div class="column is-12">
+        <p class="title is-4">Description</p>
+        <div class="content">
+            
+    
+            {{ content }}
+        </div>
+    </div>
+
+    {% if site.data.reviews[page.product_code] %}
+    <div class="column is-12">
+        <p class="title is-4">Reviews</p>
+        {% for review in site.data.reviews[page.product_code] %}
+        {% include review.html %}
+        {% endfor %}
+    </div>
+    {% endif %}
+
+</div>
+

data/_layouts/recipe.html

@@ -0,0 +1,98 @@
+---
+layout: default
+---
+
+<script type="application/ld+json">
+{
+    "@context": "https://schema.org/",
+    "@type": "Recipe",
+    "name": "{{ page.title }}",
+    "image": [
+        "{{ page.image }}"
+    ],
+    "author": {
+        "@type": "Person",
+        "name": "{{ page.author }}"
+    },
+    "datePublished": "{{ page.date }}",
+    "description": "{{ page.description }}",
+    "prepTime": "{{ page.prep_time }}",
+    "cookTime": "{{ page.cook_time }}",
+    "totalTime": "{{ page.total_time }}",
+    "keywords": "{{ page.keywords }}",
+    "recipeYield": "{{ page.recipe_yield }}",
+    "recipeCategory": "{{ page.recipe_category }}",
+    "recipeCuisine": "{{ page.recipe_cuisine }}",
+    {% if page.calories %}
+    "nutrition": {
+        "@type": "NutritionInformation",
+        "calories": "{{ page.calories }}"
+    },
+    {% endif %}
+    "recipeIngredient":
+        {{ page.ingredients | jsonify }},
+    "recipeInstructions": [
+        {% for step in page.method %}
+        {
+            "@type": "HowToStep",
+            "text": "{{ step }}"
+        {% if forloop.last == true %}
+        }
+        {% else %}
+        },
+        {% endif %}
+        {% endfor %}
+    ]
+}
+</script>
+
+<div class="columns is-multiline">
+    <div class="column is-4">
+        <div class="box has-text-centered">
+            <strong>Serves:</strong> {{ page.recipe_yield }}
+        </div>
+    </div>
+    <div class="column is-4">
+        <div class="box has-text-centered">
+            <strong>Prep time:</strong> {{ page.prep_time | date: "%k hours %M minutes" }}
+        </div>
+    </div>
+    <div class="column is-4">
+        <div class="box has-text-centered">
+            <strong>Cook time:</strong> {{ page.cook_time | date: "%k hours %M minutes" }}
+        </div>
+    </div>
+    <div class="column is-4">
+        <div class="box">
+            <p class="title is-4">Ingredients</p>
+            <div class="content">
+                <ul>
+                    {% for ingredient in page.ingredients %}
+                    <li>{{ ingredient }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="column is-8">
+        <p class="title is-4">Method</p>
+        <div class="content">
+            <ol>
+                {% for step in page.method %}
+                    <li>{{ step }}</li>
+                {% endfor %}
+            </ol>
+            <div class="tags">
+                {% assign tags = page.keywords | split: "," %}
+                {% for tag in tags %}
+                    {% include tag.html tag=tag %}
+                {% endfor %}
+            </div>
+            
+            <p>Published: {{ page.date | date: "%b %-d, %Y" }} by {{ page.author }}</p>
+        </div>
+        <div class="content">
+            {{ content }}
+        </div>
+    </div>
+</div>

data/_sass/_layout.scss

@@ -0,0 +1,40 @@
+div.highlight {
+    margin-bottom: 1rem;
+}
+
+@include desktop {
+    .navbar-item {
+        &.is-hoverable:hover {
+            .navbar-dropdown {
+                display: block;
+            }
+        }
+    }
+}
+
+.contents {
+    box-shadow: $box-shadow;
+    padding: 1.5rem;
+    margin-bottom: 3rem;
+}
+
+.hero-darken {
+    background-color: rgba($hero-darken, 0.5);
+}
+
+.content {
+    figure {
+        margin: 0;
+    }
+}
+
+.callout {
+    &-icon {
+        width: 4rem;
+        height: 4rem;
+        margin-bottom: 0.75rem;
+    }
+}
+
+// Alpine.js hide on initial load
+[x-cloak] { display: none !important; }

data/_sass/_main.scss

@@ -0,0 +1,22 @@
+@charset "utf-8";
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+$family-sans-serif: 'Montserrat', sans-serif;
+$primary: #188eac !default;
+
+$tabs-link-active-color: $primary;
+$tabs-link-active-border-bottom-color: $primary;
+
+$modal-content-width: 800px;
+
+@import "../node_modules/bulma/bulma.sass";
+$hero-darken: $dark !default;
+
+@import "layout";
+@import "syntax";
+@import "showcase";
+@import "../node_modules/bulma-block-list/src/block-list.scss";
+
+.gh-sponsor {
+  color: #ea4aaa;
+}

data/_sass/_showcase.scss

@@ -0,0 +1,13 @@
+.showcase {
+    margin-bottom: 3rem;
+    box-shadow: $box-shadow;
+
+    &-content {
+        padding: 1.5rem;
+        text-align: center;
+    }
+
+    .block-list {
+        margin-bottom: 1.5rem;
+    }
+}