img/steps.svg

<svg viewBox="0 0 1200 456" width="1200" height="456" xmlns ="http://www.w3.org/2000/svg">

	<defs>
		<clipPath id="round-left-corners">
			<rect x="0" y="0" width="100" height="100%" rx="8" ry="8"/>
		</clipPath>
	</defs>
	<style>
		.code { font: 17px Consolas; fill: rgba(220, 220, 220, 255); dominant-baseline: hanging; }
		.code-background { fill: #161b22; }
		.code-background-linenumber { fill: #111418; }
		.c-ln { font: 17px Consolas; fill: #2b90af; text-anchor: end; pointer-events: none; user-select: none; dominant-baseline: hanging; }
		.c-keyword { fill: rgba(86, 156, 214, 255); }
		.c-control { fill: rgba(216, 160, 223, 255); }
		.c-string { fill: rgba(214, 157, 133, 255); }
		.c-numeric { fill: rgba(181, 207, 168, 255); }
		.c-comment { fill: rgba(87, 166, 74, 255); }
		.c-class { fill: rgba(78, 201, 176, 255); }
		.c-interface { fill: rgba(184, 215, 163, 255); }
		.c-enum { fill: rgba(184, 215, 163, 255); }
		.c-structure { fill: rgba(134, 198, 145, 255); }
		.c-method { fill: rgba(220, 220, 170, 255); }
		.c-parameter { fill: rgba(156, 220, 254, 255); }
		.c-local { fill: rgba(156, 220, 254, 255); }
		.c-pn { fill: rgba(215, 186, 125, 255); }
		.c-kw { fill: rgba(86, 156, 214, 255); }
		.c-s { fill: rgba(214, 157, 133, 255); }
		.c-es { fill: rgba(255, 214, 143, 255); }
		.c-n { fill: rgba(181, 206, 168, 255); }
		.c-c { fill: rgba(87, 166, 74, 255); }
	</style>
	<rect x="0" y="0" width="100%" height="100%" rx="8" ry="8" class="code-background" />
	<rect x="0" y="0" width="46" height="100%" class="code-background-linenumber" clip-path="url(#round-left-corners)" />	<text x="38" y="10" class="c-ln">1</text>
	<text x="38" y="31" class="c-ln">2</text>
	<text x="38" y="52" class="c-ln">3</text>
	<text x="38" y="73" class="c-ln">4</text>
	<text x="38" y="94" class="c-ln">5</text>
	<text x="38" y="115" class="c-ln">6</text>
	<text x="38" y="136" class="c-ln">7</text>
	<text x="38" y="157" class="c-ln">8</text>
	<text x="38" y="178" class="c-ln">9</text>
	<text x="38" y="199" class="c-ln">10</text>
	<text x="38" y="220" class="c-ln">11</text>
	<text x="38" y="241" class="c-ln">12</text>
	<text x="38" y="262" class="c-ln">13</text>
	<text x="38" y="283" class="c-ln">14</text>
	<text x="38" y="304" class="c-ln">15</text>
	<text x="38" y="325" class="c-ln">16</text>
	<text x="38" y="346" class="c-ln">17</text>
	<text x="38" y="367" class="c-ln">18</text>
	<text x="38" y="388" class="c-ln">19</text>
	<text x="38" y="409" class="c-ln">20</text>
	<text x="38" y="430" class="c-ln">21</text>
	<text x="64" y="10" class="code"><tspan class="c-keyword">public</tspan> <tspan class="c-keyword">static</tspan> <tspan class="c-class">Gadget</tspan> <tspan class="c-method">CreateGadget</tspan>()</text>
	<text x="64" y="31" class="code">{</text>
	<text x="64" y="52" class="code">    <tspan class="c-control">return</tspan> <tspan class="c-class">Gadget</tspan>.<tspan class="c-method">Create</tspan>()</text>
	<text x="64" y="73" class="code">        .<tspan class="c-method">UseStep</tspan>(<tspan class="c-class">Gadget</tspan>.<tspan class="c-method">Create</tspan>()</text>
	<text x="64" y="94" class="code">            .<tspan class="c-method">UseTask</tspan>(<tspan class="c-keyword">async</tspan> (<tspan class="c-parameter">gadgetRuntime</tspan>, <tspan class="c-parameter">cancellationToken</tspan>) <tspan class="c-method">=&gt;</tspan></text>
	<text x="64" y="115" class="code">            {</text>
	<text x="64" y="136" class="code">                <tspan class="c-class">Console</tspan>.<tspan class="c-method">WriteLine</tspan>(<tspan class="c-string">"Started Step 1"</tspan>);</text>
	<text x="64" y="157" class="code">                <tspan class="c-keyword">await</tspan> <tspan class="c-class">Task</tspan>.<tspan class="c-method">Delay</tspan>(<tspan class="c-numeric">1000</tspan>, <tspan class="c-parameter">cancellationToken</tspan>);</text>
	<text x="64" y="178" class="code">                <tspan class="c-class">Console</tspan>.<tspan class="c-method">WriteLine</tspan>(<tspan class="c-string">"Completed Step 1"</tspan>);</text>
	<text x="64" y="199" class="code">            })</text>
	<text x="64" y="220" class="code">        )</text>
	<text x="64" y="241" class="code">        .<tspan class="c-method">UseStep</tspan>(<tspan class="c-class">Gadget</tspan>.<tspan class="c-method">Create</tspan>()</text>
	<text x="64" y="262" class="code">            .<tspan class="c-method">UseTask</tspan>(<tspan class="c-keyword">async</tspan> (<tspan class="c-parameter">gadgetRuntime</tspan>, <tspan class="c-parameter">cancellationToken</tspan>) <tspan class="c-method">=&gt;</tspan></text>
	<text x="64" y="283" class="code">            {</text>
	<text x="64" y="304" class="code">                <tspan class="c-class">Console</tspan>.<tspan class="c-method">WriteLine</tspan>(<tspan class="c-string">"Started Step 2"</tspan>);</text>
	<text x="64" y="325" class="code">                <tspan class="c-keyword">await</tspan> <tspan class="c-class">Task</tspan>.<tspan class="c-method">Delay</tspan>(<tspan class="c-numeric">1000</tspan>, <tspan class="c-parameter">cancellationToken</tspan>);</text>
	<text x="64" y="346" class="code">                <tspan class="c-class">Console</tspan>.<tspan class="c-method">WriteLine</tspan>(<tspan class="c-string">"Completed Step 2"</tspan>);</text>
	<text x="64" y="367" class="code">            })</text>
	<text x="64" y="388" class="code">        )</text>
	<text x="64" y="409" class="code">        .<tspan class="c-method">Build</tspan>(<tspan class="c-string">"processing-gadget"</tspan>);</text>
	<text x="64" y="430" class="code">}</text>
</svg>