functions component wip

components/Arrow.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="arrow">
+		→
+		<transition name="bounce" mode="out-in">
+			<span :key="animate">🎈</span>
+		</transition>
+		→
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		animate: {
+			type: Number,
+			default: 0,
+		},
+	},
+}
+</script>
+
+<style>
+.arrow {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	font-size: 72px;
+}
+</style>

components/Parameters.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="parameters">
+		<h2>{{ title }}</h2>
+		<ul>
+			<li v-for="param in params" :key="param.id">
+				<code> {{ param.name }}</code> ({{ param.type.name }})
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		params: {
+			type: Array,
+			default: () => [],
+		},
+	},
+}
+</script>
+
+<style>
+.parameters ul {
+	padding: 0;
+	list-style: none;
+}
+</style>

pages/functions/_slug.vue

@@ -6,48 +6,27 @@
 			<nuxt-link to="/">back</nuxt-link>
 		</header>
 
-		<main>
-			<aside>
-				<h2>Input</h2>
-				<ul>
-					<li v-for="input in page.input" :key="input.id">
-						<code> {{ input.name }}</code> ({{ input.type.name }})
-					</li>
-				</ul>
-			</aside>
-			<section class="arrow">
-				→
-				<transition name="bounce" mode="out-in">
-					<span :key="animationKey">🎈</span>
-				</transition>
-				→
-			</section>
-			<aside>
-				<h2>Output</h2>
-				<ul>
-					<li v-for="output in page.output" :key="output.id">
-						<code>{{ output.name }}</code> ({{ output.type.name }})
-					</li>
-				</ul>
-			</aside>
-		</main>
+		<div class="structure">
+			<Parameters title="Input" :params="page.input" />
+			<Arrow :animate="animationKey" />
+			<Parameters title="Output" :params="page.output" />
+		</div>
 
-		<section>
+		<div class="playground">
 			<h3>Try it:</h3>
-			<div class="code">
-				<code>
-					/functions/{{ page.name }} ?
-					<span v-for="(input, index) in page.input" :key="input.id">
-						<span v-if="index != 0">&</span
-						><input
-							v-model="form[input.name]"
-							type="text"
-							:placeholder="input.name"
-						/>
-					</span>
-				</code>
-				<button @click="testApi()">Try</button>
-			</div>
+			<code>
+				/functions/{{ page.name }} ?
+				<span v-for="(input, index) in page.input" :key="input.id">
+					<span v-if="index != 0"> &</span>
+					<input
+						v-model="form[input.name]"
+						type="text"
+						:placeholder="input.name"
+					/>
+				</span>
+			</code>
+			<button @click="testApi()">Try</button>
+
 			<div class="result">
 				<h3>Results</h3>
 				<div
@@ -59,9 +38,9 @@
 					>: {{ results[index] }}
 				</div>
 			</div>
-		</section>
+		</div>
 
-		<aside>
+		<nav>
 			<h3>Other functions</h3>
 			<ul>
 				<li v-for="tool in toolkit" :key="tool.id">
@@ -70,7 +49,7 @@
 					</nuxt-link>
 				</li>
 			</ul>
-		</aside>
+		</nav>
 	</div>
 </template>
 
@@ -113,7 +92,7 @@ export default {
 </script>
 
 <style scoped>
-main {
+.structure {
 	display: flex;
 	max-width: 1280px;
 	justify-content: center;
@@ -121,12 +100,13 @@ main {
 	grid-gap: 24px;
 }
 
-main > * {
+.structure > * {
+	border: 1px solid black;
 	padding: 24px;
 	margin-top: 24px;
 	flex: 1;
-	border: 1px solid black;
 }
+
 p {
 	margin-bottom: 16px;
 }
@@ -138,17 +118,4 @@ h1 {
 h2 {
 	margin-top: 0;
 }
-
-ul {
-	padding: 0;
-	list-style: none;
-}
-
-.arrow {
-	align-items: center;
-	display: flex;
-	justify-content: center;
-
-	font-size: 72px;
-}
 </style>

pages/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<main>
 		<section>
-			<h1>{{ data.title }}</h1>
+			<h1 class="title">{{ data.title }}</h1>
 			<img :src="'http://localhost:1337' + data.cover.url" alt="" />
-			<div>{{ data.description }}</div>
+			<div class="description">{{ data.description }}</div>
 		</section>
 		<aside>
 			<h3>Functions</h3>
@@ -37,7 +37,9 @@ main > * {
 	padding: 24px;
 }
 
-section {
+.description {
+	margin: 24px 0;
 	width: 80ch;
+	white-space: pre-line;
 }
 </style>