wip: code examples

docs/.vitepress/components/CodeSampleSelector.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {data as SamplesData} from "../data/playground/PlaygroundSamples.data";
+</script>
+
+<template>
+  <div>
+    <span class="description">Examples </span>
+    <select class="select-box">
+      <option disabled hidden selected>Select an example...</option>
+      <optgroup :label="chapter.name" v-for="chapter in SamplesData.chapters">
+        <option v-for="sample in chapter.samples">{{ sample.name }}</option>
+      </optgroup>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+.description {
+  font-weight: 400;
+  font-size: 19px;
+}
+
+.select-box {
+  appearance: menulist-button;
+
+  height: 32px;
+
+  border: 1px solid #ced4da;
+  border-radius: 8px;
+
+  padding: 4px 4px;
+
+  font-size: 18px;
+  line-height: 1.1;
+}
+</style>

docs/.vitepress/components/Console.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  content?: string
+}
+
+const {
+  content = ''
+} = defineProps<Props>()
+</script>
+
+<template>
+  <div class="container" v-html="content"></div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  min-height: 40%;
+
+  margin: 16px 0;
+  padding: 16px;
+
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+  font-family: Consolas, serif;
+
+  overflow: auto;
+}
+</style>

docs/.vitepress/components/Playground.vue

@@ -1,26 +1,18 @@
 <script setup lang="ts">
-import {F_Object, runWithPrint} from '@funkey/interpreter'
+import Console from './Console.vue'
+import CodeSampleSelector from './CodeSampleSelector.vue'
 import Editor from './Editor.vue'
+import ToolBar from './ToolBar.vue'
 import {onMounted, ref} from 'vue'
+import {F_Object, runWithPrint} from '@funkey/interpreter'
 
-const code = ref<string>(`for (let i = 1; i < 10; i = i + 1) {
-    for (let j = 1; j <= i; j = j + 1) {
-        print(j);
-        print("*");
-        print(i);
-        print("=");
-        print(j*i);
-        print(" ");
-    }
-    print("\\n");
-}`)
+const code = ref<string>(`print("Hello World");`)
+const output = ref<string>('')
 
 const onCodeUpdate = (e) => {
   code.value = e
 }
 
-const output = ref<HTMLDivElement | null>(null)
-
 const run = () => {
   const buffer: string[] = []
   const print = (...args: F_Object[]) => {
@@ -38,7 +30,7 @@ const run = () => {
       currentError = currentError.innerError
     }
   } finally {
-    output.value.innerHTML = buffer.join('').replaceAll('\\n', '<br/>')
+    output.value = buffer.join('').replaceAll('\\n', '<br/>')
   }
 }
 
@@ -49,13 +41,16 @@ onMounted(() => {
 
 <template>
   <div id="playground">
-    <div id="tool-bar">
-      <button id="btn-run" @click="run">run</button>
-    </div>
-
+    <ToolBar>
+      <template #left>
+        <CodeSampleSelector/>
+      </template>
+      <template #right>
+        <button id="btn-run" @click="run">run</button>
+      </template>
+    </ToolBar>
     <Editor :model-value="code" :lang="'funkey'" :hide-minimap="false" @update:model-value="onCodeUpdate"/>
-
-    <div id="output" ref="output"></div>
+    <Console :content="output"></Console>
   </div>
 </template>
 
@@ -68,36 +63,13 @@ onMounted(() => {
   margin: 8px auto;
 }
 
-#tool-bar {
-  height: 32px;
-
-  display: flex;
-  flex-direction: row-reverse;
-
-  margin-bottom: 8px;
-}
-
 #btn-run {
   width: 64px;
   border-radius: 4px;
   background-color: hsl(141, 60%, 38%);
 
   color: white;
   font-size: 18px;
-}
-
-#output {
-  width: 100%;
-  min-height: 40%;
-
-  margin: 16px 0;
-  padding: 16px;
-
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-
-  font-family: Consolas, serif;
-
-  overflow: auto;
+  font-weight: 400;
 }
 </style>

docs/.vitepress/components/ToolBar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <slot name="left"></slot>
+    </div>
+    <div>
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  height: 32px;
+
+  display: flex;
+  justify-content: space-between;
+
+  margin-bottom: 8px;
+
+  padding: 0 4px;
+}
+</style>

docs/.vitepress/data/playground/PlaygroundSamples.data.ts

@@ -0,0 +1,62 @@
+import {defineLoader} from 'vitepress'
+import {readFile} from 'node:fs/promises'
+import {basename, parse} from 'node:path'
+
+interface SampleData {
+    chapter: string,
+    name: string,
+    code: string,
+}
+
+interface Sample {
+    name: string,
+    code: string,
+}
+
+interface Chapter {
+    name: string
+    samples: Sample[]
+}
+
+export interface Data {
+    chapters: Chapter[]
+}
+
+declare const data: Data
+export {data}
+
+export default defineLoader({
+    watch: ['./samples/**/*.fk'],
+    async load(watchedFiles): Promise<Data> {
+        const sampleData = await Promise.all(watchedFiles.map(loadSample))
+        const chapterMap = new Map<string, Chapter>();
+        for (const sd of sampleData) {
+            const key = sd.chapter
+            if (!chapterMap.has(key)) {
+                chapterMap.set(key, {
+                    name: key,
+                    samples: []
+                })
+            }
+
+            const chapter = chapterMap.get(key)
+            chapter.samples.push(sd)
+        }
+
+        return {chapters: Array.from(chapterMap.values())}
+    }
+})
+
+async function loadSample(path: string): Promise<SampleData> {
+    const code = await readFile(path, 'utf-8')
+
+    const parsedPath = parse(path)
+    const sampleName = parsedPath.name
+    const chapterName = basename(parsedPath.dir)
+
+    return {
+        chapter: chapterName,
+        name: sampleName,
+        code
+    }
+}

docs/.vitepress/data/playground/samples/function/closure.fk

@@ -0,0 +1,12 @@
+let cnt = 0;
+
+let add = fn() {
+    cnt = cnt + 1;
+    cnt;
+};
+
+print(add());
+print("\n");
+print(add());
+print("\n");
+print(add());

docs/.vitepress/data/playground/samples/loop/nine-nine-multiplication-table.fk

@@ -0,0 +1,11 @@
+for (let i = 1; i < 10; i = i + 1) {
+    for (let j = 1; j <= i; j = j + 1) {
+        print(j);
+        print("*");
+        print(i);
+        print("=");
+        print(j*i);
+        print(" ");
+    }
+    print("\n");
+}