Rebirth Graphics

Headless WordPress + Next.js front-end

Based on: WordPress + React Starter Kit from Postlight

WordPress additions

This project relies on the connection between WordPress and Next.js based front-end.

I added few new REST API fields, which include:

• formatted_date - date with roman numerals as month numbers (inside post endpoint)
• tag_names - by default WP node API returns only tag IDs, which would generate the need to use two requests to get tag names, so I included them inside post endpoint

I also changed the length and ending of excerpt generated by WordPress.

Front-end

CSS

Modules

As for now, this project uses CSS Modules without scss support (built-in support for CSS modules was introduced to Next.js with version 9.3).

SCSS

This project uses Next.js built-in scss support for global and module styles.

Global styles

But except local styles I use global stylesheet in src/styles/style.scss.

Tailwind CSS

Most of the CSS is written using Tailwind CSS with the help of purgecss for production purposes (not yet implemented).

Pages

I use one of Next.js features, which are pages generated from pages folder. Those serve as templates for content received from node WPAPI. Local styles for pages (modules) are stored in styles subfolder.

The most important templates are:

• index.js - self-evident
• post.js - serves as template for both posts and pages from WordPress
• category.js - serves as template for category view

Category

Back-end posts colletion

On the back-end in server.js there is specific path which accepts two regex parameters:

• :slug (from category slugs)
• :page - it is a number of page on which we are currently

It then renders category page with posts endpoint.

It provides queryParams:

• page - from :page parameter
• categories - as an ID converted from category slug
• slug - from :slug
• per_page - number of post to return per page (which is ignored, because a value from getInitialProps is used)

getInitialProps

On the front-end category uses node WPAPI for post API requests.

It uses function to get ID from slug provided in url query.

Then it returns multiple values:

• posts - list of post
• total - number of posts in category (for pagination)
• totalPages - number of pages in category (for pagination)
• queryPage - current page

Pagination

This page uses react-paginating for pagination purposes, but it also introduces two methods to generate first, last page buttons and ellipsis (...) when needed.

firstLastButtonHandler(currentPage, pageNumber, isOnTheLeft, slug, totalPages)

ellipsisHandler(currentPage, totalPages, isOnTheLeft)

Component specific information

eslint

I adhere mostly to the Airbnb code style with minor changes, which include:

• disabling error on console.log (for development purposes)
• allowing the usage of ES7 state class property
• removing parenthesis from single argument arrow functions
• disabling error on underscore dangling (some WordPress specific data is included with underscore)

License

This project is licensed under the GNU GPL v2.