[feat] Write hello world add-on and deploy to GitHub Pages

googleworkspace · Aug 16, 2024 · ea71885 · ea71885
1 parent 9e8f993
commit ea71885
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 0 deletions.
diff --git a/.github/workflows/publish-sample-add-ons.yml b/.github/workflows/publish-sample-add-ons.yml
@@ -0,0 +1,58 @@
+name: Deploy sample Add-ons to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main", "teddy_hello-world"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x, 22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    # TODO: run this in a loop when there are multiple samples.
+    - run: npm run build
+      working-directory: addons-web-sdk/hello-world
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      # TODO: run this in a loop when there are multiple samples.
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './addons-web-sdk/hello-world/dist/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# Build outputs for sample Meet Add-ons
+addons-web-sdk/*/dist/
+addons-web-sdk/*/node_modules/
+addons-web-sdk/*/.DS_STORE
+addons-web-sdk/*/package-lock.json
diff --git a/addons-web-sdk/hello-world/README.md b/addons-web-sdk/hello-world/README.md
@@ -0,0 +1 @@
+This is approximately the simplest possible add-on. The only requirements to get started here are npm and GitHub. The intent of publishing this add-on is to demonstrate how easy it is to get started with rendering custom content using an add-on. Please see other samples at https://github.com/googleworkspace/meet/tree/main/addons-web-sdk/samples to learn more advanced functionality!
diff --git a/addons-web-sdk/hello-world/package.json b/addons-web-sdk/hello-world/package.json
@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "build": "cp src/*.html dist/ && npx webpack"
+  },
+  "dependencies": {
+    "@googleworkspace/meet-addons": "^0.9.1"
+  },
+  "devDependencies": {
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4"
+  }
+}
diff --git a/addons-web-sdk/hello-world/src/MainStage.html b/addons-web-sdk/hello-world/src/MainStage.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<!-- See: https://developers.google.com/meet/add-ons/guides/overview#main-stage -->
+<head>
+  <title>Meet Add-on Main Stage</title>
+  <script src="./main.js"></script>
+</head>
+
+<body style="width: 100%; height: 100%; margin: 0">
+  <div>This is the Add-on Main Stage. Everyone in the call can see this.</div>
+  <div>Hello, world!</div>
+</body>
+
+</html>
diff --git a/addons-web-sdk/hello-world/src/SidePanel.html b/addons-web-sdk/hello-world/src/SidePanel.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<!-- See: https://developers.google.com/meet/add-ons/guides/overview#side-panel -->
+<head>
+  <title>Meet Add-on Side Panel</title>
+  <script src="./main.js"></script>
+</head>
+
+<body style="width: 100%; height: 100%; margin: 0">
+  <div>This is the Add-on Side Panel. Only you can see this.</div>
+  <button id="start-activity">Launch Activity in Main Stage.</button>
+
+  <script>
+    document.body.onload = () => {
+      // Library name (`helloWorld`) is defined in the webpack config.
+      // The function (`setUpAddon`) is defined in index.js.
+      helloWorld.setUpAddon();
+    };
+  </script>
+</body>
+
+</html>
diff --git a/addons-web-sdk/hello-world/src/index.js b/addons-web-sdk/hello-world/src/index.js
@@ -0,0 +1,23 @@
+import { meet } from '@googleworkspace/meet-addons/meet.addons';
+
+// TODO: Make sure that you modify these constants, if you fork this!
+const CLOUD_PROJECT_NUMBER = "12345678910";
+const MAIN_STAGE_URL = "https://googleworkspace.github.io/meet/samples/hello-world/MainStage.html"
+
+/**
+ * Prepares the Add-on Side Panel Client, and adds an event to launch the main
+ * stage when the main button is clicked.
+ */
+async function setUpAddon() {
+  const session = await meet.addon.createAddonSession({
+    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
+  });
+  sidePanelClient = await session.createSidePanelClient();
+  document.getElementById('start-activity').addEventListener('click', async () => {
+    await sidePanelClient.startCollaboration({ mainStageUrl: MAIN_STAGE_URL });
+  });
+}
+
+export {
+  setUpAddon,
+};
diff --git a/addons-web-sdk/hello-world/webpack.config.js b/addons-web-sdk/hello-world/webpack.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    library: "helloWorld",
+    path: path.resolve(__dirname, 'dist'),
+  },
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is approximately the simplest possible add-on. The only requirements to get started here are npm and GitHub. The intent of publishing this add-on is to demonstrate how easy it is to get started with rendering custom content using an add-on. Please see other samples at https://github.com/googleworkspace/meet/tree/main/addons-web-sdk/samples to learn more advanced functionality!