Merge branch 'devel' of https://github.com/boltex/leojs into gh-pages

boltex · Sep 7, 2024 · 18e7c86 · 18e7c86
2 parents c194e04 + b3b7ca6
commit 18e7c86
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 57 deletions.
diff --git a/web/package.json b/web/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build && node copy-build.js",
+    "build": "docusaurus build --no-minify && node copy-build.js",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

diff --git a/web/src/css/custom.css b/web/src/css/custom.css
@@ -3,42 +3,29 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
-
- #__docusaurus {
-   [class^='docMainContainer_'] {
-     max-width: initial;
-
-     > .container {
-       max-width: initial;
-
-       > .row {
-         flex-wrap: nowrap;
-       }
-     }
-   }
-
-   [class^='docRoot_'] {
-     > div {
-       flex-grow: 1;
-       min-width: 0;
-     }
-   }
- }
-
-
- /* 
-  border-left: var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);
-  box-shadow: var(--ifm-blockquote-shadow);
-  color: var(--ifm-blockquote-color);
-  font-size: var(--ifm-blockquote-font-size);
-  margin: 0 0 var(--ifm-spacing-vertical);
-  padding: var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal);
- */
 
+#__docusaurus {
+  [class^='docMainContainer_'] {
+    max-width: initial;
+
+    >.container {
+      max-width: initial;
+
+      >.row {
+        flex-wrap: nowrap;
+      }
+    }
+  }
+
+  [class^='docRoot_'] {
+    >div {
+      flex-grow: 1;
+      min-width: 0;
+    }
+  }
+}
 
 /* You can override the default Infima variables here. */
-/* --ifm-footer-background-color: #dfd7ce; */
-/* --ifm-footer-background-color: #a55420; */
 :root {
   --ifm-blockquote-shadow: none;
   --ifm-blockquote-border-left-width: 3px;
@@ -75,11 +62,11 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
   --custom-hero-bg-before: linear-gradient(45deg, rgba(194, 107, 46, 0.5), rgba(150, 59, 29, 0.9));
-  
+
   --custom-body-bg: #fdf4f5;
   --custom-sidebar-bg: #ffffe0;
 
-  --custom-home-quote-color: #338bae; 
+  --custom-home-quote-color: #338bae;
   --custom-home-author-color: #555;
 
   --custom-player-after-color: #ffffff33;
@@ -91,12 +78,9 @@
   --ifm-table-head-background: transparent;
 
   --ifm-table-stripe-background: rgba(0, 0, 0, 0.03);
-  --ifm-table-background: transparent ;
+  --ifm-table-background: transparent;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-/* --ifm-footer-background-color: #141210; */
-/* --ifm-footer-background-color: #552e16; */
 [data-theme="dark"] {
   --ifm-blockquote-border-color: #c27d22;
   --ifm-blockquote-color: #f0e4be;
@@ -119,7 +103,7 @@
 
   --custom-home-quote-color: #92c4e1;
   --custom-home-author-color: #dcdcdc;
-  
+
   --custom-player-after-color: #00000033;
 
 }
@@ -131,12 +115,8 @@ blockquote {
   box-shadow: var(--ifm-alert-shadow);
 }
 
-/* .theme-doc-sidebar-container {
-  background-color: var(--custom-sidebar-bg);
-} */
-
-
-.customPlayer1, .customPlayer2 {
+.customPlayer1,
+.customPlayer2 {
   border-radius: 20px;
   box-shadow: 1px 1px 3px 3px #00000030;
   overflow: hidden;
@@ -147,7 +127,7 @@ blockquote {
 .react-player__preview:before {
   content: "";
   position: absolute;
-  background-color: var( --custom-player-after-color);
+  background-color: var(--custom-player-after-color);
   pointer-events: none;
   left: 0;
   right: 0;
@@ -164,6 +144,7 @@ blockquote {
   content: "Introduction to Leo ";
   top: 8px;
 }
+
 .customPlayer2 .react-player__preview:after {
   content: "Features Demo ";
   top: 8px;
@@ -179,14 +160,17 @@ blockquote {
   height: 40px;
   text-align: center;
 }
+
 img[src*='#left'] {
   float: left;
   margin: 0.75rem;
 }
+
 img[src*='#right'] {
   float: right;
   margin: 0.75rem;
 }
+
 img[src*='#author'] {
   float: right;
   margin-left: 0.75rem;

diff --git a/web/src/pages/index.js b/web/src/pages/index.js
@@ -8,6 +8,7 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import ReactPlayer from 'react-player/youtube';
 
 function HomepageHeader() {
@@ -51,8 +52,8 @@ export default function Home() {
       <main>
         <h3 className={clsx(styles.subtitle)}>
           <i>‟Leo is a fundamentally different way of organizing data, programs and scripts.”</i><br></br>
-          <span className={clsx(styles.homeQuote)}>LeoJS is a JavaScript implementation designed as an extension for VSCode.</span></h3>
-         
+          <span className={clsx(styles.homeQuote)}>LeoJS is a JavaScript implementation designed as an extension for VSCode.</span>
+        </h3>
 
         <HomepageFeatures featureId="0" />
 
@@ -73,7 +74,14 @@ export default function Home() {
               </div>
             </div>
             <div className={clsx('col col--6')}>
-              <ReactPlayer className="customPlayer1" light playing width="440px" height="247px" url='https://www.youtube.com/watch?v=j0eo7SlnnSY' />
+              <BrowserOnly fallback={<div>Loading...</div>}>
+                {() => {
+                  // const LibComponent =
+                  //   require('some-lib-that-accesses-window').LibComponent;
+                  // return <LibComponent {...props} />;
+                  return <ReactPlayer className="customPlayer1" light playing width="440px" height="247px" url='https://www.youtube.com/watch?v=j0eo7SlnnSY' />
+                }}
+              </BrowserOnly>
             </div>
           </div>
         </div>
@@ -101,7 +109,14 @@ export default function Home() {
         <div className="container">
           <div className="row margin-bottom--md">
             <div className={clsx('col col--6')}>
-              <ReactPlayer className="customPlayer2" light playing width="440px" height="247px" url='https://www.youtube.com/watch?v=M_mKXSbVGdE' />
+              <BrowserOnly fallback={<div>Loading...</div>}>
+                {() => {
+                  // const LibComponent =
+                  //   require('some-lib-that-accesses-window').LibComponent;
+                  // return <LibComponent {...props} />;
+                  return <ReactPlayer className="customPlayer2" light playing width="440px" height="247px" url='https://www.youtube.com/watch?v=M_mKXSbVGdE' />
+                }}
+              </BrowserOnly>
             </div>
             <div className={clsx('col col--6')}>
               <h3 className={clsx(styles.subtitle)}>

diff --git a/web/src/pages/index.module.css b/web/src/pages/index.module.css
@@ -5,7 +5,7 @@
  * and scoped locally.
  */
 
-.heroBanner {
+ .heroBanner {
   padding: 4rem 0;
   text-align: center;
   position: relative;
@@ -21,10 +21,7 @@
   background-image: url('/img/banner-leojs-trans-1200.png');
   background-size: 100% auto;
   background-position: top;
-
   background-attachment: fixed;
-
-
   content: '';    
   display: block;
   height: 100%;
@@ -33,7 +30,6 @@
   width: 100%;
   z-index : -100;
   transition: filter 0.9s ease-out;
-
 }
 
 .customHero:before {