Update READMEs for Webhooks Manager and Custom Actions, rename python…

examples/custom-actions/README.md

@@ -1,65 +1,93 @@
-## Custom Actions
+# Miro Custom Actions
 
 Custom actions are a quick way to get one or more tasks done with your apps. Users can launch a custom action associated with your app through the context menu of a board item.
 
-View our guide on implementing custom actions to quickly get up to speed on use cases, examples, and prerequisites.
+ℹ️ **Important**: Custom actions are only supported for non-public apps that will be distributed privately via a shareable authorization link from your App Settings page. This means that apps built with custom actions will not be eligible for distribution via the Miro Marketplace.
 
-- [Guide: Add custom actions to your app](https://developers.miro.com/docs/add-custom-actions-to-your-app)
+# 👨🏻‍💻 App Demo
 
-**Important**:
-Custom actions are only supported for **non-public apps** that will be distributed privately via a shareable authorization link from your App Settings page. This means that apps built with custom actions will **not** be eligible for distribution via the Miro Marketplace.
+https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512-4b9b3bb35f1f
 
----
+# 📒 Table of Contents
 
-** ℹ Note**:
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app locally](#run)
+- [Folder Structure](#folder)
+- [License](#license)
 
-- We recommend a Chromium-based web browser for local development with HTTP. \
-  Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP.
-- For more information, visit our [developer documentation](https://developers.miro.com).
+# ⚙️ Included Features <a name="features"></a>
 
-### How to start locally
+- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
+- [Custom Actions](https://developers.miro.com/docs/action_customactionmanagement)
 
-- Run `npm i` to install dependencies.
-- Run `npm start` to start developing. \
-  Your URL should be similar to this example:
+# 🛠️ Tools and Technologies <a name="tools"></a>
 
-```
-http://localhost:3000
-```
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/)
+
+# ✅ Prerequisites <a name="prerequisites"></a>
+
+- You have a [Miro account](https://miro.com/signup/).
+- You're [signed in to Miro](https://miro.com/login/).
+- Your Miro account has a [Developer team](https://developers.miro.com/docs/create-a-developer-team).
+- Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version.
+- All examples use `npm` as a package manager and `npx` as a package runner.
+- Your app is a private app, and it's **not** publicly available on the [Miro Marketplace](https://miro.com/marketplace).
+  Currently, custom actions are available only for private apps.
+
+# 📖 Associated Developer Tutorial <a name="tutorial"></a>
 
-- Paste the URL under **App URL** in your
-  [app settings](https://developers.miro.com/docs/build-your-first-hello-world-app#step-3-configure-your-app-in-miro).
-- Open a board; you should see your app in the app toolbar or in the **Apps**
-  panel.
+> To view a more in depth developer tutorial
+> of this app (including code explanations) see the [custom actions tutorial](https://developers.miro.com/docs/add-custom-actions-to-your-app) on Miro's Developer documentation.
 
-### How to build the app
+# 🏃🏽‍♂️ Run the app locally <a name="run"></a>
 
-- Run `npm run build`. \
-  This generates a static output inside [`dist/`](./dist), which you can host on a static hosting
-  service.
+1. Run `npm install` to install dependencies.
+2. Run `npm start` to start developing. \
+   Your URL should be similar to this example:
+   ```
+   http://localhost:3000
+   ```
+3. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
+   In the app manifest editor, configure the app as follows:
 
-### Folder structure
+   - [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri): assign `http://localhost:3000` as a value for this property. \
+     It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
+   - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \
+     To enable the app to read from and write to the board, add the following permissions:
+     - `boards:read`
+     - `boards:write`
 
-<!-- The following tree structure is just an example -->
+4. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>
+
+> ⚠️ We recommend to install your app on a [developer team](https://developers.miro.com/docs/create-a-developer-team) while you are developing or testing apps.⚠️
+
+https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
+
+5. Go to your developer team, and open your boards.
+6. Click on a supported item, such as a sticky note.
+7. From the context menu that appears, click on the plus icon. If you hover over it, it will say `App actions`.
+8. Select a custom action to send a notification to the Miro Board (see App Demo).
+
+# 🗂️ Folder structure <a name="folder"></a>
 
 ```
 .
 ├── src
-│  ├── assets
-│  │  └── style.css
-│  ├── app.ts      // The code for the app lives here
-│  └── index.ts    // The code for the app entry point lives here
-├── app.html       // The app itself. It's loaded on the board inside the 'appContainer'
-└── index.html     // The app entry point. This is what you specify in the 'App URL' box in the Miro app settings
+│  └── index.tsx <-- Where the custom actions are defined.
+├── tsconfig.json <-- typescript configuration file
+├── vite.config.ts <-- Vite configuration file
+└── index.html <-- The app entry point. This is the value you assign to 'sdkUri' in the app manifest file.
 ```
 
-### About the app
-
-This sample app provides you with boilerplate setup and configuration that you can further customize to build your own app.
+# 🫱🏻‍🫲🏽 Contributing <a name="contributing"></a>
 
-<!-- describe shortly the purpose of the sample app -->
+If you want to contribute to this example, or any other Miro Open Source project, please review [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md).
 
-Built using [`create-miro-app`](https://www.npmjs.com/package/create-miro-app).
+# 🪪 License <a name="license"></a>
 
-This app uses [Vite](https://vitejs.dev/). \
-If you want to modify the `vite.config.js` configuration, see the [Vite documentation](https://vitejs.dev/guide/).
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).

examples/python-flask-starter-with-oauth/templates/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/mirotone/dist/styles.css" />
+    <style>
+      .button-signin {
+        color: var(--indigo700);
+        border-color: var(--yellow700);
+        background-color: var(--yellow700);
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="grid">
+      <div class="cs1 ce12">
+        <h1>Welcome to the API Starter!</h1>
+        <p>Please log in</p>
+      </div>
+      <div class="cs1 ce6">
+        <button
+          class="button button-signin"
+          onclick="window.location.href='{{ url_for( &quot;login&quot;) }}'"
+        >
+          Sign in to Miro
+        </button>
+      </div>
+    </div>
+  </body>
+</html>

examples/python-flask-starter-with-oauth/templates/loggedin.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/mirotone/dist/styles.css" />
+    <style>
+      .button-signin {
+        color: var(--indigo700);
+        border-color: var(--yellow700);
+        background-color: var(--yellow700);
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="grid">
+      <div class="cs1 ce12">
+        <h1>Congrats! You've logged in!</h1>
+        <p>Wanna try an API call now?</p>
+      </div>
+      <div class="cs1 ce6">
+        <button
+          class="button button-primary"
+          onclick="window.location.href='{{ url_for( &quot;create_board&quot;) }}'"
+        >
+          Make API call
+        </button>
+      </div>
+    </div>
+  </body>
+</html>