var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},t=(a,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of N(e))!u.call(a,c)&&c!==s&&l(a,c,{get:()=>e[c],enumerable:!(o=h(e,c))||o.enumerable});return a};var f=(a,e,s)=>(s=a!=null?m(k(a)):{},t(e||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>t(l({},"__esModule",{value:!0}),a);var i=y((T,r)=>{r.exports=_jsx_runtime});var v={};b(v,{default:()=>d,frontmatter:()=>g});var n=f(i()),g={title:"Claude Code: some impressive examples",date:"2025-08-15 21:00",updated:"2025-09-01",tags:["journal","featured","coding"],platforms:["Claude Code"],status:"published"};function p(a){let e={a:"a",code:"code",em:"em",h2:"h2",li:"li",ol:"ol",p:"p",path:"path",pre:"pre",section:"section",span:"span",strong:"strong",sup:"sup",svg:"svg",...a.components},{Prompt:s}=e;return s||x("Prompt",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["In May, with the release of the Claude 4 model series, Claude Code got a ",(0,n.jsx)(e.strong,{children:"lot"})," better."]}),(0,n.jsxs)(e.p,{children:["If you're a developer, and you've not tried it since then, you should.",(0,n.jsx)(e.sup,{children:(0,n.jsx)(e.a,{href:"#user-content-fn-1","aria-describedby":"footnote-label","data-footnote-ref":!0,id:"user-content-fnref-1",children:"1"})})]}),(0,n.jsx)(e.p,{children:"Below are some impressive one-shots."}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Update 2025-09-01:"})," with the release of GPT-5, ",(0,n.jsx)(e.a,{href:"https://x.com/nabeelqu/status/1962257605021028710",children:"some"})," ",(0,n.jsx)(e.a,{href:"https://x.com/VictorTaelin/status/1958543021324029980",children:"Twitter"})," ",(0,n.jsx)(e.a,{href:"https://x.com/francip/status/1960725855149449520",children:"vibes"})," ",(0,n.jsx)(e.a,{href:"https://x.com/ivanfioravanti/status/1959277577920536740",children:"suggest"})," that it's a better coding agent than Claude Code. My early impressions are consistent with this. The ",(0,n.jsx)(e.a,{href:"https://cursor.com/blog/gpt-5",children:"Cursor team are using GPT-5 internally"}),". For now, the Claude Code ",(0,n.jsx)(e.em,{children:"UI"})," remains better, and that matters."]}),(0,n.jsxs)(e.h2,{className:"content-header",id:"download-all-the-youtube-videos-from-my-music-blog",children:[(0,n.jsx)(e.a,{href:"#download-all-the-youtube-videos-from-my-music-blog","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.span,{className:"content-header-link",children:(0,n.jsxs)(e.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,n.jsx)(e.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,n.jsx)(e.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Download all the YouTube videos from my music blog"]}),(0,n.jsxs)(e.p,{children:["I collect great live performances on ",(0,n.jsx)(e.a,{href:"https://mtv.pjh.is",children:"my music blog"}),". Sometimes, the YouTube videos are taken down after I link to them. So I want to download everything for safekeeping."]}),(0,n.jsx)(e.p,{children:"My voice prompt:"}),(0,n.jsx)(s,{children:(0,n.jsx)(e.p,{children:"Alright, so I've got a folder full of Markdown files here, and what I want to do is write a script that will extract all of the YouTube URLs that are featured in those Markdown files. And then once it's done that, it should go through those URLs and download all of the videos. The first time we run it, it's going to download a lot of videos, and then after that, on subsequent runs, it should check to see which ones it's already downloaded and just get the new ones."})}),(0,n.jsx)(e.p,{children:"The successful one-shot:"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`\u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u2502 \u273B ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Welcome"})," to ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Claude"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Code"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),` \u2502 `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502 \u2502 `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u2502 ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"help ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," help",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"status ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` your current setup \u2502 `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502 \u2502 `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u2502 cwd",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Users"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"ph",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Dropbox"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Apps"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Blot"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"mtv",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"pjh"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"is"}),` \u2502 `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Alright"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," so ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ve got a folder full ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"})," files here",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," and what ",(0,n.jsx)(e.span,{className:"token constant",children:"I"})," want to ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"do"})," is write a script that will extract all ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"})," the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"}),` that are featured `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," those ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"})," files",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"And"})})," then once it",(0,n.jsx)(e.span,{className:"token string",children:"'s done that, it should go through those URLs and download all of the videos. The first time we run it, it'"}),`s going to `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" download a lot ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"})," videos",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," and then after that",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," on subsequent runs",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," it should check to see which ones it's already downloaded and just ",(0,n.jsx)(e.span,{className:"token keyword",children:"get"})," the ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsxs)(e.span,{className:"token class-name",children:["ones",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ll help you create a script to extract ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," your ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"})," files and download the videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})})," me ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"break"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"})," down into tasks using the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"TodoWrite"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" tool",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," existing ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," script to extract ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Implement"})," video download functionality ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` tracking `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"}),` logic to skip already downloaded videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," the script ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me start by searching ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," your ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"})," files to understand the format",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," existing ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," script to extract ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Implement"})," video download functionality ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` tracking `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"}),` logic to skip already downloaded videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," the script ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"youtube\\.com|youtu\\.be"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"glob"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"*.md"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"output_mode"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"content"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"461"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"})," can see the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})})," me mark ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"})," task ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," completed and move to creating the script",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," existing ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," script to extract ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Implement"})," video download functionality ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` tracking `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"}),` logic to skip already downloaded videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," the script ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ll create a ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Python"})," script that extracts ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," and downloads videos using yt",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token function",children:"dlp"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"a popular ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," downloader",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Write"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Wrote ",(0,n.jsx)(e.span,{className:"token number",children:"135"})," lines to download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" #",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"usr",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"bin",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),`env python3 `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` os `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` re `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` json `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"subprocess"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," pathlib ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"})}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," typing ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"Set"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Dict"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"List"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"__file__",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"parent"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token constant",children:"VIDEOS_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"downloaded_videos"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2026 ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),(0,n.jsx)(e.span,{className:"token number",children:"125"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"4"}),` additions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"73"})," all_urls ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"74"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"75"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," md_file ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"glob"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"*.md"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"76"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Skip"})," files that begin ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` underscore `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"77"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," md_file",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"startswith"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"_"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"78"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"continue"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"79"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"80"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"try"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"81"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token function",children:"open"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"md_file",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'r'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," encoding",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:"'utf-8'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"f"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"82"})," content ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," f",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"read"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," me mark ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"})," task ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," completed and make the script executable",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," existing ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," script to extract ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Implement"})," video download functionality ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` tracking `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"}),` logic to skip already downloaded videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," the script ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"chmod ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"x ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Users"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"ph",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Dropbox"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Apps"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Blot"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"mtv",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"pjh"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"is"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"\u23BF"})," \xA0",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"No"})," content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"do"})," a test run to show you how the script ",(0,n.jsx)(e.span,{className:"token function",children:"works"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"without actually downloading",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," just showing what it finds",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Write"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"test_youtube_extractor",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Wrote ",(0,n.jsx)(e.span,{className:"token number",children:"50"})," lines to test_youtube_extractor",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" #",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"usr",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"bin",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),`env python3 `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` os `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"re"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," pathlib ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"})}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," typing ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"Set"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"__file__",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"parent"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token constant",children:"YOUTUBE_URL_PATTERNS"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" r",(0,n.jsx)(e.span,{className:"token string",children:"'https?://(?:www\\.)?youtube\\.com/watch\\?v=([a-zA-Z0-9_-]+)'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2026 ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),(0,n.jsx)(e.span,{className:"token number",children:"40"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"python3 test_youtube_extractor",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," head ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0YouTube ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," found ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," markdown ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"excluding files starting ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," _",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2021"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"08"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"02"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0900"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Very"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"First"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Two"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Hours"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MTV"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"1981"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"md"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"s",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2026 ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),(0,n.jsx)(e.span,{className:"token number",children:"47"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me now clean up the test file and complete ",(0,n.jsx)(e.span,{className:"token keyword",children:"this"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"task"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"rm test_youtube_extractor",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"\u23BF"})," \xA0",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"No"})," content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," existing ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"URL"})," patterns ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," script to extract ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Implement"})," video download functionality ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` tracking `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"}),` logic to skip already downloaded videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," the script ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"}),` files `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Script"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Created"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ve created download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"})," that",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"1."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Scans"})," all ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Markdown"})," ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"excluding those starting ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," underscore",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Extracts"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," various ",(0,n.jsx)(e.span,{className:"token function",children:"formats"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"youtube",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"com"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"watch",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," youtu",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"be"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," embedded",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"3."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Downloads"})," videos using yt",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`dlp to a downloaded_videos folder `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"4."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Tracks"})," downloaded videos ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," downloaded_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"json"})," to avoid re",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`downloading `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"5."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Shows"}),` progress during downloads `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"To"})," use it",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"1."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"First"})," install yt",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"dlp",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" pip install yt",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`dlp `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Run"})," the script",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" python3 download_youtube_videos",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"py"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," script will",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," a downloaded_videos folder ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Download"})," all ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"videos"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"skipping those already downloaded",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Save"}),` a tracking file to remember what's been downloaded `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Show"}),` progress and summary statistics `]})]})}),(0,n.jsx)(e.p,{children:"The python script:"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment hashbang",children:"#!/usr/bin/env python3"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` os `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` re `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` json `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"subprocess"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," pathlib ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"})}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," typing ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"Set"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Dict"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"List"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"__file__",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"parent"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token constant",children:"VIDEOS_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"downloaded_videos"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token constant",children:"TRACKING_FILE"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"downloaded_videos.json"'}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token constant",children:"YOUTUBE_URL_PATTERNS"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" r",(0,n.jsx)(e.span,{className:"token string",children:"'https?://(?:www\\.)?youtube\\.com/watch\\?v=([a-zA-Z0-9_-]+)'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" r",(0,n.jsx)(e.span,{className:"token string",children:"'https?://(?:www\\.)?youtube\\.com/embed/([a-zA-Z0-9_-]+)'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" r",(0,n.jsx)(e.span,{className:"token string",children:"'https?://youtu\\.be/([a-zA-Z0-9_-]+)'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["def ",(0,n.jsx)(e.span,{className:"token function",children:"extract_youtube_urls"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"content",(0,n.jsx)(e.span,{className:"token operator",children:":"})," str",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"Set"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"str",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token string",children:'"Extract all YouTube URLs from content."'}),(0,n.jsx)(e.span,{className:"token string",children:'""'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" urls ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"set"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," pattern ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"YOUTUBE_URL_PATTERNS"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" matches ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," re",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"findall"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," match ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"matches"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Convert"})," all to standard youtube",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"com"}),` format `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" urls",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"add"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"https://www.youtube.com/watch?v={match}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"}),` urls `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["def ",(0,n.jsx)(e.span,{className:"token function",children:"load_tracking_data"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Dict"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"str",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," str",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token string",children:'"Load the tracking data of downloaded videos."'}),(0,n.jsx)(e.span,{className:"token string",children:'""'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"TRACKING_FILE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"exists"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token function",children:"open"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token constant",children:"TRACKING_FILE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'r'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"f"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," json",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"load"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["def ",(0,n.jsx)(e.span,{className:"token function",children:"save_tracking_data"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"tracking_data",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Dict"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"str",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," str",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token string",children:'"Save the tracking data of downloaded videos."'}),(0,n.jsx)(e.span,{className:"token string",children:'""'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token function",children:"open"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token constant",children:"TRACKING_FILE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'w'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"f"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" json",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"dump"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"tracking_data",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," f",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," indent",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token number",children:"2"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["def ",(0,n.jsx)(e.span,{className:"token function",children:"download_video"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"url",(0,n.jsx)(e.span,{className:"token operator",children:":"})," str",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"output_dir"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Path"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," bool",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token string",children:'"Download a video using yt-dlp."'}),(0,n.jsx)(e.span,{className:"token string",children:'""'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"try"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Use"})," yt",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`dlp to download the video `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"title",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),"s will be replaced ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` the video title `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ext",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),"s will be replaced ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` the video extension `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" cmd ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'yt-dlp'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'-f'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'bestvideo+bestaudio/best'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Download"})," best quality video ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` audio `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'--merge-output-format'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'mp4'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Merge"}),` to mp4 format `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'-o'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token function",children:"str"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"output_dir ",(0,n.jsx)(e.span,{className:"token operator",children:"/"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'%(title)s.%(ext)s'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'--no-playlist'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Only"})," download single video",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` not playlist `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'--write-info-json'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Save"}),` video metadata `]}),(0,n.jsx)(e.span,{className:"code-line",children:` url `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" result ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," subprocess",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"run"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"cmd",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," capture_output",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"True"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," text",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"True"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," result",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"returncode"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"=="})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"\u2713 Downloaded: {url}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"True"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"else"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"\u2717 Failed to download {url}: {result.stderr}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"False"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" except ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"FileNotFoundError"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"Error: yt-dlp not found. Please install it using: pip install yt-dlp"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"False"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" except ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Exception"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"e"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"\u2717 Error downloading {url}: {str(e)}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"False"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["def ",(0,n.jsx)(e.span,{className:"token function",children:"get_all_youtube_urls"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"List"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"tuple",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"str",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," str",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token string",children:'"Extract all YouTube URLs from markdown files."'}),(0,n.jsx)(e.span,{className:"token string",children:'""'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" all_urls ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," md_file ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"glob"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"*.md"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Skip"})," files that begin ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` underscore `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," md_file",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"startswith"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"_"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"continue"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"try"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token function",children:"open"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"md_file",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'r'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," encoding",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:"'utf-8'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"f"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" content ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," f",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"read"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" urls ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"extract_youtube_urls"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," url ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"urls"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" all_urls",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"append"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"url",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," md_file",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"name"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" except ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Exception"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"e"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Error reading {md_file}: {e}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"}),` all_urls `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["def ",(0,n.jsx)(e.span,{className:"token function",children:"main"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"YouTube Video Downloader for Markdown Files"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"="'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," videos directory ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"}),` it doesn't exist `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token constant",children:"VIDEOS_DIR"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"mkdir"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"exist_ok",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"True"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Load"}),` tracking data `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" tracking_data ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"load_tracking_data"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Get"})," all ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"YouTube"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"URLs"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"}),` markdown files `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"\\nScanning markdown files for YouTube URLs..."'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" all_urls ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"get_all_youtube_urls"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Found {len(all_urls)} YouTube URLs in total"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Filter"}),` out already downloaded videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" urls_to_download ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," url",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," source_file ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"all_urls"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," url not ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"tracking_data"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" urls_to_download",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"append"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"url",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," source_file",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," not urls_to_download",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"\\nAll videos are already downloaded!"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"\\n{len(urls_to_download)} new videos to download"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Download"}),` videos `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"\\nStarting downloads..."'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" successful_downloads ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," i",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"url",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," source_file",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token function",children:"enumerate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"urls_to_download",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"\\n[{i}/{len(urls_to_download)}] Downloading from {source_file}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token function",children:"download_video"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"url",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token constant",children:"VIDEOS_DIR"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" tracking_data",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"url",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="}),` source_file `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"save_tracking_data"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"tracking_data",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" successful_downloads ",(0,n.jsx)(e.span,{className:"token operator",children:"+="})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Summary"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"\\n"'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"="'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Download complete!"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Successfully downloaded: {successful_downloads}/{len(urls_to_download)} videos"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Total videos in library: {len(tracking_data)}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Videos saved to: {VIDEOS_DIR}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Clean"}),` up filenames by removing accents `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," successful_downloads ",(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"\\n"'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"="'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"Cleaning up filenames (removing accents)..."'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"try"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Import"}),` and run the accent removal script `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," remove_accents_from_filenames ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` process_directory `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"process_directory"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token constant",children:"VIDEOS_DIR"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" except ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"ImportError"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" # ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Fall"})," back to running ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," subprocess ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` fails `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"try"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" subprocess",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"run"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"sys",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"executable"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:'"remove_accents_from_filenames.py"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" cwd",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token constant",children:"MARKDOWN_DIR"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," check",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"True"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" except ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Exception"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"e"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"print"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"f",(0,n.jsx)(e.span,{className:"token string",children:'"Warning: Could not run accent removal: {e}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," __name__ ",(0,n.jsx)(e.span,{className:"token operator",children:"=="})," ",(0,n.jsx)(e.span,{className:"token string",children:'"__main__"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"}),` sys `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"main"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),(0,n.jsx)(e.p,{children:"Perfect!"}),(0,n.jsxs)(e.h2,{className:"content-header",id:"add-footnote-tooltips-to-this-blog",children:[(0,n.jsx)(e.a,{href:"#add-footnote-tooltips-to-this-blog","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.span,{className:"content-header-link",children:(0,n.jsxs)(e.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,n.jsx)(e.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,n.jsx)(e.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Add footnote tooltips to this blog"]}),(0,n.jsxs)(e.p,{children:["My prompt, which deliberately gave no guidance about the codebase: ",(0,n.jsx)(e.sup,{children:(0,n.jsx)(e.a,{href:"#user-content-fn-2","aria-describedby":"footnote-label","data-footnote-ref":!0,id:"user-content-fnref-2",children:"2"})})]}),(0,n.jsxs)(s,{children:[(0,n.jsx)(e.p,{children:"I'd like to add a tooltip feature to the footnotes. If I hover over the footnote number then I want to see a box that contains the footnote text hovering over the main text."}),(0,n.jsx)(e.p,{children:"(I still want the footnotes to be listed at the bottom of the page as well.)"})]}),(0,n.jsx)(e.p,{children:"The transcript:"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`\u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u2502 \u273B ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Welcome"})," to ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Claude"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Code"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),` \u2502 `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502 \u2502 `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u2502 ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"help ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," help",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"status ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` your current setup \u2502 `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502 \u2502 `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u2502 cwd",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Users"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"ph",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Documents"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"www",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token constant",children:"AI"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Wow"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"vercel",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`wow \u2502 `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'d like to add a tooltip feature to the footnotes",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"If"})})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),` hover over the `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" footnote number then ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),` want to see a box that contains the footnote text `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" hovering over the main text",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token constant",children:"I"})," still want the footnotes to be listed at the bottom ",(0,n.jsx)(e.span,{className:"token keyword",children:"of"})," the page ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" well",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ll help you add a tooltip feature to the footnotes",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})}),` me first explore `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" the codebase to understand how footnotes are currently implemented",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"footnote"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"4"})," ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Read"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Read ",(0,n.jsx)(e.span,{className:"token number",children:"100"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"footnote"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"path"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"css/tailwind.css"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"output_mode"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"content"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"8"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Read"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Read ",(0,n.jsx)(e.span,{className:"token number",children:"50"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," me check how footnotes are rendered ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," the ",(0,n.jsx)(e.span,{className:"token constant",children:"HTML"})," by looking ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" components that handle markdown rendering",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"MDXContent|MDXLayoutRenderer|markdown|remark"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"29"})," ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Read"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"contentlayer",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"config"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"ts"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Read ",(0,n.jsx)(e.span,{className:"token number",children:"276"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me check ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," any existing footnote handling ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"components"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"sup.*ref|footnote-ref|data-footnote-ref"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"2"})," ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me look ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"MDX"})," components or layouts",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"**/*{Layout,layout,MDX,mdx}*.{tsx,jsx,ts,js}"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"48"})," ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me check the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"})," file ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"}),` it likely contains the components `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" used ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," rendering markdown",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Read"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Read ",(0,n.jsx)(e.span,{className:"token number",children:"31"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," me check ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," there's a sample blog post ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` footnotes to `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" understand the ",(0,n.jsx)(e.span,{className:"token constant",children:"HTML"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"structure"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"\\[\\^\\d+\\]"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"path"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"data"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"6"})," ",(0,n.jsx)(e.span,{className:"token function",children:"files"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Search"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"pattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"\\[\\^\\d+\\]"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"path"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"data/journal/2025-08-14-claude-code-wow.md"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"output_mode"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"content"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"head_limit"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"20"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Found ",(0,n.jsx)(e.span,{className:"token number",children:"4"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"})," me create a component ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," the footnote tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ll need to",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"1."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," a client",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`side component that handles the tooltip display `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"})," it to the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),` component to handle hover interactions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"CSS"})," styles ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the tooltip appearance `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Integrate"})," the component into ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` a sample footnote `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),` component to handle hover interactions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"CSS"})," styles ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the tooltip appearance `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Integrate"})," the component into ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` a sample footnote `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Write"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Wrote ",(0,n.jsx)(e.span,{className:"token number",children:"119"})," lines to components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'use client'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useRef",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useState ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'react'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setTooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," useState",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"visible"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` boolean `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"content"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` string `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"x"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` number `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"y"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` number `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2026 ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),(0,n.jsx)(e.span,{className:"token number",children:"109"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),` component to handle hover interactions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"CSS"})," styles ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the tooltip appearance `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Integrate"})," the component into ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` a sample footnote `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"14"}),` additions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"350"})," @apply sr",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"only",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"351"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"352"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"353"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"/* Footnote tooltip styles */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"354"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"355"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"white dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"800"})," border border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"200"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"700"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"md",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"356"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," pointer",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"events",(0,n.jsx)(e.span,{className:"token operator",children:":"})," auto",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"357"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"358"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"359"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip p ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"360"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply m",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"0"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"700"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"300"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"361"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"362"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"363"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip a ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"364"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"primary",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"500"})," underline",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"365"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"366"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"367"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"368"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"369"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"data"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"footnote",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"backref ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"370"})," @apply no",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"underline",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"371"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"bottom",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"important",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),` component to handle hover interactions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"CSS"})," styles ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the tooltip appearance `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Integrate"})," the component into ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` a sample footnote `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"})," need to integrate the ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),` component into the page `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" layouts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})})," me check how the blog posts are rendered",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Read"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"layouts",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Read ",(0,n.jsx)(e.span,{className:"token number",children:"182"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"layouts",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated layouts",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` addition `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"10"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Platform"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@/components/Platform'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"11"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"siteMetadata"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@/data/siteMetadata'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"12"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ScrollTopAndComment"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:"'@/components/ScrollTopAndComment'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"13"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'@/components/FootnoteTooltip'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"14"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"15"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:"editUrl"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"path"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"siteMetadata",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"siteRepo"}),(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"/blob/main/data/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"path",(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"16"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function function-variable",children:"discussUrl"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"path"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"layouts",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated layouts",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` addition `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"37"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"38"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),'"mx',(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"auto max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"3xl px",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"0"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"sm"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"px",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"6"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"xl"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`5xl `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"xl"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"px",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),'"',(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"39"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ScrollTopAndComment"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"40"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"41"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"article",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"42"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'""'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"43"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"header className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"xl:pb-6"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Todos"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0\u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Create"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),` component to handle hover interactions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Add"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"CSS"})," styles ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the tooltip appearance `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2612 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Integrate"})," the component into ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXComponents"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2610 ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Test"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` a sample footnote `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me check ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," the server is running and test the footnote tooltip",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"cd ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Users"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"ph",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Documents"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"www",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token constant",children:"AI"}),"\\ ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Wow"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"vercel",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"wow ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," yarn dev",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Running ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," the ",(0,n.jsx)(e.span,{className:"token function",children:"background"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"down arrow to manage",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BashOutput"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Reading"})," shell output",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"\u23BF"})," \xA0",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"No"})," content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me wait a moment ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," the server to start",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"sleep ",(0,n.jsx)(e.span,{className:"token number",children:"5"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"\u23BF"})," \xA0",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"No"})," content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BashOutput"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Reading"})," shell output",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` \u23BF \xA0 `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \u2A2F ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Failed"}),` to start server `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"Error"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," listen ",(0,n.jsx)(e.span,{className:"token constant",children:"EADDRINUSE"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," address already ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," use ",(0,n.jsx)(e.span,{className:"token number",children:"127.0"}),(0,n.jsx)(e.span,{className:"token number",children:".0"}),(0,n.jsx)(e.span,{className:"token number",children:".1"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token number",children:"3101"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" at ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"unknown",(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token class-name known-class-name",children:"Error"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," listen ",(0,n.jsx)(e.span,{className:"token constant",children:"EADDRINUSE"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," address already ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," use ",(0,n.jsx)(e.span,{className:"token number",children:"127.0"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u2026 ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),(0,n.jsx)(e.span,{className:"token number",children:"7"})," ",(0,n.jsx)(e.span,{className:"token function",children:"lines"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"ctrl",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),"r to expand",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," server is already running",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})})," me check ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," it's working",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"curl ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"s http",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"localhost",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token number",children:"3101"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," head ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"n ",(0,n.jsx)(e.span,{className:"token number",children:"20"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token constant",children:"DOCTYPE"})," html",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"html lang",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"en-gb"'})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"class"}),(0,n.jsx)(e.span,{className:"token operator",children:"="}),'"__variable_bc0dcf scroll',(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`smooth `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Nothing"})," happens when ",(0,n.jsx)(e.span,{className:"token constant",children:"I"})," hover over the footnote",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token property-access",children:"\u23FA"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})," me debug the issue",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"First"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"}),` me check how footnotes are actually `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" rendered ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," the ",(0,n.jsx)(e.span,{className:"token constant",children:"HTML"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"curl ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"s http",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"localhost",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token number",children:"3101"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"journal",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"claude",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"code",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"wow ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," grep ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token constant",children:"A"})," ",(0,n.jsx)(e.span,{className:"token number",children:"5"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token constant",children:"B"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"5"})," ",(0,n.jsx)(e.span,{className:"token string",children:`'data-footnote-ref\\|sup.*href="#user-content-fn'`}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token constant",children:"DOCTYPE"})," html",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"html lang",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"en-gb"'})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"class"}),(0,n.jsx)(e.span,{className:"token operator",children:"="}),'"__variable_bc0dcf scroll',(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`smooth `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'">"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"21"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," target ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"target"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"HTMLElement"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"22"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"23"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if this is a footnote reference (sup with "}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" data",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"footnote",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," data",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"footnote",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"24"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tagName"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'SUP'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"25"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," link ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"querySelector"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'a'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"26"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"link",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"23"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if this is a footnote reference link"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"24"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tagName"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'A'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"25"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"26"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," footnoteId ",(0,n.jsx)(e.span,{className:"token operator",children:"="}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" link",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"getAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'href'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"replace"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'#'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"27"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"footnoteId",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," addition and ",(0,n.jsx)(e.span,{className:"token number",children:"2"}),` removals `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"22"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"23"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if this is a footnote reference link"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"24"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tagName"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'A'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"25"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"26"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," footnoteId ",(0,n.jsx)(e.span,{className:"token operator",children:"="}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," link",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"getAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'href'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"replace"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'#'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"25"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," footnoteId ",(0,n.jsx)(e.span,{className:"token operator",children:"="}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"getAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'href'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"replace"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'#'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"getAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'href'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"replace"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'#'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"26"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"footnoteId",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"27"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"28"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Find the corresponding footnote content"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"})," additions and ",(0,n.jsx)(e.span,{className:"token number",children:"2"}),` removals `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"49"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," target ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"target"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"HTMLElement"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"50"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," relatedTarget ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"relatedTarget"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"HTMLElement"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"51"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"52"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if we're leaving the footnote reference"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"53"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tagName"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'SUP'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"52"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if we're leaving the footnote reference link"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"53"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tagName"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'A'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," target",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"54"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if we're moving to the tooltip itself"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"55"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"tooltipRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"contains"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"56"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prev"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token operator spread",children:"..."}),"prev",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"visible"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," addition and ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` removal `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"63"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"64"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"// Check if we're leaving the tooltip"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"65"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"tooltipRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"contains"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"66"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),"tagName ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'SUP'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"66"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),"tagName ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'A'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"67"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prev"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token operator spread",children:"..."}),"prev",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"visible"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"68"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"69"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," addition and ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` removal `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"91"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," relatedTarget ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"relatedTarget"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"HTMLElement"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"92"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"93"})," ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"tooltipRef",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"current"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"contains"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"94"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),"tagName ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'SUP'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"94"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),"tagName ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'A'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," relatedTarget",(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token function property-access method",children:"hasAttribute"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'data-footnote-ref'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"95"})," ",(0,n.jsx)(e.span,{className:"token function",children:"setTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"prev"})," ",(0,n.jsx)(e.span,{className:"token operator arrow",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token operator spread",children:"..."}),"prev",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"visible"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"96"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"97"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"}),"'s check ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"if"})," the page needs to be refreshed",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"curl ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"s http",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"localhost",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token number",children:"3101"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"journal",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"claude",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"code",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"wow ",(0,n.jsx)(e.span,{className:"token number",children:"2"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"dev",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token keyword nil null",children:"null"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" grep ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"o ",(0,n.jsx)(e.span,{className:"token string",children:'"FootnoteTooltip"'})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," head ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` \u23BF \xA0FootnoteTooltip `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Good"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," component is loaded",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"}),` me test it by opening the browser `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"again"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"open http",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"localhost",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token number",children:"3101"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"journal",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"claude",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"code",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"wow",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function",children:"\u23BF"})," \xA0",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"No"})," content",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Try"})," hovering over the footnote number ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," the text now",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"If"})}),` it still `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" doesn",(0,n.jsx)(e.span,{className:"token string",children:"'t work, the issue might be that the footnote IDs don'"}),"t match",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Let"})}),` me `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" check the actual ",(0,n.jsx)(e.span,{className:"token constant",children:"ID"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"format"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bash"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"curl ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"s http",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"localhost",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token number",children:"3101"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"journal",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"claude",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"code",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"wow ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," grep ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token constant",children:"E"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:`'id="user-content-fn-[^"]*"|href="#user-content-fn[^"]*"'`})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," head ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"5"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"No"})})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"tell ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Claude"})," what to ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"do"})," differently",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"This"})," is working perfectly",(0,n.jsx)(e.span,{className:"token operator",children:"!"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Here"}),"'s how it looks",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Any"})}),` thoughts on how we `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" could make it look better",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Image"})," #",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Great"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," tooltip is working",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Looking"})})," at the screenshot",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),` can see a few `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" improvements we could make to enhance the appearance and usability",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"28"})," additions and ",(0,n.jsx)(e.span,{className:"token number",children:"3"}),` removals `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"352"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"353"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"/* Footnote tooltip styles */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"354"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"355"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," @apply bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"white dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"800"})," border border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"200"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"700"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"md",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"700"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"md",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"355"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"paper dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"800"})," border border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"300"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"xl p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"xl p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"356"})," pointer",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"events",(0,n.jsx)(e.span,{className:"token operator",children:":"})," auto",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"357"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," backdrop",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"filter",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"blur"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"10px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"358"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," background",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"rgba"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"255"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"252"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"240"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.98"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:`/* `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:" + semi-transparent paper color */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"359"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"360"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"361"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"dark"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"362"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," background",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"rgba"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"31"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"41"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"55"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.98"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:`/* `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token comment",children:` semi-transparent `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:" + dark bg */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"363"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"364"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"365"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip p ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"366"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," @apply m",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"0"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"700"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"300"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"366"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply m",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"0"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"800"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"200"})," leading",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"relaxed",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"367"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"368"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"369"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip a ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"370"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," @apply text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"primary",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"500"})," underline",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"370"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"primary",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"500"})," underline hover",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"primary",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"hover",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"primary",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"400"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"hover",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"primary",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"400"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"371"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"372"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"373"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"/* Add a small arrow pointing down */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"374"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"after ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"375"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," content",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"''"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"376"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," position",(0,n.jsx)(e.span,{className:"token operator",children:":"})," absolute",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"377"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," bottom",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"6px",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"378"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," left",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"379"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translateX"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"380"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," width",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"381"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," height",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"382"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"left",(0,n.jsx)(e.span,{className:"token operator",children:":"})," 6px solid transparent",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"383"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"right",(0,n.jsx)(e.span,{className:"token operator",children:":"})," 6px solid transparent",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"384"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"top",(0,n.jsx)(e.span,{className:"token operator",children:":"})," 6px solid ",(0,n.jsx)(e.span,{className:"token keyword",children:"var"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"--"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"paper",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"385"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," filter",(0,n.jsx)(e.span,{className:"token operator",children:":"})," drop",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token function",children:"shadow"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"0"})," 2px 2px ",(0,n.jsx)(e.span,{className:"token function",children:"rgba"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"386"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"387"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"388"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"dark"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"after ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"389"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"top",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"rgb"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"31"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"41"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"55"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"390"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"391"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"392"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"393"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"394"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"data"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"footnote",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"backref ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"395"})," @apply no",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"underline",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"396"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"bottom",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"important",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"let"}),"'s also add a smooth fade",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token keyword",children:"in"}),` animation and adjust the positioning `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"slightly"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"})," additions and ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` removal `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"107"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"position"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'fixed'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"108"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"left"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"x"}),(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"px"}),(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"109"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"top"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"y"}),(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"px"}),(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"110"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'translate(-50%, -100%) translateY(-8px)'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"110"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'translate(-50%, -100%) translateY(-12px)'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"111"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"zIndex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"9999"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"112"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," animation",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'fadeIn 0.2s ease-in-out'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"113"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"114"})," dangerouslySetInnerHTML",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"__html"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"content"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"115"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"12"}),` additions `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"389"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"top",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"rgb"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"31"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"41"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"55"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"390"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"391"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"392"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"/* Fade in animation for tooltip */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"393"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @keyframes fadeIn ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"394"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"395"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," opacity",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"396"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"100"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translateY"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"8px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"397"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"398"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," to ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"399"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," opacity",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"400"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"100"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translateY"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"12px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"401"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"402"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"403"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"404"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"405"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"406"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"data"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"footnote",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"backref ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"407"})," @apply no",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"underline",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"408"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"bottom",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"!"}),"important",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Now"})," refresh the page to see the improved tooltip styling",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})}),` changes `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"include"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"1."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Better"})," colors",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Uses"})," your site's paper background color ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"}),` slight `]}),(0,n.jsx)(e.span,{className:"code-line",children:` transparency `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Stronger"})," shadow",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"More"})," prominent drop shadow ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` better visibility `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"3."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Arrow"})," indicator",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Small"}),` triangle pointing to the footnote number `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"4."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Smooth"})," animation",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Fade"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token keyword",children:"in"}),` effect when the tooltip appears `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"5."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Better"})," spacing",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Increased"}),` padding and improved line height `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"6."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Backdrop"})," blur",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Subtle"})," blur effect ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"})," modern ",(0,n.jsx)(e.span,{className:"token function",children:"appearance"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),`on supported `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" browsers",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," tooltip should now blend better ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," your site's design ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"while"}),` still `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" standing out clearly ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," the content behind it",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Yeah"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," that's a solid improvement",(0,n.jsx)(e.span,{className:"token punctuation",children:"."})," ",(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Please"})}),` could you make the following `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"changes"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"1."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Slightly"})," reduce the vertical padding ",(0,n.jsx)(e.span,{className:"token keyword",children:"in"})," the ",(0,n.jsx)(e.span,{className:"token function",children:"bubble"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"only by ",(0,n.jsx)(e.span,{className:"token number",children:"2"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," pixels",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Make"})," the hover target ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"for"}),` the footnote number just a tiny bit bigger `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"3."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Cut"}),` the animation entirely `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"})," addition and ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` removal `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"352"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"353"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"/* Footnote tooltip styles */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"354"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"footnote"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"tooltip ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"355"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," @apply bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"paper dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"800"})," border border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"300"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"xl p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"xl p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"355"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," @apply bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"paper dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"bg",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"800"})," border border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"300"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"dark"}),(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"xl px",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," py",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," dark",(0,n.jsx)(e.span,{className:"token operator",children:":"}),"border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"gray",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"600"})," rounded",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"lg shadow",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"xl px",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," py",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," text",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),`sm `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," max",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"w",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"sm",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"356"})," pointer",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"events",(0,n.jsx)(e.span,{className:"token operator",children:":"})," auto",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"357"})," backdrop",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"filter",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"blur"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"10px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"358"})," background",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"rgba"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"255"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"252"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"240"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.98"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," ",(0,n.jsx)(e.span,{className:"token comment",children:`/* `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:" semi-transparent paper color */"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated components",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"FootnoteTooltip"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"tsx"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),` removal `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"109"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"top"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"y"}),(0,n.jsx)(e.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"px"}),(0,n.jsx)(e.span,{className:"token string template-punctuation",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"110"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"transform"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'translate(-50%, -100%) translateY(-12px)'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"111"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"zIndex"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"9999"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"112"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," animation",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'fadeIn 0.2s ease-in-out'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"112"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"113"})," dangerouslySetInnerHTML",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token literal-property property",children:"__html"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," tooltip",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"content"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"114"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Update"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" \u23BF \xA0Updated css",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"tailwind",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"css"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," ",(0,n.jsx)(e.span,{className:"token number",children:"5"})," additions and ",(0,n.jsx)(e.span,{className:"token number",children:"10"}),` removals `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"389"})," border",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"top",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"color",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"rgb"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"31"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"41"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"55"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"390"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"391"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"392"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token comment",children:"/* Fade in animation for tooltip */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"393"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," @keyframes fadeIn ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"394"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"395"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," opacity",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"396"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"100"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translateY"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"8px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"397"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"398"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," to ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"399"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," opacity",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"1"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"400"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," transform",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translate"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"50"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"100"}),(0,n.jsx)(e.span,{className:"token operator",children:"%"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token function",children:"translateY"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"12px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"401"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"392"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," ",(0,n.jsx)(e.span,{className:"token comment",children:`/* Make footnote reference links have a slightly bigger hover `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:" target */"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," target ",(0,n.jsx)(e.span,{className:"token operator",children:"*"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"393"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," a",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"data",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"footnote",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"ref",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"394"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," padding",(0,n.jsx)(e.span,{className:"token operator",children:":"})," 2px 3px",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"395"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," margin",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"2px ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"3px",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"396"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"+"})," display",(0,n.jsx)(e.span,{className:"token operator",children:":"})," inline",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"block",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"397"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"398"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"399"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u23FA ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Perfect"}),(0,n.jsx)(e.span,{className:"token operator",children:"!"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"I"}),"'ve made all three changes",(0,n.jsx)(e.span,{className:"token operator",children:":"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"1."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Reduced"})," vertical padding",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Changed"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," p",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," to px",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"4"})," py",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"3"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),`keeps `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" horizontal padding but reduces vertical by about 4px",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"2."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Bigger"})," hover target",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Added"})," invisible padding around the footnote ",(0,n.jsx)(e.span,{className:"token function",children:"links"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"2px top",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"bottom",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," 3px left",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"right",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"with"})," negative margins to compensate",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` so `]}),(0,n.jsx)(e.span,{className:"code-line",children:` the visual appearance stays the same but the clickable area is larger `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token number",children:"3."})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Removed"})," animation",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Deleted"})," the fadeIn animation and its keyframes ",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` tooltip now appears instantly `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"The"})," tooltip should now feel snappier and be easier to trigger ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"while"}),` taking `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" up slightly less vertical space",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),` `]})]})}),(0,n.jsx)(e.p,{children:"Note how well it recovers after the initial mistake. And then how it improves the tooltip style after I show it a screenshot. Cracking."}),(0,n.jsxs)(e.h2,{className:"content-header",id:"appendix-1-a-few-more-examples",children:[(0,n.jsx)(e.a,{href:"#appendix-1-a-few-more-examples","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.span,{className:"content-header-link",children:(0,n.jsxs)(e.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,n.jsx)(e.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,n.jsx)(e.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Appendix 1. A few more examples"]}),(0,n.jsxs)(e.p,{children:["A couple more prompts that memorably ",(0,n.jsx)(e.em,{children:"just worked"}),":"]}),(0,n.jsx)(s,{content:` Hey, so currently I'm using a web app called Placid.app to dynamically generate social media card images for each of the Radio Bostrom episode pages. What I would like you to do is write me a script which will download all of the images from this application and put them into a folder. The images should have a predictable naming pattern. think just basically like you know social card episode number. And then I want to update the website to just use the saved images in that folder. The goal is that I can just stop using the Placid service and also have slightly faster load times. `}),(0,n.jsxs)(e.p,{children:["Add build scripts to create the ",(0,n.jsx)(e.a,{href:"/llms/all-posts.md",children:"all-posts.md"})," file for this blog:"]}),(0,n.jsx)(s,{content:` As part of the build process, I would like to generate a Markdown file that contains the full text of all the published blog posts. I'm going to use this; basically, I want people to be able to put that Markdown file into a chat with an LLM. The format I want to use is below. Please could you make a plan for this? Don't start writing code yet, just tell me your plan. --- # POST TITLE * Date: 2025-08-20 * Tags: journal * Platforms: ChatGPT, Claude * Canonical URL: https://wow.pjh.is/journal/start-conversations-via-querystring --- `}),(0,n.jsx)(e.p,{children:"Same goes for this one:"}),(0,n.jsx)(s,{content:` I'd like to add some special handling for the Zvi newsletter. Basically, one-in-five of his newsletters is not actually about AI, and for those newsletters, I want to crawl it to the database but not extract tweets or any other kind of data, and just store the newsletter item in the database. We should add a column to the table schema called "subject_is_ai", and then that column should default to true and then for the Zvi ones which we classify as not about AI it should be set to false. To do the classifying, we should just send off the newsletter title and the first 500 words to the Anthropic API using Sonnet and ask it to classify as about AI or not. `}),(0,n.jsxs)(e.section,{className:"footnotes","data-footnotes":!0,children:[(0,n.jsxs)(e.h2,{className:"content-header",id:"footnote-label",children:[(0,n.jsx)(e.a,{href:"#footnote-label","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.span,{className:"content-header-link",children:(0,n.jsxs)(e.svg,{className:"h-5 linkicon w-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[(0,n.jsx)(e.path,{d:"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}),(0,n.jsx)(e.path,{d:"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"})]})})})}),"Footnotes"]}),(0,n.jsxs)(e.ol,{children:[(0,n.jsx)(e.li,{id:"user-content-fn-1",children:(0,n.jsxs)(e.p,{children:["I currently use Claude Code ",(0,n.jsx)(e.em,{children:"and"})," Cursor during most coding sessions. Claude Code is better at planning and executing on big changes. The diff between Claude and Cursor fluctuates, since both are updated frequently\u2014let's see how GPT-5 performs in Cursor. There are times when Cursor's proper GUI makes it clearly the best choice: it's faster for making changes to a single file, and for when I want to read and reason about the code a bunch. ",(0,n.jsx)(e.a,{href:"#user-content-fnref-1","aria-label":"Back to reference 1",className:"data-footnote-backref","data-footnote-backref":"",children:"\u21A9"})]})}),(0,n.jsx)(e.li,{id:"user-content-fn-2",children:(0,n.jsxs)(e.p,{children:["Next.js, Tailwind and Contentlayer, with posts in MDX. ~5000 lines and ~50 dependencies. ",(0,n.jsx)(e.a,{href:"#user-content-fnref-2","aria-label":"Back to reference 2",className:"data-footnote-backref","data-footnote-backref":"",children:"\u21A9"})]})})]})]})]})}function d(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(p,{...a})}):p(a)}function x(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(v);})(); ;return Component;