feat: add vision, goals, and roadmap

.github/workflows/deploy.yml

@@ -0,0 +1,16 @@
+name: Deploy to Netlify
+on:
+  issues:
+    types: [opened, deleted, closed, reopened, labeled, unlabeled]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Trigger deploy on Netlify
+      run: |
+        curl -X POST "https://api.netlify.com/api/v1/sites/$NETLIFY_SITE_ID/builds" -H "Authorization: Bearer $NETLIFY_AUTH_TOKEN"
+      env:
+        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

.gitignore

@@ -4,3 +4,5 @@
 node_modules
 .next
 config/posts.json
+.env.local
+roadmap.json

components/helpers/click-away.js

@@ -3,7 +3,8 @@ export function registerClickAway(callback) {
   document.addEventListener("click", unregisterClickAway)
 
   document.querySelectorAll('iframe').forEach(iframe => {
-    if (iframe.attributes.src.value.startsWith('/') && !iframe.attributes.src.value.startsWith('//')) {
+    const src = iframe.attributes.src
+    if (src && src.value.startsWith('/') && !src.value.startsWith('//')) {
       iframe.contentWindow.document.removeEventListener("click", unregisterClickAway)
       iframe.contentWindow.document.addEventListener("click", unregisterClickAway)
     }
@@ -12,7 +13,8 @@ export function registerClickAway(callback) {
   function unregisterClickAway() {
     document.removeEventListener("click", unregisterClickAway)
     document.querySelectorAll('iframe').forEach(iframe => {
-      if (iframe.attributes.src.value.startsWith('/') && !iframe.attributes.src.value.startsWith('//')) {
+      const src = iframe.attributes.src
+      if (src && src.value.startsWith('/') && !src.value.startsWith('//')) {
         iframe.contentWindow.document.removeEventListener("click", unregisterClickAway)
       }
     })

components/layout/DocsLayout.js

@@ -40,7 +40,7 @@ export default function DocsLayout({ post, navItems = {}, children }) {
         ) }
 
         {/* <!-- Static sidebar for desktop --> */}
-        <div className="hidden md:flex md:flex-shrink-0">
+        <div className="hidden lg:flex lg:flex-shrink-0">
           <div className="flex flex-col w-64 border-r border-gray-200 bg-white">
             <div className="flex-1 flex flex-col pt-5 md:overflow-y-auto md:sticky md:top-0 md:max-h-screen">
               <ClickableLogo logoClassName="h-8 w-auto ml-4 mt-0.5" />
@@ -57,17 +57,17 @@ export default function DocsLayout({ post, navItems = {}, children }) {
             </div>
           </div>
         </div>
-        <div className="flex flex-col w-0 flex-1 max-w-full md:max-w-(screen-16)">
-          <div className="flex pl-1 pt-2 pb-2 sm:pl-3 sm:pt-3 md:hidden">
-            <NavBar className="flex px-4 w-full md:hidden" />
+        <div className="flex flex-col w-0 flex-1 max-w-full lg:max-w-(screen-16)">
+          <div className="flex pl-1 pt-2 pb-2 sm:pl-3 sm:pt-3 lg:hidden">
+            <NavBar className="flex px-4 w-full lg:hidden" />
           </div>
-          <div className="hidden md:flex md:border-b md:border-gray-200">
+          <div className="hidden lg:flex lg:border-b lg:border-gray-200">
             <NavBar hideLogo />
           </div>
           <main className="relative z-0 pt-2 pb-6 focus:outline-none md:py-6" tabIndex="0">
             <AnnouncementHero className="text-center mx-4" small={true} />
             {!showMenu && (
-              <div className="md:hidden">
+              <div className="lg:hidden">
                 <button onClick={() => setShowMenu(true)} className="flex text-gray-500 px-4 sm:px-6 md:px-8 hover:text-gray-900 focus:outline-none" aria-label="Open sidebar">
                   <span>{post.sectionTitle}</span>
                   <ArrowRight className="pl-1 w-5 h-5 transform rotate-90" />

components/navigation/MobileNavMenu.js

@@ -9,7 +9,7 @@ export default function MobileNavMenu ({
   onClickClose = () => {},
 }) {
   return (
-    <div className="absolute top-0 inset-x-0 py-2 transition transform origin-top-right md:hidden">
+    <div className="absolute top-0 inset-x-0 py-2 transition transform origin-top-right lg:hidden">
       <div className="rounded-lg shadow-lg">
         <div className="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
           <div className="pt-5 pb-6 px-5 space-y-6">

components/navigation/NavBar.js

@@ -32,24 +32,24 @@ export default function NavBar ({
 
   return (
     <div className={`relative bg-white ${className} z-50`}>
-      <div className="flex w-full justify-between items-center py-6 md:justify-start md:space-x-10">
+      <div className="flex w-full justify-between items-center py-6 lg:justify-start lg:space-x-10">
         {
           !hideLogo && (
-            <div className="lg:w-0 lg:flex-1">
+            <div className="lg:w-auto lg:flex-1">
               <a href="/" className="flex">
                 <AsyncAPILogo className="h-8 w-auto sm:h-8" />
               </a>
             </div>
           )
         }
-        <div className="-mr-2 -my-2 md:hidden">
+        <div className="-mr-2 -my-2 lg:hidden">
           <button onClick={() => setMobileMenuOpen(true)} type="button" className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
             <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"/>
             </svg>
           </button>
         </div>
-        <nav className="hidden md:flex space-x-10">
+        <nav className="hidden lg:flex space-x-10">
           <div className="relative">
             <NavItem text="Learning" onClick={() => showMenu('learning')} hasDropdown />
             {open === 'learning' && <LearningPanel />}
@@ -71,7 +71,7 @@ export default function NavBar ({
             ))
           }
         </nav>
-        <div className="hidden md:flex md:flex-1">
+        <div className="hidden lg:flex lg:flex-1">
 
         </div>
       </div>

components/navigation/otherItems.js

@@ -1,5 +1,6 @@
 export default [
   { text: 'Blog', href: '/blog' },
   // { text: 'Shop', href: 'https://asyncapi.threadless.com', target: '_blank' },
+  { text: "Roadmap", href: '/roadmap', className: 'text-green-400 font-bold' },
   { text: "Jobs", href: '/jobs', className: 'text-primary-500 font-bold' },
 ]

components/roadmap/RoadmapColumn.js

@@ -0,0 +1,25 @@
+import RoadmapItem from "./RoadmapItem";
+
+export default function RoadmapColumn({ title, description, colorClass, items = [] }) {
+  return (
+    <div className="mt-8 lg:mt-4">
+      <div className="p-4">
+        <h3 className="text-md font-semibold uppercase text-center">{title}</h3>
+        <p className="text-center text-sm text-gray-600 mt-2">{description}</p>
+      </div>
+      <ul className="mt-3">
+        {
+          items.map((item, index) => (
+            <RoadmapItem
+              key={index}
+              url={item.url}
+              title={item.title}
+              bets={item.bets}
+              colorClass={colorClass}
+            />
+          ))
+        }
+      </ul>
+    </div>
+  )
+}

components/roadmap/RoadmapItem.js

@@ -0,0 +1,35 @@
+export default function RoadmapItem({ url, title, bets = [], colorClass }) {
+  return (
+    <li className="mt-2">
+      <div className="flex shadow-sm rounded-md">
+        <a href={url} target="_blank" className={`flex-shrink-0 flex items-center justify-center w-4 text-sm font-medium rounded-l-md ${colorClass}`}></a>
+        <div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+          <div className="flex-1 px-4 py-2 text-sm">
+            <a href={url} target="_blank" className="block text-gray-900 font-medium hover:text-gray-600">{title}</a>
+          </div>
+        </div>
+      </div>
+
+      <ul className="mt-3">
+        {
+          bets.map((bet, index) => (
+            <li key={index} className="mt-2 flex">
+              <div className="border-b-2 border-l-2 border-gray-200 rounded-bl-md w-5 my-2 ml-4 mr-2"></div>
+              <div className="flex flex-1 shadow-sm rounded-md">
+                <a href={bet.html_url} target="_blank" className="flex-shrink-0 flex items-center justify-center w-4 text-sm font-medium rounded-l-md bg-gray-700"></a>
+                <div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md">
+                  <div className="flex flex-1 px-4 py-2 text-sm">
+                    {
+                      bet.state === 'closed' && (<div className="text-xs rounded-md h-6 px-1.5 py-0.5 mr-2 uppercase font-semibold bg-gray-100 text-pink-600">Done</div>)
+                    }
+                    <a href={bet.html_url} target="_blank" className="block text-gray-900 font-medium hover:text-gray-600">{bet.title}</a>
+                  </div>
+                </div>
+              </div>
+            </li>
+          ))
+        }
+      </ul>
+    </li>
+  )
+}

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "description": "AsyncAPI website",
   "scripts": {
-    "dev": "node scripts/build-post-list.js && next -p 8080",
-    "build": "node scripts/build-post-list.js && next build",
+    "dev": "node scripts/build-post-list.js && node scripts/build-roadmap.js && next -p 8080",
+    "build": "node scripts/build-post-list.js && node scripts/build-roadmap.js && next build",
     "start": "next start",
     "export": "next export",
     "lint": "echo \"No linter configured yet\"",
@@ -35,16 +35,19 @@
     "@mdx-js/react": "^1.6.4",
     "@monaco-editor/react": "^3.3.0",
     "@next/mdx": "^9.4.2",
+    "@octokit/graphql": "^4.6.0",
     "@tailwindcss/ui": "^0.3.0",
     "@zeit/next-css": "^1.0.1",
     "autoprefixer": "^9.7.6",
+    "dotenv": "^8.2.0",
     "gray-matter": "^4.0.2",
     "lodash": "^4.17.19",
     "markdown-to-txt": "^1.0.1",
     "markdown-toc": "^1.2.0",
     "moment": "^2.26.0",
     "monaco-editor": "^0.20.0",
     "next": "^9.4.4",
+    "node-fetch": "^2.6.1",
     "postcss-import": "^12.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",