pages: introduce pages in next.js dir layout (#1273)

* pages: introduce pages in next.js dir layout

* pages: basic layout for desktop and mobile on text page

* pages: added /about, /share/about, /share/about/conway, /blog and first post

* pages: add link to share from blog post

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.1181",
+  "version": "1.0.1168",
   "main": "src/index.jsx",
   "license": "AGPL-3.0",
   "homepage": "https://github.com/bldrs-ai/Share",

src/BaseRoutes.jsx

@@ -1,11 +1,19 @@
 import React, {useEffect} from 'react'
 import {Outlet, Route, Routes, useLocation, useNavigate} from 'react-router-dom'
+import CssBaseline from '@mui/material/CssBaseline'
+import {ThemeProvider} from '@mui/material/styles'
 import * as Sentry from '@sentry/react'
 import {useAuth0} from './Auth0/Auth0Proxy'
 import {checkOPFSAvailability, setUpGlobalDebugFunctions} from './OPFS/utils'
 import ShareRoutes from './ShareRoutes'
+import Styles from './Styles'
+import About from './pages/About'
+import BlogIndex from './pages/blog/BlogIndex'
+import Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine from
+    './pages/blog/Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine'
 import {initializeOctoKitAuthenticated, initializeOctoKitUnauthenticated} from './net/github/OctokitExport'
 import useStore from './store/useStore'
+import useShareTheme from './theme/Theme'
 import debug from './utils/debug'
 import {navWith} from './utils/navigate'
 
@@ -91,20 +99,32 @@ export default function BaseRoutes({testElt = null}) {
   }, [appPrefix, setAppPrefix, basePath, installPrefix, location, navigate,
       isLoading, isAuthenticated, getAccessTokenSilently, setAccessToken])
 
+  const theme = useShareTheme()
   return (
-    <SentryRoutes>
-      <Route path={basePath} element={<Outlet/>}>
-        <Route
-          path="share/*"
-          element={
-            testElt ||
-              <ShareRoutes
-                installPrefix={installPrefix}
-                appPrefix={`${appPrefix}`}
-              />
-          }
-        />
-      </Route>
-    </SentryRoutes>
+    <CssBaseline enableColorScheme>
+      <ThemeProvider theme={theme}>
+        <Styles theme={theme}/>
+        <SentryRoutes>
+          <Route path={basePath} element={<Outlet/>}>
+            <Route
+              path='share/*'
+              element={
+                testElt ||
+                  <ShareRoutes
+                    installPrefix={installPrefix}
+                    appPrefix={`${appPrefix}`}
+                  />
+              }
+            />
+            <Route path='about' element={<About/>}/>
+            <Route path='blog' element={<BlogIndex/>}/>
+            <Route
+              path='blog/2024-12-05-bldrs-announces-launch-of-share-and-the-conway-engine'
+              element={<Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine/>}
+            />
+          </Route>
+        </SentryRoutes>
+      </ThemeProvider>
+    </CssBaseline>
   )
 }

src/Share.fixture.jsx

@@ -6,29 +6,40 @@ import {ThemeCtx} from './theme/Theme.fixture'
 
 
 /**
+ * Mostly for dialogs, which are often titled and routed
+ *
  * @property {Array.<ReactElement>} children The component under test
  * @return {ReactElement}
  */
-export function RouteThemeCtx({children}) {
-  return <MemoryRouter><ThemeCtx>{children}</ThemeCtx></MemoryRouter>
+export function HelmetStoreRouteThemeCtx({children}) {
+  return <HelmetProvider><StoreRouteThemeCtx>{children}</StoreRouteThemeCtx></HelmetProvider>
 }
 
 
 /**
+ * For Pages like About and Blog.
+ *
  * @property {Array.<ReactElement>} children The component under test
  * @return {ReactElement}
  */
-export function StoreRouteThemeCtx({children}) {
-  return <StoreCtx><RouteThemeCtx>{children}</RouteThemeCtx></StoreCtx>
+export function HelmetThemeCtx({children}) {
+  return <HelmetProvider><ThemeCtx>{children}</ThemeCtx></HelmetProvider>
 }
 
 
 /**
- * Mostly for dialogs, which are often titled and routed
- *
  * @property {Array.<ReactElement>} children The component under test
  * @return {ReactElement}
  */
-export function HelmetStoreRouteThemeCtx({children}) {
-  return <HelmetProvider><StoreRouteThemeCtx>{children}</StoreRouteThemeCtx></HelmetProvider>
+export function RouteThemeCtx({children}) {
+  return <MemoryRouter><ThemeCtx>{children}</ThemeCtx></MemoryRouter>
+}
+
+
+/**
+ * @property {Array.<ReactElement>} children The component under test
+ * @return {ReactElement}
+ */
+export function StoreRouteThemeCtx({children}) {
+  return <StoreCtx><RouteThemeCtx>{children}</RouteThemeCtx></StoreCtx>
 }

src/Share.jsx

@@ -1,19 +1,15 @@
 import React, {ReactElement, useEffect, useMemo} from 'react'
 import {Helmet} from 'react-helmet-async'
 import {useNavigate, useParams} from 'react-router-dom'
-import CssBaseline from '@mui/material/CssBaseline'
-import {ThemeProvider} from '@mui/material/styles'
 import {HASH_PREFIX_CAMERA} from './Components/Camera/hashState'
 import CadView from './Containers/CadView'
 import WidgetApi from './WidgetApi/WidgetApi'
 import useStore from './store/useStore'
-import useShareTheme from './theme/Theme'
 import debug from './utils/debug'
 import {disablePageReloadApprovalCheck} from './utils/event'
 import {navWith} from './utils/navigate'
 import {testUuid} from './utils/strings'
 import {splitAroundExtension} from './Filetype'
-import Styles from './Styles'
 
 
 /**
@@ -80,22 +76,16 @@ export default function Share({installPrefix, appPrefix, pathPrefix}) {
   }, [appPrefix, installPrefix, modelPath, pathPrefix, setRepository, urlParams, setModelPath, navigate])
 
 
-  const theme = useShareTheme()
   // https://mui.com/material-ui/customization/how-to-customize/#4-global-css-override
   return (
     modelPath &&
     <>
       <ModelTitle repository={repository} modelPath={modelPath}/>
-      <CssBaseline enableColorScheme>
-        <ThemeProvider theme={theme}>
-          <Styles theme={theme}/>
-          <CadView
-            installPrefix={installPrefix}
-            appPrefix={appPrefix}
-            pathPrefix={pathPrefix}
-          />
-        </ThemeProvider>
-      </CssBaseline>
+      <CadView
+        installPrefix={installPrefix}
+        appPrefix={appPrefix}
+        pathPrefix={pathPrefix}
+      />
     </>
   )
 }

src/ShareRoutes.jsx

@@ -8,6 +8,8 @@ import {
 } from 'react-router-dom'
 import debug from './utils/debug'
 import {disablePageReloadApprovalCheck} from './utils/event'
+import About from './pages/share/About'
+import Conway from './pages/share/Conway'
 import Share from './Share'
 
 
@@ -41,6 +43,8 @@ export default function ShareRoutes({installPrefix, appPrefix}) {
   return (
     <Routes>
       <Route path='/' element={<Forward appPrefix={appPrefix}/>}>
+        <Route path='about' element={<About/>}/>
+        <Route path='about/conway' element={<Conway/>}/>
         <Route
           path='v/new/*'
           element={

src/layouts/AboutLayout.jsx

@@ -0,0 +1,7 @@
+import React, {ReactElement} from 'react'
+
+
+/** @return {ReactElement} */
+export default function AboutLayout() {
+  return (<div>Hello About Layout!</div>)
+}

src/layouts/BlogLayout.jsx

@@ -0,0 +1,20 @@
+import React, {ReactElement} from 'react'
+import {assertDefined} from '../utils/assert'
+import TitledLayout from './TitledLayout'
+
+
+/**
+ * Layout for blog posts.
+ *
+ * @property {string} title Page title
+ * @property {Array<ReactElement>} children The text content elements for the page
+ * @return {ReactElement}
+ */
+export default function BlogLayout({title, children}) {
+  assertDefined(title, children)
+  return (
+    <TitledLayout title={title}>
+      {children}
+    </TitledLayout>
+  )
+}

src/layouts/BlogPostLayout.jsx

@@ -0,0 +1,23 @@
+import React, {ReactElement} from 'react'
+import Typography from '@mui/material/Typography'
+import {assertDefined} from '../utils/assert'
+import TitledLayout from './TitledLayout'
+
+
+/**
+ * Layout for blog posts.
+ *
+ * @property {string} title Page title
+ * @property {string} dateline Page title
+ * @property {Array<ReactElement>} children The text content elements for the page
+ * @return {ReactElement}
+ */
+export default function BlogPostLayout({title, dateline, children}) {
+  assertDefined(title, dateline, children)
+  return (
+    <TitledLayout title={title}>
+      <Typography variant='h2'>{dateline}</Typography>
+      {children}
+    </TitledLayout>
+  )
+}

src/layouts/TitledLayout.jsx

@@ -0,0 +1,59 @@
+import React, {ReactElement} from 'react'
+import {Helmet} from 'react-helmet-async'
+import Link from '@mui/material/Link'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import {LogoBWithDomain} from '../Components/Logo/Logo'
+import {assertDefined} from '../utils/assert'
+
+
+/**
+ * Layout for blog posts and info pages.
+ *
+ * @property {string} title Page title
+ * @property {Array<ReactElement>} children The text content elements for the page
+ * @return {ReactElement}
+ */
+export default function TitledLayout({title, children}) {
+  assertDefined(title, children)
+  return (
+    <>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
+      <Paper variant='page-background' sx={{height: '100vh', overflowY: 'scroll'}}>
+        <Paper
+          variant='page'
+          elevation={2}
+          sx={{
+            width: {xs: '100%', md: '8rem'}, // Full width on mobile, fixed on desktop
+            float: {xs: 'none', md: 'left'}, // No float on mobile, float on desktop
+            margin: {xs: '0 0 1rem 0', md: '0 1rem 1rem 0'}, // Margin for wrapping
+          }}
+        >
+          <Link href="/"><LogoBWithDomain sx={{width: '8rem', height: '8rem'}}/></Link>
+        </Paper>
+        <Paper
+          variant='page'
+          elevation={2}
+          sx={{
+            'overflow': 'hidden',
+            '& .MuiTypography-root': {
+              margin: '1em 0',
+            },
+            '& .MuiTypography-p': {
+              textAlign: 'justify',
+            },
+            '& .MuiTypography-p + .MuiTypography-p': {
+              display: 'block',
+            },
+            'margin': {xs: '0 0 1rem 0', md: '0 8rem 1rem 0'}, // Margin for wrapping
+          }}
+        >
+          <Typography variant='h1'>{title}</Typography>
+          {children}
+        </Paper>
+      </Paper>
+    </>
+  )
+}

src/pages/About.jsx

@@ -0,0 +1,33 @@
+import React, {ReactElement} from 'react'
+import Typography from '@mui/material/Typography'
+import TitledLayout from '../layouts/TitledLayout'
+
+
+/** @return {ReactElement} */
+export default function About() {
+  return (
+    <TitledLayout title='About Bldrs'>
+      <Typography variant='p'>
+        The Architecture, Engineering and Construction industries are trying to face
+        challenging problems of the future with tools anchored in the past. Meanwhile,
+        a new dynamic has propelled the Tech industry: online, collaborative,
+        open development.
+      </Typography>
+      <Typography variant='p'>
+        We can&apos;t imagine a future where building the rest of the world hasn&apos;t been
+        transformed by these new ways of working. We are part of that transformation.
+      </Typography>
+      <Typography variant='p'>
+        The key insights from Tech. Cross-functional online collaboration unlocks team flow,
+        productivity and creativity. Your team extends outside of your organization and
+        software developers are essential team members. An ecosystem of app Creators developing on
+        a powerful operating system. Platform is the most scalable architecture. Open workspaces,
+        open standards and open source code the most powerful way to work. Cooperation is the
+        unfair advantage.
+      </Typography>
+      <Typography variant='p'>
+        Build Every Thing Together
+      </Typography>
+    </TitledLayout>
+  )
+}

src/pages/About.test.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {HelmetThemeCtx} from '../Share.fixture'
+import About from './About'
+
+
+describe('About', () => {
+  it('renders', () => {
+    const {getByText} = render(<About/>, {wrapper: HelmetThemeCtx})
+    const title = getByText('About Bldrs')
+    expect(title).toBeInTheDocument()
+  })
+})

src/pages/blog/BlogIndex.jsx

@@ -0,0 +1,16 @@
+import React, {ReactElement} from 'react'
+import Link from '@mui/material/Link'
+import BlogLayout from '../../layouts/BlogLayout'
+
+
+/** @return {ReactElement} */
+export default function BlogIndex() {
+  return (
+    <BlogLayout title='Blog Posts'>
+      2024-12-05:
+      <Link href="/blog/2024-12-05-bldrs-announces-launch-of-share-and-the-conway-engine">
+        Bldrs Announces Launch of Share and the Conway Engine
+      </Link>
+    </BlogLayout>
+  )
+}

src/pages/blog/BlogIndex.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import {HelmetThemeCtx} from '../../Share.fixture'
+import BlogIndex from './BlogIndex'
+import Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine from
+    './Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine'
+
+
+describe('BlogIndex and Posts', () => {
+  it('renders', () => {
+    const {getByText} = render(<BlogIndex/>, {wrapper: HelmetThemeCtx})
+    const title = getByText('Blog Posts')
+    expect(title).toBeInTheDocument()
+    expect(getByText('Bldrs Announces Launch of Share and the Conway Engine')).toBeInTheDocument()
+  })
+  it('Posts render', () => {
+    const {getByText} = render(<Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine/>, {wrapper: HelmetThemeCtx})
+    expect(getByText('Bldrs Announces Launch of Share and the Conway Engine')).toBeInTheDocument()
+  })
+})