gatsby-theme-wordpress-mdx v1.0.5
This Plugin is a union of two worlds π the old WordPress and the new MDX. You can use WP, MDX or both
Demo
Features
- Theme UI-based theming
- react-animated-css
- MDX source
- WP source
Only 3 Steps π€―
1.- Installation β
npm install gatsby-theme-wordpress-mdx
2.- Configuration β
// gatsby-config.js
siteMetadata: {
title: 'MDX WP',
description: 'It is a WP with MDX blog ',
keywords: ['GatsbyJs', 'React', 'theme-ui'],
siteURL: 'https://artezan-blog.netlify.com', // No trailing slash allowed!
siteImage: '/preview.png', // Path to your image you placed in the 'static' folder
twitterUsername: '@CArtezan',
author: {
name: 'Cesar Artezan'
}
},
plugins: [
resolve: 'gatsby-theme-wordpress-mdx',
options:
{
// Requiered
sourceWordpress: {
sourcePost: true, // if true install gatsby-source-wordpress
sourcePage: true, // if true install gatsby-source-wordpress
},
// Requiered
sourceMdxPosts: true, // if true create `src/posts`
logo: `src/images/logo.svg` // This path is relative to the root of the site.
}
]
3.- Folder Structure π
src/index.mdx
is required, in this file you can generate the landing pagesrc/page
is required, it is without "s" because mdx pluginsrc/sections
is required but it could be empty, this folder is for the sections imported in index.mdx
Root
β README.md
β gatsby-config.js
ββββsrc
β ββββgatsby-plugin-theme-ui
β β β index.js
β ββββposts
β β β mdx files
β ββββpage
β β β mdx files
β ββββsections
β β β mdx files
β ββββimages
β β β png jpg svg files
β β β logo.svg
β β index.mdx
β
ββββstatic
β file021.png
β favicon.ico
And that's it, now you can start code in index.mdx your landing page and the others page in src/page
π¨βπ»
Advance options
Theme options βοΈ
Keys | Child Keys | Type | Required | Description | |
---|---|---|---|---|---|
sourceWordpress | Obj | True β | Turn on/off the source of page or post of WP | ||
sourcePost | Boolean | False | true if you want to use wp post source, requires gatsby-source-wordpress | ||
sourcePage | False | true if you, want to use wp page source, requires gatsby-source-wordpress | |||
sourceMdxPosts | Boolean | True β | true if you, want to use mdx post source | ||
headerHeight | Number | False | px of the header bar, default 64 px | ||
sideBarWidth | Number | False | px of the side bar, default 240 px | ||
navButtonTheme | Obj | Flase | This key is for the btn that change the colors modes of the themes Color modes | ||
showButtonTheme | Boolean | False | Show the btn | ||
text | String | False | Text inside the btn, otherwise it will show the name of the theme | ||
colorsModes | String | False | This Array contains the posible themes, otherwise it will show all the themes | ||
colorModes | Obj | False | Use this obj if you want to set as default a specific theme | ||
default | String | False | Name of the theme | ||
logo | String | False | This path is relative to the root of the site. And show the logo in the header bar |
Example usage π
// gatsby-config.js
resolve: 'gatsby-theme-wordpress-mdx',
options:
{
// Requiered
sourceWordpress: {
sourcePost: true,
sourcePage: true,
},
// Requiered
sourceMdxPosts: true,
// config optional
headerHeight: 64,
sideBarWidth: 240,
navButtonTheme: {
showButtonTheme: true
text: 'Change',
colorsModes: ['deep', 'purple']
},
colorModes: {
default: 'gray'
},
logo: `src/images/logo.svg` // This path is relative to the root of the site.
}
Additional configuration βοΈ
In addition to the theme options, there are a handful of items you can customize via the siteMetadata
object in your site's gatsby-config.js
// gatsby-config.js
module.exports = {
siteMetadata: {
title: 'MDX WP',
description: 'It is a WP with MDX blog ',
keywords: ['GatsbyJs', 'React', 'theme-ui'],
siteURL: 'http://artezan-blog.netlify.com',
// Used for og:image and must be placed inside the `static` folder
siteImage: '/preview.png'
}
}
For preview img see developer twitter
Extending Themes and Colors π¦
Please read the guide Shadowing in Gatsby Themes and Extending a theme to understand how to customize the this theme! Generally speaking you will want to place your files into src/@artezan/gatsby-theme-wordpress-mdx/
to shadow/override files. The Theme UI config can be configured by shadowing its files in src/gatsby-plugin-theme-ui/
.
Colors Helpers
In src/gatsby-plugin-theme-ui/index.js
this is the basic colors keys
colors: {
// Color of headers
text: '#ffffff',
// Color of <p>
textSecondary: '#ccd0d6',
// color of hover button and placeholder
textMuted: '#667284',
primary: '#04d0d9',
secondary: '#FBF8EF',
muted: '#262c35',
background: '#353e4a',
transparent: `rgba(0,0,0,0)`,
imgShadow: '11px 7px 20px 12px rgb(0, 0, 0)',
shadowCard: '',
backgroundNavBar: '#353e4a',
backgroundSideBar: '#353e4a',
activeTextBar: '#FBF8EF',
textBar: '#04d0d9',
backgroundCard: '#262c35',
borderRadiusCard: 1,
}
For advance options
colors: {
text: '#ffffff',
textSecondary: '#ccd0d6',
textMuted: '#667284',
primary: '#04d0d9',
secondary: '#FBF8EF',
muted: '#262c35',
background: '#353e4a',
// box-shadow for imgon landing
imgShadow: '11px 7px 20px 12px rgb(0, 0, 0)',
// box-shadow for all the cards
shadowCard: '',
// background-color for the navbar
backgroundNavBar: 'background',
//background-color for side bar
backgroundSideBar: 'background',
// color for active item
activeTextBar: 'secondary',
// color for items on side and header bar
textBar: 'primary',
// border for cards
borderRadiusCard: 1,
// background-color for cards
backgroundCard: 'muted',
// :hover for cards
hoverCard: {
filter: 'brightness(105%)'
},
// :focus for Link
onClickLink: {},
// :focus for cards
onClickCard: { filter: 'brightness(105%)' }
}
Editing the content ποΈ
In src/index.mdx
must have at least:
---
title: index
layout: landing
---
Your landing page here
Not matter what kind of file, you can add a Fluid IMG in the front matter like this:
---
nameImage: about-image1.jpg
---
## Title
And then acces to the imagen with props.imagesFluid['about-image1.jpg']
or
---
nameImage: [about-image1.jpg, about-image2.jpg]
---
## Title
And then acces to the imagen with props.imagesFluid['about-image2.jpg']
props.imagesFluid['about-image1.jpg']
General Variable
Inside src/index.mdx
you can access to this variable:
props.imagesFluid
Array of IMG in the front matter imagesFluidnameImg.pngprops.context
Contex of Theme ui see contextprops.colorMode
Color Modeprops.setColorMode
Set Colorprops.allMdxWpPosts
Array of all postprops.allMdxWpPages
Array of all Pages
Short Codes
- All the short codes have the
sx
prop for styles see sx-prop
Code | props | description |
---|---|---|
<AboutLayout /> | Layout for about section | |
sx | style | |
aboutImageFluid | Fluid Img | |
<AllPosts /> | Returns a list of cards with all posts | |
numOfPosts | number of the post to show | |
showSearchBar | Show a search bar that filter by tags | |
<BgImage /> | For more info see (gatsby-background-image)https://www.gatsbyjs.org/packages/gatsby-background-image/ | |
` | | Change the colors modes | ||
themes | Array of the posible themes, if it dont set returns all the themes | |
Children | Text of the btn, otherwise the txt of the btn will be the name of the theme | |
<ContainerWrapper /> | Container with max-width | |
FeaturesWrapper | Flex container for features | |
<FeatureLayout /> | Layout for feature sections, this will show a img on the top and text on the bottom | |
featureImageFluid | Fluid img for feature | |
<ImgGatsby /> | Short code for gatsby-image | |
<Div /> | div tag with sx props | |
<SocialLink /> | Generate a btn icon that redirect to a social link (facebook, twitter, etc) | |