refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/learning. Install with npm install @refrakt-md/learning and add "@refrakt-md/learning" to the packages array in your refrakt.config.json.

HowTo

Step-by-step how-to instructions. Unordered lists become tools/materials needed, ordered lists become steps.

Basic usage

A how-to guide with required tools and numbered steps.

{% howto estimatedTime="PT1H" difficulty="medium" %}
# How to Set Up a Development Environment

You will need these tools:

- Node.js 18+
- Git
- A code editor (VS Code recommended)

1. Install Node.js from the official website
2. Clone the repository with `git clone`
3. Run `npm install` to install dependencies
4. Start the dev server with `npm run dev`
{% /howto %}
<article data-field="content-section" data-rune="how-to" typeof="HowTo">
  <meta content="PT1H" data-field="estimated-time" property="totalTime">
  <meta content="medium" data-field="difficulty">
  <header>
    <h1 id="how-to-set-up-a-development-environment" data-name="headline" property="name">How to Set Up a Development Environment</h1>
    <p data-name="blurb" property="description">You will need these tools:</p>
  </header>
  <ul data-name="tools">
    <li data-name="tool" typeof="HowToTool" property="tool">
      <p property="name">Node.js 18+</p>
    </li>
    <li data-name="tool" typeof="HowToTool" property="tool">
      <p property="name">Git</p>
    </li>
    <li data-name="tool" typeof="HowToTool" property="tool">
      <p property="name">A code editor (VS Code recommended)</p>
    </li>
  </ul>
  <ol data-name="steps">
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">Install Node.js from the official website</p>
    </li>
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">
        Clone the repository with
        <code>git clone</code>
      </p>
    </li>
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">
        Run
        <code>npm install</code>
        to install dependencies
      </p>
    </li>
    <li data-name="step" typeof="HowToStep" property="step">
      <p property="text">
        Start the dev server with
        <code>npm run dev</code>
      </p>
    </li>
  </ol>
</article>
Est. time:1hDifficulty:medium

How to Set Up a Development Environment

You will need these tools:

  • Node.js 18+

  • Git

  • A code editor (VS Code recommended)

  1. Install Node.js from the official website

  2. Clone the repository with git clone

  3. Run npm install to install dependencies

  4. Start the dev server with npm run dev

<article data-field="content-section" typeof="HowTo" class="rf-howto rf-howto--PT1H rf-howto--medium" data-estimated-time="PT1H" data-difficulty="medium" data-rune="how-to" data-density="full">
  <div data-name="meta" class="rf-howto__meta" data-section="header">
    <span data-name="meta-item" data-meta-type="temporal" data-meta-rank="primary" class="rf-howto__meta-item">
      <span data-meta-label="">Est. time:</span>
      <span data-meta-value="">1h</span>
    </span>
    <span data-name="meta-item" data-meta-type="category" data-meta-rank="primary" class="rf-howto__meta-item">
      <span data-meta-label="">Difficulty:</span>
      <span data-meta-value="">medium</span>
    </span>
  </div>
  <div data-name="content" class="rf-howto__content" data-section="body">
    <meta content="PT1H" data-field="estimated-time" property="totalTime" />
    <meta content="medium" data-field="difficulty" />
    <header data-name="preamble" class="rf-howto__preamble" data-section="preamble">
      <h1 id="how-to-set-up-a-development-environment" data-name="headline" property="name" class="rf-howto__headline" data-section="title">How to Set Up a Development Environment</h1>
      <p data-name="blurb" property="description" class="rf-howto__blurb" data-section="description">You will need these tools:</p>
    </header>
    <ul data-name="tools" class="rf-howto__tools">
      <li data-name="tool" typeof="HowToTool" property="tool" class="rf-howto__tool">
        <p property="name">Node.js 18+</p>
      </li>
      <li data-name="tool" typeof="HowToTool" property="tool" class="rf-howto__tool">
        <p property="name">Git</p>
      </li>
      <li data-name="tool" typeof="HowToTool" property="tool" class="rf-howto__tool">
        <p property="name">A code editor (VS Code recommended)</p>
      </li>
    </ul>
    <ol data-name="steps" class="rf-howto__steps" data-sequence="numbered">
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">Install Node.js from the official website</p>
      </li>
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">
          Clone the repository with 
          <code>git clone</code>
        </p>
      </li>
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">
          Run 
          <code>npm install</code>
           to install dependencies
        </p>
      </li>
      <li data-name="step" typeof="HowToStep" property="step" class="rf-howto__step">
        <p property="text">
          Start the dev server with 
          <code>npm run dev</code>
        </p>
      </li>
    </ol>
  </div>
</article>

Attributes

AttributeTypeDefaultDescription
estimatedTimestring—Estimated time in ISO 8601 duration (e.g. "PT1H")
difficultystring—Difficulty level: easy, medium, or hard

Section header

How-to supports an optional eyebrow, headline, and blurb above the section above the steps. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration