HipHop

Listening to oldskool hiphop, trying to restrain my head from hopping around.

Nearly forgot, I was wondering about dynamically loading #Transmission services from locations unkown before runtime. Claude gave me some suggestions.

TODO copy into Transmissions notes

13:33 and I still not really awake yet. Body a bit tired, I walked 14,163 steps yesterday! But I've 1 bottle of Peroni, 3 cans of Radler 2% shandy and some very poor ginger beer to lubricate.

Ok, quick stab at the markmap bits.

It's not obvious from the docs how to use the libs. See if Claude can help.

In ~/github-other$ :

git clone https://github.com/markmap/markmap.git

cd markmap

repopack --verbose -c /home/danny/github-danny/transmissions/repopack.config.json

Project created on Claude. System prompt & repopack added.

In ~github-danny/transmissions

npm install markmap-lib
npm install markmap-render
npm install markmap-view
npm install markmap-toolbar

Claudes first pass in :

~/github-danny/transmissions/raw-src/markmap/01.js

Wow, Claude got it right first time!

import { Transformer } from "markmap-lib";
import { fillTemplate } from "markmap-render";

const input = `# A markdown string
## another

* bullet1
* bullet2`;

// Step 1: Transform markdown to markmap data
const transformer = new Transformer();
const A = transformer.transform(input);

// Step 2: Get assets (CSS and JS) needed for rendering
const B = transformer.getAssets();

// Step 3: Generate HTML with embedded SVG
const C = fillTemplate(A.root, B);

// Now C contains the final HTML with embedded SVG

// console.log(A)
//console.log(B)
console.log(C);

The JSON structure I wanted to look at, A is :

{
  content: '# A markdown string\n## another\n\n* bullet1\n* bullet2',
  features: {},
  contentLineOffset: 0,
  root: {
    content: 'A markdown string',
    children: [ [Object] ],
    payload: { lines: '0,1' }
  }
}

Hmm. Not quite the intermediate representation I was hoping for, but presumably there's stuff in the [Object].

B is :

{
  styles: [
    { type: 'stylesheet', data: [Object] },
    { type: 'stylesheet', data: [Object] }
  ],
  scripts: [
    { type: 'iife', data: [Object] },
    { type: 'script', data: [Object] }
  ]
}

C is HTML with embedded SVG.

Claude also gave me code for getting just the SVG: In node it needs :

npm install jsdom

Code is in raw-src/markmap/02.js

Claude messed up trying to use lots of DOM. I'll leave SVG-alone alone for now.

I asked Claude about looking at the children object. He gave me :

function expandNode(node, depth = 0) {
  const indent = "  ".repeat(depth);
  console.log(`${indent}content: ${JSON.stringify(node.content)}`);
  if (node.payload) {
    console.log(`${indent}payload: ${JSON.stringify(node.payload)}`);
  }
  if (node.children && node.children.length > 0) {
    console.log(`${indent}children:`);
    node.children.forEach((child) => expandNode(child, depth + 1));
  }
}

# A markdown string
## another

* bullet1
* bullet2

This gave me :

content: "A markdown string"
payload: {"lines":"0,1"}
children:
  content: "another"
  payload: {"lines":"1,2"}
  children:
    content: "bullet1"
    payload: {"lines":"3,4"}
    content: "bullet2"
    payload: {"lines":"4,5"}

TODO incorporate markmap-toolbar

Dogwalk time.

HipHop