asxpi/asxpio
asxpi/asxpio
1
0
Fork 0
Code Issues Pull requests Packages 1 Activity Actions

bingo: a page per datacenter

Browse source 
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
This commit is contained in:
Sergei Poljanski 2026-10-10 09:40:16 +04:00
commit feac965d02
Signed by: asxpi
GPG key ID: 4F8851660FA4121B
9 changed files with 253 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

47
views/bingo/layout.erb
View file

@ -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; }