Finished basic docs

app/imports/ui/pages/Documentation.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <v-container class="documentation">
     <v-row>
       <v-col cols="12">
         <v-fade-transition mode="out-in">
@@ -97,4 +97,4 @@ export default {
     }
   }
 }
-</script>
+</script>

app/imports/ui/pages/FunctionReference.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-container class="documentation">
+    <v-row>
+      <v-col cols="12">
+        <v-card>
+          <v-card-text class="markdown">
+            <h1>Functions</h1>
+            <div
+              v-for="fn in functions"
+              :key="fn.name"
+              class="mb-3"
+            >
+              <h3>{{ fn.name }}</h3>
+              <div class="my-2">
+                {{ fn.comment }}
+              </div>
+              <table style="min-width: initial;">
+                <tr
+                  v-for="example in fn.examples"
+                  :key="example.input"
+                >
+                  <td>
+                    <code>{{ example.input }}</code>
+                  </td>
+                  <td>
+                    <v-icon>mdi-arrow-right</v-icon>
+                  </td>
+                  <td>
+                    <code>{{ example.result }}</code>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="js">
+import functions from '/imports/parser/functions.js';
+export default {
+  computed:{
+    functions(){
+      let fns = [];
+      for (let name in functions){
+        let f = functions[name];
+        fns.push({name, ...f});
+      }
+      console.log(fns);
+      return fns;
+    }
+  }
+}
+</script>

app/imports/ui/router.js

@@ -16,7 +16,8 @@ const SignIn = () => import('/imports/ui/pages/SignIn.vue' );
 const Register = () => import('/imports/ui/pages/Register.vue');
 const IconAdmin = () => import('/imports/ui/icons/IconAdmin.vue');
 //const Friends = () => import('/imports/ui/pages/Friends.vue' );
-const Feedback = () => import('/imports/ui/pages/Feedback.vue' );
+const Feedback = () => import('/imports/ui/pages/Feedback.vue');
+const FunctionReference = () => import('/imports/ui/pages/FunctionReference.vue');
 const Account = () => import('/imports/ui/pages/Account.vue' );
 const InviteSuccess = () => import('/imports/ui/pages/InviteSuccess.vue' );
 const InviteError = () => import('/imports/ui/pages/InviteError.vue' );
@@ -243,6 +244,14 @@ RouterFactory.configure(router => {
       meta: {
         title: 'Feedback',
       },
+    }, {
+      path: '/docs/functions',
+      components: {
+        default: FunctionReference,
+      },
+      meta: {
+        title: 'Functions',
+      },
     }, {
       path: '/docs/:docPath([^/]+.*)',
       components: {

app/imports/ui/styles/markdown.css

@@ -86,7 +86,7 @@
 }
 
 .markdown tbody>tr:nth-child(odd) {
-  background-color: rgba(0, 0, 0, 0.1)
+  background-color: rgba(0, 0, 0, 0.03)
 }
 
 .markdown ul {
@@ -94,5 +94,26 @@
 }
 
 .theme--dark.v-application .markdown tbody>tr:nth-child(odd) {
-  background-color: rgba(255, 255, 255, 0.1)
+  background-color: rgba(255, 255, 255, 0.03)
+}
+
+.documentation .markdown {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.documentation .markdown p {
+  line-height: 24px;
+}
+
+.documentation .markdown ul {
+  line-height: 32px;
+}
+
+.documentation .markdown td {
+  padding: 8px;
+}
+
+.documentation .markdown th {
+  padding: 8px;
 }