Better docs

documentation/docs/.vuepress/config.js

@@ -1,6 +1,7 @@
 import { defaultTheme } from '@vuepress/theme-default'
 import { defineUserConfig } from 'vuepress/cli'
 import { viteBundler } from '@vuepress/bundler-vite'
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
 
 export default defineUserConfig({
   lang: 'en-US',
@@ -12,8 +13,50 @@ export default defineUserConfig({
     logo: '/images/logo-light.png',
     logoDark: '/images/logo.png',
 
-    navbar: ['/', '/get-started'],
+    navbar: [
+      {
+        text: "Guides",
+        prefix: "/guide/",
+        link: "/guide/",
+        children: ['/get-started']
+      },
+
+      {
+        text: "Reference",
+        prefix: "/api/",
+        link: "/api/",
+        children: [
+          {
+            text: "Plugin",
+            prefix: "plugin/",
+            collapsable: true,
+            children: ['/client/test']
+          },
+          {
+            text: "Client API",
+            prefix: "client/",
+            collapsable: true,
+            children: ['/client/test']
+          },
+          {
+            text: "Server API",
+            prefix: "server/",
+            children: ['/server/test']
+          }
+        ]
+      }
+    ],
+
+    repo: 'https://git.aranroig.com/BinarySandia04/dragonroll',
   }),
 
   bundler: viteBundler(),
+  plugins: [
+    prismjsPlugin({
+      themes: {
+        light: 'duotone-light',
+        dark: 'duotone-space'
+      }
+    })
+  ]
 })

documentation/docs/.vuepress/styles/index.scss

@@ -1,4 +1,6 @@
 // === colors ===
+@import '~prismjs/themes/prism-dark.css';
+
 :root {
     // accent colors
     --vp-c-accent: #E13F65;
@@ -87,7 +89,7 @@
     --vp-c-accent-soft: rgba(185, 64, 16, 0.16);
   
     // background colors
-    --vp-c-bg: #1b1b1f;
+    --vp-c-bg: #181818;
     --vp-c-bg-alt: #161618;
     --vp-c-bg-elv: #202127;
   

documentation/docs/client/test.md

@@ -0,0 +1,41 @@
+# Updating a resource
+
+## Request
+
+- HTTP Method: `PUT`
+- Content Type: `application/json`
+- URL: `http://example.com/users/{id}`
+
+## Parameters
+
+| Property | Type | Required | Description |
+| -------- | ---- | -------- | ----------- |
+| ``name`` | String | false | The name of the user. |
+| ``age`` | Number | false | The age of the user. |
+
+## Request example
+
+``` js
+fetch('http://example.com/users/1', {
+  method: 'PUT',
+  body: JSON.stringify({
+    name: 'John Doe',
+    age: 27,
+  }),
+  headers: {
+    'Content-type': 'application/json',
+  },
+})
+  .then((response) => response.json())
+  .then((json) => console.log(json));
+```
+
+## Response example
+
+``` JSON
+{
+  "id": 1,
+  "name": "John Doe",
+  "age": 27
+}
+```

documentation/docs/get-started.md

@@ -1,46 +1,13 @@
-# Get Started
+# Getting started
 
-This is a normal page, which contains VuePress basics.
+- The classes starting with the prefix `Client` are client specific
+- The classes starting with the prefix `Backend` are backend specific
+- All the other classes are accessible from both sides
 
-## Pages
+If you want to use some view or partial of the Dragonroll source in your plugin,
+you must do it from the "@" root. "@" represents the root of the `/src` directory of the client of Dragonroll, so for example, if you want to import the Dragonroll markdown
+editor in your own views you should add:
 
-You can add markdown files in your vuepress directory, every markdown file will be converted to a page in your site.
-
-See [routing][] for more details.
-
-## Content
-
-Every markdown file [will be rendered to HTML, then converted to a Vue SFC][content].
-
-VuePress support basic markdown syntax and [some extensions][synatex-extensions], you can also [use Vue features][vue-feature] in it.
-
-## Configuration
-
-VuePress use a `.vuepress/config.js`(or .ts) file as [site configuration][config], you can use it to config your site.
-
-For [client side configuration][client-config], you can create `.vuepress/client.js`(or .ts).
-
-Meanwhile, you can also add configuration per page with [frontmatter][].
-
-## Layouts and customization
-
-Here are common configuration controlling layout of `@vuepress/theme-default`:
-
-- [navbar][]
-- [sidebar][]
-
-Check [default theme docs][default-theme] for full reference.
-
-You can [add extra style][style] with `.vuepress/styles/index.scss` file.
-
-[routing]: https://vuejs.press/guide/page.html#routing
-[content]: https://vuejs.press/guide/page.html#content
-[synatex-extensions]: https://vuejs.press/guide/markdown.html#syntax-extensions
-[vue-feature]: https://vuejs.press/guide/markdown.html#using-vue-in-markdown
-[config]: https://vuejs.press/guide/configuration.html#client-config-file
-[client-config]: https://vuejs.press/guide/configuration.html#client-config-file
-[frontmatter]: https://vuejs.press/guide/page.html#frontmatter
-[navbar]: https://vuejs.press/reference/default-theme/config.html#navbar
-[sidebar]: https://vuejs.press/reference/default-theme/config.html#sidebar
-[default-theme]: https://vuejs.press/reference/default-theme/
-[style]: https://vuejs.press/reference/default-theme/styles.html#style-file
+```js
+import MarkdownEditor from '@/views/partials/MarkdownEditor.vue';
+```

documentation/docs/server/test.md

@@ -0,0 +1 @@
+# Server test

tutorials/howtoread.md

@@ -1,3 +0,0 @@
-- The classes starting with the prefix `Client` are client specific
-- The classes starting with the prefix `Backend` are backend specific
-- All the other classes are accessible from both sides

tutorials/tutorials.json

@@ -1,19 +0,0 @@
-{
-    "firstplugin": {
-        "title": "Creating your first plugin"
-    },
-    "howtoread": {
-        "title": "How to read this documentation"
-    },
-    "guides": {
-        "title": "Guides",
-        "children": {
-            "vdragonviews": {
-                "title": "Using Dragonroll views"
-            },
-            "window": {
-                "title": "Creating a window"
-            }
-        }
-    }
-}

tutorials/vdragonviews.md

@@ -1,7 +0,0 @@
-If you want to use some view or partial of the Dragonroll source in your plugin,
-you must do it from the "@" root. "@" represents the root of the `/src` directory of the client of Dragonroll, so for example, if you want to import the Dragonroll markdown
-editor in your own views you should add:
-
-```js
-import MarkdownEditor from '@/views/partials/MarkdownEditor.vue';
-```