‎

Acerca de la página

La página esta compuesta de archivos html estáticos generados por org-publish a partir de notas de org-mode en texto plano. Elementos de la wiki y bibliografía de cada página fue manejada mediante org-roam antes de ser exportados de la misma manera. Está inspirada en páginas como esta. Está albergada en un VPS barato, y corre en Debian GNU/Linux. Esta guía cubre este tema de manera muy sencilla. A continuación comparto mi configuración de GNU Emacs y el script de python para generar el gráfico de redes de la wiki:

Org publish (plantillas)

(setq org-publish-project-alist
          '(("wiki"
                 :base-directory "~/emaacs/org-roam"
                 :base-extension "org"
                 :publishing-directory "~/emaacs/output/pagina/public/wiki/"
                 :recursive t
                 :with-author nil
                 :with-email nil
                 :with-date nil
                 :with-creator t
                 :with-timestamps nil
                 :publishing-function org-html-publish-to-html
                 :headline-levels 4
                 :section-numbers nil
                 :html-head "<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/wiki_style.css\" />"
                 :html-head-include-default-style nil
                 :html-head-include-scripts nil
                 :auto-sitemap t
                 :sitemap-filename "index.org"
                 :sitemap-title "Wiki"
                 :html-preamble "<nav class=\"navbar\">
  <div class=\"nav-container\">
    <a href=\"/\" class=\"nav-logo\">bananacore.xyz</a>
    <ul class=\"nav-menu\">
      <li><a href=\"/\">Acerca de</a></li>
      <li><a href=\"/links.html\">Notas</a></li>
      <li><a href=\"/wiki/index_with_graph.html\" style=\"background-color: #e0f0ff; color: #003366\">Wiki</a></li>
    </ul>
  </div>
</nav>"
                 )
            ("pagina"
                 :base-directory "~/emaacs/templ_pages_ban/"
                 :base-extension "org"
                 :publishing-directory "~/emaacs/output/pagina/public/"
                 :recursive t
                 :with-author nil
                 :with-email nil
                 :with-date nil
                 :with-creator t
                 :with-timestamps nil
                 :publishing-function org-html-publish-to-html
                 :headline-levels 4
                 :section-numbers nil
                 :html-head "<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/style.css\" />"
                 :html-head-include-default-style nil
                 :html-head-include-scripts nil
                 :html-preamble "<nav class=\"navbar\">
  <div class=\"nav-container\">
    <a href=\"/\" class=\"nav-logo\">bananacore.xyz</a>
    <ul class=\"nav-menu\">
      <li><a href=\"/\">Acerca de</a></li>
      <li><a href=\"/links.html\">Notas</a></li>
      <li><a href=\"/wiki/index_with_graph.html\">Wiki</a></li>
    </ul>
  </div>
</nav>"
                 )
                ))


(setq org-export-time-stamp-file nil)

Org-roam

(setq org-roam-directory (file-truename "~/emaacs/org-roam"))
(org-roam-db-autosync-mode)

Script para gráfico

Paquetes necesarios: bs4, networkx, numpy, pyvis

  import os, re
from bs4 import BeautifulSoup
import networkx as nx
import numpy as np
from pyvis.network import Network

HTML_DIR = "/home/usuario/emaacs/output/pagina/public/wiki"
INDEX_FILE = os.path.join(HTML_DIR, "index.html")
OUTPUT_FILE = os.path.join(HTML_DIR, "index_with_graph.html")

# --- Build directed graph ---
G = nx.DiGraph()

def is_valid_note_link(href):
    if href.startswith("#") or href.startswith(("http", "mailto:")):
        return False
    if not href.endswith(".html") and ".html#" not in href:
        return False
    if "index.html" in href or "index_with_graph.html" in href:
        return False
    return True

# --- Parse all notes and collect links ---
for filename in os.listdir(HTML_DIR):
    if not filename.endswith(".html"):
        continue
    if filename in ("index.html", "index_with_graph.html"):
        continue
    filepath = os.path.join(HTML_DIR, filename)
    with open(filepath, "r", encoding="utf-8") as f:
        soup = BeautifulSoup(f, "html.parser")

    for a in soup.find_all("a", href=True):
        href = a["href"]
        if not is_valid_note_link(href):
            continue
        target = href.split("#")[0]
        if os.path.exists(os.path.join(HTML_DIR, target)):
            G.add_edge(filename, target)

# --- Node size by degree ---
for node in G.nodes:
    G.nodes[node]["size"] = np.log(G.degree(node) + 1) * 5

# --- Build Pyvis network ---
net = Network(height="300px", width="100%", directed=True,
              bgcolor="#0E0E0E", font_color="#fffff")
net.from_nx(G)

def clean_label(filename):
    name = os.path.basename(filename)
    name = re.sub(r'^\d{14}-', '', name)
    return name.replace(".html", "")

for node in net.nodes:
    node_id = node["id"]
    label = clean_label(node_id)
    node["label"] = label
    node["title"] = label
    node["size"] = G.nodes[node_id]["size"]
    node["url"] = node_id

# --- Generate temporary full HTML ---
tmpfile = os.path.join(HTML_DIR, "graph_fragment.html")
net.write_html(tmpfile, notebook=False)

# --- Extract only the necessary fragment ---
with open(tmpfile, encoding="utf-8") as f:
    soup = BeautifulSoup(f, "html.parser")

# gather includes (CSS+JS)
includes = "\n".join(
    str(tag) for tag in soup.find_all(["link", "script"])
    if "vis-network" in str(tag)
)
# gather styles
style = soup.find("style")
# gather graph div
div = soup.find("div", id="mynetwork")
# gather JS scripts (edges, nodes, drawGraph)
scripts = "\n".join(
    str(tag) for tag in soup.find_all("script")
    if any(key in str(tag) for key in ("var edges", "var nodes", "drawGraph"))
)

# add interactivity
click_js = """
<script type="text/javascript">
network.on("click", function (params) {
  if (params.nodes.length === 1) {
    var node_id = params.nodes[0];
    var node = nodes.get(node_id);
    if (node.url) {
      window.location.href = node.url;
    }
  }
});
</script>
"""

fragment_html = (
    includes
    + (str(style) if style else "")
    + str(div)
    + scripts
    + click_js
)

# --- Merge into index.html cleanly ---
with open(INDEX_FILE, encoding="utf-8") as f:
    index_html = f.read()

insert_point = index_html.find("</h1>")
if insert_point == -1:
    insert_point = index_html.find("</body>")
if insert_point == -1:
    insert_point = len(index_html)

new_html = (
    index_html[:insert_point]
    + "<br><br>"
    + "\n\n<div id='graph-container'>\n"
    + fragment_html
    + "\n</div>\n"
    + "<br><br><br>"
    + index_html[insert_point:]
)

# --- Write output ---
with open(OUTPUT_FILE, "w", encoding="utf-8") as f:
    f.write(new_html)

os.remove(tmpfile)

Acerca de mí

Mi nombre es Rodrigo. Esta página es una manera conveniente de organizar y mantener mis apuntes. También planeo escribir proximamente sobre temas que me interesan. Gracias por tu visita.

Intereses

Novelas del siglo XX. Autores favoritos: A. Malraux, M. ~~Houleqeq~~ ~~Houllebeq~~ ~~Holleqbec~~ Houellebecq, E. Hemingway, L.Ferdinand Céline, V. Nabokov, J. Kerouac, R. Arlt, J. Donoso, JM. Arguedas, Edgard Norabuena Figueroa.
Música (música fea como breakcore, hardcore, speedcore, gabber, chiptune, eurobeat, italo-disco; dream pop y géneros relacionados; música doujin de touhou, denpa, j-pop; punk, metal, grindcore).
Historia económica (la gran divergencia, política industrial, planificación económica).
Neurociencia (neurofisiología, metodos electrofisiológicos, comportamiento).

Contacto

Mi correo principal es rodrigo.caceres1@unmsm.edu.pe. Esta es mi clave PGP pública para comunicación encriptada: