Repository: h2oai/wave
File: ui/src/meta.tsx (TypeScript)

Code before:
  /** The title of the page. */
  title?: S
  /** Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use). */
  refresh?: U
  /** Display a desktop notification. */
  notification?: S
  /** Redirect the page to a new URL. */
  redirect?: S
  /** 
   * Shortcut icon path. Preferably a `.png` file (`.ico` files may not work in mobile browsers). 
   * Not supported in Safari.
  */
  icon?: S
  /** The layouts supported by this page. */
  layouts?: Layout[]
  /** Display a dialog on the page. */
  dialog?: Dialog
  /** Specify the name of the theme (color scheme) to use on this page. One of 'light' or 'neon'. */
  theme?: S
  /** Configure a tracker for the page (for web analytics). */
  tracker?: Tracker
  /** External Javascript files to load into the page. */
  scripts?: Script[]
  /** Javascript code to execute on this page. */
  script?: InlineScript
  /** CSS to be inlined into this page. */
  style?: S
  /** External CSS files to load into the page. */
  styles?: Style[]
}

const
  windowTitleB = box(''),
  windowIconB = box('')

on(windowTitleB, t => window.document.title = t)
on(windowIconB, icon => {
  const
    iconLink = document.querySelector("link[rel*='icon']") as HTMLLinkElement,
    touchIconLink = document.querySelector("link[rel*='apple-touch-icon']") as HTMLLinkElement
  if (iconLink) iconLink.href = icon
  // Not working as of Feb 2021 since Safari does not support dynamic favicon changes.
  if (touchIconLink) touchIconLink.href = icon
})

export const
  layoutsB = box<Layout[]>([]),
  preload = ({ state }: Model<State>) => {
    const { title, icon, refresh, notification, redirect, layouts, dialog, theme, tracker, scripts, script, style, styles } = state

    if (redirect) {

Review comment (suggestion):
```suggestion
  /** CSS stylesheet to be applied to this page. */
```

Code after:
/**
 * Represents page-global state.
 *
 * This card is invisible.
 * It is used to control attributes of the active page.
*/
interface State {
  /** The title of the page. */
  title?: S
  /** Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use). */
  refresh?: U
  /** Display a desktop notification. */
  notification?: S
  /** Redirect the page to a new URL. */
  redirect?: S
  /** 
   * Shortcut icon path. Preferably a `.png` file (`.ico` files may not work in mobile browsers). 
   * Not supported in Safari.
  */
  icon?: S
  /** The layouts supported by this page. */
  layouts?: Layout[]
  /** Display a dialog on the page. */
  dialog?: Dialog
  /** Specify the name of the theme (color scheme) to use on this page. One of 'light' or 'neon'. */
  theme?: S
  /** Configure a tracker for the page (for web analytics). */
  tracker?: Tracker
  /** External Javascript files to load into the page. */
  scripts?: Script[]
  /** Javascript code to execute on this page. */
  script?: InlineScript
  /** CSS stylesheet to be applied to this page. */
  stylesheet?: InlineStylesheet
  /** External CSS files to load into the page. */
  stylesheets?: Stylesheet[]
}

const
  windowTitleB = box(''),
  windowIconB = box('')

on(windowTitleB, t => window.document.title = t)
on(windowIconB, icon => {
  const
    iconLink = document.querySelector("link[rel*='icon']") as HTMLLinkElement,
    touchIconLink = document.querySelector("link[rel*='apple-touch-icon']") as HTMLLinkElement
  if (iconLink) iconLink.href = icon
  // Not working as of Feb 2021 since Safari does not support dynamic favicon changes.
  if (touchIconLink) touchIconLink.href = icon
})