Skip to content

Commit 84d6901

Browse files
tinchox5tinchox5
committed
feat(docs): enhance plugin documentation with event tracking attributes for improved analytics on user interactions
1 parent 20de0f2 commit 84d6901

1 file changed

Lines changed: 19 additions & 19 deletions

File tree

‎docs/plugins.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@
231231
</style>
232232
</head>
233233
<body>
234-
<button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode">&#9790;</button>
234+
<button class="theme-toggle" id="themeToggle" title="Toggle light/dark mode" data-umami-event="Plugins toggle theme">&#9790;</button>
235235

236236
<!-- ── Hero ── -->
237237
<section class="hero" id="top">
@@ -376,7 +376,7 @@ <h4>Captured output</h4>
376376
<div class="pg-panel">
377377
<div class="pg-panel-header">
378378
<h4 style="margin:0">Generated code</h4>
379-
<button class="copy-btn" data-copy="pgCode" style="position:static;">Copy</button>
379+
<button class="copy-btn" data-copy="pgCode" style="position:static;" data-umami-event="Plugins playground copy">Copy</button>
380380
</div>
381381
<div class="pg-code-wrap">
382382
<pre class="pg-code-block" id="pgCode">// Select plugins to see the code</pre>
@@ -415,7 +415,7 @@ <h4 style="margin:0">Generated code</h4>
415415
<section class="usage-section">
416416
<div class="section-label">Usage Example</div>
417417
<div class="code-block-wrap">
418-
<button class="copy-btn" data-copy="usageCode">Copy</button>
418+
<button class="copy-btn" data-copy="usageCode" data-umami-event="Plugins quickstart copy">Copy</button>
419419
<div class="code-block" id="usageCode">
420420
<span class="kw">import</span> { snapdom } <span class="kw">from</span> <span class="str">'@zumer/snapdom'</span>;<br>
421421
<span class="kw">import</span> { filter } <span class="kw">from</span> <span class="str">'@zumer/snapdom-plugins/filter'</span>;<br>
@@ -431,12 +431,12 @@ <h4 style="margin:0">Generated code</h4>
431431
<!-- ── Plugin Directory ── -->
432432
<div class="section-top"><a href="#top" class="back-top">Back to top</a></div>
433433
<div class="filter-bar">
434-
<button class="filter-btn active" data-filter="all">All</button>
435-
<button class="filter-btn" data-filter="capture">Capture</button>
436-
<button class="filter-btn" data-filter="transform">Transform</button>
437-
<button class="filter-btn" data-filter="export">Export</button>
438-
<button class="filter-btn" data-filter="utility">Utility</button>
439-
<button class="filter-btn" data-filter="integration">Integration</button>
434+
<button class="filter-btn active" data-filter="all" data-umami-event="Plugins filter all">All</button>
435+
<button class="filter-btn" data-filter="capture" data-umami-event="Plugins filter capture">Capture</button>
436+
<button class="filter-btn" data-filter="transform" data-umami-event="Plugins filter transform">Transform</button>
437+
<button class="filter-btn" data-filter="export" data-umami-event="Plugins filter export">Export</button>
438+
<button class="filter-btn" data-filter="utility" data-umami-event="Plugins filter utility">Utility</button>
439+
<button class="filter-btn" data-filter="integration" data-umami-event="Plugins filter integration">Integration</button>
440440
</div>
441441

442442
<section class="grid-section" id="official">
@@ -449,7 +449,7 @@ <h4 style="margin:0">Generated code</h4>
449449
<h3>picture-resolver</h3>
450450
<p>Resolves lazy-loaded &lt;picture&gt; placeholders. Detects base64 stubs and fetches the real image before capture.</p>
451451
<div class="hooks"><span class="hook-badge">beforeClone</span><span class="hook-badge">afterClone</span></div>
452-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/picture-resolver.js">Source</a><span class="expand-hint">details</span></div>
452+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/picture-resolver.js" data-umami-event="Plugins source picture-resolver">Source</a><span class="expand-hint">details</span></div>
453453
</div>
454454

455455
<!-- timestamp-overlay -->
@@ -458,7 +458,7 @@ <h3>picture-resolver</h3>
458458
<h3>timestamp-overlay</h3>
459459
<p>Adds a configurable timestamp label on the captured clone. Supports multiple date formats and positions.</p>
460460
<div class="hooks"><span class="hook-badge">afterClone</span></div>
461-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/timestamp-overlay.js">Source</a><span class="expand-hint">details</span></div>
461+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/timestamp-overlay.js" data-umami-event="Plugins source timestamp-overlay">Source</a><span class="expand-hint">details</span></div>
462462
</div>
463463

464464
<!-- filter -->
@@ -467,7 +467,7 @@ <h3>timestamp-overlay</h3>
467467
<h3>filter</h3>
468468
<p>Applies CSS filter effects to captures. Ships with presets: grayscale, sepia, blur, vintage, dramatic.</p>
469469
<div class="hooks"><span class="hook-badge">afterClone</span></div>
470-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/filter.js">Source</a><span class="expand-hint">details</span></div>
470+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/filter.js" data-umami-event="Plugins source filter">Source</a><span class="expand-hint">details</span></div>
471471
</div>
472472

473473
<!-- replace-text -->
@@ -476,7 +476,7 @@ <h3>filter</h3>
476476
<h3>replace-text</h3>
477477
<p>Find-and-replace text in the captured clone. Supports strings and regex patterns.</p>
478478
<div class="hooks"><span class="hook-badge">afterClone</span></div>
479-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/replace-text.js">Source</a><span class="expand-hint">details</span></div>
479+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/replace-text.js" data-umami-event="Plugins source replace-text">Source</a><span class="expand-hint">details</span></div>
480480
</div>
481481

482482
<!-- color-tint -->
@@ -485,7 +485,7 @@ <h3>replace-text</h3>
485485
<h3>color-tint</h3>
486486
<p>Tints the entire capture to a specified color using an overlay with mix-blend-mode.</p>
487487
<div class="hooks"><span class="hook-badge">afterClone</span></div>
488-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/color-tint.js">Source</a><span class="expand-hint">details</span></div>
488+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/color-tint.js" data-umami-event="Plugins source color-tint">Source</a><span class="expand-hint">details</span></div>
489489
</div>
490490

491491
<!-- ascii-export -->
@@ -494,7 +494,7 @@ <h3>color-tint</h3>
494494
<h3>ascii-export</h3>
495495
<p>Adds a toAscii() method that converts captures to ASCII art. Configurable width, charset, and luminance.</p>
496496
<div class="hooks"><span class="hook-badge">defineExports</span></div>
497-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/ascii-export.js">Source</a><span class="expand-hint">details</span></div>
497+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/ascii-export.js" data-umami-event="Plugins source ascii-export">Source</a><span class="expand-hint">details</span></div>
498498
</div>
499499

500500
<!-- pdf-image -->
@@ -512,7 +512,7 @@ <h3>pdf-image</h3>
512512
<h3>html-in-canvas</h3>
513513
<p>Uses the experimental WICG drawElementImage API for direct DOM-to-canvas rendering where supported.</p>
514514
<div class="hooks"><span class="hook-badge">beforeRender</span><span class="hook-badge">afterRender</span><span class="hook-badge">defineExports</span></div>
515-
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/html-in-canvas.js">Source</a><span class="expand-hint">details</span></div>
515+
<div class="card-footer"><span class="official-badge">official</span><a href="https://github.com/zumerlab/snapdom/blob/main/packages/plugins/html-in-canvas.js" data-umami-event="Plugins source html-in-canvas">Source</a><span class="expand-hint">details</span></div>
516516
</div>
517517

518518
</div>
@@ -526,7 +526,7 @@ <h3>html-in-canvas</h3>
526526
<div class="card-top"><div class="plugin-icon">+</div><span class="category-tag">yours here</span></div>
527527
<h3>Your Plugin</h3>
528528
<p>Build a plugin and add it here. Just open a PR adding one line to <code style="color:var(--green);font-size:12px;">community-plugins.md</code>.</p>
529-
<div class="card-footer"><a href="https://github.com/zumerlab/snapdom/blob/main/CONTRIBUTING_PLUGINS.md">How to submit</a></div>
529+
<div class="card-footer"><a href="https://github.com/zumerlab/snapdom/blob/main/CONTRIBUTING_PLUGINS.md" data-umami-event="Plugins how to submit">How to submit</a></div>
530530
</div>
531531
</div>
532532
</section>
@@ -559,9 +559,9 @@ <h2>Build a Plugin in 5 Minutes</h2>
559559
<!-- ── Scripts ── -->
560560

561561
<nav class="page-nav">
562-
<a href="./index.html">Showcase</a>
562+
<a href="./index.html" data-umami-event="Plugins nav showcase">Showcase</a>
563563
<a href="./plugins.html" class="current">Plugins</a>
564-
<a href="./labs.html">Labs</a>
564+
<a href="./labs.html" data-umami-event="Plugins nav labs">Labs</a>
565565
</nav>
566566

567567
<!-- Theme toggle -->

0 commit comments

Comments
 (0)