Skip to content

Adicionando curso de backend #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iamleniac wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Adicionando curso de backend #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ module.exports = {
fonts: [
`limelight`,
`Open Sans\:300,400,700`,
`Roboto\:300,400,700` // you can also specify font weights and styles
`Roboto\:300,400,700`, // you can also specify font weights and styles
],
display: 'swap'
}
display: "swap",
},
},
{
resolve: `gatsby-source-filesystem`,
Expand All @@ -42,13 +42,14 @@ module.exports = {
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-autolink-headers`,
{
resolve: `gatsby-remark-highlight-code`,
options: {
terminal: 'carbon',
theme: 'dracula',
lineNumbers: true
}
terminal: "carbon",
theme: "dracula",
lineNumbers: true,
},
},
],
},
Expand Down
32 changes: 27 additions & 5 deletions gatsby-node.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
const posts = result.data.allMarkdownRemark.edges;
const posts = result.data.allMarkdownRemark.edges

const m1Content = posts.filter(
item => item.node.frontmatter.category === 'module-1'
);
item => item.node.frontmatter.category === "frontend-module-1"
)

m1Content.forEach(({ node }, index) => {
createPage({
Expand All @@ -38,8 +38,30 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
category: node.frontmatter.category,
slug: node.frontmatter.slug,
prev: index === 0 ? null : m1Content[index - 1].node,
next: index === (m1Content.length - 1) ? null : m1Content[index + 1].node
next: index === m1Content.length - 1 ? null : m1Content[index + 1].node,
},
})
})
};

const backendM1Content = posts.filter(
item => item.node.frontmatter.category === "backend-module-1"
)

backendM1Content.forEach(({ node }, index) => {
console.log(node)
createPage({
path: node.frontmatter.slug,
component: blogPostTemplate,
context: {
category: node.frontmatter.category,
slug: node.frontmatter.slug,
prev: index === 0 ? null : backendM1Content[index - 1].node,
next:
index === backendM1Content.length - 1
? null
: backendM1Content[index + 1].node,
showTableOfContents: true,
},
})
})
}
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"gatsby-plugin-offline": "^3.9.0",
"gatsby-plugin-react-helmet": "^3.9.0",
"gatsby-plugin-sharp": "^2.13.2",
"gatsby-remark-autolink-headers": "^4.2.0",
"gatsby-remark-highlight-code": "^2.1.1",
"gatsby-source-filesystem": "^2.11.0",
"gatsby-transformer-remark": "^2.16.0",
Expand All @@ -21,6 +22,7 @@
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"react-scroll": "^1.8.2",
"rehype-react": "^6.2.0",
"styled-components": "^5.2.1"
},
Expand Down
1 change: 1 addition & 0 deletions src/assets/close_black.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
179 changes: 84 additions & 95 deletions src/components/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,127 +1,116 @@
import React, { Fragment, useState } from "react";
import { Link } from "gatsby";
import styled from "styled-components";
import React, { Fragment, useState } from "react"
import { Link } from "gatsby"
import styled from "styled-components"

// Images
import logo from '../assets/logo.svg';
import menu from '../assets/menu.svg';
import close from '../assets/close.svg';
import logo from "../assets/logo.svg"
import menu from "../assets/menu.svg"
import close from "../assets/close.svg"

const Container = styled.nav`
position: fixed;
position: fixed;
width: 20vw;
height: 100vh;
padding: 1rem 0;
border-right: 1px solid #E6ECF1;
background-color: #F5F7F9;
overflow-y: scroll;
height: 100vh;
padding: 1rem 0;
border-right: 1px solid #e6ecf1;
background-color: #f5f7f9;
overflow-y: scroll;

@media (max-width: 667px) {
width: 80vw;
transform: ${props => props.isVisible ? 'translateX(0)' : 'translateX(-150%)'};
@media (max-width: 667px) {
width: 80vw;
transform: ${props =>
props.isVisible ? "translateX(0)" : "translateX(-150%)"};
}
`;
`

const Button = styled.button`
position: fixed;
top: 5px;
left: 5px;
width: 45px;
height: 45px;
border: none;
border-radius: 12px;
outline: none;
background: #FFAC2D url(${menu}) no-repeat center;
position: fixed;
top: 5px;
left: 5px;
width: 45px;
height: 45px;
border: none;
border-radius: 12px;
outline: none;
background: #ffac2d url(${menu}) no-repeat center;

${({ isVisible }) => isVisible && `
${({ isVisible }) =>
isVisible &&
`
left: calc(80vw + 5px);
background: #FFAC2D url(${close}) no-repeat center;
`}

@media(max-width: 667px) {
display: block;
}
`;
@media(max-width: 667px) {
display: block;
}
`

const Logo = styled(Link)`
display: flex;
justify-content: center;
width: 70%;
margin: 0 auto 2rem;
`;
display: flex;
justify-content: center;
width: 70%;
margin: 0 auto 2rem;
`

const Image = styled.img`
width: 70%;
`;
width: 70%;
`

const Item = styled(Link)`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
margin: .5rem 0;
padding: 0 5%;
color: #505050;
text-align: center;
text-decoration: none;
font: 700 .7rem 'Open Sans', sans-serif;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
margin: 0.5rem 0;
padding: 0 5%;
color: #505050;
text-align: center;
text-decoration: none;
font: 700 0.7rem "Open Sans", sans-serif;

${({ active }) => active && `
${({ active }) =>
active &&
`
border: 1px solid #E6ECF1;
border-right: none;
color: #FFAC2D;
background: #FFF;
`}
`;

const Menu = ({
links,
location
}) => {
const [isVisible, setVisible] = useState(false);
`

const isActive = (item, location) => {
if (item.slug.includes(location.pathname)) {
return true
}

return false;
}
const Menu = ({ links, location }) => {
const [isVisible, setVisible] = useState(false)

const renderLinks = () => {
return links.map((link) => (
<Item
key={link.id}
to={link.slug}
active={isActive(link, location)}
>
{link.title}
</Item>
))
};
const renderLinks = () => {
return links.map(link => (
<Item
key={link.id}
to={link.slug}
active={link.slug.includes(location.pathname)}
>
{link.title}
</Item>
))
}

return (
<Fragment>
<Button
onClick={() => {
setVisible(!isVisible);
}}
isVisible={isVisible}
/>
<Container
isVisible={isVisible}
>
<Logo
to="/"
>
<Image src={logo} />
</Logo>
{renderLinks()}
</Container>
</Fragment>

<Fragment>
<Button
onClick={() => {
setVisible(!isVisible)
}}
isVisible={isVisible}
/>
<Container isVisible={isVisible}>
<Logo to="/">
<Image src={logo} />
</Logo>
{renderLinks()}
</Container>
</Fragment>
)
};
}

export default Menu;
export default Menu
36 changes: 19 additions & 17 deletions src/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from "react"
import { StaticQuery } from "gatsby";
import styled from "styled-components";
import { StaticQuery } from "gatsby"
import styled from "styled-components"

import './layout.css';
import "./layout.css"

import Menu from './Menu';
import Menu from "./Menu"

const Container = styled.div`
display: flex;
`;
`

const Layout = ({ children, location, noMenu }) => (
<StaticQuery
Expand All @@ -32,24 +32,26 @@ const Layout = ({ children, location, noMenu }) => (
}
`}
render={data => {
const module = location.pathname.split('/')[1];
const module = `${location.pathname.split("/")[1]}-${
location.pathname.split("/")[2]
}`

const list = data.allMarkdownRemark.edges.filter(
item => item.node.frontmatter.category === module
).map((item) => ({
...item.node.frontmatter
}));
console.log("module", module)

const list = data.allMarkdownRemark.edges
.filter(item => item.node.frontmatter.category === module)
.map(item => ({
...item.node.frontmatter,
}))

return (
<Container>
{!noMenu && (
<Menu links={list} location={location} />
)}
{!noMenu && <Menu links={list} location={location} />}
{children}
</Container>
);
)
}}
/>
);
)

export default Layout;
export default Layout
Loading