From 06c6a84ed3005cb822e88b6a0864e943ae5d4845 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Sat, 16 Nov 2024 14:44:29 +0700
Subject: [PATCH] Docs: make installation section more prominent

---
 web/docs/getting-started.md    | 42 ++---------------------------
 web/docs/installation.md       | 49 ++++++++++++++++++++++++++++++++++
 web/sidebars.js                |  1 +
 web/src/pages/index.js         |  5 ++++
 web/src/pages/index.module.css |  1 +
 5 files changed, 58 insertions(+), 40 deletions(-)
 create mode 100644 web/docs/installation.md

diff --git a/web/docs/getting-started.md b/web/docs/getting-started.md
index 4f70bc1..e8a390b 100644
--- a/web/docs/getting-started.md
+++ b/web/docs/getting-started.md
@@ -45,47 +45,9 @@ This starter guide will just demonstrate the basic features of TCFrame. For more
 
 :::
 
-## Installation
+## Installing TCFrame
 
-Firstly, we must get TCFrame on our system. It consists of C++ header files and a few helper scripts.
-
-Download the latest TCFrame [here](https://github.com/ia-toki/tcrame/releases/download/v1.6.0/tcframe_1.6.0.zip>). Extract the zip file somewhere on your system; for example, `~/tcframe`. We will call this directory "TCFrame home". Confirm that you extracted it correctly by verifying that the directory `include` exists directly inside TCFrame home.
-
-Then, add the following lines to your `~/.bashrc`. This will set the environment variable `TCFRAME_HOME` to our TCFrame home directory, and make `tcframe` command available everywhere.
-
-```sh
-export TCFRAME_HOME=~/tcframe
-alias tcframe=$TCFRAME_HOME/scripts/tcframe
-```
-
-Restart your terminal session. Now, if you run
-
-```
-tcframe
-```
-
-You should see the following output
-
-```
-usage: tcframe <command>
-
-Available commands:
-  build         Compile spec file into runner program
-  version       Print tcframe version
-```
-
-You're good to go!
-
-:::info[Note]
-
-If your `TCFRAME_HOME` contains space, you can escape it as follows:
-
-```sh
-export TCFRAME_HOME=~/path\ with\ space/tcframe
-alias tcframe='$TCFRAME_HOME/scripts/tcframe'
-```
-
-:::
+See the [Installation documentation](./installation).
 
 ## Preparing package directory
 
diff --git a/web/docs/installation.md b/web/docs/installation.md
new file mode 100644
index 0000000..4e2a8b1
--- /dev/null
+++ b/web/docs/installation.md
@@ -0,0 +1,49 @@
+# Installation
+
+TCFrame is a **header-only** C++ library, with a few helper shell scripts. In other words, you only need to get TCFrame's source code.
+
+## Getting the source code
+
+The recommended way is to **clone** the GitHub repository: **https://github.com/ia-toki/tcframe**. This way, you can just do `git pull` to fetch the latest updates. Alternatively, you can also **download** the latest release: **https://github.com/ia-toki/tcframe/releases**.
+
+Suppose that you cloned or downloaded TCFrame to `~/tcframe`. We will call this directory "TCFrame home". Confirm that this directory is correct by verifying that the `include` directory exists directly inside the TCFrame home.
+
+## Configure your environment
+
+Next, add the following lines to your `~/.bashrc`. This will set the environment variable `TCFRAME_HOME` to our TCFrame home directory, and make the `tcframe` command available everywhere.
+
+```sh
+export TCFRAME_HOME=~/tcframe
+alias tcframe=$TCFRAME_HOME/scripts/tcframe
+```
+
+:::note
+
+If your `TCFRAME_HOME` contains space, you can escape it as follows:
+
+```sh
+export TCFRAME_HOME=~/path\ with\ space/tcframe
+alias tcframe='$TCFRAME_HOME/scripts/tcframe'
+```
+
+:::
+
+## Verifying setup
+
+Restart your terminal session. Now, if you run
+
+```
+tcframe
+```
+
+You should see the following output
+
+```
+usage: tcframe <command>
+
+Available commands:
+  build         Compile spec file into runner program
+  version       Print tcframe version
+```
+
+You're good to go!
diff --git a/web/sidebars.js b/web/sidebars.js
index a7ac0f9..542d857 100644
--- a/web/sidebars.js
+++ b/web/sidebars.js
@@ -15,6 +15,7 @@
 const sidebars = {
   docsSidebar: [
     'introduction',
+    'installation',
     'getting-started',
     {
       type: 'category',
diff --git a/web/src/pages/index.js b/web/src/pages/index.js
index d168837..cb4475d 100644
--- a/web/src/pages/index.js
+++ b/web/src/pages/index.js
@@ -16,6 +16,11 @@ function HomepageHeader() {
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/installation">
+            Get TCFrame
+          </Link>
           <Link
             className="button button--secondary button--lg"
             to="/docs">
diff --git a/web/src/pages/index.module.css b/web/src/pages/index.module.css
index 9f71a5d..eeb33c5 100644
--- a/web/src/pages/index.module.css
+++ b/web/src/pages/index.module.css
@@ -20,4 +20,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 15px;
 }