Use Shiki in posts

clients/apps/web/next.config.mjs

@@ -16,10 +16,6 @@ const nextConfig = {
   transpilePackages: ['polarkit'],
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
 
-  experimental: {
-    optimizePackageImports: ['shiki'],
-  },
-
   // Do not do any fiddling with trailing slashes
   trailingSlash: undefined,
   skipTrailingSlashRedirect: true,

clients/apps/web/package.json

@@ -64,7 +64,7 @@
     "lunr": "^2.3.9",
     "markdown-to-jsx": "^7.4.5",
     "mermaid": "^10.6.1",
-    "next": "^14.2.4",
+    "next": "~14.1.4",
     "next-themes": "^0.2.1",
     "open-graph-scraper-lite": "^2.0.0",
     "openapi-types": "^12.1.3",

clients/apps/web/src/app/[organization]/(sidebar)/posts/[postSlug]/ClientPage.tsx

@@ -1,15 +1,8 @@
-'use client'
-
 import LongformPost from '@/components/Feed/LongformPost'
 import { organizationPageLink } from '@/utils/nav'
-import { useTrafficRecordPageView } from '@/utils/traffic'
 import { ArrowBackOutlined } from '@mui/icons-material'
 
-import {
-  useListAllOrganizations,
-  useUserBenefits,
-  useUserSubscriptions,
-} from '@/hooks/queries'
+import { getServerSideAPI } from '@/utils/api/serverside'
 import { Article, BenefitPublicInner, Product } from '@polar-sh/sdk'
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
@@ -20,29 +13,28 @@ interface PostPageProps {
   article: Article
 }
 
-export default function Page({ article, products }: PostPageProps) {
-  useTrafficRecordPageView({ article })
-
+export default async function Page({ article, products }: PostPageProps) {
+  const api = getServerSideAPI()
   // Check if the user is the author of the article
-  const allOrganizations = useListAllOrganizations()
-  const orgIds = (allOrganizations.data?.items ?? []).map((o) => o.id)
+  const allOrganizations = await api.organizations.list()
+  const orgIds = allOrganizations.items?.map((org) => org.id) || []
 
   const isAuthor =
     article.organization.is_personal && orgIds.includes(article.organization.id)
 
-  const userSubs = useUserSubscriptions({
+  const userSubs = await api.users.listSubscriptions({
     organizationId: article.organization.id,
     active: true,
     limit: 100,
   })
 
-  const subscription = (userSubs.data?.items ?? []).find(
+  const subscription = (userSubs.items ?? []).find(
     (s) => s.product.organization_id === article.organization.id,
   )
 
   const isSubscriber = subscription ? true : false
 
-  const { data: benefits } = useUserBenefits({
+  const benefits = await api.users.listBenefits({
     type: 'articles',
     organizationId: article.organization.id,
     limit: 100,

clients/apps/web/src/components/Feed/LongformPost.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import LogoIcon from '@/components/Brand/LogoIcon'
 import { organizationPageLink } from '@/utils/nav'
 import Link from 'next/link'

clients/apps/web/src/components/Feed/Markdown/Ad/BrowserAd.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useAdvertisementDisplays } from '@/hooks/queries'
 
 const BrowserAd = (props: { subscriptionBenefitId: string }) => {

clients/apps/web/src/components/Feed/Markdown/BrowserRender.tsx

@@ -1,7 +1,6 @@
 import Markdown from 'markdown-to-jsx'
 import dynamic from 'next/dynamic'
 import { Skeleton } from 'polarkit/components/ui/skeleton'
-import { createContext, useContext } from 'react'
 import BrowserAd from './Ad/BrowserAd'
 import BrowserCallout from './Callout/BrowserCallout'
 import { calloutRenderRule } from './Callout/renderRule'
@@ -12,6 +11,7 @@ import Paywall from './Paywall/Paywall'
 import BrowserPoll from './Poll/BrowserPoll'
 import Poll from './Poll/Poll'
 import SubscribeNow from './SubscribeNow/SubscribeNow'
+import BrowserSyntaxHighlighter from './SyntaxHighlighter/BrowserSyntaxHighlighter'
 import {
   RenderArticle,
   firstChild,
@@ -28,27 +28,6 @@ const BrowserMermaid = dynamic(() => import('./Mermaid/BrowserMermaid'), {
   ),
 })
 
-// Dynamically load the SyntaxHighlighter (heavily reduces bundle sizes)
-//
-// While loading (and SSR), render a placeholder without syntax highlighting
-const SyntaxHighlighterContext = createContext('')
-const BrowserSyntaxHighlighter = dynamic(
-  () => import('./SyntaxHighlighter/BrowserSyntaxHighlighter'),
-  {
-    ssr: false,
-    loading: () => <BrowserSyntaxHighlighterLoading />,
-  },
-)
-
-const BrowserSyntaxHighlighterLoading = () => {
-  const value = useContext(SyntaxHighlighterContext)
-  return (
-    <pre className="w-full">
-      <code className="text-black dark:text-white">{value}</code>
-    </pre>
-  )
-}
-
 export const opts = {
   ...markdownOpts,
 
@@ -80,11 +59,7 @@ export const opts = {
             return <BrowserMermaid graphDefinition={contents} />
           }
         }
-        return (
-          <SyntaxHighlighterContext.Provider value={child.props.children}>
-            <BrowserSyntaxHighlighter language={language} {...child.props} />
-          </SyntaxHighlighterContext.Provider>
-        )
+        return <BrowserSyntaxHighlighter language={language} {...child.props} />
       }
       return <></>
     },

clients/apps/web/src/components/Feed/Markdown/Embed/BrowserEmbed.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import IssueListItem from '@/components/Issues/IssueListItem'
 import { api } from '@/utils/api'
 import { FavoriteBorderOutlined } from '@mui/icons-material'

clients/apps/web/src/components/Feed/Markdown/Img/ImageOverlay.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Modal } from '@/components/Modal'
 import { useModal } from '@/components/Modal/useModal'
 import Image from 'next/image'

clients/apps/web/src/components/Feed/Markdown/Mermaid/BrowserMermaid.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 // @ts-ignore
 import mermaid from 'mermaid'
 import { useTheme } from 'next-themes'

clients/apps/web/src/components/Feed/Markdown/Poll/BrowserPoll.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 

clients/apps/web/src/components/Feed/Markdown/SubscribeNow/SubscribeNow.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import SubscribeNowWithModal from '@/components/Subscriptions/SubscribeNowWithModal'
 import { Article } from '@polar-sh/sdk'
 

clients/apps/web/src/components/Feed/Markdown/SyntaxHighlighter/BrowserSyntaxHighlighter.tsx

@@ -1,20 +1,11 @@
-import { ContentPasteOutlined } from '@mui/icons-material'
-import Button from 'polarkit/components/ui/atoms/button'
-
-import SyntaxHighlighter from '@/components/SyntaxHighlighter/SyntaxHighlighter'
-import { polarDark, polarLight } from '@/components/SyntaxHighlighter/themes'
-import { useTheme } from 'next-themes'
+import SyntaxHighlighterServer from '@/components/SyntaxHighlighterAsync/SyntaxHighlighterServer'
 import { firstChild } from '../markdown'
 
 const BrowserSyntaxHighlighter = (props: {
   language: string | undefined
   children: React.ReactNode
 }) => {
   const { language } = props
-  const { resolvedTheme } = useTheme()
-  const syntaxHighlighterTheme =
-    resolvedTheme === 'dark' ? polarDark : polarLight
-
   const code = firstChild(props.children)
 
   if (!code) {
@@ -32,22 +23,17 @@ const BrowserSyntaxHighlighter = (props: {
 
   return (
     <div className="relative my-2 w-full">
-      <div className="not-prose">
-        <SyntaxHighlighter
-          language={language}
-          code={code}
-          theme={syntaxHighlighterTheme}
-          lineNumbers
-        />
+      <div className="not-prose bg-black">
+        <SyntaxHighlighterServer lang={language} code={code} />
       </div>
-      <Button
+      {/* <Button
         size="icon"
         variant="secondary"
         className="absolute right-6 top-6 h-8 w-8 rounded-full bg-gray-50 text-sm dark:bg-gray-900"
         onClick={handleCopy}
       >
         <ContentPasteOutlined fontSize="inherit" />
-      </Button>
+      </Button> */}
     </div>
   )
 }

clients/apps/web/src/components/Feed/Posts/Share.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { organizationPageLink } from '@/utils/nav'
 import { LinkedIn } from '@mui/icons-material'
 import XIcon from '@mui/icons-material/X'

clients/apps/web/src/components/Modal/index.tsx

@@ -68,7 +68,7 @@ export const Modal: FunctionComponent<ModalProps> = ({
             <div className="block h-[80px] w-2 lg:max-h-[10%] lg:grow-[2]"></div>
             <motion.div
               className={twMerge(
-                'dark:bg-polar-950 dark:border-polar-800 dark:border relative z-10 flex max-h-full w-full flex-col overflow-hidden rounded-3xl bg-white shadow lg:w-[800px] lg:max-w-full',
+                'dark:bg-polar-950 dark:border-polar-800 relative z-10 flex max-h-full w-full flex-col overflow-hidden rounded-3xl bg-white shadow lg:w-[800px] lg:max-w-full dark:border',
                 className,
               )}
               initial={{ opacity: 0, scale: 0.99 }}
@@ -110,11 +110,7 @@ export const CloseButton = (props: {
   hide: () => void
 }) => {
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => props.hide()}
-    >
+    <Button variant="ghost" size="icon" onClick={() => props.hide()}>
       <XIcon />
     </Button>
   )

clients/apps/web/src/components/Subscriptions/SubscribeNowWithModal.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useAuth } from '@/hooks/auth'
 import { useSendMagicLink } from '@/hooks/magicLink'
 import {