From 82e601488517895fbacf107dcda2edf7d7b45b36 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 20 Apr 2024 23:25:54 +0800
Subject: [PATCH] docs: updated themes, guides

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 CONTRIBUTING.md                               |  2 +-
 README.md                                     | 21 ++++++++++++++++++-
 .../components/GettingStartedBlocksEn.vue     | 12 +++++------
 .../components/GettingStartedBlocksZhCn.vue   | 14 ++++++-------
 4 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 41d4853..a74a182 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -166,7 +166,7 @@ its dependencies.
 
 2. Using the installer
 
-Users can just run kubectl apply -f <URL for YAML BUNDLE> to install the project, i.e.:
+Users can just run `kubectl apply -f <URL for YAML BUNDLE>` to install the project, i.e.:
 
 ```sh
 kubectl apply -f https://raw.githubusercontent.com/<org>/ollama-operator/<tag or branch>/dist/install.yaml
diff --git a/README.md b/README.md
index 3c5b778..5665101 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,24 @@ kubectl apply -f https://raw.githubusercontent.com/nekomeowww/ollama-operator/ma
 kubectl wait --for=jsonpath='{.status.replicas}'=2 deployment/ollama-operator-controller-manager -n ollama-operator-system
 ```
 
-### Create model
+### Deploy a model
+
+> [!NOTE]
+> You can also use the `kollama` CLI natively shipped by Ollama Operator, and will be easier to interact with the operator.
+>
+> Install `kollama` CLI:
+>
+> ```shell
+> go install github.com/nekomeowww/ollama-operator/cmd/kollama@latest
+> ```
+>
+> Deploy a model can be done with the following command:
+>
+> ```shell
+> kollama deploy phi --expose --node-port 30001
+> ```
+>
+> More information can be found at [CLI](https://ollama-operator.ayaka.io/pages/en/guide/getting-started/cli.html)
 
 > [!IMPORTANT]
 > Working with `kind`?
@@ -64,6 +81,8 @@ kubectl wait --for=jsonpath='{.status.replicas}'=2 deployment/ollama-operator-co
 >     accessMode: ReadWriteOnce
 > ```
 
+Let's create a `Model` CRD for the model `phi`:
+
 ```yaml
 apiVersion: ollama.ayaka.io/v1
 kind: Model
diff --git a/docs/.vitepress/theme/components/GettingStartedBlocksEn.vue b/docs/.vitepress/theme/components/GettingStartedBlocksEn.vue
index 084cae3..3566cbc 100644
--- a/docs/.vitepress/theme/components/GettingStartedBlocksEn.vue
+++ b/docs/.vitepress/theme/components/GettingStartedBlocksEn.vue
@@ -16,9 +16,9 @@
       </template>
       <div flex="~ col" h-full>
         <div>
-          <p m="0!" pt="2" text="zinc-500">Dislike YAML?</p>
-          <p m="0!" text="zinc-500">Faster and better UX?</p>
-          <p m="0!" text="zinc-500">No worries, kollama here to rescue!</p>
+          <p m="0!" pt="2" text="zinc-600 dark:zinc-300">Dislike YAML?</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">Faster and better UX?</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">No worries, kollama here to rescue!</p>
         </div>
         <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
           <p m="0!" text="zinc-400"># <span>as regular binary cli</span></p>
@@ -47,9 +47,9 @@
       </template>
       <div flex="~ col" h-full>
         <div>
-          <p m="0!" pt="2" text="zinc-500">Fine-grained control over parameters?</p>
-          <p m="0!" text="zinc-500">GitOps and CI/CD?</p>
-          <p m="0!" text="zinc-500">CRD is simple enough with 6 lines!</p>
+          <p m="0!" pt="2" text="zinc-600 dark:zinc-300">Fine-grained control over parameters?</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">GitOps and CI/CD?</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">CRD is simple enough with 6 lines!</p>
         </div>
         <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
           <p m="0!"><span text="blue-800 dark:blue-300">apiVersion: </span><span text="green-800 dark:green-300">ollama.ayaka.io/v1</span></p>
diff --git a/docs/.vitepress/theme/components/GettingStartedBlocksZhCn.vue b/docs/.vitepress/theme/components/GettingStartedBlocksZhCn.vue
index 803c8e0..e70d38b 100644
--- a/docs/.vitepress/theme/components/GettingStartedBlocksZhCn.vue
+++ b/docs/.vitepress/theme/components/GettingStartedBlocksZhCn.vue
@@ -16,15 +16,15 @@
       </template>
       <div flex="~ col" h-full>
         <div>
-          <p m="0!" pt="2" text="zinc-500">讨厌 YAML？</p>
-          <p m="0!" text="zinc-500">更好更快的使用体验？</p>
-          <p m="0!" text="zinc-500">没问题的，用 kollama 也可以！</p>
+          <p m="0!" pt="2" text="zinc-600 dark:zinc-300">讨厌 YAML？</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">更好更快的使用体验？</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">没问题的，用 kollama 也可以！</p>
         </div>
         <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
           <p m="0!" text="zinc-400"># <span>常规二进制</span></p>
           <p m="0!">$ <span text="blue-800 dark:blue-300">kollama </span><span text="green-800 dark:green-300">deploy phi</span></p>
         </div>
-        <span flex="~ 1" items-center>or</span>
+        <span flex="~ 1" items-center>或者</span>
         <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
           <p m="0!" text="zinc-400"># <span>作为 kubectl 插件</span></p>
           <p m="0!">$ <span text="blue-800 dark:blue-300">kubectl </span><span text="green-800 dark:green-300">ollama deploy phi</span></p>
@@ -47,9 +47,9 @@
       </template>
       <div flex="~ col" h-full>
         <div>
-          <p m="0!" pt="2" text="zinc-500">对部署参数的精细控制？</p>
-          <p m="0!" text="zinc-500">GitOps 和自动化部署？</p>
-          <p m="0!" text="zinc-500">CRD 也超简单，只有 6 行！</p>
+          <p m="0!" pt="2" text="zinc-600 dark:zinc-300">对部署参数的精细控制？</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">GitOps 和自动化部署？</p>
+          <p m="0!" text="zinc-600 dark:zinc-300">CRD 也超简单，只有 6 行！</p>
         </div>
         <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
           <p m="0!"><span text="blue-800 dark:blue-300">apiVersion: </span><span text="green-800 dark:green-300">ollama.ayaka.io/v1</span></p>