Rick Cogley RickCogley

If I add a default keywords string to the metas settings, say in src/_data.yml like this:

...
metas:
    lang: en
    ...
    default_keywords: [aaaaa,bbbbb,ccccc]
    keywords: "=tags || =default_keywords"
 ...

This Vento template engine partial works as of Lume v3.0.1. 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-top-hero-ticker-image.vto partial among others. The index.yml has an array of images hero.images which is referenced here. The site is bilingual, so there is a Japanese (default lang) src/index.yml and an English src/en/index.yml.
The {{> ... const randomIndex sets up a random index number based on the length of the hero.images array.
The randomImage is then used as the index number to get the info from that image, so it can be referenced directly.
Defaults are set as fallbacks.
The img tag references the src and alt from the data, of the selected random image.

Every build of Lume, a different image is thus used, adding a little dynamism to the site.

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 langua

Tailwind v4 Syntax Cheatsheet

Tailwind v4 has new syntax for arbitrary values, variants, properties, and more. Here's the cheatsheet that I would have wanted when I first started using it.

Terms Primer

Property: Indicates an aspect of the appearance or layout of an element, such as margin or color. Are set to a value.
Custom Property (or CSS Variables): A property that is user-defined

Documentation uses RGB. https://tailwindcss.com/docs/background-color

bg-black : #000000
bg-white : #FFFFFF
bg-slate-50 : #F8FAFC
bg-slate-100 : #F1F5F9
bg-slate-200 : #E2E8F0
bg-slate-300 : #CBD5E1

Hi John, Janet - looking forward to seeing you, albeit for only a day. Here's a brief guide to East Tokyo.

See this annotated Google Map. I tried to mark everything below on it.

Your hotel, the Abest, is a "business hotel" in Kyobashi. Business hotel is code here for "functional and basic". When I stayed there in Feb, it was typically clean but cramped, but the duty manager spoke good English and I thought the shower and bed were pretty nice, and wifi worked fine too. I ate breakfast in the Ginza, but the hotel did have a breakfast option. There are several "combini" convenience stores near the hotel, and you can get drinks and meals there. Typical ones are Lawson, 7-11, Family Mart, Mini-Stop. Quality is high at the combini here, so there's no worry about getting ill like you might from a 7-11 burrito in the US.

Kyobashi is east of Tokyo station, extending down to the Ginza area. You can get the Ginza subway line at

	<!DOCTYPE html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Home - eSolia Pro Blog</title>

	<meta name="supported-color-schemes" content="light dark">
	<meta name="theme-color" content="hsl(33.38 100% 70%)" media="(prefers-color-scheme: light)">
	<meta name="theme-color" content="hsl(237.79 38% 28.000000000000004%)" media="(prefers-color-scheme: dark)">

	<body class="flex h-full bg-zinc-50 dark:bg-black">
	<!-- Container start -->
	<div class="flex w-full">
	<div class="fixed inset-0 flex justify-center sm:px-8">
	<div class="flex w-full max-w-7xl lg:px-8">
	<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
	</div>
	</div>
	<div class="relative flex w-full flex-col">
	<!-- ===== top-nav.vto TEMPLATE START ===== -->

	❯ journalctl -r -u lumecms
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async Promise.all (index 1)
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async https://cdn.jsdelivr.net/gh/lumeland/lume@4c90aaf24802e663ee9ac9130158153cb9d15a31/core/ren>
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async Renderer.#renderPage (https://cdn.jsdelivr.net/gh/lumeland/lume@4c90aaf24802e663ee9ac913015>
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async Renderer.render (https://cdn.jsdelivr.net/gh/lumeland/lume@4c90aaf24802e663ee9ac9130158153c>
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async VentoEngine.render (https://cdn.jsdelivr.net/gh/lumeland/lume@4c90aaf24802e663ee9ac91301581>
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async Environment.runString (https://deno.land/x/[email protected]/src/environment.ts:96:14)
	Apr 03 03:50:21 ubuntu-4gb-hel1-3 deno[970]: at async eval (eval at compile (https://deno.land/x/[email protected]/src/environment.ts:151:25), <anon>
	Apr 03 03:50:21 ubun

	<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
	<article class="flex flex-col items-start justify-between">
	<div class="relative w-full">
	<div class="absolute inset-0 bg-violet-500 opacity-80 rounded-2xl"></div>
	<img src="/assets/cat5-bg.jpg" alt="" class="aspect-video w-full rounded-2xl bg-blend-overlay object-cover sm:aspect-2/1 lg:aspect-3/2">
	<div class="absolute inset-0 rounded-2xl ring-1 ring-gray-900/10 ring-inset"></div>
	</div>
	<div class="max-w-xl">
	<div class="z-10">
	<!-- ===== post-details.vto TEMPLATE START ===== -->