diff --git a/.eslintrc b/.eslintrc index 482dc93..a7751be 100644 --- a/.eslintrc +++ b/.eslintrc @@ -3,7 +3,8 @@ "extends": [ "eslint:recommended", "plugin:react/recommended", - "airbnb" + "airbnb", + "plugin:prettier/recommended" ], "globals": { "window": true, @@ -15,10 +16,12 @@ "semi": ["error", "never"], "comma-dangle": ["error", "never"], "quotes": ["error", "double", { "avoidEscape": true }], + "no-unused-expressions": [2, { allowShortCircuit: true }], // gatsby-node.js "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], "react/no-danger": 0, "react/prop-types": 0, "react/state-in-constructor": 0, - "linebreak-style": 0 + "linebreak-style": 0, + "react/jsx-one-expression-per-line": 0 } } \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 48e90e8..e48e561 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,8 @@ "semi": false, "singleQuote": false, "tabWidth": 2, - "trailingComma": "es5" + "trailingComma": "none", + "arrowParens": "always", + "bracketSpacing": true, + "jsxBracketSameLine": false } diff --git a/gatsby-config.js b/gatsby-config.js index eef3476..2991c30 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,8 +1,11 @@ +require("dotenv").config() + module.exports = { siteMetadata: { title: "El Salvador Conectado", - description: "Sitio web hecho en Gatsby con GraphQL. Para el contenido se usa WordPress https://elsalvadorconectado.org", - author: "@elsalvadorconectado" + description: + "Grupo multidisciplinario de profesionales organizados en una comunidad. Buscamos apoyar y resolver por medio de tecnologías colaborativas y open source.", + author: "@SVconectado" }, plugins: [ "gatsby-plugin-react-helmet", @@ -23,7 +26,8 @@ module.exports = { // This is field under which it's accessible fieldName: "wpgraphql", // Url to query from - url: "https://dev-gatsby-wpgraphql-starter.pantheonsite.io/graphql" + url: `${process.env.WP_API_URL || + "https://svc-staging-wordpress.de.quenecesito.org/graphql"}` } }, { diff --git a/gatsby-node.js b/gatsby-node.js index d961312..f4f6f32 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -30,18 +30,19 @@ exports.createPages = async ({ graphql, actions }) => { } `) - postResults.data.wpgraphql.posts.edges.forEach(({ node }) => { - createPage({ - path: node.slug, - component: path.resolve("./src/templates/blog-page-template.js"), - context: { - // This is the $slug variable - // passed to blog-post.js - slug: node.slug, - databaseId: node.databaseId - } + Array.isArray(postResults.data.wpgraphql.posts.edges) && + postResults.data.wpgraphql.posts.edges.forEach(({ node }) => { + createPage({ + path: node.slug, + component: path.resolve("./src/templates/blog-template.js"), + context: { + // This is the $slug variable + // passed to blog-post.js + slug: node.slug, + databaseId: node.databaseId + } + }) }) - }) /** * Create Pages @@ -70,18 +71,19 @@ exports.createPages = async ({ graphql, actions }) => { } `) - pageResults.data.wpgraphql.pages.edges.forEach(({ node }) => { - createPage({ - path: node.slug, - component: path.resolve("./src/templates/blog-page-template.js"), - context: { - // This is the $slug variable - // passed to blog-post.js - slug: node.slug, - databaseId: node.databaseId - } + Array.isArray(pageResults.data.wpgraphql.pages.edges) && + pageResults.data.wpgraphql.pages.edges.forEach(({ node }) => { + createPage({ + path: node.slug, + component: path.resolve("./src/templates/page-template.js"), + context: { + // This is the $slug variable + // passed to blog-post.js + slug: node.slug, + databaseId: node.databaseId + } + }) }) - }) /** * Create Category Pages @@ -102,20 +104,23 @@ exports.createPages = async ({ graphql, actions }) => { } `) - categoryPageResults.data.wpgraphql.categories.edges.forEach(({ node }) => { - createPage({ - path: `/category/${node.slug}`, - component: path.resolve("./src/templates/category-posts-list-template.js"), - context: { - // This is the $slug variable - // passed to blog-post.js - slug: node.slug, - databaseId: node.databaseId, - name: node.name, - typeList: "category" - } + Array.isArray(categoryPageResults.data.wpgraphql.categories.edges) && + categoryPageResults.data.wpgraphql.categories.edges.forEach(({ node }) => { + createPage({ + path: `/category/${node.slug}`, + component: path.resolve( + "./src/templates/category-posts-list-template.js" + ), + context: { + // This is the $slug variable + // passed to blog-post.js + slug: node.slug, + databaseId: node.databaseId, + name: node.name, + typeList: "category" + } + }) }) - }) /** * Create Tags Pages @@ -136,18 +141,19 @@ exports.createPages = async ({ graphql, actions }) => { } `) - tagPageResults.data.wpgraphql.tags.edges.forEach(({ node }) => { - createPage({ - path: `/tag/${node.slug}`, - component: path.resolve("./src/templates/tag-posts-list-template.js"), - context: { - // This is the $slug variable - // passed to blog-post.js - slug: node.slug, - databaseId: node.databaseId, - name: node.name, - typeList: "tag" - } + Array.isArray(tagPageResults.data.wpgraphql.tags.edges) && + tagPageResults.data.wpgraphql.tags.edges.forEach(({ node }) => { + createPage({ + path: `/tag/${node.slug}`, + component: path.resolve("./src/templates/tag-posts-list-template.js"), + context: { + // This is the $slug variable + // passed to blog-post.js + slug: node.slug, + databaseId: node.databaseId, + name: node.name, + typeList: "tag" + } + }) }) - }) } diff --git a/package.json b/package.json index 97c9ec1..2b84614 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "author": "Son muchos ", "dependencies": { "babel-plugin-styled-components": "^1.10.7", + "eslint-config-prettier": "^6.10.1", + "eslint-plugin-prettier": "^3.1.3", "font-awesome": "^4.7.0", "gatsby": "^2.19.7", "gatsby-background-image": "^1.0.1", @@ -28,7 +30,8 @@ "react-helmet": "^5.2.1", "styled-components": "^5.0.1", "tailwindcss": "^1.2.0", - "twin.macro": "^1.0.0-alpha.8" + "twin.macro": "^1.0.0-alpha.8", + "dotenv": "^8.2.0" }, "devDependencies": { "babel-eslint": "^10.1.0", @@ -49,7 +52,7 @@ "scripts": { "build": "gatsby build", "develop": "gatsby develop", - "format": "prettier --write \"**/*.{json,md}\"", + "format": "prettier --write \"**/*.{js, jsx, json,md}\"", "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", diff --git a/src/components/cardPostListComponent.js b/src/components/cardPostListComponent.js index 1871eb4..4ebd902 100644 --- a/src/components/cardPostListComponent.js +++ b/src/components/cardPostListComponent.js @@ -9,9 +9,7 @@ import { theme as CustomTheme } from "../../tailwind.config" const PostCardList = ({ post }) => { const data = useStaticQuery(graphql` query { - desktop: file( - relativePath: { eq: "elsalvadorconectado-cover.png" } - ) { + desktop: file(relativePath: { eq: "elsalvadorconectado-cover.png" }) { childImageSharp { fluid(quality: 90, maxWidth: 1920) { ...GatsbyImageSharpFluid_withWebp @@ -22,9 +20,15 @@ const PostCardList = ({ post }) => { `) const coverDefault = data.desktop.childImageSharp.fluid.src - const cover = post.featuredImage ? post.featuredImage.mediaItemUrl : coverDefault + const cover = post.featuredImage + ? post.featuredImage.mediaItemUrl + : coverDefault const date = moment(post.date).format("DD MMM YYYY") - const author = `${_.get(post, "author.name", "")} ${_.get(post, "author.lastname", "")}` + const author = `${_.get(post, "author.name", "")} ${_.get( + post, + "author.lastname", + "" + )}` return ( @@ -37,18 +41,14 @@ const PostCardList = ({ post }) => { />
- { post.title } + {post.title} - - { author } - + {author}  ·  - - { date } - + {date} {post.tags.edges && (
@@ -58,10 +58,7 @@ const PostCardList = ({ post }) => { className="card__details__tags__element" key={tag.node.id} > - - # - {tag.node.name} - + #{tag.node.name} ))}
diff --git a/src/components/footer.js b/src/components/footer.js index cc5676a..b9407df 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -87,50 +87,54 @@ const StyledFooter = styled.div` &__menu { ${tw`flex flex-col justify-center items-center my-4`} ${tw`font-medium`} + + &__element { + ${tw`my-2`} + } } &__social { ${tw`flex justify-center items-center`} &__element { - ${tw`text-center text-3xl`} + ${tw`text-center text-3xl mx-4`} } } } } -@media (min-width: ${CustomTheme.extend.screens.laptop}) { - .footer__container { - ${tw`flex-row py-10`} + @media (min-width: ${CustomTheme.extend.screens.laptop}) { + .footer__container { + ${tw`flex-row py-10`} - &__logo { - ${tw`w-1/2`} + &__logo { + ${tw`w-1/2`} - &__img { - ${tw`mb-0`} + &__img { + ${tw`mb-0`} + } } - } - &__text { - ${tw`w-1/2`} + &__text { + ${tw`w-1/2`} - &__menu { - ${tw`flex-row justify-end`} + &__menu { + ${tw`flex-row justify-end`} - &__element { - ${tw`ml-4`} + &__element { + ${tw`ml-4 my-0`} + } } - } - &__social { - ${tw`flex-row justify-end`} + &__social { + ${tw`flex-row justify-end`} - &__element { - ${tw`text-right text-2xl`} + &__element { + ${tw`text-right text-2xl ml-8 mr-0`} + } } } } } -} ` export default Footer diff --git a/src/components/header.js b/src/components/header.js index 74e86b6..697ae84 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,82 +1,101 @@ -import { Link, graphql, StaticQuery } from "gatsby" import React from "react" +import { Link } from "gatsby" import styled from "styled-components" import tw from "twin.macro" -import { theme as CustomTheme } from "../../tailwind.config" +import _ from "lodash" +import { theme as CustomTheme } from "../../tailwind.config" import ThemeContext from "../context/ThemeContext" import ElSalvadorConectadoLogo from "../images/elsalvadorconectado-logo.svg" const blueTransparentColor = "rgba(23, 72, 237, 0.85)" -const Header = () => ( - { - // Set ImageData - const imageFluid = data.desktop.childImageSharp.fluid - return ( - -
- - {(theme) => ( -
- -
- - El texto se lee El Salvador Conectado con un logotipo formando una especie de abrazo - - - {/* */} - -

- - {"El Salvador es más "} - - si está conectado -

- - +const Header = ({ data, headerVh }) => { + const height = headerVh + const page = _.get(data, "wpgraphql.page", {}) + const header = _.get( + data, + "wpgraphql.page.customFields.bodySectionHeader", + {} + ) + const firstSlogan = _.get(header, "firstSlogan", "") + const secondSlogan = _.get(header, "secondSlogan", "") + const joinButton = _.get(header, "joinButton", { tex: "", href: "" }) + const backgroundImage = _.get(header, "backgroundImage", { wpUrl: "" }) + const errorMessageTitle = `Error: No existe página en Wordpress con URL slug + "content-page-home", se debe de crear desde + el administrador de Wordpress con el nombre ya mencionado. + + Además Wordpress necesita las instalación de ciertos plugins, + puedes encontrar la guía para implementarlo de forma local en la + Wiki del repositorio.` + const errorMessageBody = "https://github.com/svconectado/website/wiki" + return ( + +
+ + {() => ( +
+
+ + El texto se lee El Salvador Conectado con un logotipo formando una especie de abrazo + + + {/* */} + {!page && ( +
+ {errorMessageTitle} + 
{errorMessageBody}
-
- )} - -
- - ) - }} - /> -) + )} + {page && ( +

+ + {firstSlogan} + + {secondSlogan} +

+ )} + {page && ( + + )} +
+ + {_.get(backgroundImage, "authorName", "")} + +
+ )} + +
+ + ) +} const StyledWrapper = styled.div` .header__hero { - background-image: url(${(props) => props.imageFluid.src}); + background-image: url(${(props) => props.backgroundImage.wpUrl}); ${tw`bg-local bg-center bg-no-repeat bg-cover`} ${tw`relative`} @@ -94,7 +113,8 @@ const StyledWrapper = styled.div` z-index: 1; &__text { - ${tw`h-screen flex flex-col justify-around items-center`} + height: ${(props) => props.headerVh}vh; + ${tw`flex flex-col justify-around items-center`} ${tw`text-4xl`} &__logo { @@ -108,13 +128,21 @@ const StyledWrapper = styled.div` &__message { ${tw`text-center font-bold`} - ${tw`flex flex-col justify-center items-center`} + ${tw`flex flex-col justify-center items-center text-3xl`} &__light { ${tw`font-normal`} } } + &__error { + ${tw`flex flex-col items-center justify-center w-full pb-40`} + ${tw`text-sm`} + pre { + ${tw`w-full mt-4`} + } + } + &__button { ${tw`text-2xl font-bold underline`} @@ -126,7 +154,7 @@ const StyledWrapper = styled.div` content: ''; ${tw`absolute inset-0 h-full w-1/12`} background-color: #8ca2ec; - opacity: 0.50; + opacity: 0.3; transition: width 1s ease-out; } @@ -138,11 +166,19 @@ const StyledWrapper = styled.div` } } } + + &__credit { + ${tw`underline text-xs bottom-0 right-0`} + ${tw`absolute mr-4`} + min-width: auto; + min-height: auto; + opacity: 0.3; + } } } @media (min-width: ${CustomTheme.extend.screens.tablet}) { - .hero__container__text__button__href { + .header__hero__container__text__button__href { ${tw`text-3xl`} } @@ -169,6 +205,10 @@ const StyledWrapper = styled.div` &__button { ${tw`pt-8`} } + + &__error { + ${tw`pt-32 pb-0`} + } } } } @@ -185,5 +225,9 @@ const StyledWrapper = styled.div` } } ` +Header.defaultProps = { + data: {}, + headerVh: 100 +} export default Header diff --git a/src/components/layout.css b/src/components/layout.css index 20a2b92..e7cbba9 100644 --- a/src/components/layout.css +++ b/src/components/layout.css @@ -631,8 +631,6 @@ nav a { a { display: inline-block; - min-width: 50px; - min-height: 50px; } nav { @@ -646,29 +644,6 @@ nav ul { margin: 0; } -nav li { - margin: 5px; - position: relative; -} - -nav ul.sub-nav { - background-color: rebeccapurple; - border: 1px solid #fff; - display: none; - position: absolute; -} - -nav a:hover + ul.sub-nav, -nav a + ul.sub-nav:hover { - display: block; -} - -nav ul.sub-nav li { - margin: 5px; -} - - - /* Dark mode styles */ .dark-switcher { color: #fff; diff --git a/src/components/layout.js b/src/components/layout.js index bc50244..173af9c 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,27 +1,27 @@ import React from "react" -import PropTypes from "prop-types" import ThemeContext from "../context/ThemeContext" +import Menu from "./menu" import Header from "./header" import Footer from "./footer" import "./layout.css" import "./layoutPreview.scss" -const Layout = ({ children }) => ( +const Layout = ({ children, data, headerVh, showHeader, inspectScroll }) => ( {(theme) => (
-
-
- {children} -
+ + {showHeader &&
} +
{children}
)} ) -Layout.propTypes = { - children: PropTypes.node.isRequired +Layout.defaultProps = { + headerVh: 100, + showHeader: false } export default Layout diff --git a/src/components/layoutPreview.scss b/src/components/layoutPreview.scss index c7830fe..e4d26f5 100644 --- a/src/components/layoutPreview.scss +++ b/src/components/layoutPreview.scss @@ -10,7 +10,7 @@ h6 { line-height: 1.5; @apply font-montserrat font-medium; - @apply mt-5 mb-4; + @apply mt-10 mb-4; } h1, @@ -139,16 +139,20 @@ @apply italic; } - [class*="center"] { - @apply text-center; + figure { + @apply flex flex-col justify-center items-start; } - [class*="left"] { - @apply text-left; + figure[class*="center"] { + @apply items-center; } - [class*="right"] { - @apply text-right; + figure[class*="left"] { + @apply items-start; + } + + figure[class*="right"] { + @apply items-end; } img[class*="center"], diff --git a/src/components/menu.js b/src/components/menu.js index 5085be2..f31ec33 100644 --- a/src/components/menu.js +++ b/src/components/menu.js @@ -1,12 +1,459 @@ import React from "react" import { StaticQuery, graphql, Link } from "gatsby" +import styled from "styled-components" +import tw from "twin.macro" +import _ from "lodash" -export default () => ( +import { theme as CustomTheme } from "../../tailwind.config" +import ElSalvadorConectadoLogo from "../images/elsalvadorconectado-logo.svg" + +class Menu extends React.Component { + state = { + classNameBg: "", + showMobile: false + } + + componentDidMount() { + window.addEventListener("scroll", this.handleScroll) + + const { inspectScroll } = this.props + if (!inspectScroll) { + this.setState({ classNameBg: "--bg-blue" }) + } + } + + handleScroll = () => { + const { classNameBg } = this.state + const { inspectScroll } = this.props + if (inspectScroll) { + if (window.pageYOffset > 500) { + this.setState({ classNameBg: "--bg-blue" }) + } else if (classNameBg) { + this.setState({ classNameBg: "--not-bg" }) + } + } else { + this.setState({ classNameBg: "--bg-blue" }) + } + } + + handleMobileList = () => { + const { showMobile } = this.state + this.setState({ showMobile: !showMobile }) + } + + handleSubMenu = (param) => { + if (param.target.nodeName === "I") { + param.target.parentNode.parentNode.parentNode.classList.remove("--show") + } else if (param.target.lastChild.nodeName === "UL") { + param.target.lastChild.classList.add("--show") + } + } + + render() { + const { data } = this.props + const { classNameBg, showMobile } = this.state + const menuItems = _.get(data, "wpgraphql.menuItems") + return ( + + + + + ) + } +} + +const StyledWrapper = styled.div` + z-index: 2; + ${tw`fixed w-full`} + ${tw`font-poppins`} + + &.--bg-blue { + ${tw`bg-baseBlue`} + } + + &.--not-bg { + ${tw`bg-transparent`} + } + + .menu__mobile { + ${tw`justify-between py-4`} + + &__logo { + ${tw`h-8`} + + img { + ${tw`h-full`} + } + } + + &__bar-icon { + ${tw`text-3xl`} + ${tw`self-end`} + } + + &__list { + ${tw`invisible bg-baseBlue`} + ${tw`fixed w-full h-full inset-0 flex flex-col p-4`} + transition: transform 0.35s, opacity 0.45s, visibility 0.45s; + transform: translate(0, -100%); + opacity: 0; + + &.--show { + ${tw`visible`} + transform: translate(0); + opacity: 1; + } + + &__item { + border-color: rgba(255, 255, 255, 0.3); + ${tw`flex justify-center items-center border-b`} + + &.--has-items::after { + content: "\f105"; + font-family: fontAwesome; + ${tw`text-xl`} + } + + &.--close { + ${tw`text-3xl`} + ${tw`self-end border-b-0`} + } + + &__container { + ${tw`w-full`} + ${tw`text-left`} + } + + &__href, &__text { + ${tw`py-4`} + } + + &__text { + ${tw`inline-block`} + } + + &__sub-menu { + ${tw`invisible bg-baseBlue`} + ${tw`fixed w-full h-full inset-0 flex flex-col p-4`} + transition: transform 0.35s, opacity 0.45s, visibility 0.45s; + transform: translate(105%, 0); + opacity: 0; + z-index: 2; + + &.--show { + ${tw`visible`} + transform: translate(0); + opacity: 1; + } + + &__item { + border-color: rgba(255, 255, 255, 0.3); + ${tw`flex justify-start items-center border-b`} + ${tw`text-left`} + + &.--close { + ${tw`text-3xl`} + ${tw`justify-end border-b-0`} + } + + &__href, &__text { + ${tw`w-full py-4`} + } + + &__text { + ${tw`inline-block`} + } + } + } + } + } + } + + .menu { + ${tw`hidden`} + } + + @media (min-width: ${CustomTheme.extend.screens.laptop}) { + .menu { + ${tw`text-sm`} + ${tw`flex justify-between items-center py-4`} + + &__logo { + ${tw`h-8`} + + img { + ${tw`h-full`} + } + } + + &__list { + ${tw`text-xs`} + + &__item { + ${tw`flex justify-end items-center relative mb-0 ml-4`} + ${tw`cursor-pointer`} + + &.--has-items::after { + content: "\f107"; + font-family: fontAwesome; + margin-left: 5px; + } + + &:hover { + ${tw`underline`} + } + + &:hover > ul { + opacity: 1; + ${tw`visible`} + } + + &__sub-menu__list { + ${tw`text-blue text-xs`} + ${tw`invisible absolute bg-white rounded p-2 pb-0 border-b-4 border-blue`} + ${tw`flex flex-col justify-center`} + width: 250px; + top: 30px; + opacity: 0; + box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.08); + transition: transform 0.35s, visibility 0.35s, opacity 0.35s; + + &__item { + ${tw`text-right`} + ${tw`border-b pb-2`} + + &:hover > [class*="__href"]{ + ${tw`underline`} + } + + &__href { + ${tw`text-blue text-right`} + } + } + } + } + } + } + + .menu__mobile { + ${tw`hidden`} + } + } +` + +export default ({ inspectScroll }) => ( ( } } `} - render={(data) => ( - - )} + render={(data) => } /> ) + +Menu.defaultProps = { + data: {}, + inspectScroll: false +} diff --git a/src/components/postsListComponent.js b/src/components/postsListComponent.js index 97968a2..aaaf989 100644 --- a/src/components/postsListComponent.js +++ b/src/components/postsListComponent.js @@ -14,16 +14,19 @@ const PostsListComponent = ({ data, typeList }) => ( />
-

+

{!data.wpgraphql[typeList].posts.edges && ( -

- No hay publicaciones disponibles -

+

+ No hay publicaciones disponibles +

)} - {data.wpgraphql[typeList].posts.edges - && data.wpgraphql[typeList].posts.edges.map(({ node }) => ( - - ))} + {data.wpgraphql[typeList].posts.edges && + data.wpgraphql[typeList].posts.edges.map(({ node }) => ( + + ))}

diff --git a/src/components/seo.js b/src/components/seo.js index 6f0b929..4a34a92 100644 --- a/src/components/seo.js +++ b/src/components/seo.js @@ -10,9 +10,9 @@ import PropTypes from "prop-types" import Helmet from "react-helmet" import { useStaticQuery, graphql } from "gatsby" -function SEO({ - description, lang, meta, title -}) { +import BannerSEO from "../images/banner_seo.png" + +function SEO({ description, lang, meta, title, image }) { const { site } = useStaticQuery( graphql` query { @@ -28,7 +28,6 @@ function SEO({ ) const metaDescription = description || site.siteMetadata.description - return ( @@ -77,14 +84,16 @@ function SEO({ SEO.defaultProps = { lang: "en", meta: [], - description: "" + description: "", + image: BannerSEO } SEO.propTypes = { description: PropTypes.string, lang: PropTypes.string, meta: PropTypes.arrayOf(PropTypes.object), - title: PropTypes.string.isRequired + title: PropTypes.string.isRequired, + image: PropTypes.string } export default SEO diff --git a/src/context/ThemeContext.js b/src/context/ThemeContext.js index 05b59fc..2704003 100644 --- a/src/context/ThemeContext.js +++ b/src/context/ThemeContext.js @@ -7,7 +7,8 @@ const defaultState = { const ThemeContext = React.createContext(defaultState) // Getting dark mode information from OS! // You need macOS Mojave + Safari Technology Preview Release 68 to test this currently. -const supportsDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches === true +const supportsDarkMode = () => + window.matchMedia("(prefers-color-scheme: dark)").matches === true class ThemeProvider extends React.Component { state = { dark: false diff --git a/src/images/404.png b/src/images/404.png new file mode 100644 index 0000000..1055e98 Binary files /dev/null and b/src/images/404.png differ diff --git a/src/images/banner_seo.png b/src/images/banner_seo.png new file mode 100644 index 0000000..e140478 Binary files /dev/null and b/src/images/banner_seo.png differ diff --git a/src/pages/404.js b/src/pages/404.js index bc4c31d..8e21188 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,14 +1,41 @@ import React from "react" +import styled from "styled-components" +import tw from "twin.macro" +import { theme as CustomTheme } from "../../tailwind.config" import Layout from "../components/layout" import SEO from "../components/seo" +import notFoundImage from "../images/404.png" const NotFoundPage = () => ( -

NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

+ + No encontrado +

No encontrado

+

+ El contenido solicitado no está disponible. +

+ ) +const StyledWrapper = styled.div` + ${tw`flex flex-col justify-center items-center`} + ${tw`font-montserrat`} + ${tw`mt-20`} + + @media (min-width: ${CustomTheme.extend.screens.laptop}) { + .not-found { + &__image { + ${tw`w-2/6`} + } + } + } +` + export default NotFoundPage diff --git a/src/pages/index.js b/src/pages/index.js index ad8fa87..8760bad 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,115 +1,463 @@ import React from "react" -import { Link, graphql } from "gatsby" +import { graphql, Link } from "gatsby" +import styled from "styled-components" +import _ from "lodash" +import tw from "twin.macro" +import { theme as CustomTheme } from "../../tailwind.config" import Layout from "../components/layout" import SEO from "../components/seo" -const IndexPage = ({ data }) => ( - - -
-

My Blog

-

Posts

- {data.wpgraphql.posts.edges.map(({ node }) => ( -
- -
- -
-
- ))} -
-
-
-

Pages

- {data.wpgraphql.pages.edges.map(({ node }) => ( -
- -
- -
-
- ))} -
-
-
-

Categories

- {data.wpgraphql.categories.edges.map(({ node }) => ( -
- -
- -
- ))} -
-
-
-

Tags

- {data.wpgraphql.tags.edges.map(({ node }) => ( -
- -
- -
- ))} -
- -) +const IndexPage = ({ data }) => { + const page = _.get(data, "wpgraphql.page", {}) + const sectionMotivations = _.get( + data, + "wpgraphql.page.customFields.bodySectionMotivations", + {} + ) + const sectionAboutUs = _.get( + data, + "wpgraphql.page.customFields.bodySectionAboutUs", + {} + ) + const sectionInitiatives = _.get( + data, + "wpgraphql.page.customFields.bodySectionInitiatives", + {} + ) + const notFoundPageMessageError = "No existe la página solicitada" + return ( + // headerVh = vh units of the Viewport + + +
+ {!page && ( + + {notFoundPageMessageError} + + )} + {page && ( + +
+

+ {_.get(sectionMotivations, "title", "")} +

+ + {_.get(sectionMotivations, "firstDescription", "")} + + + {_.get(sectionMotivations, "secondDescription", "")} + +
+ {_.map( + _.get(sectionMotivations, "motivationsList", []), + (m) => ( +
+
+ {m.text} +
+ + {m.text} + +
+ ) + )} +
+
+ + )} + {page && ( + +
+
+

+ {_.get(sectionAboutUs, "title", "")} +

+ + + {_.get(sectionAboutUs, "firstDescription", "")} + + + {_.get(sectionAboutUs, "secondDescription", "")} + + + {_.get(sectionAboutUs, "moreButton.text", "")} + +
+ +
+ + )} + {page && ( + +
+

+ {_.get(sectionInitiatives, "title", "")} +

+ + {_.get(sectionInitiatives, "firstDescription", "")} + + + {_.get(sectionInitiatives, "secondDescription", "")} + + + {_.get(sectionInitiatives, "moreButton.text", "")} + +
+ + )} +
+ + ) +} -export default IndexPage +const StyleError = styled.div` + ${tw`font-poppins`} + ${tw`flex flex-col justify-center items-center py-20`} +` -export const pageQuery = graphql` - query GET_POSTS { - wpgraphql { - posts(first: 1000, after: null) { - edges { - node { - databaseId - slug - title - date - content(format: RENDERED) - featuredImage { - altText - link - mediaItemUrl - uri - } +const StyleSectionMotivations = styled.div` + .motivations { + ${tw`font-poppins text-center`} + ${tw`flex flex-col justify-center items-center pt-4 pb-12`} + + &__title { + ${tw`font-semibold`} + font-size: 2rem; + } + + &__first-description { + ${tw`mt-4 font-light`} + } + + &__second-description { + ${tw`mt-4 font-light`} + } + + &__list { + ${tw`flex flex-col justify-center items-center`} + + &__item { + ${tw`flex flex-col justify-center items-center mt-8 w-1/2`} + + &__icon { + ${tw`rounded-full shadow p-4 h-24 w-24`} + ${tw`flex flex-col justify-center items-center`} + + &__img { + ${tw`p-0 m-0`} } } + + &__text { + ${tw`mt-4 text-xl text-blue`} + } } - pages(first: 1000, after: null) { - edges { - node { - databaseId - slug - title - date - content(format: RENDERED) - featuredImage { - altText - link - mediaItemUrl - uri - } + } + } + + @media (min-width: ${CustomTheme.extend.screens.tablet}) { + .motivations { + ${tw`pb-12`} + + &__list { + ${tw`flex-row`} + + &__item { + ${tw`w-full`} + + &__icon { + ${tw`h-20 w-20`} + } + + &__text { + ${tw`text-sm`} } } } - categories(first: 1000) { - edges { - node { - databaseId - name - slug + } + } + + @media (min-width: ${CustomTheme.extend.screens.laptop}) { + .motivations { + ${tw`pb-16`} + + &__list { + &__item { + ${tw`px-4`} + &__text { + ${tw`text-base`} } } } - tags(first: 1000) { - edges { - node { - databaseId - name - slug + } + } + + @media (min-width: ${CustomTheme.extend.screens.desktop}) { + .motivations { + &__list { + &__item { + ${tw`px-8`} + } + } + } + } +` +const StyleSectionAboutUs = styled.div` + .aboutus { + ${tw`font-poppins text-center`} + ${tw`py-12 relative`} + + &::before, &::after { + content: ''; + height: 2px; + ${tw`absolute bg-gray w-full inset-0`} + } + + &::after { + ${tw`top-auto bottom-0`} + } + + &__text { + ${tw`flex flex-col`} + + &__title { + ${tw`font-semibold text-2xl`} + } + + &__img { + ${tw`flex items-end justify-end`} + ${tw`text-xs text-white`} + ${tw`rounded my-4 h-48`} + ${tw`bg-local bg-center bg-no-repeat bg-cover`} + background-image: url(${(props) => props.image.wpUrl}); + + &__credit { + ${tw`underline mr-4`} + min-width: auto; + min-height: auto; + opacity: 0.3; + } + } + + &__first-description { + ${tw`mt-4 font-light`} + } + + &__second-description { + ${tw`mt-4 font-light`} + } + + &__more-button { + ${tw`mt-8`} + ${tw`font-semibold underline`} + } + } + + &__media { + ${tw`hidden`} + } + } + +@media (min-width: ${CustomTheme.extend.screens.tablet}) { + .aboutus { + &__text { + &__img { + ${tw`bg-bottom`} + } + } + } +} + +@media (min-width: ${CustomTheme.extend.screens.laptop}) { + .aboutus { + ${tw`flex justify-between pt-16`} + ${tw`text-left`} + + &__text { + ${tw`flex-col w-6/12`} + + &__title { + ${tw`text-3xl`} + } + + &__img { + ${tw`hidden`} + } + } + + &__media { + ${tw`flex justify-center items-center w-5/12 text-white`} + + &__container { + ${tw`relative`} + + &__img { + ${tw`mb-0`} + } + + &__img__credit { + ${tw`underline text-xs`} + ${tw`absolute mr-4 bottom-0 right-0`} + min-width: auto; + min-height: auto; + opacity: 0.3; + } + } + } + } +} +` +const StyleSectionInitiatives = styled.div` + .initiatives { + ${tw`flex flex-col justify-center py-12`} + ${tw`font-poppins text-center`} + + &__title { + ${tw`font-semibold`} + font-size: 2rem; + } + + &__first-description { + ${tw`mt-4 font-light`} + } + + &__second-description { + ${tw`mt-4 font-light`} + } + + &__more-button { + ${tw`mt-8`} + ${tw`font-semibold underline`} + } + } + + @media (min-width: ${CustomTheme.extend.screens.laptop}) { + .initiatives { + ${tw`text-left`} + } + } +` + +export default IndexPage + +export const pageQuery = graphql` + query { + wpgraphql { + page(id: "content-page-home", idType: URI) { + id + customFields { + bodySectionHeader { + firstSlogan + secondSlogan + joinButton { + text + href + } + backgroundImage { + alt + authorName + authorProfile + sourceUrl + wpUrl + } + } + bodySectionMotivations { + title + firstDescription + secondDescription + motivationsList { + access { + icon + text + } + build { + icon + text + } + citizens { + icon + text + } + fight { + icon + text + } + help { + icon + text + } + } + } + bodySectionAboutUs { + title + firstDescription + secondDescription + moreButton { + text + href + } + image { + alt + authorName + authorProfile + sourceUrl + wpUrl + } + } + bodySectionInitiatives { + title + firstDescription + secondDescription + moreButton { + text + href + } + image { + alt + authorName + authorProfile + sourceUrl + wpUrl + } } } } diff --git a/src/templates/blog-page-template.js b/src/templates/blog-template.js similarity index 83% rename from src/templates/blog-page-template.js rename to src/templates/blog-template.js index d2d8305..c50acb0 100644 --- a/src/templates/blog-page-template.js +++ b/src/templates/blog-template.js @@ -8,22 +8,33 @@ import _ from "lodash" import { theme as CustomTheme } from "../../tailwind.config" import Layout from "../components/layout" import SEO from "../components/seo" +import BannerSEO from "../images/banner_seo.png" const BlogPageTemplate = ({ data }) => { - const { wpgraphql: { post } } = data + const { + wpgraphql: { post } + } = data const date = moment(post.date).format("DD MMM YYYY") - const author = `${_.get(post, "author.name", "")} ${_.get(post, "author.lastname", "")}` + const author = `${_.get(post, "author.name", "")} ${_.get( + post, + "author.lastname", + "" + )}` + const imageSEO = _.get(post, "featuredImage.mediaItemUrl", BannerSEO) return ( ]+(>|$)/g, "")} + image={imageSEO} />
{post.featuredImage && (
@@ -34,15 +45,11 @@ const BlogPageTemplate = ({ data }) => { />
- - { author } - + {author}  ·  - - { date } - + {date}
{post.tags.edges && (
@@ -52,10 +59,7 @@ const BlogPageTemplate = ({ data }) => { className="publication__details__tags__element" key={tag.node.id} > - - # - {tag.node.name} - + #{tag.node.name} ))}
@@ -73,6 +77,8 @@ const BlogPageTemplate = ({ data }) => { const LayoutWrapper = styled.div` .publication { + ${tw`pt-12`} + &__cover { ${tw`rounded-t`} ${tw`bg-local bg-center bg-no-repeat bg-cover`} diff --git a/src/templates/page-template.js b/src/templates/page-template.js new file mode 100644 index 0000000..1961a36 --- /dev/null +++ b/src/templates/page-template.js @@ -0,0 +1,87 @@ +import React from "react" +import { graphql } from "gatsby" +import styled from "styled-components" +import tw from "twin.macro" +import _ from "lodash" + +import Layout from "../components/layout" +import SEO from "../components/seo" +import BannerSEO from "../images/banner_seo.png" + +const BlogPageTemplate = ({ data }) => { + const { + wpgraphql: { post } + } = data + const imageSEO = _.get(post, "featuredImage.mediaItemUrl", BannerSEO) + return ( + + ]+(>|$)/g, "")} + image={imageSEO} + /> + +
+

+
+
+ + + ) +} + +const LayoutWrapper = styled.div` + .publication { + ${tw`pt-12`} + + &__title { + ${tw`font-semibold mt-6 mb-8`} + } + } +` + +export default BlogPageTemplate + +export const query = graphql` + query($databaseId: ID!) { + wpgraphql { + post(id: $databaseId, idType: DATABASE_ID) { + title + date + content(format: RENDERED) + categories { + edges { + node { + name + } + } + } + author { + name + lastName + } + tags { + edges { + node { + name + slug + } + } + } + excerpt(format: RENDERED) + featuredImage { + altText + title(format: RENDERED) + mediaItemUrl + slug + } + } + } + } +` diff --git a/tailwind.config.js b/tailwind.config.js index bd0378e..cf648a9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,13 +4,16 @@ module.exports = { colors: { gray: "#E9E9E9", graytext: "#555555", + blue: "#1748ED", separator: "#D6DFE0" }, backgroundColor: (theme) => ({ - gray: theme("colors.gray") + gray: theme("colors.gray"), + baseBlue: theme("colors.blue") }), textColor: (theme) => ({ - gray: theme("colors.graytext") + gray: theme("colors.graytext"), + blue: theme("colors.blue") }), fontFamily: { montserrat: "Montserrat, sans-serif", @@ -24,7 +27,8 @@ module.exports = { "10xl": "8rem" }, borderColor: (theme) => ({ - separator: theme("colors.separator") + separator: theme("colors.separator"), + blue: theme("colors.blue") }), // https://tailwindcss.com/docs/breakpoints // https://tailwindcss.com/docs/container