{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/zdSP21m7UwAxPqjq0Y3X/NyR7FPuVx2YoJ3Yc23vE/TableOfContents.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers\n// import { addPropertyControls, ControlType } from \"framer\"\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";// import React, { useEffect, useState, CSSProperties } from \"react\"\nimport{useEffect,useState}from\"react\";import{addPropertyControls,ControlType}from\"framer\";function throttle(func,delay){let lastFunc;let lastRan;return function(...args){if(!lastRan){func(...args);lastRan=Date.now();}else{clearTimeout(lastFunc);lastFunc=setTimeout(function(){if(Date.now()-lastRan>=delay){func(...args);lastRan=Date.now();}},delay-(Date.now()-lastRan));}};}// export default function Table_of_Content(props) {\n//     const [headers, setHeaders] = useState([])\n//     const containerRef = useRef<HTMLDivElement | null>(null)\n//     useEffect(() => {\n//         if (containerRef.current) {\n//             let doc = document.getElementById(\"blog-article-content\")\n//             if (!doc) return\n//             const headingElements = Array.from(\n//                 doc.querySelectorAll(\"h1, h2, h3, h4, h5, h6\")\n//             )\n//             const headers = headingElements\n//                 .map((element, index) => {\n//                     // Assign an id if it's not present\n//                     if (!element.id) {\n//                         element.id = `header-${index}`\n//                     }\n//                     return {\n//                         id: element.id,\n//                         text: element.innerText,\n//                         tagName: element.tagName,\n//                     }\n//                 })\n//                 .filter((header) => {\n//                     const headingNumber = Number(header.tagName[1]) // tagName would be like 'H1', 'H2', ...\n//                     const propToCheck = `header_${headingNumber}`\n//                     // Only include the headers where the respective prop is true\n//                     return (\n//                         props[propToCheck] &&\n//                         !Object.values(props).includes(header.text)\n//                     )\n//                 })\n//             setHeaders(headers)\n//         }\n//     }, [containerRef, props])\n//     return (\n//         <div style={containerStyle} ref={containerRef}>\n//             <strong style={{ textAlign: \"left\" }}>{props.header_name}</strong>\n//             <ul style={ulStyle}>\n//                 {headers.map((header, index) => (\n//                     <li\n//                         key={index}\n//                         style={{\n//                             ...liStyle,\n//                             marginLeft: `${\n//                                 props[\n//                                     `header_${Number(\n//                                         header.tagName[1]\n//                                     )}_padding`\n//                                 ]\n//                             }px`,\n//                             fontSize: `${props.list_font_size}px`,\n//                         }}\n//                     >\n//                         <a\n//                             href={`#${header.id}`}\n//                             style={{ ...linkStyle, color: props.link_color }}\n//                             onClick={(event) => {\n//                                 event.preventDefault()\n//                                 document\n//                                     .getElementById(header.id)\n//                                     ?.scrollIntoView({\n//                                         behavior: \"smooth\",\n//                                     })\n//                             }}\n//                         >\n//                             {header.text}\n//                         </a>\n//                     </li>\n//                 ))}\n//             </ul>\n//         </div>\n//     )\n// }\n// addPropertyControls(Table_of_Content, {\n//     header_name: { type: ControlType.String, title: \"Table of Content\" },\n//     link_color: {\n//         type: ControlType.Color,\n//         defaultValue: \"#00\",\n//     },\n//     header_1: {\n//         type: ControlType.Boolean,\n//         title: \"H1\",\n//         defaultValue: true,\n//         enabledTitle: \"On\",\n//         disabledTitle: \"Off\",\n//     },\n//     header_2: {\n//         type: ControlType.Boolean,\n//         title: \"H2\",\n//         defaultValue: true,\n//         enabledTitle: \"On\",\n//         disabledTitle: \"Off\",\n//     },\n//     header_3: {\n//         type: ControlType.Boolean,\n//         title: \"H3\",\n//         defaultValue: true,\n//         enabledTitle: \"On\",\n//         disabledTitle: \"Off\",\n//     },\n//     header_4: {\n//         type: ControlType.Boolean,\n//         title: \"H4\",\n//         defaultValue: true,\n//         enabledTitle: \"On\",\n//         disabledTitle: \"Off\",\n//     },\n//     header_5: {\n//         type: ControlType.Boolean,\n//         title: \"H5\",\n//         defaultValue: true,\n//         enabledTitle: \"On\",\n//         disabledTitle: \"Off\",\n//     },\n//     header_6: {\n//         type: ControlType.Boolean,\n//         title: \"H6\",\n//         defaultValue: true,\n//         enabledTitle: \"On\",\n//         disabledTitle: \"Off\",\n//     },\n//     header_1_padding: {\n//         type: ControlType.Number,\n//         title: \"H1 padding\",\n//         defaultValue: 0,\n//         min: 0,\n//         max: 100,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     header_2_padding: {\n//         type: ControlType.Number,\n//         title: \"H2 padding\",\n//         defaultValue: 10,\n//         min: 0,\n//         max: 100,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     header_3_padding: {\n//         type: ControlType.Number,\n//         title: \"H3 padding\",\n//         defaultValue: 20,\n//         min: 0,\n//         max: 100,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     header_4_padding: {\n//         type: ControlType.Number,\n//         title: \"H4 padding\",\n//         defaultValue: 30,\n//         min: 0,\n//         max: 100,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     header_5_padding: {\n//         type: ControlType.Number,\n//         title: \"H5 padding\",\n//         defaultValue: 40,\n//         min: 0,\n//         max: 100,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     header_6_padding: {\n//         type: ControlType.Number,\n//         title: \"H6 padding\",\n//         defaultValue: 50,\n//         min: 0,\n//         max: 100,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     list_font_size: {\n//         type: ControlType.Number,\n//         title: \"Font Size\",\n//         defaultValue: 14,\n//         min: 1,\n//         max: 72,\n//         unit: \"px\",\n//         step: 1,\n//         displayStepper: true,\n//     },\n//     ignore_1: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_2: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_3: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_4: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_5: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_6: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_7: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_8: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_9: { type: ControlType.String, title: \"Ignore Header\" },\n//     ignore_10: { type: ControlType.String, title: \"Ignore Header\" },\n// })\n// Table_of_Content.defaultProps = {\n// header_name: \"Table of content\",\n// }\n// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\nconst containerStyle={height:\"100%\",display:\"flex\",flexDirection:\"column\",justifyContent:\"left\",alignItems:\"left\",overflow:\"hidden\"};const linkStyle={textDecoration:\"none\"};// Styles for the ul/li\nconst ulStyle={padding:\"0px\",margin:\"10px 0px 0px 3px\"};const liStyle={padding:\"2px 0px\",margin:\"0px\"};export default function TableOfContents(props){const[headers,setHeaders]=useState([]);const[activeIndex,setActiveIndex]=useState(null);const[isProgrammaticScroll,setIsProgrammaticScroll]=useState(false);const{name,content_id}=props;useEffect(()=>{const collectHeaders=()=>{const contentDiv=document.getElementById(content_id);if(!contentDiv)return[];const headerElements=contentDiv.querySelectorAll(\"h2, h3\");return Array.from(headerElements).map(header=>({text:header.textContent||\"\",offsetTop:header.offsetTop,level:header.tagName===\"H2\"?1:2}));};setHeaders(collectHeaders());},[]);useEffect(()=>{const onScroll=throttle(()=>{// Check for programmatic scroll\nif(isProgrammaticScroll){setIsProgrammaticScroll(false);return;}const headerOffsets=headers.map(header=>header.offsetTop);const currentPosition=window.scrollY+window.innerHeight/2-300;const active=headerOffsets.findIndex((offset,index)=>{return currentPosition>=offset&&(!headerOffsets[index+1]||currentPosition<headerOffsets[index+1]);});setActiveIndex(active);},200)// This will execute the onScroll function at most once every 200ms\n;window.addEventListener(\"scroll\",onScroll);return()=>window.removeEventListener(\"scroll\",onScroll);},[headers]);const scrollToHeader=offsetTop=>{setIsProgrammaticScroll(true);window.scrollTo({top:offsetTop,behavior:\"smooth\"});};const tocStyle={borderRadius:\"10px\",maxWidth:\"250px\"};const listItemStyle=level=>({cursor:\"pointer\",padding:\"0\",color:\"#5c5a5a\",marginLeft:level===2?\"12px\":\"0\",marginBottom:level===2?\"5px\":\"10px\",listStyleType:level===2?\"disc\":\"none\",backgroundColor:\"transparent\",borderRadius:\"5px\",fontSize:\"13px\",fontWeight:level===2?\"400\":\"500\",fontFamily:\"Inter\",lineHeight:\"16px\",letterSpacing:\"-0.3px\",transition:\"background-color 0.3s\"});const listItemHoverStyle={color:\"#414040\"};const activeItemStyle=level=>({...listItemStyle(level),fontWeight:\"semibold\",color:\"#007bff\"});return /*#__PURE__*/_jsxs(\"div\",{style:tocStyle,children:[/*#__PURE__*/_jsx(\"h2\",{style:{textAlign:\"left\"},children:name}),/*#__PURE__*/_jsx(\"ul\",{style:{borderRadius:0,overflow:\"hidden\",backgroundColor:\"transparent\",padding:0},children:headers.map((header,index)=>/*#__PURE__*/_jsx(\"li\",{onClick:()=>scrollToHeader(header.offsetTop),style:index===activeIndex?activeItemStyle(header.level):listItemStyle(header.level),onMouseEnter:e=>e.currentTarget.style.color=listItemHoverStyle.color,onMouseLeave:e=>e.currentTarget.style.color=listItemStyle(header.level).color,children:header.text},index))})]});}addPropertyControls(TableOfContents,{name:{title:\"Name\",type:ControlType.String,defaultValue:\"Table of Contents\"},content_id:{title:\"content_id\",type:ControlType.String,defaultValue:\"blog_article_content\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TableOfContents\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContents.map"],
  "mappings": "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",
  "names": ["throttle", "func", "delay", "lastFunc", "lastRan", "args", "TableOfContents", "props", "headers", "setHeaders", "ye", "activeIndex", "setActiveIndex", "isProgrammaticScroll", "setIsProgrammaticScroll", "name", "content_id", "ue", "contentDiv", "headerElements", "header", "onScroll", "throttle", "headerOffsets", "currentPosition", "window", "active", "offset", "index", "scrollToHeader", "offsetTop", "tocStyle", "listItemStyle", "level", "listItemHoverStyle", "activeItemStyle", "u", "e", "addPropertyControls", "ControlType"]
}