`);
L.push("");
}
// ───────── DEV QUOTE ─────────
// Plain centered quote — no decorative frame (the service's own border
// clips on tall quotes, so we render the quote borderless).
if (a.quote) {
L.push("### 💭 Dev Quote");
L.push("");
L.push(`
Enter your GitHub username to start — your README preview appears here, live.
`;
return;
}
if (window.marked) {
rendered.innerHTML = marked.parse(md);
// tag badge paragraphs for spacing
rendered.querySelectorAll("p, h3").forEach((p) => {
if (p.querySelector('img[src*="shields.io"]')) p.classList.add("md-badges");
});
// external widget images can 404 / cold-start — retry once, then show a
// tidy placeholder (these services rate-limit their public demo instances,
// but the widget still renders on the user's real GitHub profile).
rendered.querySelectorAll('img[src*="vercel.app"], img[src*="herokuapp.com"], img[src*="demolab.com"], img[src*="komarev.com"], img[src*="githubusercontent.com"]').forEach((img) => {
img.referrerPolicy = "no-referrer";
let retried = false;
img.addEventListener("error", () => {
if (!retried) {
retried = true;
let base = img.src.split(/[?&]_retry=/)[0];
// if a stats card on our own instance is down, fall back to the
// public github-readme-stats service before giving up.
if (base.includes("github-readme-stats-five-sigma-99.vercel.app")) {
base = base.replace("github-readme-stats-five-sigma-99.vercel.app", "github-readme-stats.vercel.app");
}
const sep = base.includes("?") ? "&" : "?";
setTimeout(() => { img.src = base + sep + "_retry=" + Date.now(); }, 1200);
return;
}
// give up: swap for a labeled placeholder
const label = img.alt || "widget";
const ph = document.createElement("span");
ph.className = "widget-fallback";
ph.innerHTML =
'' +
'' + escapeHtml(label) + 'Renders on your live profile';
if (img.parentNode) img.parentNode.replaceChild(ph, img);
});
});
// dev quote — click to shuffle a fresh one in the preview
const quote = rendered.querySelector('img[src*="quotes-github-readme"]');
if (quote) {
const wrap = quote.closest("p") || quote.parentElement;
if (wrap && !(wrap.nextElementSibling && wrap.nextElementSibling.classList.contains("quote-refresh"))) {
quote.style.cursor = "pointer";
quote.title = "Click for a new quote";
const btn = document.createElement("button");
btn.className = "quote-refresh";
btn.type = "button";
btn.innerHTML = ' New quote';
const shuffle = () => { const base = quote.src.split("&_r=")[0]; quote.src = base + "&_r=" + Date.now(); };
quote.addEventListener("click", shuffle);
btn.addEventListener("click", shuffle);
wrap.insertAdjacentElement("afterend", btn);
}
}
} else {
rendered.innerHTML = "
" + escapeHtml(md) + "
";
}
}
// ─── preview tabs ───
function setPreviewMode(mode) {
previewMode = mode;
document.getElementById("tabPreview").classList.toggle("on", mode === "preview");
document.getElementById("tabRaw").classList.toggle("on", mode === "raw");
document.getElementById("previewRendered").hidden = mode !== "preview";
document.getElementById("previewRaw").hidden = mode !== "raw";
}
// ─── actions ───
function flash(msg) {
const old = document.querySelector(".toast");
if (old) old.remove();
const t = document.createElement("div");
t.className = "toast";
t.innerHTML = `${msg}`;
document.body.appendChild(t);
setTimeout(() => t.remove(), 2200);
}
function copyMd() {
navigator.clipboard.writeText(generate()).then(() => flash("Markdown copied to clipboard")).catch(() => flash("Copy failed — select the Markdown tab"));
}
function downloadMd() {
const blob = new Blob([generate()], { type: "text/markdown" });
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "README.md";
a.click();
URL.revokeObjectURL(a.href);
flash("README.md downloaded");
}
function resetAll() {
if (!confirm("Clear all fields and start over?")) return;
doReset();
flash("Cleared");
}
function doReset() {
const accent = state.accent;
state = defaultState();
state.accent = accent; // keep chosen theme
persist();
document.querySelectorAll("[data-key]").forEach((i) => (i.value = ""));
document.querySelectorAll("#socials input").forEach((i) => (i.value = ""));
const gEl = document.getElementById("f_greeting"); if (gEl) gEl.value = state.greeting;
buildCatalog(); buildSocials(); buildAboutFields(); buildAddons(); buildHeadlineColors();
goStep(0); render();
}
// ─── finish view (in the left pane) ───
function showFinish() {
const u = (state.username || "your-username").trim();
document.getElementById("finishUser").textContent = u;
document.getElementById("finishRepo").textContent = u;
document.getElementById("wizardView").style.display = "none";
document.getElementById("finishView").classList.add("show");
const pane = document.querySelector(".pane-form");
if (pane) pane.scrollTo({ top: 0 });
}
function closeFinish() {
document.getElementById("finishView").classList.remove("show");
document.getElementById("wizardView").style.display = "";
}
function createAnother() {
closeFinish();
if (confirm("Start a fresh profile? This clears the current one.")) { doReset(); flash("New profile started"); }
}
async function shareProfile() {
const md = generate();
if (navigator.share) {
try { await navigator.share({ title: "My GitHub profile README", text: md }); return; } catch (e) {}
}
try { await navigator.clipboard.writeText(md); flash("README copied — paste it anywhere to share"); }
catch (e) { flash("Select the Markdown tab to copy"); }
}
function toggleMobilePreview(force) {
const on = force === true ? true : !document.body.classList.contains("show-preview");
document.body.classList.toggle("show-preview", on);
document.getElementById("mobilePreviewBtn").innerHTML = on
? ' Edit'
: ' Preview';
}
// ─── wire up DOM events (no inline handlers — CSP-friendly) ───
function on(id, evt, fn) { const el = document.getElementById(id); if (el) el.addEventListener(evt, fn); }
function wireEvents() {
on("mobilePreviewBtn", "click", () => toggleMobilePreview());
on("paletteBtn", "click", () => togglePalette());
on("customColor", "input", (e) => setAccent(e.target.value));
on("themeBtn", "click", toggleTheme);
on("resetBtn", "click", resetAll);
on("backBtn", "click", prev);
on("nextBtn", "click", next);
on("tabPreview", "click", () => setPreviewMode("preview"));
on("tabRaw", "click", () => setPreviewMode("raw"));
on("copyBtn", "click", copyMd);
on("downloadBtn", "click", downloadMd);
on("finishDownloadBtn", "click", downloadMd);
on("finishCopyBtn", "click", copyMd);
on("finishShareBtn", "click", shareProfile);
on("finishBackBtn", "click", closeFinish);
on("finishAnotherBtn", "click", createAnother);
// hero: greeting text + animate toggle
const g = document.getElementById("f_greeting");
if (g) { g.value = state.greeting == null ? "Hello! I'm" : state.greeting; g.addEventListener("input", () => { state.greeting = g.value; persist(); render(); }); }
buildHeadlineColors();
}
// swatches to pick the (separate) color for the moving headline lines
const HL_COLORS = ["#a371f7", "#2f81f7", "#f778ba", "#3fb950", "#e3b341", "#ff7b72", "#56d4dd", "#ff9bce"];
function buildHeadlineColors() {
const wrap = document.getElementById("hlSwatches");
if (!wrap) return;
wrap.innerHTML = "";
HL_COLORS.forEach((c) => {
const b = document.createElement("button");
b.type = "button";
b.className = "hl-swatch" + (String(state.headlineColor).toLowerCase() === c ? " on" : "");
b.style.background = c;
b.style.color = c;
b.title = c;
b.innerHTML = '';
b.addEventListener("click", () => { state.headlineColor = c; buildHeadlineColors(); persist(); render(); });
wrap.appendChild(b);
});
}
// ─── init ───
if (window.marked) marked.setOptions({ breaks: true, gfm: true });
wireEvents();
buildStepper();
bindInputs();
buildAboutFields();
buildCatalog();
buildSocials();
buildAddons();
buildPalette();
applyThemeIcon();
setAccent(state.accent || "#2ea043");
goStep(0);
render();
}-${cfg.color}?style=${s.badgeStyle}&logo=${cfg.logo}&logoColor=white){kind=icon}
`);
});
if (socialBadges.length) {
L.push("### 🔗 Connect With Me");
L.push("");
L.push(`