bingo: a page per datacenter

Everything lived on one URL per language, with each datacenter's
details and incidents inside a <dialog>. That page can rank for the
brand and a couple of head terms, but not for searches like
"Yandex Sasovo drone strike".

Add /:locale/dc/:slug for every datacenter, reserve included. Each page
has its own title (naming the latest incident when there is one), a
description built from the facts, canonical and hreflang links, the
photo as og:image, and JSON-LD Place + BreadcrumbList. It shows the
facts in a sentence or two, the incident list with sources, and
prev/next links by position. The slug never changes, so the URLs are
stable.

The card cells are now links to these pages. A plain click still opens
the dialog, while modified clicks open the page. The dialog and the
incident log link to the page too, and the sitemap lists every page in
all three languages. The layout takes title, description, alternates
and JSON-LD from the route, and the dialog and the page share the meta
and incident partials.

Assisted-by: Claude:opus-5

views/bingo/_dc_incidents.erb

@@ -0,0 +1,10 @@
+<% if dc.incidents.empty? %>
+  <p class="empty"><%= t(:no_incidents) %></p>
+<% else %>
+  <ul>
+    <% dc.incidents.each do |i| %>
+      <li><%= kind_icon(i.kind) %> <time datetime="<%= i.occurred_on %>"><%= fmt_date(i.occurred_on) %></time> —
+        <% if i.url %><a href="<%= i.url %>" target="_blank" rel="noopener nofollow"><%= i.l(:title, @locale) %></a><% else %><%= i.l(:title, @locale) %><% end %></li>
+    <% end %>
+  </ul>
+<% end %>

views/bingo/_dc_meta.erb

@@ -0,0 +1,9 @@
+<div class="meta">
+  <%= [dc.operator, mw(dc), dc.l(:city, @locale), status_label(dc) || (dc.year && format(t(:since), dc.year))].compact.join(' · ') %>
+</div>
+<% if dc.photo_credit || dc.info_url %>
+  <div class="credit">
+    <% if dc.photo_credit %><%= t(:photo) %>: <%= dc.photo_credit %><% end %>
+    <% if dc.info_url %> · <a href="<%= dc.info_url %>" target="_blank" rel="noopener nofollow"><%= t(:source) %></a><% end %>
+  </div>
+<% end %>

views/bingo/dc.erb

@@ -0,0 +1,33 @@
+<% dc = @dc %>
+<main>
+  <header>
+    <nav class="crumbs"><a href="/<%= @locale %>"><%= t(:title) %></a></nav>
+    <nav class="langs">
+      <% Bingo::LOCALES.each do |l| %>
+        <a href="<%= @path_for.(l) %>" hreflang="<%= l %>" lang="<%= l %>" <%== 'aria-current="page"' if l == @locale %>><%= l %></a>
+      <% end %>
+    </nav>
+  </header>
+
+  <article class="dc-page<%= ' hit' if dc.incidents.any? %>">
+    <% if (photo = photo_path(dc, 1200)) %><img src="<%= photo %>" alt="<%= dc.l(:name, @locale) %>, <%= dc.l(:city, @locale) %>" decoding="async"><% end %>
+    <h1><%= dc.l(:name, @locale) %></h1>
+    <%== erb :_dc_meta, layout: false, locals: { dc: dc } %>
+    <p class="facts"><%= dc_facts(dc).join(' ') %></p>
+    <section>
+      <h2><%= t(:incidents) %></h2>
+      <%== erb :_dc_incidents, layout: false, locals: { dc: dc } %>
+    </section>
+  </article>
+
+  <nav class="pager">
+    <% if @prev %><a href="<%= dc_path(@prev) %>" rel="prev">← #<%= @prev.position %> <%= @prev.l(:name, @locale) %></a><% else %><span></span><% end %>
+    <% if @next %><a href="<%= dc_path(@next) %>" rel="next">#<%= @next.position %> <%= @next.l(:name, @locale) %> →</a><% end %>
+  </nav>
+  <p><a href="/<%= @locale %>"><%= t(:back) %></a></p>
+
+  <footer>
+    <p><%= t(:footer) %></p>
+    <p>© <%= Date.today.year %> <a href="https://asxp.io">asxp.io</a></p>
+  </footer>
+</main>

views/bingo/index.erb

@@ -33,7 +33,7 @@
   <div class="grid">
     <% b.cells.each_with_index do |dc, idx| %>
       <% photo = photo_path(dc, 480) %>
-      <button type="button" data-dlg="dlg-<%= dc.slug %>"
+      <a href="<%= dc_path(dc) %>" data-dlg="dlg-<%= dc.slug %>"
               class="cell<%= ' photo' if photo %><%= ' hit' if b.hit[idx] %><%= ' win' if b.win_cells.include?(idx) %>"
               aria-label="<%= dc.l(:name, @locale) %><%= " — #{kind_label(dc.incidents.first.kind)}" if b.hit[idx] %>">
         <% if photo %><img class="bg" src="<%= photo %>" alt="" width="480" height="480" decoding="async"<%== ' loading="lazy"' if idx >= 10 %>><% end %>
@@ -46,7 +46,7 @@
           <div class="sub"><%= dc.l(:city, @locale) %></div>
         </div>
         <% if b.hit[idx] %><div class="stamp"><%= kind_icon(dc.incidents.first.kind) %></div><% end %>
-      </button>
+      </a>
     <% end %>
   </div>
 
@@ -62,7 +62,7 @@
           <span><%= kind_icon(i.kind) %></span>
           <div>
             <% if i.url %><a href="<%= i.url %>" target="_blank" rel="noopener nofollow"><%= i.l(:title, @locale) %></a><% else %><%= i.l(:title, @locale) %><% end %>
-            <div class="dc"><%= i.datacenter.l(:name, @locale) %> · <%= kind_label(i.kind) %></div>
+            <div class="dc"><a href="<%= dc_path(i.datacenter) %>"><%= i.datacenter.l(:name, @locale) %></a> · <%= kind_label(i.kind) %></div>
           </div>
         </li>
       <% end %>
@@ -80,31 +80,22 @@
     <% if (photo = photo_path(dc, 1200)) %><img src="<%= photo %>" alt="<%= dc.l(:name, @locale) %>, <%= dc.l(:city, @locale) %>" loading="lazy" decoding="async"><% end %>
     <div class="body">
       <h3><%= dc.l(:name, @locale) %></h3>
-      <div class="meta">
-        <%= [dc.operator, mw(dc), dc.l(:city, @locale), status_label(dc) || (dc.year && format(t(:since), dc.year))].compact.join(' · ') %>
+      <%== erb :_dc_meta, layout: false, locals: { dc: dc } %>
+      <%== erb :_dc_incidents, layout: false, locals: { dc: dc } %>
+      <div class="actions">
+        <a href="<%= dc_path(dc) %>"><%= t(:dc_page) %></a>
+        <form method="dialog"><button><%= t(:close) %></button></form>
       </div>
-      <% if dc.photo_credit || dc.info_url %>
-        <div class="credit">
-          <% if dc.photo_credit %><%= t(:photo) %>: <%= dc.photo_credit %><% end %>
-          <% if dc.info_url %> · <a href="<%= dc.info_url %>" target="_blank" rel="noopener nofollow"><%= t(:source) %></a><% end %>
-        </div>
-      <% end %>
-      <% if dc.incidents.empty? %>
-        <p class="empty"><%= t(:no_incidents) %></p>
-      <% else %>
-        <ul>
-          <% dc.incidents.each do |i| %>
-            <li><%= kind_icon(i.kind) %> <%= fmt_date(i.occurred_on) %> —
-              <% if i.url %><a href="<%= i.url %>" target="_blank" rel="noopener nofollow"><%= i.l(:title, @locale) %></a><% else %><%= i.l(:title, @locale) %><% end %></li>
-          <% end %>
-        </ul>
-      <% end %>
-      <form method="dialog"><button><%= t(:close) %></button></form>
     </div>
   </dialog>
 <% end %>
 
 <script>
-  document.querySelectorAll('[data-dlg]').forEach(b =>
-    b.addEventListener('click', () => document.getElementById(b.dataset.dlg).showModal()));
+  // Cells are links to the datacenter pages; a plain click opens the dialog
+  // instead, modified clicks (new tab etc.) keep the link.
+  document.querySelectorAll('[data-dlg]').forEach(a => a.addEventListener('click', e => {
+    if (e.button || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    e.preventDefault();
+    document.getElementById(a.dataset.dlg).showModal();
+  }));
 </script>

views/bingo/layout.erb

@@ -1,45 +1,45 @@
 <% base = base_url %>
-<% desc = format(t(:seo_desc), hit: @board.hit.count(true), total: @board.cells.size) %>
-<% og = og_dc(@board) %>
-<% og_img = og && "#{base}/p/#{og.og_file}" %>
+<% og_img = @og && "#{base}/p/#{@og.og_file}" %>
 <!doctype html>
 <html lang="<%= @locale %>">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title><%= t(:seo_title) %></title>
-<meta name="description" content="<%= desc %>">
-<meta name="robots" content="<%= @board.operational_only? ? 'noindex, follow' : 'index, follow, max-image-preview:large' %>">
+<title><%= @title %></title>
+<meta name="description" content="<%= @desc %>">
+<meta name="robots" content="<%= @noindex ? 'noindex, follow' : 'index, follow, max-image-preview:large' %>">
 <meta name="theme-color" content="#121212">
-<link rel="canonical" href="<%= base %>/<%= @locale %>">
+<link rel="canonical" href="<%= base %><%= @path_for.(@locale) %>">
 <% Bingo::LOCALES.each do |l| %>
-<link rel="alternate" hreflang="<%= l %>" href="<%= base %>/<%= l %>">
+<link rel="alternate" hreflang="<%= l %>" href="<%= base %><%= @path_for.(l) %>">
+<% end %>
+<% if @x_default %>
+<link rel="alternate" hreflang="x-default" href="<%= base %><%= @x_default %>">
 <% end %>
-<link rel="alternate" hreflang="x-default" href="<%= base %>/">
 <link rel="sitemap" type="application/xml" href="/sitemap.xml">
 <meta property="og:type" content="website">
 <meta property="og:site_name" content="<%= t(:title) %>">
-<meta property="og:title" content="<%= t(:seo_title) %>">
-<meta property="og:description" content="<%= desc %>">
-<meta property="og:url" content="<%= base %>/<%= @locale %>">
+<meta property="og:title" content="<%= @title %>">
+<meta property="og:description" content="<%= @desc %>">
+<meta property="og:url" content="<%= base %><%= @path_for.(@locale) %>">
 <meta property="og:locale" content="<%= t(:og_locale) %>">
 <% (Bingo::LOCALES - [@locale]).each do |l| %>
 <meta property="og:locale:alternate" content="<%= Bingo::T[l][:og_locale] %>">
 <% end %>
 <% if og_img %>
 <meta property="og:image" content="<%= og_img %>">
-<% if og.photo_og %>
+<% if @og.photo_og %>
 <meta property="og:image:type" content="image/jpeg">
 <meta property="og:image:width" content="<%= Bingo::Photo::OG_SIZE[0] %>">
 <meta property="og:image:height" content="<%= Bingo::Photo::OG_SIZE[1] %>">
 <% end %>
-<meta property="og:image:alt" content="<%= og.l(:name, @locale) %>, <%= og.l(:city, @locale) %>">
+<meta property="og:image:alt" content="<%= @og.l(:name, @locale) %>, <%= @og.l(:city, @locale) %>">
 <meta name="twitter:image" content="<%= og_img %>">
 <% end %>
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="<%= t(:seo_title) %>">
-<meta name="twitter:description" content="<%= desc %>">
-<script type="application/ld+json"><%== json_ld(@board, desc) %></script>
+<meta name="twitter:title" content="<%= @title %>">
+<meta name="twitter:description" content="<%= @desc %>">
+<script type="application/ld+json"><%== @ld %></script>
 <link rel="icon" href="/favicon.ico" sizes="48x48">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
@@ -87,7 +87,7 @@
     position: relative; aspect-ratio: 1; padding: 8px; overflow: hidden; width: 100%;
     background: var(--card); border: 1px solid var(--line); border-radius: 8px;
     display: flex; flex-direction: column; justify-content: space-between;
-    text-align: left; color: inherit; font: inherit; cursor: pointer;
+    text-align: left; color: inherit; font: inherit; text-decoration: none; cursor: pointer;
   }
   .cell.photo { color: var(--on-photo); border-color: transparent; }
   .cell .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
@@ -125,6 +125,17 @@
   dialog h3 { margin: 0 0 4px; }
   dialog .credit { font-size: 12px; color: var(--muted); margin-top: 4px; }
   dialog ul { padding-left: 18px; }
+  dialog .actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
+  dialog form { margin: 0; }
+  .crumbs a { font-weight: 700; text-decoration: none; }
+  .crumbs a:hover { text-decoration: underline; }
+  .dc-page img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 16px; }
+  .dc-page h1 { font-size: clamp(26px, 5vw, 38px); }
+  .dc-page.hit h1 { color: var(--hit); }
+  .dc-page .credit { font-size: 12px; color: var(--muted); margin-top: 4px; }
+  .dc-page .facts { max-width: 65ch; }
+  .dc-page ul { padding-left: 18px; }
+  .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); }
   dialog button { font: inherit; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
   footer { margin-top: 32px; color: var(--muted); font-size: 13px; }
   footer p { margin: 0 0 4px; }

views/bingo/sitemap.erb

@@ -1,12 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<% @entries.each do |path_for, lastmod, x_default| %>
 <% Bingo::LOCALES.each do |l| %>
   <url>
-    <loc><%= base_url %>/<%= l %></loc>
-<% if @lastmod %>    <lastmod><%= @lastmod.utc.iso8601 %></lastmod>
+    <loc><%= base_url %><%= path_for.(l) %></loc>
+<% if lastmod %>    <lastmod><%= lastmod.utc.iso8601 %></lastmod>
+<% end %>
+<% Bingo::LOCALES.each do |alt| %>    <xhtml:link rel="alternate" hreflang="<%= alt %>" href="<%= base_url %><%= path_for.(alt) %>"/>
+<% end %>
+<% if x_default %>    <xhtml:link rel="alternate" hreflang="x-default" href="<%= base_url %><%= x_default %>"/>
 <% end %>
-<% Bingo::LOCALES.each do |alt| %>    <xhtml:link rel="alternate" hreflang="<%= alt %>" href="<%= base_url %>/<%= alt %>"/>
-<% end %>    <xhtml:link rel="alternate" hreflang="x-default" href="<%= base_url %>/"/>
   </url>
 <% end %>
+<% end %>
 </urlset>