doc: add jsdoc
This commit is contained in:
parent
a0862ad35d
commit
d849fc358e
|
@ -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 (
|
||||
<main>
|
||||
|
|
|
@ -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<HTMLDivElement>(null)
|
||||
|
||||
|
@ -12,17 +16,26 @@ export function DbGraph({ db }: { db: DbEntry[] }) {
|
|||
return <div class='graph' ref={graph}></div>
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw db entries as vis network graph.
|
||||
* @param db - DB Entries.
|
||||
* @param graph - Container html reference.
|
||||
*/
|
||||
function drawDb({ db, graph }: { db: DbEntry[]; graph: Ref<HTMLDivElement> }) {
|
||||
|
||||
//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,
|
||||
|
|
|
@ -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<HTMLAnchorElement>('#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<number[]> {
|
||||
const page = await fetch(href, { mode: 'no-cors' })
|
||||
.then((response) => response.text())
|
||||
.then((raw) => domParser.parseFromString(raw, 'text/html'))
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 (
|
||||
<html lang='fr'>
|
||||
|
|
Loading…
Reference in a new issue