Merge pull request #1892 from actonlang/abe-installation

Add installation instructions

docs/acton-by-example/book.toml

@@ -9,6 +9,8 @@ git-repository-url = "https://github.com/actonlang/acton"
 git-repository-icon = "fa-github"
 edit-url-template = "https://github.com/actonlang/acton/edit/master/docs/acton-by-example/{path}"
 
+[preprocessor.tabs]
+
 [preprocessor.svgbob]
 text_width = 8.0
 text_height = 16.0
@@ -21,7 +23,8 @@ stroke_color = "var(--fg)" # see default theme / variables.css
 background_color = "transparent" # also useful `var(--bg)`
 
 [output.html]
-additional-css = ["svgbob.css"]
+additional-css = ["svgbob.css", "theme/tabs.css"]
+additional-js = ["theme/tabs.js"]
 
 [output.html.fold]
 enable = true

docs/acton-by-example/src/SUMMARY.md

@@ -2,6 +2,7 @@
 
 - [Getting started](index.md)
   - [Hello World](hello.md)
+  - [Installation](installation.md)
   - [Acton scripts](hello/shebang.md)
     <!-- - [Program Arguments](hello/args.md) -->
   - [Acton Projects](projects.md)

docs/acton-by-example/src/installation.md

@@ -0,0 +1,18 @@
+# Installation
+
+{{#tabs }}
+{{#tab name="Debian / Ubuntu" }}
+For Debian derivative distributions that use .dpkg and the APT ecosystem. Add the Acton APT repo and install from there:
+```console
+wget -q -O - https://apt.acton-lang.io/acton.gpg | sudo apt-key add -
+echo "deb [arch=amd64] http://apt.acton-lang.io/ stable main" | sudo tee /etc/apt/sources.list.d/acton.list
+sudo apt-get update
+sudo apt-get install -qy acton
+```
+{{#endtab }}
+{{#tab name="MacOS" }}
+```console
+brew install actonlang/acton/acton
+```
+{{#endtab }}
+{{#endtabs }}

docs/acton-by-example/theme/tabs.css

@@ -0,0 +1,25 @@
+.mdbook-tabs {
+    display: flex;
+}
+
+.mdbook-tab {
+    background-color: var(--table-alternate-bg);
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border: none;
+    font-size: 1.6rem;
+    line-height: 1.45em;
+}
+
+.mdbook-tab.active {
+    background-color: var(--table-header-bg);
+    font-weight: bold;
+}
+
+.mdbook-tab-content {
+    padding: 1rem 0rem;
+}
+
+.mdbook-tab-content table {
+    margin: unset;
+}

docs/acton-by-example/theme/tabs.js

@@ -0,0 +1,75 @@
+/**
+ * Change active tab of tabs.
+ *
+ * @param {Element} container
+ * @param {string} name
+ */
+const changeTab = (container, name) => {
+    for (const child of container.children) {
+        if (!(child instanceof HTMLElement)) {
+            continue;
+        }
+
+        if (child.classList.contains('mdbook-tabs')) {
+            for (const tab of child.children) {
+                if (!(tab instanceof HTMLElement)) {
+                    continue;
+                }
+
+                if (tab.dataset.tabname === name) {
+                    tab.classList.add('active');
+                } else {
+                    tab.classList.remove('active');
+                }
+            }
+        } else if (child.classList.contains('mdbook-tab-content')) {
+            if (child.dataset.tabname === name) {
+                child.classList.remove('hidden');
+            } else {
+                child.classList.add('hidden');
+            }
+        }
+    }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    const tabs = document.querySelectorAll('.mdbook-tab');
+    for (const tab of tabs) {
+        tab.addEventListener('click', () => {
+            if (!(tab instanceof HTMLElement)) {
+                return;
+            }
+
+            if (!tab.parentElement || !tab.parentElement.parentElement) {
+                return;
+            }
+
+            const container = tab.parentElement.parentElement;
+            const name = tab.dataset.tabname;
+            const global = container.dataset.tabglobal;
+
+            changeTab(container, name);
+
+            if (global) {
+                localStorage.setItem(`mdbook-tabs-${global}`, name);
+
+                const globalContainers = document.querySelectorAll(
+                    `.mdbook-tabs-container[data-tabglobal="${global}"]`
+                );
+                for (const globalContainer of globalContainers) {
+                    changeTab(globalContainer, name);
+                }
+            }
+        });
+    }
+
+    const containers = document.querySelectorAll('.mdbook-tabs-container[data-tabglobal]');
+    for (const container of containers) {
+        const global = container.dataset.tabglobal;
+
+        const name = localStorage.getItem(`mdbook-tabs-${global}`);
+        if (name && document.querySelector(`.mdbook-tab[data-tabname=${name}]`)) {
+            changeTab(container, name);
+        }
+    }
+});