Refactor some more docs

assets/cloud.js

@@ -31,6 +31,7 @@ import php from 'highlight.js/lib/languages/php';
 import shell from 'highlight.js/lib/languages/shell';
 import javascript from 'highlight.js/lib/languages/javascript';
 import markdown from 'highlight.js/lib/languages/markdown';
+import json from 'highlight.js/lib/languages/json';
 import Terminal from "./components/Website/Docs/Terminal.vue";
 import ContentHeader from "./components/Website/Docs/ContentHeader.vue";
 import DocCode from "./components/Website/Docs/Code.vue";
@@ -39,11 +40,15 @@ import DocList from "./components/Website/Docs/List.vue";
 import DocListItem from "./components/Website/Docs/ListItem.vue";
 import DocTable from "./components/Website/Docs/Table.vue";
 import ExerciseTypes from "./components/Website/Docs/ExerciseTypes.vue";
+import ResultRendererMappings from "./components/Website/Docs/ResultRendererMappings.vue";
+import BundledChecks from "./components/Website/Docs/BundledChecks.vue";
+import EventList from "./components/Website/Docs/EventList.vue";
 
 hljs.registerLanguage('php', php);
 hljs.registerLanguage('shell', shell);
 hljs.registerLanguage('shell', javascript);
 hljs.registerLanguage('md', markdown);
+hljs.registerLanguage('json', json);
 
 
 const components = {
@@ -72,7 +77,10 @@ const components = {
     DocList,
     DocListItem,
     DocTable,
-    ExerciseTypes
+    ExerciseTypes,
+    ResultRendererMappings,
+    BundledChecks,
+    EventList
 }
 
 const app = createApp({components});

assets/components/Website/Docs/BundledCheck.vue

@@ -0,0 +1,45 @@
+<script setup>
+import Note from "./Note.vue";
+import Code from "./Code.vue";
+
+const props = defineProps({
+    check: String,
+    interface: String,
+    type: {
+        type: String,
+        default: 'Simple'
+    },
+    compatible: {
+        type: Array,
+        default: ['CLI, CGI']
+    },
+    registered: {
+        type: Boolean,
+        default: true
+    },
+    link: String,
+})
+</script>
+
+<template>
+    <h3 class="font-bold mb-4">{{check}}</h3>
+    <dl class="p-2 mb-4 w-full">
+        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt class="italic text-xs">Interface to implement:</dt>
+            <dd class="sm:col-span-2 text-xs"><Code>{{interface}}</Code></dd>
+        </div>
+        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt class="italic text-xs">Type:</dt>
+            <dd class="sm:col-span-2 text-xs"><Code>{{type}}</Code></dd>
+        </div>
+        <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt class="italic text-xs">Compatible Exercise Types:</dt>
+            <dd class="sm:col-span-2 text-xs"><Code>{{compatible.join(', ')}}</Code></dd>
+        </div>
+    </dl>
+
+    <p class="mb-6"><slot></slot></p>
+
+    <Note v-if="registered" type="success">Note: You do not need to require this check yourself, it is done so automatically.</Note>
+    <a v-if="link" :href="link">Learn how to use</a>
+</template>

assets/components/Website/Docs/BundledChecks.vue

@@ -0,0 +1,41 @@
+<script setup>
+import DocList from './List.vue';
+import DocListItem from './ListItem.vue';
+import Code from "./Code.vue";
+import BundledCheck from "./BundledCheck.vue";
+</script>
+
+<template>
+    <DocList title="Bundled Checks">
+        <DocListItem>
+            <BundledCheck check="PhpSchool\PhpWorkshop\Check\FileExistsCheck" interface="PhpSchool\PhpWorkshop\Exercise\ExerciseInterface">
+                This check verifies that the student's solution file actually exists. This check is always registered as the first check and verifying will abort if it fails.
+            </BundledCheck>
+        </DocListItem>
+        <DocListItem>
+            <BundledCheck check="PhpSchool\PhpWorkshop\Check\CodeParseCheck" interface="PhpSchool\PhpWorkshop\Exercise\ExerciseInterface">
+                This check verifies that the student's solution file can actually be parsed. Parsing is done with <a href="https://github.com/nikic/PHP-Parser">nikic/php-parser</a>
+            </BundledCheck>
+        </DocListItem>
+        <DocListItem>
+            <BundledCheck check="PhpSchool\PhpWorkshop\Check\PhpLintCheck" interface="PhpSchool\PhpWorkshop\Exercise\ExerciseInterface">
+                This check verifies that the student's solution file contains valid PHP syntax. This is as simple as <Code>php -l &lt;submission-file&gt;</Code>
+            </BundledCheck>
+        </DocListItem>
+        <DocListItem>
+            <BundledCheck check="PhpSchool\PhpWorkshop\Check\FunctionRequirementsCheck" interface="PhpSchool\PhpWorkshop\Exercise\FunctionRequirementsExerciseCheck" :registered="false" link="#check-functional-requirements">
+                This check verifies that the students submission contains usages of some required functions and also does not use certain functions. This check is useful if you want to ban a certain way of achieving something, for example, teaching how to manually write a function that already existing in the standard library.
+            </BundledCheck>
+        </DocListItem>
+        <DocListItem>
+            <BundledCheck check="PhpSchool\PhpWorkshop\Check\ComposerCheck" interface="PhpSchool\PhpWorkshop\Exercise\ComposerExerciseCheck" :registered="false" link="#check-composer">
+                This check verifies that the student used Composer to install the required dependencies of the exercise. It checks that a <Code>composer.lock</Code> files exists and contains entries for the required packages.
+            </BundledCheck>
+        </DocListItem>
+        <DocListItem>
+            <BundledCheck check="PhpSchool\PhpWorkshop\Check\DatabaseCheck" interface="PhpSchool\PhpWorkshop\Exercise\DatabaseExerciseCheck" type="Listener" :registered="false" link="#check-database">
+                This check sets up a database and a <Code>PDO</Code> object. It prepends the database DSN as a CLI argument to the student's solution so they can connect to the database. The <Code>PDO</Code> object is passed to the exercise before and after the student's solution has been executed, allowing you to first seed the database and then verify the contents of the database.
+            </BundledCheck>
+        </DocListItem>
+    </DocList>
+</template>

assets/components/Website/Docs/Code.vue

@@ -1,3 +1,3 @@
 <template>
-    <code class="px-2 py-0.5 mx-1 text-[11px] bg-gray-200 text-pink-500 rounded"><slot></slot></code>
+    <code class="px-1 py-0.5 text-[11px] bg-gray-200 text-pink-500 rounded"><slot></slot></code>
 </template>

assets/components/Website/Docs/ContentHeader.vue

@@ -3,12 +3,32 @@
         'id': {
             type: String,
             required: true,
+        },
+        level: {
+            type: String,
+            default: 'h3',
         }
     })
 </script>
 <template>
-    <h3 :id="id" class="!text-lg flex relative items-center font-mono border-b border-dotted border-[#ccc] !pt-4 !pb-1 !mb-4">
-        <slot></slot><a class="!text-[#ccc] fill-current inline-block ml-[2px]" :href="'#' + id">#</a><a href="#app" class="absolute right-0 text-xs hover:underline">^ TOP</a>
+    <h3 v-if="level === 'h3'" :id="id" class="!text-lg flex relative items-center font-mono border-b border-dotted border-[#ccc] !pt-4 !pb-1 !mb-4">
+        <slot></slot>
+        <a class="!text-[#ccc] fill-current inline-block ml-[2px]" :href="'#' + id">#</a><a href="#app" class="absolute right-0 text-xs hover:underline">^ TOP</a>
     </h3>
+
+    <h4 v-if="level === 'h4'" :id="id" class="!text-base flex relative items-center font-mono !pt-4 !pb-1 !mb-2 italic font-semibold border-b border-dotted border-[#ccc]">
+        <slot></slot>
+        <a class="!text-[#ccc] fill-current inline-block ml-[2px]" :href="'#' + id">#</a>
+    </h4>
+
+    <h4 v-if="level === 'h4-code'" :id="id" class="!text-base flex relative items-center font-mono !pt-4 !pb-1 !mb-2 !not-italic">
+        <code class="text-pink-500"><slot></slot></code>
+        <a class="!text-[#ccc] fill-current inline-block ml-[3px]" :href="'#' + id">#</a>
+    </h4>
+
+    <h5 v-if="level === 'h5'" :id="id" class="!text-base flex relative items-center font-mono !pt-4 !pb-1 !mb-2 italic">
+        <slot></slot>
+        <a class="!text-[#ccc] fill-current inline-block ml-[2px]" :href="'#' + id">#</a>
+    </h5>
 </template>
 

assets/components/Website/Docs/EventDescription.vue

@@ -0,0 +1,30 @@
+<script setup>
+import Code from "./Code.vue";
+
+const props = defineProps({
+    event: String,
+    eventClass: String,
+    args: Array,
+})
+</script>
+
+<template>
+    <div class="">
+        <h3 class="font-bold mb-4">{{event}}</h3>
+        <p class="mb-6 text-xs">Event Class: <Code>{{ eventClass }}</Code></p>
+
+        <p class="mb-8"><slot></slot></p>
+
+        <template v-if="args.length > 0">
+            <p class="text-xs font-semibold">Arguments:</p>
+            <dl class="p-2 mb-4 w-full">
+                <div v-for="arg in args" class="py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 border-b last:border-none">
+                    <dt class="italic text-xs">{{arg.name}}</dt>
+                    <dd class="sm:col-span-2 text-xs"><Code>{{arg.type}}</Code></dd>
+                </div>
+            </dl>
+        </template>
+        <p v-else class="">Arguments - None</p>
+    </div>
+
+</template>