@mevdragon/vidfarm-devcli 0.17.0 → 0.18.0

package/dist/src/reskin/help-page.js

@@ -1,141 +1,154 @@
-// /reskin/help — the vidfarm Help / Getting-started center, ported into the
-// farmville design system using ONLY shared rk-* primitives + a page-scoped
-// CSS block + a small self-contained module script.
+// /reskin/help — the vidfarm Help center, MIGRATED to real production content.
 //
-// Renders with representative SAMPLE help content so it can be viewed without
-// auth. Faithfully mirrors src/help-page.ts → renderHelpPage: a friendly intro,
-// support entry points (video tutorials / report a bug / contact / billing),
-// and a native <details>/<summary> accordion whose items can be deep-linked
-// open via an `?expand=id,id` query param (URL stays in sync on toggle).
+// This mirrors the live renderer src/help-page.ts → renderHelpPage: it accepts
+// the SAME input object that route builds (`Parameters<typeof renderHelpPage>[0]`
+// — `{ account, expand }`) so wiring the route is just "call this instead of the
+// legacy renderer". The accordion is the REAL support surface: the four live
+// sections (video tutorials, report a bug, contact the team, billing/cancel)
+// with their REAL destinations — the same YouTube embed, the two Tally forms,
+// the support email, and the Stripe billing portal the live page ships. The
+// `?expand=id,id` deep-link is honored both server-side (native <details open>)
+// and client-side (URL stays in sync on toggle). Design stays farmville (shared
+// rk-* primitives + a page-scoped CSS block); only the data + links became real.
 //
-// Content is representative vidfarm help: forking templates, editing on the
-// timeline, rendering, publishing, and billing / credits.
+// A default input keeps the existing zero-arg route call compiling; the route
+// can pass real `{ account, expand }` whenever it's wired.
 import { reskinDocument, rkEscape } from "./document.js";
 const SEARCH_ICON = `<svg class="rk-help-search-ic" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>`;
-const TOPICS = [
-    { expand: "getting_started", title: "Getting started", blurb: "Fork a template on Discover and make it yours in a click.", count: "6 articles" },
-    { expand: "editing", title: "Editing", blurb: "Retime clips, swap media, and edit by chatting on the timeline.", count: "9 articles" },
-    { expand: "rendering", title: "Rendering", blurb: "Turn your composition into a finished MP4 on HyperFrames.", count: "4 articles" },
-    { expand: "publishing", title: "Publishing", blurb: "Schedule and post approved cuts straight to your channels.", count: "5 articles" },
-    { expand: "billing", title: "Billing & credits", blurb: "Understand your wallet, compute charges, and rate limits.", count: "7 articles" }
-];
-const FAQ = [
+// The ONLY deep-linkable accordion ids — mirrors HELP_SECTION_IDS in
+// src/help-page.ts. `?expand=` values are filtered against this allowlist.
+const HELP_SECTION_IDS = ["video_tutorials", "report_bug", "contact_team", "cancel_subscription"];
+/** Parse `?expand=id,id` exactly like the live renderer: split, trim, keep only
+ *  known section ids. */
+function parseExpanded(expand) {
+    const allowed = new Set(HELP_SECTION_IDS);
+    if (!expand)
+        return new Set();
+    return new Set(expand
+        .split(",")
+        .map((value) => value.trim())
+        .filter((value) => allowed.has(value)));
+}
+// The four REAL support sections, with the SAME destinations the live help page
+// ships: the YouTube tutorial embed, the two Tally forms, the support email, and
+// the Stripe billing/cancellation portal.
+const SECTIONS = [
     {
-        id: "getting_started",
-        cat: "Getting started",
+        id: "video_tutorials",
+        cat: "Tutorials",
         catPill: "rk-pill-green",
-        question: "How do I start from a template?",
-        answer: `<p>Head to <strong>Discover</strong> and tap any template to preview it. When one clicks, hit <strong>Fork</strong> — vidfarm copies it into your <strong>Library</strong> as an editable project with its own timeline.</p>
-      <p>Forking never touches the original, so you're free to remix hooks, captions, and clips however you like. Your forks always show a <em>“Your project”</em> pill so they're easy to spot.</p>`
-    },
-    {
-        id: "editing",
-        cat: "Editing",
-        catPill: "rk-pill-sky",
-        question: "How does the timeline editor work?",
-        answer: `<p>Open any project in <strong>/editor</strong> to get a track-based timeline. Drag a clip to retime it, click a layer to edit its text or swap the media, and use the handles on the canvas frame to move or resize anything.</p>
-      <p>Prefer words to knobs? The AI chat dock edits for you in plain language — try <code>make the hook bigger</code> or <code>swap scene 2 for a beach clip</code>. Every change is saved to your project and you'll see a confirmation banner.</p>`
+        title: "Video tutorials",
+        body: `<div class="rk-help-video">
+      <iframe
+        src="https://www.youtube.com/embed/BG2vuCDzehc"
+        title="Video tutorials"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+        loading="lazy"
+        referrerpolicy="strict-origin-when-cross-origin"></iframe>
+    </div>`
     },
     {
-        id: "rendering",
-        cat: "Rendering",
-        catPill: "rk-pill-violet",
-        question: "How do I render my video, and what does it cost?",
-        answer: `<p>Hit <strong>Render</strong> in the editor. Vidfarm renders your composition to a full-quality MP4 on HyperFrames Lambda, and the finished file lands back in your <strong>Library</strong> when it's done.</p>
-      <p>You're only charged for the <strong>compute time</strong> the render actually uses — your own AI keys are never billed by vidfarm. Long renders keep you posted from the <strong>Job runs</strong> page.</p>`
-    },
-    {
-        id: "publishing",
-        cat: "Publishing",
+        id: "report_bug",
+        cat: "Support",
         catPill: "rk-pill-red",
-        question: "Can I publish straight to social?",
-        answer: `<p>Yes. First connect a channel in <strong>Settings → Channels</strong> (via FlockPoster or an email channel). Then, from any finished render, choose <strong>Publish</strong> to post or schedule to TikTok, Instagram, and more.</p>
-      <p>Scheduled posts show up on your <strong>Calendar</strong>, so you can plan a week of content and let vidfarm ship it for you.</p>`
-    },
-    {
-        id: "billing",
-        cat: "Billing",
-        catPill: "rk-pill-gold",
-        question: "How do credits and billing work?",
-        answer: `<p>Your <strong>wallet</strong> holds a prepaid balance. Renders and clip scans draw from it based on the compute they use — nothing else. Every charge is itemized in <strong>Settings → Wallet</strong>.</p>
-      <p>Top up any time, and set <strong>rate limits</strong> like “max spend per hour / per day” so a runaway job can never surprise you.</p>`
+        title: "Report a bug",
+        body: `<iframe
+      class="rk-help-formframe"
+      src="https://tally.so/embed/NpdkNj?alignLeft=1&amp;hideTitle=1&amp;transparentBackground=1"
+      title="Report a bug"
+      loading="lazy"></iframe>`
     },
     {
-        id: "clips",
-        cat: "Editing",
+        id: "contact_team",
+        cat: "Support",
         catPill: "rk-pill-sky",
-        question: "What are Clips, and how do I use them?",
-        answer: `<p>Clips are short, tagged moments mined from your footage. Point vidfarm at a source video and it cuts the video into scenes, tags each one, and drops them into your <strong>Clips</strong> library.</p>
-      <p>From there you can search by what's on screen (“founder on camera”, “product close-up”) and drop any clip straight into a project on the timeline.</p>`
-    },
-    {
-        id: "ai_keys",
-        cat: "Billing",
-        catPill: "rk-pill-gold",
-        question: "Do I need my own AI keys?",
-        answer: `<p>Bring-your-own keys — OpenAI, Gemini, OpenRouter, or Anthropic — power clip tagging, recaption, and Swipe mode. Add them in <strong>Settings → Developer</strong>; they're stored per workspace.</p>
-      <p>These keys are <strong>never billed by vidfarm</strong>. You only ever pay us for render and clip-scan compute.</p>`
+        title: "Ask a question / contact the team",
+        body: `<iframe
+      class="rk-help-formframe"
+      src="https://tally.so/embed/javNVa?alignLeft=1&amp;hideTitle=1&amp;transparentBackground=1"
+      title="Ask a question / contact the team"
+      loading="lazy"></iframe>`
     },
     {
-        id: "cancel",
+        id: "cancel_subscription",
         cat: "Billing",
         catPill: "rk-pill-gold",
-        question: "How do I cancel or get a refund?",
-        answer: `<p>You can cancel any time from the self-serve billing portal — no email required. We also offer <strong>90-day refunds</strong>.</p>
-      <p>For a refund, email <a href="mailto:operator@zoom-gtm.com">operator@zoom-gtm.com</a> and mention the email address you used at checkout so we can find your subscription quickly.</p>
-      <p><a class="rk-help-inline-cta" href="https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE" target="_blank" rel="noopener noreferrer">Open the billing portal <span class="rk-arrow">↗</span></a></p>`
+        title: "Cancel subscription & refunds",
+        body: `<div class="rk-help-copy">
+      <p>You can cancel your subscription at any time with a simple self-serve billing portal.</p>
+      <p>For refunds, we offer <strong>90-day refunds</strong>. Email <a href="mailto:operator@zoom-gtm.com">operator@zoom-gtm.com</a> and mention the original email address you used in Stripe so we can find your subscription quickly.</p>
+      <p><a class="rk-help-inline-cta" href="https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE" target="_blank" rel="noopener noreferrer">Open the cancellation portal <span class="rk-arrow">↗</span></a></p>
+    </div>`
     }
 ];
+// Browse-by-topic quick nav — every card deep-links straight to a REAL section.
+const TOPICS = [
+    { expand: "video_tutorials", title: "Video tutorials", blurb: "A quick tour from your first fork to your first published post.", action: "Watch" },
+    { expand: "report_bug", title: "Report a bug", blurb: "Something broken? Send us the details in about 30 seconds.", action: "Report" },
+    { expand: "contact_team", title: "Ask the team", blurb: "Questions about your workflow? Reach a real human, fast.", action: "Contact" },
+    { expand: "cancel_subscription", title: "Billing & cancellation", blurb: "Refunds, invoices, or cancel any time — no email required.", action: "Manage" }
+];
+// Real quick actions. Two deep-link into the accordion; the billing portal is
+// the live external Stripe portal.
 const SUPPORT_LINKS = [
-    { title: "Watch the tutorials", blurb: "A 4-minute tour from fork to published post.", cta: "Play video", href: "#" },
-    { title: "Report a bug", blurb: "Something broken? Send us the details in 30 seconds.", cta: "Report it", href: "#" },
-    { title: "Billing portal", blurb: "Update payment, download invoices, or cancel.", cta: "Manage billing", href: "#" }
+    { title: "Watch the tutorials", blurb: "A short tour from fork to published post.", cta: "Play video", href: "?expand=video_tutorials#rk-help-faq" },
+    { title: "Report a bug", blurb: "Something broken? Send us the details in 30 seconds.", cta: "Report it", href: "?expand=report_bug#rk-help-faq" },
+    { title: "Billing portal", blurb: "Update payment, download invoices, or cancel.", cta: "Manage billing", href: "https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE", external: true }
+];
+// Popular chips — every one deep-links a REAL section.
+const POPULAR = [
+    { label: "Video tutorials", expand: "video_tutorials" },
+    { label: "Report a bug", expand: "report_bug" },
+    { label: "Contact the team", expand: "contact_team" },
+    { label: "Cancel or refund", expand: "cancel_subscription" }
 ];
 function renderTopicCard(t) {
     return `<a class="rk-card rk-card-hover rk-help-topic" href="?expand=${rkEscape(t.expand)}#rk-help-faq">
     <h3>${rkEscape(t.title)}</h3>
     <p class="rk-muted rk-help-topic-blurb">${rkEscape(t.blurb)}</p>
-    <span class="rk-help-topic-foot">${rkEscape(t.count)} <span class="rk-arrow">→</span></span>
+    <span class="rk-help-topic-foot">${rkEscape(t.action)} <span class="rk-arrow">→</span></span>
   </a>`;
 }
-function renderFaqItem(f) {
-    return `<details class="rk-help-faq-item" data-expand-id="${rkEscape(f.id)}">
+function renderSection(s, open) {
+    const search = `${s.title} ${s.cat}`.toLowerCase();
+    return `<details class="rk-help-faq-item" data-expand-id="${rkEscape(s.id)}" data-search="${rkEscape(search)}"${open ? " open" : ""}>
     <summary class="rk-help-faq-summary">
       <span class="rk-help-faq-q">
-        <span class="rk-pill ${f.catPill} rk-help-faq-cat">${rkEscape(f.cat)}</span>
-        <span class="rk-help-faq-qt">${rkEscape(f.question)}</span>
+        <span class="rk-pill ${s.catPill} rk-help-faq-cat">${rkEscape(s.cat)}</span>
+        <span class="rk-help-faq-qt">${rkEscape(s.title)}</span>
       </span>
       <span class="rk-help-faq-toggle" aria-hidden="true"></span>
     </summary>
-    <div class="rk-help-faq-body">${f.answer}</div>
+    <div class="rk-help-faq-body">${s.body}</div>
   </details>`;
 }
 function renderSupportLink(s) {
-    return `<a class="rk-item rk-help-support" href="${rkEscape(s.href)}">
+    const attrs = s.external ? ` target="_blank" rel="noopener noreferrer"` : "";
+    return `<a class="rk-item rk-help-support" href="${rkEscape(s.href)}"${attrs}>
     <div class="rk-item-main">
       <div class="rk-item-title">${rkEscape(s.title)}</div>
       <div class="rk-help-support-sub rk-muted">${rkEscape(s.blurb)}</div>
     </div>
-    <span class="rk-btn rk-btn-ghost rk-btn-sm">${rkEscape(s.cta)} <span class="rk-arrow">→</span></span>
+    <span class="rk-btn rk-btn-ghost rk-btn-sm">${rkEscape(s.cta)} <span class="rk-arrow">${s.external ? "↗" : "→"}</span></span>
   </a>`;
 }
-export function renderReskinHelp() {
-    const popular = ["Fork a template", "Render an MP4", "Connect TikTok", "Wallet top-up", "What are Clips?"];
+export function renderReskinHelp(input = { account: { isLoggedIn: false }, expand: null }) {
+    const expanded = parseExpanded(input.expand);
     const hero = `
   <div class="rk-hero-band rk-help-band">
     <div class="rk-hero-art rk-help-art"></div>
     <div class="rk-hero rk-help-hero">
-      <span class="rk-badge rk-help-badge">Help center</span>
       <h1 class="rk-help-title">How can we help?</h1>
       <p class="rk-help-lede">Guides and answers for making short-form video with vidfarm — from your first fork to your first published post.</p>
       <form class="rk-help-search" role="search" onsubmit="return false">
         ${SEARCH_ICON}
-        <input class="rk-help-search-input" type="search" placeholder="Search help articles — “how do I render?”" aria-label="Search help articles" />
+        <input class="rk-help-search-input" type="search" placeholder="Search help — “render”, “bug”, “cancel”…" aria-label="Search help topics" data-help-search />
         <button class="rk-btn rk-btn-gold rk-help-search-btn" type="submit">Search</button>
       </form>
       <div class="rk-help-popular">
         <span class="rk-help-popular-label">Popular:</span>
-        ${popular.map((p) => `<a class="rk-help-chip" href="#rk-help-faq">${rkEscape(p)}</a>`).join("")}
+        ${POPULAR.map((p) => `<a class="rk-help-chip" href="?expand=${rkEscape(p.expand)}#rk-help-faq">${rkEscape(p.label)}</a>`).join("")}
       </div>
     </div>
   </div>`;
@@ -148,13 +161,14 @@ export function renderReskinHelp() {
     const faq = `
   <section class="rk-help-faq" id="rk-help-faq" aria-labelledby="rk-help-faq-title">
     <div class="rk-page-head rk-help-faq-head">
-      <span class="rk-eyebrow">Frequently asked</span>
-      <h2 class="rk-h1 rk-help-faq-h" id="rk-help-faq-title">Questions, answered</h2>
-      <p class="rk-sub">The quick answers most folks are looking for. Still stuck? We're one message away.</p>
+      <span class="rk-eyebrow">Help topics</span>
+      <h2 class="rk-h1 rk-help-faq-h" id="rk-help-faq-title">Guides & support</h2>
+      <p class="rk-sub">Watch a tutorial, report a bug, reach the team, or manage billing. Still stuck? We're one message away.</p>
     </div>
-    <div class="rk-help-faq-list">
-      ${FAQ.map(renderFaqItem).join("")}
+    <div class="rk-help-faq-list" data-help-list>
+      ${SECTIONS.map((s) => renderSection(s, expanded.has(s.id))).join("")}
     </div>
+    <p class="rk-muted rk-help-empty" data-help-empty hidden>No help topics match your search.</p>
   </section>`;
     const contact = `
   <section class="rk-help-contact" aria-label="Contact support">
@@ -191,7 +205,7 @@ ${hero}
 .rk-help-badge{background:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
 .rk-help-title{font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 18px rgba(20,54,90,.28)}
 .rk-help-lede{font-size:var(--rk-text-lg);color:#f3fbff;max-width:560px;line-height:1.55;text-shadow:0 1px 10px rgba(20,54,90,.25)}
-/* decorative search */
+/* search */
 .rk-help-search{position:relative;display:flex;align-items:center;width:min(560px,100%);
   background:#fff;border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-lg);padding:7px 7px 7px 18px;margin-top:6px}
 .rk-help-search-ic{color:var(--rk-n-400);flex:none}
@@ -211,20 +225,18 @@ ${hero}
 
 /* ── topic cards (pulled up onto the hero seam) ── */
 .rk-help-topics{margin-top:-72px}
-.rk-help-topic-grid{grid-template-columns:repeat(5,1fr)}
-@media(max-width:1080px){.rk-help-topic-grid{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:720px){.rk-help-topic-grid{grid-template-columns:repeat(2,1fr)}}
+.rk-help-topic-grid{grid-template-columns:repeat(4,1fr)}
+@media(max-width:1080px){.rk-help-topic-grid{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:460px){.rk-help-topic-grid{grid-template-columns:1fr}}
 .rk-help-topic{display:grid;gap:10px;align-content:start;padding:24px;text-align:left}
 .rk-help-topic h3{font-size:var(--rk-text-lg);font-weight:800;font-family:var(--rk-font-display);color:var(--rk-ink)}
-.rk-help-topic-tile{margin-bottom:4px}
 .rk-help-topic-blurb{font-size:13.5px;line-height:1.5}
 .rk-help-topic-foot{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
   font-size:13px;font-weight:700;color:var(--rk-gold-700)}
 .rk-help-topic:hover .rk-help-topic-foot .rk-arrow{transform:translateX(3px)}
 .rk-help-topic-foot .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
 
-/* ── FAQ accordion ── */
+/* ── accordion (real support sections) ── */
 .rk-help-faq{margin-top:72px}
 .rk-help-faq-head{justify-items:center;text-align:center;margin-bottom:28px;gap:10px}
 .rk-help-faq-h{font-size:var(--rk-text-3xl)}
@@ -232,6 +244,7 @@ ${hero}
 .rk-help-faq-item{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);
   box-shadow:var(--rk-shadow-card);overflow:hidden;transition:box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
 .rk-help-faq-item[open]{border-color:var(--rk-gold-tint2);box-shadow:var(--rk-shadow-lg)}
+.rk-help-faq-item[hidden]{display:none}
 .rk-help-faq-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
   padding:20px 22px;cursor:pointer;list-style:none;user-select:none}
 .rk-help-faq-summary::-webkit-details-marker{display:none}
@@ -247,13 +260,20 @@ ${hero}
 .rk-help-faq-item[open] .rk-help-faq-toggle::after{opacity:0}
 .rk-help-faq-item[open] .rk-help-faq-toggle::before{background:var(--rk-gold-700)}
 .rk-help-faq-summary:hover .rk-help-faq-toggle{background:var(--rk-n-200)}
-.rk-help-faq-body{display:grid;gap:12px;padding:0 22px 22px;max-width:680px;color:var(--rk-text);line-height:1.65;font-size:14.5px}
+.rk-help-faq-body{display:grid;gap:12px;padding:0 22px 22px;color:var(--rk-text);line-height:1.65;font-size:14.5px}
 .rk-help-faq-body p{margin:0}
 .rk-help-faq-body strong{color:var(--rk-n-800);font-weight:600}
 .rk-help-faq-body a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
 .rk-help-inline-cta{display:inline-flex;align-items:center;gap:6px;text-decoration:none!important}
 .rk-help-inline-cta .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
 .rk-help-inline-cta:hover .rk-arrow{transform:translateX(3px)}
+.rk-help-copy{display:grid;gap:12px;max-width:680px}
+/* embedded iframes (real tutorial + Tally forms) */
+.rk-help-video{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--rk-r-xl);background:#151a23}
+.rk-help-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
+.rk-help-formframe{display:block;width:100%;min-height:680px;border:0;border-radius:var(--rk-r-xl);background:rgba(255,255,255,.72)}
+@media(max-width:560px){.rk-help-formframe{min-height:75svh}}
+.rk-help-empty{text-align:center;max-width:820px;margin:18px auto 0}
 
 /* ── contact ── */
 .rk-help-contact{margin-top:72px;display:grid;gap:20px}
@@ -293,9 +313,11 @@ ${hero}
     }
   }
 
+  // Union of server-rendered [open] and any ?expand= in the URL, so both the
+  // static server render and client-side deep links open the right sections.
   var initial=readExpandedFromUrl();
   items.forEach(function(d){
-    d.open=Boolean(d.dataset.expandId&&initial[d.dataset.expandId]);
+    d.open=d.open||Boolean(d.dataset.expandId&&initial[d.dataset.expandId]);
     d.addEventListener('toggle',writeExpandedToUrl);
   });
 
@@ -305,10 +327,26 @@ ${hero}
       firstOpen.scrollIntoView({block:'center',behavior:'smooth'});
     });
   }
+
+  // Search filters the visible support sections.
+  var search=document.querySelector('[data-help-search]');
+  var empty=document.querySelector('[data-help-empty]');
+  if(search){
+    search.addEventListener('input',function(){
+      var q=(search.value||'').trim().toLowerCase();
+      var shown=0;
+      items.forEach(function(d){
+        var hit=!q||(d.dataset.search||'').indexOf(q)!==-1;
+        d.hidden=!hit;
+        if(hit)shown++;
+      });
+      if(empty)empty.hidden=shown!==0;
+    });
+  }
 })();`;
     return reskinDocument({
         title: "vidfarm reskin — Help",
-        description: "Reskinned vidfarm help center — getting started, topics, FAQ, and support.",
+        description: "Reskinned vidfarm help center — tutorials, bug reports, contact, and billing.",
         activeSlug: "help",
         pageCss,
         body,

package/dist/src/reskin/index-page.js

@@ -7,7 +7,7 @@ export function renderReskinIndex() {
         const status = p.done
             ? `<span class="rk-pill rk-pill-green">✓ Ported</span>`
             : `<span class="rk-pill">In progress</span>`;
-        const href = p.done ? `/reskin/${p.slug}` : `/reskin/${p.slug}`;
+        const href = `/${p.slug}`;
         return `<a class="rk-card rk-card-hover rk-idx-card" href="${href}">
       <div class="rk-spread">
         <span class="rk-tile rk-tile-lg rk-tile-gold rk-idx-mark">${p.label.charAt(0)}</span>