Fix website transfer includes

jgthms · Mar 21, 2024 · ab5b308 · ab5b308
1 parent 69877a6
commit ab5b308
Show file tree

Hide file tree

Showing 29 changed files with 444 additions and 890 deletions.
diff --git a/docs/_includes/book/book-banner.html b/docs/_includes/book/book-banner.html
@@ -0,0 +1,15 @@
+<section id="bulma-book" class="bd-book-banner hero is-medium">
+  <!-- <div class="bd-book-pattern"></div> -->
+  <div class="hero-body">
+    <div class="container">
+      <div class="bd-book-columns">
+        <div class="bd-book-column bd-is-cover">
+          {% include book/book-cover.html %}
+        </div>
+        <div class="bd-book-column bd-is-content">
+          {% include book/book-content.html show_cover=false %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/docs/_includes/book/book-content.html b/docs/_includes/book/book-content.html
@@ -0,0 +1,59 @@
+<div class="bd-book-content">
+  <header class="block bd-book-header">
+    <strong class="tag is-success">New!</strong>
+    <h3 class="title">The official Bulma book! 😲</h3>
+    <p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
+  </header>
+
+  {% if include.show_cover %}
+    <div class="bd-book-inline-cover">
+      {% include book/book-cover.html %}
+    </div>
+  {% endif %}
+
+  <div class="block bd-book-description is-size-5">
+    <p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
+  </div>
+  <div class="bd-book-tags">
+    <div class="field is-grouped is-grouped-multiline">
+      <div class="control">
+        <span class="tag is-white has-text-grey is-paddingless">Formats available:</span>
+      </div>
+      <div class="control">
+        <div class="tags has-addons">
+          <strong class="tag has-text-danger">PDF</strong>
+          <strong class="tag has-text-info">Epub</strong>
+          <strong class="tag has-text-success">Mobi</strong>
+        </div>
+      </div>
+      <div class="control">
+        <span class="tag is-white has-text-grey is-paddingless">or</span>
+      </div>
+      <div class="control">
+        <div class="tags has-addons">
+          <strong class="tag has-text-orange">Kindle</strong>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="block bd-book-buttons">
+    <div class="buttons">
+      <a class="button bd-is-bleeding is-large" href="{{ site.data.meta.book_url }}" target="_blank" rel="nofollow">
+        <span>
+          <em>PDF + Epub + Mobi</em>
+          <strong>Buy</strong> from <img src="{{ site.url }}/images/book/bleedingedge-type.png">
+        </span>
+      </a>
+      <a class="button bd-is-amazon is-large" href="{{ site.data.meta.book_amazon }}" target="_blank" rel="nofollow">
+        <span>
+          <em>Kindle version</em>
+          <strong>Buy</strong> from <img src="{{ site.url }}/images/book/amazon-logo.png">
+        </span>
+      </a>
+    </div>
+    <div class="bd-book-sample">
+      Or <a href="{{ site.data.meta.book_sample }}" target="_blank" rel="nofollow">
+        download a free sample</a>!
+    </div>
+  </div>
+</div>
diff --git a/docs/_includes/book/book-cover.html b/docs/_includes/book/book-cover.html
@@ -0,0 +1,12 @@
+<div class="bd-book-cover">
+  <a href="{{ site.data.meta.book_url }}" target="_blank">
+    {%
+      include docs/elements/responsive-image-2x.html
+      path="book/book-cover"
+      extension="jpg"
+      alt="The official Bulma book cover"
+      width="504"
+      height="661"
+    %}
+  </a>
+</div>
diff --git a/docs/_includes/book/book-modal.html b/docs/_includes/book/book-modal.html
@@ -0,0 +1,14 @@
+<div id="bookModal" class="bd-book-modal modal">
+  <div class="bd-book-modal-background"></div>
+  <div class="modal-content">
+    <div class="bd-book-modal-columns">
+      <div class="bd-book-modal-column bd-is-cover">
+        {% include book/book-cover.html %}
+      </div>
+      <div class="bd-book-modal-column bd-is-content">
+        {% include book/book-content.html show_cover=true %}
+      </div>
+    </div>
+  </div>
+  <button  class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
+</div>
diff --git a/docs/_includes/docs/components/hero.html b/docs/_includes/docs/components/hero.html
@@ -0,0 +1,30 @@
+{% capture hero_body %}
+<div class="bd-hero-body">
+  <div class="bd-hero-heading">
+    <h1 class="title algolia-lvl0">
+      {% if include.icon %}
+        <span class="icon">
+          <i class="{{ include.icon }}"></i>
+        </span>
+      {% endif %}
+      {{ include.title | markdownify }}
+    </h1>
+    <div class="subtitle is-4 algolia-lvl1">
+      {{ include.subtitle | markdownify }}
+    </div>
+    {{ include.content }}
+  </div>
+</div>
+{% endcapture %}
+
+<section class="hero bd-hero bd-is-{{ include.color }}">
+  <div class="hero-body">
+    {% if page.fullwidth %}
+      {{ hero_body }}
+    {% else %}
+      <div class="container">
+        {{ hero_body }}
+      </div>
+    {% endif %}
+  </div>
+</section>
diff --git a/docs/_includes/docs/elements/backers-paragraph.html b/docs/_includes/docs/elements/backers-paragraph.html
@@ -0,0 +1,16 @@
+{% if site.data.backers[include.tier].size > 0 or site.data.github[include.tier].size > 0 %}
+<h2>{{ include.title }}</h2>
+
+<ul>
+  {% for pt in site.data.backers[include.tier] reversed %}
+  <li>
+    {{ pt.name }}
+  </li>
+  {% endfor %}
+  {% for gh in site.data.github[include.tier] reversed %}
+  <li>
+    {{ gh }}
+  </li>
+  {% endfor %}
+</ul>
+{% endif %}
diff --git a/docs/_includes/docs/elements/banner.html b/docs/_includes/docs/elements/banner.html
@@ -0,0 +1,9 @@
+<section class="bd-banner bd-is-{{ include.color }}">
+  <div class="bd-banner-body">
+    <p class="bd-banner-title">
+      {{ include.title }}
+    </p>
+
+    {{ include.more }}
+  </div>
+</section>
diff --git a/docs/_includes/docs/elements/post.html b/docs/_includes/docs/elements/post.html
@@ -0,0 +1,34 @@
+{% assign date = post.date | date: "%B %-d" %}
+{% assign title = post.title | markdownify %}
+{% assign introduction = post.introduction | markdownify %}
+
+<div class="bd-post {% if post.featured %}is-featured{% endif %}">
+  <a class="bd-post-link" href="{{ site.url }}{{ post.url }}" style="--color: var(--{{ post.color }});">
+    <div class="bd-post-body">
+      <figure class="icon">
+        <i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+      </figure>
+
+      <div class="bd-post-content">
+        <h2 class="title">
+          {{ title }}
+        </h2>
+        <div class="subtitle">
+          {{ introduction }}
+        </div>
+      </div>
+    </div>
+
+    {% if post.image %}
+      <figure class="bd-post-image">
+        <img
+             src="https://source.unsplash.com/{{ post.image }}/400x240"
+          srcset="https://source.unsplash.com/{{ post.image }}/400x240 1x,
+                  https://source.unsplash.com/{{ post.image }}/800x480 2x"
+          alt="{{ post.alt }}"
+          width="400"
+          height="240">
+      </figure>
+    {% endif %}
+  </a>
+</div>
diff --git a/docs/_includes/docs/elements/responsive-image-2x.html b/docs/_includes/docs/elements/responsive-image-2x.html
@@ -0,0 +1,7 @@
+<img
+  src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
+  srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
+          {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x"
+  alt="{{ include.alt }}"
+  width="{{ include.width }}"
+  height="{{ include.height }}">
diff --git a/docs/_includes/docs/elements/responsive-image.html b/docs/_includes/docs/elements/responsive-image.html
@@ -0,0 +1,8 @@
+<img
+  src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
+  srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
+          {{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x,
+          {{ site.url }}/images/{{ include.path }}@3x.{{ include.extension }} 3x"
+  alt="{{ include.alt }}"
+  width="{{ include.width }}"
+  height="{{ include.height }}">
diff --git a/docs/_includes/docs/elements/rss-button.html b/docs/_includes/docs/elements/rss-button.html
@@ -0,0 +1,6 @@
+<a class="button is-rss" href="{{ site.url }}/atom.xml">
+  <span class="icon">
+    <i class="fas fa-rss"></i>
+  </span>
+  <span>Subscribe</span>
+</a>
diff --git a/docs/_includes/global/header.html b/docs/_includes/global/header.html
@@ -4,35 +4,40 @@
   </a>
 
   <nav id="js-nav" class="bd-nav">
-    {% for link_id in site.data.links.navbar %}
-      {% include global/nav-item.html link_id=link_id %}
-    {% endfor %}
+    {% for link_id in site.data.links.navbar %} {% include global/nav-item.html
+    link_id=link_id %} {% endfor %}
 
     <div class="bd-nav-icons">
-      {% for link_id in site.data.links.navbar_icons %}
-        {% include global/nav-item.html link_id=link_id %}
-      {% endfor %}
+      {% for link_id in site.data.links.navbar_icons %} {% include
+      global/nav-item.html link_id=link_id %} {% endfor %}
 
       <button class="bd-nav-item is-search is-icon">
         <span class="icon">
           <i class="fa-solid fa-magnifying-glass fa-lg"></i>
         </span>
       </button>
 
-      <button class="bd-nav-item is-icon is-ellipsis js-burger" data-target="js-more">
+      <button
+        class="bd-nav-item is-icon is-ellipsis js-burger"
+        data-target="js-more"
+      >
         <span class="icon">
           <i class="fa-solid fa-ellipsis fa-lg"></i>
         </span>
       </button>
 
       <div id="js-more" class="bd-nav-menu is-more js-menu">
-        {% for link_id in site.data.links.navbar_more %}
-          {% include global/nav-item.html link_id=link_id %}
-        {% endfor %}
+        {% for link_id in site.data.links.navbar_more %} {% include
+        global/nav-item.html link_id=link_id %} {% endfor %}
       </div>
     </div>
 
-    <a class="button is-primary bd-nav-mobile-download"> Download </a>
+    <a
+      class="button is-primary bd-nav-mobile-download"
+      href="{{ site.data.meta.download }}"
+    >
+      Download
+    </a>
   </nav>
 
   <div class="bd-nav-themes">
@@ -53,21 +58,33 @@
     </button>
 
     <div id="js-themes" class="bd-nav-menu is-cycles js-menu js-themes">
-      <button data-scheme="light" class="bd-nav-item is-sun" aria-label="Light mode">
+      <button
+        data-scheme="light"
+        class="bd-nav-item is-sun"
+        aria-label="Light mode"
+      >
         <span class="icon">
           <i class="fas fa-sun" aria-hidden="true"></i>
         </span>
         <span>Light</span>
       </button>
 
-      <button data-scheme="dark" class="bd-nav-item is-moon" aria-label="Dark mode">
+      <button
+        data-scheme="dark"
+        class="bd-nav-item is-moon"
+        aria-label="Dark mode"
+      >
         <span class="icon">
           <i class="fas fa-moon" aria-hidden="true"></i>
         </span>
         <span>Dark</span>
       </button>
 
-      <button data-scheme="system" class="bd-nav-item is-system" aria-label="System mode">
+      <button
+        data-scheme="system"
+        class="bd-nav-item is-system"
+        aria-label="System mode"
+      >
         <span class="icon">
           <i class="fas fa-display" aria-hidden="true"></i>
         </span>
@@ -76,19 +93,27 @@
     </div>
   </div>
 
-  <div class="bd-nav-search">
-    <button class="bd-nav-item is-search-desktop is-icon js-burger" data-target="js-search">
+  <div class="bd-nav-search is-hidden">
+    <button
+      class="bd-nav-item is-search-desktop is-icon js-burger"
+      data-target="js-search"
+    >
       <span class="icon">
         <i class="fa-solid fa-magnifying-glass fa-lg"></i>
       </span>
     </button>
 
     <div id="js-search" class="bd-nav-menu is-search js-menu">
-      <input id="form-search" class="input" type="text" placeholder="Search">
+      <input id="form-search" class="input" type="text" placeholder="Search" />
     </div>
   </div>
 
-  <a class="button is-primary bd-nav-desktop-download"> Download </a>
+  <a
+    class="button is-primary bd-nav-desktop-download"
+    href="{{ site.data.meta.download }}"
+  >
+    Download
+  </a>
 
   <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
     <span></span>