gatsby-theme-wordpress-mdx
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.jssiteMetadata: 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.jsmoduleexports = 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: indexlayout: 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 imagesFluid[nameImg.png]props.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) | |