adds link to REPL from example page.

sveltejs · Dec 18, 2019 · 109639c · 109639c
1 parent 6a5e1d5
commit 109639c
Showing 1 changed file with 51 additions and 34 deletions.
diff --git a/site/src/routes/examples/_TableOfContents.svelte b/site/src/routes/examples/_TableOfContents.svelte
@@ -29,13 +29,33 @@
 		font-weight: 700;
 	}
 
+	div {
+		display: flex;
+		flex-direction: row;
+		padding: 0.2rem 3rem;
+		margin: 0 -3rem;
+	}
+
+	div.active {
+		background: rgba(0, 0, 0, 0.15) calc(100% - 3rem) 47% no-repeat
+			url(/icons/arrow-right.svg);
+		background-size: 1em 1em;
+		color: white;
+	}
+
+	div.active.loading {
+		background: rgba(0, 0, 0, 0.1) calc(100% - 3rem) 47% no-repeat
+			url(/icons/loading.svg);
+		background-size: 1em 1em;
+		color: white;
+	}
+
 	a {
 		display: flex;
+		flex: 1 1 auto;
 		position: relative;
 		color: var(--sidebar-text);
 		border-bottom: none;
-		padding: 0.2rem 3rem;
-		margin: 0 -3rem;
 		font-size: 1.6rem;
 		align-items: center;
 		justify-content: start;
@@ -45,18 +65,11 @@
 		color: white;
 	}
 
-	a.active {
-		background: rgba(0, 0, 0, 0.15) calc(100% - 3rem) 50% no-repeat
-			url(/icons/arrow-right.svg);
-		background-size: 1em 1em;
-		color: white;
-	}
-
-	a.active.loading {
-		background: rgba(0, 0, 0, 0.1) calc(100% - 3rem) 50% no-repeat
-			url(/icons/loading.svg);
-		background-size: 1em 1em;
-		color: white;
+	.repl-link {
+		flex: 0 1 auto;
+		font-size: 1.2rem;
+		font-weight: 700;
+		margin-right: 2.5rem;
 	}
 
 	.thumbnail {
@@ -72,27 +85,31 @@
 
 <ul class="examples-toc">
 	{#each sections as section}
-	<li>
-		<span class="section-title">
-			{section.title}
-		</span>
+		<li>
+			<span class="section-title">{section.title}</span>
 
-		{#each section.examples as example}
-		<a
-			href="examples#{example.slug}"
-			class="row"
-			class:active="{example.slug === active_section}"
-			class:loading="{isLoading}"
-		>
-			<img
-				class="thumbnail"
-				alt="{example.title} thumbnail"
-				src="examples/thumbnails/{example.slug}.jpg"
-			/>
+			{#each section.examples as example}
+				<div
+					class="row"
+					class:active={example.slug === active_section}
+					class:loading={isLoading}>
+					<a
+						href="examples#{example.slug}"
+						class="row"
+						class:active={example.slug === active_section}
+						class:loading={isLoading}>
+						<img
+							class="thumbnail"
+							alt="{example.title} thumbnail"
+							src="examples/thumbnails/{example.slug}.jpg" />
 
-			<span>{example.title}</span>
-		</a>
-		{/each}
-	</li>
+						<span>{example.title}</span>
+					</a>
+					{#if example.slug === active_section}
+						<a href="repl/{example.slug}" class="repl-link">REPL</a>
+					{/if}
+				</div>
+			{/each}
+		</li>
 	{/each}
 </ul>