435 lines
14 KiB
TypeScript
435 lines
14 KiB
TypeScript
import { el, emit, fmt, icon, jsonAttr, labelsFor, plural, uiLocaleOf, type Labels } from './labels'
|
||
import { DESCRIPTION_FONT, DESCRIPTION_MAX_PX, DESCRIPTION_MOBILE_MAX_PX, TITLE_FONT, TITLE_MAX_PX, truncate } from './measure'
|
||
|
||
export const SERP_TAG = 'golem15-seo-serp'
|
||
|
||
/** One locale of the seo_snippet context answer. */
|
||
export interface ContextLocale {
|
||
locale: string
|
||
url: string | null
|
||
h1: string | null
|
||
siteName: string
|
||
titleTemplate: string
|
||
defaultTitle: string
|
||
defaultDescription: string | null
|
||
descriptionSource: string
|
||
bodyWords: number | null
|
||
}
|
||
|
||
interface ContextData {
|
||
op: 'context'
|
||
host: string
|
||
locales: ContextLocale[]
|
||
}
|
||
|
||
interface DuplicateItem {
|
||
label: string
|
||
url: string
|
||
}
|
||
|
||
interface DuplicatesData {
|
||
op: 'duplicates'
|
||
locale: string
|
||
title: DuplicateItem[]
|
||
description: DuplicateItem[]
|
||
}
|
||
|
||
type Payload = { op: 'context' } | { op: 'duplicates'; locale: string; title: string; description: string }
|
||
|
||
const DUPLICATE_DELAY_MS = 800
|
||
const MAX_LINKS = 3
|
||
const LENGTH_WORDS = 300
|
||
|
||
/** Fills a title template the way classes/templates.go does. */
|
||
export function renderTemplate(tpl: string, vars: { title: string; description?: string; site: string }): string {
|
||
if (tpl.trim() === '') {
|
||
return ''
|
||
}
|
||
const out = tpl
|
||
.split('%title%').join(vars.title)
|
||
.split('%description%').join(vars.description ?? '')
|
||
.split('%site%').join(vars.site)
|
||
return out.split(/\s+/).filter(Boolean).join(' ').replace(/^[\s|\-–—·:,]+|[\s|\-–—·:,]+$/gu, '')
|
||
}
|
||
|
||
/** Lowercases and strips diacritics (ł becomes l) for keyphrase checks. */
|
||
export function normalizeText(s: string): string {
|
||
return s
|
||
.toLowerCase()
|
||
.replace(/ł/g, 'l')
|
||
.normalize('NFD')
|
||
.replace(/\p{M}/gu, '')
|
||
}
|
||
|
||
/** The words of a text after normalizeText. */
|
||
export function words(s: string): string[] {
|
||
return normalizeText(s).split(/[^\p{L}\p{N}]+/u).filter(Boolean)
|
||
}
|
||
|
||
/**
|
||
* Q-4 stem rule: two words match when equal, or when both have at least 5
|
||
* characters and share a prefix of at least max(5, shorter length − 3)
|
||
* characters ("grzyby" matches "grzybów").
|
||
*/
|
||
export function wordsMatch(a: string, b: string): boolean {
|
||
if (a === b) {
|
||
return true
|
||
}
|
||
const ca = Array.from(a)
|
||
const cb = Array.from(b)
|
||
if (ca.length < 5 || cb.length < 5) {
|
||
return false
|
||
}
|
||
const need = Math.max(5, Math.min(ca.length, cb.length) - 3)
|
||
let shared = 0
|
||
while (shared < ca.length && shared < cb.length && ca[shared] === cb[shared]) {
|
||
shared++
|
||
}
|
||
return shared >= need
|
||
}
|
||
|
||
/** Whether the phrase's words appear in text in order (C6 matching). */
|
||
export function phraseIn(phrase: string, text: string): boolean {
|
||
const p = words(phrase)
|
||
if (p.length === 0) {
|
||
return false
|
||
}
|
||
const t = words(text)
|
||
for (let start = 0; start + p.length <= t.length; start++) {
|
||
let ok = true
|
||
for (let i = 0; i < p.length; i++) {
|
||
if (!wordsMatch(p[i], t[start + i])) {
|
||
ok = false
|
||
break
|
||
}
|
||
}
|
||
if (ok) {
|
||
return true
|
||
}
|
||
}
|
||
return false
|
||
}
|
||
|
||
/** A locale map or a plain value read for one locale. */
|
||
function valueIn(fill: Record<string, unknown>, key: string, locale: string): string {
|
||
const v = fill[key]
|
||
if (typeof v === 'string') {
|
||
return v
|
||
}
|
||
if (v && typeof v === 'object') {
|
||
const text = (v as Record<string, unknown>)[locale]
|
||
return typeof text === 'string' ? text : ''
|
||
}
|
||
return ''
|
||
}
|
||
|
||
/**
|
||
* E3 golem15-seo-serp (UI-SPEC C6): the live search-result preview widget
|
||
* of the SEO tab and the URL rule form, talking to the seo_snippet widget
|
||
* action through summer-action only.
|
||
*/
|
||
export class SeoSerpElement extends HTMLElement {
|
||
static observedAttributes = ['fill-values', 'busy', 'state', 'record-id', 'ui-locale', 'locale', 'disabled']
|
||
|
||
private context: ContextData | null = null
|
||
private contextFailed = false
|
||
private device: 'desktop' | 'mobile' = 'desktop'
|
||
private shownLocale = ''
|
||
private inflight: Payload | null = null
|
||
private queued: Payload | null = null
|
||
private duplicates = new Map<string, DuplicatesData>()
|
||
private checking = false
|
||
private timer: ReturnType<typeof setTimeout> | undefined
|
||
private lastChecked = ''
|
||
private connected = false
|
||
|
||
private readonly onResult = (ev: Event): void => {
|
||
const detail = (ev as CustomEvent).detail as { data?: unknown } | undefined
|
||
const data = detail?.data as ContextData | DuplicatesData | undefined
|
||
this.inflight = null
|
||
if (data && data.op === 'context') {
|
||
this.context = data
|
||
this.contextFailed = false
|
||
this.render()
|
||
this.scheduleDuplicates(true)
|
||
} else if (data && data.op === 'duplicates') {
|
||
this.duplicates.set(data.locale, data)
|
||
this.checking = false
|
||
this.render()
|
||
}
|
||
this.flush()
|
||
}
|
||
|
||
private readonly onLocale = (ev: Event): void => {
|
||
const locale = (ev as CustomEvent).detail
|
||
if (typeof locale === 'string' && locale !== '' && locale !== this.shownLocale) {
|
||
this.shownLocale = locale
|
||
this.render()
|
||
this.scheduleDuplicates(false)
|
||
}
|
||
}
|
||
|
||
connectedCallback(): void {
|
||
this.connected = true
|
||
this.addEventListener('summer-result', this.onResult)
|
||
window.addEventListener('summer:ml-locale', this.onLocale)
|
||
this.render()
|
||
this.request({ op: 'context' })
|
||
}
|
||
|
||
disconnectedCallback(): void {
|
||
this.connected = false
|
||
this.removeEventListener('summer-result', this.onResult)
|
||
window.removeEventListener('summer:ml-locale', this.onLocale)
|
||
clearTimeout(this.timer)
|
||
}
|
||
|
||
attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
|
||
if (!this.connected) {
|
||
return
|
||
}
|
||
if (name === 'busy' && value === null) {
|
||
this.flush()
|
||
return
|
||
}
|
||
if (name === 'state' && value === 'error') {
|
||
if (this.inflight?.op === 'context') {
|
||
this.contextFailed = true
|
||
}
|
||
this.checking = false
|
||
this.inflight = null
|
||
this.render()
|
||
return
|
||
}
|
||
if (name === 'fill-values') {
|
||
this.render()
|
||
this.scheduleDuplicates(false)
|
||
return
|
||
}
|
||
this.render()
|
||
}
|
||
|
||
private labels(): Labels {
|
||
return labelsFor(uiLocaleOf(this))
|
||
}
|
||
|
||
/** Sends payload, or queues it (one at most) while a request runs. */
|
||
private request(payload: Payload): void {
|
||
if (this.hasAttribute('busy') || this.inflight) {
|
||
this.queued = payload
|
||
return
|
||
}
|
||
this.inflight = payload
|
||
emit(this, 'summer-action', { payload })
|
||
}
|
||
|
||
private flush(): void {
|
||
if (this.hasAttribute('busy') || this.inflight || !this.queued) {
|
||
return
|
||
}
|
||
const next = this.queued
|
||
this.queued = null
|
||
this.request(next)
|
||
}
|
||
|
||
private fill(): Record<string, unknown> {
|
||
return jsonAttr<Record<string, unknown>>(this, 'fill-values', {})
|
||
}
|
||
|
||
private locale(): ContextLocale | null {
|
||
const locales = this.context?.locales ?? []
|
||
if (locales.length === 0) {
|
||
return null
|
||
}
|
||
return locales.find((l) => l.locale === this.shownLocale) ?? locales[0]
|
||
}
|
||
|
||
private scheduleDuplicates(now: boolean): void {
|
||
const loc = this.locale()
|
||
if (!loc) {
|
||
return
|
||
}
|
||
const fill = this.fill()
|
||
const title = valueIn(fill, 'seo_title', loc.locale) || valueIn(fill, 'title', loc.locale)
|
||
const description = valueIn(fill, 'seo_description', loc.locale) || valueIn(fill, 'description', loc.locale)
|
||
const key = JSON.stringify([loc.locale, title, description])
|
||
if (key === this.lastChecked) {
|
||
return
|
||
}
|
||
clearTimeout(this.timer)
|
||
const send = (): void => {
|
||
this.lastChecked = key
|
||
this.checking = true
|
||
this.render()
|
||
this.request({ op: 'duplicates', locale: loc.locale, title, description })
|
||
}
|
||
if (now) {
|
||
send()
|
||
} else {
|
||
this.timer = setTimeout(send, DUPLICATE_DELAY_MS)
|
||
}
|
||
}
|
||
|
||
private render(): void {
|
||
const labels = this.labels()
|
||
const ui = uiLocaleOf(this)
|
||
if (!this.context && !this.contextFailed) {
|
||
this.setAttribute('aria-busy', 'true')
|
||
this.replaceChildren(el('div', 'seo-serp__skeleton'))
|
||
return
|
||
}
|
||
this.removeAttribute('aria-busy')
|
||
const loc = this.locale()
|
||
const localeCode = loc?.locale ?? this.shownLocale
|
||
const fill = this.fill()
|
||
const seoTitle = (valueIn(fill, 'seo_title', localeCode) || valueIn(fill, 'title', localeCode)).trim()
|
||
const seoDescription = (valueIn(fill, 'seo_description', localeCode) || valueIn(fill, 'description', localeCode)).trim()
|
||
const keyphrase = valueIn(fill, 'seo_keyphrase', localeCode).trim()
|
||
const siteName = loc?.siteName ?? ''
|
||
const title = seoTitle || renderTemplate(loc?.titleTemplate ?? '', { title: loc?.defaultTitle ?? '', site: siteName }) || loc?.defaultTitle || ''
|
||
const description = seoDescription || loc?.defaultDescription || ''
|
||
|
||
const header = el('div', 'seo-serp__header')
|
||
const track = el('div', 'seo-serp__track')
|
||
track.setAttribute('role', 'radiogroup')
|
||
track.setAttribute('aria-label', labels.device)
|
||
for (const device of ['desktop', 'mobile'] as const) {
|
||
const seg = el('button', 'seo-serp__segment', labels[device])
|
||
seg.type = 'button'
|
||
seg.setAttribute('role', 'radio')
|
||
seg.setAttribute('aria-checked', this.device === device ? 'true' : 'false')
|
||
seg.addEventListener('click', () => {
|
||
this.device = device
|
||
this.render()
|
||
})
|
||
track.append(seg)
|
||
}
|
||
header.append(track)
|
||
if (localeCode) {
|
||
header.append(el('span', 'seo-serp__language', fmt(labels.language, { locale: localeCode.toUpperCase() })))
|
||
}
|
||
|
||
const card = el('div', 'serp-card' + (this.device === 'mobile' ? ' serp-card--mobile' : ''))
|
||
const top = el('div', 'serp-card__site')
|
||
top.append(el('span', 'serp-card__favicon', Array.from(siteName || this.context?.host || '?')[0]?.toUpperCase() ?? '?'))
|
||
const names = el('div', 'serp-card__names')
|
||
names.append(el('span', 'serp-card__sitename', siteName || this.context?.host || ''))
|
||
names.append(el('span', 'serp-card__crumbs', breadcrumb(this.context?.host ?? '', loc?.url ?? null)))
|
||
top.append(names)
|
||
card.append(top)
|
||
card.append(el('div', 'serp-card__title', truncate(title, TITLE_FONT, TITLE_MAX_PX)))
|
||
if (description) {
|
||
const max = this.device === 'mobile' ? DESCRIPTION_MOBILE_MAX_PX : DESCRIPTION_MAX_PX
|
||
card.append(el('div', 'serp-card__description', truncate(description, DESCRIPTION_FONT, max)))
|
||
} else {
|
||
card.append(el('div', 'serp-card__description serp-card__description--missing', labels.noDescription))
|
||
}
|
||
|
||
const notes = el('div', 'seo-serp__notes')
|
||
if (this.contextFailed) {
|
||
const fail = el('div', 'seo-serp__error')
|
||
fail.setAttribute('role', 'status')
|
||
fail.append(icon('circle-alert'), el('span', '', labels.contextFailed))
|
||
notes.append(fail)
|
||
}
|
||
if (!seoTitle && loc?.titleTemplate) {
|
||
notes.append(el('div', '', fmt(labels.fromTemplate, { template: loc.titleTemplate })))
|
||
}
|
||
if (!seoDescription && loc?.defaultDescription && loc.descriptionSource === 'content') {
|
||
notes.append(el('div', '', labels.fromContent))
|
||
}
|
||
if (loc && loc.url === null) {
|
||
notes.append(el('div', '', labels.noUrl))
|
||
}
|
||
if ((this.getAttribute('record-id') ?? '') !== '' && loc) {
|
||
notes.append(el('div', '', labels.savedNote))
|
||
}
|
||
|
||
const checks = el('div', 'seo-serp__checks')
|
||
checks.setAttribute('role', 'status')
|
||
if (this.checking) {
|
||
checks.append(el('div', 'seo-serp__checking', labels.checking))
|
||
} else {
|
||
const dup = this.duplicates.get(localeCode)
|
||
if (dup) {
|
||
for (const [items, forms] of [[dup.title, labels.dupTitle], [dup.description, labels.dupDescription]] as const) {
|
||
if (items.length > 0) {
|
||
checks.append(duplicateLine(items, forms, labels, ui))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const parts: HTMLElement[] = [header, card, notes, checks]
|
||
if (keyphrase && loc) {
|
||
parts.push(keyphraseChecks(keyphrase, { title, description, h1: loc.h1, url: loc.url, bodyWords: loc.bodyWords }, labels, ui))
|
||
}
|
||
this.replaceChildren(...parts)
|
||
}
|
||
}
|
||
|
||
/** host › segment › segment of a path. */
|
||
function breadcrumb(host: string, url: string | null): string {
|
||
const segments = (url ?? '').split('?')[0].split('/').filter(Boolean).map((s) => {
|
||
try {
|
||
return decodeURIComponent(s)
|
||
} catch {
|
||
return s
|
||
}
|
||
})
|
||
return [host, ...segments].filter(Boolean).join(' › ')
|
||
}
|
||
|
||
function duplicateLine(items: DuplicateItem[], forms: Labels['dupTitle'], labels: Labels, ui: string): HTMLElement {
|
||
const line = el('div', 'seo-serp__check seo-serp__check--warn')
|
||
line.append(icon('triangle-alert'))
|
||
const text = el('span')
|
||
const marker = '\u0000list\u0000'
|
||
const sentence = plural(forms, items.length, ui, { list: marker })
|
||
const [before, after] = sentence.split(marker)
|
||
text.append(document.createTextNode(before ?? ''))
|
||
items.slice(0, MAX_LINKS).forEach((item, i) => {
|
||
if (i > 0) {
|
||
text.append(document.createTextNode(', '))
|
||
}
|
||
if (item.url.startsWith('/') && !item.url.startsWith('//')) {
|
||
const a = el('a', 'seo-serp__link', item.label)
|
||
a.href = item.url
|
||
a.target = '_blank'
|
||
a.rel = 'noopener'
|
||
text.append(a)
|
||
} else {
|
||
text.append(document.createTextNode(item.label))
|
||
}
|
||
})
|
||
if (items.length > MAX_LINKS) {
|
||
text.append(document.createTextNode(' ' + fmt(labels.andMore, { count: items.length - MAX_LINKS })))
|
||
}
|
||
text.append(document.createTextNode(after ?? ''))
|
||
line.append(text)
|
||
return line
|
||
}
|
||
|
||
function keyphraseChecks(phrase: string, page: { title: string; description: string; h1: string | null; url: string | null; bodyWords: number | null }, labels: Labels, ui: string): HTMLElement {
|
||
const box = el('div', 'seo-serp__keyphrase')
|
||
box.append(el('div', 'seo-serp__keyphrase-title', fmt(labels.keyphrase, { phrase })))
|
||
const line = (ok: boolean, yes: string, no: string): void => {
|
||
const row = el('div', 'seo-serp__check ' + (ok ? 'seo-serp__check--ok' : 'seo-serp__check--warn'))
|
||
row.append(icon(ok ? 'circle-check' : 'triangle-alert'), el('span', '', ok ? yes : no))
|
||
box.append(row)
|
||
}
|
||
line(phraseIn(phrase, page.title), labels.kpTitle, labels.kpTitleNo)
|
||
if (page.h1 !== null) {
|
||
line(phraseIn(phrase, page.h1), labels.kpH1, labels.kpH1No)
|
||
}
|
||
line(phraseIn(phrase, page.description), labels.kpDesc, labels.kpDescNo)
|
||
if (page.url !== null) {
|
||
line(phraseIn(phrase, page.url.replace(/[-_/]+/g, ' ')), labels.kpUrl, labels.kpUrlNo)
|
||
}
|
||
if (page.bodyWords !== null) {
|
||
const count = new Intl.NumberFormat(ui).format(page.bodyWords)
|
||
line(page.bodyWords >= LENGTH_WORDS, fmt(labels.kpLength, { count }), fmt(labels.kpLengthNo, { count }))
|
||
}
|
||
return box
|
||
}
|