Merge branch proposal

.github/workflows/main.yml

@@ -0,0 +1,21 @@
+name: Deploy to GitHub Pages
+on: [push]
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      CI: false
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Install and Build
+        run: |
+          npm install
+          npm run build
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: client/build # The folder the action should deploy.

.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1 @@
+# Docs

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

blog/2023-11-18-todo/index.md

@@ -0,0 +1,8 @@
+---
+slug: todo
+title: Todo
+authors: [kzheng]
+tags: [hello]
+---
+
+[TODO]

blog/authors.yml

@@ -0,0 +1,5 @@
+kzheng:
+  name: Kevin Zheng
+  title: Visualiser maintainer
+  url: https://github.com/spaaaacccee
+  image_url: https://github.com/spaaaacccee.png

docs/1-overview.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# Overview
+
+[Name] is a visualiser for pathfinding search.

docs/2-get-visualiser.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# Get Visualiser
+
+[TODO]

docs/3-getting started/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "Getting Started",
+  "position": 3,
+  "collapsed": false,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to get started with the basics."
+  }
+}

docs/3-getting started/concepts/_category_.json

@@ -0,0 +1,9 @@
+{
+  "label": "Concepts",
+  "position": 1,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important Visualiser concepts."
+  }
+}

docs/3-getting started/concepts/components.md

@@ -0,0 +1,53 @@
+# Component
+
+The foundational building block of the visualiser format is the component, consisting of an array of other components. All component must be built upon [instrinsic components](./standard-renderers.md).
+
+Components can have two types of properties. The first is a basic property which will be data in the form of standard types (`string`, `int`, etc).
+
+The second are called [Computed properties](#computed-properties) which are properties which will be parsed and returned as executable JavaScript code in a Function, allowing for more complex interactions. These [Computed properties](#computed-properties) are utilized through double braces notation (`{{}}`).
+
+Below is the base structure of a component.
+
+```ts
+type Component = {
+  /**
+   * Component name
+   * */
+  $: string;
+  persist?: boolean;
+  drawPath?: boolean;
+  [key: string]: any;
+}[];
+```
+
+#### Computed properties
+
+These are properties of [Components](#components) executed as JavaScript code with access to the a few specific variables. [Computed properties](#computed-properties) are utilized through by using a string with double braces (`{{}}`). Everything within the `{{}}` will be executed as JavaScript.
+
+Currently, the variable name `execon` is used for accessing all the variables stored in the _execution context_
+
+For example if we wanted to access the variable `x` in the _execution context_ we would do the following,
+
+```ts
+"{{execon.x}}";
+```
+
+#### Array/Object properties
+
+When array or object properties are used each of the elements/properties of the respective array/object will be individually check and parsed if it is found to be computed property.
+
+For example,
+
+```ts
+[{ x: "{{execon.x}}", y: "{{execon.x}}" }];
+```
+
+will be parsed into
+
+```ts
+(context: Context) => [{ x: context[x], y: context[y] }];
+```
+
+#### Complex Search Trace Example
+
+Here is a more complex example for a possible method of expressing the `9-Tile Puzzle` in Components

docs/3-getting started/concepts/execution-context.md

@@ -0,0 +1,86 @@
+# Execution Context
+
+_Version 1.0.1_
+
+Execution Context is the group of information avaiable when executing computed properties.
+
+The Execution Context is comprised of properties from 4 sources,
+
+1. Event information: All the current event properties and other event references for ease of access.
+2. Render information _context property in the render_: Variables from the _RenderDefintion's context propertty_
+3. Graphical information: Default graphical information such as colour for each event type.
+4. Component information: Variables from the current component's definition.
+
+When properties of the same name are present in multiple sources, the value for that property is decided based on the ordering above (1->4).
+
+## Event Information
+
+The Event information is comprised of the current event properties and references to other events. There are two references, one is to the parent of the current event and the other to the eventList up to the current event.
+
+```ts
+type GenericContext = {
+  allEvents: Event[];
+  parent: Event;
+} & Event;
+```
+
+## Render Information
+
+The Render information is provided from the _RenderDefintion's context propertty_, as defined in the search trace file.
+
+## Graphical Information
+
+The Graphical information consists of default values for the visualiser.
+
+```ts
+const graphicalInformation = {
+  colour: {
+    source: 0x26a69a,
+    destination: 0xf06292,
+    expanding: 0xff5722,
+    updating: 0xff5722,
+    generating: 0xffeb3b,
+    closing: 0xb0bec5,
+    end: 0xec407a,
+  },
+  scale: 10,
+};
+```
+
+## Component Information
+
+The component information consists of the variables defined on the current component and all variables inherited from wrapper components. The current component is the component which contains the computed property to be executed.
+
+Below is an example,
+
+```json
+"tile": [
+  {
+      "$": "rect",
+  }
+],
+"tilerow": [
+  {
+      "$": "tile",
+      "tile_x": 1
+  }
+],
+"tileboard": [
+  {
+    "$": "tilerow",
+    "tile_y": 1
+  }
+]
+```
+
+The tileboard strucure will be converted to
+
+```json
+"tileboard": [
+  {
+      "$": "rect",
+      "tile_x": 1,
+      "tile_y": 1
+  }
+]
+```