From 69a452b4f3f17e2eaebe15a02fe2130a558be6ed Mon Sep 17 00:00:00 2001 From: Pablo Mayrgundter Date: Thu, 5 Dec 2024 04:22:21 +0100 Subject: [PATCH] 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 | 2 +- src/BaseRoutes.jsx | 48 +++++++---- src/Share.fixture.jsx | 27 +++++-- src/Share.jsx | 20 ++--- src/ShareRoutes.jsx | 4 + src/layouts/AboutLayout.jsx | 7 ++ src/layouts/BlogLayout.jsx | 20 +++++ src/layouts/BlogPostLayout.jsx | 23 ++++++ src/layouts/TitledLayout.jsx | 59 ++++++++++++++ src/pages/About.jsx | 33 ++++++++ src/pages/About.test.jsx | 13 +++ src/pages/blog/BlogIndex.jsx | 16 ++++ src/pages/blog/BlogIndex.test.jsx | 20 +++++ ...nouncesLaunchOfShareAndTheConwayEngine.jsx | 68 ++++++++++++++++ src/pages/share/About.jsx | 69 ++++++++++++++++ src/pages/share/About.test.jsx | 13 +++ src/pages/share/Conway.jsx | 79 +++++++++++++++++++ src/theme/Components.js | 27 +++++-- 18 files changed, 503 insertions(+), 45 deletions(-) create mode 100644 src/layouts/AboutLayout.jsx create mode 100644 src/layouts/BlogLayout.jsx create mode 100644 src/layouts/BlogPostLayout.jsx create mode 100644 src/layouts/TitledLayout.jsx create mode 100644 src/pages/About.jsx create mode 100644 src/pages/About.test.jsx create mode 100644 src/pages/blog/BlogIndex.jsx create mode 100644 src/pages/blog/BlogIndex.test.jsx create mode 100644 src/pages/blog/Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine.jsx create mode 100644 src/pages/share/About.jsx create mode 100644 src/pages/share/About.test.jsx create mode 100644 src/pages/share/Conway.jsx diff --git a/package.json b/package.json index e91323159..6bcd71c41 100644 --- a/package.json +++ b/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", diff --git a/src/BaseRoutes.jsx b/src/BaseRoutes.jsx index d41227989..578c35455 100644 --- a/src/BaseRoutes.jsx +++ b/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 ( - - }> - - } - /> - - + + + + + }> + + } + /> + }/> + }/> + } + /> + + + + ) } diff --git a/src/Share.fixture.jsx b/src/Share.fixture.jsx index 13ac7a820..5a00c3192 100644 --- a/src/Share.fixture.jsx +++ b/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.} children The component under test * @return {ReactElement} */ -export function RouteThemeCtx({children}) { - return {children} +export function HelmetStoreRouteThemeCtx({children}) { + return {children} } /** + * For Pages like About and Blog. + * * @property {Array.} children The component under test * @return {ReactElement} */ -export function StoreRouteThemeCtx({children}) { - return {children} +export function HelmetThemeCtx({children}) { + return {children} } /** - * Mostly for dialogs, which are often titled and routed - * * @property {Array.} children The component under test * @return {ReactElement} */ -export function HelmetStoreRouteThemeCtx({children}) { - return {children} +export function RouteThemeCtx({children}) { + return {children} +} + + +/** + * @property {Array.} children The component under test + * @return {ReactElement} + */ +export function StoreRouteThemeCtx({children}) { + return {children} } diff --git a/src/Share.jsx b/src/Share.jsx index 8d3a31acc..2f430d020 100644 --- a/src/Share.jsx +++ b/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 && <> - - - - - - + ) } diff --git a/src/ShareRoutes.jsx b/src/ShareRoutes.jsx index 6e931d092..699a2c19f 100644 --- a/src/ShareRoutes.jsx +++ b/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 ( }> + }/> + }/> Hello About Layout!) +} diff --git a/src/layouts/BlogLayout.jsx b/src/layouts/BlogLayout.jsx new file mode 100644 index 000000000..3cc42887e --- /dev/null +++ b/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} children The text content elements for the page + * @return {ReactElement} + */ +export default function BlogLayout({title, children}) { + assertDefined(title, children) + return ( + + {children} + + ) +} diff --git a/src/layouts/BlogPostLayout.jsx b/src/layouts/BlogPostLayout.jsx new file mode 100644 index 000000000..df05acd52 --- /dev/null +++ b/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} children The text content elements for the page + * @return {ReactElement} + */ +export default function BlogPostLayout({title, dateline, children}) { + assertDefined(title, dateline, children) + return ( + + {dateline} + {children} + + ) +} diff --git a/src/layouts/TitledLayout.jsx b/src/layouts/TitledLayout.jsx new file mode 100644 index 000000000..3c2ea10e0 --- /dev/null +++ b/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} children The text content elements for the page + * @return {ReactElement} + */ +export default function TitledLayout({title, children}) { + assertDefined(title, children) + return ( + <> + + {title} + + + + + + + {title} + {children} + + + + ) +} diff --git a/src/pages/About.jsx b/src/pages/About.jsx new file mode 100644 index 000000000..32df8a592 --- /dev/null +++ b/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 ( + + + 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. + + + We can't imagine a future where building the rest of the world hasn't been + transformed by these new ways of working. We are part of that transformation. + + + 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. + + + Build Every Thing Together + + + ) +} diff --git a/src/pages/About.test.jsx b/src/pages/About.test.jsx new file mode 100644 index 000000000..910e6e33a --- /dev/null +++ b/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(, {wrapper: HelmetThemeCtx}) + const title = getByText('About Bldrs') + expect(title).toBeInTheDocument() + }) +}) diff --git a/src/pages/blog/BlogIndex.jsx b/src/pages/blog/BlogIndex.jsx new file mode 100644 index 000000000..675ccef47 --- /dev/null +++ b/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 ( + + 2024-12-05: + + Bldrs Announces Launch of Share and the Conway Engine + + + ) +} diff --git a/src/pages/blog/BlogIndex.test.jsx b/src/pages/blog/BlogIndex.test.jsx new file mode 100644 index 000000000..ab7aec4ad --- /dev/null +++ b/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(, {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(, {wrapper: HelmetThemeCtx}) + expect(getByText('Bldrs Announces Launch of Share and the Conway Engine')).toBeInTheDocument() + }) +}) diff --git a/src/pages/blog/Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine.jsx b/src/pages/blog/Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine.jsx new file mode 100644 index 000000000..b61ec74e8 --- /dev/null +++ b/src/pages/blog/Post20241205BldrsAnnouncesLaunchOfShareAndTheConwayEngine.jsx @@ -0,0 +1,68 @@ +import React, {ReactElement} from 'react' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import BlogPostLayout from '../../layouts/BlogPostLayout' + + +/** @return {ReactElement} */ +export default function FirstPost() { + return ( + + Pioneering a New Wave in Open-Source Design & Engineering Collaboration + + Bldrs is thrilled to unveil Share and its Conway Engine, a powerful web application + crafted for high-performance CAD collaboration in contemporary engineering workflows. + These tools are the result of years of intensive research, development, and engineering, + marking the official launch of Bldrs’ open-source and commercial strategy. + + Why Bldrs Share & Conway Engine? + + Engineering teams in the built world have been tethered to outdated desktop CAD tools, + proprietary formats, and sluggish SaaS solutions. Drawing on our decades of experience in + software innovation, Bldrs introduces a browser-first, real-time collaboration platform that + supports federated versioning, open-source, and open-standard tooling—tailored for modern + workflows and designed for architects, engineers, industrial designers, manufacturers, and + operators leading the world’s most impactful projects. + + + Share and Conway Engine are designed to help builder communities overcome the collaboration + limitations common in current CAD tools. Modern cross-functional teams require frictionless, + high-performance web-based visualization, real-time collaboration, visual issue tracking and + seamless integration with automation. Regardless of your discipline, Share and Conway Engine + unlock a new level of capability in CAD model sharing. + + + As an open-source project, Share will remain accessible, customizable, and adaptable for + all users, from independent creators to large-scale enterprise teams. + We invite the community to share feedback, collaborate, and shape the future of these tools to + Build Every Thing Together. + + Why Bldrs Share & Conway Engine? + + Start using Bldrs Share today to transform your CAD workflows. Join our + community, explore the documentation, and contribute to the development of the + next-generation CAD tooling. + + + For more information, visit our project repositories on GitHub: +
    +
  • Share
    • +
  • Conway Engine
    • +
+ + + 🙌 Join the Conversation + + + We'd love to hear your thoughts, questions, and feedback! Join us on + + Discord + + to connect with the team and other users, or drop us an issue or pull request on + + GitHub + . + + + ) +} diff --git a/src/pages/share/About.jsx b/src/pages/share/About.jsx new file mode 100644 index 000000000..fc1b6f036 --- /dev/null +++ b/src/pages/share/About.jsx @@ -0,0 +1,69 @@ +import React, {ReactElement} from 'react' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import TitledLayout from '../../layouts/TitledLayout' + + +/** @return {ReactElement} */ +export default function About() { + return ( + + + Bldrs Share is a high-performance web application for CAD model sharing and + collaboration, built on open-source standards for speed, accuracy, and flexibility. + Designed for real-time, browser-based teamwork, Bldrs Share empowers teams to + effortlessly share detailed models and collaborate seamlessly from any device. + + + Key Features of Bldrs Share + + + Correct & Fast + + + We bring your complex CAD models to life (supporting IFC/STEP, GLTF, STL, OBJ and + more) with the highest quality and best-in-class performance. + + + Fast is our favorite feature! + + + Explore the Conway Engine → + + + Browser-First, Desktop-Free + + + Share lets you simply drag-and-drop your model files for instant browser-based viewing, + eliminating backend latency, SaaS dependencies, and data residency issues. Work from + anywhere, on any device, with just a web connection. + + + GitHub Integration for Team Collaboration + + + Access, manage, and share your models using your GitHub credentials. With seamless + GitHub integration, Share lets you keep your model library organized and accessible, while + making it easy to log changes, share projects, and collaborate across teams. + + + Notes, Cameras and Pins Capture specific views and sections of the model, drop pins on + geometry, and link notes to particular elements or perspectives. These tools make sharing + insights and feedback effortless, so teams stay aligned throughout the design process. + + + Versioning and History Tracking Built on Git version control, Share provides intuitive + versioning that makes it simple to navigate model history, manage revisions, and keep + track of design evolution over time. + + + Navigation + + + Explore 3D geometry with ease—navigate spatial structures, elements, and properties + directly within the interface. Manage element attributes and IFC Property Sets in a + clear, streamlined view, enabling precise control over model details. + + + ) +} diff --git a/src/pages/share/About.test.jsx b/src/pages/share/About.test.jsx new file mode 100644 index 000000000..13f63d997 --- /dev/null +++ b/src/pages/share/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(, {wrapper: HelmetThemeCtx}) + const title = getByText('Bldrs Share: High-performance Web-based CAD sharing') + expect(title).toBeInTheDocument() + }) +}) diff --git a/src/pages/share/Conway.jsx b/src/pages/share/Conway.jsx new file mode 100644 index 000000000..16828fb54 --- /dev/null +++ b/src/pages/share/Conway.jsx @@ -0,0 +1,79 @@ +import React, {ReactElement} from 'react' +import Link from '@mui/material/Link' +import Typography from '@mui/material/Typography' +import TitledLayout from '../../layouts/TitledLayout' + + +/** @return {ReactElement} */ +export default function Conway() { + return ( + + + Conway powers Bldrs Share with unparalleled performance, bringing high-quality, + precision CAD to the web. This cutting-edge CAD engine, designed specifically for + IFC and STEP formats, offers advanced geometric representation, enabling teams to + open and visualize intricate models with exceptional accuracy and speed. + + + Key Advancements of Conway Engine + + + Unified Core for IFC & STEP Standards + + + conway-geom is Bldrs’ rewrite of web-ifc, engineered for + high-performance and to support the full suite of open CAD standards within the + IFC and STEP families. +
    +
  • Fast near-exact CSG: Our cutting-edge implementation of + Constructive Solid Geometry (CSG) partly based on + + “Exact predicates, exact constructions and combinatorics for mesh CSG” + - Lévy et al. 2024, with + robust handling of real-world model data, tailored for the web environment. +
    • +
  • Seamless NURBS and Advanced BREP: Conway ensures smooth + handling of Non-Uniform Rational B-Splines (NURBS) and Advanced Boundary + Representation (BREP), with adaptive tesselation preserving accuracy and quality + across complex geometries to streamline workflows for intricate designs. +
    • +
  • Advanced Model Introspection: More than pretty pictures, + Conway gives type-safe access and powerful querying including geometric relations. +
    • +
  • Enhanced Memory Handling: Enables smooth, lag-free interaction + with large, highly detailed 3D models across devices, even with complex assets or + high-poly designs. +
    • +
  • Web Geom: Common libraries shared with web-ifc, including + Earcut, Manifold, csgjs-cpp, fast_float, GLM, and tinynurbs for robust, + high-speed processing. +
    • +
+ + + Complete coverage of IFC 2x3 & 4 + + + Conway fully covers IFC standards with high-fidelity, high-performance BIM support, + offering parsing and validation bindings for 900+ IFC entities across over 7,000 pages of + specifications. +
    +
  • Engineering-Grade Source Code: Includes 500k lines of code in + JS, TS and C++, with an auto-generated type-safe schema-compliant framework. +
    • +
  • Exhaustive Testing: hundreds of unit tests and a large suite of + proprietary industrial models for our automated regression and performance testing + frameworks. +
    • +
+ + + Preliminary support for STEP AP214 + + + Initial support for STEP AP214 expands Conway’s capabilities to include automotive and + 3D printing applications. + + + ) +} diff --git a/src/theme/Components.js b/src/theme/Components.js index bc49f75e7..4b352f52b 100644 --- a/src/theme/Components.js +++ b/src/theme/Components.js @@ -208,13 +208,20 @@ export function getComponentOverrides(palette, typography) { padding: '10px', }), }, - /* { - props: {variant: 'note'}, - style: { - marginBottom: '10px', - backgroundColor: 'yellow', - }, - }, */ + { + props: {variant: 'page-background'}, + style: ({theme}) => ({ + padding: '10px', + borderRadius: '0', + }), + }, + { + props: {variant: 'page'}, + style: ({theme}) => ({ + padding: '10px', + borderRadius: '0', + }), + }, ], }, MuiSelect: { @@ -299,6 +306,12 @@ export function getComponentOverrides(palette, typography) { }, }], }, + MuiTypography: { + styleOverrides: { + root: { + }, + }, + }, } }