namestring A string describing the guide. This can be provided using route meta on the title key, see defaults.
stepHowToStep[]. An array of objects describing the steps in the guide. Appends the HowToStep entries on to the HowTo. Completes @type and resolves url and image.
defineHowTo({ name: 'How to tie a tie', step: [ { url: '#step-one', text: 'Button your shirt how you\'d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.', image: '/1x1/photo.jpg', }, { url: '#step-two', text: 'Cross the long end over the short end. This will form the basis for your knot.', image: '/1x1/photo.jpg', }, { url: '#step-three', text: 'Bring the long end back under the short end, then throw it back over the top of the short end in the other direction. ', image: '/1x1/photo.jpg', }, { text: 'Now pull the long and through the loop near your neck, forming another loop near your neck.', image: '/1x1/photo.jpg', }, { text: 'Pull the long end through that new loop and tighten to fit! ', image: '/1x1/photo.jpg', }, ]})
/** * Instructions that explain how to achieve a result by performing a sequence of steps. */exportinterfaceHowToSimpleextendsThing {/** * A string describing the guide. */name:string/** * An array of howToStep objects */step:NodeRelations<HowToStep|string>[]/** * The total time required to perform all instructions or directions (including time to prepare the supplies), * in ISO 8601 duration format. */totalTime?:string/** * Introduction or description content relating to the HowTo guide. */description?:string/** * The language code for the guide; e.g., en-GB. */inLanguage?:string/** * The estimated cost of the supplies consumed when performing instructions. */estimatedCost?:string|unknown/** * Image of the completed how-to. */image?:NodeRelations<ImageObject|string>/** * A supply consumed when performing instructions or a direction. */supply?:string|unknown/** * An object used (but not consumed) when performing instructions or a direction. */tool?:string|unknown/** * A video of the how-to. Follow the list of required and recommended Video properties. * Mark steps of the video with hasPart. */video?:NodeRelations<VideoObject|string>}
exportinterfaceHowToStepSimpleextendsThing {/** * A link to a fragment identifier (an 'ID anchor') of the individual step * (e.g., https://www.example.com/example-page/#recipe-step-5). */url?:string/** * The instruction string * ("e.g., "Bake at 200*C for 40 minutes, or until golden-brown, stirring periodically throughout"). */text:string/** * The word or short phrase summarizing the step (for example, "Attach wires to post" or "Dig"). * Don't use non-descriptive text (for example, "Step 1: [text]") or other form of step number (for example, "1. [text]"). */name?:string/** * An image representing the step, referenced by ID. */image?:NodeRelations<ImageObject|string>/** * A video for this step or a clip of the video. */video?:NodeRelations<VideoObject|string>/** * A list of detailed substeps, including directions or tips. */itemListElement?:NodeRelations<HowToDirection|string>[]}