docs: alert boxes (EddieHubCommunity#7360)

* docs: alert boxes (EddieHubCommunity#7074) * (docs): add alert boxes * fix importing * (update): finding important messages and wrap with alert * Update pages/docs/quickstart.mdx * Update pages/docs/quickstart.mdx --------- Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com> * fix: alert to local development --------- Co-authored-by: Niaz Morshed <77217706+NiazMorshed2007@users.noreply.github.com>
money8203 · Jun 4, 2023 · 888fbf6 · 888fbf6
1 parent 6419c39
commit 888fbf6
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 8 deletions.
diff --git a/pages/docs/environments/gitpod.mdx b/pages/docs/environments/gitpod.mdx
@@ -1,4 +1,6 @@
 import DocsLayout from "@components/layouts/DocsLayout.js";
+import Link from "@components/Link.js";
+import Alert from "@components/Alert.js";
 
 ## Gitpod
 
@@ -17,11 +19,29 @@ There are 2 ways you can open a repository with Gitpod:
 
 Once you have opened a repository, you can develop as you usually do! In the next example, we will update our profile from LinkFree.
 
-**_NOTES:_**
-
-1. Be sure that you have a fork of LinkFree in your Github Profile. If you don't have it, check out the [Quickstart Guide](https://linkfree.io/docs/quickstart).
-
-2. When you have your environment running the database will be empty. You need to visit the path `/api/system/reload?secret=development` to load the json files.
+<Alert
+  type="warning"
+  message={
+    <>
+      <strong>NOTE:</strong>
+      <ul style={{ listStyleType: "number" }}>
+        <li>
+          Be sure that you have a fork of LinkFree in your Github Profile. If
+          you don't have it, check out the{" "}
+          <Link href="https://linkfree.io/docs/quickstart">
+            Quickstart Guide
+          </Link>
+        </li>
+        <li>
+          When you have your environment running the database will be empty. You
+          need to visit the path{" "}
+          <strong>/api/system/reload?secret=development</strong> to load the
+          json files
+        </li>
+      </ul>
+    </>
+  }
+/>
 
 Open your fork and follow along.
 

diff --git a/pages/docs/environments/local-development.mdx b/pages/docs/environments/local-development.mdx
@@ -1,9 +1,21 @@
 import DocsLayout from "@components/layouts/DocsLayout.js";
 import Link from "@components/Link";
+import Alert from "@components/Alert.js";
 
 **You can setup LinkFree code base using [Local](#local-development) or with [Docker](#docker-compose) environment.**
 
-_Note: when you have your environment running the database will be empty. You need to visit the path `/api/system/reload?secret=development` to load the json files._
+<Alert
+  type="warning"
+  message={
+    <>
+      <strong>NOTE: </strong>
+      When you have your environment running the database will be empty. You need
+      to visit the path <strong>
+        /api/system/reload?secret=development
+      </strong> to load the json files
+    </>
+  }
+/>
 
 ## Local Development
 

diff --git a/pages/docs/quickstart.mdx b/pages/docs/quickstart.mdx
@@ -2,6 +2,7 @@ import DocsLayout from "@components/layouts/DocsLayout.js";
 import ClipboardCopy from "@components/ClipboardCopy.js";
 import Link from "@components/Link.js";
 import Youtube from "@components/embeds/Youtube.js";
+import Alert from "@components/Alert.js";
 
 ## Quickstart
 
@@ -114,14 +115,31 @@ To add more links, add another object inside the links collection. For example:
 
 You can skip `optional extended message`
 
-**NOTE**: Please use the online [JSON Lint](https://jsonlint.com) tool to check if your JSON file is _error free_ before committing your pull request.
+<Alert
+  type="info"
+  message={
+    <>
+      <strong>NOTE</strong>: Please use our online{" "}
+      <Link href="https://linkfree.io/playground">Playground</Link> tool to
+      check your JSON file is <i>valid</i> before committing your pull request.
+    </>
+  }
+/>
 
 11. Click `create new branch` and you can use the default name provided
 12. Then, click `Propose new file`
 
 ![propose new file](https://user-images.githubusercontent.com/94740455/227761922-50d8484d-7c60-49a2-8347-941de2252c64.png)
 
-13. **HIGHLY IMPORTANT:** Click `compare across forks` and you will see 4 drop downs
+<Alert
+  type="warning"
+  message={
+    <>
+      13. <strong>HIGHLY IMPORTANT</strong>: Click compare across forks and you
+      will see 4 drop downs
+    </>
+  }
+/>
 
 | Dropdown     | Description                          | Example values               |
 | :----------- | :----------------------------------- | :--------------------------- |