ArmandPhilippot / apcom

The frontend of ArmandPhilippot.com using Next JS.

APcom

The source code of my personal website.

Introduction

The website is built with Next.js, WordPress as headless CMS and MDX. To translate the website in French, I use Formatjs. For syntax highlighting, I use Prism. Others dependencies are used, feel free to take a look at package.json.

In addition to WordPress, the backend use:

• ACF
• acf-post2post
• apcom-cpt (the custom post types used)
• wp-graphql
• wp-graphql-content-stats
• wp-graphql-get-extended
• wp-graphql-gravatar
• wp-graphql-send-mail

Private dependencies

Even if the source code and the contents are under free licenses, I don't want to see pure clones of my website. So I use a private repo as submodule to handle MDX content. Its structure looks like:

/
|--assets/
   |-- image.jpg
   |-- image2.jpg
|--pages/
   |-- page1.mdx
   |-- page2.mdx
|--projects/
   |-- project1.mdx

Other contents come from WordPress as headless CMS.

Production

First step

Clone this repo, then:

cp .env.example .env

Then, in any case, you need a reverse-proxy if you want to bind the live app to a domain.

With Docker

Make sure Docker and Docker Compose are installed then, you can run: sudo docker-compose up -d --build <service-name>.

<service-name> is optional. You don't need it the first time. However, if you want to rebuild and update only one container, it can be useful.

If you wish to use custom ports, you can edit your .env file and specify APP_DOCKER_PORT and APP_STAGING_DOCKER_PORT variables. By default the ports are respectively 3000 and 3200.

If you are using Docker Swarm, you can instead use the deploy script to ensure that environment variables are loaded:

sh ./bin/deploy.sh

Without Docker

Just run yarn build && yarn start.

Development

First step

Clone this repo, then:

cp .env.example .env

And edit the different values.

Second step

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result. Then, you can make your changes.

Storybook

You can search for a component or develop a new component in isolation thanks to Storybook.

yarn storybook

The different components are divided into 4 categories (atomic design):

• Atoms
• Molecules
• Organisms
• Templates

But, to be honest, between Molecules and Organisms some components may be misclassified.

i18n

When editing strings that require translation, run:

yarn run i18n:extract

Then copy/edit the corresponding strings inside src/i18n/fr.json.

If you need another language:

cp src/i18n/en.json src/i18n/[locale].json

Replace [locale] with your desired locale. Then edit this file to translate all the strings.

Once ready, run to update the website translation:

yarn run i18n:compile

Testing

This project is configured to support both Jest and Cypress tests with Testing Library.

You can run both tests with yarn test.

Jest

The tests are located alongside components (src/components/).

You can run Jest tests with yarn test:unit.

Cypress

The tests are located in tests/cypress/e2e/. All texts (to find an element) needs to be written in French since Next.js is configured to only accept this language.

You can run Cypress tests with yarn test:e2e.

Licenses

The source code is licensed under the MIT license.
The contents are licensed under the CC BY SA license.