{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"quote-card","type":"registry:component","title":"Daily Quote Card","description":"A typographic quote that rotates from your own curated list.","author":"Notion Arena","categories":["visuals"],"tags":["widget","free","quote","daily","typography","culture"],"meta":{"kind":"widget","tier":"free","version":"1.1.0","updatedAt":"2026-08-11","notionPlan":"Free","emoji":"💬","delivery":["embed","html-block","download"],"capabilities":{"interactive":true,"offlineSafe":true,"persistsLocally":false,"writesToNotion":false,"needsNetwork":false},"embedUrl":"https://notionarena.vercel.app/embed/quote-card","fileUrl":"https://notionarena.vercel.app/widgets/quote-card.html","downloadUrl":"https://notionarena.vercel.app/api/widget/quote-card","height":210,"minHeight":170,"maxHeight":380,"params":[{"key":"quotes","label":"Quotes","type":"text","default":"","help":"Pipe-separated: Quote|Author||Quote|Author"},{"key":"accent","label":"Accent","type":"color","default":"#dfab01"},{"key":"serif","label":"Serif type","type":"boolean","default":true},{"key":"theme","label":"Theme","type":"select","default":"auto","options":[{"value":"auto","label":"Match Notion"},{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]},"files":[{"path":"widgets/quote-card.html","type":"registry:file","target":"notion/widgets/quote-card.html","content":"<!doctype html>\n<html lang=\"en\" data-theme=\"auto\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<title>Daily Quote</title>\n<style>\n:root{--bg:#ffffff;--fg:#37352f;--muted:#787774;--surface:#f7f7f5;--border:#e9e9e7;--accent:#dfab01;\n--serif:ui-serif,Georgia,\"Iowan Old Style\",\"Palatino Linotype\",Palatino,\"Times New Roman\",serif;\n--font:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif}\nhtml[data-theme=\"dark\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#2f2f2f}\n@media (prefers-color-scheme:dark){html[data-theme=\"auto\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#2f2f2f}}\n*{box-sizing:border-box}html,body{margin:0;height:100%}\nbody{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}\n.wrap{height:100%;display:flex;flex-direction:column;justify-content:center;padding:20px 24px;position:relative;gap:10px}\n.mark{font-family:var(--serif);font-size:52px;line-height:.6;color:var(--accent);opacity:.55;height:22px}\n.quote{font-family:var(--serif);font-size:19px;line-height:1.5;letter-spacing:-.005em;max-width:62ch}\n.quote.sans{font-family:var(--font);font-size:17px;font-weight:500}\n.by{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}\n.by .rule{width:22px;height:1.5px;background:var(--accent);border-radius:2px;opacity:.7}\n.by b{color:var(--fg);font-weight:600}\n.day{position:absolute;top:14px;right:16px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}\n.shuf{position:absolute;bottom:12px;right:14px;border:1px solid var(--border);background:var(--surface);color:var(--muted);\nfont:inherit;font-size:11px;font-weight:600;padding:4px 9px;border-radius:99px;cursor:pointer;opacity:0;transition:.15s}\n.wrap:hover .shuf,.shuf:focus-visible{opacity:1}\n.shuf:hover{color:var(--fg);border-color:color-mix(in oklab,var(--fg) 20%,var(--border))}\n.fade{animation:fade .45s ease both}\n@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\n@media (max-width:480px){.quote{font-size:16.5px}.wrap{padding:16px}}\n@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n</style>\n</head>\n<body>\n<div class=\"wrap\">\n  <div class=\"day\" id=\"day\"></div>\n  <div class=\"mark\">“</div>\n  <div class=\"quote\" id=\"quote\"></div>\n  <div class=\"by\"><span class=\"rule\"></span><b id=\"author\"></b><span id=\"src\"></span></div>\n  <button class=\"shuf\" id=\"shuf\" type=\"button\">Shuffle</button>\n</div>\n<script>\n(function(){\n  var cfgEl=document.getElementById('bk-config'),base={};\n  try{base=cfgEl?JSON.parse(cfgEl.textContent||'{}'):{};}catch(e){}\n  var q=new URLSearchParams(location.search),c={};for(var k in base)c[k]=base[k];\n  q.forEach(function(v,k){c[k]=v;});\n  function bool(k,d){var v=c[k];return v===undefined?d:(v===true||v==='true'||v==='1');}\n\n  var ACCENT=c.accent||'#dfab01';\n  if(c.theme)document.documentElement.setAttribute('data-theme',c.theme);\n  document.documentElement.style.setProperty('--accent',ACCENT);\n  if(!bool('serif',true))document.getElementById('quote').classList.add('sans');\n\n  var DEFAULT=[\n    [\"The best way out is always through.\",\"Robert Frost\"],\n    [\"Simplicity is the ultimate sophistication.\",\"Leonardo da Vinci\"],\n    [\"What we think, we become.\",\"Buddha\"],\n    [\"Well begun is half done.\",\"Aristotle\"],\n    [\"It always seems impossible until it's done.\",\"Nelson Mandela\"],\n    [\"The obstacle is the way.\",\"Marcus Aurelius\"],\n    [\"Action is the foundational key to all success.\",\"Pablo Picasso\"],\n    [\"First, solve the problem. Then, write the code.\",\"John Johnson\"],\n    [\"Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.\",\"Antoine de Saint-Exupéry\"],\n    [\"Discipline equals freedom.\",\"Jocko Willink\"],\n    [\"You do not rise to the level of your goals. You fall to the level of your systems.\",\"James Clear\"],\n    [\"The impediment to action advances action.\",\"Marcus Aurelius\"],\n    [\"Make it work, make it right, make it fast.\",\"Kent Beck\"],\n    [\"A year from now you may wish you had started today.\",\"Karen Lamb\"],\n    [\"Do the hard jobs first. The easy jobs will take care of themselves.\",\"Dale Carnegie\"],\n    [\"If you want to go fast, go alone. If you want to go far, go together.\",\"African proverb\"],\n    [\"Clarity precedes success.\",\"Unknown\"],\n    [\"Focus is a matter of deciding what things you're not going to do.\",\"John Carmack\"],\n    [\"The way to get started is to quit talking and begin doing.\",\"Walt Disney\"],\n    [\"Everything you've ever wanted is on the other side of fear.\",\"George Addair\"],\n    [\"We are what we repeatedly do. Excellence, then, is not an act, but a habit.\",\"Will Durant\"],\n    [\"Start where you are. Use what you have. Do what you can.\",\"Arthur Ashe\"],\n    [\"Fall seven times, stand up eight.\",\"Japanese proverb\"],\n    [\"A ship in harbour is safe, but that is not what ships are built for.\",\"John A. Shedd\"],\n    [\"Either you run the day, or the day runs you.\",\"Jim Rohn\"],\n    [\"There is no substitute for hard work.\",\"Thomas Edison\"],\n    [\"What gets measured gets managed.\",\"Peter Drucker\"],\n    [\"Never confuse motion with action.\",\"Benjamin Franklin\"],\n    [\"Small deeds done are better than great deeds planned.\",\"Peter Marshall\"],\n    [\"The secret of getting ahead is getting started.\",\"Mark Twain\"]\n  ];\n\n  var list=DEFAULT;\n  if(c.quotes){\n    try{\n      var raw=decodeURIComponent(String(c.quotes));\n      var parsed=raw.split('||').map(function(pair){\n        var parts=pair.split('|');\n        return {q:(parts[0]||'').trim(),a:(parts[1]||'').trim()};\n      }).filter(function(o){return o.q;});\n      if(parsed.length)list=parsed.map(function(o){return [o.q,o.a];});\n    }catch(e){}\n  }\n\n  var KEY='notion-arena.quote.offset';\n  var offset=0;\n  try{offset=parseInt(localStorage.getItem(KEY)||'0',10)||0;}catch(e){}\n\n  function dayIndex(){\n    var n=new Date(),s=new Date(n.getFullYear(),0,1);\n    return Math.floor((n-s)/864e5)+offset;\n  }\n  var elQ=document.getElementById('quote'),elA=document.getElementById('author'),\n      elD=document.getElementById('day'),elS=document.getElementById('src'),\n      elB=document.getElementById('shuf');\n  function render(){\n    var i=((dayIndex()%list.length)+list.length)%list.length;\n    var item=list[i];\n    elQ.textContent=item[0];\n    elA.textContent=item[1]||'';\n    elS.textContent=list.length>1?'· '+(i+1)+' of '+list.length:'';\n    elQ.classList.remove('fade');void elQ.offsetWidth;elQ.classList.add('fade');\n  }\n  elD.textContent=new Date().toLocaleDateString(undefined,{weekday:'long',month:'short',day:'numeric'});\n  elB.addEventListener('click',function(){offset++;try{localStorage.setItem(KEY,String(offset));}catch(e){}render();});\n  render();\n})();\n</script>\n</body>\n</html>\n"}]}