https://palette.site/blog/_nuxt/CU_11Ftz.js

1import R from"./ChX3_gXn.js";import W from"./7R3vMy26.js";import{_ as G,a as X,S as K}from"./Bo7URr4v.js";import{u as z,e as Q,f as Y,g as O,h as tt,i as et,j as st,o as _,w as ot,k as at,a as t,d as h,t as f,b as D,l as S,c as y,F as rt,r as it,m as w}from"./Byk9FG4S.js";import{u as H,q as nt}from"./DO5jqPmL.js";import"./C8QA4AeU.js";import"./C-v3KzvZ.js";import"./Dnd51l0P.js";import"./BFe-Dt4y.js";import"./DOnkgHy-.js";import"./DlAUqK2U.js";function lt(r,a){const{title:i,titleTemplate:n,...e}=r;return z({title:i,titleTemplate:n,_flatMeta:e},{...a,transform(o){const u=Q({...o._flatMeta});return delete o._flatMeta,{...o,meta:u}}})}const ct={class:"blog-container"},dt={class:"header article"},pt={class:"article-header-links-box"},mt={class:"article"},ut=["src","alt"],gt={class:"fade-in"},ht={class:"art-date-read"},ft=["datetime"],_t={key:0,class:"related-posts"},yt={class:"related-posts__list"},bt=["href"],Ct=["src","alt"],kt={class:"related-posts__date"},vt={class:"related-posts__item-title"},xt={key:1,class:"related-posts__description"},St={async mounted(){document.addEventListener("click",this.handleTdClick),document.querySelectorAll("table").forEach(r=>{const a=r.querySelectorAll("td").length;r.style.setProperty("--td-count",a),r.querySelectorAll("td").forEach(i=>{const n=i.style.backgroundColor;if(n){const e=this.rgbToHex(n),o=document.createElement("span");o.textContent=e,o.style.color=this.getContrastColor(e),i.appendChild(o)}})})},beforeUnmount(){document.removeEventListener("click",this.handleTdClick)},methods:{handleTdClick(r){const a=r.target.tagName==="SPAN"?r.target.parentElement:r.target;if(a.tagName==="TD"){const i=a.style.backgroundColor;if(i){const n=this.rgbToHex(i);navigator.clipboard.writeText(n).then(()=>{const e=document.createElement("div");e.textContent="Color copied to clipboard!",e.style.position="fixed",e.style.top="20px",e.style.left="50%",e.style.transform="translateX(-50%)",e.style.padding="10px 20px",e.style.background=n,e.style.color=this.getContrastColor(n),e.style.borderRadius="8px",e.style.opacity="0",e.style.transition="all 0.3s ease-in-out",document.body.appendChild(e),e.offsetHeight,e.style.opacity="1",setTimeout(()=>{e.style.opacity="0",setTimeout(()=>e.remove(),300)},1700)}).catch(e=>console.error("Failed to copy color:",e))}}},rgbToHex(r){const a=r.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);if(!a)return r;const i=parseInt(a[1]),n=parseInt(a[2]),e=parseInt(a[3]);return"#"+((1<<24)+(i<<16)+(n<<8)+e).toString(16).slice(1)},getContrastColor(r){if(!r.startsWith("#"))return"#FFFFFF";const a=parseInt(r.slice(1,3),16),i=parseInt(r.slice(3,5),16),n=parseInt(r.slice(5,7),16);return(.299*a+.587*i+.114*n)/255>.5?"#000000":"#FFFFFF"}}},Nt=Object.assign(St,{__name:"[...slug]",async setup(r){var L,T,M,$,A,I,P,E,j,N,B;let a,i;const n=Y(),e=Array.isArray(n.params.slug)?n.params.slug.filter(Boolean).join("/"):n.params.slug,{data:o}=([a,i]=O(()=>H(`content-${e}`,()=>nt(e).findOne())),a=await a,i(),a);if(!o.value)throw tt({statusCode:404,statusMessage:"Article not found",fatal:!0});const u="https://palette.site",g=`${u}/blog/${e}/`,V=et(()=>{var l;if(!((l=o.value)!=null&&l.title))return"";const c=o.value.title,s=60;if(c.length<=s)return c;const d=c.substring(0,s),m=d.lastIndexOf(" ");return(m>0?d.substring(0,m):d)+"..."}),q=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=c=>{if(!c)return;if(/^\d{4}-\d{2}-\d{2}/.test(c))return c.slice(0,10);const s=String(c).trim().match(/^(\d{1,2})\s+([A-Za-z]{3,})\s+(\d{4})$/);if(s){const[,d,m,l]=s,p=q.indexOf(m.slice(0,3));if(p>=0)return`${l}-${String(p+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`}},b=(()=>{var c;if((c=o.value)!=null&&c.image){const s=o.value.image;return s.startsWith("http")?s:`${u}${s}`}return""})();lt({title:V,ogTitle:((L=o.value)==null?void 0:L.title)||"",description:((T=o.value)==null?void 0:T.description)||"",ogDescription:((M=o.value)==null?void 0:M.description)||"",ogImage:b,ogType:"article",ogUrl:g,ogSiteName:"Site Palette",ogLocale:"en_US",twitterCard:"summary_large_image",twitterTitle:(($=o.value)==null?void 0:$.t

1itle)||"",twitterDescription:((A=o.value)==null?void 0:A.description)||"",twitterImage:b,author:"Site Palette"});const F=k((I=o.value)==null?void 0:I.date),J=k((P=o.value)==null?void 0:P.updated)||F,U={"@context":"https://schema.org","@type":"BlogPosting",headline:((E=o.value)==null?void 0:E.title)||"",description:((j=o.value)==null?void 0:j.description)||"",image:b?[b]:void 0,datePublished:F,dateModified:J,author:{"@type":"Organization",name:"Site Palette",url:u,sameAs:["https://chromewebstore.google.com/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh","https://addons.mozilla.org/addon/site-palette","https://apps.apple.com/us/app/site-palette/id6451384418"]},publisher:{"@type":"Organization",name:"Site Palette",url:u,sameAs:["https://chromewebstore.google.com/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh","https://addons.mozilla.org/addon/site-palette","https://apps.apple.com/us/app/site-palette/id6451384418"],logo:{"@type":"ImageObject",url:`${u}/logo.svg`}},mainEntityOfPage:{"@type":"WebPage","@id":g},url:g},Z={"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:`${u}/`},{"@type":"ListItem",position:2,name:"Blog",item:`${u}/blog/`},{"@type":"ListItem",position:3,name:((N=o.value)==null?void 0:N.title)||"",item:g}]};z({htmlAttrs:{lang:"en"},link:[{rel:"preload",as:"image",href:(B=o.value)==null?void 0:B.image,fetchpriority:"high"},{rel:"canonical",href:g},{rel:"alternate",hreflang:"en",href:g},{rel:"alternate",hreflang:"en-GB",href:g},{rel:"alternate",hreflang:"x-default",href:g}],script:[{type:"application/ld+json",innerHTML:JSON.stringify(U)},{type:"application/ld+json",innerHTML:JSON.stringify(Z)}]});const{data:v}=([a,i]=O(()=>H(`related-${e}`,async()=>{try{const s=at().blogPosts,d=s.findIndex(x=>x.url===e);if(d===-1)return[];const m=[],l=s.length;d>0&&m.push(s[d-1]),d<l-1&&m.push(s[d+1]);const p=[2,-2,3];for(const x of p){const C=d+x;if(C>=0&&C<l&&!m.includes(s[C])&&(m.push(s[C]),m.length>=4))break}return m}catch(c){return console.error("Error loading related posts:",c),[]}})),a=await a,i(),a);return(c,s)=>{const d=R,m=W;return _(),st(m,{head:!1},{default:ot(({doc:l})=>[t("div",ct,[t("header",dt,[s[3]||(s[3]=t("a",{class:"logo-link",href:"/","aria-label":"link to the main page"},[t("img",{class:"logo-dark",src:G,alt:"Logo"}),t("img",{class:"logo-light",src:X,alt:"Logo"})],-1)),t("div",pt,[t("span",null,[s[0]||(s[0]=t("a",{href:"/"},"Home",-1)),s[1]||(s[1]=h(" / ")),s[2]||(s[2]=t("a",{href:"/blog/"},"Blog",-1)),h(" / "+f(l.title),1)])])]),t("main",null,[t("article",mt,[t("img",{src:l.image,alt:l.title,width:"1344",height:"768",loading:"eager",fetchpriority:"high",decoding:"async"},null,8,ut),t("div",gt,[t("h1",null,f(l.title),1),t("span",ht,[t("time",{datetime:k(l.date)},f(l.date),9,ft),h(" · "+f(l.read),1)]),D(d,{value:l},null,8,["value"])])]),s[5]||(s[5]=t("aside",{class:"post-cta"},[t("h2",{class:"post-cta__title"},"Extract your own color palette"),t("p",{class:"post-cta__lead"}," Site Palette is a free browser extension for Chrome, Firefox and Safari that pulls comprehensive color schemes from any website in seconds — the same tool used to study the palettes featured on this blog. "),t("p",{class:"post-cta__actions"},[t("a",{class:"post-cta__primary",href:"https://chromewebstore.google.com/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh",target:"_blank",rel:"noopener noreferrer"},[t("svg",{class:"post-cta__primary-icon",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[t("path",{d:"M8.7138 11.9998C8.7138 13.8162 10.1833 15.2858 11.9997 15.2858C13.8161 15.2858 15.2857 13.8162 15.2857 11.9998C15.2857 10.1834 13.8161 8.71388 11.9997 8.71388C10.1833 8.71388 8.7138 10.1811 8.7138 11.9998ZM21.0935 8.49357L15.6021 8.77716C17.0927 10.5186 17.1161 13.0311 15.8622 14.9576L11.456 21.7358C13.2841 21.8342 15.1685 21.4334 16.8747 20.442C21.0935 18.0045 22.8044 12.8928 21.0935 8.49357V8.49357ZM7.50677 13.8725L3.8388 6.65841C2.79992 8.24598 2.2476 10.1025 2.24974 11.9998C2.24974 16.8748 5.81927 20.9131 10.4857 21.6279L12.9911 16.7201C10.7271 17.1467 8.54036 15.9045 7.50677 13.8725V13.8725ZM12.6279 7.18107L20.6997 7.60529C19.8747 5.96935 18.5763 4.54669 16.8701 3.55529C15.3255 2.66232 

113.6286 2.2381 11.9646 2.24982C9.09349 2.26154 6.28802 3.54357 4.41536 5.87091L7.42005 10.4858C8.17005 8.33185 10.3451 7.04747 12.6279 7.18107Z",fill:"#FFFFFF"})]),t("span",{class:"post-cta__primary-text"},"Get for Chrome")]),t("a",{class:"post-cta__secondary",href:"/"},"Learn more")]),t("p",{class:"post-cta__compare"},[h(" Comparing tools? See how Site Palette stacks up against "),t("a",{class:"post-cta__compare-link",href:"/vs-color"},"Color Palette"),h(", "),t("a",{class:"post-cta__compare-link",href:"/vs-extract"},"Extract Colors DevTool"),h(", and "),t("a",{class:"post-cta__compare-link",href:"/vs-website"},"Website Color Palette"),h(". ")])],-1)),S(v)&&S(v).length>0?(_(),y("section",_t,[s[4]||(s[4]=t("h2",{class:"related-posts__title"},"More posts",-1)),t("div",yt,[(_(!0),y(rt,null,it(S(v),p=>(_(),y("a",{key:p.url,href:`/blog/${p.url}/`,class:"related-posts__item"},[p.image?(_(),y("img",{key:0,src:`/blog/images/${p.image}`,alt:p.title,class:"related-posts__image",loading:"lazy"},null,8,Ct)):w("",!0),t("span",kt,f(p.date),1),t("p",vt,f(p.title),1),p.description?(_(),y("p",xt,f(p.description),1)):w("",!0)],8,bt))),128))])])):w("",!0)])]),D(K)]),_:1})}}});

1export{Nt as default};