Where to find scratch blocks renderer (markdown icons)

[Brackets-Coder]

I'd like to add Icon support to markdown documentation scratchblocks, but I can't seem to find the renderer.

I looked through documentation/docs-template.ejs and found this:

But that directory is no where in turbowarp...? I found it through the sources tab in the web inspector but I dont have any idea where its coming from

[GarboMuffin]

That file is hardcoded here:

extensions/development/builder.js

Lines 805 to 810 in 4f6f86a

	// Don't rely on node_modules being stored in a specific location or having a specific structure
	// so that this works when we are a dependency in a bigger npm tree.
	const scratchblocksPath = require.resolve("@turbowarp/scratchblocks");
	build.files["/docs-internal/scratchblocks.js"] = new BuildFile(
	scratchblocksPath
	);

But the important part is that it's a very slightly modified version of https://scratchblocks.github.io/

The only significant change we make is deleting the Scratch 2 code because we don't use that mode

[Brackets-Coder]

Thanks

[Brackets-Coder]

scratch3/blocks.js

supports icons:

export class IconView {
  constructor(icon) {
    Object.assign(this, icon)

    const info = IconView.icons[this.name]
    if (!info) {
      throw new Error(`no info for icon: ${this.name}`)
    }
    Object.assign(this, info)
  }

  get isIcon() {
    return true
  }

  draw(iconStyle) {
    return SVG.symbol(`#sb3-${iconName(this.name, iconStyle)}`, {
      width: this.width,
      height: this.height,
    })
  }

  static get icons() {
    return {
      greenFlag: { width: 20, height: 21, dy: -2 },
      stopSign: { width: 20, height: 20 },
      turnLeft: { width: 24, height: 24 },
      turnRight: { width: 24, height: 24 },
      loopArrow: { width: 24, height: 24 },
      addInput: { width: 4, height: 8 },
      delInput: { width: 4, height: 8 },
      list: { width: 15, height: 18 },
      musicBlock: { width: 40, height: 40 },
      penBlock: { width: 40, height: 40 },
      videoBlock: { width: 40, height: 40, dy: 10 },
      ttsBlock: { width: 40, height: 40 },
      translateBlock: { width: 40, height: 40 },
      wedoBlock: { width: 40, height: 40 },
      ev3Block: { width: 40, height: 40 },
      microbitBlock: { width: 40, height: 40 },
      makeymakeyBlock: { width: 40, height: 40 },
      gdxforBlock: { width: 40, height: 40 },
      boostBlock: { width: 40, height: 40 },
    }
  }
}

I'm assuming it's the markdown renderer that doesn't?

[GarboMuffin]

Custom icons don't exist in scratchblocks and no one has felt like proposing a way for those to work yet

[Brackets-Coder]

Ah I see now.

Custom icons defined like this:

blockIcon: {"data:image/svg+xml;base64,..."},
... more icons if you like

then used like this:

blockIcon :: do something with [value] :: #0fbd8c

or like this for inline icons:

blockIcon :: when {greenFlagIcon} clicked :: #0fbd8c hat

of course all of that would be wrapped in "```scratch" code

[Brackets-Coder]

Would something like that even be possible?

[CST1229]

i feel like it would be better to use the existing @icon syntax scratchblocks has (maybe even a way to define "custom categories" that have a color and optionally an extension icon + divider line at the start)

[Brackets-Coder]

I don't know, it seems very complicated and very interconnected and I don't know that I have time to do this along with the other PRs I have open

[Brackets-Coder]

I think I figured it out so I'll get started on a new branch