@nuxt/devtools/dist/client/_nuxt/DNiICKty.js

<a href="https://devtools.nuxt.com"><img width="1200" alt="Nuxt DevTools" src="https://github-production-user-asset-6210df.s3.amazonaws.com/904724/261577617-a10567bd-ad33-48cc-9bda-9e37dbe1929f.png"></a> <br>

import{d as N,a as C,aT as oe,e as ne,aa as G,r as I,f as t,h as A,j as h,p as y,o,k as e,m as a,n as B,D as O,t as u,F as S,i as m,v as $,ar as H,_ as U,a7 as R,aU as J,aV as se,aW as ae,aX as re,q as ie,aY as le,aZ as ce,a_ as de,b as pe,a$ as me,b0 as ue,b1 as ge,b2 as E,aA as he,a0 as _e,l as fe,ac as ve,G as V,V as be}from"./Bysyzw-g.js";import{_ as we}from"./Ci0JrwP0.js";import{_ as P}from"./DxQMSSvi.js";import{_ as q}from"./C6_B1_1h.js";import{_ as xe}from"./CdlRa3-_.js";import{_ as ye}from"./WFxqX3Wd.js";import"./CXTghDHT.js";import"./DK4YETzW.js";const K=[{name:"title",suggestion:"required",head:{title:"[title]"},seoMeta:{title:"[title]"},docs:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title",description:"A concise and descriptive title for the browser that accurately summarizes the content of the page."},{name:"description",suggestion:"required",head:{meta:[{name:"description",content:"[description]"}]},seoMeta:{description:"[description]"},description:"A one to two sentence summary for search engines that includes relevant keywords to improve visibility in search results."},{name:"icon",suggestion:"recommended",head:{link:[{rel:"icon",type:"image/png",href:"/favicon.png"}]},description:"A small image that appears in the browser tab and bookmark menu to help users easily identify the page."},{name:"lang",suggestion:"recommended",head:{htmlAttrs:{lang:"en"}},description:"The primary language of the page to help search engines and browsers understand the content."},{name:"og:title",suggestion:"recommended",head:{meta:[{property:"og:title",content:"[og:title]"}]},seoMeta:{ogTitle:"[og:title]"},docs:"https://ogp.me/#metadata",description:"A title for the link preview used by social media platforms."},{name:"og:description",suggestion:"recommended",head:{meta:[{property:"og:description",content:"[og:description]"}]},seoMeta:{ogDescription:"[og:description]"},docs:"https://ogp.me/#metadata",description:"A description for the link preview used by social media platforms."},{name:"og:image",suggestion:"recommended",head:{meta:[{property:"og:image",content:"[og:image]"}]},seoMeta:{ogImage:"[og:image]"},docs:"https://ogp.me/#metadata",description:"An image for the link preview used by social media platforms."},{name:"og:url",suggestion:"recommended",head:{meta:[{property:"og:url",content:"[og:url]"}]},seoMeta:{ogUrl:"[og:url]"},docs:"https://ogp.me/#metadata",description:"A canonical URL for the link preview used to specify the preferred URL to display in search engine results and social media previews when multiple URLs may point to the same page."},{name:"twitter:title",suggestion:"optional",head:{meta:[{name:"twitter:title",content:"[twitter:title]"}]},seoMeta:{twitterTitle:"[twitter:title]"},docs:"https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards",description:"A title for the Twitter card used to provide a preview of the content shared on the page."},{name:"twitter:description",suggestion:"optional",head:{meta:[{name:"twitter:description",content:"[twitter:description]"}]},seoMeta:{twitterDescription:"[twitter:description]"},docs:"https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards",description:"A description for the Twitter card used to provide a preview of the content shared on the page."},{name:"twitter:image",suggestion:"optional",head:{meta:[{name:"twitter:image",content:"[twitter:image]"}]},seoMeta:{twitterImage:"[twitter:image]"},docs:"https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards",description:"An image for the Twitter card used to provide a preview of the content shared on the page."},{name:"twitter:card",suggestion:"optional",head:{meta:[{name:"twitter:card",content:"summary"}]},seoMeta:{twitterCard:"summary"},docs:"https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards",description:"The type of Twitter card to use, which determines the type of card to display in link previews on Twitter."}],ke={flex:"~ wrap","mt--2":"","w-full":"","flex-none":""},$e=["onClick"],Te={key:0,"x-divider":""},Se={key:1,"x-divider":""},Ce={flex:"~ gap-1 items-center",class:"px2 pt2",lg:"px4 py2"},Ne={"w-full":"",p2:"",op75:""},Me={key:1,m4:"",flex:"~ col gap-2"},Oe={flex:"~ gap-1 wrap items-center"},Ae={key:1},Ie={flex:"~ gap-2",n:"sm primary",absolute:"","right-2":"","top-2":""},Be=N({__name:"OpenGraphMissingTabs",props:{tags:{},matchedRouteFilepath:{}},setup(v){const r=v,d=C(()=>K.filter(i=>!r.tags?.some(n=>n.name===i.name))),s=C(()=>{let i={};const n={};d.value.forEach(g=>{g.seoMeta?Object.assign(n,g.seoMeta):i=oe(i,g.head)});const w=[];if(Object.keys(n).length){const g=JSON.stringify(n,null,2).replace(/"([^"]+)":/g,"$1:").replace(/"/g,"'");w.push(`useSeoMeta(${g})`)}if(Object.keys(i).length){const g=JSON.stringify(i,null,2).replace(/"([^"]+)":/g,"$1:").replace(/"/g,"'");w.push(`useHead(${g})`)}return w.join(`

`)}),p=ne(),k=G(),b=["Missing Tags","Code Snippet"],_=I(b[0]);return(i,n)=>{const w=P,g=H,T=U,M=xe,L=q;return t(d).length?(o(),A(L,{key:0,text:"Missing Tags",description:`${t(d).length} missing tags`,icon:"carbon:warning-other","header-class":"text-orange op100! [[open]_&]:text-inherit",padding:!1},{default:h(()=>[e("div",ke,[(o(),a(S,null,B(b,(l,c)=>e("button",{key:c,px4:"",py2:"",border:"r t base",hover:"bg-active",class:O(l===t(_)?"":"border-b"),onClick:f=>_.value=l},[e("div",{class:O(l===t(_)?"":"op30"),capitalize:""},u(l),3)],10,$e)),64)),n[3]||(n[3]=e("div",{border:"b base","flex-auto":""},null,-1))]),t(_)===b[0]?(o(),A(g,{key:0,grid:"~ cols-[1fr] lg:cols-[max-content_1fr]",m4:"","items-center":"","justify-between":"","of-hidden":""},{default:h(()=>[(o(!0),a(S,null,B(t(d),(l,c)=>(o(),a(S,{key:c},[c?(o(),a("div",Te)):y("",!0),c?(o(),a("div",Se)):y("",!0),e("div",Ce,[n[4]||(n[4]=e("div",{"i-carbon-warning":"","text-orange":""},null,-1)),m(w,{"op-50":"",href:l.docs,target:"_blank",n:"orange"},{default:h(()=>[$(u(l.name),1)]),_:2},1032,["href"])]),e("div",Ne,u(l.description),1)],64))),128))]),_:1})):(o(),a("div",Me,[e("p",Oe,[m(T,{icon:"carbon-copy",n:"xs","px-2":"",onClick:n[0]||(n[0]=l=>t(p)(t(s),"open-graph-suggestion"))},{default:h(()=>n[5]||(n[5]=[$(" Copy ")])),_:1}),n[7]||(n[7]=$(" the following code snippet and paste it into your ")),i.matchedRouteFilepath?(o(),A(T,{key:0,icon:"carbon-launch",n:"xs","px-2":"",onClick:n[1]||(n[1]=l=>t(k)(i.matchedRouteFilepath))},{default:h(()=>n[6]||(n[6]=[$(" page component ")])),_:1})):(o(),a("span",Ae,"page component")),n[8]||(n[8]=$(" to full fill the missing tags. "))]),m(g,{relative:"","n-code-block":""},{default:h(()=>[m(M,{code:t(s),lang:"ts",lines:!1,"w-full":"","of-auto":"",p3:""},null,8,["code"]),e("div",Ie,[m(T,{icon:"carbon-copy",onClick:n[2]||(n[2]=l=>t(p)(t(s),"open-graph-suggestion"))},{default:h(()=>n[9]||(n[9]=[$(" Copy ")])),_:1})])]),_:1})]))]),_:1},8,["description"])):y("",!0)}}}),Re={class:"max-w-[524px] min-w-[524px] cursor-pointer bg-base"},Le={class:"break-words border border-base px-[12px] py-[10px] antialiased"},je={class:"overflow-hidden truncate whitespace-nowrap text-[12px] leading-[11px] uppercase op50"},De={class:"block h-[46px] max-h-[46px] border-separate select-none overflow-hidden break-words text-left",style:{"border-spacing":"0px"}},Fe={class:"mt-[3px] truncate pt-[2px] text-[16px] font-semibold leading-[20px]"},Ve={class:"mt-[3px] block h-[18px] max-h-[80px] border-separate select-none overflow-hidden truncate whitespace-nowrap break-words text-left text-[14px] leading-[20px] op50",style:{"-webkit-line-clamp":"1","border-spacing":"0px","-webkit-box-orient":"vertical"}},ze=N({__name:"SocialFacebook",props:{card:{}},setup(v){return(r,d)=>(o(),a("div",Re,[e("div",{class:"h-[274px] border border-b-0 border-base bg-cover bg-center bg-no-repeat",style:R({backgroundImage:`url(${JSON.stringify(r.card.image)})`})},null,4),e("div",Le,[e("div",je,u(r.card.url),1),e("div",De,[e("div",Fe,u(r.card.title),1),e("div",Ve,u(r.card.description),1)])])]))}}),Ee={class:"max-w-[438px] min-w-[438px] of-hidden border border-base rounded-[16px] bg-base -outline-offset-1",style:{"font-family":"TwitterChirp, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"}},Ge={class:"break-words border-base p-[0.75em] antialiased",flex:"~ col justify-center gap-[2px]"},He={class:"overflow-hidden truncate whitespace-nowrap text-[15px] leading-[20px] lowercase op50"},Ue={class:"m-0 truncate text-[15px] font-semibold leading-[20px]"},Je={class:"line-clamp-2 select-none overflow-hidden break-words text-left text-[15px] leading-[20px] op50"},Pe=N({__name:"SocialTwitter",props:{tags:{}},setup(v){const r=v,d=C(()=>J(r.tags,{title:[{tag:"title"}],image:[{tag:"meta",name:"twitter:image"},{tag:"meta",name:"og:image"}],imageAlt:[{tag:"meta",name:"twitter:image:alt"}],description:[{tag:"meta",name:"twitter:description"},{tag:"meta",name:"description"}],favicon:[{tag:"link",name:"icon"}]})),s=C(()=>d.value.image?r.tags.find(p=>p.tag==="meta"&&p.name==="twitter:card")?.value||"summary_large_image":"summary");return(p,k)=>(o(),a("div",Ee,[e("div",{class:O(["cursor-pointer overflow-hidden leading-[1.3em]",t(s)==="summary_large_image"?"":"flex"]),hover:"bg-[#88888805]"},[t(s)==="summary_large_image"?(o(),a("div",{key:0,class:"h-[220px] border-b border-base bg-cover bg-center bg-no-repeat",style:R({backgroundImage:`url(${JSON.stringify(t(d).image)})`})},null,4)):(o(),a("div",{key:1,class:"h-[129px] w-[129px] flex-none border-r border-base bg-cover bg-center bg-no-repeat",style:R({backgroundImage:`url(${JSON.stringify(t(d).image)})`})},null,4)),e("div",Ge,[e("div",He,u(t(d).url),1),e("div",Ue,u(t(d).title),1),e("div",Je,u(t(d).description),1)])],2)]))}}),qe={class:"max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md bg-base"},Ke={class:"break-words p-[10px] antialiased"},We={class:"block h-auto max-h-[50px] border-separate select-none break-words text-left",style:{"border-spacing":"0px"}},Ye={class:"pb-[2px] text-[16px] font-semibold leading-[24px]"},Xe={class:"overflow-hidden truncate whitespace-nowrap text-xs font-normal uppercase op85"},Ze=N({__name:"SocialLinkedin",props:{card:{}},setup(v){return(r,d)=>(o(),a("div",qe,[e("div",{class:"h-[270px] border-b border-base bg-cover bg-center bg-no-repeat",style:R({backgroundImage:`url(${JSON.stringify(r.card.image)})`})},null,4),e("div",Ke,[e("div",We,[e("div",Ye,u(r.card.title),1),e("div",Xe,u(r.card.url),1)])])]))}}),Qe={class:"relative max-w-[420px] min-w-[420px] rounded-[16px] rounded-bl-0 py-[6px] leading-[18px] drop-shadow-sm drop-shadow-color-[#10232f26] bg-base"},et={class:"pl-[10px] pr-[8px]"},tt={class:"text-[#3390ec] leading-normal underline"},ot={class:"quote w-full flex"},nt={class:"flex flex-col gap-1"},st={key:0,class:"my-[3px] overflow-hidden rounded"},at=["src"],rt={class:"cursor-pointer text-sm text-[#3390ec]"},it={class:"cursor-pointer text-sm"},lt={class:"cursor-pointer text-sm"},ct={class:"flex justify-end text-xs text-[#707579]"},dt=N({__name:"SocialTelegram",props:{card:{}},setup(v){const r=se(),d=ae(re(),"HH:mm");return(s,p)=>(o(),a("div",Qe,[e("div",et,[e("div",tt,u(s.card.url),1),e("div",ot,[e("div",nt,[s.card.image?(o(),a("div",st,[e("img",{class:"h-full max-w-full w-full rounded object-cover",src:s.card.image},null,8,at)])):y("",!0),e("div",rt,[e("strong",null,u(t(r).hostname),1)]),e("div",it,[e("strong",null,u(s.card.title),1)]),e("div",lt,u(s.card.description),1)])]),e("div",ct,[e("span",null,u(t(d)),1)])]),p[0]||(p[0]=e("svg",{width:"11",height:"20",viewBox:"0 0 11 20",xmlns:"http://www.w3.org/2000/svg",class:"absolute bottom-0 ml-[-8.4px] translate-y-px text-white"},[e("g",{transform:"translate(9 -14)","fill-rule":"evenodd"},[e("path",{id:"corner-fill",d:"M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z",transform:"matrix(1 0 0 -1 0 49)",fill:"currentColor"})])],-1))]))}}),pt=ie(dt,[["__scopeId","data-v-6d584478"]]),mt={flex:"~ col","w-full":""},ut={flex:"~ wrap","w-full":"","flex-none":""},gt=["onClick"],ht={flex:"~ items-center justify-center","flex-auto":"",p4:"","n-panel-grids":""},_t={key:0},ft={key:1},vt={key:2},bt={key:3},wt=N({__name:"SocialPreviewGroup",props:{tags:{}},setup(v){const r=v,d=["twitter","facebook","linkedin","telegram"],s=le("nuxt-devtools-social-preview-tab",d[0]),p=C(()=>J(r.tags,{title:[{tag:"title"}],image:[{tag:"meta",name:"og:image"}],imageAlt:[{tag:"meta",name:"og:image:alt"}],description:[{tag:"meta",name:"og:description"},{tag:"meta",name:"description"}],favicon:[{tag:"link",name:"icon"}]}));return(k,b)=>{const _=ze,i=Pe,n=Ze,w=pt;return o(),a("div",mt,[e("div",ut,[(o(),a(S,null,B(d,(g,T)=>e("button",{key:T,px4:"",py2:"",border:"r base",hover:"bg-active",class:O(g===t(s)?"":"border-b"),onClick:M=>s.value=g},[e("div",{class:O(g===t(s)?"":"op30"),capitalize:""},u(g),3)],10,gt)),64)),b[0]||(b[0]=e("div",{border:"b base","flex-auto":""},null,-1))]),e("div",ht,[t(s)==="facebook"?(o(),a("div",_t,[m(_,{card:t(p)},null,8,["card"])])):t(s)==="twitter"?(o(),a("div",ft,[m(i,{tags:k.tags},null,8,["tags"])])):t(s)==="linkedin"?(o(),a("div",vt,[m(n,{card:t(p)},null,8,["card"])])):t(s)==="telegram"?(o(),a("div",bt,[m(w,{card:t(p)},null,8,["card"])])):y("",!0)])])}}}),xt={class:"markdown-body"},yt={__name:"open-graph",setup(v,{expose:r}){return r({frontmatter:{}}),(s,p)=>(o(),a("div",xt,p[0]||(p[0]=[ce('<h1>Open Graph</h1><p>Nuxt provides several different ways to manage your meta tags using <a href="https://unhead.harlanzw.com/" target="_blank" rel="noopener"><code>unhead</code></a>. Improve your Nuxt app’s SEO with powerful head config, composables and components.</p><p><a href="https://nuxt.com/docs/getting-started/seo-meta" target="_blank" rel="noopener">Learn more on the documentation</a></p><hr><p>You can also find how open graph specs are defined in:</p><ul><li><a href="https://ogp.me/" target="_blank" rel="noopener">The Open Graph protocol</a></li><li><a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started" target="_blank" rel="noopener">Twitter Cards</a></li></ul>',6)])))}},kt=yt,$t={grid:"~ lg:cols-2","h-full":"","w-full":"","of-hidden":""},Tt={"flex-auto":"","of-auto":""},St={"flex-none":"",flex:"~ gap2 items-center"},Ct={flex:"~ col"},Nt={key:0,"x-divider":""},Mt={key:1,"x-divider":""},Ot={mr2:"",px4:"",py2:""},Vt=N({__name:"open-graph",setup(v){const r=I(0),d=de(),s=pe(async()=>(r.value,(await d.value?.resolveTags()).map(c=>{const f=c.props||{};return c.tag==="htmlAttrs"&&f.lang?{tag:"html",name:"lang",value:f.lang}:f.charset?{tag:"meta",name:"charset",value:f.charset}:{tag:c.tag,name:f.property??f.name??f.rel??c.tag,value:f.content??f.href??c.textContent??JSON.stringify(f)}})),[]),p=I(!0);function k(){r.value+=1}const b=me(),_=ue(),i=I(""),n=ge(),w=G();async function g(){i.value!==_.value.path&&b.value.push(i.value||"/")}const T=C(()=>i.value===_.value.path?[]:b.value.resolve(i.value||"/").matched),M=C(()=>{const l=n.value.find(c=>c.path===_.value?.matched?.[0]?.path);return l?.file||l?.meta?.file});function L(l){return K.find(c=>c.name===l.name)?.docs}return E(_).toBeTruthy().then(l=>{i.value=l.path}),E(b).toBeTruthy().then(l=>{l.afterEach(()=>{he(()=>{i.value=_.value.path,setTimeout(k,200),setTimeout(k,800)})})}),(l,c)=>{const f=be,j=U,W=we,z=P,Y=H,X=q,Z=Be,Q=wt,ee=kt,te=ye,D=_e("tooltip");return o(),a(S,null,[e("div",$t,[e("div",Tt,[m(W,null,{search:h(()=>[m(f,{modelValue:t(i),"onUpdate:modelValue":c[0]||(c[0]=x=>fe(i)?i.value=x:null),placeholder:"Route",icon:"carbon-direction-right-01 scale-y--100",n:"primary","flex-auto":"","font-mono":"",class:O(["px-5 py-2",t(_)?.path===t(i)?"":t(T).length?"text-green":"text-orange"]),onKeydown:ve(g,["enter"])},null,8,["modelValue","class"])]),actions:h(()=>[e("div",St,[t(M)?V((o(),A(j,{key:0,"text-lg":"",border:!1,icon:"carbon:launch",title:"Open file in editor",onClick:c[1]||(c[1]=x=>t(w)(t(M)))},null,512)),[[D,"Open file in editor"]]):y("",!0),V(m(j,{"text-lg":"",border:!1,icon:"carbon:reset",title:"Refresh Data",onClick:k},null,512),[[D,"Refresh Data"]]),V(m(j,{"text-lg":"",border:!1,icon:t(p)?"carbon:side-panel-open":"carbon:open-panel-right",title:"Toggle Preview",onClick:c[2]||(c[2]=x=>p.value=!t(p))},null,8,["icon"]),[[D,"Toggle Preview"]])])]),_:1}),e("div",Ct,[m(X,{text:"Tags",icon:"carbon:tag-group"},{default:h(()=>[m(Y,{grid:"~ cols-[max-content_1fr]","items-center":"","justify-between":"","of-hidden":""},{default:h(()=>[(o(!0),a(S,null,B(t(s),(x,F)=>(o(),a(S,{key:F},[F?(o(),a("div",Nt)):y("",!0),F?(o(),a("div",Mt)):y("",!0),e("div",Ot,[m(z,{op50:"",href:L(x),target:"_blank",n:"primary"},{default:h(()=>[$(u(x.name),1)]),_:2},1032,["href"])]),m(z,{href:String(x.value).match(/^https?:\/\//)?x.value:void 0,target:"_blank","w-full":"",p2:"","font-mono":"",n:"primary"},{default:h(()=>[$(u(x.value),1)]),_:2},1032,["href"])],64))),128))]),_:1})]),_:1}),m(Z,{tags:t(s),"matched-route-filepath":t(M)},null,8,["tags","matched-route-filepath"])])]),t(p)&&t(s)?.length?(o(),A(Q,{key:0,tags:t(s),"flex-none":"","border-base":"","lt-lg":"border-t",lg:"h-full w-140 border-l"},null,8,["tags"])):y("",!0)]),m(te,null,{default:h(()=>[m(ee)]),_:1})],64)}}});export{Vt as default};