basic header

Author: MothDoctor

docs/Features/AddingNodeSpawnShortcut.md

@@ -1,3 +1,8 @@
+---
+title: Adding Node Spawn Shortcut
+layout: default
+---
+
 1. Create `DefaultEditorPerProjectUserSettings.ini` in your project's Config folder, if you don't have this .ini yet.
 2.  Add this section to the .ini
 ```

docs/Features/AssetSearch.md

@@ -1,3 +1,8 @@
+---
+title: Asset Search
+layout: default
+---
+
 Feature based on the engine plugin added in UE 4.26. The plugin is marked as beta, probably because of the search performance.
 
 ## Using the feature

docs/Features/ForcePinActivation.md

@@ -1,3 +1,8 @@
+---
+title: Force Pin Activation
+layout: default
+---
+
 * It's a debugging feature available from Pin's context menu during PIE.
 * Allows pushing the graph execution in case of blockers, i.e. specific node doesn't work for whatever reason and we want to continue playtesting.
 * It works both on Input pins and Output pins. You can even trigger unconnected Input pins this way.

docs/Features/GenericGameplayTagEvents.md

@@ -1,17 +1,24 @@
+---
+title: Generic Gameplay Tag Events
+layout: default
+---
+
 Nodes available in the Flow plugin support finding actors and communicating with them by Gameplay Tags. 
 - This can have many advantages over using soft references to actor instances, i.e. changing actor instance name won't break reference.
 - This also allows communicating with actors spawned in runtime, i.e. all characters.
 - You can call multiple actors identified by the same Gameplay Tag, which may be useful in many cases.
 
 Obviously, you can use soft references to actors in your project-specific Flow nodes. Although the Flow plugin comes with a mechanism to call events in a generic way, without the need to know the actor's class and functions.
 
-# Adding Flow Component to Actor
-* Add `Flow Component` to the actor. 
+## Adding Flow Component to Actor
+
+* Add `Flow Component` to the actor.
 * Assign a unique gameplay tag on the `Identity Tags` list.
 
 ![image](https://user-images.githubusercontent.com/5065057/176913188-077dc82a-2c7d-4af1-ac30-42d7fba869d5.png)
 
-# Calling Actor events from the Flow Graph
+## Calling Actor events from the Flow Graph
+
 * Add the `Receive Notify` event from the Flow Component.
 
 ![image](https://user-images.githubusercontent.com/5065057/176913685-180f9f6c-a17e-4097-8e8f-2984a89efaae.png)
@@ -21,18 +28,20 @@ Obviously, you can use soft references to actors in your project-specific Flow n
 
 ![image](https://user-images.githubusercontent.com/5065057/176920012-98c34c6c-fa7c-43b7-a5ce-be928eae24a3.png)
 
-# Calling Flow Graph event from the Actor
+## Calling Flow Graph event from the Actor
+
 * Call `Notify Graph` from the Flow Component.
 
 ![image](https://user-images.githubusercontent.com/5065057/176914462-d91f43a3-722d-4c77-bc83-48ee69d0525b.png)
 * Place the `On Notify From Actor` node in your Flow Graph.
   * `Identity Tags` should include the Identity Tag assigned in the Flow Component.
-  * `Notify Tag` is optional. If added, it needs to match the tag selected on Notify Graph in the step above. Otherwise, the `Success` output won't be triggered. 
+  * `Notify Tag` is optional. If added, it needs to match the tag selected on Notify Graph in the step above. Otherwise, the `Success` output won't be triggered.
   * If `Notify Tag` will be empty, the Notify node won't check what tag has been sent from the actor. The `Success` output will always be triggered.
 
 ![image](https://user-images.githubusercontent.com/5065057/176920480-9341ac92-b96d-448d-976a-5590e14ae20b.png)
 
-# Calling events between Actors
+## Calling events between Actors
+
 * Source Actor: call `Notify Actor` from the Flow Component.
   * `Notify Tag` is optional. It allows you to call different events in the target actor.
 
@@ -41,7 +50,8 @@ Obviously, you can use soft references to actors in your project-specific Flow n
 
 ![image](https://user-images.githubusercontent.com/5065057/176921316-bc021dcc-a024-4a56-923e-c2a19889c58e.png)
 
-# Calling Flow Graph events from Sequencer
+## Calling Flow Graph events from Sequencer
+
 * Add the `Flow Events` track to the Level Sequence.
   * Simply place a key on the section and give it a name.
 

docs/Features/SaveGameSupport.md

@@ -1,3 +1,8 @@
+---
+title: Save Game Support
+layout: default
+---
+
 Flow Graph plugs into Unreal's `SaveGame` system. If you haven't used it yet, read ["Saving and Loading Your Game" docs](https://dev.epicgames.com/documentation/en-us/unreal-engine/saving-and-loading-your-game-in-unreal-engine?application_version=5.0).
 
 You control which properties are included in SaveGame by marking C++ properties with the `SaveGame` specifier. Or by ticking the `SaveGame` checkbox in the blueprint editor.

docs/Features/SignalModes.md

@@ -1,6 +1,11 @@
+---
+title: Signal Modes
+layout: default
+---
+
 The Signal Modes concept was born from the need to support patching already released games. Flow Graphs serialize the state of their active nodes to a SaveGame. This works well, but there's one inherent limitation. If a player has a SaveGame with a given Flow Node active and serialized to a SaveGame, we cannot remove this node from the graph post-launch. Hence, we shouldn't remove any node post-launch to be perfectly safe.
 
-### Basics
+## Basics
 
 Yet we sometimes need to change the logic of our game in patches. Signal Modes provide a solution for that. It allows designers to mark nodes as:
 * **Enabled** - Default state, node is fully executed.
@@ -11,7 +16,8 @@ This way, we can deactivate nodes without removing them from the graph, so we ca
 
 ![image](https://user-images.githubusercontent.com/5065057/201344208-2020cdad-ae0d-4df6-bd06-25dddc1c88aa.png)
 
-### Allowed Signal Modes
+## Allowed Signal Modes
+
 The node author can limit a list of available signal nodes for a given Flow Node class.
 Some nodes are already acting like pass-through nodes by design, like Reroute or Sequence. It would be redundant or confusing to mark them as PassThrough, so we removed that from the list of available signal modes.
 

docs/Overview/FAQ.md

@@ -1,3 +1,8 @@
+---
+title: FAQ
+layout: default
+---
+
 ## How to separate the logic between many graphs?
 The basic and recommended way is to use the `Sub Graph` node to start graph B from graph A. This way we could have very complex logic, i.e. separate graphs for every quest or event. 
 

docs/Overview/GettingStarted.md

@@ -1,3 +1,8 @@
+---
+title: Getting Started
+layout: default
+---
+
 ## Sample projects
 There's a separate repository including [a sample single-player project called FlowGame](https://github.com/MothCocoon/FlowSolo), so you can easily check how this plug-in works. It includes
 * Flow plugin

docs/Overview/SupportedlEngineVersions.md

@@ -1,3 +1,8 @@
+---
+title: Supported Engine Versions
+layout: default
+---
+
 | Unreal Engine | Flow Graph |
 | :-----------: | :--------: |
 | 5.7           | 2.2+       |

docs/_includes/head-custom.html

@@ -6,6 +6,38 @@
     max-width: 960px;
   }
 
+  #header nav {
+    float: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    background: none;
+  }
+
+  #header nav ul {
+    display: flex;
+    align-items: center;
+    max-width: 960px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 16px;
+    height: 100%;
+  }
+
+  #header nav ul li.fork {
+    float: none;
+    margin: 0 8px 0 0;
+    padding: 0;
+  }
+
+  #header nav ul li.discord {
+    float: none;
+    margin-left: auto;
+    padding: 0;
+  }
+
   section {
     max-width: none;
     float: none;
@@ -36,7 +68,7 @@
   aside.sidebar ul {
     list-style: none;
     padding: 0;
-    margin: 0;
+    margin: 0 0 0.6em;
   }
 
   aside.sidebar ul li a {
@@ -57,4 +89,35 @@
     flex: 1;
     min-width: 0;
   }
+
+  .title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  a.discord-link {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding: 7px 14px;
+    border-radius: 4px;
+    background: #5865F2;
+    color: #fff;
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: bold;
+    white-space: nowrap;
+    flex-shrink: 0;
+    fill: currentColor;
+  }
+
+  a.discord-link:hover {
+    background: #4752c4;
+  }
+
+  a.discord-link svg {
+    fill: currentColor;
+  }
 </style>