@cangir/gatsby-theme-phoenix v0.0.3
Themes
Flex
Flex is a Gatsby theme that lets you build your site by writing simple components inside Markdown files.
Phoenix
Architecture
All included themes are composed themes, which means they make use of multiple core themes for core types and a child theme for styles and latent component shadowing. This architecture allows themes to be flexible and customizable.
The following diagram shows an example of theme composition for @arshad/gatsby-theme-phoenix.
As you can see, you can easily swap @arshad/gatsby-theme-phoenix with your own theme and styles, keeping all functionality unchanged.
Core themes
The following core themes are available. They bundle core types and functionality. They include no styles and are meant to be consumed by other themes or sites. Use them to compose and build your own themes.
To learn more about theme composition, check out the official docs.
| Name | Version | Description |
|---|---|---|
@arshad/gatsby-theme-core | Shared types and helpers for @arshad/gatsby-themes | |
@arshad/gatsby-theme-blog-core | Adds a Post type that you can use to build a blog. Includes post excerpt, featured image, tags/categories and paginated pages. | |
@arshad/gatsby-theme-page-core | Adds a Page type with MDX support. Includes code highlighting with prismjs. | |
@arshad/gatsby-theme-photo-core | Adds a Photo type that you can use to build a photography site. | |
@arshad/gatsby-theme-podcast-core | Adds a Podcast and PodcastEpisode types that you can use to build a podcast site. Podcast episodes are pulled from podcast feed. | |
@arshad/gatsby-theme-portfolio-core | Adds a Project types that you can use to build a portfolio site. |
Click on the theme page to learn more about the core theme and how to use it.
Usage
Browse our free themes or create your own. You can mix and match core themes to compose your Gatsby site.
Example
To build a portfolio site with a blog, run the following command in your site.
yarn add @arshad/gatsby-theme-portfolio-core @arshad/gatsby-theme-blog-coreThen enable the themes in your gatsby-config.js
// gatsby-config.js
...
plugins: [
`@arshad/gatsby-theme-blog-core`,
`@arshad/gatsby-theme-portfolio-core`
]
...To disable a core theme, run yarn remove @arshad/gatsby-theme-name and then remove it from your gatsby-config.js file.
Support
Need help? Create an issue on the main repo @arshad/gatsby-themes or ask me @arshadcn.