Journal d'un Terrien

Web log de Serge Boisse

On line depuis 1992 !

Si cette page vous a plu, Copiez son adresse et partagez-la !
http://sboisse.free.fr/programmation/Publier des notes Obsidian sur le web/Essai de clone de Obsidian Help.php

Savez-vous quels sont les articles les plus vendus sur Amazon.fr ?

Bricolage Hygiène santé Mode Beauté Maison Sport et loisirs Livres Gadgets

Essai de clone de Obsidian Help

Voir aussi: mettre ici des liens entre vers des sujets voisins
_Publier le contenu d'Obsidian sur un site
programmation de Plugins Obsidian

Essai de clone de Obsidian Help

Je vais essayer de cloner au moins la page d'accueil de ObisidanHelp ( web) pour voir comment c'est fait.

J'ai mis le résultat de cette première tentative de clone dans CloneObsidianHelp (répertoire sur D)(lien privé)

Attention

Dernière minute : il semble que ça peut être fait avec Mindstone

Cf : Clone de Obsidian Help avec Mindstone (page web)

examen avec le débugger

On ouvre chrome sur la page, Donc ^i pour ouvrir le debugger (cf doc sur cette page web), onglet "sources" et ^P dans la fenêtre pour avoir la liste des fichiers :

Pasted image 20221116204618.png

Je recopie le dossier "public" avec des polices et une image. OK

Le fichier par défaut du répertoire semble être "Obsidian/index" (sans extension, donc paramètre du serveur web)... Je le renomme index.html

le dossier "lib" me dit que le site utilise purify (vérificateur de code) et pixi.js (moteur de rendu 2D WebGL), je suppose pour le graph view

App.js est un énorme fichier, App.css aussi...

Il y a aussi un fichier sur help.obsidian.md dont le nom est crypté : 3217b96a-f4ef-40e4-8560-fecfe4525958, mais qui contient du code js. sa fonction n'est pas claire mais ça à l'air lié au graphe.

Enfin, WASM est un fichier source assembleur machine virtuelle...
Premier problème, dans le fichier "index" il y a plein de paramètres de sécurité...
et puis ce script :

window.siteInfo={"uid":"f786db9fac45774fa4f0d8112e232d67","host":"publish-01.obsidian.md","status":"active","slug":null,"redirect":1,"customurl":"help.obsidian.md"}

Dont je me demande à quoi il sert... (en fait voir ligne 20992 de app.js pour uid, et chercher slug et customurl)

En fait dans l'index il n'y a presque rien sauf le header `'.

C'est app.js qui fait tout le travail . Je l'ai Déminimisé (web) Pff.. 21144 lignes de code js obscurci...

Essayons de décoder ça :

la structure globale du fichier est une fonction anonyme sans arguments :

(()=>{
// texte...
} // ligne 21143 !
)();

Dans le texte, on a la définition de deux variables, e et t
e est un objet qui contient des fonctions d'argument e, et dont les noms sont des numéros.

(()=>{
	var e = { // ligne 2
	 // ...
	}
	, t = {}; // ligne 5847
	// function r(n) {...}
	// ensuite on a des fonctions globales qui définissent des classes
	// r(n) // ligne 5848
	/** méthodes : 
	r.n
	r.d
	r.g
	r.o ligne 5884 
	puis une fonction anonyme qui semble le "main"
	**/
	(()=>{ // ligne 5885
		//...
	    } // ligne 21141 !
		)()
	} // fin de la fonction ligne 1
)(); // FIN DU FICHIER ligne 21144

Première Execution avec le débugger :

Je lance index.html

on crée e et sa centaine de méthodes "numériques", puis r, les fonctions r.n, etc. puis l'éxécution saute dans "content.js" qui est en fait chrome-extension://elicpjhcidhpjomhibiffojpinpmmpil/video/content.js ? mais ça semble lié à adblock... de ma config chrome (en fait non)... je le télécharge...
Ensuite on arrive à la ligne 21130 window.addEventListener("load",...) qui ajoute des event handlers sur document.body (mouse over, mouse out, mouseup)
A partir de là on a pour la première fois quelque chose dans la fenêtre : une icone gif de chargement
Ensuite ça saute à la ligne 133 de content.js et timeout...
puis ligne 6417 de l'index qui crée une fonction onload, encore...
puis ligne 6521, et on a le titre "Obsidian Help" qui s'affiche ! retour à 6417, une boucle semble créer un par un les éléments : le bandeau droite, etc.
ça semble très compliqué...

ça marche ! Tout s'affiche.. Mais il y a des problèmes.

Pasted image 20221125225818.png

Examen du HTML après execution du js :

On le récupère avec le débugger ("éléments, html, clic droit, "edit as html")

cf fichier index APRES EXECUTION JS.html (Fichier sur D)(lien privé) Attention le lien ouvre le navigateur !

On y voit toute la page "index" sauf le graphe... ça reste responsive au resize, sauf le bouton menu lorsque c'est très étroit, qui ne s'ouvre pas. Les liens dans les menus ne marchent pas. Idem pour le toggle dark/light, le graphe... en fait aucune interaction par clic.

Je l'ai édité pour le rendre plus lisible (notamment les indentations)

structure de base de la page web

La structure de base de chaque page du site ObisidanHelp ( web) est très simple :
index après éxécution du js (Fichier sur D)(lien privé)

<html>
<head>
...titre, méta, icônes et appelle le script app.js
</head>
<body class="theme-light">
--- set site info et charge purify
<div class="published-container print is-readable-line-width has-navigation has-graph has-outline">
	<div class="loader-cube" style="display: none;">...</div>
	<div class="site-body">
		<div class="site-body">
			<div class="site-body-left-column">
			...site logo, site name, toggle, search, nav
			</div>
			<div class="site-body-center-column">
			... header, render_container, texte
			</div>
			<div class="site-body-right-column">
			... graph view, table of contents
			</div>
		</div>
	</div>
	<div class="nav-backdrop"></div>
</div>
... chargement de pixi.js (pour le graphique de droite)
</body>
</html>

On notera qu'il n'y a aucun autre appel de script dans le html en dehors de purify et pixi, c'est donc app.js qui gère toute l'interaction

interaction

Pourquoi les clics ne font rien ? GRRR !

J'installe purify et jsdom...
npm install dompurify
npm install jsdom

ça change pas grand chose.

Commentaires

Commentaires (0) :

Page :

Ajouter un commentaire (pas besoin de s'enregistrer)

En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !
Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.

< Retour en haut de la page