diff --git a/assets/chat-app-1.png b/assets/chat-app-1.png index 50bbc84..bb2ac63 100644 Binary files a/assets/chat-app-1.png and b/assets/chat-app-1.png differ diff --git a/assets/chat-app-2.png b/assets/chat-app-2.png index 6ba49b8..a8cf55d 100644 Binary files a/assets/chat-app-2.png and b/assets/chat-app-2.png differ diff --git a/assets/chat-app-3.png b/assets/chat-app-3.png index bd48802..dd4bc73 100644 Binary files a/assets/chat-app-3.png and b/assets/chat-app-3.png differ diff --git a/assets/chat-app-4a.png b/assets/chat-app-4a.png index 8b1f8fa..bfdfe13 100644 Binary files a/assets/chat-app-4a.png and b/assets/chat-app-4a.png differ diff --git a/assets/chat-app-4b.png b/assets/chat-app-4b.png index 47181ed..0a91044 100644 Binary files a/assets/chat-app-4b.png and b/assets/chat-app-4b.png differ diff --git a/assets/chat-app-5a.png b/assets/chat-app-5a.png index b157103..b248c48 100644 Binary files a/assets/chat-app-5a.png and b/assets/chat-app-5a.png differ diff --git a/assets/chat-app-5b.png b/assets/chat-app-5b.png index e968915..0715ba7 100644 Binary files a/assets/chat-app-5b.png and b/assets/chat-app-5b.png differ diff --git a/assets/chat-app-6.png b/assets/chat-app-6.png index 45f839b..f1a6143 100644 Binary files a/assets/chat-app-6.png and b/assets/chat-app-6.png differ diff --git a/guide/making-a-pear-app.md b/guide/making-a-pear-app.md index 76612b2..56bd998 100644 --- a/guide/making-a-pear-app.md +++ b/guide/making-a-pear-app.md @@ -90,26 +90,6 @@ function onMessageAdded(from, message) { } ``` -## Step 3. Update Graphical User Interface (GUI) settings - -To make sure that the app looks the way intended, update the `pear` property in `package.json`. See all the possibly options in the [Configuration Documentation](../reference/configuration.md). - -Open `package.json` and update the `"pear"` property: - -``` -{ - ... - "pear": { - "gui": { - "backgroundColor": "#1F2430", - "height": 540, - "width": 720 - } - } - ... -} -``` - ## Step 4. Run the app Now it's time to write the app. @@ -137,7 +117,7 @@ View from the first app

-## Understanding the code +## Understand the code Looking through the code, a great part of it has to do with handling the layout. It's outside of the scope of this tutorial to delve into that, but shouldn't look unfamiliar to most. It's possible to use larger frameworks like React, but that won't be covered here. diff --git a/guide/releasing-a-pear-app.md b/guide/releasing-a-pear-app.md index 06e20a1..328e492 100644 --- a/guide/releasing-a-pear-app.md +++ b/guide/releasing-a-pear-app.md @@ -2,7 +2,7 @@ As covered in [Sharing a Pear App](./sharing-a-pear-app.md), Pear use release channels in a similar way that git use branches. When the app has been tested, and it's ready to release it, it's really simple. -## Step 1. Releasing +## Step 1. Release Assume that the app was staged into `example`, then releasing it is simply: diff --git a/guide/sharing-a-pear-app.md b/guide/sharing-a-pear-app.md index acc1f15..3cb76a0 100644 --- a/guide/sharing-a-pear-app.md +++ b/guide/sharing-a-pear-app.md @@ -7,7 +7,7 @@ With Pear there are one single "release" (or "production") version of an app, an To share apps, stage them using `pear stage some-name`. This builds a new version of the app and puts them into the `some-name` channel. -## Step 1. Staging +## Step 1. Stage Before sharing the app, first stage it into a channel called `example` (the name can be anything) @@ -15,7 +15,7 @@ Before sharing the app, first stage it into a channel called `example` (the name $ pear stage example ``` -## Step 2. Seeding +## Step 2. Seed After the app has been staged into the `example` channel, it now needs to be seeded. This is a way to signal that the app is now shared, so others can download and run it. @@ -32,7 +32,7 @@ After the app has been staged into the `example` channel, it now needs to be see For now, keep this terminal open. As long as this process is running, your computer will help seed the application. -## Step 3. Launching +## Step 3. Launch Because the app is now being seeded, it' possible for others with the key (`pear:nykm...`) to launch it. diff --git a/guide/starting-a-pear-project.md b/guide/starting-a-pear-project.md index 78d8a31..54127a8 100644 --- a/guide/starting-a-pear-project.md +++ b/guide/starting-a-pear-project.md @@ -51,17 +51,16 @@ For now, open `package.json` and update it : ... "pear": { "gui": { - "backgroundColor": "#00ff00", - "height": 540, - "width": 720, - "alwaysOnTop": true + "backgroundColor": "#3592C3", + "height": 400, + "width": 700 } } ... } ``` -When running the app now, it will be very green, and always stay on top. +When running the app now, it will be light blue, and have a different size. See all the possibly options in the [Configuration Documentation](../reference/configuration.md). @@ -78,6 +77,7 @@ To add some more interesting UI, let's have an example of a chat app, where user body { display: flex; height: 100vh; + background-color: #3592C3; color: white; justify-content: center; margin: 0;