Vanilla setup

import {
  SWAN_PUBLIC_ASSET_FOLDER,
  SwanAssetFolders,
  getSwanAssetFolderName,
  getSwanBaseUrl,
} from '@vp/swan'

function getLinkHtml() {
  const swanBaseUrl = getSwanBaseUrl('other')

  const favFolder = `${swanBaseUrl}${SWAN_PUBLIC_ASSET_FOLDER}/${getSwanAssetFolderName(
    SwanAssetFolders.FAVICONS,
  )}`

  return `
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="${favFolder}/favicon.ico">
    <link rel="apple-touch-icon" sizes="152x152" href="${favFolder}/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="${favFolder}/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="${favFolder}/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="${favFolder}/apple-icon-60x60.png" />
  `
}

import {
  getSwanBaseUrl,
  getSwanFontRenderConfig,
  SwanFontNameEnum,
  SwanPathTypeEnum,
} from '@vp/swan'

function getFontHtmlSnippet() {
  const swanBaseUrl = getSwanBaseUrl('other')
  const [preloadLinks, fontFaceConfig] = getSwanFontRenderConfig({
    fontNames: [SwanFontNameEnum.Graphik], // Font Names to load
    pathType: SwanPathTypeEnum.hashed, // Path type -> hashed | versioned
    swanAssetBaseUrl: swanBaseUrl, // Domain name
  })

  return `
  ${preloadLinks.map(
    url =>
      `<link rel="preload" crossOrigin="anonymous" as="font" href="${url}" />`,
  )}
  <style type="text/css">${fontFaceConfig}</style>
  `
}

import {
  SWAN_STYLE_KEY_MAP,
  SwanPathTypeEnum,
  getSwanAssetUrl,
  getSwanBaseUrl,
} from '@vp/swan'

const keys = [SWAN_STYLE_KEY_MAP.core, SWAN_STYLE_KEY_MAP.button]

function getStyleSheetHtml() {
  const swanBaseUrl = getSwanBaseUrl('other')
  const urls = keys.map(key =>
    getSwanAssetUrl({
      key,
      pathType: SwanPathTypeEnum.hashed, // pathType => hashed | versioned
      baseUrl: swanBaseUrl, // Domain name to use
    }),
  )
  return urls
    .map(url => `<link rel="stylesheet" type="text/css" href="${url}" />`)
    .join('\n')
}

import {
  getSwanAssetUrl,
  getSwanBaseUrl,
  SWAN_JS_KEY_MAP,
  SwanPathTypeEnum,
} from '@vp/swan'

function scriptHtml() {
  const swanBaseUrl = getSwanBaseUrl('other')

  const scriptUrls = [
    SWAN_JS_KEY_MAP.accordion,
    SWAN_JS_KEY_MAP.alertBox,
    SWAN_JS_KEY_MAP.core,
    SWAN_JS_KEY_MAP.modalDialog,
    SWAN_JS_KEY_MAP.popover,
    SWAN_JS_KEY_MAP.progress,
    SWAN_JS_KEY_MAP.progressiveImage,
    SWAN_JS_KEY_MAP.tabs,
    SWAN_JS_KEY_MAP.toggleSwitch,
  ].map(key =>
    getSwanAssetUrl({
      type: 'js',
      key,
      baseUrl: swanBaseUrl,
      pathType: SwanPathTypeEnum.hashed,
    }),
  )
  return scriptUrls.map(src => `<script src="${src}"></script>`).join('')
}

import {
  getSwanAssetUrl,
  getSwanBaseUrl,
  SWAN_ICON_KEY_MAP,
  SwanPathTypeEnum,
} from '@vp/swan'

function iconHtml() {
  const swanBaseUrl = getSwanBaseUrl('other')

  const accountIconUrl = getSwanAssetUrl({
    type: 'icon',
    key: SWAN_ICON_KEY_MAP.account,
    baseUrl: swanBaseUrl,
    pathType: SwanPathTypeEnum.hashed,
  })

  return `<img src="${accountIconUrl}" />`
}

import {
  getSwanAssetUrl,
  getSwanBaseUrl,
  SWAN_ILLUSTRATION_KEY_MAP,
  SwanPathTypeEnum,
} from '@vp/swan'

function illustrationHtml() {
  const swanBaseUrl = getSwanBaseUrl('other')

  const errorIllustrationUrl = getSwanAssetUrl({
    type: 'icon',
    key: SWAN_ILLUSTRATION_KEY_MAP.error,
    baseUrl: swanBaseUrl,
    pathType: SwanPathTypeEnum.hashed,
  })

  return `<img src="${errorIllustrationUrl}" alt="error illustration" />`
}