1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[23199,79674],{52969:function(e,t,n){n.r(t),n.d(t,{default:function(){return h}});var a=n(724),o=n(54553),s=n(25333),r=n(25474),i=n(34216),l=n(3290),d=n(4607),c=e=>(console.log("TipTapMermaid props",e),(0,a.jsxs)(l.T5,{className:"react-component",children:[(0,a.jsx)(d.Z,{chartDefinition:e.node.attrs.mermaid,isChartLoaded:!0,setIsChartLoaded:()=>{}}),(0,a.jsx)(l.ms,{className:"content is-editable"})]})),u=i.NB.create({name:"tiptapMermaid",group:"block",atom:!0,addAttributes:()=>({mermaid:{default:""}}),parseHTML:()=>[{tag:"tiptapmermaid"}],renderHTML(e){let{HTMLAttributes:t}=e;return["tiptapmermaid",(0,i.P1)(t)]},addNodeView:()=>(0,l.fW)(c)});n(59610);var f=n(81077);let m=[s.k.configure({multiColumn:!0,placeholder:{showOnlyCurrent:!0},characterCount:{limit:5e4}}),s.j,s.z,s.P,s.J,s.u.configure({spacer:!0}),s.f,s.F.configure({fontFamilyList:["Inter","Comic Sans MS, Comic Sans","serif","cursive","Arial","Arial Black","Georgia","Impact","Tahoma","Times New Roman","Verdana","Courier New","Lucida Console","Monaco","monospace"]}),s.H.configure({spacer:!0,HTMLAttributes:{class:"mb-4"}}),s.b,s.B,s.I,s.U,s.S,s.M,s.E,s.c.configure({spacer:!0}),s.d,s.e,s.O,s.T.configure({types:["heading","paragraph"],spacer:!0}),s.n,s.o,s.g.configure({spacer:!0,taskItem:{nested:!0}}),s.L,f.Z,s.r.configure({upload:e=>new Promise(t=>{setTimeout(()=>{t(URL.createObjectURL(e))},500)})}),s.V,s.h,s.p,s.i,s.C.configure({toolbar:!0}),s.a.configure({defaultTheme:"material-theme",languages:["ts","python","sql","json"]}),s.x,s.t,r.Z,u,s.K];var h=function(e){var t;let n,{content:r,setContent:i}=e,l=o.useRef(null),[d,c]=(0,o.useState)("light"),[u,f]=(0,o.useState)(!1),h=(0,o.useCallback)((t=e=>{i(e)},function(){for(var e=arguments.length,a=Array(e),o=0;o<e;o++)a[o]=arguments[o];clearTimeout(n),n=setTimeout(()=>t.apply(this,a),300)}),[]);return(0,a.jsx)("main",{children:(0,a.jsx)("div",{style:{maxWidth:1024},children:(0,a.jsx)(s.R,{ref:l,output:"html",content:r,onChangeContent:h,extensions:m,dark:"dark"===d,disabled:u})})})}},81077:function(e,t,n){n.d(t,{Z:function(){return m}});var a=n(28323),o=n(3290),s=n(724),r=n(86272),i=n(15176),l=n(43471),d=n(35233),c=n(69884),u=n(54553),f=e=>{let{node:t}=e,{src:n,alt:a}=t.attrs;console.log("node.attrs",t.attrs);let{isOpen:f,onOpen:m,onOpenChange:h}=(0,r.q)(),[p,g]=(0,u.useState)(1);return(0,s.jsxs)(o.T5,{className:"react-component",children:[(0,s.jsx)("img",{src:n,className:"tiptap-custom-image",onClick:m}),(0,s.jsx)(i.R,{isOpen:f,onOpenChange:()=>{g(1),h()},size:"5xl",style:{minHeight:"90vh",minWidth:"90vw"},scrollBehavior:"inside",children:(0,s.jsx)(l.A,{children:(0,s.jsx)(d.I,{children:(0,s.jsx)("div",{className:"overflow-auto p-4",children:(0,s.jsx)(c.default,{src:n,alt:"Course ContentImage",width:2e3,height:2e3,className:"transition-transform duration-300",style:{transform:"scale(".concat(p,")"),margin:"auto"},unoptimized:!0})})})})})]})},m=a.Ee.extend({renderHTML(e){let{HTMLAttributes:t}=e;return["div",{},["div",{},""],["img",t]]},addNodeView:()=>(0,o.fW)(f)})},25474:function(e,t,n){n.d(t,{Z:function(){return l}});var a=n(34216),o=n(3290),s=n(724),r=n(24665);n(54553);var i=e=>(console.log("TipTapMarkMap props",e),(0,s.jsxs)(o.T5,{className:"react-component",children:[(0,s.jsx)(r.Z,{surface:"course",mdValue:e.node.attrs.markmap,canShowDefault:!1}),(0,s.jsx)(o.ms,{className:"content is-editable"})]})),l=a.NB.create({name:"tiptapMarkmap",group:"block",atom:!0,addAttributes:()=>({markmap:{default:""}}),parseHTML:()=>[{tag:"tiptapmarkmap"}],renderHTML(e){let{HTMLAttributes:t}=e;return["tiptapmarkmap",(0,a.P1)(t)]},addNodeView:()=>(0,o.fW)(i)})},4607:function(e,t,n){n.d(t,{Z:function(){return d}});var a=n(724),o=n(54553),s=n(43225),r=n(61433),i=e=>{let{hasContent:t,child:n}=e;return(0,o.useEffect)(()=>{let e=1,t=0,n=0,a=document.getElementById("zoomable-div"),o=document.getElementById("zoom-in"),s=document.getElementById("zoom-out");if(!a||!o||!s)return;let r=()=>{a.style.transform="translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")};a.addEventListener("wheel",t=>{t.ctrlKey&&(t.deltaY<0?e*=1.1:e*=.9,r(),t.preventDefault())});let i=!1,l=0,d=0;a.addEventListener("mousedown",e=>{l=e.clientX-t,d=e.clientY-n,i=!0,a.style.cursor="grabbing"}),a.addEventListener("mousemove",e=>{i&&(t=e.clientX-l,n=e.clientY-d,r())}),a.addEventListener("mouseup",()=>{i&&a&&(i=!1,a.style.cursor="grab")}),a.addEventListener("dblclick",e=>{e.preventDefault()}),o.addEventListener("click",t=>{t.stopPropagation(),e*=1.2,r()}),s.addEventListener("click",t=>{t.stopPropagation(),e*=.8,r()})},[]),(0,a.jsxs)("div",{id:t?"zoomable-container":"zoomable-container-no-content",children:[(0,a.jsx)("button",{id:"zoom-in",className:"relative z-10 ml-2 mt-2 w-8 justify-center border border-dashed border-gray-500 p-1 text-gray-600 opacity-80 ".concat(t?"":"hidden"),"aria-label":"Zoom In",children:(0,a.jsx)(r.rVI,{size:24})}),(0,a.jsx)("button",{id:"zoom-out",className:"relative z-10 ml-2 mt-2 w-8 justify-center border border-dashed border-gray-500 p-1 text-gray-600 opacity-80 ".concat(t?"":"hidden"),"aria-label":"Zoom Out",children:(0,a.jsx)(r.pTg,{size:24})}),(0,a.jsx)("div",{id:"zoomable-div",className:"z-0",children:n})]})},l=n(51361);s.N.initialize({startOnLoad:!0,flowchart:{useMaxWidth:!1,htmlLabels:!0},theme:"default",securityLevel:"loose",themeCSS:"\n g.classGroup rect {\n fill: #282a36;\n stroke: #6272a4;\n }\n g.classGroup text {\n fill: #f8f8f2;\n }\n g.classGroup line {\n stroke: #f8f8f2;\n stroke-width: 0.5;\n }\n .classLabel .box {\n stroke: #21222c;\n stroke-width: 3;\n fill: #21222c;\n opacity: 1;\n }\n .classLabel .label {\n fill: #f1fa8c;\n }\n .relation {\n stroke: #ff79c6;\n stroke-width: 1;\n }\n #compositionStart, #compositionEnd {\n fill: #bd93f9;\n stroke: #bd93f9;\n stroke-width: 1;\n }\n #aggregationEnd, #aggregationStart {\n fill: #21222c;\n stroke: #50fa7b;\n stroke-width: 1;\n }\n #dependencyStart, #dependencyEnd {\n fill: #00bcd4;\n stroke: #00bcd4;\n stroke-width: 1;\n }\n #extensionStart, #extensionEnd {\n fill: #f8f8f2;\n stroke: #f8f8f2;\n stroke-width: 1;\n }",fontFamily:"Fira Code"});var d=e=>{let{chartDefinition:t,isChartLoaded:n,setIsChartLoaded:r}=e,[d,c]=(0,o.useState)(!0),u=async()=>
1{if(t.length<1)return;let e=await s.N.parse(t);c(e||!1),e&&(await s.N.run({querySelector:".mermaid"}),r(!0))},f={width:"600px",height:"400px"};return(0,a.jsx)(i,{hasContent:!!t,child:(0,a.jsx)(()=>((0,o.useEffect)(()=>{u()},[t]),d)?(0,a.jsx)("div",{className:"bg-white",children:n&&(0,a.jsx)("pre",{className:"mermaid",style:f,children:t})}):(0,a.jsx)("div",{style:f,children:(0,l.a)("mermaid_chart_wrong")}),{})})}},24665:function(e,t,n){var a=n(724),o=n(54553),s=n(59328),r=n(37335),i=n(61433),l=n(51361);let d=new s.$T;t.Z=e=>{let{mdValue:t,canShowDefault:n,surface:s="solution"}=e;n&&(t=c);let u=(0,o.useRef)(null),f=(0,o.useRef)(),m=function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=f.current;if(!n){let n=r.v$.create(u.current);f.current=n;let{root:a}=d.transform(t);if(n.setData(a),e)return;m(!0);return}let{root:a}=d.transform(t);n.setData(a),n.fit()};(0,o.useEffect)(()=>{m()},[f.current,t]);let h={height:t?"700px":"100px",width:"1200px"};return"course"==s&&(h={height:t?"700px":"100px",width:"400px"}),(0,a.jsxs)("div",{className:"relative mx-8 flex max-w-7xl justify-center bg-white pb-4 text-gray-700 dark:bg-gray-800 dark:text-gray-200",children:[t&&(0,a.jsxs)("div",{className:"z-5 absolute left-2 top-2 flex flex-row opacity-80",children:[(0,a.jsx)("button",{className:"mr-2 flex flex-row border border-dashed border-gray-500 p-1",onClick:()=>{m()},"aria-label":"Reset Chart Size",children:(0,a.jsx)("div",{className:"ml-1 mt-0.5 items-center text-sm font-normal",children:(0,l.a)("reset_chart_size")})}),(0,a.jsx)("button",{className:"mr-2 flex w-8 justify-center border border-dashed border-gray-500 p-1",onClick:()=>{let e=f.current;e&&e.rescale(1.5)},"aria-label":"Zoom In",children:(0,a.jsx)(i.rVI,{size:24})}),(0,a.jsx)("button",{className:"mr-2 flex w-8 justify-center border border-dashed border-gray-500 p-1",onClick:()=>{let e=f.current;e&&e.rescale(.5)},"aria-label":"Zoom Out",children:(0,a.jsx)(i.pTg,{size:24})})]}),(0,a.jsx)("svg",{className:"my-4 flex-1",style:h,ref:u})]})};let c="\n# Twitter's Feed and Notification System Design\n\n## 1. Functional and Non-Functional Requirements\n\n### 1.1 Functional Requirements\n1. Users should be able to post tweets.\n2. Users should be able to follow/unfollow other users.\n3. Users should be able to view a feed of tweets from users they follow.\n4. Users should receive notifications when someone they follow posts a tweet.\n\n### 1.2 Non-Functional Requirements\n1. The system should be highly available.\n2. The system should be able to handle high traffic and large data volumes.\n3. The system should ensure data consistency and integrity.\n4. The system should provide real-time updates to users' feeds and notifications.\n\n## 2. Traffic Estimation and Calculation\n\nAssumptions:\n1. Twitter has 330 million active users.\n2. Each user follows 200 people on average.\n3. Each user posts 2 tweets per day.\n\nCalculations:\n1. Daily tweet posts: 330 million users * 2 tweets/user/day = 660 million tweets/day.\n2. Daily feed updates: 660 million tweets/day * 200 followers/tweet = 132 billion feed updates/day.\n3. Daily notifications: Assuming 10% of followers get notified, 132 billion feed updates/day * 10% = 13.2 billion notifications/day.\n\n## 3. API Design\n\n1. PostTweet API\n - Endpoint: POST /tweets\n - Input: {userId, text}\n - Output: {tweetId, creationTime}\n\n2. Follow API\n - Endpoint: POST /follow\n - Input: {followerId, followeeId}\n - Output: {status}\n\n3. Unfollow API\n - Endpoint: DELETE /follow\n - Input: {followerId, followeeId}\n - Output: {status}\n\n4. GetFeed API\n - Endpoint: GET /feeds/{userId}\n - Input: {userId}\n - Output: {tweets}\n\n5. GetNotifications API\n - Endpoint: GET /notifications/{userId}\n - Input: {userId}\n - Output: {notifications}\n\n## 4. Database Design\n\nWe can use a combination of SQL and NoSQL databases.\n\n1. User Database (SQL)\n - Stores user information.\n - SQL is chosen for its ACID properties, ensuring data consistency.\n\n2. Tweet Database (NoSQL)\n - Stores tweets.\n - NoSQL is chosen for its scalability and flexibility in handling unstructured data.\n\n3. Follower Database (NoSQL)\n - Stores follower-followee relationships.\n - NoSQL is chosen for its ability to handle large amounts of data and complex queries.\n\n4. Feed Database (NoSQL)\n - Stores users' feeds.\n - NoSQL is chosen for its ability to handle high write loads and provide fast reads.\n\n5. Notification Database (NoSQL)\n - Stores users' notifications.\n - NoSQL is chosen for its ability to handle high write loads and provide real-time updates.\
1n\n## 5. High-Level Architecture\n\nMajor backend components include:\n1. User Service\n2. Tweet Service\n3. Follow Service\n4. Feed Service\n5. Notification Service\n6. Database Servers\n7. Cache Servers\n8. Message Queue Servers\n\n## 6. Request Flows\n\n1. PostTweet: User -> User Service -> Tweet Service -> Message Queue -> Feed Service -> Notification Service\n2. Follow/Unfollow: User -> User Service -> Follow Service -> Message Queue -> Feed Service\n3. GetFeed: User -> User Service -> Feed Service\n4. GetNotifications: User -> User Service -> Notification Service\n\n## 7. Component Design\n\n1. User Service: Handles user-related operations.\n2. Tweet Service: Handles tweet-related operations.\n3. Follow Service: Handles follow/unfollow operations.\n4. Feed Service: Generates and updates users' feeds.\n5. Notification Service: Generates and sends notifications to users.\n6. Message Queue: Decouples services and provides asynchronous communication.\n7. Cache Servers: Provide fast access to frequently accessed data.\n8. Database Servers: Store and manage data.\n\n## 8. Trade-offs\n\n1. SQL vs NoSQL: SQL provides ACID properties but is less scalable. NoSQL is more scalable but lacks ACID properties.\n2. Synchronous vs Asynchronous: Synchronous communication ensures order but can be slower. Asynchronous communication is faster but does not guarantee order.\n3. Cache vs Database: Cache provides faster access but has limited storage. Database has larger storage but slower access.\n\n## 9. Failure Scenarios\n\n1. Single Point of Failure: If any service fails, it can affect the entire system. Solution: Use redundant services and load balancing.\n2. Data Loss: If a database server fails, data can be lost. Solution: Use data replication and backups.\n3. Overload: If traffic is too high, the system can become overloaded. Solution: Use auto-scaling and rate limiting.\n\n## 10. Improvement Areas\n\n1. Improve data consistency: Use distributed transactions or eventual consistency.\n2. Improve scalability: Use sharding and partitioning.\n3. Improve availability: Use multi-region deployment and failover mechanisms.\n"},79674:function(e,t,n){n.d(t,{Q:function(){return l}});let a=e=>"object"==typeof e&&null!=e&&1===e.nodeType,o=(e,t)=>(!t||"hidden"!==e)&&"visible"!==e&&"clip"!==e,s=(e,t)=>{if(e.clientHeight<e.scrollHeight||e.clientWidth<e.scrollWidth){let n=getComputedStyle(e,null);return o(n.overflowY,t)||o(n.overflowX,t)||(e=>{let t=(e=>{if(!e.ownerDocument||!e.ownerDocument.defaultView)return null;try{return e.ownerDocument.defaultView.frameElement}catch(e){return null}})(e);return!!t&&(t.clientHeight<e.scrollHeight||t.clientWidth<e.scrollWidth)})(e)}return!1},r=(e,t,n,a,o,s,r,i)=>s<e&&r>t||s>e&&r<t?0:s<=e&&i<=n||r>=t&&i>=n?s-e-a:r>t&&i<n||s<e&&i>n?r-t+o:0,i=e=>{let t=e.parentElement;return null==t?e.getRootNode().host||null:t},l=(e,t)=>{var n,o,l,d;if("undefined"==typeof document)return[];let{scrollMode:c,block:u,inline:f,boundary:m,skipOverflowHiddenElements:h}=t,p="function"==typeof m?m:e=>e!==m;if(!a(e))throw TypeError("Invalid target");let g=document.scrollingElement||document.documentElement,b=[],w=e;for(;a(w)&&p(w);){if((w=i(w))===g){b.push(w);break}null!=w&&w===document.body&&s(w)&&!s(document.documentElement)||null!=w&&s(w,h)&&b.push(w)}let v=null!=(o=null==(n=window.visualViewport)?void 0:n.width)?o:innerWidth,y=null!=(d=null==(l=window.visualViewport)?void 0:l.height)?d:innerHeight,{scrollX:x,scrollY:S}=window,{height:N,width:I,top:k,right:T,bottom:L,left:j}=e.getBoundingClientRect(),{top:C,right:E,bottom:D,left:M}=(e=>{let t=window.getComputedStyle(e);return{top:parseFloat(t.scrollMarginTop)||0,right:parseFloat(t.scrollMarginRight)||0,bottom:parseFloat(t.scrollMarginBottom)||0,left:parseFloat(t.scrollMarginLeft)||0}})(e),F="start"===u||"nearest"===u?k-C:"end"===u?L+D:k+N/2-C+D,U="center"===f?j+I/2-M+E:"end"===f?T+E:j-M,H=[];for(let e=0;e<b.length;e++){let t=b[e],{height:n,width:a,top:o,right:i,bottom:l,left:d}=t.getBoundingClientRect();if("if-needed"===c&&k>=0&&j>=0&&L<=y&&T<=v&&(t===g&&!s(t)||k>=o&&L<=l&&j>=d&&T<=i))break;let m=getComputedStyle(t),h=parseInt(m.borderLeftWidth,10),p=parseInt(m.borderTopWidth,10),w=parseInt(m.borderRightWidth,10),C=parseInt(m.borderBottomWidth,10),E=0,D=0,M="offsetWidth"in t?t.offsetWidth-t.clientWidth-h-w:0,W="offsetHeight"in t?t.offsetHeight-t.clientHeight-p-C:0,z="offsetWidth"in t?0===t.offsetWidth?0:a/t.offsetWidth:0,A="offsetHeight"in t?0===t.offsetHeight?0:n/t.offsetHeight:0;if(g===t)E="start"===u?F:"end"===u?F-y:"nearest"===u?r(S,S+y,y,p,C,S+F,S+F+N,N):F-y/2,D="start"===f?U:"center"===f?U-v/2:"end"===f?U-v:r(x,x+v,v,h,w,x+U,x+U+I,I),E=Math.max(0,E+S),D=Math.max(0,D+x);else{E="start"===u?F-o-p:"end"===u?F-l+C+W:"nearest"===u?r(o,l,n,p,C+W,F,F+N,N):F-(o+n/2)+W/2,D="start"===f?U-d-h:"center"===f?U-(d+a/2)+M/2:"end"===f?U-i+w+M:r(d,i,a,h,w+M,U,U+I,I);let{scrollLeft:e,scrollTop:s}=t;E=0===A?0:Math.max(0,Math.min(s+E/A,t.scrollHeight-n/A+W)),D=0===z?0:Math.max(0,Math.min(e+D/z,t.scrollWidth-a/z+M)),F+=s-E,U+=e-D}H.push({el:t,top:E,left:D})}return H}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.