Writers Print Gatsby theme
Writers Print is a blazing fast, beautiful Gatsby blog theme designed to showcase your work in style. Perfect for designers, artists, photographers and developers to use for their blog websites. For a preview of theme visit website. It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.
Update blog metadata like, description, social media account, title and more in packages/[DEMO_FOLDER]/src/gatsby-config.js file.
Features
- A simple landing page with blog functionality
- Editable Pages: Landing, About, Blog-post and Contact page with Netlify Form support
- Create Blog posts from Netlify CMS
- Manage newsletter subscribtion with Mailchimp
- Basic directory organization
- Uses Bulma for styling, but size is reduced by
purge-css-plugin - Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
- Separate components for everything
- Netlify deploy configuration
- Netlify function support, see
lambdafolder
Prerequisites
- Node (I recommend using v8.2.0 or higher)
- Gatsby CLI
Installation
Once you obtain a copy of this software, it is very easy to start making changes to your blog locally, just run the following command:
$ cd [PROJECT_DIRECTORY_NAME]
$ yarn
To run Minimal Demo
$ yarn start:minimal
To run Photography Demo
$ yarn start:photography
To run Magazine Demo
$ yarn start:magazine
To run Lifestyle Demo
$ yarn start:lifestyle
Writers Print comes with a configured Netlify CMS for creating blog post. To use the netlfiy CMS please follow the instructions on Netlify CMS
Architecture
Your development directory would be in packages/[DEMO_FOLDER]/src folder.
Styles
The packages/[DEMO_FOLDER]/src/styles folder contains all styles except specified component styles which are in the component's folder.
Components
The packages/[DEMO_FOLDER]/src/components folder contains all components used by the project
Template
The packages/[DEMO_FOLDER]/src/templates folder contains contains all templates used to display specific markdown data.
Images
Primary location for all images used in the project is in packages/[DEMO_FOLDER]/src/img folder. (Note: Writers Print uses gatsby-plugin-react-svg to process svg that ends with .inline.svg for imports in component. You can change the rule in the gatsby-config.js file)
Blog Posts Markdown
The packages/[DEMO_FOLDER]/src/pages/blog folder contains all markdown for blog posts to be queried by GraphQL and displayed on the Blog post template. Blog posts are recommended to be named in date-blogtitle.md format, for example; 2016-12-17-making-sense-of-scss.md.
Blog Posts frontmatter
Frontmatter format for all blog posts
| Property | Type | Example |
|---|---|---|
| templatekey | string | blog-post |
| title | string | How to optimize React apps |
| date | datetime | 2018-12-17T15:04:10.000Z |
| featuredpost | boolean | false |
| image | string | /img/cristinh.jpg |
| imageCredit | string | |
| description | string | The Coffee Taster’s Flavor Wheel |
| tags | list | -flavor - tasting |
Templates
Blog post template
This a template for each blog posts which runs two queries, one that accepts an id context from created page in gatsby-node.js and another that queries all posts with related tags.
Shared UI Components
Writersprint has a shared ui component for all demos located in packages/shared-ui/src
Blog Roll
Writersprint comes with already made blog roll component with styled-components. This creates a styled lists of blog posts.
BlogRoll
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | no | Heading to be display | |
| onLoadMore | Function | no | Called when load more button is clicked | |
| id | string | yes | Unique id for the blog roll component. It is also used to load specific styles corresponding with the css id | |
| showLoadMoreButton | boolean | no | false | Determines whether to render load more button |
| onLinkClick | Function | no | Called on each post link when clicked |
GridBlogRoll
Contains accepts all properties of BlogRoll.
DividedBlogRoll
Contains accepts all properties of BlogRoll.
CascadingBlogRoll
Contains accepts all properties of BlogRoll.
Contact form
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| useNetlifyForm | boolean | no | Determines whether to use Netlify Form. (Note: Netlify form requires specific data passed to forms. so set it to true if you desire to use netlify forms.) | |
| actionURL | string | yes | '/' | Form action value |
Featured posts
Writersprint come with already made featured posts component layouts with styled-components. This renders a styled lists of 5 featured posts passed in to the posts property.
MainFeaturedPosts
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| posts | array<GraphQLEdge |
yes | A list of posts from the graphql query |
CarouselFeaturedPosts
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| posts | array<GraphQLEdge |
yes | A list of posts from the graphql query | |
| delay | number | no | 7000 | Time to swtich between each slide in carousel |
CardFeaturedPosts
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| posts | array<GraphQLEdge |
yes | A list of posts from the graphql query | |
| delay | number | no | 7000 | Time to swtich between each slide in carousel |
Header
Writersprint come with 2 already made Header component layouts with styled-components.
Header
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| links | array |
yes | header links | |
| siteMetadata | SiteMetaData | yes | An object of siteMetadata set in your gatsby-config.js | |
| logo | string | yes | SVG version of your site logo | |
| width | "full" or "half" | no | full | Determines whether to display header with 100% or 50% width |
| position | "fixed" or "sticky" | no | sticky | Sets the CSS position of the header |
| height | string | no | 80px | Height of the header |
| hideBorder | boolean | no | false | Determines whether to show border lines around search and menu icons |
| background | string | no | #ffffff | Background of header |
| mobileLogo | string | no | logo | SVG version of your site logo for the mobile nav bar |
| posts | array<GraphQLEdge |
yes | A list of posts from the graphql query to be used in the search components to find a particular post |
ClassicHeader
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| links | array |
yes | header links | |
| siteMetadata | SiteMetaData | yes | An object of siteMetadata set in your gatsby-config.js | |
| logo | string | yes | SVG version of your site logo | |
| mobileLogo | string | no | logo | SVG version of your site logo for the mobile nav bar |
| posts | array<GraphQLEdge |
yes | A list of posts from the graphql query |
LinksProp
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| to | string | no | Route to Gatsby page | |
| name | string | yes | Inner text for link |
Layout
Writersprint come with already made Laayout component with styled-components.
MainLayout
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| withFooter | boolean | no | true | Decideds whether to show footer or not |
| pageLinks | array |
no | { name: "Home", to: "/" }, { name: "About", to: "/about" }, { name: "Contact", to: "/contact" }, { name: "404", to: "/404" } | This uses gatsby link to navaigate to paths |
| posts | array<GraphQLEdge |
yes | An array of all posts from GraphQl query to be passed to the header | |
| footerLogo | string | yes | SVG version of your site logo for the footer | |
| logo | string | yes | SVG version of your site logo | |
| mobileLogo | string | no | logo | SVG version of your site logo for the mobile nav bar. This uses logo default. |
| siteMetadata | SiteMetaData | yes | An object of siteMetadata set in your gatsby-config.js |
GridLayout
This extends MainLayout, meaning is accepts all properties of MainLayout.
SplitLayout
This extends MainLayout, meaning is accepts all properties of MainLayout with its own distinct properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| leftSide | ReactELement | yes | What should be rendered on the left side of the layout | |
| rightSide | ReactELement | yes | What should be rendered on the right side of the layout | |
| id | string | no | Passes a distinct string to the splitLayout inner main-container |
Scrollup button
Scroll to top button.
Search
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| onClose | Function | yes | Called on Close button click | |
| posts | array<GraphQLEdge |
yes | An array of all posts from GraphQl query to be passed to the header |
HTMLContent
This renders a string as HTML content by setting dangerouslySetInnerHTML.\_\_html value.
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| content | string | yes | Html content | |
| className | string | yes | className value |
Newsletter
Adds email to mailchimp subscribe list in your account
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | yes | Unique id for the Newsletter component. It is also used to load specific styles corresponding with the css id. | |
| successMessage | string | no | "Thank you for subscribing" | success message |
| mailchimpURL | string | yes | mailchimp form url |
SEO
SEO component that queries for data with Gatsby's useStaticQuery React hook
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| description | string | no | site description | |
| lang | string | no | site lang | |
| meta | string | no | site meta | |
| title | string | no | site title |
Building
$ yarn build:[DEMO_FOLDER]
$ yarn run build
$ yarn run serve
Debugging
Windows users might encounter node-gyp errors when trying to npm install.
To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.
npm config set python python2.7
npm install --global --production windows-build-tools
MacOS users might also encounter some errors, for more info check node-gyp. We recommend using the latest stable node version.
Purgecss
This plugin uses gatsby-plugin-purgecss and bulma. The bulma builds are usually ~170K but reduced 90% by purgecss.
Configuration
This plugin uses gatsby-plugin-purgecss and bulma. The bulma builds are usually ~170K but reduced 90% by purgecss.
-67d01e30d055b46e66e6251c98a4d34a.png)
-4529bc32ff14e2f15abb6de8d76ff23d.png)
-d1f9108402bea89cef7830c06615184f.png)
-3081a9bde6497949b9792622d97f0950.png)