Migrate {image} to ![]()

[anbraten]

closes #1501

The script I've used to migrate

import fs from "fs/promises";
import path from "path";

async function* walk(dir) {
  for await (const d of await fs.opendir(dir)) {
    const entry = path.join(dir, d.name);
    if (d.isDirectory()) yield* walk(entry);
    else if (d.isFile()) yield entry;
  }
}

function convertMarkdownToImageMarkdown(markdown: string): string {
  const detectedImageMarkdown = markdown.match(/\`\`\`\{image\}.*?\`\`\`/gis);

  for (const imageMarkdown of detectedImageMarkdown || []) {
    const imageMarkdownParts = imageMarkdown.split("\n");
    const altText = imageMarkdownParts
      .find((part) => part.startsWith(":alt:"))
      ?.replace(":alt:", "")
      .trim();
    const width = imageMarkdownParts
      .find((part) => part.startsWith(":width:"))
      ?.replace(":width:", "")
      .trim();
    const image = imageMarkdownParts
      .find((part) => part.startsWith("```{image}"))
      ?.replace("```{image}", "")
      .trim();

    if (altText && image) {
      const newImageMarkdown = `![${altText}](${image}${
        width ? ` =${width}` : ""
      })`;
      markdown = markdown.replace(imageMarkdown, newImageMarkdown);
    }
  }

  return markdown;
}

async function main() {
  for await (const p of walk(path.join(__dirname, "docs"))) {
    if (p.endsWith(".md")) {
      const markdown = await fs.readFile(p, "utf-8");
      const newMarkdown = convertMarkdownToImageMarkdown(markdown);
      await fs.writeFile(p, newMarkdown, "utf-8");
    }
  }
}

main();

[peterleimbach]

@psonnera Anton wants to correct the Sphinx syntax to markdown syntax. What do you think shall we merge now or wait for our test with image sizes which need the Sphinx syntax?

[psonnera]

@peterleimbach as Markdown doesn't allow image sizing, we might get some using full frame width if they were captured with more than the recommended format. Still, this shouldn't be an issue for phone browsers and even if computer users will have some big ones we probably can review them later. @anbraten script migration sounds like a good idea. We will resume and implement the final image size later.

[anbraten]

Seems like its possible to set custom image sizes with myst using markdown as well: ![fishy](img/fun-fish.png){.bg-warning w=100px align=center} https://myst-parser.readthedocs.io/en/latest/syntax/images_and_figures.html

Using standard markdown sytanx wherever possible will porbably bring the most flexibility in editors / frameworks in the long term.

[psonnera]

@anbraten yes, we just need @peterleimbach to confirm it is portable into Crowdin

[anbraten]

Will also have a look at crowdin again and test it as well. I've created a test crowdin project with the translation to tryout some things recently, as I also wanted to help improving the general experience for translators.

[psonnera]

@anbraten Sphinx doesn't seem to accept the syntax. I now remember I moved all to html syntax in Nightscout after migrating from MkDocs because of this bug.

[psonnera]

@anbraten my bad, needed to add a piece https://myst-parser.readthedocs.io/en/latest/syntax/optional.html#syntax-attributes-inline
@peterleimbach FYI

[anbraten]

@psonnera I've added the extension and migrated all images again. While checking I however actually noticed that scaled images are currently only used in docs/EN/Sandbox/imagescaling.md and docs/EN/changelanguage.md anyways.

[peterleimbach]

@anbraten Thank you.