Add Iris setup guide and vercel analytics package

package.json

@@ -19,6 +19,7 @@
     "@markdoc/next.js": "0.2.1",
     "@sindresorhus/slugify": "^2.1.0",
     "@tailwindcss/typography": "^0.5.7",
+    "@vercel/analytics": "^0.1.8",
     "autoprefixer": "^10.4.12",
     "clsx": "^1.2.1",
     "focus-visible": "^5.2.0",

src/components/Layout.jsx

@@ -32,6 +32,7 @@ const navigation = [
     title: 'Clients',
     links: [
       { title: 'How do clients work?', href: '/clients' },
+      { title: 'Guide: Iris (Web)', href: '/clients/iris' },
       { title: 'Guide: Astral (Web)', href: '/clients/astral' },
       { title: 'Guide: Damus (iOS)', href: '/clients/damus' },
     ],

src/pages/clients.md

@@ -27,12 +27,12 @@ Remember, your private key is your identity in Nostr, so if it is compromised, y
 
 ### Web
 
+- [Iris](https://iris.to) – This is our recommended client for new users. [Check out our guide here](/clients/iris).
 - [Astral](https://astral.ninja)
-- [Iris](https://iris.to)
 
 ### iOS
 
-- [Damus](https://apps.apple.com/app/damus/id1628663131)
+- [Damus](https://apps.apple.com/app/damus/id1628663131) – This is the first & best iOS client for Nostr. [Check out our guide here](/clients/damus).
 
 ### Android
 

src/pages/clients/iris.md

@@ -0,0 +1,36 @@
+---
+title: Iris (Web)
+description: How to get started using Nostr on the web with Iris
+---
+
+A step-by-step guide to getting started with Nostr with the Iris web client.
+
+---
+
+## Step 1 – Install Alby
+
+Get [Alby](https://chrome.google.com/webstore/detail/alby-bitcoin-lightning-wa/iokeahhehimjnekafflcihljlcjccdbe) from the Chrome Webstore or directly from the [Alby website](https://getalby.com/).
+
+Once you have the extension installed create a new account. Unless you're a pro already, we recommend just creating an account on Alby and setting up a new Lightning wallet.
+
+## Step 2 – Generate a new Private Key with Iris
+
+1. Navigate to [Iris.to](https://iris.to).
+1. Enter a name and hit "Go" ![Iris sign up screen](/images/iris-signup.png)
+1. Iris will generate a new public/private key pair for you and sign you in. You can start following people and posting notes at this point. ![Iris new user experience](/images/iris-nux.png)
+1. However, we're going to make sure we're using the app in the safest way possible. Head to "Settings" on the left and then click "Nostr" in the secondary menu. ![Iris settings](/images/iris-settings-annotated.png)
+1. Copy your public key and your "nsec" private key. These should be stored somewhere VERY safe. Like a password manager (we like 1Password).
+1. Once you're sure you've saved your private key somewhere safe, click "Account" in the secondary menu and log out of Iris. We'll log back in safely in a second.
+
+## Step 3 – Add your new Private Key to Alby
+
+1. Once you've created an account and have saved your private key somewhere safe we need to add that key to the Alby extension.
+1. Open the Alby extension and then navigate to the Alby settings page. ![Alby settings](/images/alby-settings.png)
+1. Scroll to the Nostr section and paste your new private key (this starts with `nsec`) in the field.
+1. You're now ready to use Alby to log in and use Nostr through any web client.
+
+## Step 4 – Sign back into Iris
+
+1. Back on the Iris login page, click "Nostr extension login". ![Iris sign up screen](/images/iris-signup.png)
+1. Authorize key usage in the Alby extension popup that will appear.
+1. You are logged in! It may take a few moments for content to start loading. 🤙 You'll need to sign using the Alby extension any time you perform an action in Iris. You can check the box to have Alby remember your choice if this bugs you.

yarn.lock

@@ -615,6 +615,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vercel/analytics@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "@vercel/analytics@npm:0.1.8"
+  peerDependencies:
+    react: ^16.8||^17||^18
+  checksum: e837f66494372d557e32383e7ab7192a40da242a16d4f650f61b6e0c5ea282b2a37120ec125d3c5d5e3228c3d1957f48c93d299b4b466169e9d7a853a8014c3a
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -3010,6 +3019,7 @@ __metadata:
     "@markdoc/next.js": 0.2.1
     "@sindresorhus/slugify": ^2.1.0
     "@tailwindcss/typography": ^0.5.7
+    "@vercel/analytics": ^0.1.8
     autoprefixer: ^10.4.12
     clsx: ^1.2.1
     eslint: 8.33.0