@datagouv/components-next 1.0.2-dev.20 → 1.0.2-dev.200

package/src/functions/helpers.ts

@@ -38,6 +38,21 @@ export const summarize = (val: number, fractionDigits = 0) => {
   return `${toFixedIfNotZero(val)}Y`
 }
 
+// Guards any value that ends up in an `href`: only absolute http(s) URLs are allowed.
+// Some of these URLs come from resource extras, which are freely writable by the
+// resource owner, so an unguarded value could carry a `javascript:` or `data:` scheme
+// and execute in the platform origin when a visitor clicks the link.
+export const isSafeHttpUrl = (value: unknown): value is string => {
+  if (typeof value !== 'string') return false
+  try {
+    const { protocol } = new URL(value)
+    return protocol === 'http:' || protocol === 'https:'
+  }
+  catch {
+    return false
+  }
+}
+
 export const escapeCsvValue = (value: string | number | null | undefined): string => {
   if (value === null || value === undefined || value === '') {
     return ''

package/src/functions/metrics.ts

@@ -1,5 +1,5 @@
 import { escapeCsvValue } from './helpers'
-import { ofetch } from 'ofetch'
+import { ofetch, type $Fetch } from 'ofetch'
 import type { DatasetV2 } from '../types/datasets'
 import type { PaginatedArray } from '../types/api'
 
@@ -31,49 +31,73 @@ export type ReuseMetrics = {
   visitsTotal: number
 }
 
+type MonthlyVisitsRow = { metric_month: string, monthly_visit: number }
+type MonthlyDatasetRow = MonthlyVisitsRow & { monthly_download_resource: number }
+type MonthlyOrganizationRow = {
+  metric_month: string
+  monthly_download_resource: number
+  monthly_visit_dataservice: number
+  monthly_visit_dataset: number
+  monthly_visit_reuse: number
+}
+
+type TotalVisitsRow = { visit: number }
+type TotalDatasetRow = TotalVisitsRow & { download_resource: number }
+type TotalOrganizationRow = {
+  download_resource: number
+  visit_dataservice: number
+  visit_dataset: number
+  visit_reuse: number
+}
+
+/**
+ * The metrics API is a separate service that answers over the network, so a call fails in
+ * three ways: the request itself, an error status, or a body that isn't the expected page
+ * of rows. Rejecting on the last two turns them into the same failure as the first, which
+ * callers already hand to `useAsyncData` — reading `page.data` straight would instead throw
+ * a `TypeError` a few lines later, naming a symptom rather than the service.
+ */
+async function fetchMetrics<Row>(url: string): Promise<Array<Row>> {
+  const response = await fetch(url)
+  if (!response.ok) throw new Error(`The metrics API answered ${response.status} for ${url}`)
+
+  const page: { data?: Array<Row> } = await response.json()
+  if (!Array.isArray(page?.data)) throw new Error(`The metrics API answered an unexpected body for ${url}`)
+
+  return page.data
+}
+
 /**
  * There is only one metrics API endpoint to get these 3 values.
  * The rest of the metrics aren't stored yet at the organization level
  */
 export async function getOrganizationMetrics(oid: string, metricsApi: string): Promise<OrganizationMetrics> {
   // Fetching last 12 months
-  const response = await fetch(`${metricsApi}/api/organizations/data/?organization_id__exact=${oid}&metric_month__sort=desc&page_size=12`)
-  const page = await response.json()
+  const rows = await fetchMetrics<MonthlyOrganizationRow>(`${metricsApi}/api/organizations/data/?organization_id__exact=${oid}&metric_month__sort=desc&page_size=12`)
 
   const dataservicesViews: Record<string, number> = {}
   const datasetsViews: Record<string, number> = {}
   const downloads: Record<string, number> = {}
   const reusesViews: Record<string, number> = {}
 
-  for (const { metric_month, monthly_download_resource, monthly_visit_dataservice, monthly_visit_dataset, monthly_visit_reuse } of page.data) {
+  for (const { metric_month, monthly_download_resource, monthly_visit_dataservice, monthly_visit_dataset, monthly_visit_reuse } of rows) {
     dataservicesViews[metric_month] = monthly_visit_dataservice
     datasetsViews[metric_month] = monthly_visit_dataset
     downloads[metric_month] = monthly_download_resource
     reusesViews[metric_month] = monthly_visit_reuse
   }
   // Fetching totals
-  const totalResponse = await fetch(`${metricsApi}/api/organizations_total/data/?organization_id__exact=${oid}`)
-  const totalPage = await totalResponse.json()
-
-  let dataservicesViewsTotal = 0
-  let datasetsViewsTotal = 0
-  let downloadsTotal = 0
-  let reusesViewsTotal = 0
-  if (page.data[0]) {
-    dataservicesViewsTotal = totalPage.data[0].visit_dataservice
-    datasetsViewsTotal = totalPage.data[0].visit_dataset
-    downloadsTotal = totalPage.data[0].download_resource
-    reusesViewsTotal = totalPage.data[0].visit_reuse
-  }
+  const total = (await fetchMetrics<TotalOrganizationRow>(`${metricsApi}/api/organizations_total/data/?organization_id__exact=${oid}`))[0]
+
   return {
     downloads,
-    downloadsTotal,
+    downloadsTotal: total?.download_resource ?? 0,
     reusesViews,
-    reusesViewsTotal,
+    reusesViewsTotal: total?.visit_reuse ?? 0,
     dataservicesViews,
-    dataservicesViewsTotal,
+    dataservicesViewsTotal: total?.visit_dataservice ?? 0,
     datasetsViews,
-    datasetsViewsTotal,
+    datasetsViewsTotal: total?.visit_dataset ?? 0,
   }
 }
 
@@ -89,44 +113,37 @@ export function createOrganizationMetricsUrl(datasetsViews: Record<string, numbe
 
 export async function getDatasetMetrics(datasetId: string, metricsApi: string): Promise<DatasetMetrics> {
   // Fetching last 12 months
-  const response = await fetch(`${metricsApi}/api/datasets/data/?dataset_id__exact=${datasetId}&metric_month__sort=desc&page_size=12`)
-  const page = await response.json()
+  const rows = await fetchMetrics<MonthlyDatasetRow>(`${metricsApi}/api/datasets/data/?dataset_id__exact=${datasetId}&metric_month__sort=desc&page_size=12`)
 
   const visits: Record<string, number> = {}
   const downloads: Record<string, number> = {}
 
-  for (const { metric_month, monthly_visit, monthly_download_resource } of page.data) {
+  for (const { metric_month, monthly_visit, monthly_download_resource } of rows) {
     visits[metric_month] = monthly_visit
     downloads[metric_month] = monthly_download_resource
   }
 
   // Fetching totals
-  const totalResponse = await fetch(`${metricsApi}/api/datasets_total/data/?dataset_id__exact=${datasetId}`)
-  const totalPage = await totalResponse.json()
-
-  let visitsTotal = 0
-  let downloadsTotal = 0
-  if (totalPage.data[0]) {
-    visitsTotal = totalPage.data[0].visit
-    downloadsTotal = totalPage.data[0].download_resource
-  }
+  const total = (await fetchMetrics<TotalDatasetRow>(`${metricsApi}/api/datasets_total/data/?dataset_id__exact=${datasetId}`))[0]
 
   return {
     visits,
-    visitsTotal,
+    visitsTotal: total?.visit ?? 0,
     downloads,
-    downloadsTotal,
+    downloadsTotal: total?.download_resource ?? 0,
   }
 }
 
-export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string, apiFetch: $Fetch) {
   let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
 
-  // fetch datasets info from organization datasets
+  // fetch datasets info from organization datasets through the configured fetch, so it carries the
+  // consumer's auth (cookie for cdata via `$api`, Bearer for verticals) instead of a hardcoded
+  // `credentials: 'include'`, which breaks CORS cross-origin on the verticals.
   const datasets: Record<string, Record<string, string>> = {}
   let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
   while (datasetsUrl) {
-    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    const body: PaginatedArray<DatasetV2> = await apiFetch(datasetsUrl, { baseURL: apiBase })
     datasetsUrl = body.next_page
     for (const row of body.data) {
       datasets[row.id] = { title: row.title }
@@ -149,52 +166,38 @@ export async function createDatasetsForOrganizationMetricsUrl(organizationId: st
 
 export async function getDataserviceMetrics(dataserviceId: string, metricsApi: string): Promise<DataserviceMetrics> {
   // Fetching last 12 months
-  const response = await fetch(`${metricsApi}/api/dataservices/data/?dataservice_id__exact=${dataserviceId}&metric_month__sort=desc&page_size=12`)
-  const page = await response.json()
+  const rows = await fetchMetrics<MonthlyVisitsRow>(`${metricsApi}/api/dataservices/data/?dataservice_id__exact=${dataserviceId}&metric_month__sort=desc&page_size=12`)
 
   const visits: Record<string, number> = {}
 
-  for (const { metric_month, monthly_visit } of page.data) {
+  for (const { metric_month, monthly_visit } of rows) {
     visits[metric_month] = monthly_visit
   }
 
   // Fetching totals
-  const totalResponse = await fetch(`${metricsApi}/api/dataservices_total/data/?dataservice_id__exact=${dataserviceId}`)
-  const totalPage = await totalResponse.json()
-
-  let visitsTotal = 0
-  if (totalPage.data[0]) {
-    visitsTotal = totalPage.data[0].visit
-  }
+  const total = (await fetchMetrics<TotalVisitsRow>(`${metricsApi}/api/dataservices_total/data/?dataservice_id__exact=${dataserviceId}`))[0]
 
   return {
     visits,
-    visitsTotal,
+    visitsTotal: total?.visit ?? 0,
   }
 }
 
 export async function getReuseMetrics(reuseId: string, metricsApi: string): Promise<ReuseMetrics> {
   // Fetching last 12 months
-  const response = await fetch(`${metricsApi}/api/reuses/data/?reuse_id__exact=${reuseId}&metric_month__sort=desc&page_size=12`)
-  const page = await response.json()
+  const rows = await fetchMetrics<MonthlyVisitsRow>(`${metricsApi}/api/reuses/data/?reuse_id__exact=${reuseId}&metric_month__sort=desc&page_size=12`)
 
   const visits: Record<string, number> = {}
 
-  for (const { metric_month, monthly_visit } of page.data) {
+  for (const { metric_month, monthly_visit } of rows) {
     visits[metric_month] = monthly_visit
   }
 
   // Fetching totals
-  const totalResponse = await fetch(`${metricsApi}/api/reuses_total/data/?reuse_id__exact=${reuseId}`)
-  const totalPage = await totalResponse.json()
-
-  let visitsTotal = 0
-  if (totalPage.data[0]) {
-    visitsTotal = totalPage.data[0].visit
-  }
+  const total = (await fetchMetrics<TotalVisitsRow>(`${metricsApi}/api/reuses_total/data/?reuse_id__exact=${reuseId}`))[0]
 
   return {
     visits,
-    visitsTotal,
+    visitsTotal: total?.visit ?? 0,
   }
 }

package/src/functions/paginate.ts

@@ -0,0 +1,46 @@
+export const PAGES_AROUND = 3
+
+function range(size: number, startAt: number) {
+  return [...Array(size).keys()].map(i => i + startAt)
+}
+
+/**
+ * Brings whatever the caller holds as a current page back to a page that exists.
+ * The page number usually comes from a query string, so it can be anything:
+ * `?page=abc` (NaN), `?page=-5`, `?page=1.5`, or a stale link to a page far past
+ * the last one.
+ */
+export function clampPage(page: number, pageCount: number) {
+  if (!Number.isFinite(page)) {
+    return 1
+  }
+  return Math.min(Math.max(Math.trunc(page), 1), Math.max(pageCount, 1))
+}
+
+/**
+ * The middle window of the pagination: the pages around the current one, with
+ * `null` marking an ellipsis. The first and last pages are rendered by the
+ * component itself and are never part of this window.
+ */
+export function getVisiblePages(currentPage: number, pageCount: number) {
+  if (pageCount <= 2) {
+    return []
+  }
+
+  const page = clampPage(currentPage, pageCount)
+  const size = Math.min(
+    PAGES_AROUND * 2 + 1,
+    pageCount - 2, // the first and last pages are rendered outside of the window
+    PAGES_AROUND + page - 1, // don't reach below page 2
+    PAGES_AROUND + pageCount - page, // don't reach past the last page
+  )
+  const pagination: Array<number | null> = range(size, Math.max(page - PAGES_AROUND, 2))
+
+  if (!pagination.includes(2)) {
+    pagination.unshift(null)
+  }
+  if (!pagination.includes(pageCount - 1)) {
+    pagination.push(null)
+  }
+  return pagination
+}

package/src/functions/resourceCapabilities.ts

@@ -1,4 +1,35 @@
 import type { Resource, WfsMetadata, OgcLayerInfo } from '../types/resources'
+import { isSafeHttpUrl } from './helpers'
+
+const GENERATED_FORMATS = ['parquet', 'pmtiles', 'geojson']
+
+export type GeneratedFormat = {
+  url: string
+  size: number | undefined
+  format: string
+}
+
+export function getGeneratedFormats(resource: Pick<Resource, 'extras' | 'id'>, tabularApiUrl: string | undefined): GeneratedFormat[] {
+  const formats: GeneratedFormat[] = GENERATED_FORMATS.flatMap((format) => {
+    const url = resource.extras[`analysis:parsing:${format}_url`]
+    // The URL is read verbatim from owner-writable extras: drop any entry that is not
+    // a plain http(s) URL so a `javascript:`/`data:` value never reaches an href.
+    if (!isSafeHttpUrl(url)) return []
+    return [{
+      url,
+      size: resource.extras[`analysis:parsing:${format}_size`] as number | undefined,
+      format,
+    }]
+  })
+  if ('analysis:parsing:parsing_table' in resource.extras) {
+    formats.push({
+      url: `${tabularApiUrl}/api/resources/${resource.id}/data/json/`,
+      size: undefined,
+      format: 'json',
+    })
+  }
+  return formats
+}
 
 const WFS_EXPORT_FORMATS = [
   {
@@ -46,6 +77,9 @@ export function getWfsExportFormats(resource: Pick<Resource, 'extras' | 'url'>)
   const outputFormats = wfsMetadata.output_formats.map((format: string) => format.toLowerCase())
   const layer = wfsMetadata.detected_layer
   if (!layer) return []
+  // Every download URL below is built on top of `resource.url`, so its scheme is the one
+  // of `resource.url`: guard it once here rather than on each of the built URLs.
+  if (!isSafeHttpUrl(resource.url)) return []
   const formats = WFS_EXPORT_FORMATS.filter(format => outputFormats.includes(format.mimetype.toLowerCase()))
     .map(format => ({
       url: buildWfsDownloadUrl(resource.url, wfsMetadata, format, layer),

package/src/functions/resources.ts

@@ -1,13 +1,15 @@
 import { readonly, type Component } from 'vue'
 
 import { RiEarthLine, RiMap2Line } from '@remixicon/vue'
+import { useComponentsConfig } from '../config'
 import Archive from '../components/Icons/Archive.vue'
 import Code from '../components/Icons/Code.vue'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import Documentation from '../components/Icons/Documentation.vue'
 import Image from '../components/Icons/Image.vue'
 import Link from '../components/Icons/Link.vue'
 import Table from '../components/Icons/Table.vue'
-import type { Resource } from '../types/resources'
+import type { CommunityResource, Resource } from '../types/resources'
 import { useTranslation } from '../composables/useTranslation'
 
 export function getResourceFormatIcon(format: string): Component | null {
@@ -82,6 +84,25 @@ export function getResourceFormatIcon(format: string): Component | null {
   }
 }
 
+// Badge colors for the resource icon, keyed on the same format categorization as
+// getResourceFormatIcon so tabular/geo/code/documentation stay consistent with the icon.
+export function getResourceIconColor(format?: string | null): string {
+  const icon = format ? getResourceFormatIcon(format) : null
+  switch (icon) {
+    case Table:
+      return 'bg-[#c3fad5] text-[#18753c]'
+    case RiMap2Line:
+    case RiEarthLine:
+      return 'bg-[#e6eefe] text-[#0063cb]'
+    case Code:
+      return 'bg-[#fce164] text-[#716043]'
+    case Documentation:
+      return 'bg-[#fee7fc] text-[#6e445a]'
+    default:
+      return 'bg-gray-100 text-gray-plain'
+  }
+}
+
 export function getResourceTitleId(resource: Resource) {
   return 'resource-' + resource.id + '-title'
 }
@@ -89,6 +110,11 @@ export function getResourceTitleId(resource: Resource) {
 export const RESOURCE_TYPE = readonly(['main', 'documentation', 'update', 'api', 'code', 'other'] as const)
 export type ResourceType = typeof RESOURCE_TYPE[number]
 
+// Page size used by ResourceExplorer for its per-type resource fetches.
+// Exported so consumers (e.g. the dataset page's `main` prefetch) can build a
+// byte-for-byte identical cache key and let Nuxt dedupe the request.
+export const RESOURCE_EXPLORER_PAGE_SIZE = 10
+
 export const getResourceLabel = (type: ResourceType, count?: number) => {
   const { t } = useTranslation()
   switch (type) {
@@ -98,14 +124,29 @@ export const getResourceLabel = (type: ResourceType, count?: number) => {
       }
       return t('Fichiers principaux')
     case 'documentation':
+      if (typeof count === 'number') {
+        return t('Aucun fichier de documentation | 1 fichier de documentation | {n} fichiers de documentation', count)
+      }
       return t('Documentation')
     case 'update':
+      if (typeof count === 'number') {
+        return t('Aucune mise à jour | 1 mise à jour | {n} mises à jour', count)
+      }
       return t('Mise à jour')
     case 'api':
+      if (typeof count === 'number') {
+        return t('Aucune API | 1 API | {n} API', count)
+      }
       return t('API')
     case 'code':
+      if (typeof count === 'number') {
+        return t('Aucun fichier de code source | 1 fichier de code source | {n} fichiers de code source', count)
+      }
       return t('Code source')
     case 'other':
+      if (typeof count === 'number') {
+        return t('Aucun autre fichier | 1 autre fichier | {n} autres fichiers', count)
+      }
       return t('Autre')
   }
 }
@@ -129,3 +170,97 @@ export const detectOgcService = (resource: Resource) => {
   }
   return false
 }
+
+export function isCommunityResource(resource: Resource | CommunityResource): boolean {
+  return 'organization' in resource || 'owner' in resource
+}
+
+export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
+  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
+}
+
+export function getResourceFilesize(resource: Resource): null | number {
+  if (resource.filesize) return resource.filesize
+  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
+
+  return null
+}
+
+const IMAGE_PREVIEW_FORMATS = ['png', 'jpg', 'jpeg', 'jpe', 'gif', 'webp'] as const
+
+export function isImagePreviewFormat(format: string | undefined | null): boolean {
+  if (!format) return false
+  return IMAGE_PREVIEW_FORMATS.includes(format.toLowerCase() as typeof IMAGE_PREVIEW_FORMATS[number])
+}
+
+// Parsing errors are stored as `<step>:<message>`, where `<step>` names the
+// analysis step that failed (e.g. `pmtiles_export`, `geojson_export`).
+
+/** The analysis step that failed, or null when there is no parsing error. */
+export function getParsingErrorStep(resource: Resource): string | null {
+  const error = resource.extras['analysis:parsing:error']
+  if (typeof error !== 'string' || !error) return null
+  const [step] = error.split(':', 1)
+  return step ?? null
+}
+
+/** The parsing error message without its `<step>:` prefix, or null when there is none. */
+export function getParsingErrorMessage(resource: Resource): string | null {
+  const error = resource.extras['analysis:parsing:error']
+  if (typeof error !== 'string' || !error) return null
+  const colon = error.indexOf(':')
+  return colon === -1 ? error : error.slice(colon + 1)
+}
+
+// Geo/format export steps run *after* the tabular table has been built, so a
+// failure here (e.g. a huge geometry timing out the pmtiles export) leaves the
+// tabular data fully usable and must not disable the tabular explorer.
+const NON_TABULAR_PARSING_ERROR_STEPS = ['pmtiles_export', 'geojson_export']
+
+/**
+ * Whether the resource's parsing error prevents reading its tabular data.
+ * Only errors from the tabular parsing itself are fatal; downstream geo/format
+ * export failures are not.
+ */
+export function hasTabularParsingError(resource: Resource): boolean {
+  const step = getParsingErrorStep(resource)
+  return step !== null && !NON_TABULAR_PARSING_ERROR_STEPS.includes(step)
+}
+
+type CorsStatus = 'allowed' | 'blocked' | 'unknown'
+
+export const getResourceCorsStatus = (resource: Resource): CorsStatus => {
+  const extras = resource.extras
+  if (!extras || !('check:cors:allow-origin' in extras)) {
+    return 'unknown'
+  }
+
+  const allowOrigin = extras['check:cors:allow-origin'] as string | undefined
+  const rawMethods = extras['check:cors:allow-methods'] as string | undefined
+
+  // Check if allow-origin is '*' or contains one of our trusted domains
+  const config = useComponentsConfig()
+  const trustedDomains = config.trustedDomains ?? []
+  const hasPublicCors = allowOrigin === '*'
+  const hasSpecificCors = allowOrigin
+    ? trustedDomains.some((domain) => {
+        try {
+          const hostname = new URL(allowOrigin).hostname
+          return hostname === domain || hostname.endsWith(`.${domain}`)
+        }
+        catch {
+          return false
+        }
+      })
+    : false
+
+  const isOriginAllowed = hasPublicCors || hasSpecificCors
+
+  // Ensure GET method is allowed
+  const allowedMethods = rawMethods
+    ? rawMethods.split(',').map(m => m.trim().toUpperCase())
+    : []
+  const supportsGet = allowedMethods.length === 0 || allowedMethods.includes('GET')
+
+  return isOriginAllowed && supportsGet ? 'allowed' : 'blocked'
+}

package/src/functions/schemas.ts

@@ -31,6 +31,33 @@ export function getSchemaVersion(schema: RegisteredSchema | null) {
   }
 }
 
+// Accents and separators must not stand between a query and a schema: people type
+// "lave linge" for « Lave-linge », or « reparabilite » without its accents
+function normalizeForSearch(value: string): string {
+  return value
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .replace(/[^a-z0-9]+/g, ' ')
+    .trim()
+}
+
+// The name is searched along with the title and the description: it is the identifier
+// people know and paste, such as `etalab/indice-durabilite-lave-linge`
+const searchableText = (schema: RegisteredSchema) => normalizeForSearch(`${schema.name} ${schema.title ?? ''} ${schema.description ?? ''}`)
+
+const queryTokens = (query: string) => normalizeForSearch(query).split(' ').filter(Boolean)
+
+export function schemaMatchesQuery(schema: RegisteredSchema, query: string): boolean {
+  // A query made only of punctuation holds no word to match. Callers short-circuit the
+  // empty query, so matching everything here would only ever answer that case.
+  const tokens = queryTokens(query)
+  if (!tokens.length) return false
+
+  const haystack = searchableText(schema)
+  return tokens.every(token => haystack.includes(token))
+}
+
 export function findSchemaInCatalog(catalog: Array<RegisteredSchema>, schema: Schema | null): RegisteredSchema | null {
   if (!schema) return null
   return catalog.find(registeredSchema => schema.name === registeredSchema.name) || null

package/src/functions/scroll.ts

@@ -0,0 +1,20 @@
+// Leaves room for the sticky elements sitting at the top of the viewport.
+const SCROLL_MARGIN = 100
+
+/**
+ * Bring the top of a block back into view after its content changed (paging,
+ * searching, filtering), so the reader restarts at the first result.
+ *
+ * Does nothing when the top of the block is already on screen: aligning the
+ * viewport on a block the reader is already looking at moves the page under
+ * them for no reason.
+ */
+export function scrollToBlockTop(block: HTMLElement | null | undefined) {
+  if (!block) return
+
+  const { top } = block.getBoundingClientRect()
+  if (top >= 0 && top <= window.innerHeight) return
+
+  block.style.scrollMarginTop = `${SCROLL_MARGIN}px`
+  block.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}