Webex Meetings integration blog post (#557)

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

content/blog/webex-integration/index.md

@@ -0,0 +1,43 @@
+---
+title: Introducing Webex Integration
+date: 2021-10-28
+author: Aakansha, David
+link: https://twitter.com/aakansha1216, https://twitter.com/dluzar
+image: webex.png
+---
+
+Collaborate with colleagues using Excalidraw whiteboard directly in your Webex meetings.
+
+<!-- end -->
+
+## Excalidraw ❤️ Meetings
+
+Listening to your stories it's amazing what you use Excalidraw for in the wild, from illustrating blog posts, to wireframing, teaching, presenting, to interviewing. One common denominator is collaboration, which has always been a core part of Excalidraw. Oftentimes, text and drawings aren't enough, and for this purpose, we're excited to announce Excalidraw integration for Webex Meetings.
+
+## Excalidraw in Webex
+
+Whether you're brainstoring with your team, conducting interviews, or host classroom sessions, Excalidraw for Webex gives you the ability to collaborate on drawings right where you make your call without the need to switch apps.
+
+<video src="./webex-blog-promo.mp4" autoplay playsinline loop muted style="width: 100%; height: auto;"></video>
+
+## How to use
+
+For now, to use a specific embedded app such as Excalidraw in your Webex meeting, you will first need to enable it for for your organization (as an administrator) — once that's done, you will be able to use Excalidraw in your meetings going forward.
+
+When you open the Excalidraw app for the first time, you will see a blank canvas. You can draw something to prepare beforehand, or you can start collaborating right away by clicking the "Open together" button at the bottom of the screen. See these steps illustrated on our [Webex homepage](https://webex.excalidraw.com/#how-to-install).
+
+Your data is [end-to-end encrypted](/end-to-end-encryption) the same way as you are used to on [excalidraw.com](https://excalidraw.com), and the whole integration is open-source and [hosted on GitHub](https://github.com/excalidraw/excalidraw-webex).
+
+Note that the collaboration room is active only for the duration of the meeting. Each meeting creates its own room.
+
+## More to come
+
+Some features you are used to from [excalidraw.com](https://excalidraw.com) such as exporting to [Excalidraw Plus](https://plus.excalidraw.com) or the recently added image support isn't yet available in Webex Meetings due to a few platform limitations that will be resolved over the coming weeks. For similar reasons, some features available on specific operating systems may not work on others (such as exporting to a file, which currently only works on Windows).
+
+Also, collaborating between browsers and desktop clients doesn't work reliably yet as there's no official support for Emebedded Apps in browsers yet, so best stick to the desktop application.
+
+As with Excalidraw itself, we will be improving the Webex integration as time goes on, but even now we are confident it can offer a great value when conducting your meetings. Have fun! ❤️
+
+<div style="margin-bottom: 2em; text-align: center">
+Visit <a href="https://webex.excalidraw.com/#how-to-install" target="_blank" rel="noopener noreferer">webex.excalidraw.com</a> for more.
+</div>

package.json

@@ -3,7 +3,7 @@
   "dependencies": {
     "@weknow/gatsby-remark-twitter": "0.2.3",
     "gatsby": "2.32.12",
-    "gatsby-embedder-excalidraw": "1.1.3",
+    "gatsby-embedder-excalidraw": "1.1.4",
     "gatsby-image": "3.1.0",
     "gatsby-plugin-canonical-urls": "2.10.0",
     "gatsby-plugin-dark-mode": "1.1.2",

src/pages/index.js

@@ -14,6 +14,13 @@ function BlogIndex({ data, location }) {
       <SEO />
       {posts.map(({ node }) => {
         const title = node.frontmatter.title || node.fields.slug;
+        const authors =
+          node.frontmatter.author
+            ?.split(",")
+            .filter((author) => author.trim()) || [];
+        const authorLinks =
+          node.frontmatter.link?.split(",").filter((link) => link.trim()) || [];
+
         return (
           <div key={node.fields.slug}>
             <h3
@@ -27,10 +34,21 @@ function BlogIndex({ data, location }) {
             </h3>
             <p style={{ marginBottom: "4px" }}>
               <strong>{node.frontmatter.date}</strong>
-              {node.frontmatter.author && node.frontmatter.link && (
+              {authors.length && (
                 <span style={{ opacity: 0.75, fontStyle: "italic" }}>
                   {", by "}
-                  <a href={node.frontmatter.link}>{node.frontmatter.author}</a>
+                  {authors.map((author, idx) => (
+                    <>
+                      {authorLinks[idx] || authorLinks[0] ? (
+                        <a href={authorLinks[idx] || authorLinks[0]}>
+                          {author}
+                        </a>
+                      ) : (
+                        <>{author}</>
+                      )}
+                      {idx < authors.length - 1 && ", "}
+                    </>
+                  ))}
                 </span>
               )}
             </p>

src/templates/blog-post.js

@@ -13,6 +13,12 @@ function BlogPostTemplate({ data, pageContext: { previous, next }, location }) {
   const discussUrl = `https://mobile.twitter.com/search?q=${encodeURIComponent(
     `https://blog.excalidraw.com${post.fields.slug}`,
   )}`;
+
+  const authors =
+    post.frontmatter.author?.split(",").filter((author) => author.trim()) || [];
+  const authorLinks =
+    post.frontmatter.link?.split(",").filter((link) => link.trim()) || [];
+
   return (
     <Layout location={location} title={siteTitle} parentClassName={"blog-post"}>
       <SEO
@@ -34,14 +40,19 @@ function BlogPostTemplate({ data, pageContext: { previous, next }, location }) {
         }}
       >
         <strong>{post.frontmatter.date}</strong>
-        {post.frontmatter.author && (
+        {authors.length && (
           <span style={{ opacity: 0.75, fontStyle: "italic" }}>
             {", by "}
-            {post.frontmatter.link ? (
-              <a href={post.frontmatter.link}>{post.frontmatter.author}</a>
-            ) : (
-              <>{post.frontmatter.author}</>
-            )}
+            {authors.map((author, idx) => (
+              <>
+                {authorLinks[idx] || authorLinks[0] ? (
+                  <a href={authorLinks[idx] || authorLinks[0]}>{author}</a>
+                ) : (
+                  <>{author}</>
+                )}
+                {idx < authors.length - 1 && ", "}
+              </>
+            ))}
           </span>
         )}
         {post.frontmatter.note ? (

yarn.lock

@@ -6317,10 +6317,10 @@ gatsby-core-utils@^1.10.1:
     tmp "^0.2.1"
     xdg-basedir "^4.0.0"
 
-gatsby-embedder-excalidraw@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/gatsby-embedder-excalidraw/-/gatsby-embedder-excalidraw-1.1.3.tgz#0624794befdf6558627dbebbe89de835e0ab2d25"
-  integrity sha512-n1AbS97mxbE+4MQF1muJXeVHFL1j57/tnP0kfwsj7evvstWz1G97svC9FzF3LLgWvC/wl1Z49xsdibCuH3508g==
+gatsby-embedder-excalidraw@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/gatsby-embedder-excalidraw/-/gatsby-embedder-excalidraw-1.1.4.tgz#a6b82c1c6ab6f90000b6049e32864589f6dd4e93"
+  integrity sha512-TSF4QrBez/L27AOY8UTe534jxQFpjiT3JBSOwNmLqQ1dsWxZTi+e9j37NzyQZj87zkxantmOvmJfMSWJXydp2w==
   dependencies:
     puppeteer "^4.0.1"