From 2c9ab73bef723243cdad245758df86392ae936cb Mon Sep 17 00:00:00 2001
From: Patrick Skinner <78289253+PSkinnerTech@users.noreply.github.com>
Date: Sat, 30 Mar 2024 19:14:51 -0500
Subject: [PATCH] fix: updated install command
updated the install command, added an info box, and corrected a typo.
---
.../getting-started/quick-starts/hw-code.md | 50 +++++++++++--------
1 file changed, 28 insertions(+), 22 deletions(-)
diff --git a/docs/src/getting-started/quick-starts/hw-code.md b/docs/src/getting-started/quick-starts/hw-code.md
index 4fccb62..42bc5bb 100644
--- a/docs/src/getting-started/quick-starts/hw-code.md
+++ b/docs/src/getting-started/quick-starts/hw-code.md
@@ -1,12 +1,12 @@
# Hello World (Code)
-This guide walks you through the a quick way to get a static HTML, CSS and JavaScript webpage on to the permaweb using a few lines of code and a [command-line interface (CLI)](./hw-cli.md).
+This guide walks you through a quick way to get a static HTML, CSS and JavaScript webpage on to the permaweb using a few lines of code and a [command-line interface (CLI)](./hw-cli.md).
## Requirements
-- [NodeJS](https://nodejs.org) LTS or greater
-- Basic knowledge of HTML, CSS and JavaScript
-- A text editor (VS Code, Sublime, or similar)
+- [NodeJS](https://nodejs.org) LTS or greater
+- Basic knowledge of HTML, CSS and JavaScript
+- A text editor (VS Code, Sublime, or similar)
## Description
@@ -17,7 +17,7 @@ Using a terminal/console window create a new folder called `hello-world`.
```sh
cd hello-world
npm init -y
-npm install arweave @irys/sdk
+npm i -g @irys/sdk
mkdir src && cd src
touch index.js index.html style.css
```
@@ -30,6 +30,10 @@ Next open your text editor and import the `hello-world` directory.
node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json
```
+:::info
+The wallet.json file must be in the root of the `hello-world` folder and not inside of your `src` folder.
+:::
+
## Create a webpage
This webpage is using basic HTML, CSS and JavaScript to create a styled button that when you click it the header text changes color. Once finished, we will be using Irys and our previously generated wallet to deploy a fully functioning, static and permanent webpage to Arweave.
@@ -44,19 +48,19 @@ Paste the code from the following code blocks into their files:
```html
-
-
-
-
-
-
- Cookbook Hello World!
-
-
-
-
-
Hello World!
-
+
+
+
+
+
+
+ Cookbook Hello World!
+
+
+
+
+
Hello World!
+
```
@@ -70,8 +74,8 @@ Paste the code from the following code blocks into their files:
```css
.button {
- padding: "10px";
- background-color: #4caf50;
+ padding: "10px";
+ background-color: #4caf50;
}
```
@@ -85,8 +89,10 @@ Paste the code from the following code blocks into their files:
```javascript
function changeColor() {
- const header = document.getElementById("main");
- header.style.color === "" ? (header.style.color = "red") : (header.style.color = "");
+ const header = document.getElementById("main");
+ header.style.color === ""
+ ? (header.style.color = "red")
+ : (header.style.color = "");
}
```