guides: web-analytics guide initial commit

Author: keydunov

guides/guides-base/src/components/Hero/Hero.jsx

@@ -55,22 +55,25 @@ const Subtitle = styled.div`
 `
 
 const MediaContainer = styled.div`
-  //background-image: url(${browserControls});
-  //background-position: 11px 6px;
-  //background-repeat: no-repeat;
-  //background-color: white;
-  //box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
-  //padding: 5px;
-  //border-radius: 10px;
-  padding-top: 20px;
-  padding-bottom: 2px;
+  ${props => props.withFrame &&
+  `
+    background-image: url(${browserControls});
+    background-position: 11px 6px;
+    background-repeat: no-repeat;
+    background-color: white;
+    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15);
+    padding: 5px;
+    border-radius: 10px;
+    padding-top: 20px;
+    padding-bottom: 2px;
+  `}
   ${media.greaterThan("medium")`
     margin-left: 15px;
   `}
   img, video {
     max-width: 630px;
     width: 100%;
-    //border: 10px solid #F3F3FB;
+    ${props => props.withFrame && `border: 10px solid #F3F3FB;`}
     border-radius: 10px;
     box-sizing: border-box;
   }
@@ -130,7 +133,8 @@ const Hero = ({
   media,
   title,
   subtitle,
-  demoUrl
+  demoUrl,
+  withFrame
 }) => (
   <Container>
     <InnerContainer>
@@ -143,11 +147,15 @@ const Hero = ({
         </ButtonsContainer>
         { socialButtons }
       </CopyContainer>
-      <MediaContainer>
+      <MediaContainer withFrame={withFrame}>
         { media }
       </MediaContainer>
     </InnerContainer>
   </Container>
 );
 
+Hero.defaultProps = {
+  withFrame: false
+}
+
 export default Hero;

guides/web-analytics/.gitignore

@@ -0,0 +1,74 @@
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+
+# Build Files
+public/
+.cache/
+
+# Gatsby context
+.gatsby-context.js
+
+# Bundle stats
+bundle-stats.json
+
+#Videos
+static/videos
+
+#amplify
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/mock-data
+amplify/backend/amplify-meta.json
+amplify/backend/awscloudformation
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json

guides/web-analytics/README.md

@@ -0,0 +1,9 @@
+<p align="center"><a href="https://cube.dev"><img src="https://i.imgur.com/zYHXm4o.png" alt="Cube.js" width="300px"></a></p>
+
+[Website](https://cube.dev) • [Docs](https://cube.dev/docs) • [Blog](https://cube.dev/blog) • [Slack](https://slack.cube.dev) • [Twitter](https://twitter.com/thecubejs)
+
+# D3 Dashboard Guide
+You will learn how to build a D3 dashboard with React, Material UI and Cube.js.  The guide covers setting up dashboard with Postgres, Cube.js, React and D3.js.
+You can also check out a [live demo here](https://d3-dashboard-demo.cube.dev/).
+
+[The guide is available here.](https://d3-dashboard.cube.dev/)

guides/web-analytics/amplify/.config/project-config.json

@@ -0,0 +1,17 @@
+{
+    "projectName": "web-analytics",
+    "version": "2.0",
+    "frontend": "javascript",
+    "javascript": {
+        "framework": "react",
+        "config": {
+            "SourceDir": "src",
+            "DistributionDir": "public",
+            "BuildCommand": "npm run-script build",
+            "StartCommand": "npm run-script start"
+        }
+    },
+    "providers": [
+        "awscloudformation"
+    ]
+}

guides/web-analytics/amplify/backend/backend-config.json

@@ -0,0 +1,8 @@
+{
+	"hosting": {
+		"S3AndCloudFront": {
+			"service": "S3AndCloudFront",
+			"providerPlugin": "awscloudformation"
+		}
+	}
+}

guides/web-analytics/amplify/backend/hosting/S3AndCloudFront/parameters.json

@@ -0,0 +1,3 @@
+{
+    "bucketName": "web-analytics-20200401183103-hostingbucket"
+}