Add banner explaining static openscad images

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -14,8 +14,6 @@ interface Props {
 }
 
 const IdeWrapper = ({ cadPackage }: Props) => {
-  const [shouldShowConstructionMessage, setShouldShowConstructionMessage] =
-    useState(true)
   const { state, project } = useIdeContext()
   const handleRender = useRender()
   const saveCode = useSaveCode()
@@ -34,26 +32,6 @@ const IdeWrapper = ({ cadPackage }: Props) => {
         <nav className="flex">
           <IdeHeader handleRender={onRender} />
         </nav>
-        {shouldShowConstructionMessage && (
-          <div className="py-1 md:py-2 bg-pink-200 flex">
-            <div className="flex-grow text-center text-xs md:text-base">
-              We're still working on this. Since you're here, have a look what{' '}
-              <OutBound
-                className="text-pink-700"
-                to="https://github.com/Irev-Dev/cadhub/discussions/212"
-              >
-                we've got planned
-              </OutBound>
-              .
-            </div>
-            <button
-              className="flex mr-3"
-              onClick={() => setShouldShowConstructionMessage(false)}
-            >
-              <Svg className="h-4 w-6 text-gray-500 items-center" name="x" />
-            </button>
-          </div>
-        )}
         <IdeContainer />
       </div>
     </div>

app/web/src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage.tsx

@@ -0,0 +1,14 @@
+import OutBound from 'src/components/OutBound/OutBound'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+
+const OpenscadStaticImageMessage = () => {
+  const { state } = useIdeContext()
+  if (state.ideType !== 'openscad' || state.objectData?.type !== 'png') {
+    return null
+  }
+  return (
+    <OutBound to="https://learn.cadhub.xyz/docs/general-cadhub/openscad-previews" className="text-ch-gray-300 border-ch-gray-300 rounded-md mr-12 px-2 py-1 text-xs">Why reload each camera move?</OutBound>
+  )
+}
+
+export default OpenscadStaticImageMessage

app/web/src/components/PanelToolbar/PanelToolbar.tsx

@@ -1,12 +1,13 @@
 import { useContext } from 'react'
 import { MosaicWindowContext } from 'react-mosaic-component'
 import Svg from 'src/components/Svg/Svg'
+import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage'
 
 const PanelToolbar = ({
   panelName,
   showTopGradient,
 }: {
-  panelName: string
+  panelName: 'Viewer' | 'Console'
   showTopGradient?: boolean
 }) => {
   const { mosaicWindowActions } = useContext(MosaicWindowContext)
@@ -16,6 +17,7 @@ const PanelToolbar = ({
         <div className="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-ch-gray-800 to-transparent" />
       )}
       <div className="absolute top-0 right-0 flex items-center h-9">
+        {panelName === 'Viewer' && <OpenscadStaticImageMessage />}
         <button
           className="bg-ch-gray-760 text-ch-gray-300 px-3 rounded-bl-lg h-full cursor-not-allowed"
           aria-label={`${panelName} settings`}

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -16,6 +16,7 @@ import Gravatar from 'src/components/Gravatar/Gravatar'
 import { useIdeInit } from 'src/components/EncodedUrl/helpers'
 import ProfileViewer from '../ProfileViewer/ProfileViewer'
 import Svg from 'src/components/Svg/Svg'
+import OpenscadStaticImageMessage from 'src/components/OpenscadStaticImageMessage/OpenscadStaticImageMessage'
 
 const KeyValue = ({
   keyName,
@@ -133,6 +134,9 @@ const ProjectProfile = ({
             {/* Viewer */}
             <div className="md:col-start-2 w-full min-h-md relative">
               <ProfileViewer />
+              <div className="absolute right-0 top-0">
+                <OpenscadStaticImageMessage />
+              </div>
             </div>
 
             {/* Side panel */}

docs/docs/general-cadhub/openscad-previews.mdx

@@ -0,0 +1,9 @@
+---
+title: OpenSCAD Previews
+---
+
+you may have noticed that the 3d viewer for OpenSCAD is not fully live. changing perspective of the camera takes a moment before the model updates.
+
+The reason for this is that what's shown is not a 3d asset but instead an image generated by OpenSCAD from the same perspective as the in browser camera.
+This is done to show a preview as quickly as possible as it can take OpenSCAD much longer to product full 3d file (often minutes) than it does to create a preview image (a few seconds).
+

docs/package.json

@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.0",
+    "@docusaurus/core": "^2.0.0-beta.6",
-    "@docusaurus/plugin-ideal-image": "2.0.0-beta.0",
+    "@docusaurus/plugin-ideal-image": "^2.0.0-beta.6",
-    "@docusaurus/preset-classic": "2.0.0-beta.0",
+    "@docusaurus/preset-classic": "^2.0.0-beta.6",
     "@mdx-js/react": "^1.6.21",
     "@tailwindcss/aspect-ratio": "0.2.1",
     "autoprefixer": "^10.2.5",

docs/sidebars.js

@@ -27,6 +27,7 @@ module.exports = {
         'round-anything/radii-conflict',
       ],
     },
-    'general-cadhub/external-resource-url'
+    'general-cadhub/external-resource-url',
+    'general-cadhub/openscad-previews'
   ],
 }

docs/src/css/custom.css

@@ -16,6 +16,16 @@
   font-size: 56px;
 } */
 
+.footer__items .footer__item a span {
+  display: flex;
+  align-items: center;
+}
+
+.navbar__items--right a span {
+  display: flex;
+  align-items: center;
+}
+
 @layer base {
   h1 {
     @apply text-4xl font-bold