pulse-player/index.html at main · YamadaBlog/pulse-player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#05050A" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
    <title>Pulse — a premium drop-in music player for Vue, React, Svelte, Angular, Web Components, and React Native</title>
    <meta
      name="description"
      content="Pulse is a multi-framework music player component — Vue 3, React 18/19, Svelte 5, Angular 17+, Web Components, and React Native. Singleton audio engine, 9 mood themes, FFT visualiser, drag-to-resize, FAB radial menu, fullscreen, keyboard shortcuts. 14 kB gzip (Vue lib). MIT."
    />
    <link rel="canonical" href="https://yamadablog.github.io/pulse-player/" />

    <!-- Display typefaces — Geist Sans + Geist Mono, SELF-HOSTED
         (round 10, audit №6 P2). Previously loaded from the Google
         Fonts CDN : a third-party request on the first-text-paint path
         + a GDPR exposure (visitor IP shipped to Google). The official
         Vercel variable WOFF2 files (SIL OFL 1.1 — licence shipped at
         fonts/OFL.txt) now serve from the same origin : one connection,
         no DNS/TLS round-trip to fonts.gstatic.com, no tracking.
         font-display: swap preserved — text paints in the fallback
         stack immediately. -->
    <link
      rel="preload"
      href="%BASE_URL%fonts/Geist-Variable.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <style>
      @font-face {
        font-family: 'Geist';
        src: url('%BASE_URL%fonts/Geist-Variable.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Geist Mono';
        src: url('%BASE_URL%fonts/GeistMono-Variable.woff2') format('woff2');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
      }
    </style>

    <!-- Open Graph (Bluesky / LinkedIn / Discord / Facebook) -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Pulse" />
    <meta property="og:title" content="Pulse — multi-framework music player on npm" />
    <meta
      property="og:description"
      content="Vue, React, Svelte, Angular, Web Components, and React Native. Singleton audio engine + 9 mood themes. MIT, 14 kB gzip."
    />
    <meta property="og:url" content="https://yamadablog.github.io/pulse-player/" />
    <meta
      property="og:image"
      content="https://yamadablog.github.io/pulse-player/og-banner.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image:alt"
      content="Pulse — multi-framework music player on npm. Logo + headline + install command + chips (MIT, 9 themes 14 kB gzip, 7 packages on npm)."
    />

    <!-- Twitter / X -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Pulse — multi-framework music player on npm" />
    <meta
      name="twitter:description"
      content="Vue, React, Svelte, Angular, Web Components, and React Native. Singleton audio engine + 9 mood themes. MIT, 14 kB gzip."
    />
    <meta
      name="twitter:image"
      content="https://yamadablog.github.io/pulse-player/og-banner.png"
    />

    <!-- JSON-LD structured data for search engines -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "Pulse",
        "alternateName": "pulse-player",
        "operatingSystem": "Cross-platform (Web + React Native)",
        "applicationCategory": "DeveloperApplication",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
        "license": "https://opensource.org/licenses/MIT",
        "softwareVersion": "3.0.0-rc.3",
        "downloadUrl": "https://www.npmjs.com/package/@pulse-music/react",
        "video": "https://youtu.be/q_FJ1GWaCc8",
        "url": "https://yamadablog.github.io/pulse-player/"
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>