@playpilot/tpi 1.0.0

package/src/lib/global.css

@@ -0,0 +1,37 @@
+[data-playpilot-injection-key] {
+  position: relative;
+}
+
+[data-playpilot-injection-key].injection-highlight {
+  outline: 0.25rem solid var(--playpilot-primary) !important;
+  outline-offset: 0.5rem !important;
+  border-radius: 0.05rem;
+  scroll-margin: 5rem;
+}
+
+.playpilot-styled-scrollbar {
+  scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
+  scrollbar-width: thin;
+}
+
+.playpilot-styled-scrollbed::-webkit-scrollbar {
+  width: 0.75rem;
+}
+
+.playpilot-styled-scrollbed::-webkit-scrollbar-track {
+  background: var(--playpilot-light);
+}
+
+.playpilot-styled-scrollbed::-webkit-scrollbar-thumb {
+  border: 2px solid var(--playpilot-light);
+  border-radius: 1rem;
+  background: var(--playpilot-lighter)
+}
+
+.playpilot-styled-scrollbed::-webkit-scrollbar-thumb:hover {
+  background: var(--playpilot-content-light);
+}
+
+.playpilot-styled-scrollbed::-webkit-scrollbar-thumb:active {
+  background: var(--playpilot-text-color-alt);
+}

package/src/lib/hash.js

@@ -0,0 +1,15 @@
+/**
+ * Turns any string into a very short hash. This is super basic and not super reliable, but it's good enough for our purpose.
+ * @param {string} string
+ * @returns {string}
+ */
+export function stringToHash(string) {
+  let hash = 0
+
+  for (let i = 0; i < string.length; i++) {
+    const char = string.charCodeAt(i)
+    hash = (hash * 31 + char) >>> 0
+  }
+
+  return hash.toString(16)
+}

package/src/lib/html.js

@@ -0,0 +1,21 @@
+/**
+ * Returns a string with decoded html characters. For instance & -> &
+ * @param {string} string
+ */
+export function encodeHtmlEntities(string) {
+  const tempElement = document.createElement('div')
+  tempElement.textContent = string
+
+  return tempElement.innerHTML
+}
+
+/**
+ * Returns a string with encoded html characters. For instance & -> &
+ * @param {string} string
+ */
+export function decodeHtmlEntities(string) {
+  const tempElement = document.createElement('div')
+  tempElement.innerHTML = string
+
+  return tempElement.textContent || ''
+}

package/src/lib/index.js

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/linkInjection.js

@@ -0,0 +1,275 @@
+import { mount, unmount } from 'svelte'
+import TitlePopover from '../routes/components/TitlePopover.svelte'
+import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
+import { findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
+import { getLargestValueInArray } from './array'
+
+/** @type {Record<string, { injection: LinkInjection, component: object }>} */
+const activePopovers = {}
+/** @type {object | null} */
+let afterArticlePlaylinkInsertedComponent = null
+
+/**
+ * Return a list of all valid text containing elements that may get injected into.
+ * This excludes duplicates, empty elements, links, buttons, and header tags.
+ * @param {HTMLElement} parentElement
+ * @returns {HTMLElement[]} A list of all HTMLElements that contain text, without repeating the same text in
+ */
+export function getLinkInjectionElements(parentElement) {
+  let validElements = []
+
+  let remainingChildren = [...parentElement.children]
+
+  while (remainingChildren.length > 0) {
+    const element = /** @type {HTMLElement} */ (remainingChildren.shift())
+
+    // Ignore links, buttons, and headers
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|H[1-6])$/.test(element.tagName)) continue
+
+    // Check if this element has a direct text node
+    const hasTextNode = Array.from(element.childNodes).some(
+      node => node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim() !== '',
+    )
+
+    // If this element has a text node we add it to the valid elements and stop there
+    // Otherwise we add all children to be checked in this same loop.
+    if (hasTextNode) validElements.push(element)
+    else remainingChildren.push(...element.children)
+  }
+
+  return validElements
+}
+
+/**
+   * Get the parent selector that will be used to find the link injections in.
+   * This selector is passed when the script is initialized.
+   * If no selector is passed a default is returned instead.
+   * @returns {HTMLElement}
+   */
+export function getLinkInjectionsParentElement() {
+  // @ts-ignore
+  const selector = window.PlayPilotLinkInjections?.selector
+
+  if (selector) {
+    // Replace : with \\: because js selectors need some characters escaped. We only care about : at the moment.
+    const escaped = selector.replace(/(:)/g, '\\$1')
+    const element = document.querySelector(escaped)
+
+    if (element) return element
+  }
+
+  return document.querySelector('article') || document.querySelector('main') || document.body
+}
+
+/**
+ * Replace all found injections within all given elements on the page
+ * @param {HTMLElement[]} elements
+ * @param {LinkInjection[]} injections
+ * @param {(LinkInjection: LinkInjection) => void} onclick
+ * @returns {LinkInjection[]} Returns an array of injections with injections that failed to be inserted marked as `failed`.
+ */
+export function injectLinksInDocument(elements, injections, onclick) {
+  // Find injection in text content of all elements together, ignore potential HTML elements.
+  // This is to filter out injections that can't be injected anyway.
+  const fullText = elements.map(element => element.innerText).join(' ')
+
+  // Filter out injections meant to be displayed only after the article, rather than in-text.
+  // Also filter out injections that are marked as inactive
+  const validInjections = injections.filter(i => i.in_text !== false && !i.inactive)
+  const foundInjections = validInjections.filter(i => fullText.includes(i.sentence))
+
+  /** @type {LinkInjectionRanges} */
+  const ranges = {}
+
+  for (const injection of foundInjections) {
+    const elementIndex = elements.findIndex(element => element.innerText.includes(injection.sentence))
+    const element = elements[elementIndex]
+
+    if (!element) continue
+
+    const nodeContainingText = findTextNodeContaining(injection.title, element, ['A'])
+    // Ignore if the found injection has no node or if it is inside a link.
+    if (!nodeContainingText || isNodeInLink(nodeContainingText)) continue
+
+    const linkElement = document.createElement('a')
+    linkElement.innerText = injection.title
+    linkElement.href = injection.playpilot_url
+    linkElement.dataset.playpilotInjectionKey = injection.key
+    linkElement.dataset.playpilotOriginalTitle = injection.title_details?.original_title
+    linkElement.target = '_blank'
+    linkElement.rel = 'noopener nofollow noreferrer'
+
+    // Replace starting from the end of the previously injected link, making sure injections with the same or overlapping
+    // phrases can still be injected.
+    const startingIndex = getLargestValueInArray(Object.values(ranges).filter(r => r.elementIndex === elementIndex).map(r => r.to))
+    element.innerHTML = replaceStartingFrom(element.innerHTML, injection.title, linkElement.outerHTML, startingIndex)
+
+    const from = element.innerHTML.indexOf(linkElement.outerHTML)
+
+    ranges[injection.key] = {
+      elementIndex,
+      from,
+      to: from + linkElement.outerHTML.length,
+    }
+  }
+
+  addLinkInjectionEventListeners(validInjections, onclick)
+
+  const afterArticleInjections = injections.filter(i => i.after_article && !i.inactive)
+  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
+
+  const sortedInjections = sortLinkInjectionsByRange(injections, ranges)
+
+  return sortedInjections.map(injection => {
+    const failed = !injection.inactive && !injection.after_article && !document.querySelector(`[data-playpilot-injection-key="${injection.key}"]`)
+
+    return {
+      ...injection,
+      inactive: !!injection.inactive,
+      failed,
+    }
+  })
+}
+
+/**
+ * Add event listeners to all injected links. These events are for both the popover and the modal.
+ * @param {LinkInjection[]} injections
+ * @param {function} onclick
+ * @returns {void}
+ */
+function addLinkInjectionEventListeners(injections, onclick) {
+  const createdLinkElements = document.querySelectorAll('[data-playpilot-injection-key]')
+
+  createdLinkElements.forEach((linkElement) => {
+    // @ts-ignore
+    const key = linkElement.dataset.playpilotInjectionKey
+    const injection = injections.find(injection => key === injection.key)
+
+    if (!injection) return
+
+    // @ts-ignore
+    linkElement.addEventListener('click', (event) => openLinkModal(event, injection, onclick))
+    // @ts-ignore
+    linkElement.addEventListener('mouseenter', (event) => openLinkPopover(event, injection))
+    linkElement.addEventListener('mouseleave', () => destroyLinkPopover(injection))
+  })
+}
+
+/**
+ * Prevent default click and run onclick from parent. Ignore clicks that used modifier keys or that were not left click.
+ * The event is not fired when the click happens from inside a popover.
+ * @param {MouseEvent} event
+ * @param {LinkInjection} injection
+ * @param {function} onclick
+ * @returns {void}
+ */
+function openLinkModal(event, injection, onclick) {
+  if (event.ctrlKey || event.metaKey || event.button !== 0) return
+
+  event.preventDefault()
+
+  // Don't open modal if click happened inside of popover.
+  const target = /** @type {Element} */ (event.target)
+  if (target.closest('.popover')) return
+
+  onclick(injection)
+  destroyLinkPopover(injection)
+}
+
+/**
+ * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
+ * and removed when clicked or on mouseleave.
+ * @param {MouseEvent} event
+ * @param {LinkInjection} injection
+ */
+function openLinkPopover(event, injection) {
+  // Skip touch devices
+  if (window.matchMedia('(pointer: coarse)').matches) return
+
+  const target = /** @type {Element} */ (event.currentTarget)
+  const popover = mount(TitlePopover, { target, props: { title: injection.title_details } })
+
+  activePopovers[injection.key] = { injection, component: popover }
+}
+
+/**
+ * Unmount the popover, removing it from the dom
+ * @param {LinkInjection} injection
+ * @param {boolean} outro
+ */
+function destroyLinkPopover(injection, outro = true) {
+  const popover = activePopovers[injection.key]
+
+  if (popover) unmount(popover.component, { outro })
+}
+
+/**
+ * Insert AfterArticlePlaylinks after the last valid element.
+ * @param {HTMLElement[]} elements
+ * @param {LinkInjection[]} injections
+ * @param {(linkInjection: LinkInjection) => void} onclickmodal
+ */
+export function insertAfterArticlePlaylinks(elements, injections, onclickmodal) {
+  if (!injections.length) return
+
+  const target = document.createElement('div')
+  target.dataset.playpilotAfterArticlePlaylinks = 'true'
+  elements[elements.length - 1].insertAdjacentElement('afterend', target)
+
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal } })
+}
+
+function clearAfterArticlePlaylinks() {
+  if (!afterArticlePlaylinkInsertedComponent) return
+
+  unmount(afterArticlePlaylinkInsertedComponent)
+  document.querySelector('[data-playpilot-after-article-playlinks')?.remove()
+}
+
+/**
+ * Clear link injections from the page
+ */
+export function clearLinkInjections() {
+  Object.values(activePopovers).forEach(popover => destroyLinkPopover(popover.injection))
+
+  const elements = document.querySelectorAll('[data-playpilot-injection-key]')
+  elements.forEach((element /** @type {HTMLAnchorElement} */) => element.outerHTML = element.textContent || '')
+
+  Object.values(activePopovers).forEach(({ injection }) => destroyLinkPopover(injection, false))
+
+  clearAfterArticlePlaylinks()
+}
+
+/**
+ * Clear specific link injection from the page
+ * @param {string} key Given of the injection to be removed from the page
+ */
+export function clearLinkInjection(key) {
+  /** @type {HTMLAnchorElement | null} */
+  const element = document.querySelector(`[data-playpilot-injection-key="${key}"]`)
+  if (element) element.outerHTML = element.textContent || ''
+}
+
+/**
+ * Sort injections by where they were inserted. First by their element index, second by where in the element the
+ * injection was injected. Injections without range (after article injections or failed injection) go last.
+ * @param {LinkInjection[]} injections
+ * @param {LinkInjectionRanges} ranges
+ * @returns {LinkInjection[]}
+ */
+export function sortLinkInjectionsByRange(injections, ranges) {
+  return injections.sort((a, b) => {
+    const rangeA = ranges[a.key]
+    const rangeB = ranges[b.key]
+
+    if (!rangeA && rangeB) return 1
+    if (rangeA && !rangeB) return -1
+    if (!rangeA && !rangeB) return 0
+
+    if (rangeA?.elementIndex !== rangeB?.elementIndex) {
+      return (rangeA?.elementIndex || 0) - (rangeB?.elementIndex || 0)
+    }
+
+    return (rangeA?.from || 0) - (rangeB?.from || 0)
+  })
+}

package/src/lib/search.js

@@ -0,0 +1,24 @@
+import { getApiToken } from './api'
+import { apiBaseUrl } from './constants'
+
+/**
+ * Search for movies & shows. Requires valid API token.
+ * @param {*} query
+ * @returns {Promise<TitleData[]>}
+ */
+export async function searchTitles(query) {
+  const headers = new Headers({ 'Content-Type': 'application/json' })
+  const apiToken = getApiToken()
+
+  if (!apiToken) throw new Error('No token was provided')
+
+  const response = await fetch(apiBaseUrl + `/search/titles/?api-token=${apiToken}&query=${query}`, {
+    headers,
+  })
+
+  if (!response.ok) throw response
+
+  const parsed = await response.json()
+
+  return parsed
+}

package/src/lib/text.js

@@ -0,0 +1,61 @@
+import { decodeHtmlEntities, encodeHtmlEntities } from './html'
+
+/**
+ * Find the node that a particular string is in. For example:
+ * <p>Some sentence <strong>with words</strong> in it</p>
+ * findTextNodeContaining('words') would return the <strong> node.
+ *
+ * @param {string} text
+ * @param {HTMLElement} element The parent element from which to search for the given text
+ * @param {string[]} ignoredParentNodes Filtered out parent nodes
+ * @returns {Node | null}
+ */
+export function findTextNodeContaining(text, element, ignoredParentNodes = []) {
+  const walker = document.createTreeWalker(element)
+
+  let node
+  while ((node = walker.nextNode())) {
+    if (node.nodeValue?.includes(text) && !ignoredParentNodes.includes(node.parentNode?.nodeName || '')) break
+  }
+
+  return node
+}
+
+/**
+ * Returns whether or not the node itself is a link or is inside of a link tag.
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isNodeInLink(node) {
+  const parentNode = /** @type {HTMLElement} */ (node.parentNode)
+
+  if (!parentNode) return false
+
+  return parentNode.nodeName === 'A' || !!parentNode.closest('a')
+}
+
+/**
+ * Replace a string in a bit of text, but only if it's after the given startIndex.
+ * This replace method matches html entities against their decoded and encoded variant.
+ * For instance &amp; and & are treated as one and the same character.
+ * @param {string} text
+ * @param {string} search
+ * @param {string} replacement
+ * @param {number} startIndex
+ * @return {string}
+ */
+export function replaceStartingFrom(text, search, replacement, startIndex) {
+  const encodedSearch = encodeHtmlEntities(search)
+  const decodedSearch = decodeHtmlEntities(search)
+
+  const before = text.slice(0, startIndex)
+  const after = text.slice(startIndex)
+
+  const pattern = /[-/\\^$*+?.()|[\]{}]/g // Match html symbols such as &amp;
+  const searchRegex = new RegExp(`${decodedSearch.replace(pattern, '\\$&')}|${encodedSearch.replace(pattern, '\\$&')}`)
+
+  const updatedAfter = after.replace(searchRegex, replacement)
+
+  return before + updatedAfter
+}
+

package/src/lib/tracking.js

@@ -0,0 +1,32 @@
+const baseUrl = 'https://insights.playpilot.net'
+
+/**
+ * Track events via PlayPilot insights tracking. Inserts data about the title when a title is passed.
+ * Other data can be passed via the `payload` param.
+ * @param {string} event Name of the event
+ * @param {TitleData | null} [title] Title related to the event
+ * @param {Record<string, string>} [payload] Any data that will be included with the event
+ */
+export async function track(event, title = null, payload = {}) {
+  const headers = new Headers({ 'Content-Type': 'application/json' })
+
+  if (title) {
+    payload = {
+      original_title: title.original_title,
+      title_sid: title.sid,
+      ...payload,
+    }
+  }
+
+  payload.url = window.location.href
+
+  fetch(baseUrl, {
+    headers,
+    method: 'POST',
+    body: JSON.stringify(({
+      event,
+      payload,
+      source: 'ali',
+    })),
+  })
+}

package/src/lib/variables.css

@@ -0,0 +1,16 @@
+:root {
+  --playpilot-primary: #fa548a;
+  --playpilot-dark: #101426;
+  --playpilot-light: #1b2743;
+  --playpilot-lighter: #233257;
+  --playpilot-content: #354367;
+  --playpilot-content-light: #4b5b82;
+  --playpilot-green: #53bca0;
+  --playpilot-font-family: "Poppins", sans-serif;
+  --playpilot-text-color: #fff;
+  --playpilot-text-color-alt: #c8d4de;
+  --playpilot-shadow: 0.2rem 0.15rem 0.15rem rgba(0, 0, 0, 0.2);
+  --playpilot-shadow-large: 0.15rem 0.15rem 0.2rem rgba(0, 0, 0, 0.05), 0.2rem 0.35rem 0.35rem rgba(0, 0, 0, 0.1), 0.1rem 0.1rem 0.75rem rgba(0, 0, 0, 0.25);
+  --playpilot-error: #ea5a5a;
+  --playpilot-error-dark: #442533;
+}

package/src/main.js

@@ -0,0 +1,45 @@
+// @ts-nocheck
+
+import { mount } from 'svelte'
+import App from './routes/+page.svelte'
+import { clearLinkInjections } from '$lib/linkInjection'
+
+window.PlayPilotLinkInjections = {
+  token: '',
+  editorial_token: '',
+  selector: '',
+  app: null,
+
+  initialize(config = { token: '', selector: '', editorial_token: '' }) {
+    if (!config.token) {
+      console.error('An API token is required.')
+      return
+    }
+
+    this.token = config.token
+    this.editorial_token = config.editorial_token
+    this.selector = config.selector
+
+    if (this.app) this.destroy()
+
+    const target = document.createElement('div')
+    target.id = 'playpilot-link-injection'
+
+    document.body.insertAdjacentElement('beforeend', target)
+
+    this.app = mount(App, { target })
+  },
+
+  destroy() {
+    if (!this.app) return
+
+    this.app = null
+
+    const target = document.getElementById('playpilot-link-injection')
+    if (target) target.remove()
+
+    clearLinkInjections()
+  },
+}
+
+export default window.PlayPilotLinkInjections

package/src/routes/+layout.svelte

@@ -0,0 +1,54 @@
+<script>
+	import { browser } from '$app/environment'
+
+  /**
+   * This layout file is for development purposes only and will not be compiled with the final script.
+   */
+
+  const { children } = $props()
+
+  // This is used to remove the scoped classes in Svelte in order to prevent articles
+  // from having to be re-generated between different HMR builds.
+  // This is purely for development.
+  const noClass = (/** @type {HTMLElement} */ node) => {
+    node.classList.forEach(e => {if (e.startsWith('s-')) node.classList.remove(e)})
+  }
+
+  // This is normally given through window.PlayPilotLinkInjections.initialize({ token: 'some-token' })
+  // @ts-ignore
+  if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
+</script>
+
+{#key Math.random()}
+  <article use:noClass>
+    <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
+    <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
+  </article>
+
+  {#if browser}
+    {@render children()}
+  {/if}
+{/key}
+
+
+<style>
+  :global {
+    article {
+      min-height: 100vh;
+      padding: 2rem;
+      background: #222;
+      color: white;
+      font-family: sans-serif;
+      line-height: 1.4em;
+    }
+
+    article > :first-child {
+      margin-top: 0;
+    }
+
+    article a {
+      color: hotpink;
+    }
+  }
+</style>
+

package/src/routes/+page.svelte

@@ -0,0 +1,96 @@
+<script>
+  import { onMount } from 'svelte'
+  import { pollLinkInjections } from '$lib/api'
+  import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument } from '$lib/linkInjection'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { authorize, isEditorialModeEnabled } from '$lib/auth'
+  import TitleModal from './components/TitleModal.svelte'
+  import Editor from './components/Editorial/Editor.svelte'
+
+  const parentElement = getLinkInjectionsParentElement()
+  /** @type {HTMLElement[]} */
+  const elements = getLinkInjectionElements(parentElement)
+  const htmlString = elements.map(p => p.outerHTML).join('')
+  const isEditorialMode = isEditorialModeEnabled()
+
+  /** @type {LinkInjection[]} */
+  let linkInjections = $state([])
+  /** @type {LinkInjection | null} */
+  let activeInjection = $state(null)
+  let authorized = $state(false)
+  let loading = $state(true)
+
+  // Rerender link injections when linkInjections change. This is only relevant for editiorial mode.
+  $effect(() => {
+    if (isEditorialMode) rerender()
+  })
+
+  onMount(() => {
+    track(TrackingEvent.ArticlePageView)
+
+    initialize()
+
+    return () => clearLinkInjections()
+  })
+
+  async function initialize() {
+    if (isEditorialMode) authorized = await authorize()
+
+    const url = location.protocol + '//' + location.host + location.pathname
+    const response = await pollLinkInjections(url, htmlString) || []
+    linkInjections = response.filter(i => i.title_details) // Filter out injections without titles
+
+    inject()
+
+    loading = false
+  }
+
+  function rerender() {
+    clearLinkInjections()
+    inject()
+  }
+
+  function inject() {
+    if (!linkInjections.length) return
+
+    const filteredInjections = injectLinksInDocument(elements, linkInjections, setTarget)
+    if (JSON.stringify(linkInjections) !== JSON.stringify(filteredInjections)) linkInjections = filteredInjections
+  }
+
+  /** @param {LinkInjection} injection */
+  function setTarget(injection) {
+    activeInjection = injection
+  }
+</script>
+
+<div class="playpilot-link-injections">
+  {#if isEditorialMode && authorized}
+    <Editor bind:linkInjections {htmlString} {loading} />
+  {/if}
+
+  {#if activeInjection && activeInjection.title_details}
+    <TitleModal title={activeInjection.title_details} onclose={() => activeInjection = null} />
+  {/if}
+</div>
+
+<style lang="scss">
+  @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
+  @import url('$lib/variables.css');
+  @import url('$lib/global.css');
+
+  .playpilot-link-injections :global(*) {
+    box-sizing: border-box;
+  }
+
+  .playpilot-link-injections :global(button),
+  .playpilot-link-injections :global(input) {
+    transition: outline-offset 100ms;
+  }
+
+  .playpilot-link-injections :global(button):focus-visible,
+  .playpilot-link-injections :global(input):focus-visible {
+    outline: 2px solid white;
+    outline-offset: 2px;
+  }
+</style>