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
- [Live Preview](https://artezan-blog.netlify.com/)
- [Source Code](https://github.com/artezan/gatsby-theme-wordpress-mdx).
## Features
- Theme UI-based theming
- react-animated-css
- MDX source
- WP source
## Only 3 Steps π€―
### 1.- Installation β
```sh
npm install gatsby-theme-wordpress-mdx
```
### 2.- Configuration β
```js
// 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 page
- `src/page` is required, it is without "s" because mdx plugin
- `src/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](https://theme-ui.com/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 π
```js
// 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`
```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](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image)
### Extending Themes and Colors π¦
Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.org/docs/themes/shadowing/) and [Extending a theme](https://theme-ui.com/packages/gatsby-plugin#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
```js
colors: {
// Color of headers
text: '#ffffff',
// Color of
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
```js
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:
```md
---
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:
```md
---
nameImage: about-image1.jpg
---
## Title
```
And then acces to the imagen with `props.imagesFluid['about-image1.jpg']`
or
```md
---
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 [context](https://theme-ui.com/api#context)
- `props.colorMode` [Color Mode](https://theme-ui.com/api#usecolormode)
- `props.setColorMode` [Set Color](https://theme-ui.com/color-modes#setting-the-color-mode)
- `props.allMdxWpPosts` Array of all post
- `props.allMdxWpPages` Array of all Pages
### Short Codes
- All the short codes have the `sx` prop for styles see [sx-prop](https://theme-ui.com/sx-prop/)
| Code | props | description |
| -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
| `` | | Layout for about section |
| | sx | style |
| | aboutImageFluid | Fluid Img |
| `` | | Returns a list of cards with all posts |
| | numOfPosts | number of the post to show |
| | showSearchBar | Show a search bar that filter by tags |
| `` | | 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 |
| `` | | Container with max-width |
| FeaturesWrapper | | Flex container for features |
| `` | | Layout for feature sections, this will show a img on the top and text on the bottom |
| | featureImageFluid | Fluid img for feature |
| `` | | Short code for `gatsby-image` |
| `
` | | `div` tag with sx props |
| `` | | Generate a btn icon that redirect to a social link (facebook, twitter, etc) |
| | | |