chore(blog): websocket part 3 about code generation

components/Figure.js

@@ -1,10 +1,10 @@
 import Caption from './Caption'
 
-export default function Figure ({ src, caption, widthClass }) {
+export default function Figure ({ src, caption, widthClass, className }) {
   return (
-    <figure>
-      <img className={widthClass || "w-full"} src={src} />
-      <Caption>{caption}</Caption>
+    <figure className={className}>
+      <img className={`${widthClass || 'w-full'} inline-block`} src={src} />
+      { caption && (<Caption>{caption}</Caption>) }
     </figure>
   )
 }

components/TOC.js

@@ -9,7 +9,7 @@ export default function TOC({
   contentSelector,
 }) {
   if (!toc || !toc.length) return null
-  const minLevel = toc.reduce((item, mLevel) => item.lvl < mLevel ? item.lvl : mLevel, 1).lvl
+  const minLevel = toc.reduce((mLevel, item) => (!mLevel || item.lvl < mLevel) ? item.lvl : mLevel, 0)
   const tocItems = toc.filter(item => item.lvl <= minLevel + 2).map(item => ({ ...item, content: item.content.replace(/[\s]?\{\#[\w\d\-_]+\}$/, '') }))
 
   const [open, setOpen] = useState(false)

components/layout/BlogLayout.js

@@ -38,7 +38,7 @@ export default function BlogLayout({ post, children }) {
               <div className="ml-3">
                 <p className="text-sm leading-5 font-medium text-gray-900">
                   <span className="hover:underline">
-                    {post.authors.map(author => author.link ? <a alt={author.name} href={author.link}>{author.name}</a> : author.name).reduce((prev, curr) => [ prev, ' & ', curr ])}
+                    {post.authors.map((author, index) => author.link ? <a key={index} alt={author.name} href={author.link}>{author.name}</a> : author.name).reduce((prev, curr) => [ prev, ' & ', curr ])}
                   </span>
                 </p>
                 <div className="flex text-sm leading-5 text-gray-500">

components/navigation/BlogPostItem.js

@@ -48,7 +48,7 @@ export default function BlogPostItem({ post, className = '' }) {
           <div className="ml-3">
             <p className="text-sm leading-5 font-medium text-gray-900">
               <span className="hover:underline">
-                {post.authors.map(author => author.link ? <a alt={author.name} href={author.link}>{author.name}</a> : author.name).reduce((prev, curr) => [ prev, ' & ', curr ])}
+                {post.authors.map((author, index) => author.link ? <a key={index} alt={author.name} href={author.link}>{author.name}</a> : author.name).reduce((prev, curr) => [ prev, ' & ', curr ])}
               </span>
             </p>
             <div className="flex text-sm leading-5 text-gray-500">

pages/_app.js

@@ -42,8 +42,8 @@ function getMDXComponents() {
     p: props => <p {...props} className={`${props.className || ''} my-4 text-gray-700 font-normal font-sans antialiased`} />,
     strong: props => <strong {...props} className={`${props.className || ''} my-4 text-gray-700 font-semibold font-sans antialiased`} />,
     a: props => <a {...props} className={`${props.className ? props.className : 'text-primary-600 font-medium hover:text-primary-500'} font-sans antialiased`} />,
-    ul: props => <ul {...props} className={`${props.className || ''} my-4 ml-4 list-disc list-inside text-gray-700 font-normal font-sans antialiased`} />,
-    ol: props => <ol {...props} className={`${props.className || ''} my-4 ml-4 list-decimal list-inside text-gray-700 font-normal font-sans antialiased`} />,
+    ul: props => <ul {...props} className={`${props.className || ''} my-4 ml-4 list-disc text-gray-700 font-normal font-sans antialiased`} />,
+    ol: props => <ol {...props} className={`${props.className || ''} my-4 ml-4 list-decimal text-gray-700 font-normal font-sans antialiased`} />,
     li: props => <li {...props} className={`${props.className || ''} my-3 text-gray-700 font-normal font-sans antialiased`} />,
     button: Button,
     table: props => (

pages/blog/building-async-flight-notification-service.md

@@ -2,7 +2,6 @@
 title: "Building an asynchronous flight notification service using AsyncAPI, MQTT, Amadeus and Twilio"
 date: 2021-03-24T06:00:00+01:00
 type: Engineering
-featured: true
 tags:
   - Community
   - Testing

pages/blog/understanding-asyncapis.md

@@ -7,7 +7,6 @@ tags:
   - Event-driven Architecture
   - Microservices
 cover: /img/posts/understanding-asyncapis.webp
-featured: true
 authors:
   - name: Dunith Dhanushka
     photo: /img/avatars/dunithd.webp

pages/blog/websocket-part1.md

@@ -16,6 +16,9 @@ featured: true
 
 This is a pretty subjective post. I'm sharing my perspective, taking into account years of experience building backend and frontend with user experience in mind. 
 
+If you do not want to read this article, then watch the recording of the live stream about the same:
+<YouTube id="8tFBcf31e_c" />
+
 >  Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth.
 ― [Marcus Aurelius](https://www.politifact.com/factchecks/2019/sep/26/viral-image/no-marcus-aurelius-didnt-say-about-opinions-and-fa/)
 

pages/blog/websocket-part2.md

@@ -16,6 +16,9 @@ featured: true
 
 >  This step-by-step guide is a continuation of a series of articles about WebSockets. I recommend reading [WebSocket, Shrek, and AsyncAPI - An Opinionated Intro](/blog/websocket-part1) first.
 
+If you do not want to read this article, then watch the recording of the live stream about the same:
+<YouTube id="8tFBcf31e_c" />
+
 All roads lead to Rome, but all those roads are different. First, you need to identify where you are and what is the purpose of your journey. What is your goal? What do you want to use AsyncAPI for?
 
 You may invest in using the specification for many different reasons, like for example: