Use Gifs for Docs site example (#342)

* Change key features to gifs

* Change website examples to gifs

* Replace video with homepage image

* Finalized style and fixed for cross browser support

* Added more logos, small style fix

docs_website/src/components/HomePage/FeatureSection/content.jsx

@@ -16,32 +16,38 @@ export const keyFeatures = {
         {
             title: 'Collaborative DataDoc',
             content: `Organize rich text, queries, and charts into a notebook to easily document your analyses. Work collaboratively with others in a DataDoc and get real-time updates.`,
-            image: 'key_features/collab.png',
+            image: 'key_features/collab.gif',
+            imageClassName: 'box-shadowed-image',
         },
         {
             title: 'Smart Query Editor',
             content: `The Query Editor is aware of your tables and their columns, as such it provides autocompletion, syntax highlighting, and the ability to hover or click on a table to view its information.`,
-            image: 'key_features/editor.png',
+            image: 'key_features/editor.gif',
+            imageClassName: 'box-shadowed-image',
         },
         {
             title: 'Visualizations',
             content: `No need to leave Querybook to create charts to quickly visualize your results. With a familiar interface easily create line, bar, stacked area, pie, horizontal bar, donut, scatter, and table charts. Add them then to your DataDoc to complete your data narrative.`,
-            image: 'key_features/visualization.png',
+            image: 'key_features/visualization.gif',
+            imageClassName: 'box-shadowed-image',
         },
         {
             title: 'Templating',
             content: `Write dynamically generated queries via Jinja2 templating. Set variables in DataDoc on the fly.`,
-            image: 'key_features/templating.png',
+            image: 'key_features/templating.gif',
+            imageClassName: 'box-shadowed-image',
         },
         {
             title: 'Scheduling',
             content: `Built-in scheduling functionality allows automatic DataDoc updates on set intervals. Combined with exporting, Querybook can send scheduled updates to external apps.`,
             image: 'key_features/scheduling.png',
+            imageClassName: 'mac-box-shadow',
         },
         {
             title: 'Query Analytics',
             content: `Querybook auto analyzes executed queries to provide data lineage, example queries, frequent user information, search/auto-completion ranking.`,
-            image: 'key_features/analytics.png',
+            image: 'key_features/analytics.gif',
+            imageClassName: 'box-shadowed-image',
         },
     ],
 };
@@ -63,21 +69,25 @@ export const pluginFeatures = {
             title: 'Query Engine',
             content: `Supply your own query engine and add actionable error messages, useful metadata, and additional security measures.`,
             image: 'plugin_features/engine.png',
+            imageClassName: 'mac-box-shadow',
         },
         {
             title: 'Exporter',
             content: `Upload query results from Querybook to other tools for further analyses.`,
-            image: 'plugin_features/exporter.png',
+            image: 'plugin_features/exporter.gif',
+            imageClassName: 'box-shadowed-image',
         },
         {
             title: 'Notification',
             content: `Get notified upon completion of queries and DataDoc invitations via IM or email.`,
             image: 'plugin_features/notification.png',
+            imageClassName: 'mac-box-shadow',
         },
         {
             title: 'Result Transform',
             content: `Augment query results to provide meaningful statistics and visualizations.`,
-            image: 'plugin_features/transform.png',
+            image: 'plugin_features/transform.gif',
+            imageClassName: 'box-shadowed-image',
         },
     ],
 };

docs_website/src/components/HomePage/FeatureSection/index.jsx

@@ -6,7 +6,9 @@ import Heading from '../../Heading';
 import './index.scss';
 import ImageModal from '../../ImageModal';
 
-const Image = ({ url }) => <img src={useBaseUrl(`img/${url}`)} />;
+const Image = ({ url, className }) => (
+    <img className={className ?? ''} src={useBaseUrl(`img/${url}`)} />
+);
 
 export default ({ featureType = 'key' }) => {
     const featureConfig = featureType == 'key' ? keyFeatures : pluginFeatures;
@@ -47,6 +49,10 @@ export default ({ featureType = 'key' }) => {
                                 url={
                                     featureConfig.featureItems[imageIndex].image
                                 }
+                                className={
+                                    featureConfig.featureItems[imageIndex]
+                                        .imageClassName
+                                }
                             />
                         </ImageModal>
                     </div>

docs_website/src/components/HomePage/HeaderSection/index.jsx

@@ -14,7 +14,7 @@ export default () => {
                             text="Discover"
                             className="text-discover"
                         />
-                        ,
+                        ,{' '}
                         <GradientText text="Analyze" className="text-analyze" />
                         , and{' '}
                         <GradientText
@@ -24,15 +24,13 @@ export default () => {
                     </h1>
                     <p className="hero__subtitle">
                         <b>Querybook</b> is Pinterest’s open-sourced big data
-                        portal via a notebook interface.
+                        IDE via a notebook interface.
                     </p>
-                    <div className="QuerybookTutorialVideo">
-                        <iframe
-                            src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-                            frameBorder="0"
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                            allowFullScreen
-                        ></iframe>
+                    <div className="Querybook-Showcase">
+                        <img
+                            src={useBaseUrl('img/homepage.png')}
+                            className="mac-box-shadow"
+                        />
                     </div>
                     <div className="HeaderActions flex-center">
                         <Link

docs_website/src/components/HomePage/HeaderSection/index.scss

@@ -6,12 +6,8 @@
             padding: 4rem 2rem;
         }
 
-        .QuerybookTutorialVideo {
+        .Querybook-Showcase {
             margin: 2rem 0;
-            iframe {
-                width: 600px;
-                height: 340px;
-            }
         }
     }
 }
@@ -40,7 +36,7 @@
         }
     }
 
-    .QuerybookTutorialVideo {
+    .Querybook-Showcase {
         animation: fadeIn 1s ease-in-out backwards;
         animation-delay: 1s;
     }

docs_website/src/components/HomePage/IntegrationsSection/content.js

@@ -27,6 +27,18 @@ export const Databases = [
         key: 'sqlite',
         image: 'integrations/sqlite.png',
     },
+    {
+        key: 'postgres',
+        image: 'integrations/postgres.svg',
+    },
+    {
+        key: 'sqlserver',
+        image: 'integrations/sqlserver.svg',
+    },
+    {
+        key: 'oracle',
+        image: 'integrations/oracle.png',
+    },
 ];
 
 export const CloudPlatforms = [

docs_website/src/components/HomePage/IntegrationsSection/index.jsx

@@ -18,7 +18,7 @@ export default () => {
                 </p>
                 <Grid
                     items={Databases}
-                    itemPerRow={3}
+                    itemPerRow={4}
                     renderer={(item) => (
                         <div className="logo-container">
                             <img src={`img/${item.image}`} height={'80px'} />
@@ -33,7 +33,7 @@ export default () => {
                 </p>
                 <Grid
                     items={CloudPlatforms}
-                    itemPerRow={3}
+                    itemPerRow={4}
                     renderer={(item) => (
                         <div className="logo-container">
                             <img src={`img/${item.image}`} height={'80px'} />

docs_website/src/components/HomePage/IntegrationsSection/index.scss

@@ -11,6 +11,7 @@
             filter: grayscale(1);
             img {
                 object-fit: contain;
+                max-height: 48px;
             }
         }
     }

docs_website/src/components/HomePage/UsersSection/index.jsx

@@ -6,18 +6,14 @@ import './index.scss';
 
 const userReviews = [
     {
-        name: 'Alice, Engineer @Pinterest',
+        name: 'Arvin Rezvanpour, SWE @Pinterest',
         comment:
-            'Love the UI! Especially like the separation of adhoc queries and saved datadocs!',
+            'Querybook has been instrumental to the Advertiser Growth Team at Pinterest. It allows us to opportunity size new experiment ideas and do offline experiment analysis in a collaborative and scalable way.',
     },
     {
-        name: 'Bob, PM @Pinterest',
+        name: 'Jesse Lumarie, SWE @Pinterest',
         comment:
-            "Querybook is amazing! I can't imagine doing my work without Querybook",
-    },
-    {
-        name: 'Cindy, SRE @CompanyC',
-        comment: 'So simple to set up and make it work!',
+            "I rely on Querybook every day to query, organize and analyze Pinterest data.  It's a fast and intuitive program that gets out of the way and allows me to focus on identifying trends and opportunities.",
     },
 ];
 

docs_website/src/components/HomePage/UsersSection/index.scss

@@ -1,5 +1,6 @@
 .UsersSection {
     .UserReview {
+        padding: 0px 20px;
         height: 100%;
         display: flex;
         flex-direction: column;

docs_website/src/components/ImageModal/index.jsx

@@ -4,6 +4,20 @@ import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 import './index.scss';
 
+function getPageContentDOM() {
+    return document.getElementById('__docusaurus');
+}
+
+function blurPage() {
+    const contentDOM = getPageContentDOM();
+    contentDOM.classList.add('blur-page');
+}
+
+function unblurPage() {
+    const contentDOM = getPageContentDOM();
+    contentDOM.classList.remove('blur-page');
+}
+
 const Overlay = ({ children, render }) => {
     const overlayRoot = useMemo(() => {
         let overlayRoot = document.getElementById('overlay-root');
@@ -19,8 +33,13 @@ const Overlay = ({ children, render }) => {
     useEffect(() => {
         if (overlayRoot) {
             overlayRoot.appendChild(overlayRef.current);
+            blurPage();
+
             return () => {
                 overlayRoot.removeChild(overlayRef.current);
+                if (overlayRoot.childElementCount === 0) {
+                    unblurPage();
+                }
             };
         }
     }, [overlayRoot]);
@@ -81,8 +100,8 @@ export default ({ children, className = '' }) => {
                 onClick={() => setShowModal(true)}
                 className={'ImageModalButton ' + className}
             >
-                <MagnifyIcon />
                 {children}
+                <MagnifyIcon />
             </span>
             {modalDOM}
         </>

docs_website/src/components/ImageModal/index.scss

@@ -4,14 +4,28 @@
     .image-magnify-icon {
         color: white;
         position: absolute;
-        left: 4%;
-        bottom: 10%;
+        right: 10px;
+        bottom: 10px;
 
         opacity: 0.5;
     }
     &:hover .image-magnify-icon {
         opacity: 1;
     }
+
+    img {
+        &.box-shadowed-image {
+            border-radius: 5px;
+            box-shadow: 0px 1px 11px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        &.mac-box-shadow {
+            ~ svg.image-magnify-icon {
+                right: 5%;
+                bottom: 10%;
+            }
+        }
+    }
 }
 
 .ImageModal {
@@ -20,19 +34,21 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 300;
-    backdrop-filter: blur(5px);
+    background-color: rgba(0, 0, 0, 0.4);
+
     display: flex;
 
     .Modal-image {
         margin: auto;
         display: flex;
         max-width: 90vw;
         max-height: 90vh;
+
         img {
             width: auto;
             height: auto;
             object-fit: contain;
+            border-radius: 5px;
         }
     }
 }

docs_website/src/css/custom.scss

@@ -69,4 +69,8 @@
     align-items: center;
 }
 
+.blur-page {
+    filter: blur(10px);
+}
+
 @import './infima_override.scss';

docs_website/src/css/infima_override.scss

@@ -7,13 +7,6 @@
     }
 }
 
-.navbar {
-    background-color: transparent;
-    &:not(.navbar-sidebar--show) {
-        backdrop-filter: blur(5px);
-    }
-}
-
 body {
     &.no-nav-border {
         .navbar {
@@ -23,15 +16,17 @@ body {
 }
 
 :root {
-    --ifm-navbar-background-color: transparent;
-
     --ifm-color-primary-lightest: #bfe6e5;
     --ifm-color-primary-lighter: #a2dbd9;
     --ifm-color-primary-light: #86d0ce;
     --ifm-color-primary: #77cbc8;
     --ifm-color-primary-dark: #5cc0bd;
     --ifm-color-primary-darker: #3fa29f;
     --ifm-color-primary-darkest: #2e7775;
+
+    .footer.footer--dark {
+        --ifm-footer-background-color: #302e2f;
+    }
 }
 
 html[data-theme='dark'] {
@@ -42,4 +37,8 @@ html[data-theme='dark'] {
     --ifm-color-primary-dark: #eb5a8f;
     --ifm-color-primary-darker: #e64680;
     --ifm-color-primary-darkest: #e12368;
+
+    .footer.footer--dark {
+        --ifm-footer-background-color: #222021;
+    }
 }