index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue Color Wheel</title>
  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Vue Color Wheel" />
  <meta property="og:description"
    content="Create a color palette and effortlessly incorporate it into your projects." />
  <meta property="og:url" content="https://vue-color-wheel.vercel.app/" />

  <meta property="og:image" content="https://vue-color-wheel.vercel.app/preview.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Twitter/X -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Vue Color Wheel" />
  <meta name="twitter:description"
    content="Create a color palette and effortlessly incorporate it into your projects." />
  <meta name="twitter:image" content="https://vue-color-wheel.vercel.app/preview.jpg" />
  <meta name="twitter:image:width" content="1200" />
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>