PF-1489 - Adding selfie app example

miroapp · Sep 25, 2023 · d3066e4 · d3066e4
1 parent b8018d7
commit d3066e4
Show file tree

Hide file tree

Showing 13 changed files with 2,850 additions and 0 deletions.
diff --git a/examples/selfie/.gitignore b/examples/selfie/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.next
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+*.pem
+.idea
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+dist
diff --git a/examples/selfie/APP_SUBMISSION.md b/examples/selfie/APP_SUBMISSION.md
@@ -0,0 +1,5 @@
+## Submission to Miro Marketplace
+
+Congrats! You have finished building your app & you'd like to publish it for
+users. You can submit your app on the
+[Miro Marketplace](https://developers.miro.com/docs/submit-your-app) for review.
diff --git a/examples/selfie/README.md b/examples/selfie/README.md
@@ -0,0 +1,54 @@
+## Self Image
+
+**&nbsp;ℹ&nbsp;Note**:
+
+- 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).
+
+### How to start locally
+
+- Run `npm i` to install dependencies.
+- Run `npm start` to start developing. \
+  Your URL should be similar to this example:
+
+```
+http://localhost:3000
+```
+
+- 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.
+
+### How to build the app
+
+- Run `npm run build`. \
+  This generates a static output inside [`dist/`](./dist), which you can host on a static hosting
+  service.
+
+### Folder structure
+
+<!-- The following tree structure is just an example -->
+
+```
+.
+├── src
+│  ├── assets
+│  │  └── style.css
+│  ├── app.tsx      // 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
+```
+
+### About the app
+
+This sample app provides you with boilerplate setup and configuration that you can further customize to build your own app.
+
+<!-- describe shortly the purpose of the sample app -->
+
+Built using [`create-miro-app`](https://www.npmjs.com/package/create-miro-app).
+
+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/).
diff --git a/examples/selfie/capture.html b/examples/selfie/capture.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/assets/style.css" />
+    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
+    <title>Self Image</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="/src/app.tsx"></script>
+  </body>
+</html>
diff --git a/examples/selfie/global.d.ts b/examples/selfie/global.d.ts
@@ -0,0 +1,2 @@
+// https://vitejs.dev/guide/features.html#typescript-compiler-options
+/// <reference types="vite/client" />
diff --git a/examples/selfie/index.html b/examples/selfie/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
+    <title>Self Image</title>
+  </head>
+  <body>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// https://vitejs.dev/guide/features.html#typescript-compiler-options
		/// <reference types="vite/client" />