Merge pull request #3 from PyConColombia/navbar

Navbar component , Data filtering based on language

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+  }

gatsby-browser.js

@@ -5,3 +5,4 @@
  */
 
 // You can delete this file if you're not using it
+import 'bootstrap/dist/css/bootstrap.min.css';

gatsby-config.js

@@ -49,5 +49,13 @@ module.exports = {
         redirect: false,
       },
     },
+    {
+      resolve: 'gatsby-plugin-react-svg',
+      options: {
+        rule: {
+          include: /assets/,
+        },
+      },
+    },
   ],
 };

gatsby-node.js

@@ -3,6 +3,20 @@
  *
  * See: https://www.gatsbyjs.com/docs/node-apis/
  */
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  deletePage(page);
+  // You can access the variable "locale" in your page queries now
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      locale: page.context.intl.language,
+      defaultLocale: page.context.intl.defaultLanguage,
+    },
+  });
+};
+
 exports.createPages = async function ({ actions, graphql }) {
   const { data } = await graphql(`
     query {

package.json

@@ -7,12 +7,14 @@
   "dependencies": {
     "bootstrap": "^4.6.0",
     "gatsby": "^2.32.8",
-    "gatsby-image": "^2.11.0",
+    "gatsby-background-image": "^1.4.1",
+    "gatsby-image": "^3.0.0",
     "gatsby-plugin-gatsby-cloud": "^1.0.2",
     "gatsby-plugin-intl": "^0.3.3",
     "gatsby-plugin-manifest": "^2.12.1",
     "gatsby-plugin-offline": "^3.10.2",
     "gatsby-plugin-react-helmet": "^3.10.0",
+    "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^2.14.3",
     "gatsby-source-filesystem": "^2.11.1",
     "gatsby-transformer-json": "^3.0.0",

src/components/SiteBar.js

@@ -1,38 +1,80 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { injectIntl, Link } from 'gatsby-plugin-intl';
+import Language from './language';
+import Logo from '../../assets/icon.svg';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-const SiteBar = () => {
+const YEARS = ['2020', '2019', '2018', '2017'];
+const SiteBar = ({ intl }) => {
   return (
-    <Navbar collapseOnSelect expand="lg" bg="light" variant="light" fixed="top">
-      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
+    <Navbar
+      collapseOnSelect
+      className="navbar"
+      expand="lg"
+      // bg="light"
+      variant="light"
+      fixed="top"
+    >
+      <Navbar.Brand>
+        <Logo style={{ width: '50px' }} />
+      </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
+          <Nav.Link as="h6">
+            <Link to="/resources" className="navbar_a">
+              {intl.formatMessage({ id: 'navbar.resources' })}
+            </Link>
+          </Nav.Link>
+          <NavDropdown
+            title={intl.formatMessage({ id: 'navbar.schedule.main' })}
+            id="collasible-nav-dropdown"
+            className="navbar_a"
+          >
+            <NavDropdown.Item as="h6">
+              <Link to="/schedule">
+                {intl.formatMessage({ id: 'navbar.schedule.op1' })}
+              </Link>
             </NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-            <NavDropdown.Divider />
-            <NavDropdown.Item href="#action/3.4">
-              Separated link
+            <NavDropdown.Item as="h6">
+              <Link to="/keynotes">
+                {intl.formatMessage({ id: 'navbar.schedule.op2' })}
+              </Link>
+            </NavDropdown.Item>
+            <NavDropdown.Item as="h6">
+              <Link to="/speakers">
+                {intl.formatMessage({ id: 'navbar.schedule.op3' })}
+              </Link>
             </NavDropdown.Item>
           </NavDropdown>
+          <Nav.Link as="h6" className="cfp">
+            <Link to="/cfp">
+              {intl.formatMessage({ id: 'navbar.proposals' })}
+            </Link>
+          </Nav.Link>
         </Nav>
         <Nav>
-          <Nav.Link href="#deets">More deets</Nav.Link>
-          <Nav.Link eventKey={2} href="#memes">
-            Dank memes
-          </Nav.Link>
+          <NavDropdown title="v.2021" id="collasible-nav-dropdown">
+            {YEARS.map((year) => (
+              <NavDropdown.Item
+                key={year}
+                href={`http://${year}.pycon.co`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {`v.${year}`}
+              </NavDropdown.Item>
+            ))}
+          </NavDropdown>
+          <Language />
         </Nav>
       </Navbar.Collapse>
     </Navbar>
   );
 };
 
-export default SiteBar;
+SiteBar.propTypes = {
+  intl: PropTypes.object,
+};
+export default injectIntl(SiteBar);

src/components/image.js

@@ -16,7 +16,7 @@ import Img from 'gatsby-image';
 const Image = () => {
   const data = useStaticQuery(graphql`
     query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+      placeholderImage: file(relativePath: { eq: "icon.svg" }) {
         childImageSharp {
           fluid(maxWidth: 300) {
             ...GatsbyImageSharpFluid

src/components/language.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  IntlContextConsumer,
+  changeLocale,
+  injectIntl,
+} from 'gatsby-plugin-intl';
+import { NavDropdown } from 'react-bootstrap';
+
+const languageName = {
+  es: 'Español',
+  en: 'English',
+};
+
+const Language = ({ intl }) => {
+  const languageClick = (e, language) => {
+    e.preventDefault();
+    changeLocale(language);
+  };
+  return (
+    <NavDropdown
+      title={intl.locale.toUpperCase()}
+      id="collasible-nav-dropdown"
+      style={{ margin: '0 2.5em' }}
+    >
+      <IntlContextConsumer>
+        {({ languages, language: currentLocale }) =>
+          languages.map((language) => (
+            <NavDropdown.Item
+              key={language}
+              onClick={(e) => languageClick(e, language)}
+              style={{
+                color: currentLocale === language ? `yellow` : `black`,
+              }}
+              //     margin: 10,
+              //     textDecoration: `underline`,
+              //     cursor: `pointer`,
+              //   }}
+              href="/"
+            >
+              {languageName[language]}
+            </NavDropdown.Item>
+          ))
+        }
+      </IntlContextConsumer>
+    </NavDropdown>
+  );
+};
+Language.propTypes = {
+  intl: PropTypes.object,
+};
+export default injectIntl(Language);