Final Draft (live)

Final Draft is Dorm Room Fund's go-to blog for all things student entrepreneruship.

General Architecture

1. NodeJS application powered by the Next.JS framework.
2. WordPress.com headless CMS backend.
3. WPGraphQL plugin to power WordPress GraphQL endpoint.
4. Apollo to retrieve and cache posts.
5. Mailchimp for Newsletter subscription.
6. Puppeteer for dynamic meta image generation.

Project structure

├── apollo
│   ├── index.js # Exports apollo client
│   ├── parse.js # Functions to clean query responses
│   └── queries.js # GraphQL queries
├── components
│   ├── Layout.js # Layout wrapper. Handles header, content, footer, meta.
│   └── Newsletter.js # Mailchimp Newsletter CTA component
├── pages
│   ├── 404.js # 404 page
│   ├── _app.js
│   ├── _document.js
│   ├── api
│   │   └── meta.js  # Renders dynamic meta image based on post slug
│   ├── index.js # Home page
│   ├── post
│   │   └── [slug].js # Individual post page
│   └── search.js # Search page
├── public
│   ├── brand # Brand assets
│   ├── favicon # Favicons
│   ├── fonts # Font files
│   └── vectors # Vector (SVG) assets
├── styles # Stylesheets
├── utils
│   └── index.js # Convenient hooks (useLocalStorage)
├── .env.local.sample # Environment variables
├── .gitignore
├── .prettierrc
├── README.md
├── custom.php # Custom PHP functions for WordPress.com headless CMS
├── jsconfig.json # Better absolute path configuration
├── package.json
└── yarn.lock

Prerequisites

There are a few configuration details (in terms of setting up the headless WordPress.com CMS) that must be run through before testing locally or deploying.

1. Install the WPGraphQL and wp-graphql-reading-time plugins on WordPress.
2. Change the Permalink settings under Settings > Permalinks to a Post name url structure. This is necessary to reference posts by their slug.

Because WordPress.com, unlike WordPress.org, does not allow editing source php files, a workaround is used for the following steps:

3. Download the Twenty Seventeen (or any other) theme locally.
4. Modify the functions.php file in the root of the Twenty Seventeen theme to include the required php custom functions from custom.php. These can go anywhere in the file.
5. Compress the Twenty Seventeen folder into a single .zip file.
6. Upload the theme to WordPress and activate it.

For future maintainability, do note, WordPress.com does not allow you to overwrite the same theme. Thus, if you need to make multiple changes, you cannot keep reuploading the Twenty Seventeen theme. To bypass this, you must:

7. Get the SFTP credentials for WordPress.com from the dashboard.
8. Delete the twentyseventeen directory under wp-content/themes/.
9. Now you can reupload your locally edited theme. Note: WordPress will still show Twenty Seventeen as active, but it isn't—it has already fallen back to another theme by this point.

Run locally

Duplicate .env.local.sample to .env.local and replace NEXT_PUBLIC_WP_URL and NEXT_PUBLIC_MAILCHIMP_POST_URL with your headless WordPress CMS and Mailchimp list subscription form URLs. Then:

# Install dependencies
yarn

# Run locally
yarn dev

Deploy

The following instructions are to deploy to Heroku.

# Add puppetter buildpack (first-time)
heroku buildpacks:add --index 1 https://github.com/jontewks/puppeteer-heroku-buildpack

# Add NodeJS buildpack (first-time)
heroku buildpacks:add --index 1 heroku/nodejs

# Push to Heroku
git push heroku master

License

GNU Affero General Public License v3.0