feat: docs feedback form created (#609)

.env

@@ -1 +1 @@
-DEPLOY_URL=http://localhost:8080
+DEPLOY_URL=http://localhost:3000

.gitpod.yml

@@ -5,5 +5,5 @@ tasks:
 
 # List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
 ports:
-  - port: 8080
+  - port: 3000
     onOpen: open-preview

README.md

@@ -39,7 +39,7 @@ Launch the development server with the hot reloading functionality that allows a
 npm run dev
 ```
 
-You can access the live development server at [localhost:8080](http://localhost:8080).
+You can access the live development server at [localhost:3000](http://localhost:3000).
 
 #### Compose a new blog post
 

components/Feedback.js

@@ -0,0 +1,109 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import GitHubIssue from "./buttons/GitHubIssue";
+
+export default function Feedback(className = '') {
+    const [submitted, setSubmitted] = useState(false);
+    const [error, setError] = useState(false);
+    const [feedback, setFeedback] = useState('');
+    const { asPath, pathname } = useRouter();
+
+    useEffect(() => {
+        setSubmitted(false);
+        setError(false);
+    }, [asPath])
+
+    const date_stamp = new Date()
+    const time_stamp = date_stamp.toUTCString();
+
+    async function handleSubmit(e) {
+        e.preventDefault();
+        const data = {
+            title: `Feedback on ${asPath} - ${time_stamp}`,
+            feedback: feedback
+        }
+
+        fetch("/.netlify/functions/github_discussions", {
+            method: "POST",
+            body: JSON.stringify(data),
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        }).then((response) => {
+
+            if (response.status === 200) {
+                setSubmitted(true);
+            }
+            if(response.status !== 200) {
+                setError(true);
+            }
+            response.json();
+            console.log(response);
+        }).then(data =>{
+            console.log(data);
+        })
+    }
+
+    if (submitted) {
+        return (
+            <div className={`flex flex-col rounded-md shadow-md text-center border border-gray-200 p-4 ${className}`}>
+                <div className='block mx-auto w-fit'>
+                    <img src='/img/illustrations/icons/icon-check.svg' className='md:w-14' />
+                </div>
+                <div className='text-center mx-auto text-lg mt-4'>
+                    Thank you for your feedback!
+                </div>
+                <div className='text-center mx-auto text-md text-gray-500'>
+                    Your contribution has been received and we couldn't be happier.
+                </div>
+                <a href='https://github.com/asyncapi/website' target='_blank' rel='noopener noreferrer' className="w-full shadow-md hover:shadow-lg transition-all duration-500 bg-black ease-in-out py-2 px-2 rounded-md mx-auto mt-4 md:w-1/2">
+                    <div className='text-white flex flex-row justify-center text-center'>
+                        <img src='/img/logos/github-fill.svg' className='w-6 mr-2' />
+                        Follow on GitHub
+                    </div>
+                </a>
+            </div>
+        )
+    }
+    if(error){
+        return (
+            <div className={`flex flex-col rounded-md shadow-md text-center border border-gray-200 p-4 ${className}`}>
+            <div className='block mx-auto w-fit'>
+                <img src='/img/illustrations/icons/icon-x.svg' className='md:w-14' />
+            </div>
+            <div className='text-center mx-auto text-lg mt-4'>
+                Oops! Something went wrong...
+            </div>
+            <div className='text-center mx-auto text-md text-gray-500'>
+                We were unable to process your feedback
+            </div>
+            <GitHubIssue />
+        </div>
+        );
+    }
+    return (
+        <div className={`flex flex-col rounded-md shadow-md border border-gray-200 p-4 ${className}`}>
+            <div className='flex flex-row'>
+                <img src="/img/illustrations/icons/icon.svg" className='w-28 md:w-14' />
+                <div className='flex flex-col ml-4'>
+                    <div className='text-xl'>
+                        Was this helpful?
+                    </div>
+                    <div className='text-sm text-gray-500'>
+                        Help us improve the docs by adding your contribution.
+                    </div>
+                </div>
+            </div>
+            <form onSubmit={handleSubmit}>
+                <div className='flex flex-col my-4'>
+                    <textarea className='w-full h-20 border rounded-md bg-gray-50 text-sm px-2 py-1 text-gray-700 inline-block align-top focus:border-0' placeholder='Write your suggestions here' onChange={(e) => setFeedback(e.target.value)} required />
+                    <div className='block lg:flex lg:flex-row mt-4 text-sm'>
+                        <button className='bg-primary-500 text-white w-full lg:w-6/12 py-2 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out rounded' type='submit'>Submit feedback</button>
+                        <div className='my-2 text-center font-medium w-full lg:w-1/12 lg:my-auto'>OR</div>
+                        <GitHubIssue />
+                    </div>
+                </div>
+            </form>
+        </div>
+    )
+}

components/Head.js

@@ -37,7 +37,7 @@ export default function HeadComponent({
 
       {/* Load Work Sans font */}
       <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
       <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Work+Sans:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
 
       {/* Icons */}

components/buttons/GitHubIssue.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function GitHubIssue() {
+    return (
+        <a className='bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center' href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer'>
+            <img src='/img/logos/github-fill.svg' className='mr-2' />
+            Create Issue on Github
+        </a>
+    )
+}

components/layout/DocsLayout.js

@@ -10,6 +10,7 @@ import DocsNavItem from '../navigation/DocsNavItem'
 import DocsMobileMenu from '../navigation/DocsMobileMenu'
 import NavBar from '../navigation/NavBar'
 import ArrowRight from '../icons/ArrowRight'
+import Feedback from '../Feedback'
 import AnnouncementRemainingDays from '../campaigns/AnnouncementRamainingDays'
 import AnnouncementHero from '../campaigns/AnnoucementHero'
 import Footer from '../Footer'
@@ -99,14 +100,17 @@ export default function DocsLayout({ post, navItems = {}, children }) {
                 {generateEditLink(post)}
               </p>
             </div>
-                <article className="mb-32 mt-12">
+                <article className="mb-12 mt-12">
                   <Head
                     title={post.title}
                     description={post.excerpt}
                     image={post.cover}
                   />
                   { children }
                 </article>
+                <div className="">
+                  <Feedback />
+                </div>
               </div>
             </div>
           </main>

netlify.toml

@@ -5,4 +5,6 @@
 
 [build]
   command = "npm run build && npm run export"
+  functions = "netlify/functions"
   publish = "out"
+

netlify/functions/github_discussions.js

@@ -0,0 +1,54 @@
+const { graphql } = require('@octokit/graphql')
+const repositoryID = "MDEwOlJlcG9zaXRvcnkzNTE0NTM1NTI=" /* Respository ID */
+const categoryID = "DIC_kwDOFPLBcM4COBUH" /* Docs Category ID */
+
+/**  
+  ** The handler function creates a GitHub discussion in the Docs category of the community repository using GitHub GraphQL API. This function accepts a POST request from the Feedback card and creates a Discussion only if GITHUB_TOKEN_CREATE_DISCUSSION has been added in .env properly.
+
+  @param event contains the title and body of the feedback to be added in the GitHub discussion.
+*/
+
+exports.handler = async function (event) {
+  if (event.httpMethod == 'POST') {
+    const { title, feedback } = JSON.parse(event.body);
+
+    try {
+      const createDiscussion = await graphql(`
+        mutation { 
+            createDiscussion(input:{repositoryId:"${repositoryID}", categoryId:"${categoryID}", title:"${title}", body:"${feedback}"}){
+             discussion{
+               url
+             }
+           }
+        }`,
+        {
+          owner: 'asyncapi',
+          repo: 'community',
+          headers: {
+            authorization: `token ${process.env.GITHUB_TOKEN_CREATE_DISCUSSION}`,
+          },
+        })
+      let url = createDiscussion.createDiscussion.discussion.url;
+      return {
+        statusCode: 200,
+        body: JSON.stringify({
+          url: url,
+          message: "Feedback submitted successfully"
+        })
+      } 
+    } catch (err) {
+      console.log(err);
+      return {
+        statusCode: err.response.status,
+        message:err.response.data.message
+      }
+    }
+  }else{
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        message: "The specified HTTP method is not allowed."
+      })
+    }
+  }
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "description": "AsyncAPI website",
   "scripts": {
-    "dev": "node scripts/index.js && next -p 8080",
+    "dev": "node scripts/index.js && next -p 3000",
     "build": "node scripts/index.js && next build",
     "write:blog": "node ./scripts/compose.js",
     "start": "next start",

pages/blog/march-2021-at-asyncapi.md

@@ -43,7 +43,7 @@ Let's scale this party up!
 We did it. AsyncAPI initiative joined Linux Foundation (LF). No more excuses for you not to join us. You're all welcome.
 
 I don't want to write about this too much as everything was described in different articles about us joining LF:
-- [AsyncAPI joins Linux Foundation](http://localhost:8080/blog/asyncapi-joins-linux-foundation)
+- [AsyncAPI joins Linux Foundation](https://www.asyncapi.com/blog/asyncapi-joins-linux-foundation)
 - [Linux Foundation Will Host AsyncAPI to Support Growth and Collaboration for Industry's Fastest-Growing API Spec](https://www.linuxfoundation.org/en/press-release/linux-foundation-will-host-asyncapi-to-support-growth-and-collaboration-for-industrys-fastest-growing-api-spec/)
 - [The Linux Foundation Announces Hosting of AsyncAPI](https://www.infoq.com/news/2021/03/linux-foundation-hosts-asyncapi/)
 - [AsyncAPI Looks to Unify API Workflow under Linux Foundation](https://thenewstack.io/asyncapi-looks-to-unify-api-workflow-under-linux-foundation/)