Skip to content

Commit

Permalink
Merge pull request #30 from oriolcastro/development
Browse files Browse the repository at this point in the history
Development
  • Loading branch information
oriolcastro committed Apr 22, 2020
2 parents 9e45371 + 04e921d commit 734c844
Show file tree
Hide file tree
Showing 11 changed files with 127 additions and 92 deletions.
35 changes: 4 additions & 31 deletions gatsby-config.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
const config = require('./src/meta/siteConfig');
require('dotenv').config();

const {
NODE_ENV,
URL: NETLIFY_SITE_URL = 'https://www.example.com',
DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
CONTEXT: NETLIFY_ENV = NODE_ENV,
} = process.env;
const isNetlifyProduction = NETLIFY_ENV === 'production';
const siteUrl = isNetlifyProduction ? NETLIFY_SITE_URL : NETLIFY_DEPLOY_URL;

module.exports = {
siteMetadata: {
title: config.siteTitle,
titleTemplate: "%s · Oriol's Blog",
description: config.siteDescription,
siteUrl,
url: config.siteUrl,
twitterUsername: config.userTwitter,
},
plugins: [
'gatsby-plugin-react-helmet',
Expand Down Expand Up @@ -127,27 +120,7 @@ module.exports = {
icon: 'src/img/icon.png',
},
},
{
resolve: 'gatsby-plugin-robots-txt',
options: {
resolveEnv: () => NETLIFY_ENV,
env: {
production: {
policy: [{ userAgent: '*' }],
},
'branch-deploy': {
policy: [{ userAgent: '*', disallow: ['/'] }],
sitemap: null,
host: null,
},
'deploy-preview': {
policy: [{ userAgent: '*', disallow: ['/'] }],
sitemap: null,
host: null,
},
},
},
},
'gatsby-plugin-robots-txt',
'gatsby-plugin-offline',
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
Expand Down
54 changes: 27 additions & 27 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@
"@pauliescanlon/gatsby-mdx-embed": "0.0.17",
"@theme-ui/typography": "^0.3.0",
"dotenv": "^8.2.0",
"gatsby": "^2.20.26",
"gatsby": "^2.20.28",
"gatsby-image": "^2.3.4",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-catch-links": "^2.2.3",
"gatsby-plugin-google-analytics": "^2.2.4",
"gatsby-plugin-manifest": "^2.3.5",
"gatsby-plugin-manifest": "^2.3.6",
"gatsby-plugin-mdx": "^1.1.9",
"gatsby-plugin-netlify": "^2.2.3",
"gatsby-plugin-offline": "^3.1.4",
Expand All @@ -73,7 +73,7 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-icons": "^3.9.0",
"react-icons": "^3.10.0",
"react-live": "^2.2.2",
"theme-ui": "^0.3.1",
"typeface-merriweather": "0.0.72",
Expand Down Expand Up @@ -101,7 +101,7 @@
"eslint-plugin-simple-import-sort": "^5.0.2",
"gatsby-plugin-eslint": "^2.0.8",
"husky": "^4.2.5",
"lint-staged": "^10.1.6",
"lint-staged": "^10.1.7",
"prettier": "^2.0.4",
"prettier-eslint": "^9.0.1",
"remark-preset-prettier": "^0.4.0",
Expand Down
2 changes: 0 additions & 2 deletions src/components/Layout.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ import { Container, Flex, jsx } from 'theme-ui';

import Footer from './Footer';
import Navbar from './Navbar';
import SEO from './SEO';

const TemplateWrapper = ({ children }) => (
<Flex sx={{ flexDirection: 'column', minHeight: '100vh' }}>
<SEO />
<Navbar />
<Container sx={{ px: 3, flex: '1 1 auto' }}>{children}</Container>
<Footer />
Expand Down
77 changes: 61 additions & 16 deletions src/components/SEO.jsx
Original file line number Diff line number Diff line change
@@ -1,44 +1,89 @@
import React from 'react';
import { Helmet } from 'react-helmet';

import { graphql, useStaticQuery } from 'gatsby';

import PropTypes from 'prop-types';

import favicon from '../img/favicon.ico';
import config from '../meta/siteConfig';

const SEO = () => {
const { siteTitle, siteTitleAlt, siteDescription, siteUrl, userTwitter } = config.siteTitle;
const query = graphql`
query SEO {
site {
siteMetadata {
defaultTitle: title
titleTemplate
defaultDescription: description
siteUrl: url
twitterUsername
}
}
}
`;

const SEO = ({ title, description, image, pathname, article }) => {
const {
site: {
siteMetadata: { defaultTitle, titleTemplate, defaultDescription, siteUrl, twitterUsername },
},
} = useStaticQuery(query);
const seo = {
title: title || defaultTitle,
description: description || defaultDescription,
image: `${siteUrl}${image}`,
url: `${siteUrl}${pathname || '/'}`,
};

const schemaOrgJSONLD = [
{
'@context': 'http://schema.org',
'@type': 'WebSite',
url: siteUrl,
name: siteTitle,
alternateName: siteTitleAlt || '',
url: seo.url,
name: seo.title,
alternateName: seo.title,
},
];

return (
<Helmet>
<Helmet title={seo.title} titleTemplate={titleTemplate}>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<html lang="en" />
<link rel="icon" href={favicon} />
{/* General tags */}
<title>{siteTitle}</title>
<meta name="description" content={siteDescription} />
<meta name="description" content={seo.description} />
{image && <meta name="image" content={seo.image} />}
{/* Schema.org tags */}
<script type="application/ld+json">{JSON.stringify(schemaOrgJSONLD)}</script>
{/* OpenGraph tags */}
<meta property="og:title" content={siteTitle} />
<meta property="og:url" content={siteUrl} />
<meta property="og:description" content={siteDescription} />
{seo.url && <meta property="og:url" content={seo.url} />}
{(article ? true : null) && <meta property="og:type" content="article" />}
{seo.title && <meta property="og:title" content={seo.title} />}
{seo.description && <meta property="og:description" content={seo.description} />}
{image && <meta property="og:image" content={seo.image} />}
{/* Twitter Card tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content={userTwitter || ''} />
<meta name="twitter:title" content={siteTitle} />
<meta name="twitter:description" content={siteDescription} />
{twitterUsername && <meta name="twitter:creator" content={twitterUsername} />}
{seo.title && <meta name="twitter:title" content={seo.title} />}
{seo.description && <meta name="twitter:description" content={seo.description} />}
{image && <meta name="twitter:card" content="summary_large_image" />}
{image && <meta name="twitter:image" content={seo.image} />}
</Helmet>
);
};

export default SEO;

SEO.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
image: PropTypes.string,
pathname: PropTypes.string,
article: PropTypes.bool,
};
SEO.defaultProps = {
title: null,
description: null,
image: '',
pathname: null,
article: false,
};
6 changes: 3 additions & 3 deletions src/meta/siteConfig.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
module.exports = {
siteTitle: 'Oriol Castro',
siteTitleAlt: 'Oriol',
siteTitle: "Oriol's Blog",
siteTitleAlt: "Oriol's Blog",
publisher: 'Oriol Castro',
siteDescription:
'Personal site where I share my thought about technology and my job as self-taught front-end developer.',
siteUrl: 'https://oriolcastro.me',
shortTitle: 'Oriol Castro',
shortTitle: "Oriol's Blog",
userTwitter: '@oriolcastro_',
backgroundColor: '#fff',
themeColor: '#0F52BA',
Expand Down
5 changes: 4 additions & 1 deletion src/pages/about/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ coverImg: p1030836_edited.jpeg

export const pageMeta = {
title: 'A little bit about me',
description: 'A quick introduction into my journy and who am I'
};

import { graphql } from 'gatsby';
import { Helmet } from 'react-helmet';

My name is Oriol Casto Arnau and I'm a front-end developer living in a beautiful Mediterranean small city called Vilanova i la Geltrú near Barcelona and fully connected to the world.

Expand Down Expand Up @@ -55,6 +55,9 @@ export const aboutPageQuery = graphql`
fluid(maxWidth: 1400, maxHeight: 700) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
original: fluid{
src
}
}
}
}
Expand Down
9 changes: 3 additions & 6 deletions src/pages/blog.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
/** @jsx jsx */
import { Helmet } from 'react-helmet';

import { graphql } from 'gatsby';

import { Grid, Heading, jsx } from 'theme-ui';

import Layout from '@components/Layout';
import PostCard from '@components/PostCard';
import SEO from '@components/SEO';

const BlogPage = ({ data }) => {
const BlogPage = ({ data, path }) => {
const { edges: posts } = data.allMdx;

return (
<Layout>
<Helmet>
<title>{`${data.site.siteMetadata.title} - Blog`}</title>
</Helmet>
<SEO title="Latest articles" description="Latest articles in my blog" pathname={path} />
<Heading as="h1" sx={{ mb: 5 }}>
Blog
</Heading>
Expand Down

0 comments on commit 734c844

Please sign in to comment.