adding opengraph metatags for better shareable links

packages/client/yarn.lock

@@ -670,6 +670,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+html5-qrcode@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.2.4.tgz#99e4b36fbd8fbc4956036cf3f21ea3e98c3463d1"
+  integrity sha512-X8wVVsHpNb35tl7KcoCGAboc6Nep2VyT3CIMjFvrfWrHbHTC0yYTjE+DhO/VcswY2MfHy1uB7b1G9+L13gM6dQ==
+
 htmlparser2@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"

packages/server/src/api/controllers/static/index.ts

@@ -111,6 +111,8 @@ export const serveApp = async function (ctx: any) {
     const App = require("./templates/BudibaseApp.svelte").default
     const plugins = enrichPluginURLs(appInfo.usedPlugins)
     const { head, html, css } = App.render({
+      metaImage:
+        "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
       title: appInfo.name,
       production: env.isProd(),
       appId,

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -1,6 +1,8 @@
 <script>
   export let title = ""
   export let favicon = ""
+  export let metaImage = ""
+  export let url = ""
 
   export let clientLibPath
   export let usedPlugins
@@ -12,6 +14,14 @@
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
   />
+  <!-- Opengraph Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content={metaImage} />
+  <meta name="twitter:title" content="{title} - built with Budibase" />
+  <meta property="og:site_name" content="Budibase" />
+  <meta property="og:title" content={title} />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content={metaImage} />
 
   <title>{title}</title>
   <link rel="icon" type="image/png" href={favicon} />

qa-core/src/config/internal-api/TestConfiguration/applications.ts

@@ -8,8 +8,6 @@ import { AppPackageResponse } from "../fixtures/types/appPackage"
 import { DeployConfig } from "../fixtures/types/deploy"
 import { responseMessage } from "../fixtures/types/responseMessage"
 
-
-
 export default class AppApi {
   api: InternalAPIClient
 

qa-core/src/config/internal-api/TestConfiguration/screens.ts

@@ -2,7 +2,7 @@ import { Screen } from  "@budibase/types"
 import { Response } from "node-fetch"
 import InternalAPIClient from "./InternalAPIClient"
 
-  export default class ScreenApi {
+export default class ScreenApi {
   api: InternalAPIClient
 
   constructor(apiClient: InternalAPIClient) {
@@ -20,4 +20,4 @@ import InternalAPIClient from "./InternalAPIClient"
     const json = await response.json()
     return [response, json]
   }
-  }
+}

qa-core/src/config/internal-api/TestConfiguration/tables.ts

@@ -3,7 +3,6 @@ import { Table } from "@budibase/types"
 import InternalAPIClient from "./InternalAPIClient"
 import { responseMessage } from "../fixtures/types/responseMessage"
 
-
 export default class TablesApi {
   api: InternalAPIClient
 
@@ -31,10 +30,12 @@ export default class TablesApi {
     return [response, json]
   }
 
-    async delete(id: string, revId: string): Promise<[Response, responseMessage]> {
+  async delete(
+    id: string,
+    revId: string
+  ): Promise<[Response, responseMessage]> {
     const response = await this.api.del(`/tables/${id}/${revId}`)
     const json = await response.json()
     return [response, json]
   }
-
 }

qa-core/src/config/internal-api/fixtures/rows.ts

@@ -3,6 +3,6 @@ import { Row } from "@budibase/types"
 export const generateNewRowForTable = (tableId: string): Row => {
   return {
     TestColumn: "TestRow",
-        tableId: tableId
+    tableId: tableId,
   }
 }

qa-core/src/config/internal-api/fixtures/screens.ts

@@ -9,13 +9,12 @@ const generateScreen = (roleId: string): any => ({
   template: "createFromScratch",
   props: {
     _id: randomId,
-        _component:
+    _component: "@budibase/standard-components/container",
-            "@budibase/standard-components/container",
     _styles: {
       normal: {},
       hover: {},
       active: {},
-            selected: {}
+      selected: {},
     },
     _children: [],
     _instanceName: "New Screen",
@@ -23,11 +22,12 @@ const generateScreen = (roleId: string): any => ({
     hAlign: "stretch",
     vAlign: "top",
     size: "grow",
-        gap: "M"
+    gap: "M",
-    }, routing: {
+  },
+  routing: {
     route: "/test",
     roleId: roleId,
-        homeScreen: false
+    homeScreen: false,
   },
 })
 

qa-core/src/config/internal-api/fixtures/table.ts

@@ -8,8 +8,8 @@ export const generateTable = (): Table => {
     type: "internal",
     dataImport: {
       valid: true,
-            schema: {}
+      schema: {},
-        }
+    },
   }
 }
 
@@ -22,12 +22,12 @@ export const generateNewColumnForTable = (tableData: any): Table => {
       constraints: {
         presence: { allowEmpty: false },
         length: { maximum: null },
-                type: "string"
+        type: "string",
-            }
+      },
-        }
+    },
   }
   newColumn.indexes = {
-        0: "TestColumn"
+    0: "TestColumn",
   }
   newColumn.updatedAt = new Date().toISOString()
   return newColumn

qa-core/src/config/internal-api/fixtures/types/responseMessage.ts

@@ -1 +1,3 @@
-export interface responseMessage { message: string }
+export interface responseMessage {
+  message: string
+}

qa-core/src/tests/internal-api/applications/create.spec.ts

@@ -5,7 +5,10 @@ import InternalAPIClient from "../../../config/internal-api/TestConfiguration/In
 import generateApp from "../../../config/internal-api/fixtures/applications"
 import generator from "../../../config/generator"
 import generateScreen from "../../../config/internal-api/fixtures/screens"
-import { generateTable, generateNewColumnForTable } from "../../../config/internal-api/fixtures/table"
+import {
+  generateTable,
+  generateNewColumnForTable,
+} from "../../../config/internal-api/fixtures/table"
 import { generateNewRowForTable } from "../../../config/internal-api/fixtures/rows"
 
 describe("Internal API - /applications endpoints", () => {
@@ -119,7 +122,7 @@ describe("Internal API - /applications endpoints", () => {
     const [updateResponse, updatedApp] = await config.applications.update(
       <string>app.appId,
       {
-        name: generator.word()
+        name: generator.word(),
       }
     )
     expect(updateResponse).toHaveStatusCode(200)
@@ -188,7 +191,9 @@ describe("Internal API - /applications endpoints", () => {
     await config.tables.getAll(2)
 
     // Add new table
-    const [createdTableResponse, createdTableData] = await config.tables.save(generateTable())
+    const [createdTableResponse, createdTableData] = await config.tables.save(
+      generateTable()
+    )
     expect(createdTableResponse).toHaveStatusCode(200)
     expect(createdTableData._id).toBeDefined()
     expect(createdTableData._rev).toBeDefined()
@@ -197,20 +202,27 @@ describe("Internal API - /applications endpoints", () => {
     await config.tables.getAll(3)
 
     //Get information about the table
-    const [tableInfoResponse, tableInfo] = await config.tables.getTableById(<string>createdTableData._id)
+    const [tableInfoResponse, tableInfo] = await config.tables.getTableById(
+      <string>createdTableData._id
+    )
     expect(tableInfoResponse).toHaveStatusCode(200)
     expect(tableInfo._id).toEqual(createdTableData._id)
 
     //Add Column to table
     const newColumn = generateNewColumnForTable(createdTableData)
-    const [addColumnResponse, addColumnData] = await config.tables.save(newColumn)
+    const [addColumnResponse, addColumnData] = await config.tables.save(
+      newColumn
+    )
     expect(addColumnResponse).toHaveStatusCode(200)
     expect(addColumnData._id).toEqual(createdTableData._id)
     expect(addColumnData.schema.TestColumn).toBeDefined()
 
     //Add Row to table
     const newRow = generateNewRowForTable(<string>addColumnData._id)
-    const [addRowResponse, addRowData] = await config.rows.add(<string>addColumnData._id, newRow)
+    const [addRowResponse, addRowData] = await config.rows.add(
+      <string>addColumnData._id,
+      newRow
+    )
     console.log(addRowData)
     expect(addRowResponse).toHaveStatusCode(200)
     expect(addRowData._id).toBeDefined()
@@ -218,24 +230,32 @@ describe("Internal API - /applications endpoints", () => {
     expect(addRowData.tableId).toEqual(addColumnData._id)
 
     //Get Row from table
-    const [getRowResponse, getRowData] = await config.rows.getAll(<string>addColumnData._id)
+    const [getRowResponse, getRowData] = await config.rows.getAll(
+      <string>addColumnData._id
+    )
     expect(getRowResponse).toHaveStatusCode(200)
     expect(getRowData.length).toEqual(1)
 
     //Delete Row from table
     const rowToDelete = {
-      rows: [
+      rows: [getRowData[0]],
-        getRowData[0]
-      ]
     }
-    const [deleteRowResponse, deleteRowData] = await config.rows.delete(<string>addColumnData._id, rowToDelete)
+    const [deleteRowResponse, deleteRowData] = await config.rows.delete(
+      <string>addColumnData._id,
+      rowToDelete
+    )
     expect(deleteRowResponse).toHaveStatusCode(200)
     expect(deleteRowData[0]._id).toEqual(getRowData[0]._id)
 
     //Delete the table
-    const [deleteTableResponse, deleteTable] = await config.tables.delete(<string>addColumnData._id, <string>addColumnData._rev)
+    const [deleteTableResponse, deleteTable] = await config.tables.delete(
+      <string>addColumnData._id,
+      <string>addColumnData._rev
+    )
     expect(deleteTableResponse).toHaveStatusCode(200)
-    expect(deleteTable.message).toEqual(`Table ${createdTableData._id} deleted.`)
+    expect(deleteTable.message).toEqual(
+      `Table ${createdTableData._id} deleted.`
+    )
 
     //Table was deleted
     await config.tables.getAll(2)

qa-core/src/tests/internal-api/screens/screens.spec.ts

@@ -5,7 +5,6 @@ import generateApp from "../../../config/internal-api/fixtures/applications"
 import { Screen } from "@budibase/types"
 import generateScreen from "../../../config/internal-api/fixtures/screens"
 
-
 describe("Internal API - /screens endpoints", () => {
   const api = new InternalAPIClient()
   const config = new TestConfiguration<Screen>(api)
@@ -27,7 +26,9 @@ describe("Internal API - /screens endpoints", () => {
     const roleArray = ["BASIC", "POWER", "ADMIN", "PUBLIC"]
     appConfig.applications.api.appId = app.appId
     for (let role in roleArray) {
-      const [response, screen] = await config.screen.create(generateScreen(roleArray[role]))
+      const [response, screen] = await config.screen.create(
+        generateScreen(roleArray[role])
+      )
       expect(response).toHaveStatusCode(200)
       expect(screen.routing.roleId).toEqual(roleArray[role])
     }
@@ -39,7 +40,9 @@ describe("Internal API - /screens endpoints", () => {
 
     // Create Screen
     appConfig.applications.api.appId = app.appId
-    const [response, screen] = await config.screen.create(generateScreen("BASIC"))
+    const [response, screen] = await config.screen.create(
+      generateScreen("BASIC")
+    )
 
     // Check screen exists
     const [routesResponse, routes] = await appConfig.applications.getRoutes()
@@ -53,7 +56,9 @@ describe("Internal API - /screens endpoints", () => {
 
     // Create Screen
     appConfig.applications.api.appId = app.appId
-    const [screenResponse, screen] = await config.screen.create(generateScreen("BASIC"))
+    const [screenResponse, screen] = await config.screen.create(
+      generateScreen("BASIC")
+    )
 
     // Delete Screen
     const [response] = await config.screen.delete(screen._id!, screen._rev!)