Communication between metadata and markdowns

[vmms]

Dany, please confirm me what is the json or some other method that you need to prepare the information that you need. for example: image, title, description, etc; everything you are going to use to generate the markdown.

[defdzg]

I've created an example for a JSON file that contains the title of the tutorial, the authors, the description of the tutorial and has objects for the step-by-step instructions.

{
    "title": "Slicer4Minute Tutorial",
    "authors": [
        "Sonia Pujol, Ph.D.",
        "Andras Lasso"
    ],
    "description": "This tutorial is a 4-minute introduction to Slicer.",
    "instructions": [
        {
            "action": "Download Slicer",
            "description": "Download Slicer software from the official website",
            "steps-to-follow": [
                "Go to the Slicer download page",
                "Download the software",
                "Install it on your computer"
            ],
            "image": "images/download.jpg"
        },
        {
            "action": "Explore the Interface",
            "description": "Explore the Slicer 3D visualization capabilities",
            "steps-to-follow": [
                "Familiarize yourself with the menus and tools",
                "Try out different features of the software",
                "Customize the interface as desired"
            ],
            "image": "images/interface.jpg"
        },
        {
            "action": "Load a scene",
            "description": "Load the MRML file wich contains the list of Slicer elements",
            "steps-to-follow": [
                "Choose a scenetemplate",
                "Customize the sceneas desired",
                "Load the scene"
            ],
            "image": "images/scene.jpg"
        }
    ]
}

[defdzg]

I'd like to know if the images to use here will already be annotated (the yellow dialog box that points to the UI element)?

[vmms]

I'd like to know if the images to use here will already be annotated (the yellow dialog box that points to the UI element)?

Yes, you already receive the image with the annotations that are needed (arrows, figures, icons)

[vmms]

@defdzg Dany, Can you try this JSON file and images that I generated to see if the format is correct or if any changes are needed, please? Archivo.zip

[defdzg]

I've implemented a new python script to create the Marp.app markdown file. I've installed the Marp.app extension for vscode to test how the tutorial slides would look like.

I believe we are on track to accomplish the task, although it still requires fine tuning.

This is the resulting file for the generated slides in PDF

import json

# Read JSON file
with open('sample.json', 'r') as f:
    data = json.load(f)

# Generate markdown content
markdown = f'''
---
marp: true
theme: default
paginate: true
---

# {data['title']}

Authors: {", ".join(data['authors'])}

{data['description'][0]}

---

'''

for instruction in data['instructions']:
    markdown += f'''
# {instruction['action']}

{instruction['description']}

Steps to follow:

'''

    for step in instruction['steps-to-follow']:
        markdown += f'- {step}\n'

    markdown += f'\n![width:230px]({instruction["image"]})\n'
    markdown += f'\n---\n'

# Save markdown as a text file
with open('tutorial.md', 'w') as f:
    f.write(markdown)