Remove next dependencies from the article components

This pulls next related deps up into the page instead of the
component and allows us to pull next out of the app reader
dependency.

packages/appreader/src/index.jsx

@@ -33,7 +33,6 @@ const App = () => {
           className="disable-webkit-callout"
         >
           <ArticleContainer
-            viewerUsername="test"
             article={window.omnivoreArticle}
             scrollElementRef={React.createRef()}
             isAppleAppEmbed={true}

packages/web/components/templates/article/ArticleContainer.tsx

@@ -10,19 +10,14 @@ import { MutableRefObject, useEffect, useState } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
 import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
-import { articleKeyboardCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { ShareArticleModal } from './ShareArticleModal'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
 import { webBaseURL } from '../../../lib/appConfig'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { EditLabelsModal } from './EditLabelsModal'
-import Script from 'next/script'
-import { useRouter } from 'next/router'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type ArticleContainerProps = {
-  viewerUsername: string
   article: ArticleAttributes
   articleMutations: ArticleMutations
   scrollElementRef: MutableRefObject<HTMLDivElement | null>
@@ -35,7 +30,6 @@ type ArticleContainerProps = {
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
-  const router = useRouter()
   const [showShareModal, setShowShareModal] = useState(false)
   const [showLabelsModal, setShowLabelsModal] = useState(false)
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
@@ -50,28 +44,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     await userPersonalizationMutation({ fontSize: newFontSize })
   }
 
-  useKeyboardShortcuts(
-    articleKeyboardCommands(router, async (action) => {
-      switch (action) {
-        case 'openOriginalArticle':
-          const url = props.article.url
-          if (url) {
-            window.open(url, '_blank')
-          }
-          break
-        case 'incrementFontSize':
-          await updateFontSize(Math.min(fontSize + 2, 28))
-          break
-        case 'decrementFontSize':
-          await updateFontSize(Math.max(fontSize - 2, 10))
-          break
-        case 'editLabels':
-          setShowLabelsModal(true)
-          break
-      }
-    })
-  )
-
   // Listen for font size and color mode change events sent from host apps (ios, macos...)
   useEffect(() => {
     const increaseFontSize = async () => {
@@ -123,16 +95,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
 
   return (
     <>
-      {!props.isAppleAppEmbed && (
-        <>
-          <Script async src="/static/scripts/mathJaxConfiguration.js" />
-          <Script
-            async
-            id="MathJax-script"
-            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
-          />
-        </>
-      )}
       <Box
         id="article-container"
         css={{
@@ -213,7 +175,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         <Box css={{ height: '100px' }} />
       </Box>
       <HighlightsLayer
-        viewerUsername={props.viewerUsername}
         highlights={props.article.highlights}
         articleTitle={props.article.title}
         articleAuthor={props.article.author ?? ''}
@@ -238,7 +199,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           onOpenChange={(open: boolean) => setShowReportIssuesModal(open)}
         />
       ) : null}
-      {showShareModal && (
+      {/* {showShareModal && (
         <ShareArticleModal
           url={`${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights?r=true`}
           title={props.article.title}
@@ -249,7 +210,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           originalArticleUrl={props.article.originalArticleUrl}
           onOpenChange={(open: boolean) => setShowShareModal(open)}
         />
-      )}
+      )} */}
       {showLabelsModal && (
         <EditLabelsModal
           labels={labels}

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -21,7 +21,6 @@ import { showErrorToast } from '../../../lib/toastHelpers'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type HighlightsLayerProps = {
-  viewerUsername: string
   highlights: Highlight[]
   articleId: string
   articleTitle: string

packages/web/pages/[username]/[slug]/index.tsx

@@ -6,9 +6,9 @@ import { useRouter } from 'next/router'
 import { VStack } from './../../../components/elements/LayoutPrimitives'
 import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { articleKeyboardCommands, navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import dynamic from 'next/dynamic'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { webBaseURL } from '../../../lib/appConfig'
@@ -18,6 +18,8 @@ import { deleteHighlightMutation } from '../../../lib/networking/mutations/delet
 import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
+import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
+import Script from 'next/script'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -38,9 +40,37 @@ export default function Home(): JSX.Element {
   })
   const { preferencesData } = useGetUserPreferences()
   const article = articleData?.article.article
+  const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
 
   useKeyboardShortcuts(navigationCommands(router))
 
+  const updateFontSize = async (newFontSize: number) => {
+    setFontSize(newFontSize)
+    await userPersonalizationMutation({ fontSize: newFontSize })
+  }
+
+  useKeyboardShortcuts(
+    articleKeyboardCommands(router, async (action) => {
+      switch (action) {
+        case 'openOriginalArticle':
+          const url = article?.url
+          if (url) {
+            window.open(url, '_blank')
+          }
+          break
+        case 'incrementFontSize':
+          await updateFontSize(Math.min(fontSize + 2, 28))
+          break
+        case 'decrementFontSize':
+          await updateFontSize(Math.max(fontSize - 2, 10))
+          break
+        case 'editLabels':
+          setShowLabelsModal(true)
+          break
+      }
+    })
+  )
+
   if (article && viewerData?.me) {
     return (
       <PrimaryLayout
@@ -53,6 +83,12 @@ export default function Home(): JSX.Element {
           description: article.description,
         }}
       >
+        <Script async src="/static/scripts/mathJaxConfiguration.js" />
+        <Script
+          async
+          id="MathJax-script"
+          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+        />
         <Toaster />
 
           {article.contentReader == 'PDF' ? (
@@ -72,9 +108,8 @@ export default function Home(): JSX.Element {
                 scrollElementRef={scrollRef}
                 isAppleAppEmbed={false}
                 highlightBarDisabled={false}
-                viewerUsername={viewerData.me?.profile?.username}
                 highlightsBaseURL={`${webBaseURL}/${viewerData.me?.profile?.username}/${slug}/highlights`}
-                fontSize={preferencesData?.fontSize}
+                fontSize={fontSize}
                 articleMutations={{
                   createHighlightMutation,
                   deleteHighlightMutation,

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -88,7 +88,6 @@ function AppArticleEmbedContent(
             scrollElementRef={scrollRef}
             isAppleAppEmbed={true}
             highlightBarDisabled={props.highlightBarDisabled}
-            viewerUsername={props.username}
             highlightsBaseURL={`${webBaseURL}/${props.username}/${props.slug}/highlights`}
             fontSize={props.fontSize}
             margin={props.margin}