Added GitHub link.

src/application/gui/NavigationView.css

@@ -6,3 +6,21 @@
     background-color: hsl(0, 0%, 10%);
     border-bottom: solid 2px var(--bg-color);
 }
+
+.application_NavigationView_spacer {
+    flex: 1;
+}
+
+.application_NavigationView_github {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    font-size: 16px;
+    color: var(--control-text-color);
+}
+
+.application_NavigationView_github:hover {
+    color: var(--control-text-color-hover);
+}

src/application/gui/NavigationView.ts

@@ -1,4 +1,4 @@
-import { el } from "../../core/gui/dom";
+import { el, icon, Icon } from "../../core/gui/dom";
 import "./NavigationView.css";
 import { gui_store, GuiTool } from "../../core/stores/GuiStore";
 import { Widget } from "../../core/gui/Widget";
@@ -27,6 +27,19 @@ export class NavigationView extends Widget {
             this.element.append(button.element);
         }
 
+        this.element.append(el.div({ class: "application_NavigationView_spacer" }));
+
+        this.element.append(
+            el.a(
+                {
+                    class: "application_NavigationView_github",
+                    href: "https://github.com/DaanVandenBosch/phantasmal-world",
+                    title: "GitHub",
+                },
+                icon(Icon.GitHub),
+            ),
+        );
+
         this.mark_tool_button(gui_store.tool.val);
         this.disposable(gui_store.tool.observe(({ value }) => this.mark_tool_button(value)));
     }

src/core/gui/dom.ts

@@ -34,6 +34,24 @@ export const el = {
         ...children: HTMLElement[]
     ): HTMLHeadingElement => create_element("h2", attributes, ...children),
 
+    a: (
+        attributes?: {
+            class?: string;
+            href?: string;
+            title?: string;
+        },
+        ...children: HTMLElement[]
+    ): HTMLAnchorElement => {
+        const element = create_element<HTMLAnchorElement>("a", attributes, ...children);
+
+        if (attributes && attributes.href && attributes.href.trimLeft().startsWith("http")) {
+            element.target = "_blank";
+            element.rel = "noopener noreferrer";
+        }
+
+        return element;
+    },
+
     table: (attributes?: {}, ...children: HTMLElement[]): HTMLTableElement =>
         create_element("table", attributes, ...children),
 
@@ -69,16 +87,20 @@ export function create_element<T extends HTMLElement>(
         class?: string;
         tab_index?: number;
         text?: string;
+        title?: string;
+        href?: string;
         data?: { [key: string]: string };
         col_span?: number;
     },
     ...children: HTMLElement[]
 ): T {
-    const element = document.createElement(tag_name) as HTMLTableCellElement;
+    const element = document.createElement(tag_name) as (HTMLTableCellElement & HTMLAnchorElement);
 
     if (attributes) {
         if (attributes.class) element.className = attributes.class;
         if (attributes.text) element.textContent = attributes.text;
+        if (attributes.title) element.title = attributes.title;
+        if (attributes.href) element.href = attributes.href;
 
         if (attributes.data) {
             for (const [key, val] of Object.entries(attributes.data)) {
@@ -113,6 +135,7 @@ export enum Icon {
     Undo,
     Redo,
     Remove,
+    GitHub,
 }
 
 export function icon(icon: Icon): HTMLElement {
@@ -120,32 +143,35 @@ export function icon(icon: Icon): HTMLElement {
 
     switch (icon) {
         case Icon.File:
-            icon_str = "fa-file";
+            icon_str = "fas fa-file";
             break;
         case Icon.NewFile:
-            icon_str = "fa-file-medical";
+            icon_str = "fas fa-file-medical";
             break;
         case Icon.Save:
-            icon_str = "fa-save";
+            icon_str = "fas fa-save";
             break;
         case Icon.TriangleUp:
-            icon_str = "fa-caret-up";
+            icon_str = "fas fa-caret-up";
             break;
         case Icon.TriangleDown:
-            icon_str = "fa-caret-down";
+            icon_str = "fas fa-caret-down";
             break;
         case Icon.Undo:
-            icon_str = "fa-undo";
+            icon_str = "fas fa-undo";
             break;
         case Icon.Redo:
-            icon_str = "fa-redo";
+            icon_str = "fas fa-redo";
             break;
         case Icon.Remove:
-            icon_str = "fa-trash-alt";
+            icon_str = "fas fa-trash-alt";
+            break;
+        case Icon.GitHub:
+            icon_str = "fab fa-github";
             break;
     }
 
-    return el.span({ class: `fas ${icon_str}` });
+    return el.span({ class: icon_str });
 }
 
 export function section_id_icon(section_id: SectionId, options?: { size?: number }): HTMLElement {

src/index.ts

@@ -6,6 +6,7 @@ import Logger from "js-logger";
 import "@fortawesome/fontawesome-free/js/fontawesome";
 import "@fortawesome/fontawesome-free/js/solid";
 import "@fortawesome/fontawesome-free/js/regular";
+import "@fortawesome/fontawesome-free/js/brands";
 
 Logger.useDefaults({
     defaultLevel: (Logger as any)[process.env["LOG_LEVEL"] || "OFF"],