This project was converting static HTML/CSS pages to SSG(static server generator) - Gatsby.
And also implementing HeadlessCMS - Prismic with Multi-Language support.
Below are the things that I've done
Created multi-lang page on Prismic. You can use GraphQL query to load multi-lang page content.
Used WP GraphQL.
Utilized WP GraphQL and WP GraphQL Extensions such as WP GraphQL ACF, WP GraphQL gutenberg blocks and WP GraphQL Gravity Forms.
Multi-lang implemented by using i18n package. After install i18n, you have to create files for supporting multi-lang. ex: index.fr.js: this file will be called when URL is /fr/
Javascript window.onload() function over-writing problem solved. it doesn't work well in developing environment, but works well on the product after built and deployed to surge.
Used Helmet for importing js library on pages. Also used withPrefix() function for loading script after document load.
Convert React component to gatsby components. In the original version, they used React components as a javascript library.
Solve SSR errors. When building the project, some objects such as document and window is not allowed on the server-side. So the variables and functions that referenced that object make errors when building. So we have to check if document or window is defined.
Create imgLoader service instance to load all images. Because, Gatsby is a static site generator, all assets resources directory change when it has built. So need imgLoader service.
Deployed on surge using the surge command line. ex: surge public\
Convert static web pages to Gatsby Project.
Create a new Gatsby project.