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
lambda
folder
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.