Merge pull request #2 from PyConColombia/createPages

Added CSS framework
PyConColombia · Mar 7, 2021 · 9996211 · 9996211
2 parents 08c5675 + a5cbaf8
commit 9996211
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
+    "bootstrap": "^4.6.0",
     "gatsby": "^2.32.8",
     "gatsby-image": "^2.11.0",
     "gatsby-plugin-gatsby-cloud": "^1.0.2",
@@ -18,6 +19,7 @@
     "gatsby-transformer-sharp": "^2.12.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.5.1",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0"
   },

diff --git a/src/components/SiteBar.js b/src/components/SiteBar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const SiteBar = () => {
+  return (
+    <Navbar collapseOnSelect expand="lg" bg="light" variant="light" fixed="top">
+      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+      <Navbar.Collapse id="responsive-navbar-nav">
+        <Nav className="mr-auto">
+          <Nav.Link href="#features">Features</Nav.Link>
+          <Nav.Link href="#pricing">Pricing</Nav.Link>
+          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
+            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+            <NavDropdown.Item href="#action/3.2">
+              Another action
+            </NavDropdown.Item>
+            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+            <NavDropdown.Divider />
+            <NavDropdown.Item href="#action/3.4">
+              Separated link
+            </NavDropdown.Item>
+          </NavDropdown>
+        </Nav>
+        <Nav>
+          <Nav.Link href="#deets">More deets</Nav.Link>
+          <Nav.Link eventKey={2} href="#memes">
+            Dank memes
+          </Nav.Link>
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+};
+
+export default SiteBar;
diff --git a/src/components/header.js b/src/components/header.js
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -7,43 +7,26 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useStaticQuery, graphql } from 'gatsby';
+import { Container } from 'react-bootstrap';
 
-import Header from './header';
-import './layout.css';
+import SiteBar from './SiteBar';
 
 const Layout = ({ children }) => {
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `);
-
   return (
     <>
-      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
-      <div
+      <SiteBar />
+      <Container>
+        <main>{children}</main>
+      </Container>
+      <footer
         style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
+          marginTop: `2rem`,
         }}
       >
-        <main>{children}</main>
-        <footer
-          style={{
-            marginTop: `2rem`,
-          }}
-        >
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.com">Gatsby</a>
-        </footer>
-      </div>
+        © {new Date().getFullYear()}, Built with
+        {` `}
+        <a href="https://www.gatsbyjs.com">Gatsby</a>
+      </footer>
     </>
   );
 };

diff --git a/src/data/speakers.json b/src/data/speakers.json
@@ -12,5 +12,12 @@
       "description": "Western Digital 1TB WD10EZEX Caviar Blue 3.5 inch 7200rpm internal hard drive. With this drive you get the capacity and the performance you demand to build a high speed, high capacity modern desktop computer. The WD Blue 1tb gives your system the storage it needs and the speed you want - with 1 terabyte of capacity to store all your files, videos, and pictures. Features 64MB cache and a 3.5 inch form factor. This 1 TB SATA HDD has the room you need to store gigabytes upon gigabytes of high definition media, and the read and write speeds to easily access and manage it all.",
       "image": "https://s.yimg.com/aah/outletpc/western-digital-wd10ezex-1tb-sata-iii-3-5-desktop-hard-drive-58.jpg",
       "price": "43.99"
+    },
+    {
+      "id": "arendon-diosa",
+      "name": "Western Digital WD10EZEX 1TB Blue 7200RPM SATA 6.0Gb/s 3.5inch Hard Drive",
+      "description": "Western Digital 1TB WD10EZEX Caviar Blue 3.5 inch 7200rpm internal hard drive. With this drive you get the capacity and the performance you demand to build a high speed, high capacity modern desktop computer. The WD Blue 1tb gives your system the storage it needs and the speed you want - with 1 terabyte of capacity to store all your files, videos, and pictures. Features 64MB cache and a 3.5 inch form factor. This 1 TB SATA HDD has the room you need to store gigabytes upon gigabytes of high definition media, and the read and write speeds to easily access and manage it all.",
+      "image": "https://s.yimg.com/aah/outletpc/western-digital-wd10ezex-1tb-sata-iii-3-5-desktop-hard-drive-58.jpg",
+      "price": "43.99"
     }
 ]
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -2,11 +2,13 @@ import React from 'react';
 import { Link } from 'gatsby';
 import { useIntl } from 'gatsby-plugin-intl';
 
+import Layout from '../components/layout';
+
 const IndexPage = () => {
   const intl = useIntl();
 
   return (
-    <>
+    <Layout>
       <ul>
         <ul>
           <li>
@@ -21,7 +23,7 @@ const IndexPage = () => {
         </ul>
       </ul>
       <h1>{intl.formatMessage({ id: 'index.title' })}</h1>
-    </>
+    </Layout>
   );
 };