Wikipedia Family Tree Crawler

\n setUrl(e.target.value)}\n placeholder=\"Enter a Wikipedia URL\"\n required\n style={{ flexGrow: 1 }}\n />\n \n setMaxGenerations(Math.max(1, parseInt(e.target.value) || 1))}\n min=\"1\"\n max=\"50\"\n style={{ width: \"60px\" }}\n />\n Max Generations\n \n

Try these examples:

\n {[\n \"https://en.wikipedia.org/wiki/Martin_Luther_King_Jr.\",\n \"https://en.wikipedia.org/wiki/Barack_Obama\",\n \"https://en.wikipedia.org/wiki/John_F._Kennedy\",\n ].map((exampleUrl) => (\n {\n setUrl(exampleUrl); // This is still useful for updating the input field\n handleSubmit(null, exampleUrl);\n }}\n style={{\n padding: \"5px 10px\",\n fontSize: \"13px\",\n backgroundColor: \"#4CAF50\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s\",\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n }}\n >\n {exampleUrl.split(\"/\").pop()?.replace(/_/g, \" \")}\n \n ))}\n

\n {isLoading && (\n

\n )}\n \n Ancestor Generations: {treeDepth.ancestors}
\n Descendant Generations: {treeDepth.descendants}
\n Total Generations: {treeDepth.ancestors + treeDepth.descendants}\n

\n View source\n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/stream\") {\n const wikiUrl = url.searchParams.get(\"url\");\n if (!wikiUrl) {\n return new Response(\"URL parameter is required\", { status: 400 });\n }\n\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n for await (const data of crawlWikipedia(wikiUrl)) {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(data)}\\n\\n`));\n }\n controller.close();\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n Wikipedia Family Tree Crawler\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body, html {\n margin: 0;\n padding: 0;\n height: 100%;\n font-family: Arial, sans-serif;\n }\n #root {\n height: 100%;\n }\n h1 {\n margin-top: 0;\n }\n form {\n margin-bottom: 10px;\n }\n input {\n padding: 5px;\n font-size: 16px;\n }\n button {\n padding: 5px 10px;\n font-size: 16px;\n background-color: #4CAF50;\n color: white;\n border: none;\n cursor: pointer;\n }\n button:disabled {\n background-color: #cccccc;\n }\n button:hover {\n background-color: #45a049;\n }\n .spinner {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3498db;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n`;\n\nconst cytoscapeStyle = [\n {\n selector: \"node\",\n style: {\n \"background-color\": \"#666\",\n \"label\": \"data(label)\",\n \"color\": \"#fff\",\n \"text-valign\": \"center\",\n \"text-halign\": \"center\",\n \"text-wrap\": \"wrap\",\n \"text-max-width\": \"100px\",\n \"font-size\": \"10px\",\n \"width\": \"label\",\n \"height\": \"label\",\n \"padding\": \"10px\",\n },\n },\n {\n selector: \"edge\",\n style: {\n \"width\": 2,\n \"line-color\": \"#ccc\",\n \"target-arrow-color\": \"#ccc\",\n \"curve-style\": \"bezier\",\n },\n },\n];\n\nexport default server;","createdAt",["D",1725298530330],"version",11,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","stevekrouse","profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","forkedVal",{"_113":136,"_130":137,"_98":99,"_118":138,"_139":-5},"695c22d6-6937-11ef-aad8-de64eea55b61","jdan",45,"prDisabledHint","interval","slug","stevekrouse/infoboxCrawler","description","@jsxImportSource https://esm.sh/react","versions",[147,150,154,158,162,166,170,174,178,182,185,188],{"_118":119,"_148":-5,"_116":149,"_113":111},"prId",["D",1725298530330],{"_118":151,"_148":-5,"_116":152,"_113":153},10,["D",1725298402609],"73b27888-6951-11ef-99d6-de64eea55b61",{"_118":155,"_148":-5,"_116":156,"_113":157},9,["D",1725298359701],"5a1f54ea-6951-11ef-bc68-de64eea55b61",{"_118":159,"_148":-5,"_116":160,"_113":161},8,["D",1725298324389],"4512ec4c-6951-11ef-9805-de64eea55b61",{"_118":163,"_148":-5,"_116":164,"_113":165},7,["D",1725298271653],"25a40cb0-6951-11ef-a74c-de64eea55b61",{"_118":167,"_148":-5,"_116":168,"_113":169},6,["D",1725298238792],"120ded1a-6951-11ef-9ff8-de64eea55b61",{"_118":171,"_148":-5,"_116":172,"_113":173},5,["D",1725298171503],"e9f26bda-6950-11ef-9998-de64eea55b61",{"_118":175,"_148":-5,"_116":176,"_113":177},4,["D",1725298124805],"ce1cfc2c-6950-11ef-acc8-de64eea55b61",{"_118":179,"_148":-5,"_116":180,"_113":181},3,["D",1725298034835],"987c8b50-6950-11ef-93cb-de64eea55b61",{"_118":90,"_148":-5,"_116":183,"_113":184},["D",1725298000933],"8447d5cc-6950-11ef-98e7-de64eea55b61",{"_118":122,"_148":-5,"_116":186,"_113":187},["D",1725297959845],"6bca07d6-6950-11ef-90e8-de64eea55b61",{"_118":31,"_148":-5,"_116":189,"_113":190},["D",1725297926003],"579e24ea-6950-11ef-825b-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":198,"_130":131,"_143":144,"_98":99,"_227":31,"_228":122,"_50":51,"_229":230},{"_98":99,"_95":96,"_100":101,"_102":103,"_104":-5,"_105":106,"_107":66,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":199,"_118":119,"_120":26,"_121":122,"_123":31,"_124":31,"_125":31,"_126":31,"_127":122,"_128":-5,"_20":200,"_134":201,"_140":-7,"_141":142,"_143":144,"_145":202},["D",1725298530330],{"_130":131,"_132":133},{"_113":136,"_130":137,"_98":99,"_118":138,"_139":-5},[203,205,207,209,211,213,215,217,219,221,223,225],{"_118":119,"_148":-5,"_116":204,"_113":111},["D",1725298530330],{"_118":151,"_148":-5,"_116":206,"_113":153},["D",1725298402609],{"_118":155,"_148":-5,"_116":208,"_113":157},["D",1725298359701],{"_118":159,"_148":-5,"_116":210,"_113":161},["D",1725298324389],{"_118":163,"_148":-5,"_116":212,"_113":165},["D",1725298271653],{"_118":167,"_148":-5,"_116":214,"_113":169},["D",1725298238792],{"_118":171,"_148":-5,"_116":216,"_113":173},["D",1725298171503],{"_118":175,"_148":-5,"_116":218,"_113":177},["D",1725298124805],{"_118":179,"_148":-5,"_116":220,"_113":181},["D",1725298034835],{"_118":90,"_148":-5,"_116":222,"_113":184},["D",1725298000933],{"_118":122,"_148":-5,"_116":224,"_113":187},["D",1725297959845],{"_118":31,"_148":-5,"_116":226,"_113":190},["D",1725297926003],"page","count","prs",[231],{"_113":232,"_143":233,"_116":234,"_235":236,"_240":241},"753ca1fa-6952-11ef-ae54-de64eea55b61","Add descendants, max depth, three examples ",["D",1725298834691],"targetVal",{"_113":237,"_98":99,"_130":137,"_132":238,"_239":137},"cce4829e-692d-11ef-963a-de64eea55b61","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJsV0d2bDdqQTdBMGNpY2REV082Q0daSDRlcCJ9","username","forkVal",{"_113":101,"_98":99,"_130":131,"_132":133,"_239":131},"routes/_app","actionData","errors"]