Merge pull request #48 from permaweb/PSkinnerTech-restructure

Feature: Restructure Pages for Improved User Flow
permaweb · Jan 26, 2024 · 3ab6bc1 · 3ab6bc1
2 parents 6387fbd + 25e9430
commit 3ab6bc1
Show file tree

Hide file tree

Showing 19 changed files with 280 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,4 +29,13 @@ yarn-error.log*
 
 src/.vitepress/cache
 src/.vitepress/dist
-wallet.json
+wallet.json
+
+# vitepress
+.vitepress/
+
+# Trunk
+.trunk/
+
+# VS Code
+.vscode/
diff --git a/.trunk/.gitignore b/.trunk/.gitignore
@@ -0,0 +1,9 @@
+*out
+*logs
+*actions
+*notifications
+*tools
+plugins
+user_trunk.yaml
+user.yaml
+tmp
diff --git a/.trunk/configs/.markdownlint.yaml b/.trunk/configs/.markdownlint.yaml
@@ -0,0 +1,10 @@
+# Autoformatter friendly markdownlint config (all formatting rules disabled)
+default: true
+blank_lines: false
+bullet: false
+html: false
+indentation: false
+line_length: false
+spaces: false
+url: false
+whitespace: false
diff --git a/.trunk/configs/.shellcheckrc b/.trunk/configs/.shellcheckrc
@@ -0,0 +1,7 @@
+enable=all
+source-path=SCRIPTDIR
+disable=SC2154
+
+# If you're having issues with shellcheck following source, disable the errors via:
+# disable=SC1090
+# disable=SC1091
diff --git a/.trunk/configs/.yamllint.yaml b/.trunk/configs/.yamllint.yaml
@@ -0,0 +1,10 @@
+rules:
+  quoted-strings:
+    required: only-when-needed
+    extra-allowed: ["{|}"]
+  empty-values:
+    forbid-in-block-mappings: true
+    forbid-in-flow-mappings: true
+  key-duplicates: {}
+  octal-values:
+    forbid-implicit-octal: true
diff --git a/.trunk/configs/svgo.config.js b/.trunk/configs/svgo.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false, // https://github.com/svg/svgo/issues/1128
+          sortAttrs: true,
+          removeOffCanvasPaths: true,
+        },
+      },
+    },
+  ],
+};
diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
@@ -0,0 +1,39 @@
+# This file controls the behavior of Trunk: https://docs.trunk.io/cli
+# To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
+version: 0.1
+cli:
+  version: 1.19.0
+# Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
+plugins:
+  sources:
+    - id: trunk
+      ref: v1.4.2
+      uri: https://github.com/trunk-io/plugins
+# Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
+runtimes:
+  enabled:
+    - [email protected]
+    - [email protected]
+    - [email protected]
+# This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
+lint:
+  enabled:
+    - [email protected]
+    - [email protected]
+    - git-diff-check
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+actions:
+  disabled:
+    - trunk-announce
+    - trunk-check-pre-push
+    - trunk-fmt-pre-commit
+  enabled:
+    - trunk-upgrade-available
diff --git a/languages/strings/en.json b/languages/strings/en.json
@@ -8,7 +8,7 @@
   "language": "Language",
   "docs": "Docs",
   "getting-started": "Getting Started",
-  "getting-started-aos": "aos",
+  "welcome": "Welcome",
   "concepts": "Concepts",
   "concepts-specs": "Specifications",
   "concepts-messages": "Messages",
@@ -17,6 +17,7 @@
   "concepts-how-it-works": "How messaging works",
   "guides": "Guides",
   "guides-tutorials": "Tutorials",
+  "guides-tutorials-quickstart": "Quick Start",
   "guides-tutorials-meet-lua": "A whistle stop tour of Lua",
   "guides-tutorials-prompt": "Customizing Your Prompt",
   "guides-tutorials-tour": "The aos interface",

diff --git a/src/.vitepress/locales.js b/src/.vitepress/locales.js
@@ -18,14 +18,19 @@ export const localeConfig = (langCode) => ({
     nav: [
       {
         text: get_i18n_str(langCode, "docs"),
-        link: get_i18n_link(langCode, "/getting-started/index"),
+        link: get_i18n_link(langCode, "/welcome/index"),
       },
     ],
     sidebar: [
       {
-        text: get_i18n_str(langCode, "getting-started"),
-        link: get_i18n_link(langCode, "/getting-started/"),
-        items: [],
+        text: get_i18n_str(langCode, "welcome"),
+        link: get_i18n_link(langCode, "/welcome/"),
+        items: [
+          {
+            text: get_i18n_str(langCode, "getting-started"),
+            link: get_i18n_link(langCode, "/getting-started/"),
+          },
+        ],
       },
       {
         text: get_i18n_str(langCode, "concepts"),
@@ -61,6 +66,10 @@ export const localeConfig = (langCode) => ({
             text: get_i18n_str(langCode, "guides-tutorials"),
             link: get_i18n_link(langCode, "/guides/tutorials/index"),
             items: [
+              {
+                text: get_i18n_str(langCode, "guides-tutorials-quickstart"),
+                link: get_i18n_link(langCode, "/guides/tutorials/quickstart"),
+              },
               {
                 text: get_i18n_str(langCode, "guides-tutorials-meet-lua"),
                 link: get_i18n_link(langCode, "/guides/tutorials/lua"),

diff --git a/src/.vitepress/theme/index.js b/src/.vitepress/theme/index.js
@@ -1,4 +1,5 @@
 // https://vitepress.dev/guide/custom-theme
+
 import { h } from "vue";
 import DefaultTheme from "vitepress/theme-without-fonts";
 import "./style.css";

diff --git a/src/getting-started/index.md b/src/getting-started/index.md
@@ -1,30 +1,6 @@
-# Get started in 5 minutes: What on Earth is ao?
+# Get started in 5 minutes
 
-ao is a decentralized computer that can run any number of processes in parallel.
-
-It is communal: Everyone can use and share this computer -- including you.
-
-Once processes are launched on ao, they can permissionlessly interact with any other process on the network through a shared messaging layer ([Arweave](https://arweave.org)).
-
-One way to think of ao is that it is like a decentralized version of the web, but for compute. Everyone can upload their sites (processes), which link together and interact with one another (through messages, rather than hyperlinks).
-
-The result is a sprawling metropolis of interacting and autonomous programs that anyone can access and play with.
-
-There is no other computer quite like ao.
-
-Instead of telling you about it, this guide is built to _show_ you the machine and the cities inside it. It also shows you how you can setup shop inside ao, adding to the metropolis. It will take just 3 minutes to get inside.
-
-If you would like to learn more about the technical specifications of the system, please check out its [spec](https://ao.g8way.io/#/specs) for detailed analysis.
-
-Let's jump into it! 🚀
-
-## ao + aos: The rocket and your rocket fuel.
-
-Normally when you are using ao, you will use it through its operating system: `aos`.
-
-aos is an abstraction layer that runs in your processes, making it easier to use the ao computer.
-
-You can think of ao like your new shiny macbook, and aos like macOS running on top of it.
+In less than 5 mins, we'll walk you through the process of taking your first peak into the rabbit hole. 🕳️🐇
 
 ## System requirements.
 

diff --git a/src/guides/aoconnect/aoconnect.md b/src/guides/aoconnect/aoconnect.md
@@ -1,3 +1,12 @@
+---
+prev:
+  text: "aos"
+  link: "/guides/aos"
+next:
+  text: "Installing aoconnect"
+  link: "/guides/aoconnect/installing-connect"
+---
+
 # ao connect
 
 ao connect is a Javascript/Typescript library to interact with the system from Node JS or the browser.

diff --git a/src/guides/aos/index.md b/src/guides/aos/index.md
@@ -1,3 +1,12 @@
+---
+prev:
+  text: "Tutorials"
+  link: "/guides/tutorials/"
+next:
+  text: "Introduction to aos"
+  link: "/guides/aos/intro"
+---
+
 # aos
 
 ao is a hyper parallel computer that enables distributed compute, aos is an operating system on top of that computer. With aos you can interact with processes and you can code processes in a very simple an intuitive way. All you need is a termnial and an editor. The language chosen for aos is lua, it is a robust and deterministic dynamic language that is a lot of fun to work with.

diff --git a/src/guides/debugging/debugging.md b/src/guides/debugging/debugging.md
@@ -1,3 +1,12 @@
+---
+prev:
+  text: "aoconnect"
+  link: "/guides/aoconnect/aoconnect"
+next:
+  text: "Tracing"
+  link: "/guides/debugging/tracing"
+---
+
 # Debugging
 
 Here you can find utilities useful for debugging your ao workflow.
diff --git a/src/guides/tutorials/index.md b/src/guides/tutorials/index.md
@@ -1,3 +1,12 @@
+---
+prev:
+  text: "Guides"
+  link: "/guides/"
+next:
+  text: "Quick Start"
+  link: "/guides/tutorials/quickstart"
+---
+
 # Tutorials: Get Building with ao.
 
 These are short guides or snacks that should help you get comfortable with aos.
@@ -6,12 +15,12 @@ These are short guides or snacks that should help you get comfortable with aos.
 
 ### Zero to One.
 
-- [0. Install aos and Get Started](/getting-started/)
-- [1. A whistle stop tour of Lua.](lua)
-- [2. Messaging](messaging)
-- [3. The aos interface](tour)
-- [4. Customizing Your Prompt](prompt)
-- [5. A PingPong Server](pingpong)
+- [0. **Quick Start:** _Install aos and Get Started_](quickstart)
+- [1. **Intro to Lua:** _All you need to get started writing in Lua_](lua)
+- [2. **Messaging:** _How to communicate in ao_](messaging)
+- [3. **The Construct:** _Introduction to the aos interface_](tour)
+- [4. **Your Prompt:** _How to easily customize your prompt_](prompt)
+- [5. **Your First Process:** _A PingPong Server_](pingpong)
 
 ### Building Simple Services.
 

diff --git a/src/guides/tutorials/quickstart.md b/src/guides/tutorials/quickstart.md
@@ -0,0 +1,66 @@
+# Quick Start
+
+In this step of the tutorial, we're going to make sure you have the aos pacakages installed and ready to go.
+
+## System requirements.
+
+The local client of aos is super simple to install. Just make sure you have:
+
+- [NodeJS](https://nodejs.org) version 20+. (If you haven't yet installed it, check out [this page](https://nodejs.org/en/download/package-manager) to find instructions for your OS).
+- A code editor of your choice.
+
+## Installing aos.
+
+Once you have NodeJS on your machine, all you need to do is install aos and run it:
+
+```sh
+npm i -g https://get_ao.g8way.io
+```
+
+After installation, we can simply run the command itself to start a new aos process!
+
+```sh
+aos
+```
+
+> ⚠ **Note:** You authenticate yourself to your aos process using a keyfile. If you have an Arweave wallet you can specify it by adding a `--wallet [location]` flag. If you don't, a new keyfile will be generated and stored locally for you at `~/.aos-key.json`.
+
+## Welcome to the rabbit hole.
+
+The utility you just started is a local client, which is ready to relay messages for you to your new process inside the ao computer.
+
+After it connects, you should see the following:
+
+```sh
+          _____                   _______                   _____
+         /\    \                 /::\    \                 /\    \
+        /::\    \               /::::\    \               /::\    \
+       /::::\    \             /::::::\    \             /::::\    \
+      /::::::\    \           /::::::::\    \           /::::::\    \
+     /:::/\:::\    \         /:::/~~\:::\    \         /:::/\:::\    \
+    /:::/__\:::\    \       /:::/    \:::\    \       /:::/__\:::\    \
+   /::::\   \:::\    \     /:::/    / \:::\    \      \:::\   \:::\    \
+  /::::::\   \:::\    \   /:::/____/   \:::\____\   ___\:::\   \:::\    \
+ /:::/\:::\   \:::\    \ |:::|    |     |:::|    | /\   \:::\   \:::\    \
+/:::/  \:::\   \:::\____\|:::|____|     |:::|    |/::\   \:::\   \:::\____\
+\::/    \:::\  /:::/    / \:::\    \   /:::/    / \:::\   \:::\   \::/    /
+ \/____/ \:::\/:::/    /   \:::\    \ /:::/    /   \:::\   \:::\   \/____/
+          \::::::/    /     \:::\    /:::/    /     \:::\   \:::\    \
+           \::::/    /       \:::\__/:::/    /       \:::\   \:::\____\
+           /:::/    /         \::::::::/    /         \:::\  /:::/    /
+          /:::/    /           \::::::/    /           \:::\/:::/    /
+         /:::/    /             \::::/    /             \::::::/    /
+        /:::/    /               \::/____/               \::::/    /
+        \::/    /                 ~~                      \::/    /
+         \/____/                                           \/____/
+
+ao Operating System
+
+aos - 1.6.1
+2024 - Type ".exit" to exit
+aos process:  1xM1_lDZ428sJHpTX7rtcR6SrDubyRVO06JEEWs_eWo
+
+aos>
+```
+
+Welcome to your new home in the ao computer! The prompt you are now looking at is your own personal server in this decentralized machine. We will be using it to play with and explore **ao** in the rest of this tutorial.
diff --git a/src/index.md b/src/index.md
@@ -9,7 +9,7 @@ hero:
   actions:
     - theme: brand
       text: Start Cooking!
-      link: /getting-started/index
+      link: /welcome/index
 
 features:
   - title: Tutorials.

diff --git a/src/public/ao-h.svg b/src/public/ao-h.svg