I am a member of The Church of Jesus Christ of Latter-day Saints. In my church, we are encouraged to do a lot of scripture study and annotate what we learn. All members have the opportunity to receive a patriarchal blessing, which is a personalized blessing that we see as divine guidance, almost as if it were a chapter of scripture written just for us.In that vein, I decided to create this tool so that members could have their blessings styled to look like the other pages of the scriptures.
What I learned
Dealing with docx and pdf files in programming is hard. Tooling around those file formats is not elegant, and I worked hard to build a pipeline that would perform efficiently when running in serverless functions. This was also my first foray into modeling frontend flows using state machines, but I believe I’ve become somewhat enamored.
I also built some fun SVG animations using GSAP for the first time. It has sparked an interest in using animations in my work.
See the Pen Writing icon animation SVG & GSAP by Karey Higuera (@kbravh) on CodePen.
See the Pen Floating Magic Scroll SVG and GSAP by Karey Higuera (@kbravh) on CodePen.
The Tech
Scriptly is a React site built with GatsbyJS. All frontend logic and orchestration is handled through a state machine with X-State. The back-end system is powered by two Lambda functions: the first function will create a docx file using the docxtemplater library; the second function runs a headless version of LibreOffice to convert that docx to a pdf. I decided to use a Word document template to create the documents because it was the best method I found to create the page layout with the two columns and the footnote section.
Internationalization is handled via react-intl.