diff --git a/client/app.tsx b/client/app.tsx index 61b5a12..e43453b 100644 --- a/client/app.tsx +++ b/client/app.tsx @@ -6,6 +6,9 @@ import { siteDb } from './site_db_manual.ts' //! Get datas manually (site_db_manual.ts) // const siteDb = await fetchDbFromSite('https://www.pierregrangepraderas.net/') +/** + * Main content + */ export function App() { return (
diff --git a/client/db_graph.tsx b/client/db_graph.tsx index c270886..f6bb2a9 100644 --- a/client/db_graph.tsx +++ b/client/db_graph.tsx @@ -2,6 +2,10 @@ import { Ref, useEffect, useRef } from 'preact/hooks' import * as vis from 'vis-network' import { DbEntry } from '../datas.ts' +/** + * Renders a network style graph based on the provided database entries. + * @param db - Datas that will be used to draw the graph. + */ export function DbGraph({ db }: { db: DbEntry[] }) { const graph = useRef(null) @@ -12,17 +16,26 @@ export function DbGraph({ db }: { db: DbEntry[] }) { return
} +/** + * Draw db entries as vis network graph. + * @param db - DB Entries. + * @param graph - Container html reference. + */ function drawDb({ db, graph }: { db: DbEntry[]; graph: Ref }) { + + //Convert db entries to "vis-network" nodes const nodes = db.map(({ id, title, links }) => ({ id, label: title, value: links.length, })) + //Construct "vis-network" edges from db entries const edges = db.map(({ id, links }) => links.map((link) => ({ from: id, to: link, value: id + link })) ).flat() + //Draw the network graph return new vis.Network(graph.current!, { nodes, edges, diff --git a/client/fetch_db_from_site.ts b/client/fetch_db_from_site.ts index 4804b17..f5a5f71 100644 --- a/client/fetch_db_from_site.ts +++ b/client/fetch_db_from_site.ts @@ -2,11 +2,18 @@ import { DbEntry } from '../datas.ts' const domParser = new DOMParser() +/** + * Construct db by scrapping site. + * @param siteUrl - Index page url + * @returns DbEntries[] + */ export async function fetchDbFromSite(siteUrl: string) { + //Index page const index = await fetch(siteUrl, { mode: 'no-cors' }) .then((response) => response.text()) .then((raw) => domParser.parseFromString(raw, 'text/html')) + //Get nodes from index page links const nodes = Array.from( index.querySelectorAll('#episodes>a'), ) @@ -14,6 +21,7 @@ export async function fetchDbFromSite(siteUrl: string) { const db: DbEntry[] = [] + //Fill db with nodes for (const node of nodes) { const id = getNodeId(node) const title = node.title @@ -26,12 +34,20 @@ export async function fetchDbFromSite(siteUrl: string) { return db } -function getNodeId({ href }: { href: string }) { +/** + * Determine id from node link href attribute. + * @returns node id + */ +function getNodeId({ href }: { href: string }): number { const { pathname } = new URL(href) return Number.parseInt(pathname.slice(1, -5)) } -async function getNodeLinks({ href }: { href: string }) { +/** + * Get ids of nodes related to current nodes by listing all links in current node web page. + * @returns List of ids related to current node. + */ +async function getNodeLinks({ href }: { href: string }): Promise { const page = await fetch(href, { mode: 'no-cors' }) .then((response) => response.text()) .then((raw) => domParser.parseFromString(raw, 'text/html')) diff --git a/client/site_db_manual.ts b/client/site_db_manual.ts index bb567d3..7d78162 100644 --- a/client/site_db_manual.ts +++ b/client/site_db_manual.ts @@ -1,5 +1,7 @@ import { DbEntry } from '../datas.ts' +//! Manually fecthed datas +//! Output of `const db = await fetchDbFromSite('https://www.pierregrangepraderas.net')` run in console from the site. export const siteDb: DbEntry[] = [ { 'id': 2, diff --git a/server.tsx b/server.tsx index d46dcd2..62c9dca 100644 --- a/server.tsx +++ b/server.tsx @@ -2,6 +2,7 @@ import { bundle } from 'emit' import ssr from 'preact-render-to-string' import denoConfig from './deno.json' with { type: 'json' } +//Compile and bundle client script to js const script = await bundle('./script.tsx', { minify: true, type: 'module', @@ -12,6 +13,9 @@ const script = await bundle('./script.tsx', { 'importMap': { imports: denoConfig.imports }, }) +/** + * Page template + */ function Template() { return (