title | path |
---|---|
Example |
/example |
import Layout from "../components/layout/layout" import { Helmet } from 'react-helmet';
import React from "react"; | |
import "./_about.scss"; | |
import { FormattedMessage, useIntl } from "gatsby-plugin-intl" | |
import AboutEN from "./about.en.mdx" | |
import AboutPT from "./about.pt.mdx" | |
import AboutES from "./about.es.mdx" | |
export default function Header() { | |
const intl = useIntl() | |
return ( | |
<div id="about"> | |
<div className="container"> | |
<h2 className="about-title"> | |
About the project | |
</h2> | |
<div className="about-content"> | |
<div className="project-description"> | |
{ intl.locale == 'en' && | |
<AboutEN /> | |
} | |
{ intl.locale == 'pt' && | |
<AboutPT /> | |
} | |
{ intl.locale == 'es' && | |
<AboutES /> | |
} | |
{/* Continues... */} | |
) | |
} |
/** | |
* Configure your Gatsby site with this file. | |
* | |
* See: https://www.gatsbyjs.org/docs/gatsby-config/ | |
*/ | |
/** | |
* Configure your Gatsby site with this file. | |
* | |
* See: https://www.gatsbyjs.org/docs/gatsby-config/ | |
*/ | |
module.exports = { | |
/* Your site config here */ | |
plugins: [ | |
`gatsby-plugin-react-helmet`, | |
`gatsby-plugin-sass`, | |
`gatsby-plugin-sharp`, | |
`gatsby-remark-images`, | |
{ | |
resolve: `gatsby-plugin-mdx`, | |
options: { | |
gatsbyRemarkPlugins: [ | |
{ | |
resolve: `gatsby-remark-images`, | |
options: { | |
maxWidth: 1200, | |
}, | |
}, | |
], | |
defaultLayouts: { | |
default: require.resolve("./src/components/reports/report-layout.js"), | |
}, | |
}, | |
}, | |
{ | |
resolve: `gatsby-source-filesystem`, | |
options: { | |
name: `images`, | |
path: `${__dirname}/src/images`, | |
}, | |
}, | |
{ | |
resolve: "gatsby-source-filesystem", | |
options: { | |
name: "fonts", | |
path: `${__dirname}/static/fonts/` | |
}, | |
}, | |
{ | |
resolve: `gatsby-source-filesystem`, | |
options: { | |
name: `pages`, | |
path: `${__dirname}/src/pages/`, | |
}, | |
}, | |
{ | |
resolve: 'gatsby-plugin-i18n', | |
options: { | |
langKeyDefault: 'en', | |
useLangKeyLayout: false, | |
prefixDefault: false, | |
}, | |
}, | |
{ | |
resolve: `gatsby-plugin-intl`, | |
options: { | |
// language JSON resource path | |
path: `${__dirname}/src/lang`, | |
// supported language | |
languages: [`en`, `pt`, `es`], | |
// language file path | |
defaultLanguage: `en`, | |
// option to redirect to `/en` when connecting `/` | |
redirect: false, | |
}, | |
}, | |
{ | |
resolve: 'gatsby-plugin-react-svg', | |
options: { | |
rule: { | |
exclude: /\.src\.svg$/, | |
}, | |
}, | |
}, | |
], | |
} | |
Thi is my project structure, for reference:
gatsby-site
|_ src
|_ components
|_ images
|_ lang
|_ pages
| |_ index.js
| |_ example.mdx
|_ styles