Vento test - randomize gradient

1. readme.md

This Vento template engine partial works in Lume v3.0.0. Vento allows you to use javascript code by adding a greater-than sign after the opening curly brackets, like {{> code here}}.

• An index.yml is calling home.vto, which is in turn calling this top-projects.vto partial among others. The index.yml has the data like {{ recentprojects.subtitle }} which is referenced here.
• The {{> ... const gradientOptions sets up an object that is picked from randomly in the code under it.
• The for loop is referencing projectslast which is fetched from an API, and stored in src/_data/projectslast.json. This is a list of completed projects and dates.
• The for loop uses a custom shuffle function loaded in _config.ts. This randomizes the order of cards. Some people might hate that they become slightly out of chrolological order, but I like the idea of randomly listing the last three projects, in any order, every site build.
• The for loop checks lang, picking appropriate keys based on the page language.

import shuffle from "https://raw.githubusercontent.com/RickCogley/hibana/refs/heads/main/plugins/shuffle.ts?3";
...
site.use(shuffle());
...

2. top-projects.vto

<!-- ===== top-projects.vto TEMPLATE START ===== -->
<section class="bg-white overflow-hidden relative py-24 sm:py-32">
  <div class="2xl:max-w-7xl mx-auto px-4 sm:px-6 md:px-16 max-w-6xl py-24">
    <div class="mx-auto max-w-2xl text-left md:text-center">
      <div class="relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full">
            <div class="h-0.25 bg-gradient-to-r from-transparent via-yellow-500 to-transparent opacity-100 dark:via-yellow-400">
            </div>
          </div>
        </div>
        <div class="relative flex justify-left md:justify-center">
          <h2 class="bg-white p-2 text-lg text-yellow-500 font-medium [font-variant:small-caps]">{{ recentprojects.section }}</h2>
        </div>
      </div>
      <h3 class="text-2xl  sm:text-2xl md:text-3xl lg:text-4xl tracking-tighter font-display text-esoliablue-800 text-balance mt-12">
      {{ recentprojects.title }}  
      </h3>
      <p class="text-lg sm:text-xl md:text-2xl text-accent-500 mt-8 text-balance">  
      {{ recentprojects.subtitle }}
      </p>
      <div class="mt-6 flex items-center justify-center">
        <a href="{{ recentprojects.url }}" target="_blank" rel="noopener" class="rounded-md bg-pink-600 px-3.5 py-2.5 text-xl font-base text-white shadow-xs hover:bg-pink-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ recentprojects.cta }}</a>
      </div>
    </div>
  <div class="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
  {{>
  // Define gradient class combinations including dark mode.
    const gradientOptions = [
    {
      // Yellow gradient
      light: 'bg-gradient-to-br from-yellow-800 via-yellow-600 to-yellow-500',
      dark: 'dark:bg-gradient-to-br dark:from-yellow-900 dark:via-yellow-700 dark:to-yellow-600' 
    },
    {
      // Blue-cyan gradient
      light: 'bg-gradient-to-br from-blue-700 to-cyan-500',
      dark: 'dark:bg-gradient-to-br dark:from-blue-900 dark:to-cyan-700' 
    },
    {
      // Purple-pink gradient
      light: 'bg-gradient-to-br from-purple-700 to-pink-500',
      dark: 'dark:bg-gradient-to-br dark:from-purple-900 dark:to-pink-700' 
    },
    {
      // Green-teal gradient
      light: 'bg-gradient-to-br from-green-700 to-teal-500',
      dark: 'dark:bg-gradient-to-br dark:from-green-900 dark:to-teal-700' 
    }
    // Add more objects if needed
    ];
  }}
  {{ for project of projectslast |> shuffle }}
    {{>
    // Base random index on the number of gradient options
    const randomIndex = Math.floor(Math.random() * gradientOptions.length);
    // Set gradient for this loop iteration based on random index
    const selectedGradient = gradientOptions[randomIndex];
    }}
    <article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl
    {{ selectedGradient.light }} {{ selectedGradient.dark }} 
    px-8 pt-30 pb-8 sm:pt-28 lg:pt-30">
      <div class="absolute inset-0 -z-10 rounded-2xl bg-accent-900/40"></div>
      <div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
      <div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
        <time datetime="{{ project['DateYYYY-MM-DD'] }}" class="mr-8">{{ if lang === "ja" }}{{ project['DateJP'] }}{{ else }}{{ project['Date'] }}{{ /if }}</time>
        </div>
        <h3 class="mt-3 text-lg/6 font-semibold text-white">
            <span class="absolute inset-0"></span>
            {{ if lang === "ja" }}{{ project['顧客タイプ'] }}{{ else }}{{ project['Client Type'] }}{{ /if }}
        </h3>
        <p class="mt-5 text-sm/6 leading-6 text-gray-300">
          {{ if lang === "ja" }}{{ project['記事'] }}{{ else }}{{ project['Description'] }}{{ /if }}
        </p>
      </article>
    {{ /for }}
    </div>
  </div>
</section>
<!-- ===== top-projects.vto TEMPLATE END ===== -->