Custom handle inline code blocks

apps/www/components/InlineCode.tsx

@@ -0,0 +1,11 @@
+const InlineCodeTag = ({ children }: any) => {
+  // If children isn't a string, just return it as is, just in case
+  if (typeof children !== 'string') return children
+
+  // check the length of the string inside the <code> tag
+  // if it's fewer than 70 characters, add a white-space: pre so it doesn't wrap
+  const classes = children.length < 70 ? 'short-inline-codeblock' : ''
+
+  return <code className={classes}>{children}</code>
+}
+export default InlineCodeTag

apps/www/lib/mdx/mdxComponents.tsx

@@ -4,6 +4,7 @@ import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import ImageGrid from '~/components/ImageGrid'
 import Quote from '~/components/Quote'
 import Chart from '~/components/Charts/PGCharts'
+import InlineCodeTag from '~/components/InlineCode'
 
 // import all components used in blog articles here
 // to do: move this into a helper/utils, it is used elsewhere
@@ -47,6 +48,7 @@ export default function mdxComponents(type?: 'blog' | 'lp' | undefined) {
       }
       return <img {...props} />
     },
+    code: (props: any) => <InlineCodeTag>{props.children}</InlineCodeTag>,
   }
 
   return components

apps/www/public/rss.xml

@@ -5,9 +5,16 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Mon, 07 Nov 2022 03:03:30 +0000</lastBuildDate>
+      <lastBuildDate>Wed, 16 Nov 2022 03:03:30 +0000</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components</guid>
+  <title>Fetching and caching Supabase data in Next.js 13 Server Components</title>
+  <link>https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components</link>
+  <description>Next.js 13 introduces new data fetching and caching methods to enable React Server Components and Suspense.</description>
+  <pubDate>Wed, 16 Nov 2022 03:03:30 +0000</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/authentication-in-ionic-angular</guid>
   <title>Authentication in Ionic Angular with Supabase</title>
   <link>https://supabase.com/blog/authentication-in-ionic-angular</link>

apps/www/styles/index.css

@@ -421,3 +421,10 @@ launch week
 .recharts-surface {
   overflow: visible;
 }
+
+/* Fix inline code block wrapping */
+@media screen and (min-width: 769px) {
+  .short-inline-codeblock {
+    white-space: pre !important;
+  }
+}