SHTML includes visualisieren

[Kebap]

Übersicht: Welche Datei wird wo eingebaut?
Damit Jekyll das auflösen und erben kann.

Als gerichteten Graph:

• Spontan online: https://csacademy.com/app/graph_editor/
• In Javascript zB mit https://js.cytoscape.org/
• Als eigenes Programm zB Gephi
• Stackedit.io benutzt Mermaid, um Markdown in Graphen umzuwandeln

Letzere haben auch nette Infos & Tutorials zu Graphentheorie allgemein, z.B.:

• Layout of large graphs: https://blog.js.cytoscape.org/2020/05/11/layouts/#the-problem-of-large-graphs
• Gephi Tutorial: https://vimeo.com/71760036

[Kebap]

Mal ein Beispiel mit paar Dateien und folgendem Tool: https://dreampuf.github.io/GraphvizOnline/

Folgende Daten:

digraph H {

    subgraph cluster_1 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    label = "community";
    
    "index.shtml";
    "nachruf.shtml";
  }
  
    subgraph cluster_2 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    label = "doc";
    
    "head.html";
    "navigation.html";
    "disclaimer.html";
  }
  
  subgraph cluster_3 {
    style=filled;
    color=lightgrey;
    label = "download";
    
    node [style=filled,color=white];
    "liste.html";
    
    node [style=filled,color=lightblue];
    "atlantis.shtml"; #done
    "index.shtml";    #done
    "mgc.shtml";      #skipped
    "mudlet.shtml";   #done
    "mush.shtml";     #skipped
    "putty.shtml";    #skipped
    "stunnel.shtml";  #skipped
    "tf.shtml";       #done
    "zmud.shtml";     #skipped
  }
  
  node [style=filled];

  "head.html" -> "atlantis.shtml";
  "navigation.html" -> "atlantis.shtml";
  "liste.html" -> "atlantis.shtml";
  "disclaimer.html" -> "atlantis.shtml";
  
  "head.html" -> "index.shtml";
  "navigation.html" -> "index.shtml";
  "liste.html" -> "index.shtml";
  "disclaimer.html" -> "index.shtml";
  
  "head.html" -> "mudlet.shtml";
  "navigation.html" -> "mudlet.shtml";
  "liste.html" -> "mudlet.shtml";
  "disclaimer.html" -> "mudlet.shtml";

  "head.html" -> "tf.shtml";
  "navigation.html" -> "tf.shtml";
  "liste.html" -> "tf.shtml";
  "disclaimer.html" -> "tf.shtml";
}

Ergebnis: Schon zu unübersichtlich (Linien überlappen)

[Kebap]

• Spontan online: https://csacademy.com/app/graph_editor/

Test hier zeigt ähnliche Verwirrung, wenn auch per Maus editierbar:

dafür ist Quellcode deutlich übersichtlicher:

"head.html" "atlantis.shtml"
"navigation.html" atlantis.shtml
"liste.html" "atlantis.shtml"
"disclaimer.html" "atlantis.shtml"
  
"head.html" "index.shtml"
"navigation.html" index.shtml
"liste.html" "index.shtml"
"disclaimer.html" "index.shtml"
  
"head.html" "mudlet.shtml"
"navigation.html" mudlet.shtml
"liste.html" "mudlet.shtml"
"disclaimer.html" "mudlet.shtml"

"head.html" "tf.shtml"
"navigation.html" tf.shtml
"liste.html" "tf.shtml"
"disclaimer.html" tf.shtml

nur Gruppierungen sind nicht drin, und gegen doppelte Dateinamen braucht der Name wohl den kompletten Pfad.

[Kebap]

Vielleicht erstmal alle gruppieren, die einfach bloß Head, Navigation und Disclaimer inkludieren. Oder häufigere Variationen davon.
In der Visualisierung dann nur noch darüber hinaus gehende Besonderheiten. Sollten deutlich weniger sein.