Fix #139: Change serving strategy for the static assets in personal g…

…ithub pages (#147)

* projects: restore screenshots

* logo: fix missing display on mobile.

* theme: button svgs use theme.  IssuesControl uses Buttons#TooltipIconButton.

* Fix #139.

* about: change screenshots and links to match for Schep.

* about: use relative links to highlighted projects.

* about: highlighted project href also needs installPrefix.

* fix item properties not showing.  This is from minification.

config/common.js

@@ -5,7 +5,7 @@ const buildDir = 'docs'
 const build = {
   entryPoints: [entry],
   bundle: true,
-  minify: true,
+  minify: false,
   // Splitting
   // Entry points (our src/index.jsx) are currently not named with
   // cache-busting segments, like index-x84nfi.js, so we should be

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "1.0.0-r256",
+  "version": "1.0.0-r264",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "bugs": {

src/Components/AboutControl.jsx

@@ -15,10 +15,10 @@ import GitHubIcon from '../assets/2D_Icons/GitHub.svg'
 
 /**
  * Button to toggle About panel on and off
- * @param {Number} offsetTop offset tree element
+ * @param {string} installPrefix For use in static asset links.
  * @return {Object} The AboutControl react component.
  */
-export default function AboutControl({offsetTop}) {
+export default function AboutControl({installPrefix}) {
   const [isDialogDisplayed, setIsDialogDisplayed] =
         useState(Privacy.getCookieBoolean({
           component: 'about',
@@ -37,7 +37,8 @@ export default function AboutControl({offsetTop}) {
           setIsDialogDisplayed={() => {
             setIsDialogDisplayed(false)
             Privacy.setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
-          }}/>
+          }}
+          installPrefix={installPrefix}/>
       }/>
   )
 }
@@ -47,25 +48,26 @@ export default function AboutControl({offsetTop}) {
  * The AboutDialog component
  * @param {boolean} isDialogDisplayed
  * @param {function} setIsDialogDisplayed
+ * @param {string} installPrefix node
  * @return {Component} React component
  */
-function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
+function AboutDialog({isDialogDisplayed, setIsDialogDisplayed, installPrefix}) {
   return (
     <Dialog
       icon={<LogoB/>}
       headerText='BLDRS'
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
-      content={<AboutContent/>}/>)
+      content={<AboutContent installPrefix={installPrefix}/>}/>)
 }
 
 
 /**
  * The content portion of the AboutDialog
- * @param {Object} clazzes node
+ * @param {string} installPrefix node
  * @return {Object} React component
  */
-function AboutContent({clazzes}) {
+function AboutContent({installPrefix}) {
   const classes = useStyles()
   const marks = [
     {value: 0, label: 'Functional', info: 'Theme, UI state, cookie preference'},
@@ -97,12 +99,16 @@ function AboutContent({clazzes}) {
       </ul>
       <Typography variant='h5' color='info'>Highlighted Projects:</Typography>
       <div className = {classes.demoContainer}>
-        <a href='https://bldrs.ai/share/v/gh/Swiss-Property-AG/Portfolio/main/KNIK.ifc'>
-          <img alt="Tinyhouse" src="/Tinyhouse.png" className={classes.demo}/>
+        {/* eslint-disable-next-line */}
+        <a href={`${installPrefix}/share/v/gh/Swiss-Property-AG/Portfolio/main/KNIK.ifc#c:-12.84,3.53,9.64,-5.33,2.61,1.71`}>
+          <img alt="Tinyhouse" src={`${installPrefix}/Tinyhouse.png`} className={classes.demo}/>
         </a>
         {/* eslint-disable-next-line */}
-        <a href='https://bldrs.ai/share/v/gh/IFCjs/test-ifc-files/main/Schependomlaan/IFC%20Schependomlaan.ifc'>
-          <img alt="Schependomlaan" src="/Schependomlaan.png" className={classes.demo}/>
+        <a href={`${installPrefix}/share/v/gh/IFCjs/test-ifc-files/main/Schependomlaan/IFC%20Schependomlaan.ifc#c:-19.95,17.97,25.31,4.52,0.65,1.24`}>
+          <img
+            alt="Schependomlaan"
+            src={`${installPrefix}/Schependomlaan.png`}
+            className={classes.demo}/>
         </a>
       </div>
       <div className={classes.settings}>

src/Components/BaseGroup.jsx

@@ -7,10 +7,12 @@ import OpenIcon from '../assets/2D_Icons/Open.svg'
 
 /**
  * Base group contains Settings, ModelUpload, About
+ * @param {string} installPrefix Serving prefix for the app, for use in
+ * constructing static asset links.
  * @param {Object} fileOpen ItemPanel component
  * @return {Object} React component
  */
-export default function BaseGroup({fileOpen}) {
+export default function BaseGroup({installPrefix, fileOpen}) {
   const classes = useStyles()
   return (
     <div className={classes.root}>
@@ -19,7 +21,7 @@ export default function BaseGroup({fileOpen}) {
         icon={<OpenIcon/>}
         onClick={fileOpen}
         placement='top'/>
-      <AboutControl/>
+      <AboutControl installPrefix={installPrefix}/>
     </div>
   )
 }

src/Containers/CadView.jsx

@@ -392,7 +392,7 @@ export default function CadView({
                  isOpenState={isItemPanelOpenState}/>}/>}
         </div>
         <div className={isItemPanelOpen ? classes.baseGroupOpen : classes.baseGroup}>
-          <BaseGroup fileOpen={loadLocalFile}/>
+          <BaseGroup installPrefix={installPrefix} fileOpen={loadLocalFile}/>
         </div>
         {alert}
       </div>