Add v1 beta link

2024-11-14 11:14:24 +00:00 · 2024-01-11 03:58:20 +00:00 · 2024-01-11 03:58:20 +00:00 · 363f29b026
commit 363f29b026
parent f1d23c178d
7 changed files with 316 additions and 91 deletions
--- a/docs/_includes/index/sponsors.html
+++ b/docs/_includes/index/sponsors.html
@ -2,34 +2,28 @@
  <div class="bd-sponsors-body">
    <div class="bd-sponsors-content bd-index-content">
      <h1 class="title has-text-black">
-        <strong>Bulma</strong> is thankful to its <a class="has-text-sponsor" href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a class="has-text-sponsor" href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
+        <strong>Bulma</strong> is thankful to its
+        <a class="has-text-sponsor" href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and
+        <a class="has-text-sponsor" href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
        <span class="icon has-text-sponsor">
          <i class="fas fa-thumbs-up"></i>
        </span>
      </h1>

      <div class="content">
-        <p>
-          Their support contributes to the continuous development of Bulma and other open source software.
-        </p>
+        <p>Their support contributes to the continuous development of Bulma and other open source software.</p>
      </div>

-      <a class="button bd-fat-button is-sponsor" href="{{ site.url }}{{ site.data.links.by_id.['become-sponsor'].path }}">
-        <span>
-          Become a sponsor
-        </span>
+      <a
+        class="button bd-fat-button is-sponsor"
+        href="{{ site.url }}{{ site.data.links.by_id.['become-sponsor'].path }}"
+      >
+        <span> Become a sponsor </span>
      </a>
    </div>

    <div class="bd-sponsors-list">
-      <div class="bd-partner-sponsors">
-        {% for sponsor_id in site.data.sponsors.home %}
-          {% include elements/sponsor-item.html
-            sponsor_id=sponsor_id
-            classname="bd-partner-sponsor"
-            %}
-        {% endfor %}
-      </div>
+      <div id="amis" class="bd-partner-sponsors"></div>
    </div>
  </div>

--- a/docs/_javascript/index.js
+++ b/docs/_javascript/index.js
@ -1,84 +1,128 @@
-document.addEventListener('DOMContentLoaded', () => {
-
+document.addEventListener("DOMContentLoaded", () => {
  // Intro

-  const introVideo = document.getElementById('introVideo');
-  const introIframe = document.getElementById('introIframe');
-  const npmClipboard = new Clipboard('#npmCopy');
+  const introVideo = document.getElementById("introVideo");
+  const introIframe = document.getElementById("introIframe");
+  const npmClipboard = new Clipboard("#npmCopy");

  if (window.Vimeo) {
    const introPlayer = new Vimeo.Player(introIframe);
-    introPlayer.ready().then(function() {
-      introVideo.classList.add('has-loaded');
+    introPlayer.ready().then(function () {
+      introVideo.classList.add("has-loaded");
    });
  }

-  npmClipboard.on('success', function(e) {
-    e.trigger.innerText = 'copied!';
-    e.trigger.classList.add('is-success');
+  npmClipboard.on("success", function (e) {
+    e.trigger.innerText = "copied!";
+    e.trigger.classList.add("is-success");
    setTimeout(() => {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-success');
+      e.trigger.innerText = "copy";
+      e.trigger.classList.remove("is-success");
    }, 500);
    e.clearSelection();
  });

-  npmClipboard.on('error', function(e) {
-    e.trigger.innerText = 'error!';
-    e.trigger.classList.add('is-error');
+  npmClipboard.on("error", function (e) {
+    e.trigger.innerText = "error!";
+    e.trigger.classList.add("is-error");
    setTimeout(() => {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-error');
+      e.trigger.innerText = "copy";
+      e.trigger.classList.remove("is-error");
    }, 500);
  });

  // Grid

-  const $grid = document.getElementById('grid');
-  const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
-  const $markup = document.querySelector('#markup code');
-  const $message = document.getElementById('message');
-  const $add = document.getElementById('add');
-  const $remove = document.getElementById('remove');
+  const $grid = document.getElementById("grid");
+  const $columns = Array.prototype.slice.call(
+    document.querySelectorAll("#grid > .column"),
+    0
+  );
+  const $markup = document.querySelector("#markup code");
+  const $message = document.getElementById("message");
+  const $add = document.getElementById("add");
+  const $remove = document.getElementById("remove");
  let showing = 5;

  function showColumns() {
    if (showing === 13) {
-      $message.style.display = 'block';
+      $message.style.display = "block";
    } else {
-      $message.style.display = 'none';
+      $message.style.display = "none";
    }

    showing = Math.min(Math.max(parseInt(showing), 1), 12);

-    $columns.forEach($el => {
-      $el.style.display = 'none';
+    $columns.forEach(($el) => {
+      $el.style.display = "none";
    });
-    $columns.slice(0, showing).forEach($el => {
-      $el.style.display = 'block';
+    $columns.slice(0, showing).forEach(($el) => {
+      $el.style.display = "block";
    });

-    $markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
-    $markup.insertAdjacentHTML('beforeend', '\n');
+    $markup.innerHTML =
+      '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
+    $markup.insertAdjacentHTML("beforeend", "\n");

-    for(let i = 0; i < showing; i++) {
-      $markup.insertAdjacentHTML('beforeend', '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
-      $markup.insertAdjacentHTML('beforeend', i + 1);
-      $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
-      $markup.insertAdjacentHTML('beforeend', '\n');
+    for (let i = 0; i < showing; i++) {
+      $markup.insertAdjacentHTML(
+        "beforeend",
+        '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>'
+      );
+      $markup.insertAdjacentHTML("beforeend", i + 1);
+      $markup.insertAdjacentHTML(
+        "beforeend",
+        '<span class="nt">&lt;/div&gt;</span>'
+      );
+      $markup.insertAdjacentHTML("beforeend", "\n");
    }

-    $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
+    $markup.insertAdjacentHTML(
+      "beforeend",
+      '<span class="nt">&lt;/div&gt;</span>'
+    );
  }

-  $add.addEventListener('click', () => {
+  $add.addEventListener("click", () => {
    showing++;
    showColumns();
  });

-  $remove.addEventListener('click', () => {
+  $remove.addEventListener("click", () => {
    showing--;
    showColumns();
  });

+  // Amis
+
+  const $amis = document.getElementById("amis");
+
+  fetch("https://jgthms.com/amis.json")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      return response.json();
+    })
+    .then((response) => {
+      const { by_id, home } = response;
+
+      home.forEach((id) => {
+        const ami = by_id[id];
+        const { url, alt = "", width, height } = ami;
+        const el = document.createElement("a");
+        el.className = "bd-sponsor-item bd-partner-sponsor";
+        el.href = "url";
+        el.target = "_blank";
+        el.title = alt;
+        const extension = ami.svg ? ".svg" : ".png";
+        const img = document.createElement("img");
+        img.src = `/images/amis/${id}${extension}`;
+        img.height = height;
+        img.width = width;
+        el.appendChild(img);
+        $amis.appendChild(el);
+      });
+    });
 });
--- a/docs/_sass/components/v1.scss
+++ b/docs/_sass/components/v1.scss
@ -7,6 +7,7 @@
  z-index: 100;
 }

+.v1-main,
 .v1-banner,
 .v1-modal {
  background: conic-gradient(
@ -93,4 +94,60 @@
  .v1-banner {
    flex-wrap: nowrap;
  }
+
+  .v1-title {
+    font-size: 2em;
+  }
+}
+
+.v1-main {
+  padding: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    max-width: 24em;
+    width: 100%;
+  }
+
+  form {
+    background-color: #fff;
+    padding: 1.5em;
+    border-radius: 0.5em;
+    width: 100%;
+  }
+
+  .button {
+    background: radial-gradient(
+      219.67% 183.43% at 13.27% 123.96%,
+      #050637 0%,
+      #0033c6 16.24%,
+      #00368b 34.3%,
+      #5e07bf 53.58%,
+      #c428ac 71.9%,
+      #fe6567 86.15%,
+      #fd8644 100%
+    );
+
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+    border: none;
+    font-weight: 500;
+    display: flex;
+    width: 100%;
+  }
+}
+
+.v1-tsp {
+  margin-top: 1em;
+  font-size: 0.75em;
+  opacity: 0.5;
 }
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@ -16847,6 +16847,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  z-index: 100;
 }

+.v1-main,
 .v1-banner,
 .v1-modal {
  background: conic-gradient(from 180deg at 50% 50%, #040435 0deg, #430677 60.0000017881deg, #b61bbd 97.5000035763deg, #fe5c65 149.9999964237deg, #ff896f 179.7256743908deg, #fc8433 209.5121526718deg, #fd8d4d 226.2606167793deg, #f45b10 244.5819711685deg, #ad267d 279.1821026802deg, #4b1acd 300.7368063927deg, #004e9c 319.7864770889deg, #003773 338.803768158deg, #040435 360deg);
@ -16917,7 +16918,48 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
  .v1-banner {
    flex-wrap: nowrap;
  }
+  .v1-title {
+    font-size: 2em;
+  }
 }
+.v1-main {
+  padding: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.v1-main > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  max-width: 24em;
+  width: 100%;
+}
+.v1-main form {
+  background-color: #fff;
+  padding: 1.5em;
+  border-radius: 0.5em;
+  width: 100%;
+}
+.v1-main .button {
+  background: radial-gradient(219.67% 183.43% at 13.27% 123.96%, #050637 0%, #0033c6 16.24%, #00368b 34.3%, #5e07bf 53.58%, #c428ac 71.9%, #fe6567 86.15%, #fd8644 100%);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  border: none;
+  font-weight: 500;
+  display: flex;
+  width: 100%;
+}
+
+.v1-tsp {
+  margin-top: 1em;
+  font-size: 0.75em;
+  opacity: 0.5;
+}
+
 :root {
  --bd-index-vertical: 1.5rem;
  --bd-index-gap: 3rem;
--- a/docs/css/bulma-docs.min.css
+++ b/docs/css/bulma-docs.min.css
--- a/docs/lib/index.js
+++ b/docs/lib/index.js
@ -1,85 +1,122 @@
-'use strict';
-
-document.addEventListener('DOMContentLoaded', function () {
+"use strict";

+document.addEventListener("DOMContentLoaded", function () {
  // Intro

-  var introVideo = document.getElementById('introVideo');
-  var introIframe = document.getElementById('introIframe');
-  var npmClipboard = new Clipboard('#npmCopy');
+  var introVideo = document.getElementById("introVideo");
+  var introIframe = document.getElementById("introIframe");
+  var npmClipboard = new Clipboard("#npmCopy");

  if (window.Vimeo) {
    var introPlayer = new Vimeo.Player(introIframe);
    introPlayer.ready().then(function () {
-      introVideo.classList.add('has-loaded');
+      introVideo.classList.add("has-loaded");
    });
  }

-  npmClipboard.on('success', function (e) {
-    e.trigger.innerText = 'copied!';
-    e.trigger.classList.add('is-success');
+  npmClipboard.on("success", function (e) {
+    e.trigger.innerText = "copied!";
+    e.trigger.classList.add("is-success");
    setTimeout(function () {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-success');
+      e.trigger.innerText = "copy";
+      e.trigger.classList.remove("is-success");
    }, 500);
    e.clearSelection();
  });

-  npmClipboard.on('error', function (e) {
-    e.trigger.innerText = 'error!';
-    e.trigger.classList.add('is-error');
+  npmClipboard.on("error", function (e) {
+    e.trigger.innerText = "error!";
+    e.trigger.classList.add("is-error");
    setTimeout(function () {
-      e.trigger.innerText = 'copy';
-      e.trigger.classList.remove('is-error');
+      e.trigger.innerText = "copy";
+      e.trigger.classList.remove("is-error");
    }, 500);
  });

  // Grid

-  var $grid = document.getElementById('grid');
-  var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
-  var $markup = document.querySelector('#markup code');
-  var $message = document.getElementById('message');
-  var $add = document.getElementById('add');
-  var $remove = document.getElementById('remove');
+  var $grid = document.getElementById("grid");
+  var $columns = Array.prototype.slice.call(document.querySelectorAll("#grid > .column"), 0);
+  var $markup = document.querySelector("#markup code");
+  var $message = document.getElementById("message");
+  var $add = document.getElementById("add");
+  var $remove = document.getElementById("remove");
  var showing = 5;

  function showColumns() {
    if (showing === 13) {
-      $message.style.display = 'block';
+      $message.style.display = "block";
    } else {
-      $message.style.display = 'none';
+      $message.style.display = "none";
    }

    showing = Math.min(Math.max(parseInt(showing), 1), 12);

    $columns.forEach(function ($el) {
-      $el.style.display = 'none';
+      $el.style.display = "none";
    });
    $columns.slice(0, showing).forEach(function ($el) {
-      $el.style.display = 'block';
+      $el.style.display = "block";
    });

    $markup.innerHTML = '<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;columns&quot;</span><span class="nt">&gt;</span>';
-    $markup.insertAdjacentHTML('beforeend', '\n');
+    $markup.insertAdjacentHTML("beforeend", "\n");

    for (var i = 0; i < showing; i++) {
-      $markup.insertAdjacentHTML('beforeend', '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
-      $markup.insertAdjacentHTML('beforeend', i + 1);
-      $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
-      $markup.insertAdjacentHTML('beforeend', '\n');
+      $markup.insertAdjacentHTML("beforeend", '  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column&quot;</span><span class="nt">&gt;</span>');
+      $markup.insertAdjacentHTML("beforeend", i + 1);
+      $markup.insertAdjacentHTML("beforeend", '<span class="nt">&lt;/div&gt;</span>');
+      $markup.insertAdjacentHTML("beforeend", "\n");
    }

-    $markup.insertAdjacentHTML('beforeend', '<span class="nt">&lt;/div&gt;</span>');
+    $markup.insertAdjacentHTML("beforeend", '<span class="nt">&lt;/div&gt;</span>');
  }

-  $add.addEventListener('click', function () {
+  $add.addEventListener("click", function () {
    showing++;
    showColumns();
  });

-  $remove.addEventListener('click', function () {
+  $remove.addEventListener("click", function () {
    showing--;
    showColumns();
  });
+
+  // Amis
+
+  var $amis = document.getElementById("amis");
+
+  fetch("https://jgthms.com/amis.json").then(function (response) {
+    if (!response.ok) {
+      throw new Error("HTTP error! Status: " + response.status);
+    }
+
+    return response.json();
+  }).then(function (response) {
+    var by_id = response.by_id,
+        home = response.home;
+
+
+    home.forEach(function (id) {
+      var ami = by_id[id];
+      var url = ami.url,
+          _ami$alt = ami.alt,
+          alt = _ami$alt === undefined ? "" : _ami$alt,
+          width = ami.width,
+          height = ami.height;
+
+      var el = document.createElement("a");
+      el.className = "bd-sponsor-item bd-partner-sponsor";
+      el.href = "url";
+      el.target = "_blank";
+      el.title = alt;
+      var extension = ami.svg ? ".svg" : ".png";
+      var img = document.createElement("img");
+      img.src = "/images/amis/" + id + extension;
+      img.height = height;
+      img.width = width;
+      el.appendChild(img);
+      $amis.appendChild(el);
+    });
+  });
 });
--- a/docs/v1-beta.html
+++ b/docs/v1-beta.html
@ -0,0 +1,51 @@
+---
+title: v1 beta sign up
+layout: playground
+---
+<div class="v1-main">
+  <div>
+    <h3 class="v1-title">
+      <span class="v1-emoji">🎉</span>
+      Bulma v1 is coming soon!
+    </h3>
+
+    <form action="https://mail.jgthms.com/subscribe" method="POST" accept-charset="utf-8">
+      <div class="content">
+        <p>Join the Beta to:</p>
+        <ul>
+          <li>gain access to the private v1 repository</li>
+          <li>be able to run the v1 locally</li>
+          <li>provide feedback about the new features</li>
+          <li>share suggestions about improvements</li>
+        </ul>
+      </div>
+
+      <div class="block">
+        <label class="label" for="name">Name</label>
+        <div class="form-control">
+          <input class="input" type="text" name="name" id="name">
+        </div>
+      </div>
+
+      <div class="block">
+        <label class="label" for="email">Email</label>
+        <div class="form-control">
+          <input class="input" type="email" name="email" id="email">
+        </div>
+      </div>
+
+      <div class="block" style="display: none;">
+        <label class="label" for="hp">HP</label>
+        <div class="form-control">
+          <input class="input" type="text" name="hp" id="hp">
+        </div>
+      </div>
+
+      <input type="hidden" name="list" value="cLsqDIbNTqfozYoXXXBLrw">
+      <input type="hidden" name="subform" value="yes">
+      <input class="button is-primary" type="submit" name="submit" id="submit">
+
+      <p class="v1-tsp">No spam. Just a few emails regarding gaining access and providing feedback.</p>
+    </form>
+  </div>
+</div>