Skip to content

Commit 4261738

Browse files
author
James Campbell
committed
Update GitHub Pages with SEO meta tags and swatchme npm package section
- Add comprehensive SEO meta tags (description, keywords, Open Graph, Twitter Card) - Add schema.org structured data for the npm package - Add new "Browser-Only JS" section showcasing swatchme npm package - Add npm package feature card in main features grid - Update marquee to include npm package
1 parent 5f33b01 commit 4261738

File tree

1 file changed

+96
-4
lines changed

1 file changed

+96
-4
lines changed

‎docs/index.html‎

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,24 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>SWATCHIFY — EXTRACT COLORS FROM IMAGES</title>
6+
<title>Swatchify — Extract Dominant Colors from Images | Go CLI, REST API & JavaScript Library</title>
7+
<meta name="description" content="Extract dominant colors from images using k-means clustering. Available as a Go CLI tool, REST API server, Go library, and browser-only JavaScript npm package (swatchme). Open source, blazing fast, zero dependencies.">
8+
<meta name="keywords" content="color extraction, dominant colors, image palette, k-means clustering, color picker, go library, javascript library, npm package, swatchme, cli tool, rest api, image processing, color analysis">
9+
<meta name="author" content="James Campbell">
10+
<meta name="robots" content="index, follow">
11+
12+
<!-- Open Graph -->
13+
<meta property="og:title" content="Swatchify — Extract Dominant Colors from Images">
14+
<meta property="og:description" content="Extract dominant colors from images using k-means clustering. CLI, REST API, Go library, and browser-only JavaScript npm package.">
15+
<meta property="og:type" content="website">
16+
<meta property="og:url" content="https://james-see.github.io/swatchify/">
17+
18+
<!-- Twitter Card -->
19+
<meta name="twitter:card" content="summary_large_image">
20+
<meta name="twitter:title" content="Swatchify — Extract Dominant Colors from Images">
21+
<meta name="twitter:description" content="Extract dominant colors from images using k-means clustering. CLI, REST API, Go library, and browser-only JavaScript npm package.">
22+
23+
<link rel="canonical" href="https://james-see.github.io/swatchify/">
724
<link rel="preconnect" href="https://fonts.googleapis.com">
825
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
926
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&display=swap" rel="stylesheet">
@@ -283,6 +300,11 @@
283300
color: var(--yellow);
284301
}
285302

303+
.comment {
304+
color: #666;
305+
font-style: italic;
306+
}
307+
286308
.cta {
287309
display: inline-block;
288310
font-family: 'Bebas Neue', sans-serif;
@@ -426,8 +448,8 @@ <h1 class="title">
426448

427449
<div class="marquee">
428450
<span class="marquee-content">
429-
◆ REST API ◆ GO LIBRARY ◆ CLI TOOL ◆ K-MEANS CLUSTERING ◆ JSON OUTPUT ◆ PALETTE PNG ◆ CROSS-PLATFORM ◆ OPEN SOURCE ◆
430-
◆ REST API ◆ GO LIBRARY ◆ CLI TOOL ◆ K-MEANS CLUSTERING ◆ JSON OUTPUT ◆ PALETTE PNG ◆ CROSS-PLATFORM ◆ OPEN SOURCE ◆
451+
◆ NPM PACKAGE ◆ BROWSER-ONLY ◆ REST API ◆ GO LIBRARY ◆ CLI TOOL ◆ K-MEANS CLUSTERING ◆ JSON OUTPUT ◆ PALETTE PNG ◆ CROSS-PLATFORM ◆ OPEN SOURCE ◆
452+
◆ NPM PACKAGE ◆ BROWSER-ONLY ◆ REST API ◆ GO LIBRARY ◆ CLI TOOL ◆ K-MEANS CLUSTERING ◆ JSON OUTPUT ◆ PALETTE PNG ◆ CROSS-PLATFORM ◆ OPEN SOURCE ◆
431453
</span>
432454
</div>
433455

@@ -449,6 +471,70 @@ <h3>Download Binary</h3>
449471
<a href="https://github.com/james-see/swatchify/releases" class="cta secondary">DOWNLOAD</a>
450472
</section>
451473

474+
<section class="section" id="javascript">
475+
<h2 class="section-title">BROWSER-ONLY JS</h2>
476+
477+
<article itemscope itemtype="https://schema.org/SoftwareApplication">
478+
<meta itemprop="name" content="swatchme">
479+
<meta itemprop="applicationCategory" content="DeveloperApplication">
480+
<meta itemprop="operatingSystem" content="Browser">
481+
482+
<div class="install-block" style="box-shadow: 12px 12px 0 var(--cyan);">
483+
<h3>NPM Install — Client-Side Color Extraction</h3>
484+
<code>npm install swatchme</code>
485+
486+
<p style="margin-top: 1.5rem; line-height: 1.6;">
487+
<strong>swatchme</strong> is a zero-dependency JavaScript/TypeScript library for extracting dominant colors from images entirely in the browser. No server required. Uses the same k-means++ clustering algorithm as the Go version. ~2KB gzipped.
488+
</p>
489+
</div>
490+
491+
<div class="usage-example" style="border-color: var(--cyan);">
492+
<pre>
493+
<span class="command">import</span> { extractColors, generatePaletteCanvas } <span class="command">from</span> <span class="output">'swatchme'</span>;
494+
495+
<span class="comment">// Extract colors from a file input</span>
496+
<span class="command">const</span> file = document.querySelector(<span class="output">'input[type="file"]'</span>).files[0];
497+
<span class="command">const</span> colors = <span class="command">await</span> extractColors(file, {
498+
numColors: 6,
499+
excludeWhite: <span class="output">true</span>
500+
});
501+
502+
<span class="output">// → [{ hex: "#4A90D9", percentage: 32.5, rgb: {r,g,b} }, ...]</span>
503+
504+
<span class="comment">// Generate a palette canvas</span>
505+
<span class="command">const</span> canvas = generatePaletteCanvas(colors, 500, 100);
506+
document.body.appendChild(canvas);
507+
</pre>
508+
</div>
509+
510+
<div class="features" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 2rem;">
511+
<div class="feature" style="border-color: var(--cyan);">
512+
<div class="feature-icon">🌐</div>
513+
<h3 style="color: var(--cyan);">BROWSER ONLY</h3>
514+
<p>100% client-side. No server calls. Works offline.</p>
515+
</div>
516+
<div class="feature" style="border-color: var(--cyan);">
517+
<div class="feature-icon">📦</div>
518+
<h3 style="color: var(--cyan);">ZERO DEPS</h3>
519+
<p>No runtime dependencies. ~2KB gzipped.</p>
520+
</div>
521+
<div class="feature" style="border-color: var(--cyan);">
522+
<div class="feature-icon">🔌</div>
523+
<h3 style="color: var(--cyan);">ANY INPUT</h3>
524+
<p>File, Blob, Image, Canvas, ImageData, or URL.</p>
525+
</div>
526+
<div class="feature" style="border-color: var(--cyan);">
527+
<div class="feature-icon">📝</div>
528+
<h3 style="color: var(--cyan);">TYPESCRIPT</h3>
529+
<p>Full TypeScript support with exported types.</p>
530+
</div>
531+
</div>
532+
533+
<a href="https://www.npmjs.com/package/swatchme" class="cta" style="background: var(--cyan); margin-top: 2rem;">NPM PACKAGE</a>
534+
<a href="https://github.com/james-see/swatchify/tree/main/js" class="cta secondary">JS SOURCE</a>
535+
</article>
536+
</section>
537+
452538
<section class="section">
453539
<h2 class="section-title">HOW IT WORKS</h2>
454540

@@ -502,6 +588,12 @@ <h3>GO LIBRARY</h3>
502588
<p>Import as a package. ExtractFromFile(), ExtractFromImage(), GeneratePalette().</p>
503589
</div>
504590

591+
<div class="feature">
592+
<div class="feature-icon">🟨</div>
593+
<h3>NPM PACKAGE</h3>
594+
<p>Browser-only JavaScript library. Zero deps, ~2KB gzipped. npm install swatchme</p>
595+
</div>
596+
505597
<div class="feature">
506598
<div class="feature-icon">⚡</div>
507599
<h3>BLAZING FAST</h3>
@@ -627,7 +719,7 @@ <h2 class="section-title">CLI FLAGS</h2>
627719
<a href="https://github.com/james-see/swatchify" class="cta">VIEW ON GITHUB</a>
628720
</p>
629721
<p style="margin-top: 2rem; opacity: 0.6; font-size: 0.9rem;">
630-
© 2025 James Campbell
722+
© 2025-2026 James Campbell
631723
</p>
632724
</footer>
633725
</body>

0 commit comments

Comments
 (0)