[turtle] Output LOGO code too

Author: LeaVerou

demos/turtle/index.html

@@ -29,11 +29,18 @@ <h1><img id="turtle_image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org
 
 	<div class="mv-bar" mv-bar="with import export clear"></div>
 	<details>
-		<summary class="button mv-code-js">Code (JS)</summary>
+		<summary class="button code-js">Code (JS)</summary>
 		<div>
 			<textarea>[code_before][code]</textarea>
 		</div>
 	</details>
+	<details>
+		<summary class="button code-logo">Code (LOGO)</summary>
+		<div>
+			<textarea>[logo_code]</textarea>
+		</div>
+	</details>
+
 
 	<section>
 		<input type="number" property="width" value="1000" /> &times;
@@ -63,6 +70,7 @@ <h1><img id="turtle_image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org
 					<option value="1">clockwise</option>
 					<option value="-1">anti-clockwise</option>
 				</select>
+				<meta property="logo" content="[if(direction = 1, 'right', 'left')] [angle]" />
 				<meta property="js" content='ctx.rotate((Math.PI / 180) * [direction] * [angle]);
 '>
 			</label>
@@ -74,7 +82,7 @@ <h1><img id="turtle_image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org
 				</select>
 				<input type="number" property="steps" value="100" />
 				steps
-
+				<meta property="logo" content="[if(direction = 1, 'forward', 'backward')] [steps]" />
 				<meta property="js" content='
 ctx.moveTo(0, 0);
 ctx.lineTo([direction] * [steps], 0);
@@ -87,19 +95,25 @@ <h1><img id="turtle_image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org
 				to
 				<!-- color.$previous should have worked here -->
 				<input type="color" property="color" mv-default="[first(condense(color.$all).slice(0, -1)) or '#ff0066']" />
-				<meta property="js" content='var color = ctx.strokeStyle = "[color]";
+				<meta property="logo" content="setpc [color]" />
+				<meta property="js" content='ctx.strokeStyle = "[color]";
 if (brushDown) ctx.closePath(); ctx.beginPath();'>
 			</label>
 
 			<div mv-if="type = 'up'">
+				<meta property="logo" mv-mode="read" content="penup" />
 				<meta property="js" content='ctx.closePath(); brushDown = false;' mv-mode="read">
 			</div>
 			<div mv-if="type = 'down'">
+				<meta property="logo" mv-mode="read" content="pendown" />
 				<meta property="js" content='ctx.beginPath(); brushDown = true;' mv-mode="read">
 			</div>
 			<label mv-if="type = 'repeat'">
 				<input type="number" property="times" />
 				times:
+				<meta property="logo" content='repeat [times] ["\\u005B"]
+	[ replace(join(instruction.logo, "\\n"), "\\n", "\\n\\t") ]
+["\\u005D"] ' />
 				<meta property="js" content='for (let i=0; i<[times]; i++) {
 	[ replace(join(instruction.js, "\\n"), "\\n", "\\n\\t") ]
 }'>
@@ -112,6 +126,7 @@ <h1><img id="turtle_image" src='data:image/svg+xml,<svg xmlns="http://www.w3.org
 		</li>
 	</ol>
 	<meta property="code" content="[join(js, '\\n')]" />
+	<meta property="logo_code" content="[join(logo, '\\n')]" />
 
 	<footer>
 		Concept & design heavily inspired <br> from Nicky Case’s awesome <a href="http://ncase.me/joy-demo/turtle/" target="_blank">Joy of Turtle</a>

demos/turtle/style.css

@@ -53,6 +53,20 @@ body > header {
 		}
 	}
 
+	.code-js {
+		&::before {
+			content: "⚙️ ";
+		}
+	}
+
+	.code-logo {
+		&::before {
+			content: "🐢 ";
+			display: inline-block;
+			translate: 0 -.15em;
+		}
+	}
+
 	h1 {
 		margin: 0;
 		font-size: 130%;
@@ -109,18 +123,19 @@ body > header {
 
 		& > div {
 			position: absolute;
-			left: -.5em;
+			left: 0;
+			top: 100%;
 			z-index: 2;
-			margin-top: .5em;
-			background: white;
+			margin-top: .3em;
+			background: hsl(220 10% 96%);
 			border: 1px solid rgb(0 0 0 / .2);
-			box-shadow: 0 .2em 1em rgb(0 0 0 / .2);
+			box-shadow: 0 .2em 1.5em -.5em rgb(0 0 0 / .2);
 			border-radius: .3rem;
 
 			&::before {
 				content: "";
 				position: absolute;
-				top: -.5em * .6;
+				top: calc(-.5em * .6);
 				left: 1em;
 				background: inherit;
 				border: inherit;
@@ -132,18 +147,21 @@ body > header {
 			}
 		}
 
-		/* JS */
+		/* Code */
 		textarea {
 			display: block;
-			width: 40rem;
+			field-sizing: content;
+			min-width: 12rem;
 			max-width: 90vw;
-			height: 20rem;
+			background: transparent;
+			tab-size: 4;
 			max-height: 90vh;
 			padding: 1rem;
 			box-sizing: border-box;
 			border: 0;
 			font: 60%/1.5 Consolas, Monaco, monospace;
 			border-radius: inherit;
+			white-space: pre;
 		}
 	}