Issue #435 - Update all docs to Web5 0.7.x

docs/web5/_quickstart-02-prereqs-and-installation.mdx

@@ -9,10 +9,13 @@ import TabItem from '@theme/TabItem';
 :::info
 <h2>Prerequisites</h2>
 <ul>
-<li>
- <p>Ensure you have <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" 
- target="_blank">Node Package Manager</a>, <code>npm</code>, installed and on your system's <code>$PATH</code>.</p>
-</li>
+ <li>
+ <p><a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" 
+ target="_blank">Node Package Manager</a>, <code>npm</code>, installed and on your system's <code>$PATH</code>.</p>
+ </li>
+ <li>
+ <p>Node version 18 and above</p>
+ </li>
 </ul>
 :::
 
@@ -29,7 +32,7 @@ cd web5-app
 <p>Use NPM to install Web5:</p>
 
 ```bash
-npm install @tbd54566975/web5@0.6.0
+npm install @tbd54566975/web5@0.7.2
 ```
 
 :::note
@@ -41,7 +44,7 @@ This will create a `package.json` in the root of your project. Open `package.jso
 ```js
 {
  "dependencies": {
- "@tbd54566975/web5": "^0.6.0"
+ "@tbd54566975/web5": "0.7.2"
  },
  "type": "module"
 }

docs/web5/_quickstart-03-create-did.mdx

@@ -1,43 +1,33 @@
 <section class="docs-section">
 
-## Start Building
+## 1. Instantiate Web5
 
-### 1. Create a Web5 instance
+The `Web5` class is an isolated API object for doing all things Web5 and the connect() function creates an instance of Web5.
 
-The `Web5` class is an isolated API object for doing all things Web5. In `index.js` below the import statement, create a new instance of `Web5`:
+In Web5 apps, a user’s unique identifier - like an email address - is called a [Decentralized Identifier (DID)](/docs/web5/learn/decentralized-identifiers).
+We are building a decentralized app, so your users are using identifiers that aren't tied to a centralized authority.
 
+In `index.js` below the import statement, create a new instance of `Web5`:
 ```js
-const web5 = new Web5();
+const { web5, did: aliceDid } = await Web5.connect();
 ```
 
+This Web5 instance is what you'll use to access the other objects of Web5 such as `did` and `dwn`. Within the connect function we’re using `ion` as the DID method. Learn more about ION and other [DID methods](/docs/web5/learn/decentralized-identifiers#methods).
+
 :::info
 Web5 is split into three main top-level objects:
 - web5.did
 - web5.dwn
 - web5.vc
-
-We're going to focus on `web5.did` and `web5.dwn` in this Quickstart.
 :::
 
-### 2. Create a DID
-
-In Web5 apps, a user’s unique identifier - like an email address - is called a [Decentralized Identifier (DID)](/docs/web5/learn/decentralized-identifiers). 
-We are building a decentralized app, so your users are using identifiers that aren't tied to a centralized authority.
-
-Assuming a brand new user who does not yet have a DID, let’s create their DID using the Web5 API. Below the Web5 instantiation, add:
-```js
-const did = await web5.did.create('ion');
-```
-
-We’re using `ion` as the DID method. Learn more about ION and other [DID methods](/docs/web5/learn/decentralized-identifiers#methods).
-
 <details>
  <summary>Test your code</summary>
  <p>
 
  Wanna see the DID you just created? In <code>index.js</code>, add the following line and save your file:
  ```js
- console.log(did.id);
+ console.log(aliceDid);
  ```
 
  Then from your CLI, run:
@@ -51,4 +41,4 @@ We’re using `ion` as the DID method. Learn more about ION and other [DID metho
 
 #### Try it!
 
-</section>
+</section>

docs/web5/_quickstart-05-write-record.mdx

@@ -1,8 +1,8 @@
 <section class="docs-section">
 
-### 4. Write DWN Records
+## 2. Write DWN Records
 
-Now you’re able to write records in the user's [Decentralized Web Node(DWN)](/docs/web5/learn/decentralized-web-nodes). 
+Now you’re able to write records in the user's [Decentralized Web Node(DWN)](/docs/web5/learn/decentralized-web-nodes).
 
 A DWN is a personal data store - a platform for messages, pictures, videos, medical records, and just about any content a user may want to store.
 
@@ -11,25 +11,22 @@ A DWN is a personal data store - a platform for messages, pictures, videos, medi
  <p>
 Your app should not store users' data in your centralized database. Instead, their data should be stored in their DWN. This is how the user retains ownership over their content. Through permissions, users can decide which apps can read, write, and delete content from their DWN.
 
-The DWN exists in local storage under the name `dwn-info`. The DWN persists across browser sessions and can be synched across a user's devices. 
+The DWN exists in local storage under the name `dwn-info`. The DWN persists across browser sessions and can be synched across a user's devices.
 
-A user can host their DWN in mulitple locations. The Web5 SDK is both browser and Node.js compliant, meaning you can use the same APIs on both client side and serverside. 
+A user can host their DWN in mulitple locations. The Web5 SDK is both browser and Node.js compliant, meaning you can use the same APIs on both client side and serverside.
 </p>
 </details>
 
-
 Add the following to `index.js`:
 ```js
-const {record} = await web5.dwn.records.create(did.id, {
- author: did.id,
- data: "Hello Web5",
- message: {
- dataFormat: 'text/plain',
- },
+const { record } = await web5.dwn.records.create({
+ data: "Hello Web5",
+ message: {
+ dataFormat: 'text/plain',
+ },
 });
 ```
 
-
 <details>
  <summary>Test your code</summary>
  <p>
@@ -56,4 +53,4 @@ Enter "Hello Web5" in the input field and click "Run" to write a record to the s
 
 #### Try it!
 
-</section>
+</section>

docs/web5/_quickstart-06-read-record.mdx

@@ -1,10 +1,9 @@
 <section class="docs-section">
 
-### 5. Read DWN Records
+## 3. Read DWN Records
 
 If the user has given your app read permissions to their DWN, you can read their data by accessing it through the `record` property.
 
-
 To return the text data stored in the `record`, add the following to `index.js`:
 ```js
 const readResult = await record.data.text();
@@ -16,13 +15,13 @@ const readResult = await record.data.text();
 To see the record that was read from the DWN, add the following to <code>index.js</code>:
 
 ```js
-console.log('Read result: ', readResult);
+console.log('readResult', readResult)
 ```
 
 The output will resemble:
 
-```js
-Read result: Hello Web5
+```
+Hello Web5
 ```
 
 </p>

docs/web5/_quickstart-07-update-record.mdx

@@ -1,6 +1,6 @@
 <section class="docs-section">
 
-### 6. Update DWN Records
+## 4. Update DWN Records
 
 To update the record, call `update` on the `record` object itself.
 
@@ -15,13 +15,12 @@ const updateResult = await record.update({data: "Hello, I'm updated!"});
 To see the record that was updated in the DWN, add the following to <code>index.js</code>:
 
 ```js
-console.log('Update result: ', await record.data.text());
+​console.log('updateResult', await record.data.text())
 ```
 
 The output will resemble:
-
 ```
-Update result: Hello, I'm updated!
+updateResult Hello, I'm updated!
 ```
 
 </p>
@@ -31,4 +30,4 @@ Enter "Hello, I'm updated" in the input field and click "Run!" to update the rec
 
 #### Try it!
 
-</section>
+</section>

docs/web5/_quickstart-08-delete-record.mdx

@@ -1,6 +1,6 @@
 <section class="docs-section">
 
-### 7. Delete DWN Records
+## 5. Delete DWN Records
 
 Given permission from the user, your app can delete records from their DWN. Similar to reading, we’ll use the `record` object to remove the record.
 
@@ -15,18 +15,18 @@ const deleteResult = await record.delete();
 To see the status of the delete transaction, add the following to <code>index.js</code>:
 
 ```js
-console.log('Delete result: ', deleteResult.status);
+console.log('deleteResult', deleteResult)
 ```
 
 The output will resemble:
 
-```js
-Delete result: { code: 202, detail: 'Accepted' },
+```
+{ status: { code: 202, detail: 'Accepted' } }
 ```
 
 </p>
 </details>
 
 #### Try it!
 
-</section>
+</section>

docs/web5/_quickstart-10-next-steps.mdx

@@ -3,15 +3,12 @@
 ## Summary
 
 Congrats! You've just created a local DWN to serve as your user's
-personal data store. 
-
-Given a user's DID and appropriate permissions, your app can read, write, or delete data from the user's DWN, while
-leaving them in full control of their content. Other apps can query local storage to determine if the user already has a DWN on their device, and
-can also read and write from this same data store - essentially, making the user's data portable across multiple applications.
+personal data store. Given a user's DID and appropriate permissions, your app can read, write, or delete data from the user's DWN, while
+leaving them in full control of their content.
 
 :::info
 * [Download the completed index.js file](/files/index.txt)
-* [View source code for the interactive sandbox of this Quickstart](https://raw.githubusercontent.com/TBD54566975/web5-quickstart-widgets/0.6.0/index.html) 
+* [View source code for the interactive sandbox of this Quickstart](https://raw.githubusercontent.com/TBD54566975/web5-quickstart-widgets/0.7.0/index.html)
 * [Run interactive sandbox directly in your browser](https://moonlit-centaur-0d7b4f.netlify.app/)
 :::